吉鹏 / gulu-vue

Compare View

switch
from
...
to
 
Commits (3)
Showing 2 changed files   Show diff stats
src/pages/cart/cart.vue
Diff comments   View file @0466216
1 <template> 1 <template>
2 <view class="content"> 2 <view class="content">
3 <block v-if="cartList.length==0"> 3 <block v-if="cartList.length==0">
4 4
5 </block> 5 </block>
6 <block v-else> 6 <block v-else>
7 <view class="card"> 7 <view class="card">
8 <view class="cardHeader"> 8 <view class="cardHeader">
9 <view v-bind:class="pIsoPen? 'partentChecked' : 'partentCheck'" 9 <view v-bind:class="pIsoPen? 'partentChecked' : 'partentCheck'"
10 @tap="pChange(pIsoPen)"> 10 @tap="pChange(pIsoPen)">
11 <span class="correct"></span> 11 <span class="correct"></span>
12 </view> 12 </view>
13 <image src="../../static/store.png" mode="aspectFill"></image> 13 <image src="../../static/store.png" mode="aspectFill"></image>
14 <text>非常戴镜</text> 14 <text>非常戴镜</text>
15 </view> 15 </view>
16 16
17 <view class="cardBody" v-for="(item,index) in cartList" :key="item.cart_id" 17 <view class="cardBody" v-for="(item,index) in cartList" :key="item.cart_id"
18 @longpress="delCart(item.cart_id,index)"> 18 @longpress="delCart(item.cart_id,index)">
19 <view v-bind:class="childIsOpen[index]? 'partentChecked':'partentCheck'" 19 <view v-bind:class="childIsOpen[index]? 'partentChecked':'partentCheck'"
20 @tap="Change(childIsOpen[index],index)"> 20 @tap="Change(childIsOpen[index],index)">
21 <span class="correct"></span> 21 <span class="correct"></span>
22 </view> 22 </view>
23 <view class="imageWrap"> 23 <view class="imageWrap">
24 <image :src="item.img_index_url" mode="aspectFit" style="width: 188rpx;height: 168rpx;"></image> 24 <image :src="item.img_index_url" mode="aspectFit" style="width: 188rpx;height: 168rpx;"></image>
25 </view> 25 </view>
26 <view class="goodInfo"> 26 <view class="goodInfo">
27 <!-- <view class="imageWrap"> 27 <!-- <view class="imageWrap">
28 <image :src="item.img_index_url" mode="aspectFit" style="width: 188rpx;height: 168rpx;"></image> 28 <image :src="item.img_index_url" mode="aspectFit" style="width: 188rpx;height: 168rpx;"></image>
29 </view> --> 29 </view> -->
30 <view class="infoRight"> 30 <view class="infoRight">
31 <view class="goodName" @tap="toGoods(item.pid,item.sk_id)">{{item.p_name}}</view> 31 <view class="goodName" @tap="toGoods(item.pid,item.sk_id)">{{item.p_name}}</view>
32 <!-- <view class="describ"> --> 32 <!-- <view class="describ"> -->
33 <uni-collapse accordion="true" > 33 <uni-collapse accordion="true" >
34 <uni-collapse-item showAnimation='true' 34 <uni-collapse-item showAnimation='true'
35 :title="item.tag.prod_tag_fun[0].label+'/'+item.tag.prod_tag_fun[1].label+'/'+item.tag.prod_tag_fun[2].label+'...' || '暂无'" > 35 :title="item.tag.prod_tag_fun[0].label+'/'+item.tag.prod_tag_fun[1].label+'/'+item.tag.prod_tag_fun[2].label+'...' || '暂无'" >
36 <text class="describ"> 36 <text class="describ">
37 <block v-for="tag in item.tag.prod_tag_fun" :key="tag.value"> 37 <block v-for="tag in item.tag.prod_tag_fun" :key="tag.value">
38 {{tag.label+`&nbsp;&nbsp;`}} 38 {{tag.label+`&nbsp;&nbsp;`}}
39 </block> 39 </block>
40 </text> 40 </text>
41 <!-- <text> 41 <!-- <text>
42 <block v-for="tag in item.tag.prod_tag_style" :key="tag.value"> 42 <block v-for="tag in item.tag.prod_tag_style" :key="tag.value">
43 {{tag.label+`&nbsp;&nbsp;`}} 43 {{tag.label+`&nbsp;&nbsp;`}}
44 </block> 44 </block>
45 </text> --> 45 </text> -->
46 </uni-collapse-item> 46 </uni-collapse-item>
47 </uni-collapse> 47 </uni-collapse>
48 <!-- <view v-bind:class="collapseList[index]? 'icon':'iconed'"></view> --> 48 <!-- <view v-bind:class="collapseList[index]? 'icon':'iconed'"></view> -->
49 <!-- </view> --> 49 <!-- </view> -->
50 <view class="priceBox"> 50 <view class="priceBox">
51 <view class="price">￥{{item.nowPrice*item.num}}</view> 51 <view class="price">￥{{item.nowPrice*item.num}}</view>
52 <text class="maxCount">(限购{{maxCount}}副)</text> 52 <text class="maxCount">(限购{{maxCount}}副)</text>
53 <view class="counter"> 53 <view class="counter">
54 <view class="btn" disabled="this.addDisabled" type="default" 54 <view class="btn" disabled="this.addDisabled" type="default"
55 @tap="counter(index,false,item)">-</view> 55 @tap="counter(index,false,item)">-</view>
56 <text>{{item.num}}</text> 56 <text>{{item.num}}</text>
57 <view class="btn" disabled="this.desDisabled" type="default" 57 <view class="btn" disabled="this.desDisabled" type="default"
58 @tap="counter(index,true,item)">+</view> 58 @tap="counter(index,true,item)">+</view>
59 </view> 59 </view>
60 </view> 60 </view>
61 </view> 61 </view>
62 </view> 62 </view>
63 </view> 63 </view>
64 </view> 64 </view>
65 </block> 65 </block>
66 <view class="footer"> 66 <view class="footer">
67 <view class="footerLeft">实付金额:<text>￥{{totalPrice}}</text></view> 67 <view class="footerLeft">实付金额:<text>￥{{totalPrice}}</text></view>
68 <view class="footerRight"> 68 <view class="footerRight">
69 <navigator url="/pages/confirmOrder/confirmOrder" hover-class="navigator-hover"> 69 <navigator url="/pages/confirmOrder/confirmOrder" hover-class="navigator-hover">
70 <view class="paybtn" >立即结算</view> 70 <view class="paybtn" >立即结算</view>
71 </navigator> 71 </navigator>
72 </view> 72 </view>
73 </view> 73 </view>
74 74
75 </view> 75 </view>
76 </template> 76 </template>
77 77
78 <script> 78 <script>
79 import UniCollapse from '@/components/UniCollapse/UniCollapse.vue' 79 import UniCollapse from '@/components/UniCollapse/UniCollapse.vue'
80 import UniCollapseItem from '@/components/UniCollapseItem/UniCollapseItem.vue' 80 import UniCollapseItem from '@/components/UniCollapseItem/UniCollapseItem.vue'
81 import store from '@/store' 81 import store from '@/store'
82 82
83 export default { 83 export default {
84 components: { UniCollapse, UniCollapseItem }, 84 components: { UniCollapse, UniCollapseItem },
85 data() { 85 data() {
86 return { 86 return {
87 totalPrice: 0, 87 totalPrice: 0,
88 pIsoPen: false, 88 pIsoPen: false,
89 // childIsOpen:[], 89 // childIsOpen:[],
90 maxCount: 20 90 maxCount: 20
91 } 91 }
92 }, 92 },
93 computed: { 93 computed: {
94 94
95 cartList() { 95 cartList() {
96 // console.log('cart-list', this.$store.state.cart.cartList); 96 // console.log('cart-list', this.$store.state.cart.cartList);
97 return this.$store.state.cart.cartList 97 return this.$store.state.cart.cartList
98 }, 98 },
99 childIsOpen() { 99 childIsOpen() {
100 const temp = [] 100 const temp = []
101 temp.length = this.$store.state.cart.cartList.length 101 temp.length = this.$store.state.cart.cartList.length
102 for (let i = 0; i < temp.length; i++) { 102 for (let i = 0; i < temp.length; i++) {
103 temp[i] = false 103 temp[i] = false
104 } 104 }
105 console.log('this.childisOPne===>', temp) 105 console.log('this.childisOPne===>', temp)
106 return temp 106 return temp
107 } 107 }
108 }, 108 },
109 onLoad: function() { 109 onLoad: function() {
110 // store.dispatch('cart/addCart', { 110 // store.dispatch('cart/addCart', {
111 // uid: this.$store.state.user.userInfo.uid, 111 // uid: this.$store.state.user.userInfo.uid,
112 // openid: this.$store.state.user.userInfo.openid, 112 // openid: this.$store.state.user.userInfo.openid,
113 // mp_id: 7, 113 // mp_id: 7,
114 // sk_id: 7, 114 // sk_id: 7,
115 // num: 1, 115 // num: 1,
116 // pid: 8, 116 // pid: 8,
117 // price: 128, 117 // price: 128,
118 // checkedSKU:{}, 118 // checkedSKU:{},
119 // }) 119 // })
120 store.dispatch('cart/getCartList', { 120 store.dispatch('cart/getCartList', {
121 uid: this.$store.state.user.userInfo.uid // 用户id 121 uid: this.$store.state.user.userInfo.uid // 用户id
122 }) 122 })
123 }, 123 },
124 124
125 methods: { 125 methods: {
126 126
127 toGoods(id, sk_id) { 127 toGoods(id, sk_id) {
128 console.log('cart-list', this.$store.state.cart.cartList); 128 console.log('cart-list', this.$store.state.cart.cartList);
129 console.log('---', '../frameDetail/frameDetail?pid=' + id +'&sk_id='+sk_id) 129 console.log('---', '../frameDetail/frameDetail?pid=' + id +'&sk_id='+sk_id)
130 uni.navigateTo({ 130 uni.navigateTo({
131 url: '../frameDetail/frameDetail?pid=' + id+'&sk_id='+sk_id, 131 url: '../frameDetail/frameDetail?pid=' + id+'&sk_id='+sk_id,
132 success: res => {}, 132 success: res => {},
133 fail: () => {}, 133 fail: () => {},
134 complete: () => {} 134 complete: () => {}
135 }) 135 })
136 // uni.navigateTo({ 136 // uni.navigateTo({
137 // url: '../frameDetail/frameDetail?oderId=' + id, 137 // url: '../frameDetail/frameDetail?oderId=' + id,
138 // success: res => {}, 138 // success: res => {},
139 // fail: () => {}, 139 // fail: () => {},
140 // complete: () => {} 140 // complete: () => {}
141 // }) 141 // })
142 // console.log('toGoods =====> id:' + id + '======>type:' + type) 142 // console.log('toGoods =====> id:' + id + '======>type:' + type)
143 // switch (type) { 143 // switch (type) {
144 // case 1: 144 // case 1:
145 // uni.navigateTo({ 145 // uni.navigateTo({
146 // url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type, 146 // url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type,
147 // success: res => {}, 147 // success: res => {},
148 // fail: () => {}, 148 // fail: () => {},
149 // complete: () => {} 149 // complete: () => {}
150 // }) 150 // })
151 // break 151 // break
152 // case 2: 152 // case 2:
153 // uni.navigateTo({ 153 // uni.navigateTo({
154 // url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type, 154 // url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type,
155 // success: res => {}, 155 // success: res => {},
156 // fail: () => {}, 156 // fail: () => {},
157 // complete: () => {} 157 // complete: () => {}
158 // }) 158 // })
159 // break 159 // break
160 // case 3: 160 // case 3:
161 // uni.navigateTo({ 161 // uni.navigateTo({
162 // url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type, 162 // url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type,
163 // success: res => {}, 163 // success: res => {},
164 // fail: () => {}, 164 // fail: () => {},
165 // complete: () => {} 165 // complete: () => {}
166 // }) 166 // })
167 // break 167 // break
168 // case 4: 168 // case 4:
169 // uni.navigateTo({ 169 // uni.navigateTo({
170 // url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type, 170 // url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type,
171 // success: res => {}, 171 // success: res => {},
172 // fail: () => {}, 172 // fail: () => {},
173 // complete: () => {} 173 // complete: () => {}
174 // }) 174 // })
175 // break 175 // break
176 // default : 176 // default :
177 // break 177 // break
178 // } 178 // }
179 }, 179 },
180 180
181 counter(index, isadd, item) { 181 counter(index, isadd, item) {
182 // console.log('===>>counter ===>num',num) 182 // console.log('===>>counter ===>num',num)
183 // console.log('===>>counter ===>isadd',isadd) 183 // console.log('===>>counter ===>isadd',isadd)
184 console.log('item=====>',item) 184 console.log('item=====>',item)
185 console.log('num=====>',item.num) 185 console.log('num=====>',item.num)
186 let nums = parseInt(item.num) 186 let nums = parseInt(item.num)
187 if (isadd) { 187 if (isadd) {
188 if (nums >= this.maxCount) { 188 if (nums >= this.maxCount) {
189 this.addDisabled = true 189 this.addDisabled = true
190 } else { 190 } else {
191 this.addDisabled = true 191 this.addDisabled = true
192 // 修改num 192 // 修改num
193 if (this.childIsOpen[index]) { 193 if (this.childIsOpen[index]) {
194 this.totalPrice = this.totalPrice + this.$store.state.cart.cartList[index].nowPrice 194 this.totalPrice = this.totalPrice + this.$store.state.cart.cartList[index].nowPrice
195 } 195 }
196 store.dispatch('cart/modiCart', { 196 store.dispatch('cart/modiCart', {
197 uid: this.$store.state.user.userInfo.uid, 197 uid: this.$store.state.user.userInfo.uid,
198 openid: this.$store.state.user.userInfo.openid, 198 openid: this.$store.state.user.userInfo.openid,
199 mp_id: item.mp_id, 199 mp_id: item.mp_id,
200 sk_id: item.sk_id, 200 sk_id: item.sk_id,
201 price: item.nowPrice, 201 price: item.nowPrice,
202 pid: item.pid, 202 pid: item.pid,
203 num: nums + 1, 203 num: nums + 1,
204 cart_id: item.cart_id, 204 cart_id: item.cart_id,
205 args: { 205 args: {
206 index: index, 206 index: index,
207 isadd: isadd 207 isadd: isadd
208 } 208 }
209 }) 209 })
210 this.addDisabled = false 210 this.addDisabled = false
211 } 211 }
212 } else { 212 } else {
213 if (nums <= 1) { 213 if (nums <= 1) {
214 this.desDisabled = true 214 this.desDisabled = true
215 } else { 215 } else {
216 this.desDisabled = false 216 this.desDisabled = false
217 // post 请求修改相关参数 217 // post 请求修改相关参数
218 if (this.childIsOpen[index]) { 218 if (this.childIsOpen[index]) {
219 this.totalPrice = this.totalPrice - this.$store.state.cart.cartList[index].nowPrice 219 this.totalPrice = this.totalPrice - this.$store.state.cart.cartList[index].nowPrice
220 } 220 }
221 store.dispatch('cart/modiCart', { 221 store.dispatch('cart/modiCart', {
222 uid: this.$store.state.user.userInfo.uid, 222 uid: this.$store.state.user.userInfo.uid,
223 openid: this.$store.state.user.userInfo.openid, 223 openid: this.$store.state.user.userInfo.openid,
224 mp_id: item.mp_id, 224 mp_id: item.mp_id,
225 sk_id: item.sk_id, 225 sk_id: item.sk_id,
226 price: item.nowPrice, 226 price: item.nowPrice,
227 pid: item.pid, 227 pid: item.pid,
228 num: nums - 1, 228 num: nums - 1,
229 cart_id: item.cart_id, 229 cart_id: item.cart_id,
230 args: { 230 args: {
231 index: index, 231 index: index,
232 isadd: isadd 232 isadd: isadd
233 } 233 }
234 }) 234 })
235 this.desDisabled = true 235 this.desDisabled = true
236 } 236 }
237 } 237 }
238 // store.dispatch('cart/getCartList', { 238 // store.dispatch('cart/getCartList', {
239 // uid: this.$store.state.user.userInfo.uid // 用户id 239 // uid: this.$store.state.user.userInfo.uid // 用户id
240 // }) 240 // })
241 }, 241 },
242 242
243 Change(isopen, indexC) { 243 Change(isopen, indexC) {
244 // console.log('lalla===>',isopen) 244 // console.log('lalla===>',isopen)
245 this.childIsOpen[indexC] = !isopen 245 this.childIsOpen[indexC] = !isopen
246 if (!isopen) { 246 if (!isopen) {
247 this.totalPrice = this.totalPrice + (this.$store.state.cart.cartList[indexC].num * this.$store.state.cart.cartList[indexC].nowPrice) 247 this.totalPrice = this.totalPrice + (this.$store.state.cart.cartList[indexC].num * this.$store.state.cart.cartList[indexC].nowPrice)
248 } else { 248 } else {
249 this.totalPrice = this.totalPrice - (this.$store.state.cart.cartList[indexC].num * this.$store.state.cart.cartList[indexC].nowPrice) 249 this.totalPrice = this.totalPrice - (this.$store.state.cart.cartList[indexC].num * this.$store.state.cart.cartList[indexC].nowPrice)
250 } 250 }
251 let m = true 251 let m = true
252 for (let i = 0; i < this.childIsOpen.length; i++) { 252 for (let i = 0; i < this.childIsOpen.length; i++) {
253 m = m & this.childIsOpen[i] 253 m = m & this.childIsOpen[i]
254 } 254 }
255 if (m == 1) { 255 if (m == 1) {
256 this.pIsoPen = true 256 this.pIsoPen = true
257 } else { 257 } else {
258 this.pIsoPen = false 258 this.pIsoPen = false
259 } 259 }
260 }, 260 },
261 pChange(isopen) { 261 pChange(isopen) {
262 this.pIsoPen = !isopen 262 this.pIsoPen = !isopen
263 for (let i = 0; i < this.childIsOpen.length; i++) { 263 for (let i = 0; i < this.childIsOpen.length; i++) {
264 this.childIsOpen[i] = !isopen 264 this.childIsOpen[i] = !isopen
265 } 265 }
266 if (this.pIsoPen) { 266 if (this.pIsoPen) {
267 // 计算总价逻辑 267 // 计算总价逻辑
268 if (this.childIsOpen.length != 0) { 268 if (this.childIsOpen.length != 0) {
269 for (let i = 0; i < this.childIsOpen.length; i++) { 269 for (let i = 0; i < this.childIsOpen.length; i++) {
270 if (this.childIsOpen[i]) { 270 if (this.childIsOpen[i]) {
271 this.totalPrice = this.totalPrice + (this.$store.state.cart.cartList[i].num * this.$store.state.cart.cartList[i].nowPrice) 271 this.totalPrice = this.totalPrice + (this.$store.state.cart.cartList[i].num * this.$store.state.cart.cartList[i].nowPrice)
272 } 272 }
273 } 273 }
274 } 274 }
275 } else { 275 } else {
276 this.totalPrice = 0 276 this.totalPrice = 0
277 } 277 }
278 }, 278 },
279 delCart(cart_id, index) { 279 delCart(cart_id, index) {
280 // console.log('userInfo',this.$store.state.user.userInfo) 280 // console.log('userInfo',this.$store.state.user.userInfo)
281 cart_id = parseInt(cart_id) 281 cart_id = parseInt(cart_id)
282 // console.log('delcart------>cart_id',cart_id) 282 // console.log('delcart------>cart_id',cart_id)
283 // console.log('cartlist====>delcart',this.$store.state.cart.cartList) 283 // console.log('cartlist====>delcart',this.$store.state.cart.cartList)
284 // console.log('delcart======>index',index) 284 // console.log('delcart======>index',index)
285 const uid=this.$store.state.user.userInfo.uid 285 const uid=this.$store.state.user.userInfo.uid
286 const openid=this.$store.state.user.userInfo.openid 286 const openid=this.$store.state.user.userInfo.openid
287 uni.showModal({ 287 uni.showModal({
288 title: '是否删除该商品', 288 title: '是否删除该商品',
289 // content: '是否删除该商品', 289 // content: '是否删除该商品',
290 success: function (res) { 290 success: function (res) {
291 if (res.confirm) { 291 if (res.confirm) {
292 // this.$store.state.cart.cartList.splice(index,1) 292 // this.$store.state.cart.cartList.splice(index,1)
293 store.dispatch('cart/delCart', { 293 store.dispatch('cart/delCart', {
294 uid: uid, 294 uid: uid,
295 openid: openid, 295 openid: openid,
296 cart_id: cart_id, // 要修改的购物车id 296 cart_id: cart_id, // 要修改的购物车id
297 arg: index // 由于action 传参是能接收两参数，因此将index放入对象 297 arg: index // 由于action 传参是能接收两参数，因此将index放入对象
298 }) 298 })
299 console.log('用户点击确定') 299 console.log('用户点击确定')
300 } 300 }
301 } 301 }
302 }) 302 })
303 } 303 }
304 } 304 }
305 } 305 }
306 </script> 306 </script>
307 307
308 <style lang="scss"> 308 <style lang="scss">
309 .content { 309 .content {
310 min-height: 100vh; 310 min-height: 100vh;
311 background-color: #f2f2f2; 311 background-color: #f2f2f2;
312 display: flex; 312 display: flex;
313 flex-direction: column; 313 flex-direction: column;
314 align-items: center; 314 align-items: center;
315 justify-content: space-between; 315 justify-content: space-between;
316 padding: 20rpx 40rpx; 316 padding: 20rpx 40rpx;
317 box-sizing: border-box; 317 box-sizing: border-box;
318 318
319 .partentCheck{ 319 .partentCheck{
320 width: 16px; 320 width: 16px;
321 height: 16px; 321 height: 16px;
322 border-radius: 22px; 322 border-radius: 22px;
323 border: 1px solid #CFCFCF; 323 border: 1px solid #CFCFCF;
324 background-color: #FFFFFF; 324 background-color: #FFFFFF;
325 margin: 6px; 325 margin: 6px;
326 } 326 }
327 .partentChecked{ 327 .partentChecked{
328 width: 18px; 328 width: 18px;
329 height: 18px; 329 height: 18px;
330 border-radius: 22px; 330 border-radius: 22px;
331 background-color: #FF6B4A; 331 background-color: #FF6B4A;
332 margin: 6px; 332 margin: 6px;
333 .correct { 333 .correct {
334 display: inline-block; 334 display: inline-block;
335 position: relative; 335 position: relative;
336 width: 10rpx; 336 width: 10rpx;
337 height: 2rpx; 337 height: 2rpx;
338 background: #FFFFFF; 338 background: #FFFFFF;
339 line-height: 0; 339 line-height: 0;
340 font-size: 0; 340 font-size: 0;
341 position: relative; 341 position: relative;
342 top: -7px; 342 top: -7px;
343 left: 4px; 343 left: 4px;
344 -webkit-transform: rotate(45deg); 344 -webkit-transform: rotate(45deg);
345 } 345 }
346 .correct:after { 346 .correct:after {
347 content: '/'; 347 content: '/';
348 display: block; 348 display: block;
349 width: 16rpx; 349 width: 16rpx;
350 height: 2rpx; 350 height: 2rpx;
351 background: #FFFFFF; 351 background: #FFFFFF;
352 -webkit-transform: rotate(-90deg) translateY(50%) translateX(50%); 352 -webkit-transform: rotate(-90deg) translateY(50%) translateX(50%);
353 } 353 }
354 } 354 }
355 355
356 .card{ 356 .card{
357 background-color: #FFFFFF; 357 background-color: #FFFFFF;
358 border-radius: 16rpx; 358 border-radius: 16rpx;
359 box-sizing: border-box; 359 box-sizing: border-box;
360 padding: 36rpx 36rpx 36rpx 18rpx; 360 padding: 36rpx 36rpx 36rpx 18rpx;
361 display: flex; 361 display: flex;
362 flex-direction: column; 362 flex-direction: column;
363 align-items: center; 363 align-items: center;
364 justify-content: space-between; 364 justify-content: space-between;
365 margin-bottom: 180rpx; 365 margin-bottom: 180rpx;
366 .cardHeader{ 366 .cardHeader{
367 width: 100%; 367 width: 100%;
368 height: 36rpx; 368 height: 36rpx;
369 display: flex; 369 display: flex;
370 align-items: center; 370 align-items: center;
371 justify-content: flex-start; 371 justify-content: flex-start;
372 margin-bottom: 20rpx; 372 margin-bottom: 20rpx;
373 image{ 373 image{
374 height: 32rpx; 374 height: 32rpx;
375 width: 32rpx; 375 width: 32rpx;
376 padding-left: 6px; 376 padding-left: 6px;
377 padding-right: 10px; 377 padding-right: 10px;
378 } 378 }
379 text{ 379 text{
380 // font-family: PingFangSC-Regular; 380 // font-family: PingFangSC-Regular;
381 font-size: 14px; 381 font-size: 14px;
382 color: #333333; 382 color: #333333;
383 letter-spacing: -0.26px; 383 letter-spacing: -0.26px;
384 } 384 }
385 } 385 }
386 .cardBody{ 386 .cardBody{
387 width: 100%; 387 width: 100%;
388 min-height: 300rpx; 388 min-height: 300rpx;
389 display: flex; 389 display: flex;
390 align-items: center; 390 align-items: center;
391 justify-content: space-between; 391 justify-content: space-between;
392 .goodInfo{ 392 .goodInfo{
393 width: 390rpx; 393 width: 390rpx;
394 display: flex; 394 display: flex;
395 flex-direction: row; 395 flex-direction: row;
396 justify-content: flex-start; 396 justify-content: flex-start;
397 padding-left: 6px; 397 padding-left: 6px;
398 398
399 .imageWrap{ 399 .imageWrap{
400 height: 188rpx; 400 height: 188rpx;
401 width: 188rpx; 401 width: 188rpx;
402 margin-right: 28rpx; 402 margin-right: 28rpx;
403 403
404 image{ 404 image{
405 border-radius: 4px; 405 border-radius: 4px;
406 height: 188rpx; 406 height: 188rpx;
407 width: 188rpx; 407 width: 188rpx;
408 } 408 }
409 } 409 }
410 .infoRight{ 410 .infoRight{
411 display: flex; 411 display: flex;
412 flex-direction: column; 412 flex-direction: column;
413 align-items: flex-start; 413 align-items: flex-start;
414 justify-content: space-between; 414 justify-content: space-between;
415 min-height: 240rpx; 415 min-height: 240rpx;
416 .goodName{ 416 .goodName{
417 display: -webkit-box; 417 display: -webkit-box;
418 -webkit-box-orient: vertical; 418 -webkit-box-orient: vertical;
419 -webkit-line-clamp: 2; 419 -webkit-line-clamp: 2;
420 text-align: justify; 420 text-align: justify;
421 overflow: hidden; 421 overflow: hidden;
422 font-size: 28rpx; 422 font-size: 28rpx;
423 color: #333333; 423 color: #333333;
424 } 424 }
425 .describ{ 425 .describ{
426 width: 100%; 426 width: 100%;
427 // min-height: 80rpx; 427 // min-height: 80rpx;
428 // box-sizing: border-box; 428 // box-sizing: border-box;
429 // padding: 10rpx; 429 // padding: 10rpx;
430 font-size: 20rpx; 430 font-size: 20rpx;
431 letter-spacing: -0.23px; 431 letter-spacing: -0.23px;
432 text-align: justify; 432 text-align: justify;
433 color: #999999; 433 color: #999999;
434 // background: #F9F9F9; 434 // background: #F9F9F9;
435 // display: flex; 435 // display: flex;
436 // justify-content: center; 436 // justify-content: center;
437 // align-items: center; 437 // align-items: center;
438 // text{ 438 // text{
439 // text-overflow: -o-ellipsis-lastline; 439 // text-overflow: -o-ellipsis-lastline;
440 // overflow: hidden; 440 // overflow: hidden;
441 // text-overflow: ellipsis; 441 // text-overflow: ellipsis;
442 // display: -webkit-box; 442 // display: -webkit-box;
443 // -webkit-line-clamp: 2; 443 // -webkit-line-clamp: 2;
444 // line-clamp: 2; 444 // line-clamp: 2;
445 // -webkit-box-orient: vertical; 445 // -webkit-box-orient: vertical;
446 // } 446 // }
447 // .icon { 447 // .icon {
448 // width: 0; 448 // width: 0;
449 // height: 0; 449 // height: 0;
450 // border-left: 5px transparent; 450 // border-left: 5px transparent;
451 // border-right: 5px transparent; 451 // border-right: 5px transparent;
452 // border-top: 5px #979797; 452 // border-top: 5px #979797;
453 // border-bottom: 0 transparent; 453 // border-bottom: 0 transparent;
454 // border-style: solid; 454 // border-style: solid;
455 // position: relative; 455 // position: relative;
456 // margin-left: 10px; 456 // margin-left: 10px;
457 // // transform: scaleY(-1); 457 // // transform: scaleY(-1);
458 // } 458 // }
459 // .icon::after{ 459 // .icon::after{
460 // content: ''; 460 // content: '';
461 // position: absolute; 461 // position: absolute;
462 // top: -6.5px; 462 // top: -6.5px;
463 // left: -5px; 463 // left: -5px;
464 // border-left: 5px transparent; 464 // border-left: 5px transparent;
465 // border-right: 5px transparent; 465 // border-right: 5px transparent;
466 // border-top: 5px #FFFFFF; 466 // border-top: 5px #FFFFFF;
467 // border-bottom: 0 transparent; 467 // border-bottom: 0 transparent;
468 // border-style: solid; 468 // border-style: solid;
469 // } 469 // }
470 } 470 }
471 .priceBox{ 471 .priceBox{
472 display: flex; 472 display: flex;
473 justify-content: space-between; 473 justify-content: space-between;
474 align-items: center; 474 align-items: center;
475 // margin-top: 26px; 475 // margin-top: 26px;
476 width: 100%; 476 width: 100%;
477 font-size: 14px; 477 font-size: 14px;
478 color: #999999; 478 color: #999999;
479 .maxCount{ 479 .maxCount{
480 color: #999999; 480 color: #999999;
481 font-size: 24rpx; 481 font-size: 24rpx;
482 } 482 }
483 .price{ 483 .price{
484 color: #FF6B4A; 484 color: #FF6B4A;
485 font-size: 28rpx; 485 font-size: 28rpx;
486 } 486 }
487 .counter{ 487 .counter{
488 display: flex; 488 display: flex;
489 flex-direction: row; 489 flex-direction: row;
490 justify-content: space-between; 490 justify-content: space-between;
491 align-items: center; 491 align-items: center;
492 font-size: 28rpx; 492 font-size: 28rpx;
493 color: #333333; 493 color: #333333;
494 width: 122rpx; 494 width: 122rpx;
495 .btn{ 495 .btn{
496 display: flex; 496 display: flex;
497 justify-content: center; 497 justify-content: center;
498 line-height: 32rpx; 498 line-height: 32rpx;
499 height: 32rpx; 499 height: 32rpx;
500 width: 32rpx; 500 width: 32rpx;
501 background-color: #F2F2F2; 501 background-color: #F2F2F2;
502 color: #CFCFCF; 502 color: #CFCFCF;
503 } 503 }
504 } 504 }
505 } 505 }
506 } 506 }
507 } 507 }
508 } 508 }
509 } 509 }
510 510
511 .footer{ 511 .footer{
512 position: fixed; 512 position: fixed;
513 left: 0; 513 left: 0;
514 bottom: 0px; 514 bottom: 0px;
515 height: 112rpx; 515 height: 112rpx;
516 width: 100%; 516 width: 100%;
517 background-color: #FFFFFF; 517 background-color: #FFFFFF;
518 font-size: 16px; 518 font-size: 16px;
519 display: flex; 519 display: flex;
520 justify-content: space-between; 520 justify-content: space-between;
521 align-items: center; 521 align-items: center;
522 .footerLeft{ 522 .footerLeft{
523 display: flex; 523 display: flex;
524 justify-content: center; 524 justify-content: center;
525 align-items: center; 525 align-items: center;
526 width: 50%; 526 width: 50%;
527 color: #333333; 527 color: #333333;
528 text{ 528 text{
529 color: #FF6B4A; 529 color: #FF6B4A;
530 } 530 }
531 } 531 }
532 .footerRight{ 532 .footerRight{
533 display: flex; 533 display: flex;
534 justify-content: flex-end; 534 justify-content: flex-end;
535 align-items: center; 535 align-items: center;
536 width: 50%; 536 width: 50%;
537 margin-right: 26rpx; 537 margin-right: 26rpx;
538 .paybtn{ 538 .paybtn{
539 display: flex; 539 display: flex;
540 justify-content: center; 540 justify-content: center;
541 align-items: center; 541 align-items: center;
542 background: #FF6B4A; 542 background: #FF6B4A;
543 border-radius: 20px; 543 border-radius: 20px;
544 border-radius: 20px; 544 border-radius: 20px;
545 color: #FFFFFF; 545 color: #FFFFFF;
546 width: 204rpx; 546 width: 204rpx;
547 height: 80rpx; 547 height: 80rpx;
548 } 548 }
549 } 549 }
550 550
551 } 551 }
552 } 552 }
553 553
554 </style> 554 </style>
src/pages/frameDetail/frameDetail.vue
Diff comments   View file @0466216
1 <template> 1 <template>
2 <view class="container"> 2 <view class="container">
3 <view class="D1"> 3 <view class="D1">
4 <!-- 轮播图 --> 4 <!-- 轮播图 -->
5 <swiper 5 <swiper
6 class="swiperImage" 6 class="swiperImage"
7 :indicator-dots="true" 7 :indicator-dots="true"
8 :autoplay="true" 8 :autoplay="true"
9 :interval="4000" 9 :interval="4000"
10 :duration="500" 10 :duration="500"
11 > 11 >
12 <swiper-item 12 <swiper-item
13 v-for="(item, index) in goodInfo.pics" 13 v-for="(item, index) in goodInfo.pics"
14 :key="index" 14 :key="index"
15 > 15 >
16 <image 16 <image
17 :src="item" 17 :src="item"
18 mode="scaleToFill" 18 mode="scaleToFill"
19 ></image> 19 ></image>
20 </swiper-item> 20 </swiper-item>
21 </swiper> 21 </swiper>
22 <view class="D1_price">￥{{goodInfo.priceArea.Min_Price || '暂无'}}<span class="D1_number">{{goodInfo.trade_num || '暂无'}}人购买过</span></view> 22 <view class="D1_price">￥{{goodInfo.priceArea.Min_Price || '暂无'}}<span class="D1_number">{{goodInfo.trade_num || '暂无'}}人购买过</span></view>
23 <view class="D1_name"><span class="D1_name1">{{goodInfo.p_name || '暂无'}}</span></view> 23 <view class="D1_name"><span class="D1_name1">{{goodInfo.p_name || '暂无'}}</span></view>
24 <view class="D1_spans"><span>支持7天无理由退货</span><span>顺丰发货</span><span>30天质量保证</span></view> 24 <view class="D1_spans"><span>支持7天无理由退货</span><span>顺丰发货</span><span>30天质量保证</span></view>
25 </view> 25 </view>
26 <view 26 <view
27 class="D2" 27 class="D2"
28 v-if="updateGoodType == 2 || updateGoodType == 4" 28 v-if="updateGoodType == 2 || updateGoodType == 4"
29 > 29 >
30 <view><span class="D2_span1">框架材质：</span><span class="D2_span2">{{introduction.material}}</span></view> 30 <view><span class="D2_span1">框架材质：</span><span class="D2_span2">{{introduction.material}}</span></view>
31 <view><span class="D2_span1">风格：</span><span class="D2_span2">{{introduction.func}}</span></view> 31 <view><span class="D2_span1">风格：</span><span class="D2_span2">{{introduction.func}}</span></view>
32 <view><span class="D2_span1">适用性别：</span><span class="D2_span2">{{introduction.rate}}</span></view> 32 <view><span class="D2_span1">适用性别：</span><span class="D2_span2">{{introduction.rate}}</span></view>
33 </view> 33 </view>
34 <!-- <view 34 <!-- <view
35 class="D2" 35 class="D2"
36 v-if="updateGoodType == 1" 36 v-if="updateGoodType == 1"
37 > 37 >
38 <view><span class="D2_span1">镜片材质：</span><span class="D2_span2">{{introduction.material}}</span></view> 38 <view><span class="D2_span1">镜片材质：</span><span class="D2_span2">{{introduction.material}}</span></view>
39 <view><span class="D2_span1">功能：</span><span class="D2_span2">{{introduction.func}}</span></view> 39 <view><span class="D2_span1">功能：</span><span class="D2_span2">{{introduction.func}}</span></view>
40 <view><span class="D2_span1">使用场景：</span><span class="D2_span2">{{introduction.rate}}</span></view> 40 <view><span class="D2_span1">使用场景：</span><span class="D2_span2">{{introduction.rate}}</span></view>
41 </view> 41 </view>
42 <view 42 <view
43 class="D2" 43 class="D2"
44 v-if="updateGoodType == 3" 44 v-if="updateGoodType == 3"
45 > 45 >
46 <view><span class="D2_span1">材质：</span><span class="D2_span2">{{introduction.material}}</span></view> 46 <view><span class="D2_span1">材质：</span><span class="D2_span2">{{introduction.material}}</span></view>
47 <view><span class="D2_span1">直径/基弧：</span><span class="D2_span2">{{introduction.func}}</span></view> 47 <view><span class="D2_span1">直径/基弧：</span><span class="D2_span2">{{introduction.func}}</span></view>
48 <view><span class="D2_span1">适用性别：</span><span class="D2_span2">{{introduction.rate}}</span></view> 48 <view><span class="D2_span1">适用性别：</span><span class="D2_span2">{{introduction.rate}}</span></view>
49 </view> --> 49 </view> -->
50 <view class="D3"> 50 <view class="D3">
51 <view class="screenBar"> 51 <view class="screenBar">
52 <view 52 <view
53 v-for="item in screenItems" 53 v-for="item in screenItems"
54 :key="item.current" 54 :key="item.current"
55 @click="tabChange(item.current)" 55 @click="tabChange(item.current)"
56 > 56 >
57 <view 57 <view
58 class="screenItem" 58 class="screenItem"
59 v-bind:class="{ active: current === item.current }" 59 v-bind:class="{ active: current === item.current }"
60 >{{ item.text || '暂无' }}</view> 60 >{{ item.text || '暂无' }}</view>
61 </view> 61 </view>
62 </view> 62 </view>
63 <view 63 <view
64 class="screen-item" 64 class="screen-item"
65 v-if="current === 1" 65 v-if="current === 1"
66 > 66 >
67 <view class="D3_list"> 67 <view class="D3_list">
68 <view 68 <view
69 v-for="(item) in parameter" 69 v-for="(item) in parameter"
70 :key="item.key" 70 :key="item.key"
71 > 71 >
72 <image 72 <image
73 class="D3_image" 73 class="D3_image"
74 v-bind:src="item.img" 74 v-bind:src="item.img"
75 ></image> 75 ></image>
76 <span>{{item.standard || '暂无'}}</span> 76 <span>{{item.standard || '暂无'}}</span>
77 <span>{{item.slength || '暂无'}}</span> 77 <span>{{item.slength || '暂无'}}</span>
78 </view> 78 </view>
79 </view> 79 </view>
80 </view> 80 </view>
81 <view 81 <view
82 class="screen-item" 82 class="screen-item"
83 v-if="current === 0" 83 v-if="current === 0"
84 > 84 >
85 <view class="D3_list"> 85 <view class="D3_list">
86 <!-- <block> 86 <!-- <block>
87 <view>主体</view> 87 <view>主体</view>
88 <view>商品产地：韩国</view> 88 <view>商品产地：韩国</view>
89 <view>包装清单：彩色隐形 * 1</view> 89 <view>包装清单：彩色隐形 * 1</view>
90 </block> --> 90 </block> -->
91 <!-- 迭代时建议配合接口修改 为数组 --> 91 <!-- 迭代时建议配合接口修改 为数组 -->
92 <view v-if="tag.prod_tag_age && tag.prod_tag_age.length !== 0"> 92 <view v-if="tag.prod_tag_age && tag.prod_tag_age.length !== 0">
93 <view class=""> 93 <view class="">
94 年龄：<view 94 年龄：<view
95 v-for="(item,index) in tag.prod_tag_age" 95 v-for="(item,index) in tag.prod_tag_age"
96 :key="index" 96 :key="index"
97 > 97 >
98 {{item.label}}<text v-if="index !== tag.prod_tag_age.length - 1">/</text> 98 {{item.label}}<text v-if="index !== tag.prod_tag_age.length - 1">/</text>
99 </view> 99 </view>
100 </view> 100 </view>
101 </view> 101 </view>
102 <view v-if="tag.prod_tag_color && tag.prod_tag_color.length !== 0"> 102 <view v-if="tag.prod_tag_color && tag.prod_tag_color.length !== 0">
103 <view class=""> 103 <view class="">
104 颜色：<view 104 颜色：<view
105 v-for="(item,index) in tag.prod_tag_color" 105 v-for="(item,index) in tag.prod_tag_color"
106 :key="index" 106 :key="index"
107 > 107 >
108 {{item.label}}<text v-if="index !== tag.prod_tag_color.length - 1">/</text> 108 {{item.label}}<text v-if="index !== tag.prod_tag_color.length - 1">/</text>
109 </view> 109 </view>
110 </view> 110 </view>
111 </view> 111 </view>
112 <view v-if="tag.prod_tag_face && tag.prod_tag_face.length !== 0"> 112 <view v-if="tag.prod_tag_face && tag.prod_tag_face.length !== 0">
113 <view class=""> 113 <view class="">
114 脸型：<view 114 脸型：<view
115 v-for="(item,index) in tag.prod_tag_face" 115 v-for="(item,index) in tag.prod_tag_face"
116 :key="index" 116 :key="index"
117 > 117 >
118 {{item.label}}<text v-if="index !== tag.prod_tag_face.length - 1">/</text> 118 {{item.label}}<text v-if="index !== tag.prod_tag_face.length - 1">/</text>
119 </view> 119 </view>
120 </view> 120 </view>
121 </view> 121 </view>
122 <view v-if="tag.prod_tag_freesend && tag.prod_tag_freesend.length !== 0"> 122 <view v-if="tag.prod_tag_freesend && tag.prod_tag_freesend.length !== 0">
123 <view class=""> 123 <view class="">
124 赠品：<view 124 赠品：<view
125 v-for="(item,index) in tag.prod_tag_freesend" 125 v-for="(item,index) in tag.prod_tag_freesend"
126 :key="index" 126 :key="index"
127 > 127 >
128 {{item.label}}<text v-if="index !== tag.prod_tag_freesend.length - 1">/</text> 128 {{item.label}}<text v-if="index !== tag.prod_tag_freesend.length - 1">/</text>
129 </view> 129 </view>
130 </view> 130 </view>
131 </view> 131 </view>
132 <view v-if="tag.prod_tag_insurance && tag.prod_tag_insurance.length !== 0"> 132 <view v-if="tag.prod_tag_insurance && tag.prod_tag_insurance.length !== 0">
133 <view class=""> 133 <view class="">
134 保险：<view 134 保险：<view
135 v-for="(item,index) in tag.prod_tag_insurance" 135 v-for="(item,index) in tag.prod_tag_insurance"
136 :key="index" 136 :key="index"
137 > 137 >
138 {{item.label}}<text v-if="index !== tag.prod_tag_insurance.length - 1">/</text> 138 {{item.label}}<text v-if="index !== tag.prod_tag_insurance.length - 1">/</text>
139 </view> 139 </view>
140 </view> 140 </view>
141 </view> 141 </view>
142 <view v-if="tag.prod_tag_metal && tag.prod_tag_metal.length !== 0"> 142 <view v-if="tag.prod_tag_metal && tag.prod_tag_metal.length !== 0">
143 <view class=""> 143 <view class="">
144 材质：<view 144 材质：<view
145 v-for="(item,index) in tag.prod_tag_metal" 145 v-for="(item,index) in tag.prod_tag_metal"
146 :key="index" 146 :key="index"
147 > 147 >
148 {{item.label}}<text v-if="index !== tag.prod_tag_metal.length - 1">/</text> 148 {{item.label}}<text v-if="index !== tag.prod_tag_metal.length - 1">/</text>
149 </view> 149 </view>
150 </view> 150 </view>
151 </view> 151 </view>
152 <view v-if="tag.prod_tag_personal && tag.prod_tag_personal.length !== 0"> 152 <view v-if="tag.prod_tag_personal && tag.prod_tag_personal.length !== 0">
153 <view class=""> 153 <view class="">
154 个性：<view 154 个性：<view
155 v-for="(item,index) in tag.prod_tag_personal" 155 v-for="(item,index) in tag.prod_tag_personal"
156 :key="index" 156 :key="index"
157 > 157 >
158 {{item.label}}<text v-if="index !== tag.prod_tag_personal.length - 1">/</text> 158 {{item.label}}<text v-if="index !== tag.prod_tag_personal.length - 1">/</text>
159 </view> 159 </view>
160 </view> 160 </view>
161 </view> 161 </view>
162 <view v-if="tag.prod_tag_sense && tag.prod_tag_sense.length !== 0"> 162 <view v-if="tag.prod_tag_sense && tag.prod_tag_sense.length !== 0">
163 <view class=""> 163 <view class="">
164 场景：<view 164 场景：<view
165 v-for="(item,index) in tag.prod_tag_sense" 165 v-for="(item,index) in tag.prod_tag_sense"
166 :key="index" 166 :key="index"
167 > 167 >
168 {{item.label}}<text v-if="index !== tag.prod_tag_sense.length - 1">/</text> 168 {{item.label}}<text v-if="index !== tag.prod_tag_sense.length - 1">/</text>
169 </view> 169 </view>
170 </view> 170 </view>
171 </view> 171 </view>
172 <view v-if="tag.prod_tag_sex && tag.prod_tag_sex.length !== 0"> 172 <view v-if="tag.prod_tag_sex && tag.prod_tag_sex.length !== 0">
173 <view class=""> 173 <view class="">
174 性别：<view 174 性别：<view
175 v-for="(item,index) in tag.prod_tag_sex" 175 v-for="(item,index) in tag.prod_tag_sex"
176 :key="index" 176 :key="index"
177 > 177 >
178 {{item.label}}<text v-if="index !== tag.prod_tag_sex.length - 1">/</text> 178 {{item.label}}<text v-if="index !== tag.prod_tag_sex.length - 1">/</text>
179 </view> 179 </view>
180 </view> 180 </view>
181 </view> 181 </view>
182 <view v-if="tag.prod_tag_style && tag.prod_tag_style.length !== 0"> 182 <view v-if="tag.prod_tag_style && tag.prod_tag_style.length !== 0">
183 <view class=""> 183 <view class="">
184 风格：<view 184 风格：<view
185 v-for="(item,index) in tag.prod_tag_style" 185 v-for="(item,index) in tag.prod_tag_style"
186 :key="index" 186 :key="index"
187 > 187 >
188 {{item.label}}<text v-if="index !== tag.prod_tag_style.length - 1">/</text> 188 {{item.label}}<text v-if="index !== tag.prod_tag_style.length - 1">/</text>
189 </view> 189 </view>
190 </view> 190 </view>
191 </view> 191 </view>
192 <view v-if="tag.prod_tag_weight && tag.prod_tag_weight.length !== 0"> 192 <view v-if="tag.prod_tag_weight && tag.prod_tag_weight.length !== 0">
193 <view class=""> 193 <view class="">
194 重量：<view 194 重量：<view
195 v-for="(item,index) in tag.prod_tag_weight" 195 v-for="(item,index) in tag.prod_tag_weight"
196 :key="index" 196 :key="index"
197 > 197 >
198 {{item.label}}<text v-if="index !== tag.prod_tag_weight.length - 1">/</text> 198 {{item.label}}<text v-if="index !== tag.prod_tag_weight.length - 1">/</text>
199 </view> 199 </view>
200 </view> 200 </view>
201 </view> 201 </view>
202 </view> 202 </view>
203 </view> 203 </view>
204 <view 204 <view
205 class="screen-item " 205 class="screen-item "
206 v-if="current ===2" 206 v-if="current ===2"
207 > 207 >
208 <view class="customerService"> 208 <view class="customerService">
209 <view class="serviceItem"> 209 <view class="serviceItem">
210 <view class="title"> 210 <view class="title">
211 <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view> 211 <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view>
212 <text class="titleText">卖家服务</text> 212 <text class="titleText">卖家服务</text>
213 </view> 213 </view>
214 <view class="itemContent">平台卖家服务，为您在平台获得最优的购买体验</view> 214 <view class="itemContent">平台卖家服务，为您在平台获得最优的购买体验</view>
215 </view> 215 </view>
216 <view class="serviceItem"> 216 <view class="serviceItem">
217 <view class="title"> 217 <view class="title">
218 <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view> 218 <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view>
219 <text class="titleText">平台承诺</text> 219 <text class="titleText">平台承诺</text>
220 </view> 220 </view>
221 <view class="itemContent">平台卖家服务，为您在平台获得最优的购买体验阿斯蒂芬的发射点发射点发生的房贷首付的发护法国会国家和国际会更加和</view> 221 <view class="itemContent">平台卖家服务，为您在平台获得最优的购买体验阿斯蒂芬的发射点发射点发生的房贷首付的发护法国会国家和国际会更加和</view>
222 </view> 222 </view>
223 <view class="serviceItem"> 223 <view class="serviceItem">
224 <view class="title"> 224 <view class="title">
225 <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view> 225 <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view>
226 <text class="titleText">正品保证</text> 226 <text class="titleText">正品保证</text>
227 </view> 227 </view>
228 <view class="itemContent">向您保证所售商品均为正品行货</view> 228 <view class="itemContent">向您保证所售商品均为正品行货</view>
229 </view> 229 </view>
230 <view class="serviceItem2"> 230 <view class="serviceItem2">
231 <view class="title"> 231 <view class="title">
232 <text class="titleText">权利申明</text> 232 <text class="titleText">权利申明</text>
233 </view> 233 </view>
234 <view class="itemContent">任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知。</view> 234 <view class="itemContent">任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知。</view>
235 </view> 235 </view>
236 <view class="serviceItem2"> 236 <view class="serviceItem2">
237 <view class="title"> 237 <view class="title">
238 <text class="titleText">价格保证</text> 238 <text class="titleText">价格保证</text>
239 </view> 239 </view>
240 <view class="itemContent"> 240 <view class="itemContent">
241 <view class="itemContent-child"> 241 <view class="itemContent-child">
242 <text class="contentTitle">平台价:</text> 242 <text class="contentTitle">平台价:</text>
243 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text> 243 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
244 </view> 244 </view>
245 <view class="itemContent-child"> 245 <view class="itemContent-child">
246 <text class="contentTitle">划线价:</text> 246 <text class="contentTitle">划线价:</text>
247 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text> 247 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
248 </view> 248 </view>
249 <view class="itemContent-child"> 249 <view class="itemContent-child">
250 <text class="contentTitle">平折扣:</text> 250 <text class="contentTitle">平折扣:</text>
251 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text> 251 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
252 </view> 252 </view>
253 <view class="itemContent-child"> 253 <view class="itemContent-child">
254 <text class="contentTitle">异常问题:</text> 254 <text class="contentTitle">异常问题:</text>
255 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text> 255 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
256 </view> 256 </view>
257 257
258 </view> 258 </view>
259 </view> 259 </view>
260 </view> 260 </view>
261 </view> 261 </view>
262 </view> 262 </view>
263 <view 263 <view
264 class="D4" 264 class="D4"
265 v-if="current !==2" 265 v-if="current !==2"
266 > 266 >
267 <view class="D4_esvalue"> 267 <view class="D4_esvalue">
268 <view>{{esvalue}}&nbsp;&nbsp;{{goodInfo.judgeInfo.good}}</view> 268 <view>{{esvalue}}&nbsp;&nbsp;{{goodInfo.judgeInfo.good}}</view>
269 <view class="D4_2"> 269 <view class="D4_2">
270 <view 270 <view
271 class="star" 271 class="star"
272 v-for="o in starCount" 272 v-for="o in starCount"
273 :key="o" 273 :key="o"
274 > 274 >
275 <image 275 <image
276 src="../../static/img/detail/d_star.png" 276 src="../../static/img/detail/d_star.png"
277 mode="aspectFill" 277 mode="aspectFill"
278 style="height: 26rpx; width: 28rpx;" 278 style="height: 26rpx; width: 28rpx;"
279 ></image> 279 ></image>
280 </view> 280 </view>
281 </view> 281 </view>
282 </view> 282 </view>
283 <view class="D4_list"> 283 <view class="D4_list">
284 <view 284 <view
285 v-for="(assess) in goodInfo.judge_tag" 285 v-for="(assess) in goodInfo.judge_tag"
286 :key="assess.key" 286 :key="assess.key"
287 >{{assess.name}}</view> 287 >{{assess.name}}</view>
288 </view> 288 </view>
289 </view> 289 </view>
290 <view 290 <view
291 class="D5" 291 class="D5"
292 v-if="current !==2" 292 v-if="current !==2"
293 > 293 >
294 <view class="D5_fixed1" @click="consolg(goodInfo.prodIntro1)"> 294 <view class="D5_fixed1" @click="consolg(goodInfo.prodIntro1)">
295 <image src="/static/img/detail/hr.png"></image> 295 <image src="/static/img/detail/hr.png"></image>
296 <view>商品详细</view> 296 <view>商品详细</view>
297 <image src="/static/img/detail/hr.png"></image> 297 <image src="/static/img/detail/hr.png"></image>
298 </view> 298 </view>
299 <view class="D5_all" v-html="test"> 299 <view class="D5_all" v-html="test">
300 <!-- <block> 300 <!-- <block>
301 <rich-text :nodes="goodInfo.prodIntro1"></rich-text> 301 <rich-text :nodes="goodInfo.prodIntro1"></rich-text>
302 </block> --> 302 </block> -->
303 </view> 303 </view>
304 </view> 304 </view>
305 <!-- 底部菜单 --> 305 <!-- 底部菜单 -->
306 <view class="botton"> 306 <view class="botton">
307 <view 307 <view
308 @tap="toCart()" 308 @tap="toCart()"
309 class="botton_1" 309 class="botton_1"
310 > 310 >
311 <image v-bind:src="imgShop.img"></image> 311 <image v-bind:src="imgShop.img"></image>
312 <view class="botton_image">购物车</view> 312 <view class="botton_image">购物车</view>
313 </view> 313 </view>
314 <view class="botton_2"> 314 <view class="botton_2">
315 <view 315 <view
316 class="botton_input" 316 class="botton_input"
317 @tap="addCart()" 317 @tap="addCart()"
318 >加入购物车</view> 318 >加入购物车</view>
319 <view 319 <view
320 class="botton_now" 320 class="botton_now"
321 @tap="goPerchase()" 321 @tap="goPerchase()"
322 >立即购买</view> 322 >立即购买</view>
323 </view> 323 </view>
324 </view> 324 </view>
325 </view> 325 </view>
326 </template> 326 </template>
327 327
328 <script> 328 <script>
329 import store from '@/store' 329 import store from '@/store'
330 export default { 330 export default {
331 data () { 331 data () {
332 return { 332 return {
333 test: '', 333 test: '',
334 goodType: 2, 334 goodType: 2,
335 pid: 0, 335 pid: 0,
336 // 购物车数据 336 // 购物车数据
337 addCartList: { 337 addCartList: {
338 mp_id: 0, 338 mp_id: 0,
339 sk_id: 0,
340 num: 1, 339 sk_id: 0,
341 price: '', 340 num: 1,
342 }, 341 price: '',
343 screenItems: [ 342 },
344 { current: 0, text: '商品介绍' }, 343 screenItems: [
345 { current: 1, text: '规格参数' }, 344 { current: 0, text: '商品介绍' },
346 { current: 2, text: '售后保障' }, 345 { current: 1, text: '规格参数' },
347 ], 346 { current: 2, text: '售后保障' },
348 current: 0, 347 ],
349 starCount: 5, 348 current: 0,
350 parameter: [ 349 starCount: 5,
351 { key: 0, img: '/static/img/detail/d2.png', standard: '框架宽', slength: '139mm' }, 350 parameter: [
352 { key: 1, img: '/static/img/detail/d3.png', standard: '镜片宽', slength: '51mm' }, 351 { key: 0, img: '/static/img/detail/d2.png', standard: '框架宽', slength: '139mm' },
353 { key: 2, img: '/static/img/detail/d4.png', standard: '镜片高', slength: '45mm' }, 352 { key: 1, img: '/static/img/detail/d3.png', standard: '镜片宽', slength: '51mm' },
354 { key: 3, img: '/static/img/detail/d5.png', standard: '鼻架宽', slength: '19mm' }, 353 { key: 2, img: '/static/img/detail/d4.png', standard: '镜片高', slength: '45mm' },
355 { key: 4, img: '/static/img/detail/d6.png', standard: '框架耳长', slength: '138mm' }, 354 { key: 3, img: '/static/img/detail/d5.png', standard: '鼻架宽', slength: '19mm' },
356 { key: 5, img: '/static/img/detail/d7.png', standard: '框架重', slength: '19mm' }, 355 { key: 4, img: '/static/img/detail/d6.png', standard: '框架耳长', slength: '138mm' },
357 ], 356 { key: 5, img: '/static/img/detail/d7.png', standard: '框架重', slength: '19mm' },
358 esvalue: '宝贝好评率', 357 ],
359 introduction: { 358 esvalue: '宝贝好评率',
360 material: '钛合金', 359 introduction: {
361 func: '抗疲劳/防辐射', 360 material: '钛合金',
362 rate: '男/女', 361 func: '抗疲劳/防辐射',
363 }, 362 rate: '男/女',
364 imgAll: '/static/img/detail/d8.png', 363 },
365 photoes: [ 364 imgAll: '/static/img/detail/d8.png',
366 { value: '日常办公', img: '/static/img/detail/d9.png' }, 365 photoes: [
367 { value: '上网', img: '/static/img/detail/d10.png' }, 366 { value: '日常办公', img: '/static/img/detail/d9.png' },
368 { value: '追剧', img: '/static/img/detail/d11.png' }, 367 { value: '上网', img: '/static/img/detail/d10.png' },
369 { value: '玩游戏', img: '/static/img/detail/d12.png' }, 368 { value: '追剧', img: '/static/img/detail/d11.png' },
370 ], 369 { value: '玩游戏', img: '/static/img/detail/d12.png' },
371 imgDetail: '/static/img/detail/d13.png', 370 ],
372 imgShop: { 371 imgDetail: '/static/img/detail/d13.png',
373 img: '/static/tab-cart.png', 372 imgShop: {
374 IsShown: false, 373 img: '/static/tab-cart.png',
375 }, 374 IsShown: false,
376 tag: { 375 },
377 prod_tag_freesend: [{ 376 tag: {
378 label: '眼镜盒', 377 prod_tag_freesend: [{
379 value: '262', 378 label: '眼镜盒',
380 }], 379 value: '262',
381 }, 380 }],
382 } 381 },
383 }, 382 }
384 onLoad: function ({ pid, sk_id }) { 383 },
385 this.pid = pid 384 onLoad: function ({ pid, sk_id }) {
386 // console.log('sk_id=====>',sk_id) 385 this.pid = pid
387 store.dispatch('read/fetch', { 386 // console.log('sk_id=====>',sk_id)
388 pid, 387 store.dispatch('read/fetch', {
389 sk_id, 388 pid,
390 }).then(() => { 389 sk_id,
391 this.parameter[0].slength = `${this.goodInfo.frame_width}mm` 390 }).then(() => {
392 this.parameter[1].slength = `${this.goodInfo.glass_width}mm` 391 this.parameter[0].slength = `${this.goodInfo.frame_width}mm`
393 this.parameter[2].slength = `${this.goodInfo.glass_height}mm` 392 this.parameter[1].slength = `${this.goodInfo.glass_width}mm`
394 this.parameter[3].slength = `${this.goodInfo.nose_width}mm` 393 this.parameter[2].slength = `${this.goodInfo.glass_height}mm`
395 this.parameter[4].slength = `${this.goodInfo.leg_long}mm` 394 this.parameter[3].slength = `${this.goodInfo.nose_width}mm`
396 this.parameter[5].slength = `${this.goodInfo.weight}mm` 395 this.parameter[4].slength = `${this.goodInfo.leg_long}mm`
397 this.tag = this.goodInfo.tag 396 this.parameter[5].slength = `${this.goodInfo.weight}mm`
398 this.test = this.goodInfo.prodIntro1 397 this.tag = this.goodInfo.tag
399 this.test = this.test.replace(/\<img/gi, '<img style="max-width:100%;height:auto" ') 398 this.test = this.goodInfo.prodIntro1
400 // addCart 399 this.test = this.test.replace(/\<img/gi, '<img style="max-width:100%;height:auto" ')
401 this.addCartList.price = this.goodInfo.p_sale_price 400 // addCart
402 this.addCartList.sk_id = this.goodInfo.skuList[0].sk_id 401 this.addCartList.price = this.goodInfo.priceArea.Min_Price
403 this.addCartList.mp_id = this.goodInfo.glassData.mp_id 402 this.addCartList.sk_id = this.goodInfo.skuList[0].sk_id
404 }) 403 this.addCartList.mp_id = this.goodInfo.glassData.mp_id
405 // console.log(this.$store.state.user.userInfo.uid + 'ssss')
406 }, 404 })
407 computed: { 405 // console.log(this.$store.state.user.userInfo.uid + 'ssss')
408 updateGoodType () { 406 },
409 return this.goodType 407 computed: {
410 }, 408 updateGoodType () {
411 goodInfo () { 409 return this.goodType
412 console.log(this.$store.state.read.goodInfo) 410 },
413 return this.$store.state.read.goodInfo 411 goodInfo () {
414 }, 412 console.log(this.$store.state.read.goodInfo)
415 }, 413 return this.$store.state.read.goodInfo
416 methods: { 414 },
417 // 前往购物车 415 },
418 toCart() { 416 methods: {
419 uni.switchTab({ 417 // 前往购物车
420 url: '/pages/cart/cart', 418 toCart() {
421 success: res => {}, 419 uni.switchTab({
422 fail: (error) => { console.log('跳转购物车失败======>', error) }, 420 url: '/pages/cart/cart',
423 complete: () => { console.log('toCart') }, 421 success: res => {},
424 }) 422 fail: (error) => { console.log('跳转购物车失败======>', error) },
425 }, 423 complete: () => { console.log('toCart') },
426 // 加入购物车 424 })
427 addCart () { 425 },
428 store.dispatch('cart/addCart', { 426 // 加入购物车
429 uid: this.$store.state.user.userInfo.uid, 427 addCart () {
430 openid: this.$store.state.user.userInfo.openid, 428 store.dispatch('cart/addCart', {
431 mp_id: this.addCartList.mp_id, 429 uid: this.$store.state.user.userInfo.uid,
432 sk_id: this.addCartList.sk_id, 430 openid: this.$store.state.user.userInfo.openid,
433 num: this.addCartList.num, 431 mp_id: this.addCartList.mp_id,
434 pid: this.pid, 432 sk_id: this.addCartList.sk_id,
435 price: this.addCartList.price, 433 num: this.addCartList.num,
436 checkedSKU: {}, 434 pid: this.pid,
437 }) 435 price: this.addCartList.price,
438 store.dispatch('cart/getCartList', {
439 uid: this.$store.state.user.userInfo.uid, // 用户id 436 })
437 // 再次请求购物车接口，实现实时更新
440 }) 438 store.dispatch('cart/getCartList', {
441 }, 439 uid: this.$store.state.user.userInfo.uid,
442 goPerchase () { 440 })
443 // switch (this.updateGoodType) { 441 },
444 // case '1': 442 goPerchase () {
445 console.log('goPerchase') 443 // switch (this.updateGoodType) {
446 uni.navigateTo({ 444 // case '1':
447 url: `../purchaseLenses/purchaseLenses?pid=${this.pid}`, 445 console.log('goPerchase')
448 success: res => {}, 446 uni.navigateTo({
449 fail: (error) => { console.log('跳转参数选择失败======>', error) }, 447 url: `../purchaseLenses/purchaseLenses?pid=${this.pid}`,
450 complete: () => { console.log('goPerchase') }, 448 success: res => {},
451 }) 449 fail: (error) => { console.log('跳转参数选择失败======>', error) },
452 // break 450 complete: () => { console.log('goPerchase') },
453 // case '2': 451 })
454 // uni.navigateTo({ 452 // break
455 // url: '../detailStandard/detailStandard_k', 453 // case '2':
456 // success: res => {}, 454 // uni.navigateTo({
457 // fail: () => {}, 455 // url: '../detailStandard/detailStandard_k',
458 // complete: () => {} 456 // success: res => {},
459 // }) 457 // fail: () => {},
460 // break 458 // complete: () => {}
461 // case '3': 459 // })
462 // uni.navigateTo({ 460 // break
463 // url: '../purchaseLenses/purchaseLenses', 461 // case '3':
464 // success: res => {}, 462 // uni.navigateTo({
465 // fail: () => {}, 463 // url: '../purchaseLenses/purchaseLenses',
466 // complete: () => {} 464 // success: res => {},
467 // }) 465 // fail: () => {},
468 // break 466 // complete: () => {}
469 // case '4': 467 // })
470 // uni.navigateTo({ 468 // break
471 // url: '../detailStandard/detailStandard_sun', 469 // case '4':
472 // success: res => {}, 470 // uni.navigateTo({
473 // fail: () => {}, 471 // url: '../detailStandard/detailStandard_sun',
474 // complete: () => {} 472 // success: res => {},
475 // }) 473 // fail: () => {},
476 // break 474 // complete: () => {}
477 // default : 475 // })
478 // break 476 // break
479 // } 477 // default :
480 }, 478 // break
481 // 加入购物车 479 // }
482 // addCart () { 480 },
483 // store.dispatch('cart/addCart', { 481 // 加入购物车
484 // uid: this.$store.state.user.userInfo.uid, 482 // addCart () {
485 // openid: this.$store.state.user.userInfo.openid, 483 // store.dispatch('cart/addCart', {
486 // pid: this.pid, 484 // uid: this.$store.state.user.userInfo.uid,
487 // checkedSKU: {}, 485 // openid: this.$store.state.user.userInfo.openid,
488 // }) 486 // pid: this.pid,
489 // store.dispatch('cart/getCartList', { 487 // checkedSKU: {},
490 // uid: this.$store.state.user.userInfo.uid, // 用户id 488 // })
491 // }) 489 // store.dispatch('cart/getCartList', {
492 // }, 490 // uid: this.$store.state.user.userInfo.uid, // 用户id
493 tabChange (e) { 491 // })
494 if (this.current !== e) { 492 // },
495 this.current = e 493 tabChange (e) {
496 } 494 if (this.current !== e) {
497 }, 495 this.current = e
498 }, 496 }
499 } 497 },
500 </script> 498 },
501 <style lang='scss'> 499 }
502 .container { 500 </script>
503 background-color: #f8f8f8; 501 <style lang='scss'>
504 } 502 .container {
505 .D1, 503 background-color: #f8f8f8;
506 .D2, 504 }
507 .D3, 505 .D1,
508 .D4, 506 .D2,
509 .D6 { 507 .D3,
510 background: #ffffff; 508 .D4,
511 margin-bottom: 10px; 509 .D6 {
512 padding: 8px 20px 8px 20px; 510 background: #ffffff;
513 box-sizing: border-box; 511 margin-bottom: 10px;
514 .swiperImage { 512 padding: 8px 20px 8px 20px;
515 width: 684rpx; 513 box-sizing: border-box;
516 height: 480rpx; 514 .swiperImage {
517 image { 515 width: 684rpx;
518 max-width: 100%; 516 height: 480rpx;
519 max-height: 100%; 517 image {
520 border-radius: 16rpx; 518 max-width: 100%;
521 } 519 max-height: 100%;
522 } 520 border-radius: 16rpx;
523 } 521 }
524 .D5 { 522 }
525 background: #ffffff; 523 }
526 padding: 8px 20px 8px 20px; 524 .D5 {
527 box-sizing: border-box; 525 background: #ffffff;
528 } 526 padding: 8px 20px 8px 20px;
529 .swiperImage { 527 box-sizing: border-box;
530 width: 100%; 528 }
531 height: 560rpx; 529 .swiperImage {
532 .swiper-item { 530 width: 100%;
533 width: 100%; 531 height: 560rpx;
534 image { 532 .swiper-item {
535 width: 100%; 533 width: 100%;
536 } 534 image {
537 } 535 width: 100%;
538 } 536 }
539 .D1 { 537 }
540 .D1_price { 538 }
541 color: #eb5d3b; 539 .D1 {
542 font-size: 18px; 540 .D1_price {
543 margin-top: 5px; 541 color: #eb5d3b;
544 font-family: "PingFangSC-Semibold"; 542 font-size: 18px;
545 display: flex; 543 margin-top: 5px;
546 justify-content: space-between; 544 font-family: "PingFangSC-Semibold";
547 .D1_number { 545 display: flex;
548 color: #999999; 546 justify-content: space-between;
549 font-size: 14px; 547 .D1_number {
550 font-family: "PingFangSC-Regular"; 548 color: #999999;
551 } 549 font-size: 14px;
552 } 550 font-family: "PingFangSC-Regular";
553 .D1_name { 551 }
554 font-size: 16px; 552 }
555 font-family: "PingFangSC-Semibold"; 553 .D1_name {
556 margin-top: 5px; 554 font-size: 16px;
557 .D1_name1 { 555 font-family: "PingFangSC-Semibold";
558 font-weight: bold; 556 margin-top: 5px;
559 font-size: 16px; 557 .D1_name1 {
560 color: #333333; 558 font-weight: bold;
561 } 559 font-size: 16px;
562 } 560 color: #333333;
563 .D1_spans { 561 }
564 font-size: 10px; 562 }
565 color: #999999; 563 .D1_spans {
566 margin-top: 5px; 564 font-size: 10px;
567 span { 565 color: #999999;
568 height: 14px; 566 margin-top: 5px;
569 margin-right: 10px; 567 span {
570 } 568 height: 14px;
571 } 569 margin-right: 10px;
572 } 570 }
573 .D2 { 571 }
574 font-size: 14px; 572 }
575 font-family: "PingFangSC-Regular"; 573 .D2 {
576 view { 574 font-size: 14px;
577 height: 24px; 575 font-family: "PingFangSC-Regular";
578 } 576 view {
579 .D2_span1 { 577 height: 24px;
580 color: #999999; 578 }
581 } 579 .D2_span1 {
582 .D2_span2 { 580 color: #999999;
583 color: #333333; 581 }
584 } 582 .D2_span2 {
585 } 583 color: #333333;
586 .D3 { 584 }
587 .screenBar { 585 }
588 width: 670rpx; 586 .D3 {
589 margin-top: 20rpx; 587 .screenBar {
590 margin-bottom: 24rpx; 588 width: 670rpx;
591 display: flex; 589 margin-top: 20rpx;
592 flex-direction: row; 590 margin-bottom: 24rpx;
593 justify-content: space-between; 591 display: flex;
594 align-items: center; 592 flex-direction: row;
595 font-size: 14px; 593 justify-content: space-between;
596 color: #333333; 594 align-items: center;
597 transition: all 0.2s; 595 font-size: 14px;
598 } 596 color: #333333;
599 .screen-item { 597 transition: all 0.2s;
600 font-size: 32rpx; 598 }
601 color: #333333; 599 .screen-item {
602 display: flex; 600 font-size: 32rpx;
603 transition: all 0.2s; 601 color: #333333;
604 .D3_list { 602 display: flex;
605 margin-bottom: 4px; 603 transition: all 0.2s;
606 } 604 .D3_list {
607 .D3_list view { 605 margin-bottom: 4px;
608 display: flex; 606 }
609 align-content: center; 607 .D3_list view {
610 font-size: 14px; 608 display: flex;
611 color: #333333; 609 align-content: center;
612 } 610 font-size: 14px;
613 .D3_list image { 611 color: #333333;
614 width: 50px; 612 }
615 height: 25px; 613 .D3_list image {
616 margin-right: 6px; 614 width: 50px;
617 } 615 height: 25px;
618 .D3_list span { 616 margin-right: 6px;
619 margin-left: 6px; 617 }
620 margin-right: 5px; 618 .D3_list span {
621 font-family: "PingFangSC-Regular"; 619 margin-left: 6px;
622 } 620 margin-right: 5px;
623 } 621 font-family: "PingFangSC-Regular";
624 .active { 622 }
625 border-bottom: 4rpx solid #ff6b4a; 623 }
626 } 624 .active {
627 .customerService { 625 border-bottom: 4rpx solid #ff6b4a;
628 margin-bottom: 90rpx; 626 }
629 .serviceItem { 627 .customerService {
630 margin-bottom: 32rpx; 628 margin-bottom: 90rpx;
631 .title { 629 .serviceItem {
632 display: flex; 630 margin-bottom: 32rpx;
633 flex-direction: row; 631 .title {
634 align-items: center; 632 display: flex;
635 .titleText { 633 flex-direction: row;
636 font-size: 14px; 634 align-items: center;
637 color: #333333; 635 .titleText {
638 margin-bottom: 12rpx; 636 font-size: 14px;
639 } 637 color: #333333;
640 } 638 margin-bottom: 12rpx;
641 .itemContent { 639 }
642 font-size: 14px; 640 }
643 color: #999999; 641 .itemContent {
644 margin-left: 18rpx; 642 font-size: 14px;
645 } 643 color: #999999;
646 } 644 margin-left: 18rpx;
647 .serviceItem2 { 645 }
648 margin-left: 18rpx; 646 }
649 margin-bottom: 32rpx; 647 .serviceItem2 {
650 .titleText { 648 margin-left: 18rpx;
651 font-size: 14px; 649 margin-bottom: 32rpx;
652 color: #ff6b4a; 650 .titleText {
653 } 651 font-size: 14px;
654 .itemContent { 652 color: #ff6b4a;
655 font-size: 14px; 653 }
656 color: #999999; 654 .itemContent {
657 .itemContent-child { 655 font-size: 14px;
658 margin-bottom: 40rpx; 656 color: #999999;
659 .contentTitle { 657 .itemContent-child {
660 border-bottom: 1px solid #ff6b4a; 658 margin-bottom: 40rpx;
661 } 659 .contentTitle {
662 } 660 border-bottom: 1px solid #ff6b4a;
663 } 661 }
664 } 662 }
665 } 663 }
666 } 664 }
667 .D4 { 665 }
668 .D4_esvalue { 666 }
669 font-size: 14px; 667 .D4 {
670 color: #333333; 668 .D4_esvalue {
671 display: flex; 669 font-size: 14px;
672 justify-content: space-between; 670 color: #333333;
673 margin-bottom: 10px; 671 display: flex;
674 .D4_2 { 672 justify-content: space-between;
675 width: 90px; 673 margin-bottom: 10px;
676 display: flex; 674 .D4_2 {
677 align-items: center; 675 width: 90px;
678 justify-content: space-between; 676 display: flex;
679 } 677 align-items: center;
680 } 678 justify-content: space-between;
681 .D4_esvalue view { 679 }
682 font-size: 14px; 680 }
683 color: #333333; 681 .D4_esvalue view {
684 font-weight: bold; 682 font-size: 14px;
685 } 683 color: #333333;
686 .D4_list{ 684 font-weight: bold;
687 display: grid; 685 }
688 grid-row-gap: 10px; 686 .D4_list{
689 grid-column-gap: 4px; 687 display: grid;
690 } 688 grid-row-gap: 10px;
691 .D4_list view { 689 grid-column-gap: 4px;
692 display: flex; 690 }
693 justify-content: center; 691 .D4_list view {
694 align-items: center; 692 display: flex;
695 font-size: 12px; 693 justify-content: center;
696 width: 118px; 694 align-items: center;
697 height: 24px; 695 font-size: 12px;
698 border-radius: 2px; 696 width: 118px;
699 background: #f2f2f2; 697 height: 24px;
700 color: #666666; 698 border-radius: 2px;
701 // letter-spacing: 1px; 699 background: #f2f2f2;
702 } 700 color: #666666;
703 } 701 // letter-spacing: 1px;
704 .D5 { 702 }
705 .D5_fixed1 { 703 }
706 display: flex; 704 .D5 {
707 justify-content: space-between; 705 .D5_fixed1 {
708 align-content: center; 706 display: flex;
709 margin-bottom: 12px; 707 justify-content: space-between;
710 view { 708 align-content: center;
711 font-size: 14px; 709 margin-bottom: 12px;
712 color: #333333; 710 view {
713 font-weight: bold; 711 font-size: 14px;
714 font-family: "PingFangSC-Medium"; 712 color: #333333;
715 line-height: 24px; 713 font-weight: bold;
716 } 714 font-family: "PingFangSC-Medium";
717 image { 715 line-height: 24px;
718 width: 240rpx; 716 }
719 height: 3px; 717 image {
720 margin-top: 10px; 718 width: 240rpx;
721 } 719 height: 3px;
722 } 720 margin-top: 10px;
723 .D5_all { 721 }
724 width: 100%; 722 }
725 margin-top: 30rpx; 723 .D5_all {
726 margin-right: 30rpx; 724 width: 100%;
727 margin-bottom: 180rpx; 725 margin-top: 30rpx;
728 font-family: "PingFangSC-Regular"; 726 margin-right: 30rpx;
729 // border: #999999 solid 1.5px; 727 margin-bottom: 180rpx;
730 } 728 font-family: "PingFangSC-Regular";
731 } 729 // border: #999999 solid 1.5px;
732 .D6 { 730 }
733 width: 100%; 731 }
734 height: 430px; 732 .D6 {
735 background: #f9f6ed; 733 width: 100%;
736 margin-bottom: 74px; 734 height: 430px;
737 view { 735 background: #f9f6ed;
738 text-align: center; 736 margin-bottom: 74px;
739 } 737 view {
740 .D6_v1 { 738 text-align: center;
741 font-weight: bold; 739 }
742 } 740 .D6_v1 {
743 .D6_v2 { 741 font-weight: bold;
744 font-size: 14px; 742 }
745 margin-bottom: 30px; 743 .D6_v2 {
746 } 744 font-size: 14px;
747 .D6_v5 { 745 margin-bottom: 30px;
748 .D6_v5_s1 { 746 }
749 font-weight: bold; 747 .D6_v5 {
750 } 748 .D6_v5_s1 {
751 .D6_v5_s2 { 749 font-weight: bold;
752 font-size: 14px; 750 }
753 } 751 .D6_v5_s2 {
754 } 752 font-size: 14px;
755 } 753 }
756 .botton { 754 }
757 position: fixed; 755 }
758 bottom: 0; 756 .botton {
759 height: 74px; 757 position: fixed;
760 width: 100%; 758 bottom: 0;
761 background: #ffffff; 759 height: 74px;
762 padding: 20px 20px 8px 20px; 760 width: 100%;
763 font-family: "PingFangSC-Regular"; 761 background: #ffffff;
764 box-sizing: border-box; 762 padding: 20px 20px 8px 20px;
765 display: flex; 763 font-family: "PingFangSC-Regular";
766 justify-content: space-between; 764 box-sizing: border-box;
767 align-content: center; 765 display: flex;
768 .botton_1 { 766 justify-content: space-between;
769 width: 20%; 767 align-content: center;
770 height: 100%; 768 .botton_1 {
771 text-align: center; 769 width: 20%;
772 color: #989898; 770 height: 100%;
773 } 771 text-align: center;
774 image { 772 color: #989898;
775 width: 60%; 773 }
776 height: 30px; 774 image {
777 } 775 width: 60%;
778 .botton_image { 776 height: 30px;
779 font-size: 12px; 777 }
780 text-align: center; 778 .botton_image {
781 } 779 font-size: 12px;
782 .botton_2 { 780 text-align: center;
783 width: 74%; 781 }
784 height: 86%; 782 .botton_2 {
785 display: grid; 783 width: 74%;
786 grid-template-columns: 50% 50%; 784 height: 86%;
787 } 785 display: grid;
788 .botton_input { 786 grid-template-columns: 50% 50%;
789 display: inline-flex; 787 }
790 align-items: center; 788 .botton_input {
791 justify-content: space-around; 789 display: inline-flex;
792 background: #fff0ec; 790 align-items: center;
793 font-size: 16px; 791 justify-content: space-around;
794 color: #ff6b4a; 792 background: #fff0ec;
795 border-radius: 20px 0 0 20px; 793 font-size: 16px;
796 } 794 color: #ff6b4a;
797 .botton_now { 795 border-radius: 20px 0 0 20px;
798 display: inline-flex; 796 }
799 align-items: center; 797 .botton_now {
800 justify-content: space-around; 798 display: inline-flex;
801 background: #ff6b4a; 799 align-items: center;
802 font-size: 16px; 800 justify-content: space-around;
803 color: #ffffff; 801 background: #ff6b4a;
804 border-radius: 0 20px 20px 0; 802 font-size: 16px;
805 } 803 color: #ffffff;
806 } 804 border-radius: 0 20px 20px 0;
807 </style> 805 }