Adam / gulu-vue

Download as
Browse Code »

Commit 0bda9efecb78d2453ed3aed490be6f1eda6a2665

Authored by BigBoss
1 parent ba260b3f99
Exists in master

购物车功能修改

Showing 4 changed files with 105 additions and 116 deletions   Show diff stats
src/pages/cart/cart.vue
Diff comments   View file @0bda9ef
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 9 <view
10 v-bind:class="pIsoPen? 'partentChecked' : 'partentCheck'" 10 v-bind:class="pIsoPen? 'partentChecked' : 'partentCheck'"
11 @touchstart="pChange(pIsoPen)" 11 @touchstart="pChange(pIsoPen)"
12 > 12 >
13 <span class="correct"></span> 13 <span class="correct"></span>
14 </view> 14 </view>
15 <image 15 <image
16 src="../../static/store.png" 16 src="../../static/store.png"
17 mode="aspectFill" 17 mode="aspectFill"
18 ></image> 18 ></image>
19 <text>非常戴镜</text> 19 <text>非常戴镜</text>
20 </view> 20 </view>
21 <view 21 <view
22 class="cardBody" 22 class="cardBody"
23 v-for="(item,index) in cartList" 23 v-for="(item,index) in cartList"
24 :key="index" 24 :key="index"
25 @longpress="delCart(item.cart_id,index)" 25 @longpress="delCart(item.cart_id,index)"
26 > 26 >
27 <view 27 <view
28 v-bind:class="childIsOpen[index]? 'partentChecked':'partentCheck'" 28 v-bind:class="childIsOpen[index]? 'partentChecked':'partentCheck'"
29 @touchstart="Change(childIsOpen[index],index)" 29 @touchstart="Change(childIsOpen[index],index)"
30 > 30 >
31 <span class="correct"></span> 31 <span class="correct"></span>
32 </view> 32 </view>
33 <view class="imageWrap"> 33 <view class="imageWrap">
34 <image 34 <image
35 :src="item.img_index_url" 35 :src="item.img_index_url"
36 mode="aspectFit" 36 mode="aspectFit"
37 style="width: 188rpx;height: 168rpx;" 37 style="width: 188rpx;height: 168rpx;"
38 ></image> 38 ></image>
39 </view> 39 </view>
40 <view class="goodInfo"> 40 <view class="goodInfo">
41 <!-- <view class="imageWrap"> 41 <!-- <view class="imageWrap">
42 <image :src="item.img_index_url" mode="aspectFit" style="width: 188rpx;height: 168rpx;"></image> 42 <image :src="item.img_index_url" mode="aspectFit" style="width: 188rpx;height: 168rpx;"></image>
43 </view> --> 43 </view> -->
44 <view class="infoRight"> 44 <view class="infoRight">
45 <view 45 <view
46 class="goodName" 46 class="goodName"
47 @tap="toGoods(item.pid,item.sk_id)" 47 @tap="toGoods(item.pid,item.sk_id)"
48 >{{item.p_name}}</view> 48 >{{item.p_name}}</view>
49 <!-- <view class="describ"> --> 49 <view class="describ">
50 <uni-collapse accordion="true" style="justify-content: space-around;width: 196px;"> 50 <view class="people">
51 <uni-collapse-item 51 使用人:{{item.peopleName}}
52 showAnimation='true' 52 </view>
53 :title="item.tag.prod_tag_fun[0].label&&item.tag.prod_tag_fun[1].label?item.tag.prod_tag_fun[0].label+'/'+item.tag.prod_tag_fun[1].label+'...':'暂无数据'"> 53 <view class="skuInfo">
54 <text class="describ"> 54 {{item.sku_name}}
55 <block 55 </view>
56 v-for="tag in item.tag.prod_tag_fun" 56 </view>
57 :key="tag.value"
58 >
59 {{tag.label+`&nbsp;&nbsp;`}}
60 </block>
61 </text>
62 <!-- <text>
63 <block v-for="tag in item.tag.prod_tag_style" :key="tag.value">
64 {{tag.label+`&nbsp;&nbsp;`}}
65 </block>
66 </text> -->
67 </uni-collapse-item>
68 </uni-collapse>
69 <!-- <view v-bind:class="collapseList[index]? 'icon':'iconed'"></view> -->
70 <!-- </view> -->
71 <view class="priceBox"> 57 <view class="priceBox">
72 <view class="price">￥{{item.nowPrice*item.num}}</view> 58 <view class="price">￥{{item.nowPrice*item.num}}</view>
73 <text class="maxCount">(限购{{maxCount}}副)</text> 59 <text class="maxCount">(限购{{maxCount}}副)</text>
74 <view class="counter"> 60 <view class="counter">
75 <view 61 <view
76 class="btn" 62 class="btn"
77 disabled="this.addDisabled" 63 disabled="this.addDisabled"
78 type="default" 64 type="default"
79 @tap="counter(index,false,item)" 65 @tap="counter(index,false,item)"
80 >-</view> 66 >-</view>
81 <text>{{item.num}}</text> 67 <text>{{item.num}}</text>
82 <view 68 <view
83 class="btn" 69 class="btn"
84 disabled="this.desDisabled" 70 disabled="this.desDisabled"
85 type="default" 71 type="default"
86 @tap="counter(index,true,item)" 72 @tap="counter(index,true,item)"
87 >+</view> 73 >+</view>
88 </view> 74 </view>
89 </view> 75 </view>
90 </view> 76 </view>
91 </view> 77 </view>
92 </view> 78 </view>
93 </view> 79 </view>
94 </block> 80 </block>
95 <view class="footer"> 81 <view class="footer">
96 <view class="footerLeft">实付金额:<text>￥{{totalPrice}}</text></view> 82 <view class="footerLeft">实付金额:<text>￥{{totalPrice}}</text></view>
97 <view class="footerRight"> 83 <view class="footerRight">
98 <navigator 84 <view class="paybtn" @click="toComfirmOrder">立即结算</view>
99 url="/pages/confirmOrder/confirmOrder"
100 hover-class="navigator-hover"
101 >
102 <view class="paybtn">立即结算</view>
103 </navigator>
104 </view> 85 </view>
105 </view> 86 </view>
106 87
107 </view> 88 </view>
108 </template> 89 </template>
109 90
110 <script> 91 <script>
111 import UniCollapse from '@/components/UniCollapse/UniCollapse.vue' 92
112 import UniCollapseItem from '@/components/UniCollapseItem/UniCollapseItem.vue'
113 import store from '@/store' 93 import store from '@/store'
114 94
115 export default { 95 export default {
116 components: { UniCollapse, UniCollapseItem },
117 data() { 96 data() {
118 return { 97 return {
119 totalPrice: 0, 98 totalPrice: 0,
120 pIsoPen: false, 99 pIsoPen: false,
121 // childIsOpen:[], 100 // childIsOpen:[],
122 maxCount: 20, 101 maxCount: 20,
123 } 102 }
124 }, 103 },
125 computed: { 104 computed: {
126 105 // skInfo(){
106 // return filters()
107 // }
127 cartList() { 108 cartList() {
128 // console.log('cart-list', this.$store.state.cart.cartList); 109 // console.log('cart-list', this.$store.state.cart.cartList);
129 this.totalPrice=0 110 // this.totalPrice=0
130 return this.$store.state.cart.cartList 111 return this.$store.state.cart.cartList
131 }, 112 },
132 childIsOpen() { 113 childIsOpen() {
133 const temp = [] 114 const temp = []
134 temp.length = this.$store.state.cart.cartList.length 115 temp.length = this.$store.state.cart.cartList.length
135 for (let i = 0; i < temp.length; i++) { 116 for (let i = 0; i < temp.length; i++) {
136 temp[i] = false 117 temp[i] = false
137 } 118 }
138 console.log('this.childisOPne===>', temp) 119 console.log('this.childisOPne===>', temp)
139 return temp 120 return temp
140 }, 121 },
141 }, 122 },
142 onLoad: function() { 123 onLoad: function() {
143 // store.dispatch('cart/addCart', { 124 // store.dispatch('cart/addCart', {
144 // uid: this.$store.state.user.userInfo.uid, 125 // uid: this.$store.state.user.userInfo.uid,
145 // openid: this.$store.state.user.userInfo.openid, 126 // openid: this.$store.state.user.userInfo.openid,
146 // mp_id: 7, 127 // mp_id: 7,
147 // sk_id: 7, 128 // sk_id: 7,
148 // num: 1, 129 // num: 1,
149 // pid: 8, 130 // pid: 8,
150 // price: 128, 131 // price: 128,
151 // checkedSKU:{}, 132 // checkedSKU:{},
152 // }) 133 // })
153 store.dispatch('cart/getCartList', { 134 store.dispatch('cart/getCartList', {
154 uid: this.$store.state.user.userInfo.uid, // 用户id 135 uid: this.$store.state.user.userInfo.uid, // 用户id
155 }) 136 })
156 }, 137 },
157 methods: { 138 methods: {
158 toGoods(id, sk_id) { 139 toGoods(id, sk_id) {
159 console.log('cart-list', this.$store.state.cart.cartList) 140 console.log('cart-list', this.$store.state.cart.cartList)
160 console.log('---', '../frameDetail/frameDetail?pid=' + id + '&sk_id=' + sk_id) 141 console.log('---', '../frameDetail/frameDetail?pid=' + id + '&sk_id=' + sk_id)
161 uni.navigateTo({ 142 uni.navigateTo({
162 url: '../frameDetail/frameDetail?pid=' + id + '&sk_id=' + sk_id, 143 url: '../frameDetail/frameDetail?pid=' + id + '&sk_id=' + sk_id,
163 success: res => {}, 144 success: res => {},
164 fail: () => {}, 145 fail: () => {},
165 complete: () => {}, 146 complete: () => {},
166 }) 147 })
167 }, 148 },
149 toComfirmOrder(){
150 uni.navigateTo({
151 url:`../confirmOrder/confirmOrder`,
152 fail(res) {
153 console.log(res)
154 }
155 })
156 },
168 counter(index, isadd, item) { 157 counter(index, isadd, item) {
169 // console.log('===>>counter ===>num',num) 158 // console.log('===>>counter ===>num',num)
170 // console.log('===>>counter ===>isadd',isadd) 159 // console.log('===>>counter ===>isadd',isadd)
171 console.log('item=====>', item) 160 console.log('item=====>', item)
172 console.log('num=====>', item.num) 161 console.log('num=====>', item.num)
173 const nums = parseInt(item.num) 162 const nums = parseInt(item.num)
174 if (isadd) { 163 if (isadd) {
175 if (nums >= this.maxCount) { 164 if (nums >= this.maxCount) {
176 this.addDisabled = true 165 this.addDisabled = true
177 } else { 166 } else {
178 this.addDisabled = true 167 this.addDisabled = true
179 // 修改num 168 // 修改num
180 if (this.childIsOpen[index]) { 169 if (this.childIsOpen[index]) {
181 this.totalPrice = this.totalPrice + this.$store.state.cart.cartList[index].nowPrice 170 this.totalPrice = this.totalPrice + this.$store.state.cart.cartList[index].nowPrice
182 } 171 }
183 store.dispatch('cart/modiCart', { 172 store.dispatch('cart/modiCart', {
184 uid: this.$store.state.user.userInfo.uid, 173 uid: this.$store.state.user.userInfo.uid,
185 openid: this.$store.state.user.userInfo.openid, 174 openid: this.$store.state.user.userInfo.openid,
186 mp_id: item.mp_id, 175 mp_id: item.mp_id,
187 sk_id: item.sk_id, 176 sk_id: item.sk_id,
188 price: item.nowPrice, 177 price: item.nowPrice,
189 pid: item.pid, 178 pid: item.pid,
190 num: nums + 1, 179 num: nums + 1,
191 cart_id: item.cart_id, 180 cart_id: item.cart_id,
192 args: { 181 args: {
193 index: index, 182 index: index,
194 isadd: isadd, 183 isadd: isadd,
195 }, 184 },
196 }) 185 })
197 this.addDisabled = false 186 this.addDisabled = false
198 } 187 }
199 } else { 188 } else {
200 if (nums <= 1) { 189 if (nums <= 1) {
201 this.desDisabled = true 190 this.desDisabled = true
202 } else { 191 } else {
203 this.desDisabled = false 192 this.desDisabled = false
204 // post 请求修改相关参数 193 // post 请求修改相关参数
205 if (this.childIsOpen[index]) { 194 if (this.childIsOpen[index]) {
206 this.totalPrice = this.totalPrice - this.$store.state.cart.cartList[index].nowPrice 195 this.totalPrice = this.totalPrice - this.$store.state.cart.cartList[index].nowPrice
207 } 196 }
208 store.dispatch('cart/modiCart', { 197 store.dispatch('cart/modiCart', {
209 uid: this.$store.state.user.userInfo.uid, 198 uid: this.$store.state.user.userInfo.uid,
210 openid: this.$store.state.user.userInfo.openid, 199 openid: this.$store.state.user.userInfo.openid,
211 mp_id: item.mp_id, 200 mp_id: item.mp_id,
212 sk_id: item.sk_id, 201 sk_id: item.sk_id,
213 price: item.nowPrice, 202 price: item.nowPrice,
214 pid: item.pid, 203 pid: item.pid,
215 num: nums - 1, 204 num: nums - 1,
216 cart_id: item.cart_id, 205 cart_id: item.cart_id,
217 args: { 206 args: {
218 index: index, 207 index: index,
219 isadd: isadd, 208 isadd: isadd,
220 }, 209 },
221 }) 210 })
222 this.desDisabled = true 211 this.desDisabled = true
223 } 212 }
224 } 213 }
225 // store.dispatch('cart/getCartList', { 214 // store.dispatch('cart/getCartList', {
226 // uid: this.$store.state.user.userInfo.uid // 用户id 215 // uid: this.$store.state.user.userInfo.uid // 用户id
227 // }) 216 // })
228 }, 217 },
229 Change(isopen, indexC) { 218 Change(isopen, indexC) {
230 // console.log('lalla===>',isopen) 219 // console.log('lalla===>',isopen)
231 this.childIsOpen[indexC] = !isopen 220 this.childIsOpen[indexC] = !isopen
232 if (!isopen) { 221 if (!isopen) {
233 this.totalPrice = this.totalPrice + (this.$store.state.cart.cartList[indexC].num * this.$store.state.cart.cartList[indexC].nowPrice) 222 this.totalPrice = this.totalPrice + (this.$store.state.cart.cartList[indexC].num * this.$store.state.cart.cartList[indexC].nowPrice)
234 } else { 223 } else {
235 this.totalPrice = this.totalPrice - (this.$store.state.cart.cartList[indexC].num * this.$store.state.cart.cartList[indexC].nowPrice) 224 this.totalPrice = this.totalPrice - (this.$store.state.cart.cartList[indexC].num * this.$store.state.cart.cartList[indexC].nowPrice)
236 } 225 }
237 let m = true 226 let m = true
238 for (let i = 0; i < this.childIsOpen.length; i++) { 227 for (let i = 0; i < this.childIsOpen.length; i++) {
239 m = m & this.childIsOpen[i] 228 m = m & this.childIsOpen[i]
240 } 229 }
241 if (m === 1) { 230 if (m === 1) {
242 this.pIsoPen = true 231 this.pIsoPen = true
243 } else { 232 } else {
244 this.pIsoPen = false 233 this.pIsoPen = false
245 } 234 }
246 }, 235 },
247 pChange(isopen) { 236 pChange(isopen) {
248 this.pIsoPen = !isopen 237 this.pIsoPen = !isopen
249 for (let i = 0; i < this.childIsOpen.length; i++) { 238 for (let i = 0; i < this.childIsOpen.length; i++) {
250 this.childIsOpen[i] = !isopen 239 this.childIsOpen[i] = !isopen
251 } 240 }
252 if (this.pIsoPen) { 241 if (this.pIsoPen) {
253 // 计算总价逻辑 242 // 计算总价逻辑
254 if (this.childIsOpen.length !== 0) { 243 if (this.childIsOpen.length !== 0) {
255 for (let i = 0; i < this.childIsOpen.length; i++) { 244 for (let i = 0; i < this.childIsOpen.length; i++) {
256 if (this.childIsOpen[i]) { 245 if (this.childIsOpen[i]) {
257 this.totalPrice = this.totalPrice + (this.$store.state.cart.cartList[i].num * this.$store.state.cart.cartList[i].nowPrice) 246 this.totalPrice = this.totalPrice + (this.$store.state.cart.cartList[i].num * this.$store.state.cart.cartList[i].nowPrice)
258 } 247 }
259 } 248 }
260 } 249 }
261 } else { 250 } else {
262 this.totalPrice = 0 251 this.totalPrice = 0
263 } 252 }
264 }, 253 },
265 delCart(cart_id, index) { 254 delCart(cart_id, index) {
266 // console.log('userInfo',this.$store.state.user.userInfo) 255 // console.log('userInfo',this.$store.state.user.userInfo)
267 cart_id = parseInt(cart_id) 256 cart_id = parseInt(cart_id)
268 // console.log('delcart------>cart_id',cart_id) 257 // console.log('delcart------>cart_id',cart_id)
269 // console.log('cartlist====>delcart',this.$store.state.cart.cartList) 258 // console.log('cartlist====>delcart',this.$store.state.cart.cartList)
270 // console.log('delcart======>index',index) 259 // console.log('delcart======>index',index)
271 uni.showModal({ 260 uni.showModal({
272 title: '是否删除该商品', 261 title: '是否删除该商品',
273 // content: '是否删除该商品', 262 // content: '是否删除该商品',
274 success: function (res) { 263 success: function (res) {
275 if (res.confirm) { 264 if (res.confirm) {
276 if (this.childIsOpen[index]) { 265 if (this.childIsOpen[index]) {
277 this.totalPrice = this.totalPrice - (this.$store.state.cart.cartList[index].nowPrice*this.$store.state.cart.cartList[index].num) 266 this.totalPrice = this.totalPrice - (this.$store.state.cart.cartList[index].nowPrice*this.$store.state.cart.cartList[index].num)
278 } 267 }
279 console.log('index===>',index) 268 console.log('index===>',index)
280 store.dispatch('cart/delCart', { 269 store.dispatch('cart/delCart', {
281 uid: this.$store.state.user.userInfo.uid, 270 uid: this.$store.state.user.userInfo.uid,
282 openid: this.$store.state.user.userInfo.openid, 271 openid: this.$store.state.user.userInfo.openid,
283 cart_id: cart_id, // 要修改的购物车id 272 cart_id: cart_id, // 要修改的购物车id
284 arg: index, // 由于action 传参是能接收两参数，因此将index放入对象 273 arg: index, // 由于action 传参是能接收两参数，因此将index放入对象
285 }) 274 })
286 } 275 }
287 }.bind(this), 276 }.bind(this),
288 }) 277 })
289 }, 278 },
290 }, 279 },
291 } 280 }
292 </script> 281 </script>
293 282
294 <style lang="scss"> 283 <style lang="scss">
295 .content { 284 .content {
296 min-height: 100vh; 285 min-height: 100vh;
297 background-color: #f2f2f2; 286 background-color: #f2f2f2;
298 display: flex; 287 display: flex;
299 flex-direction: column; 288 flex-direction: column;
300 align-items: center; 289 align-items: center;
301 justify-content: space-between; 290 justify-content: space-between;
302 padding: 20rpx 40rpx; 291 padding: 20rpx 40rpx;
303 box-sizing: border-box; 292 box-sizing: border-box;
304 293
305 .partentCheck { 294 .partentCheck {
306 width: 16px; 295 width: 16px;
307 height: 16px; 296 height: 16px;
308 border-radius: 22px; 297 border-radius: 22px;
309 border: 1px solid #cfcfcf; 298 border: 1px solid #cfcfcf;
310 background-color: #ffffff; 299 background-color: #ffffff;
311 margin: 24rpx 12rpx 24rpx 24rpx; 300 margin: 24rpx 12rpx 24rpx 24rpx;
312 } 301 }
313 .partentChecked { 302 .partentChecked {
314 width: 18px; 303 width: 18px;
315 height: 18px; 304 height: 18px;
316 border-radius: 22px; 305 border-radius: 22px;
317 background-color: #ff6b4a; 306 background-color: #ff6b4a;
318 margin: 24rpx 12rpx 24rpx 24rpx; 307 margin: 24rpx 12rpx 24rpx 24rpx;
319 .correct { 308 .correct {
320 display: inline-block; 309 display: inline-block;
321 position: relative; 310 position: relative;
322 width: 10rpx; 311 width: 10rpx;
323 height: 2rpx; 312 height: 2rpx;
324 background: #ffffff; 313 background: #ffffff;
325 line-height: 0; 314 line-height: 0;
326 font-size: 0; 315 font-size: 0;
327 position: relative; 316 position: relative;
328 top: -7px; 317 top: -7px;
329 left: 4px; 318 left: 4px;
330 -webkit-transform: rotate(45deg); 319 -webkit-transform: rotate(45deg);
331 } 320 }
332 .correct:after { 321 .correct:after {
333 content: "/"; 322 content: "/";
334 display: block; 323 display: block;
335 width: 16rpx; 324 width: 16rpx;
336 height: 2rpx; 325 height: 2rpx;
337 background: #ffffff; 326 background: #ffffff;
338 -webkit-transform: rotate(-90deg) translateY(50%) translateX(50%); 327 -webkit-transform: rotate(-90deg) translateY(50%) translateX(50%);
339 } 328 }
340 } 329 }
341 330
342 .card { 331 .card {
343 background-color: #ffffff; 332 background-color: #ffffff;
344 border-radius: 16rpx; 333 border-radius: 16rpx;
345 box-sizing: border-box; 334 box-sizing: border-box;
346 padding: 36rpx 36rpx 36rpx 18rpx; 335 padding: 36rpx 36rpx 36rpx 18rpx;
347 display: flex; 336 display: flex;
348 flex-direction: column; 337 flex-direction: column;
349 align-items: center; 338 align-items: center;
350 justify-content: space-between; 339 justify-content: space-between;
351 margin-bottom: 180rpx; 340 margin-bottom: 180rpx;
352 .cardHeader { 341 .cardHeader {
353 width: 100%; 342 width: 100%;
354 height: 36rpx; 343 height: 36rpx;
355 display: flex; 344 display: flex;
356 align-items: center; 345 align-items: center;
357 justify-content: flex-start; 346 justify-content: flex-start;
358 margin-bottom: 20rpx; 347 margin-bottom: 20rpx;
359 image { 348 image {
360 height: 32rpx; 349 height: 32rpx;
361 width: 32rpx; 350 width: 32rpx;
362 padding-left: 6px; 351 padding-left: 6px;
363 padding-right: 10px; 352 padding-right: 10px;
364 } 353 }
365 text { 354 text {
366 // font-family: PingFangSC-Regular; 355 // font-family: PingFangSC-Regular;
367 font-size: 14px; 356 font-size: 14px;
368 color: #333333; 357 color: #333333;
369 letter-spacing: -0.26px; 358 letter-spacing: -0.26px;
370 } 359 }
371 } 360 }
372 .cardBody { 361 .cardBody {
373 width: 100%; 362 width: 100%;
374 min-height: 300rpx; 363 min-height: 300rpx;
375 display: flex; 364 display: flex;
376 align-items: center; 365 align-items: center;
377 justify-content: space-between; 366 justify-content: space-between;
378 .goodInfo { 367 .goodInfo {
379 width: 390rpx; 368 width: 390rpx;
380 display: flex; 369 display: flex;
381 flex-direction: row; 370 flex-direction: row;
382 justify-content: flex-start; 371 justify-content: flex-start;
383 padding-left: 6px; 372 padding-left: 6px;
384 373
385 .imageWrap { 374 .imageWrap {
386 height: 188rpx; 375 height: 188rpx;
387 width: 188rpx; 376 width: 188rpx;
388 margin-right: 28rpx; 377 margin-right: 28rpx;
389 378
390 image { 379 image {
391 border-radius: 4px; 380 border-radius: 4px;
392 height: 188rpx; 381 height: 188rpx;
393 width: 188rpx; 382 width: 188rpx;
394 } 383 }
395 } 384 }
396 .infoRight { 385 .infoRight {
397 display: flex; 386 display: flex;
398 flex-direction: column; 387 flex-direction: column;
399 align-items: flex-start; 388 align-items: flex-start;
400 justify-content: space-between; 389 justify-content: space-between;
401 min-height: 240rpx; 390 min-height: 240rpx;
402 .goodName { 391 .goodName {
403 display: -webkit-box; 392 display: -webkit-box;
404 -webkit-box-orient: vertical; 393 -webkit-box-orient: vertical;
405 -webkit-line-clamp: 2; 394 -webkit-line-clamp: 2;
406 text-align: justify; 395 text-align: justify;
407 overflow: hidden; 396 overflow: hidden;
408 font-size: 28rpx; 397 font-size: 28rpx;
409 color: #333333; 398 color: #333333;
410 } 399 }
411 .describ { 400 .describ {
412 width: 100%; 401 width: 100%;
413 // min-height: 80rpx; 402 min-height: 80rpx;
414 // box-sizing: border-box; 403 // box-sizing: border-box;
415 // padding: 10rpx; 404 // padding: 10rpx;
416 font-size: 20rpx; 405 font-size: 20rpx;
417 letter-spacing: -0.23px; 406 letter-spacing: -0.23px;
418 text-align: justify; 407 text-align: justify;
419 color: #999999; 408 color: #999999;
420 // background: #F9F9F9; 409 view{
421 // display: flex; 410 margin: 10rpx 0 10rpx 0 ;
422 // justify-content: center; 411 }
423 // align-items: center;
424 // text{
425 // text-overflow: -o-ellipsis-lastline;
426 // overflow: hidden;
427 // text-overflow: ellipsis;
428 // display: -webkit-box;
429 // -webkit-line-clamp: 2;
430 // line-clamp: 2;
431 // -webkit-box-orient: vertical;
432 // }
433 // .icon {
434 // width: 0;
435 // height: 0;
436 // border-left: 5px transparent;
437 // border-right: 5px transparent;
438 // border-top: 5px #979797;
439 // border-bottom: 0 transparent;
440 // border-style: solid;
441 // position: relative;
442 // margin-left: 10px;
443 // // transform: scaleY(-1);
444 // }
445 // .icon::after{
446 // content: '';
447 // position: absolute;
448 // top: -6.5px;
449 // left: -5px;
450 // border-left: 5px transparent;
451 // border-right: 5px transparent;
452 // border-top: 5px #FFFFFF;
453 // border-bottom: 0 transparent;
454 // border-style: solid;
455 // }
456 } 412 }
457 .priceBox { 413 .priceBox {
458 display: flex; 414 display: flex;
459 justify-content: space-between; 415 justify-content: space-between;
460 align-items: center; 416 align-items: center;
461 // margin-top: 26px; 417 // margin-top: 26px;
462 width: 100%; 418 width: 100%;
463 font-size: 14px; 419 font-size: 14px;
464 color: #999999; 420 color: #999999;
465 .maxCount { 421 .maxCount {
466 color: #999999; 422 color: #999999;
467 font-size: 24rpx; 423 font-size: 24rpx;
468 } 424 }
469 .price { 425 .price {
470 color: #ff6b4a; 426 color: #ff6b4a;
471 font-size: 28rpx; 427 font-size: 28rpx;
472 } 428 }
473 .counter { 429 .counter {
474 display: flex; 430 display: flex;
475 flex-direction: row; 431 flex-direction: row;
476 justify-content: space-between; 432 justify-content: space-between;
477 align-items: center; 433 align-items: center;
478 font-size: 28rpx; 434 font-size: 28rpx;
479 color: #333333; 435 color: #333333;
480 width: 122rpx; 436 width: 122rpx;
481 .btn { 437 .btn {
482 display: flex; 438 display: flex;
483 justify-content: center; 439 justify-content: center;
484 line-height: 32rpx; 440 line-height: 32rpx;
485 height: 32rpx; 441 height: 32rpx;
486 width: 32rpx; 442 width: 32rpx;
487 background-color: #f2f2f2; 443 background-color: #f2f2f2;
488 color: #cfcfcf; 444 color: #cfcfcf;
489 } 445 }
490 } 446 }
491 } 447 }
492 } 448 }
493 } 449 }
494 } 450 }
495 } 451 }
496 .footer { 452 .footer {
497 position: fixed; 453 position: fixed;
498 left: 0; 454 left: 0;
499 bottom: 0px; 455 bottom: 0px;
500 height: 112rpx; 456 height: 112rpx;
501 width: 100%; 457 width: 100%;
502 background-color: #ffffff; 458 background-color: #ffffff;
503 font-size: 16px; 459 font-size: 16px;
504 display: flex; 460 display: flex;
505 justify-content: space-between; 461 justify-content: space-between;
506 align-items: center; 462 align-items: center;
507 .footerLeft { 463 .footerLeft {
508 display: flex; 464 display: flex;
509 justify-content: center; 465 justify-content: center;
510 align-items: center; 466 align-items: center;
511 width: 50%; 467 width: 50%;
512 color: #333333; 468 color: #333333;
513 text { 469 text {
514 color: #ff6b4a; 470 color: #ff6b4a;
515 } 471 }
516 } 472 }
517 .footerRight { 473 .footerRight {
518 display: flex; 474 display: flex;
519 justify-content: flex-end; 475 justify-content: flex-end;
520 align-items: center; 476 align-items: center;
521 width: 50%; 477 width: 50%;
522 margin-right: 26rpx; 478 margin-right: 26rpx;
523 .paybtn { 479 .paybtn {
524 display: flex; 480 display: flex;
525 justify-content: center; 481 justify-content: center;
526 align-items: center; 482 align-items: center;
527 background: #ff6b4a; 483 background: #ff6b4a;
528 border-radius: 20px; 484 border-radius: 20px;
src/pages/frameDetail/components/BottomSheet.vue
Diff comments   View file @0bda9ef
1 <template> 1 <template>
2 <view class="content"> 2 <view class="content">
3 <view class="sheet" :class="{sheetShow:isShowBottom,sheeHide:!isShowBottom}" @touchmove.stop.prevent="moveHandle" @click="closeSheet()"> 3 <view class="sheet" :class="{sheetShow:isShowBottom,sheeHide:!isShowBottom}" @touchmove.stop.prevent="moveHandle" @click="closeSheet()">
4 <scroll-view scroll-y="true" class="sheetView" :class="{sheetView_active:isShowBottom}" @click.stop="stopEvent()" > 4 <scroll-view scroll-y="true" class="sheetView" :class="{sheetView_active:isShowBottom}" @click.stop="stopEvent()" >
5 <view class="content"> 5 <view class="content">
6 <view class="goodInfo"> 6 <view class="goodInfo">
7 <view class="imageWrap"> 7 <view class="imageWrap">
8 <image 8 <image
9 :src="goodInfo.img_index_url" 9 :src="goodInfo.img_index_url"
10 mode="aspectFill" 10 mode="aspectFill"
11 style="width: 188rpx;height: 168rpx;" 11 style="width: 188rpx;height: 168rpx;"
12 ></image> 12 ></image>
13 </view> 13 </view>
14 <view class="infoRight"> 14 <view class="infoRight">
15 <text class="goodName">{{goodInfo.p_name}}</text> 15 <text class="goodName">{{goodInfo.p_name}}</text>
16 <text class="remarks">支持7天无理由退货 顺丰发货</text> 16 <text class="remarks">支持7天无理由退货 顺丰发货</text>
17 <view class="priceBox"> 17 <view class="priceBox">
18 <view class="price">￥{{goodInfo.priceArea.Min_Price || '暂无'}}</view> 18 <view class="price">￥{{goodInfo.priceArea.Min_Price || '暂无'}}</view>
19 <text>(限购{{maxCount}}副)</text> 19 <text>(限购{{maxCount}}副)</text>
20 <view class="counter"> 20 <view class="counter">
21 <view 21 <view
22 class="btn" 22 class="btn"
23 disabled="this.addDisabled" 23 disabled="this.addDisabled"
24 type="default" 24 type="default"
25 @click="counter(false)" 25 @click="counter(false)"
26 >-</view> 26 >-</view>
27 <text>{{count}}</text> 27 <text>{{count}}</text>
28 <view 28 <view
29 class="btn" 29 class="btn"
30 disabled="this.desDisabled" 30 disabled="this.desDisabled"
31 type="default" 31 type="default"
32 @click="counter(true)" 32 @click="counter(true)"
33 >+</view> 33 >+</view>
34 </view> 34 </view>
35 </view> 35 </view>
36 </view> 36 </view>
37 </view> 37 </view>
38 <view class="peopleChoose"> 38 <view class="peopleChoose">
39 <view class="title">选择使用人</view> 39 <view class="title">选择使用人</view>
40 <view class="loveList"> 40 <view class="loveList">
41 <view class="peopleName" v-for="(item,index) in loveList" :key='index' :class="{ active2: loveCurrent === index }" 41 <view class="peopleName" v-for="(item,index) in loveList" :key='index' :class="{ active2: loveCurrent === index }"
42 @click="onClickLoveItem(index,item.name)"> 42 @click="onClickLoveItem(index,item.name)">
43 {{item.name}} 43 {{item.name}}
44 </view> 44 </view>
45 </view> 45 </view>
46 </view> 46 </view>
47 <view class="goods-data"> 47 <view class="goods-data">
48 <view class="opCollapse"> 48 <view class="opCollapse">
49 <view class="body"> 49 <view class="body">
50 <template v-if="opIsOpen"> 50 <template v-if="opIsOpen">
51 <view class="goods-form"> 51 <view class="goods-form">
52 <view class="p1"> 52 <view class="p1">
53 <image class="image2" src="../../../static/img/myOpticsData/dataWrite.png" mode="aspectFit"></image> 53 <image class="image2" src="../../../static/img/myOpticsData/dataWrite.png" mode="aspectFit"></image>
54 填写验光数据 54 填写验光数据
55 </view> 55 </view>
56 <text class="p2">没有验光数据？请到线下眼镜店验光哦～</text> 56 <text class="p2">没有验光数据？请到线下眼镜店验光哦～</text>
57 <view class="picker"> 57 <view class="picker">
58 <view class="picker-choice"> 58 <view class="picker-choice">
59 <view class="choice-left"> 59 <view class="choice-left">
60 <text class="pd">验光单取名:</text> 60 <text class="pd">验光单取名:</text>
61 </view> 61 </view>
62 <input type="text" @blur="handleInput" class="input" 62 <input type="text" @blur="handleInput" class="input"
63 placeholder="请输入名称" maxlength="20" :value="name" /> 63 placeholder="请输入名称" maxlength="20" :value="name" />
64 </view> 64 </view>
65 </view> 65 </view>
66 <view class="picker" > 66 <view class="picker" >
67 <view class="picker-choice"> 67 <view class="picker-choice">
68 <view class="choice-left"> 68 <view class="choice-left">
69 <text class="p11">{{pickerInfoList[0].nameC}}</text> 69 <text class="p11">{{pickerInfoList[0].nameC}}</text>
70 <text class="p12">{{pickerInfoList[0].nameE}}</text> 70 <text class="p12">{{pickerInfoList[0].nameE}}</text>
71 </view> 71 </view>
72 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text> 72 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
73 <!-- <text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text> --> 73 <!-- <text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text> -->
74 <picker @change="bindPickerChange01" :value="pickerInfoList[0].nameIndex1" :range="pickerInfoList[0].nameArray1"> 74 <picker @change="bindPickerChange01" :value="pickerInfoList[0].nameIndex1" :range="pickerInfoList[0].nameArray1">
75 <view class="p14"> 75 <view class="p14">
76 {{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}} 76 {{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}
77 <image src="../../../static/detail-tabicon.png" ></image> 77 <image src="../../../static/detail-tabicon.png" ></image>
78 </view> 78 </view>
79 <!-- <image src="../../../static/detail-tabicon.png" ></image> --> 79 <!-- <image src="../../../static/detail-tabicon.png" ></image> -->
80 </picker> 80 </picker>
81 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text> 81 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
82 <!-- <text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text> --> 82 <!-- <text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text> -->
83 <picker @change="bindPickerChange02" :value="pickerInfoList[0].nameIndex2" :range="pickerInfoList[0].nameArray2"> 83 <picker @change="bindPickerChange02" :value="pickerInfoList[0].nameIndex2" :range="pickerInfoList[0].nameArray2">
84 <view class="p14"> 84 <view class="p14">
85 {{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}} 85 {{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}
86 <image src="../../../static/detail-tabicon.png" ></image> 86 <image src="../../../static/detail-tabicon.png" ></image>
87 </view> 87 </view>
88 <!-- <image src="../../../static/detail-tabicon.png" ></image> --> 88 <!-- <image src="../../../static/detail-tabicon.png" ></image> -->
89 </picker> 89 </picker>
90 </view> 90 </view>
91 </view> 91 </view>
92 <view class="picker" > 92 <view class="picker" >
93 <view class="picker-choice"> 93 <view class="picker-choice">
94 <view class="choice-left"> 94 <view class="choice-left">
95 <text class="p11">{{pickerInfoList[1].nameC}}</text> 95 <text class="p11">{{pickerInfoList[1].nameC}}</text>
96 <text class="p12">{{pickerInfoList[1].nameE}}</text> 96 <text class="p12">{{pickerInfoList[1].nameE}}</text>
97 </view> 97 </view>
98 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text> 98 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
99 <!-- <text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text> --> 99 <!-- <text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text> -->
100 <picker @change="bindPickerChange11" :value="pickerInfoList[1].nameIndex1" :range="pickerInfoList[1].nameArray1"> 100 <picker @change="bindPickerChange11" :value="pickerInfoList[1].nameIndex1" :range="pickerInfoList[1].nameArray1">
101 <view class="p14"> 101 <view class="p14">
102 {{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}} 102 {{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}
103 <image src="../../../static/detail-tabicon.png" ></image> 103 <image src="../../../static/detail-tabicon.png" ></image>
104 </view> 104 </view>
105 <!-- <image src="../../../static/detail-tabicon.png" ></image> --> 105 <!-- <image src="../../../static/detail-tabicon.png" ></image> -->
106 </picker> 106 </picker>
107 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text> 107 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
108 <!-- <text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text> --> 108 <!-- <text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text> -->
109 <picker @change="bindPickerChange12" :value="pickerInfoList[1].nameIndex2" :range="pickerInfoList[1].nameArray2"> 109 <picker @change="bindPickerChange12" :value="pickerInfoList[1].nameIndex2" :range="pickerInfoList[1].nameArray2">
110 <view class="p14"> 110 <view class="p14">
111 {{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}} 111 {{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}
112 <image src="../../../static/detail-tabicon.png" ></image> 112 <image src="../../../static/detail-tabicon.png" ></image>
113 </view> 113 </view>
114 <!-- <image src="../../../static/detail-tabicon.png" ></image> --> 114 <!-- <image src="../../../static/detail-tabicon.png" ></image> -->
115 </picker> 115 </picker>
116 </view> 116 </view>
117 </view> 117 </view>
118 <view class="picker" > 118 <view class="picker" >
119 <view class="picker-choice"> 119 <view class="picker-choice">
120 <view class="choice-left"> 120 <view class="choice-left">
121 <text class="p11">{{pickerInfoList[2].nameC}}</text> 121 <text class="p11">{{pickerInfoList[2].nameC}}</text>
122 <text class="p12">{{pickerInfoList[2].nameE}}</text> 122 <text class="p12">{{pickerInfoList[2].nameE}}</text>
123 </view> 123 </view>
124 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text> 124 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
125 <picker @change="bindPickerChange21" :value="pickerInfoList[2].nameIndex1" :range="pickerInfoList[2].nameArray1"> 125 <picker @change="bindPickerChange21" :value="pickerInfoList[2].nameIndex1" :range="pickerInfoList[2].nameArray1">
126 <view class="p14"> 126 <view class="p14">
127 {{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}} 127 {{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}}
128 <image src="../../../static/detail-tabicon.png" ></image> 128 <image src="../../../static/detail-tabicon.png" ></image>
129 </view> 129 </view>
130 </picker> 130 </picker>
131 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text> 131 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
132 <!-- <text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text> --> 132 <!-- <text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text> -->
133 <picker @change="bindPickerChange22" :value="pickerInfoList[2].nameIndex2" :range="pickerInfoList[2].nameArray2"> 133 <picker @change="bindPickerChange22" :value="pickerInfoList[2].nameIndex2" :range="pickerInfoList[2].nameArray2">
134 <view class="p14"> 134 <view class="p14">
135 {{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}} 135 {{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}
136 <image src="../../../static/detail-tabicon.png" ></image> 136 <image src="../../../static/detail-tabicon.png" ></image>
137 </view> 137 </view>
138 <!-- <image src="../../../static/detail-tabicon.png" ></image> --> 138 <!-- <image src="../../../static/detail-tabicon.png" ></image> -->
139 </picker> 139 </picker>
140 </view> 140 </view>
141 </view> 141 </view>
142 <view class="picker"> 142 <view class="picker">
143 <view class="picker-choice"> 143 <view class="picker-choice">
144 <view class="choice-left"> 144 <view class="choice-left">
145 <text class="pd">瞳距:</text> 145 <text class="pd">瞳距:</text>
146 </view> 146 </view>
147 <input type="digit" @change="handleInputPd" class="input" 147 <input type="digit" @change="handleInputPd" class="input"
148 placeholder="请输入瞳距,单位cm" maxlength="20" :value="pd" /> 148 placeholder="请输入瞳距,单位cm" maxlength="20" :value="pd" />
149 </view> 149 </view>
150 </view> 150 </view>
151 <view class="picker" > 151 <view class="picker" >
152 <view class="picker-choice"> 152 <view class="picker-choice">
153 <view class="choice-left"> 153 <view class="choice-left">
154 <text class="p11">{{pickerInfoList[3].nameC}}</text> 154 <text class="p11">{{pickerInfoList[3].nameC}}</text>
155 </view> 155 </view>
156 <text class="p13-date">年&nbsp;&nbsp;&nbsp;(Y)</text> 156 <text class="p13-date">年&nbsp;&nbsp;&nbsp;(Y)</text>
157 <picker @change="bindPickerChange41" :value="pickerInfoList[3].nameIndex1" :range="pickerInfoList[3].nameArray1"> 157 <picker @change="bindPickerChange41" :value="pickerInfoList[3].nameIndex1" :range="pickerInfoList[3].nameArray1">
158 <view class="p14" style="width: 30px;"> 158 <view class="p14" style="width: 30px;">
159 {{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}} 159 {{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}
160 <image src="../../../static/detail-tabicon.png" ></image> 160 <image src="../../../static/detail-tabicon.png" ></image>
161 </view> 161 </view>
162 </picker> 162 </picker>
163 <text class="p13-date">月&nbsp;&nbsp;&nbsp;(M)</text> 163 <text class="p13-date">月&nbsp;&nbsp;&nbsp;(M)</text>
164 <picker @change="bindPickerChange42" :value="pickerInfoList[3].nameIndex2" :range="pickerInfoList[3].nameArray2"> 164 <picker @change="bindPickerChange42" :value="pickerInfoList[3].nameIndex2" :range="pickerInfoList[3].nameArray2">
165 <view class="p14" style="width: 30px;"> 165 <view class="p14" style="width: 30px;">
166 {{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}} 166 {{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}
167 <image src="../../../static/detail-tabicon.png" ></image> 167 <image src="../../../static/detail-tabicon.png" ></image>
168 </view> 168 </view>
169 </picker> 169 </picker>
170 <text class="p13-date">日&nbsp;&nbsp;&nbsp;(D)</text> 170 <text class="p13-date">日&nbsp;&nbsp;&nbsp;(D)</text>
171 <picker @change="bindPickerChange43" :value="pickerInfoList[3].nameIndex3" :range="pickerInfoList[3].nameArray3"> 171 <picker @change="bindPickerChange43" :value="pickerInfoList[3].nameIndex3" :range="pickerInfoList[3].nameArray3">
172 <view class="p14" style="width: 30px;"> 172 <view class="p14" style="width: 30px;">
173 {{pickerInfoList[3].nameArray3[pickerInfoList[3].nameIndex3]}} 173 {{pickerInfoList[3].nameArray3[pickerInfoList[3].nameIndex3]}}
174 <image src="../../../static/detail-tabicon.png" ></image> 174 <image src="../../../static/detail-tabicon.png" ></image>
175 </view> 175 </view>
176 </picker> 176 </picker>
177 </view> 177 </view>
178 </view> 178 </view>
179 <view class="confirm"> 179 <view class="confirm">
180 <image class="image1" :src="confirm ? tabicon[0] : tabicon[1]" @tap="changeConfirm"></image> 180 <image class="image1" :src="confirm ? tabicon[0] : tabicon[1]" @tap="changeConfirm"></image>
181 <text>确认以上输入信息来源于我的验光数据!</text> 181 <text>确认以上输入信息来源于我的验光数据!</text>
182 </view> 182 </view>
183 </view> 183 </view>
184 </template> 184 </template>
185 <template v-else> 185 <template v-else>
186 <view 186 <view
187 v-for="item in pickerInfoList" 187 v-for="item in pickerInfoList"
188 :key="item.key" 188 :key="item.key"
189 class="bodyBox" 189 class="bodyBox"
190 > 190 >
191 <template v-if="item.nameC==='验光日期'"> 191 <template v-if="item.nameC==='验光日期'">
192 <text class="names">{{item.nameC}}</text> 192 <text class="names">{{item.nameC}}</text>
193 <text style="margin-right: 5px;">{{item.nameArray1[item.nameIndex1]}}年</text> 193 <text style="margin-right: 5px;">{{item.nameArray1[item.nameIndex1]}}年</text>
194 <text style="margin-right: 5px;">{{item.nameArray2[item.nameIndex2]}}月</text> 194 <text style="margin-right: 5px;">{{item.nameArray2[item.nameIndex2]}}月</text>
195 <text>{{item.nameArray3[item.nameIndex2]}}日</text> 195 <text>{{item.nameArray3[item.nameIndex2]}}日</text>
196 </template> 196 </template>
197 <template v-else> 197 <template v-else>
198 <template v-if="item.nameC==='度数'"> 198 <template v-if="item.nameC==='度数'">
199 <text style="display: inline;">*</text> 199 <text style="display: inline;">*</text>
200 </template> 200 </template>
201 201
202 <text class="names">{{item.nameC}}</text> 202 <text class="names">{{item.nameC}}</text>
203 <text style="margin-right: 10px;">左&nbsp;{{item.nameArray1[item.nameIndex1]}}</text> 203 <text style="margin-right: 10px;">左&nbsp;{{item.nameArray1[item.nameIndex1]}}</text>
204 <text>右&nbsp;{{item.nameArray2[item.nameIndex2]}}</text> 204 <text>右&nbsp;{{item.nameArray2[item.nameIndex2]}}</text>
205 </template> 205 </template>
206 </view> 206 </view>
207 </template> 207 </template>
208 </view> 208 </view>
209 </view> 209 </view>
210 </view> 210 </view>
211 <view class="choose"> 211 <view class="choose">
212 <view 212 <view
213 class="chooseItem_1_content" 213 class="chooseItem_1_content"
214 v-for="(item,index) in attrList" 214 v-for="(item,index) in attrList"
215 :key="index" 215 :key="index"
216 > 216 >
217 <UniCollapse @change="changeShow(index)"> 217 <UniCollapse @change="changeShow(index)">
218 <UniCollapseItem 218 <UniCollapseItem
219 :open="show[index]" 219 :open="show[index]"
220 :title="item.meta_name" 220 :title="item.meta_name"
221 showAnimation=false 221 showAnimation=false
222 > 222 >
223 <view class="chooseItem_1_content"> 223 <view class="chooseItem_1_content">
224 <view class="itemsWrap"> 224 <view class="itemsWrap">
225 <view 225 <view
226 class="item2" 226 class="item2"
227 v-for="(one,i) in item.attr" 227 v-for="(one,i) in item.attr"
228 :key="i" 228 :key="i"
229 :class="{ active2: current[index] === i }" 229 :class="{ active2: current[index] === i }"
230 @click="onClickItem(index, i)" 230 @click="onClickItem(index, i)"
231 >{{one.name}}</view> 231 >{{one.name}}</view>
232 </view> 232 </view>
233 </view> 233 </view>
234 </UniCollapseItem> 234 </UniCollapseItem>
235 </UniCollapse> 235 </UniCollapse>
236 <view 236 <view
237 class="chooseRes" 237 class="chooseRes"
238 v-show="!show[index]" 238 v-show="!show[index]"
239 >* {{attrList[index].attr[current[index]].name}}</view> 239 >* {{attrList[index].attr[current[index]].name}}</view>
240 </view> 240 </view>
241 </view> 241 </view>
242 <view 242 <view
243 class="button" 243 class="button"
244 @click.native="addCart"
245 v-if="isCart"
246 >
247 加入购物车
248 </view>
249 <view
250 class="button"
244 @click="toComfirmOrder" 251 @click="toComfirmOrder"
252 v-else
245 > 253 >
246 立即结算 254 立即结算
247 </view> 255 </view>
248 </view> 256 </view>
249 </scroll-view> 257 </scroll-view>
250 </view> 258 </view>
251 </view> 259 </view>
252 </template> 260 </template>
253 <script> 261 <script>
254 import UniCollapse from '@/components/UniCollapse/UniCollapse.vue' 262 import UniCollapse from '@/components/UniCollapse/UniCollapse.vue'
255 import UniCollapseItem from '@/components/UniCollapseItem/UniCollapseItem.vue' 263 import UniCollapseItem from '@/components/UniCollapseItem/UniCollapseItem.vue'
256 import store from '@/store' 264 import store from '@/store'
257 export default { 265 export default {
258 components: { 266 components: {
259 UniCollapse, 267 UniCollapse,
260 UniCollapseItem, 268 UniCollapseItem,
261 }, 269 },
262 props: { 270 props: {
263 isShowBottom : Boolean, 271 isShowBottom : Boolean,
264 pid: Number, 272 pid: Number,
265 goodInfo:Object 273 goodInfo:Object,
274 isCart:Boolean
266 }, 275 },
267 data() { 276 data() {
268 return { 277 return {
269 loveCurrent:Number, 278 loveCurrent:Number,
270 count: 1, 279 count: 1,
271 // pid: 0, 280 // pid: 0,
272 maxCount: 20, 281 maxCount: 20,
273 dataName: '', // 验光数据人员名称 282 dataName: '', // 验光数据人员名称
274 isDataName: false, // 是否是已存在的人员数据 283 isDataName: false, // 是否是已存在的人员数据
275 dataConfirm: false, // 已确认所输入验光数据 284 dataConfirm: false, // 已确认所输入验光数据
276 opIsOpen: true, 285 opIsOpen: true,
277 addDisabled: false, 286 addDisabled: false,
278 desDisabled: false, 287 desDisabled: false,
279 current: [], 288 current: [],
280 show: [], 289 show: [],
281 checkedData: {}, 290 checkedData: {},
282 // 度数相关数据 291 // 度数相关数据
283 pickerInfoList: [ 292 pickerInfoList: [
284 { nameC: '度数', nameE: '(SPH)', nameArray1: [''], nameIndex1: 0, nameArray2: [''], nameIndex2: 0, key: 0 }, 293 { nameC: '度数', nameE: '(SPH)', nameArray1: [''], nameIndex1: 0, nameArray2: [''], nameIndex2: 0, key: 0 },
285 { nameC: '散光', nameE: '(CYL)', nameArray1: [''], nameIndex1: 0, nameArray2: [''], nameIndex2: 0, key: 1 }, 294 { nameC: '散光', nameE: '(CYL)', nameArray1: [''], nameIndex1: 0, nameArray2: [''], nameIndex2: 0, key: 1 },
286 { nameC: '散光轴位', nameE: '(AXI)', nameArray1: [''], nameIndex1: 0, nameArray2: [''], nameIndex2: 0, key: 2 }, 295 { nameC: '散光轴位', nameE: '(AXI)', nameArray1: [''], nameIndex1: 0, nameArray2: [''], nameIndex2: 0, key: 2 },
287 { nameC: '验光日期', nameE: '', nameArray1: [''], nameIndex1: 0, nameArray2: ['', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], nameIndex2: 0, nameArray3: [''], nameIndex3: 0 }, 296 { nameC: '验光日期', nameE: '', nameArray1: [''], nameIndex1: 0, nameArray2: ['', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], nameIndex2: 0, nameArray3: [''], nameIndex3: 0 },
288 ], 297 ],
289 confirm: false, // 用户是否确认 298 confirm: false, // 用户是否确认
290 tabicon: ['/static/detail-button.png', '/static/detail-button-unselected.png'], 299 tabicon: ['/static/detail-button.png', '/static/detail-button-unselected.png'],
291 name: '', 300 name: '',
292 oldname: '', // 用于判读用户是否改变名字 301 oldname: '', // 用于判读用户是否改变名字
293 pickerInfoChioce: { 302 pickerInfoChioce: {
294 leftSph: '', 303 leftSph: '',
295 rightSph: '', 304 rightSph: '',
296 leftCyl: '', 305 leftCyl: '',
297 rightCyl: '', 306 rightCyl: '',
298 leftAxi: '', 307 leftAxi: '',
299 rightAxi: '', 308 rightAxi: '',
300 time: { 309 time: {
301 year: 0, 310 year: 0,
302 month: 0, 311 month: 0,
303 day: 0, 312 day: 0,
304 }, 313 },
305 }, 314 },
306 pd: '', // 瞳距 315 pd: '', // 瞳距
307 oldpd: '', // 用于判断用户是否改变瞳距 316 oldpd: '', // 用于判断用户是否改变瞳距
308 kinds: 1, // kinds=1，提交为新增验光，2为修改 317 kinds: 1, // kinds=1，提交为新增验光，2为修改
309 mp_id: Number, 318 mp_id: Number,
310 } 319 }
311 }, 320 },
312 computed: { 321 computed: {
313 loveList() { 322 loveList() {
314 // console.log('**********loveList',this.$store.state.myLoveList.loveList) 323 // console.log('**********loveList',this.$store.state.myLoveList.loveList)
315 return this.$store.state.myLoveList.loveList || [] 324 return this.$store.state.myLoveList.loveList || []
316 }, 325 },
317 attrList() { 326 attrList() {
318 let attrList = this.$store.state.read.goodInfo.attrList 327 let attrList = this.$store.state.read.goodInfo.attrList
319 if(attrList !== undefined){ 328 if(attrList !== undefined){
320 return attrList 329 return attrList
321 }else{ 330 }else{
322 return [] 331 return []
323 } 332 }
324 }, 333 },
325 skuList() { 334 skuList() {
326 return this.$store.state.read.goodInfo.skuList 335 return this.$store.state.read.goodInfo.skuList
327 }, 336 },
328 mpList() { 337 mpList() {
329 return this.$store.state.myLoveList.loveList 338 return this.$store.state.myLoveList.loveList
330 }, 339 },
331 }, 340 },
332 created() { 341 created() {
333 const pid = this.pid 342 const pid = this.pid
334 console.log('this.goodInfo',this.goodInfo) 343 console.log('this.goodInfo',this.goodInfo)
335 const current = [] 344 const current = []
336 const show = [] 345 const show = []
337 for (let index = 0; index < this.attrList.length; index++) { 346 for (let index = 0; index < this.attrList.length; index++) {
338 current.push(0) 347 current.push(0)
339 show.push(true) 348 show.push(true)
340 } 349 }
341 this.current = current 350 this.current = current
342 this.show = show 351 this.show = show
343 352
344 //获取关心的人列表 353 //获取关心的人列表
345 store.dispatch('myLoveList/getLoveList', { 354 store.dispatch('myLoveList/getLoveList', {
346 uid: this.$store.state.user.userInfo.uid, 355 uid: this.$store.state.user.userInfo.uid,
347 }); 356 });
348 357
349 358
350 // 初始化SPL、CYL、AXI的值 359 // 初始化SPL、CYL、AXI的值
351 for (let j = 0; j < 3; j++) { 360 for (let j = 0; j < 3; j++) {
352 for (let i = -12; i < 6; i++) { 361 for (let i = -12; i < 6; i++) {
353 this.pickerInfoList[j].nameArray1.push(i) 362 this.pickerInfoList[j].nameArray1.push(i)
354 this.pickerInfoList[j].nameArray1.push(i + 0.5) 363 this.pickerInfoList[j].nameArray1.push(i + 0.5)
355 this.pickerInfoList[j].nameArray2.push(i) 364 this.pickerInfoList[j].nameArray2.push(i)
356 this.pickerInfoList[j].nameArray2.push(i + 0.5) 365 this.pickerInfoList[j].nameArray2.push(i + 0.5)
357 if (i >= -6) { 366 if (i >= -6) {
358 this.pickerInfoList[j].nameArray1.push(i + 0.25) 367 this.pickerInfoList[j].nameArray1.push(i + 0.25)
359 this.pickerInfoList[j].nameArray1.push(i + 0.75) 368 this.pickerInfoList[j].nameArray1.push(i + 0.75)
360 this.pickerInfoList[j].nameArray2.push(i + 0.25) 369 this.pickerInfoList[j].nameArray2.push(i + 0.25)
361 this.pickerInfoList[j].nameArray2.push(i + 0.75) 370 this.pickerInfoList[j].nameArray2.push(i + 0.75)
362 } 371 }
363 if (i === 5) { 372 if (i === 5) {
364 this.pickerInfoList[j].nameArray1.push(i + 1) 373 this.pickerInfoList[j].nameArray1.push(i + 1)
365 this.pickerInfoList[j].nameArray2.push(i + 1) 374 this.pickerInfoList[j].nameArray2.push(i + 1)
366 } 375 }
367 } 376 }
368 } 377 }
369 // 初始化日期值 378 // 初始化日期值
370 for (let i = 1; i < 32; i++) { 379 for (let i = 1; i < 32; i++) {
371 this.pickerInfoList[3].nameArray3.push(i) 380 this.pickerInfoList[3].nameArray3.push(i)
372 } 381 }
373 // 初始化年份前后五年 382 // 初始化年份前后五年
374 const myDate = new Date() 383 const myDate = new Date()
375 const nowYear = myDate.getFullYear() 384 const nowYear = myDate.getFullYear()
376 for (let i = 0; i < 5; i++) { 385 for (let i = 0; i < 5; i++) {
377 this.pickerInfoList[3].nameArray1.push(nowYear - i) 386 this.pickerInfoList[3].nameArray1.push(nowYear - i)
378 } 387 }
379 }, 388 },
380 name : "bottomSheet", 389 name : "bottomSheet",
381 methods: { 390 methods: {
391 addCart(){
392 const that = this
393 const checkedSKUName = [that.goodInfo.attrList[0].meta_name,that.goodInfo.attrList[1].meta_name]
394 const checkedSKU = []
395 let j;
396 for (let i = 0;i<that.current.length;i++) {
397 checkedSKU.push(that.goodInfo.attrList[i].attr[that.current[i]])
398 // console.log('i', i, j, i !== this.current.length - 1)
399 if (i !== this.current.length - 1) {
400 // 后续需修改算法：目前暂定只有两个参数选择，后续若有多个参数需要修改实现自适应
401 j = this.current[i] * this.attrList[1].attr.length
402 } else {
403 j += this.current[i]
404 }
405 }
406 let sk_id = this.skuList[j].sk_id
407 console.log('选择的商品sk_id',sk_id,'选择的商品参数',checkedSKU)
408 this.$emit("addCart",this.mp_id,this.count,checkedSKU,sk_id)//添加购物车
409 this.$emit("closeBottom")//关闭弹窗
410 },
382 onClickLoveItem(index,name){ 411 onClickLoveItem(index,name){
383 const loveList = this.loveList 412 const loveList = this.loveList
384 for (let index = 0; index < loveList.length; index++) { 413 for (let index = 0; index < loveList.length; index++) {
385 if (name === loveList[index].name && name!==this.name) { 414 if (name === loveList[index].name && name!==this.name) {
386 this.isDataName = true 415 this.isDataName = true
387 this.kinds = 2 416 this.kinds = 2
388 this.name = loveList[index].name 417 this.name = loveList[index].name
389 this.pd = loveList[index].pd 418 this.pd = loveList[index].pd
390 this.mp_id = loveList[index].mp_id 419 this.mp_id = loveList[index].mp_id
391 this.oldname = loveList[index].name 420 this.oldname = loveList[index].name
392 this.oldpd = loveList[index].pd 421 this.oldpd = loveList[index].pd
393 this.pickerInfoList[0].nameArray1.unshift(loveList[index].leftSph) 422 this.pickerInfoList[0].nameArray1.unshift(loveList[index].leftSph)
394 this.pickerInfoList[0].nameArray2.unshift(loveList[index].rightSph) 423 this.pickerInfoList[0].nameArray2.unshift(loveList[index].rightSph)
395 this.pickerInfoList[1].nameArray1.unshift(loveList[index].leftCyl) 424 this.pickerInfoList[1].nameArray1.unshift(loveList[index].leftCyl)
396 this.pickerInfoList[1].nameArray2.unshift(loveList[index].rightCyl) 425 this.pickerInfoList[1].nameArray2.unshift(loveList[index].rightCyl)
397 this.pickerInfoList[2].nameArray1.unshift(loveList[index].leftAxi) 426 this.pickerInfoList[2].nameArray1.unshift(loveList[index].leftAxi)
398 this.pickerInfoList[2].nameArray2.unshift(loveList[index].rightAxi) 427 this.pickerInfoList[2].nameArray2.unshift(loveList[index].rightAxi)
399 this.pickerInfoList[3].nameArray1.unshift(loveList[index].in_time.toString().slice(0, 4)) 428 this.pickerInfoList[3].nameArray1.unshift(loveList[index].in_time.toString().slice(0, 4))
400 if (loveList[index].in_time.toString().slice(5, 6) === 0) { 429 if (loveList[index].in_time.toString().slice(5, 6) === 0) {
401 this.pickerInfoList[3].nameArray2.unshift(loveList[index].in_time.toString().slice(6, 7)) 430 this.pickerInfoList[3].nameArray2.unshift(loveList[index].in_time.toString().slice(6, 7))
402 } else { 431 } else {
403 this.pickerInfoList[3].nameArray2.unshift(loveList[index].in_time.toString().slice(5, 7)) 432 this.pickerInfoList[3].nameArray2.unshift(loveList[index].in_time.toString().slice(5, 7))
404 } 433 }
405 if (loveList[index].in_time.toString().slice(8, 9) === 0) { 434 if (loveList[index].in_time.toString().slice(8, 9) === 0) {
406 this.pickerInfoList[3].nameArray3.unshift(loveList[index].in_time.toString().slice(9, 10)) 435 this.pickerInfoList[3].nameArray3.unshift(loveList[index].in_time.toString().slice(9, 10))
407 } else { 436 } else {
408 this.pickerInfoList[3].nameArray3.unshift(loveList[index].in_time.toString().slice(8, 10)) 437 this.pickerInfoList[3].nameArray3.unshift(loveList[index].in_time.toString().slice(8, 10))
409 } 438 }
410 } 439 }
411 } 440 }
412 this.name = name; 441 this.name = name;
413 this.loveCurrent = index; 442 this.loveCurrent = index;
414 }, 443 },
415 closeSheet(){ 444 closeSheet(){
416 this.$emit('closeBottom'); 445 this.$emit('closeBottom');
417 }, 446 },
418 stopEvent(){ //@click.stop防止事件冒泡 447 stopEvent(){ //@click.stop防止事件冒泡
419 448
420 }, 449 },
421 moveHandle(){ //不让页面滚动 450 moveHandle(){ //不让页面滚动
422 451
423 }, 452 },
424 // picker相关功能 453 // picker相关功能
425 handleInput(e) { 454 handleInput(e) {
426 this.name = e.target.value 455 this.name = e.target.value
427 this.isDataName = false 456 this.isDataName = false
428 console.log('e---->', e) 457 console.log('e---->', e)
429 const mpList = this.mpList 458 const mpList = this.mpList
430 // console.log('mpList===>', mpList) 459 // console.log('mpList===>', mpList)
431 for (let index = 0; index < mpList.length; index++) { 460 for (let index = 0; index < mpList.length; index++) {
432 if (e.detail.value === mpList[index].name) { 461 if (e.detail.value === mpList[index].name) {
433 this.isDataName = true 462 this.isDataName = true
434 uni.showModal({ 463 uni.showModal({
435 title: '提示', 464 title: '提示',
436 content: `是否填充已有的"${e.detail.value}"的数据`, 465 content: `是否填充已有的"${e.detail.value}"的数据`,
437 success: (res) => { 466 success: (res) => {
438 if (res.confirm) { 467 if (res.confirm) {
439 this.kinds = 2 468 this.kinds = 2
440 console.log('args===>', index) 469 console.log('args===>', index)
441 // const mpList=Object.assign({},this.$store.state.mympList.mpList) 470 // const mpList=Object.assign({},this.$store.state.mympList.mpList)
442 console.log('mpList===>', mpList) 471 console.log('mpList===>', mpList)
443 this.name = mpList[index].name 472 this.name = mpList[index].name
444 this.pd = mpList[index].pd 473 this.pd = mpList[index].pd
445 this.mp_id = mpList[index].mp_id 474 this.mp_id = mpList[index].mp_id
446 this.oldname = mpList[index].name 475 this.oldname = mpList[index].name
447 this.oldpd = mpList[index].pd 476 this.oldpd = mpList[index].pd
448 // 将kinds =2时的值传到该页面 477 // 将kinds =2时的值传到该页面
449 this.pickerInfoList[0].nameArray1.unshift(mpList[index].leftSph) 478 this.pickerInfoList[0].nameArray1.unshift(mpList[index].leftSph)
450 this.pickerInfoList[0].nameArray2.unshift(mpList[index].rightSph) 479 this.pickerInfoList[0].nameArray2.unshift(mpList[index].rightSph)
451 this.pickerInfoList[1].nameArray1.unshift(mpList[index].leftCyl) 480 this.pickerInfoList[1].nameArray1.unshift(mpList[index].leftCyl)
452 this.pickerInfoList[1].nameArray2.unshift(mpList[index].rightCyl) 481 this.pickerInfoList[1].nameArray2.unshift(mpList[index].rightCyl)
453 this.pickerInfoList[2].nameArray1.unshift(mpList[index].leftAxi) 482 this.pickerInfoList[2].nameArray1.unshift(mpList[index].leftAxi)
454 this.pickerInfoList[2].nameArray2.unshift(mpList[index].rightAxi) 483 this.pickerInfoList[2].nameArray2.unshift(mpList[index].rightAxi)
455 this.pickerInfoList[3].nameArray1.unshift(mpList[index].in_time.toString().slice(0, 4)) 484 this.pickerInfoList[3].nameArray1.unshift(mpList[index].in_time.toString().slice(0, 4))
456 if (mpList[index].in_time.toString().slice(5, 6) === 0) { 485 if (mpList[index].in_time.toString().slice(5, 6) === 0) {
457 this.pickerInfoList[3].nameArray2.unshift(mpList[index].in_time.toString().slice(6, 7)) 486 this.pickerInfoList[3].nameArray2.unshift(mpList[index].in_time.toString().slice(6, 7))
458 } else { 487 } else {
459 this.pickerInfoList[3].nameArray2.unshift(mpList[index].in_time.toString().slice(5, 7)) 488 this.pickerInfoList[3].nameArray2.unshift(mpList[index].in_time.toString().slice(5, 7))
460 } 489 }
461 if (mpList[index].in_time.toString().slice(8, 9) === 0) { 490 if (mpList[index].in_time.toString().slice(8, 9) === 0) {
462 this.pickerInfoList[3].nameArray3.unshift(mpList[index].in_time.toString().slice(9, 10)) 491 this.pickerInfoList[3].nameArray3.unshift(mpList[index].in_time.toString().slice(9, 10))
463 } else { 492 } else {
464 this.pickerInfoList[3].nameArray3.unshift(mpList[index].in_time.toString().slice(8, 10)) 493 this.pickerInfoList[3].nameArray3.unshift(mpList[index].in_time.toString().slice(8, 10))
465 } 494 }
466 // this.checkedData = mpList[index] 495 // this.checkedData = mpList[index]
467 // console.log('checkedData', this.checkedData) 496 // console.log('checkedData', this.checkedData)
468 } else if (res.cancel) { 497 } else if (res.cancel) {
469 this.kinds = 2 498 this.kinds = 2
470 } 499 }
471 }, 500 },
472 }) 501 })
473 } 502 }
474 } 503 }
475 }, 504 },
476 handleInputPd(e) { 505 handleInputPd(e) {
477 // 只能输入正浮点数或正数 506 // 只能输入正浮点数或正数
478 if (/^\d+(\.\d+)?$/.test(e.target.value)) { 507 if (/^\d+(\.\d+)?$/.test(e.target.value)) {
479 this.pd = e.target.value 508 this.pd = e.target.value
480 } else { 509 } else {
481 uni.showToast({ 510 uni.showToast({
482 title: '请输入有效数据;示例:89', 511 title: '请输入有效数据;示例:89',
483 icon: 'none', 512 icon: 'none',
484 duration: 2000, 513 duration: 2000,
485 }) 514 })
486 this.pd = '' 515 this.pd = ''
487 } 516 }
488 }, 517 },
489 changeConfirm() { 518 changeConfirm() {
490 this.confirm = !this.confirm 519 this.confirm = !this.confirm
491 }, 520 },
492 bindPickerChange01: function(e) { 521 bindPickerChange01: function(e) {
493 this.pickerInfoList[0].nameIndex1 = e.target.value 522 this.pickerInfoList[0].nameIndex1 = e.target.value
494 this.pickerInfoChioce.leftSph = this.pickerInfoList[0].nameArray1[e.target.value] 523 this.pickerInfoChioce.leftSph = this.pickerInfoList[0].nameArray1[e.target.value]
495 }, 524 },
496 bindPickerChange02: function(e) { 525 bindPickerChange02: function(e) {
497 this.pickerInfoList[0].nameIndex2 = e.target.value 526 this.pickerInfoList[0].nameIndex2 = e.target.value
498 this.pickerInfoChioce.rightSph = this.pickerInfoList[0].nameArray2[e.target.value] 527 this.pickerInfoChioce.rightSph = this.pickerInfoList[0].nameArray2[e.target.value]
499 }, 528 },
500 529
501 bindPickerChange11: function(e) { 530 bindPickerChange11: function(e) {
502 this.pickerInfoList[1].nameIndex1 = e.target.value 531 this.pickerInfoList[1].nameIndex1 = e.target.value
503 this.pickerInfoChioce.leftCyl = this.pickerInfoList[1].nameArray1[e.target.value] 532 this.pickerInfoChioce.leftCyl = this.pickerInfoList[1].nameArray1[e.target.value]
504 }, 533 },
505 bindPickerChange12: function(e) { 534 bindPickerChange12: function(e) {
506 this.pickerInfoList[1].nameIndex2 = e.target.value 535 this.pickerInfoList[1].nameIndex2 = e.target.value
507 this.pickerInfoChioce.rightCyl = this.pickerInfoList[1].nameArray2[e.target.value] 536 this.pickerInfoChioce.rightCyl = this.pickerInfoList[1].nameArray2[e.target.value]
508 }, 537 },
509 538
510 bindPickerChange21: function(e) { 539 bindPickerChange21: function(e) {
511 this.pickerInfoList[2].nameIndex1 = e.target.value 540 this.pickerInfoList[2].nameIndex1 = e.target.value
512 this.pickerInfoChioce.leftAxi = this.pickerInfoList[2].nameArray1[e.target.value] 541 this.pickerInfoChioce.leftAxi = this.pickerInfoList[2].nameArray1[e.target.value]
513 }, 542 },
514 bindPickerChange22: function(e) { 543 bindPickerChange22: function(e) {
515 this.pickerInfoList[2].nameIndex2 = e.target.value 544 this.pickerInfoList[2].nameIndex2 = e.target.value
516 this.pickerInfoChioce.rightAxi = this.pickerInfoList[2].nameArray2[e.target.value] 545 this.pickerInfoChioce.rightAxi = this.pickerInfoList[2].nameArray2[e.target.value]
517 }, 546 },
518 547
519 bindPickerChange41: function(e) { 548 bindPickerChange41: function(e) {
520 this.pickerInfoList[3].nameIndex1 = e.target.value 549 this.pickerInfoList[3].nameIndex1 = e.target.value
521 this.pickerInfoChioce.time.year = this.pickerInfoList[3].nameArray1[e.target.value] 550 this.pickerInfoChioce.time.year = this.pickerInfoList[3].nameArray1[e.target.value]
522 }, 551 },
523 bindPickerChange42: function(e) { 552 bindPickerChange42: function(e) {
524 this.pickerInfoList[3].nameIndex2 = e.target.value 553 this.pickerInfoList[3].nameIndex2 = e.target.value
525 this.pickerInfoChioce.time.month = this.pickerInfoList[3].nameArray2[e.target.value] 554 this.pickerInfoChioce.time.month = this.pickerInfoList[3].nameArray2[e.target.value]
526 }, 555 },
527 bindPickerChange43: function(e) { 556 bindPickerChange43: function(e) {
528 this.pickerInfoList[3].nameIndex3 = e.target.value 557 this.pickerInfoList[3].nameIndex3 = e.target.value
529 this.pickerInfoChioce.time.day = this.pickerInfoList[3].nameArray3[e.target.value] 558 this.pickerInfoChioce.time.day = this.pickerInfoList[3].nameArray3[e.target.value]
530 }, 559 },
531 changeShow(num) { 560 changeShow(num) {
532 this.show[num] = !this.show[num] 561 this.show[num] = !this.show[num]
533 this.$forceUpdate() 562 this.$forceUpdate()
534 }, 563 },
535 onClickItem(index, i) { 564 onClickItem(index, i) {
536 if (this.current[index] !== i) { 565 if (this.current[index] !== i) {
537 this.current[index] = i 566 this.current[index] = i
538 } 567 }
539 this.$forceUpdate() 568 this.$forceUpdate()
540 }, 569 },
541 counter(isadd) { 570 counter(isadd) {
542 if (isadd) { 571 if (isadd) {
543 this.count >= this.maxCount ? this.addDisabled = true : this.count++ 572 this.count >= this.maxCount ? this.addDisabled = true : this.count++
544 } else { 573 } else {
545 this.count <= 1 ? this.desDisabled = true : this.count-- 574 this.count <= 1 ? this.desDisabled = true : this.count--
546 } 575 }
547 }, 576 },
548 toComfirmOrder() { 577 toComfirmOrder() {
549 // 先处理验光部分的逻辑，如果ok在跳转 578 // 先处理验光部分的逻辑，如果ok在跳转
550 let flag = 0 579 let flag = 0
551 if (this.name === '') { 580 if (this.name === '') {
552 uni.showToast({ 581 uni.showToast({
553 title: '请输入验光单取名', 582 title: '请输入验光单取名',
554 icon: 'none', 583 icon: 'none',
555 duration: 2000, 584 duration: 2000,
556 }) 585 })
557 } else { 586 } else {
558 if (this.pd === '') { 587 if (this.pd === '') {
559 uni.showToast({ 588 uni.showToast({
560 title: '请输入瞳距', 589 title: '请输入瞳距',
561 icon: 'none', 590 icon: 'none',
562 duration: 2000, 591 duration: 2000,
563 }) 592 })
564 } else { 593 } else {
565 if (this.kinds === 1) { 594 if (this.kinds === 1) {
566 // 添加用户验光单 595 // 添加用户验光单
567 console.log('kinds====>', this.pickerInfoChioce.leftSph) 596 console.log('kinds====>', this.pickerInfoChioce.leftSph)
568 console.log('kinds====>', this.pickerInfoChioce.leftSph === Number) 597 console.log('kinds====>', this.pickerInfoChioce.leftSph === Number)
569 console.log('kinds====>', this.pickerInfoChioce.rightSph === Number) 598 console.log('kinds====>', this.pickerInfoChioce.rightSph === Number)
570 if (this.pickerInfoChioce.rightSph === '' || this.pickerInfoChioce.leftSph === '' || 599 if (this.pickerInfoChioce.rightSph === '' || this.pickerInfoChioce.leftSph === '' ||
571 this.pickerInfoChioce.leftCyl === '' || this.pickerInfoChioce.rightCyl === '' || 600 this.pickerInfoChioce.leftCyl === '' || this.pickerInfoChioce.rightCyl === '' ||
572 this.pickerInfoChioce.leftAxi === '' || this.pickerInfoChioce.rightAxi === '' 601 this.pickerInfoChioce.leftAxi === '' || this.pickerInfoChioce.rightAxi === ''
573 ) { 602 ) {
574 uni.showToast({ 603 uni.showToast({
575 title: '请输入您的验光数据', 604 title: '请输入您的验光数据',
576 icon: 'none', 605 icon: 'none',
577 duration: 2000, 606 duration: 2000,
578 }) 607 })
579 } else { 608 } else {
580 if (this.confirm) { 609 if (this.confirm) {
581 store.dispatch('myLoveList/addMylove', { 610 store.dispatch('myLoveList/addMylove', {
582 uid: this.$store.state.user.userInfo.uid, 611 uid: this.$store.state.user.userInfo.uid,
583 openid: this.$store.state.user.userInfo.openid, 612 openid: this.$store.state.user.userInfo.openid,
584 // mp_name: this.$store.state.user.userInfo.mp_name, 613 // mp_name: this.$store.state.user.userInfo.mp_name,
585 leftSph: this.pickerInfoChioce.leftSph, 614 leftSph: this.pickerInfoChioce.leftSph,
586 rightSph: this.pickerInfoChioce.rightSph, 615 rightSph: this.pickerInfoChioce.rightSph,
587 leftCyl: this.pickerInfoChioce.leftCyl, 616 leftCyl: this.pickerInfoChioce.leftCyl,
588 rightCyl: this.pickerInfoChioce.rightCyl, 617 rightCyl: this.pickerInfoChioce.rightCyl,
589 leftAxi: this.pickerInfoChioce.leftAxi, 618 leftAxi: this.pickerInfoChioce.leftAxi,
590 rightAxi: this.pickerInfoChioce.rightAxi, 619 rightAxi: this.pickerInfoChioce.rightAxi,
591 pd: this.pd, // 瞳距 620 pd: this.pd, // 瞳距
592 mp_name: this.name, 621 mp_name: this.name,
593 // time: this.pickerInfoChioce.time, 622 // time: this.pickerInfoChioce.time,
594 // img_url2: "http://localhost:8087/images/shop_1/1/", 623 // img_url2: "http://localhost:8087/images/shop_1/1/",
595 }).then(({ mp_id: mpId }) => { 624 }).then(({ mp_id: mpId }) => {
596 this.mp_id = mpId 625 this.mp_id = mpId
597 }) 626 })
598 flag = 1 627 flag = 1
599 } else { 628 } else {
600 uni.showToast({ 629 uni.showToast({
601 title: '请确认您的验光数据', 630 title: '请确认您的验光数据',
602 icon: 'none', 631 icon: 'none',
603 duration: 3000, 632 duration: 3000,
604 }) 633 })
605 } 634 }
606 } 635 }
607 } 636 }
608 if (this.kinds === 2) { 637 if (this.kinds === 2) {
609 if (this.confirm) { 638 if (this.confirm) {
610 const leftList = ['leftSph', 'leftCyl', 'leftAxi'] 639 const leftList = ['leftSph', 'leftCyl', 'leftAxi']
611 const rightList = ['rightSph', 'rightCyl', 'rightAxi'] 640 const rightList = ['rightSph', 'rightCyl', 'rightAxi']
612 // let flag=0; 641 // let flag=0;
613 if (this.name !== this.oldname) { 642 if (this.name !== this.oldname) {
614 store.dispatch('myLoveList/updateMylove', { 643 store.dispatch('myLoveList/updateMylove', {
615 uid: this.$store.state.user.userInfo.uid, 644 uid: this.$store.state.user.userInfo.uid,
616 openid: this.$store.state.user.userInfo.openid, 645 openid: this.$store.state.user.userInfo.openid,
617 mp_id: this.mp_id, 646 mp_id: this.mp_id,
618 keyname: 'name', 647 keyname: 'name',
619 keyvalue: this.name, 648 keyvalue: this.name,
620 }) 649 })
621 flag = 1 650 flag = 1
622 } 651 }
623 if (this.pd !== this.oldpd) { 652 if (this.pd !== this.oldpd) {
624 store.dispatch('myLoveList/updateMylove', { 653 store.dispatch('myLoveList/updateMylove', {
625 uid: this.$store.state.user.userInfo.uid, 654 uid: this.$store.state.user.userInfo.uid,
626 openid: this.$store.state.user.userInfo.openid, 655 openid: this.$store.state.user.userInfo.openid,
627 mp_id: this.mp_id, 656 mp_id: this.mp_id,
628 keyname: 'pd', 657 keyname: 'pd',
629 keyvalue: this.pd, 658 keyvalue: this.pd,
630 }) 659 })
631 flag = 1 660 flag = 1
632 } 661 }
633 // 先验证是否输入有无空 662 // 先验证是否输入有无空
634 let q = true 663 let q = true
635 for (let k = 0; k < 3; k++) { 664 for (let k = 0; k < 3; k++) {
636 q = q && (this.pickerInfoList[k].nameArray1[this.pickerInfoList[k].nameIndex1] !== '' && 665 q = q && (this.pickerInfoList[k].nameArray1[this.pickerInfoList[k].nameIndex1] !== '' &&
637 this.pickerInfoList[k].nameArray2[this.pickerInfoList[k].nameIndex2] !== '') 666 this.pickerInfoList[k].nameArray2[this.pickerInfoList[k].nameIndex2] !== '')
638 } 667 }
639 if (q) { 668 if (q) {
640 for (let j = 0; j < 3; j++) { 669 for (let j = 0; j < 3; j++) {
641 if (this.pickerInfoList[j].nameIndex1 !== 0) { 670 if (this.pickerInfoList[j].nameIndex1 !== 0) {
642 store.dispatch('myLoveList/updateMylove', { 671 store.dispatch('myLoveList/updateMylove', {
643 uid: this.$store.state.user.userInfo.uid, 672 uid: this.$store.state.user.userInfo.uid,
644 openid: this.$store.state.user.userInfo.openid, 673 openid: this.$store.state.user.userInfo.openid,
645 mp_id: this.mp_id, 674 mp_id: this.mp_id,
646 keyname: leftList[j], 675 keyname: leftList[j],
647 keyvalue: this.pickerInfoList[j].nameArray1[this.pickerInfoList[j].nameIndex1], 676 keyvalue: this.pickerInfoList[j].nameArray1[this.pickerInfoList[j].nameIndex1],
648 }) 677 })
649 } 678 }
650 if (this.pickerInfoList[j].nameIndex2 !== 0) { 679 if (this.pickerInfoList[j].nameIndex2 !== 0) {
651 store.dispatch('myLoveList/updateMylove', { 680 store.dispatch('myLoveList/updateMylove', {
652 uid: this.$store.state.user.userInfo.uid, 681 uid: this.$store.state.user.userInfo.uid,
653 openid: this.$store.state.user.userInfo.openid, 682 openid: this.$store.state.user.userInfo.openid,
654 mp_id: this.mp_id, 683 mp_id: this.mp_id,
655 keyname: rightList[j], 684 keyname: rightList[j],
656 keyvalue: this.pickerInfoList[j].nameArray2[this.pickerInfoList[j].nameIndex2], 685 keyvalue: this.pickerInfoList[j].nameArray2[this.pickerInfoList[j].nameIndex2],
657 }) 686 })
658 } 687 }
659 flag = 1 688 flag = 1
660 } 689 }
661 } else { 690 } else {
662 flag = 0 691 flag = 0
663 uni.showToast({ 692 uni.showToast({
664 title: '请输入您的验光数据', 693 title: '请输入您的验光数据',
665 icon: 'none', 694 icon: 'none',
666 duration: 2000, 695 duration: 2000,
667 }) 696 })
668 } 697 }
669 if (flag !== 0) { 698 if (flag !== 0) {
670 store.dispatch('myLoveList/getLoveList', { 699 store.dispatch('myLoveList/getLoveList', {
671 uid: this.$store.state.user.userInfo.uid, 700 uid: this.$store.state.user.userInfo.uid,
672 }) 701 })
673 } 702 }
674 } else { 703 } else {
675 uni.showToast({ 704 uni.showToast({
676 title: '请确认您的验光数据', 705 title: '请确认您的验光数据',
677 icon: 'none', 706 icon: 'none',
678 duration: 3000, 707 duration: 3000,
679 }) 708 })
680 } 709 }
681 } 710 }
682 } 711 }
683 } 712 }
684 if (flag !== 0) { 713 if (flag !== 0) {
685 // 如果数据验证无误，那么更新验光单的数据 714 // 如果数据验证无误，那么更新验光单的数据
686 store.dispatch('myLoveList/getLoveList', { 715 store.dispatch('myLoveList/getLoveList', {
687 uid: this.$store.state.user.userInfo.uid, 716 uid: this.$store.state.user.userInfo.uid,
688 }) 717 })
689 let i = 0 718 let i = 0
690 // 判断出是哪一个sku被选中 719 // 判断出是哪一个sku被选中
691 for (let index = 0; index < this.current.length; index++) { 720 for (let index = 0; index < this.current.length; index++) {
692 console.log('index', index, i, index !== this.current.length - 1) 721 console.log('index', index, i, index !== this.current.length - 1)
693 if (index !== this.current.length - 1) { 722 if (index !== this.current.length - 1) {
694 // 后续需修改算法：目前暂定只有两个参数选择，后续若有多个参数需要修改实现自适应 723 // 后续需修改算法：目前暂定只有两个参数选择，后续若有多个参数需要修改实现自适应
695 i = this.current[index] * this.attrList[1].attr.length 724 i = this.current[index] * this.attrList[1].attr.length
696 } else { 725 } else {
697 i += this.current[index] 726 i += this.current[index]
698 } 727 }
699 } 728 }
700 // 判断是否其输入的人员数据是否已存在 729 // 判断是否其输入的人员数据是否已存在
701 store.dispatch('order/saveParams', { 730 store.dispatch('order/saveParams', {
702 sk_id_arr: this.skuList[i], 731 sk_id_arr: this.skuList[i],
703 current: this.current, 732 current: this.current,
704 mp_id: this.mp_id, 733 mp_id: this.mp_id,
705 attrList: this.attrList, 734 attrList: this.attrList,
706 }) 735 })
707 // 跳转到确认订单页面 736 // 跳转到确认订单页面
708 uni.navigateTo({ 737 uni.navigateTo({
709 url: `../confirmOrder/confirmOrder?pid=${this.pid}&count=${this.count}&name=${this.name}`, 738 url: `../confirmOrder/confirmOrder?pid=${this.pid}&count=${this.count}&name=${this.name}`,
710 }) 739 })
711 } 740 }
712 }, 741 },
713 } 742 }
714 } 743 }
715 </script> 744 </script>
716 745
717 <style lang="scss"> 746 <style lang="scss">
718 .content { 747 .content {
719 min-height: 100vh; 748 min-height: 100vh;
720 background-color: #f2f2f2; 749 background-color: #f2f2f2;
721 // padding-top: 20rpx; 750 // padding-top: 20rpx;
722 .goodInfo { 751 .goodInfo {
723 width: 100%; 752 width: 100%;
724 height: 272rpx; 753 height: 272rpx;
725 border-radius: 16rpx; 754 border-radius: 16rpx;
726 background-color: #ffffff; 755 background-color: #ffffff;
727 box-sizing: border-box; 756 box-sizing: border-box;
728 padding: 36rpx; 757 padding: 36rpx;
729 display: flex; 758 display: flex;
730 flex-direction: row; 759 flex-direction: row;
731 justify-content: flex-start; 760 justify-content: flex-start;
732 .imageWrap { 761 .imageWrap {
733 height: 188rpx; 762 height: 188rpx;
734 width: 188rpx; 763 width: 188rpx;
735 margin-right: 28rpx; 764 margin-right: 28rpx;
736 image { 765 image {
737 height: 188rpx; 766 height: 188rpx;
738 width: 188rpx; 767 width: 188rpx;
739 } 768 }
740 } 769 }
741 .infoRight { 770 .infoRight {
742 display: flex; 771 display: flex;
743 flex-direction: column; 772 flex-direction: column;
744 align-items: flex-start; 773 align-items: flex-start;
745 justify-content: space-between; 774 justify-content: space-between;
746 .goodName { 775 .goodName {
747 font-size: 28rpx; 776 font-size: 28rpx;
748 color: #333333; 777 color: #333333;
749 } 778 }
750 .remarks { 779 .remarks {
751 font-size: 20rpx; 780 font-size: 20rpx;
752 color: #999999; 781 color: #999999;
753 } 782 }
754 .priceBox { 783 .priceBox {
755 display: flex; 784 display: flex;
756 justify-content: space-between; 785 justify-content: space-between;
757 align-items: center; 786 align-items: center;
758 width: 100%; 787 width: 100%;
759 font-size: 14px; 788 font-size: 14px;
760 color: #999999; 789 color: #999999;
761 .price { 790 .price {
762 color: #ff6b4a; 791 color: #ff6b4a;
763 font-size: 28rpx; 792 font-size: 28rpx;
764 } 793 }
765 .counter { 794 .counter {
766 display: flex; 795 display: flex;
767 flex-direction: row; 796 flex-direction: row;
768 justify-content: space-between; 797 justify-content: space-between;
769 align-items: center; 798 align-items: center;
770 font-size: 28rpx; 799 font-size: 28rpx;
771 color: #333333; 800 color: #333333;
772 width: 122rpx; 801 width: 122rpx;
773 .btn { 802 .btn {
774 display: flex; 803 display: flex;
775 justify-content: center; 804 justify-content: center;
776 line-height: 32rpx; 805 line-height: 32rpx;
777 height: 32rpx; 806 height: 32rpx;
778 width: 32rpx; 807 width: 32rpx;
779 background-color: #f2f2f2; 808 background-color: #f2f2f2;
780 color: #cfcfcf; 809 color: #cfcfcf;
781 } 810 }
782 } 811 }
783 } 812 }
784 } 813 }
785 } 814 }
786 .peopleChoose{ 815 .peopleChoose{
787 width: 100%; 816 width: 100%;
788 min-height: 200rpx; 817 min-height: 200rpx;
789 border-radius: 16rpx; 818 border-radius: 16rpx;
790 background-color: #ffffff; 819 background-color: #ffffff;
791 box-sizing: border-box; 820 box-sizing: border-box;
792 padding: 36rpx; 821 padding: 36rpx;
793 margin: 10px 0; 822 margin: 10px 0;
794 display: flex; 823 display: flex;
795 flex-direction: column; 824 flex-direction: column;
796 justify-content: flex-start; 825 justify-content: flex-start;
797 align-items: center; 826 align-items: center;
798 .title{ 827 .title{
799 font-size: 16px; 828 font-size: 16px;
800 color: #333333; 829 color: #333333;
801 letter-spacing: -0.3px; 830 letter-spacing: -0.3px;
802 text-align: justify; 831 text-align: justify;
803 line-height: 24px; 832 line-height: 24px;
804 margin: 4px 0; 833 margin: 4px 0;
805 } 834 }
806 .loveList{ 835 .loveList{
807 display: flex; 836 display: flex;
808 flex-direction: row; 837 flex-direction: row;
809 flex-wrap: wrap; 838 flex-wrap: wrap;
810 justify-content: flex-start; 839 justify-content: flex-start;
811 align-items: center; 840 align-items: center;
812 padding-top: 24rpx; 841 padding-top: 24rpx;
813 width: 100%; 842 width: 100%;
814 .peopleName { 843 .peopleName {
815 padding: 0 30rpx; 844 padding: 0 30rpx;
816 height: 60rpx; 845 height: 60rpx;
817 margin: 0 20rpx 20rpx 0; 846 margin: 0 20rpx 20rpx 0;
818 transition: all 0.3s; 847 transition: all 0.3s;
819 background: #f2f2f2; 848 background: #f2f2f2;
820 border-radius: 2px; 849 border-radius: 2px;
821 border-radius: 2px; 850 border-radius: 2px;
822 line-height: 60rpx; 851 line-height: 60rpx;
823 text-align: center; 852 text-align: center;
824 color: #666666; 853 color: #666666;
825 font-size: 12px; 854 font-size: 12px;
826 } 855 }
827 .active2 { 856 .active2 {
828 background: rgba(255, 107, 74, 0.15); 857 background: rgba(255, 107, 74, 0.15);
829 color: #ff6b4a; 858 color: #ff6b4a;
830 } 859 }
831 } 860 }
832 } 861 }
833 .goods-data { 862 .goods-data {
834 width: 100%; 863 width: 100%;
835 box-sizing: border-box; 864 box-sizing: border-box;
836 padding: 37rpx 40rpx 0 40rpx; 865 padding: 37rpx 40rpx 0 40rpx;
837 background: #ffffff; 866 background: #ffffff;
838 border-radius: 12rpx; 867 border-radius: 12rpx;
839 .opCollapse { 868 .opCollapse {
840 width: 100%; 869 width: 100%;
841 padding-bottom: 28rpx; 870 padding-bottom: 28rpx;
842 margin-top: 7px; 871 margin-top: 7px;
843 border-bottom: 1px solid #e9e9e9; 872 border-bottom: 1px solid #e9e9e9;
844 .head { 873 .head {
845 display: flex; 874 display: flex;
846 justify-content: space-between; 875 justify-content: space-between;
847 height: 24px; 876 height: 24px;
848 // font-family: PingFangSC-Medium; 877 // font-family: PingFangSC-Medium;
849 font-size: 16px; 878 font-size: 16px;
850 color: #333333; 879 color: #333333;
851 letter-spacing: -0.3px; 880 letter-spacing: -0.3px;
852 text-align: justify; 881 text-align: justify;
853 line-height: 24px; 882 line-height: 24px;
854 margin-bottom: 18rpx; 883 margin-bottom: 18rpx;
855 .headRighted { 884 .headRighted {
856 width: 0; 885 width: 0;
857 height: 0; 886 height: 0;
858 border-left: 4px solid transparent; 887 border-left: 4px solid transparent;
859 border-right: 4px solid transparent; 888 border-right: 4px solid transparent;
860 border-bottom: 4px solid #cfcfcf; 889 border-bottom: 4px solid #cfcfcf;
861 transform: scaleY(-1); 890 transform: scaleY(-1);
862 margin-top: 10px; 891 margin-top: 10px;
863 } 892 }
864 .headMid { 893 .headMid {
865 font-size: 10px; 894 font-size: 10px;
866 color: #999999; 895 color: #999999;
867 letter-spacing: -0.19px; 896 letter-spacing: -0.19px;
868 margin-left: -120rpx; 897 margin-left: -120rpx;
869 } 898 }
870 .headRight { 899 .headRight {
871 width: 0; 900 width: 0;
872 height: 0; 901 height: 0;
873 border-left: 4px solid transparent; 902 border-left: 4px solid transparent;
874 border-right: 4px solid transparent; 903 border-right: 4px solid transparent;
875 border-bottom: 4px solid #cfcfcf; 904 border-bottom: 4px solid #cfcfcf;
876 margin-top: 10px; 905 margin-top: 10px;
877 } 906 }
878 } 907 }
879 .body { 908 .body {
880 font-size: 12px; 909 font-size: 12px;
881 color: #666666; 910 color: #666666;
882 letter-spacing: 0; 911 letter-spacing: 0;
883 .bodyBox { 912 .bodyBox {
884 margin-top: 15px; 913 margin-top: 15px;
885 .names { 914 .names {
886 font-size: 12px; 915 font-size: 12px;
887 color: #151515; 916 color: #151515;
888 letter-spacing: 0; 917 letter-spacing: 0;
889 text-align: justify; 918 text-align: justify;
890 line-height: 17px; 919 line-height: 17px;
891 margin-left: 5px; 920 margin-left: 5px;
892 margin-right: 10px; 921 margin-right: 10px;
893 } 922 }
894 text { 923 text {
895 font-size: 12px; 924 font-size: 12px;
896 color: #666666; 925 color: #666666;
897 letter-spacing: 0; 926 letter-spacing: 0;
898 text-align: justify; 927 text-align: justify;
899 } 928 }
900 } 929 }
901 } 930 }
902 .goods-form { 931 .goods-form {
903 display: flex; 932 display: flex;
904 flex-direction: column; 933 flex-direction: column;
905 align-items: center; 934 align-items: center;
906 justify-content: center; 935 justify-content: center;
907 background-color: #fff; 936 background-color: #fff;
908 width: 100%; 937 width: 100%;
909 padding: 40rpx 0; 938 padding: 40rpx 0;
910 .p1 { 939 .p1 {
911 font-size: 16px; 940 font-size: 16px;
912 color: #333333; 941 color: #333333;
913 letter-spacing: -0.3px; 942 letter-spacing: -0.3px;
914 text-align: justify; 943 text-align: justify;
915 line-height: 24px; 944 line-height: 24px;
916 margin: 4px 0; 945 margin: 4px 0;
917 946
918 } 947 }
919 .p2 { 948 .p2 {
920 font-size: 12px; 949 font-size: 12px;
921 color: #999999; 950 color: #999999;
922 letter-spacing: -0.23px; 951 letter-spacing: -0.23px;
923 margin-bottom: 32rpx; 952 margin-bottom: 32rpx;
924 } 953 }
925 .image2{ 954 .image2{
926 width: 42rpx; 955 width: 42rpx;
927 height: 34rpx; 956 height: 34rpx;
928 margin-right: 12rpx; 957 margin-right: 12rpx;
929 } 958 }
930 .confirm { 959 .confirm {
931 display: flex; 960 display: flex;
932 align-items: center; 961 align-items: center;
933 font-size: 12px; 962 font-size: 12px;
934 color: #666666; 963 color: #666666;
935 letter-spacing: -0.23px; 964 letter-spacing: -0.23px;
936 width: 684rpx; 965 width: 684rpx;
937 .image1{ 966 .image1{
938 margin-right:25rpx; 967 margin-right:25rpx;
939 width: 42rpx; 968 width: 42rpx;
940 height: 38rpx; 969 height: 38rpx;
941 } 970 }
942 } 971 }
943 .picker{ 972 .picker{
944 display: flex; 973 display: flex;
945 flex-direction: column; 974 flex-direction: column;
946 justify-content: center; 975 justify-content: center;
947 align-items: center; 976 align-items: center;
948 width: 100%; 977 width: 100%;
949 978
950 .picker-choice{ 979 .picker-choice{
951 display: flex; 980 display: flex;
952 width: 684rpx; 981 width: 684rpx;
953 align-items: center; 982 align-items: center;
954 margin-bottom: 40rpx; 983 margin-bottom: 40rpx;
955 .input{ 984 .input{
956 border-bottom: 1px solid #CFCFCF; 985 border-bottom: 1px solid #CFCFCF;
957 height: 40rpx; 986 height: 40rpx;
958 } 987 }
959 .choice-left{ 988 .choice-left{
960 width: 210rpx; 989 width: 210rpx;
961 .pd{ 990 .pd{
962 font-size: 14px; 991 font-size: 14px;
963 color: #333333; 992 color: #333333;
964 letter-spacing: -0.26px; 993 letter-spacing: -0.26px;
965 text-align: justify; 994 text-align: justify;
966 line-height: 24px; 995 line-height: 24px;
967 margin-right: 44rpx; 996 margin-right: 44rpx;
968 } 997 }
969 .p11 { 998 .p11 {
970 font-size: 14px; 999 font-size: 14px;
971 color: #333333; 1000 color: #333333;
972 letter-spacing: -0.26px; 1001 letter-spacing: -0.26px;
973 text-align: justify; 1002 text-align: justify;
974 line-height: 24px; 1003 line-height: 24px;
975 // margin-right: 10px; 1004 // margin-right: 10px;
976 } 1005 }
977 .p12 { 1006 .p12 {
978 font-size: 10px; 1007 font-size: 10px;
979 color: #3F3F3F; 1008 color: #3F3F3F;
980 letter-spacing: -0.19px; 1009 letter-spacing: -0.19px;
981 text-align: justify; 1010 text-align: justify;
982 line-height: 24px; 1011 line-height: 24px;
983 } 1012 }
984 1013
985 } 1014 }
986 .p13 { 1015 .p13 {
987 font-size: 10px; 1016 font-size: 10px;
988 color: #999999; 1017 color: #999999;
989 letter-spacing: -0.19px; 1018 letter-spacing: -0.19px;
990 margin-right: 10px; 1019 margin-right: 10px;
991 } 1020 }
992 .p13-date { 1021 .p13-date {
993 font-size: 10px; 1022 font-size: 10px;
994 color: #999999; 1023 color: #999999;
995 letter-spacing: -0.19px; 1024 letter-spacing: -0.19px;
996 margin-right: 5px; 1025 margin-right: 5px;
997 } 1026 }
998 picker{ 1027 picker{
999 width: 144rpx; 1028 width: 144rpx;
1000 height: 40rpx; 1029 height: 40rpx;
1001 display: flex; 1030 display: flex;
1002 position: relative; 1031 position: relative;
1003 .p14 { 1032 .p14 {
1004 font-size: 14px; 1033 font-size: 14px;
1005 color: #666666; 1034 color: #666666;
1006 letter-spacing: -0.26px; 1035 letter-spacing: -0.26px;
1007 text-align: center; 1036 text-align: center;
1008 width: 124rpx; 1037 width: 124rpx;
1009 border-bottom: 1px solid #CFCFCF; 1038 border-bottom: 1px solid #CFCFCF;
1010 height: 38rpx; 1039 height: 38rpx;
1011 } 1040 }
1012 image{ 1041 image{
1013 width: 20rpx; 1042 width: 20rpx;
1014 height: 20rpx; 1043 height: 20rpx;
1015 position: absolute; 1044 position: absolute;
1016 right: 20rpx; 1045 right: 20rpx;
1017 top: 8rpx; 1046 top: 8rpx;
1018 } 1047 }
1019 } 1048 }
1020 1049
1021 } 1050 }
1022 } 1051 }
1023 } 1052 }
1024 } 1053 }
1025 } 1054 }
1026 .choose { 1055 .choose {
1027 width: 100%; 1056 width: 100%;
1028 background: #ffffff; 1057 background: #ffffff;
1029 border-radius: 12rpx; 1058 border-radius: 12rpx;
1030 margin-top: 20rpx; 1059 margin-top: 20rpx;
1031 padding: 40rpx 40rpx 112rpx 40rpx; 1060 padding: 40rpx 40rpx 112rpx 40rpx;
1032 box-sizing: border-box; 1061 box-sizing: border-box;
1033 .chooseItem { 1062 .chooseItem {
1034 width: 100%; 1063 width: 100%;
1035 padding-bottom: 32rpx; 1064 padding-bottom: 32rpx;
1036 border-bottom: 1px solid #e9e9e9; 1065 border-bottom: 1px solid #e9e9e9;
1037 margin-bottom: 28rpx; 1066 margin-bottom: 28rpx;
1038 } 1067 }
1039 .chooseRes { 1068 .chooseRes {
1040 font-size: 12px; 1069 font-size: 12px;
1041 color: #666666; 1070 color: #666666;
1042 } 1071 }
1043 .itemsWrap { 1072 .itemsWrap {
1044 display: flex; 1073 display: flex;
1045 flex-direction: row; 1074 flex-direction: row;
1046 flex-wrap: wrap; 1075 flex-wrap: wrap;
1047 justify-content: flex-start; 1076 justify-content: flex-start;
1048 align-items: center; 1077 align-items: center;
1049 padding-top: 24rpx; 1078 padding-top: 24rpx;
1050 .item1 { 1079 .item1 {
1051 width: 64rpx; 1080 width: 64rpx;
1052 height: 64rpx; 1081 height: 64rpx;
1053 border-radius: 32rpx; 1082 border-radius: 32rpx;
1054 margin: 0 36rpx 24rpx 0; 1083 margin: 0 36rpx 24rpx 0;
1055 transition: all 0.3s; 1084 transition: all 0.3s;
1056 border: 1px solid #ffffff; 1085 border: 1px solid #ffffff;
1057 } 1086 }
1058 .item2 { 1087 .item2 {
1059 // width: 100rpx; 1088 // width: 100rpx;
1060 padding: 0 30rpx; 1089 padding: 0 30rpx;
1061 height: 60rpx; 1090 height: 60rpx;
1062 margin: 0 20rpx 20rpx 0; 1091 margin: 0 20rpx 20rpx 0;
1063 transition: all 0.3s; 1092 transition: all 0.3s;
1064 background: #f2f2f2; 1093 background: #f2f2f2;
1065 border-radius: 2px; 1094 border-radius: 2px;
1066 border-radius: 2px; 1095 border-radius: 2px;
1067 line-height: 60rpx; 1096 line-height: 60rpx;
1068 text-align: center; 1097 text-align: center;
1069 color: #666666; 1098 color: #666666;
1070 font-size: 12px; 1099 font-size: 12px;
1071 } 1100 }
1072 .active1 { 1101 .active1 {
1073 opacity: 0.7; 1102 opacity: 0.7;
1074 border: 1px solid #ff6b4a; 1103 border: 1px solid #ff6b4a;
1075 } 1104 }
1076 .active2 { 1105 .active2 {
1077 background: rgba(255, 107, 74, 0.15); 1106 background: rgba(255, 107, 74, 0.15);
1078 color: #ff6b4a; 1107 color: #ff6b4a;
1079 } 1108 }
1080 } 1109 }
1081 } 1110 }
1082 .button { 1111 .button {
1083 width: 100%; 1112 width: 100%;
1084 height: 112rpx; 1113 height: 112rpx;
1085 background-color: #ff6b4a; 1114 background-color: #ff6b4a;
1086 font-size: 16px; 1115 font-size: 16px;
1087 color: #ffffff; 1116 color: #ffffff;
1088 line-height: 112rpx; 1117 line-height: 112rpx;
1089 text-align: center; 1118 text-align: center;
1090 // position: absolute; 1119 // position: absolute;
1091 bottom: 0; 1120 bottom: 0;
1092 left: 0; 1121 left: 0;
1093 } 1122 }
1094 } 1123 }
1095 /* sheet弹窗 */ 1124 /* sheet弹窗 */
1096 .sheet{ 1125 .sheet{
1097 width: 100%; 1126 width: 100%;
1098 height: 100%; 1127 height: 100%;
1099 position: fixed; 1128 position: fixed;
1100 top: 150%; 1129 top: 150%;
1101 left: 0upx; 1130 left: 0upx;
1102 bottom: 0upx; 1131 bottom: 0upx;
1103 right: 0upx; 1132 right: 0upx;
1104 background:rgba(0,0,0,0.3); 1133 background:rgba(0,0,0,0.3);
1105 z-index: 10000; 1134 z-index: 10000;
1106 } 1135 }
1107 1136
1108 /* 显示时候的动画默认0.5s */ 1137 /* 显示时候的动画默认0.5s */
1109 .sheetView{ 1138 .sheetView{
1110 width: 100%; 1139 width: 100%;
1111 height: 0upx; 1140 height: 0upx;
1112 position: absolute; 1141 position: absolute;
1113 bottom: 0upx; 1142 bottom: 0upx;
1114 background: white; 1143 background: white;
1115 z-index: 10001; 1144 z-index: 10001;
1116 transition: all 0.5s; 1145 transition: all 0.5s;
1117 } 1146 }
1118 .sheetShow{ 1147 .sheetShow{
1119 top:0upx !important; 1148 top:0upx !important;
1120 } 1149 }
1121 /* 关闭时的动画，时间自己可以设置0.5s*/ 1150 /* 关闭时的动画，时间自己可以设置0.5s*/
1122 .sheeHide{ 1151 .sheeHide{
1123 top:120% !important; 1152 top:120% !important;
1124 transition: all 0.5s; 1153 transition: all 0.5s;
1125 } 1154 }
1126 1155
1127 /* 项目需求根据设计稿要展示的高度,超出这个高度就自动滚动*/ 1156 /* 项目需求根据设计稿要展示的高度,超出这个高度就自动滚动*/
1128 .sheetView_active{ 1157 .sheetView_active{
1129 height: 942upx; 1158 height: 942upx;
1130 } 1159 }
1131 1160
1132 </style> 1161 </style>
1133 1162
src/pages/frameDetail/frameDetail.vue
Diff comments   View file @0bda9ef
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 <view class="cart_icon"> 311 <view class="cart_icon">
312 <image v-bind:src="imgShop.img"/> 312 <image v-bind:src="imgShop.img"/>
313 <text>{{cartNumber}}</text> 313 <text>{{cartNumber}}</text>
314 </view> 314 </view>
315 <view class="botton_image">购物车</view> 315 <view class="botton_image">购物车</view>
316 </view> 316 </view>
317 <view class="botton_2"> 317 <view class="botton_2">
318 <view 318 <view
319 class="botton_input" 319 class="botton_input"
320 @tap="addCart()" 320 @tap="showBottom(true)"
321 >加入购物车</view> 321 >加入购物车</view>
322 <view 322 <view
323 class="botton_now" 323 class="botton_now"
324 324
325 @click="showBottom()" 325 @click="showBottom(false)"
326 >立即购买</view> 326 >立即购买</view>
327 </view> 327 </view>
328 </view> 328 </view>
329 <BottomSheet v-if="isShowBottom" :pid="pid" :goodInfo="goodInfo" :isShowBottom="isShowBottom" @closeBottom="closeBottom"></BottomSheet> 329 <BottomSheet v-if="isShowBottom" :isCart="isCart" @addCart="addCart"
330 :pid="pid" :goodInfo="goodInfo" :isShowBottom="isShowBottom" @closeBottom="closeBottom"></BottomSheet>
330 </view> 331 </view>
331 </template> 332 </template>
332 333
333 <script> 334 <script>
334 import store from '@/store' 335 import store from '@/store'
335 import BottomSheet from './components/BottomSheet.vue'; 336 import BottomSheet from './components/BottomSheet.vue';
336 export default { 337 export default {
337 components:{ 338 components:{
338 BottomSheet, 339 BottomSheet,
339 }, 340 },
340 data () { 341 data () {
341 return { 342 return {
343 isCart:Boolean,
342 isShowBottom : false, //底部弹窗开关 344 isShowBottom : false, //底部弹窗开关
343 test: '', 345 test: '',
344 goodType: 2, 346 goodType: 2,
345 pid: 0,
346 // 购物车数据
347 addCartList: {
348 mp_id: 0,
349 sk_id: 0,
350 num: 1,
351 price: '',
352 },
353 screenItems: [ 347 screenItems: [
354 { current: 0, text: '商品介绍' }, 348 { current: 0, text: '商品介绍' },
355 { current: 1, text: '规格参数' }, 349 { current: 1, text: '规格参数' },
356 { current: 2, text: '售后保障' }, 350 { current: 2, text: '售后保障' },
357 ], 351 ],
358 current: 0, 352 current: 0,
359 starCount: 5, 353 starCount: 5,
360 parameter: [ 354 parameter: [
361 { key: 0, img: '/static/img/detail/d2.png', standard: '框架宽', slength: '139mm' }, 355 { key: 0, img: '/static/img/detail/d2.png', standard: '框架宽', slength: '139mm' },
362 { key: 1, img: '/static/img/detail/d3.png', standard: '镜片宽', slength: '51mm' }, 356 { key: 1, img: '/static/img/detail/d3.png', standard: '镜片宽', slength: '51mm' },
363 { key: 2, img: '/static/img/detail/d4.png', standard: '镜片高', slength: '45mm' }, 357 { key: 2, img: '/static/img/detail/d4.png', standard: '镜片高', slength: '45mm' },
364 { key: 3, img: '/static/img/detail/d5.png', standard: '鼻架宽', slength: '19mm' }, 358 { key: 3, img: '/static/img/detail/d5.png', standard: '鼻架宽', slength: '19mm' },
365 { key: 4, img: '/static/img/detail/d6.png', standard: '框架耳长', slength: '138mm' }, 359 { key: 4, img: '/static/img/detail/d6.png', standard: '框架耳长', slength: '138mm' },
366 { key: 5, img: '/static/img/detail/d7.png', standard: '框架重', slength: '19mm' }, 360 { key: 5, img: '/static/img/detail/d7.png', standard: '框架重', slength: '19mm' },
367 ], 361 ],
368 esvalue: '宝贝好评率', 362 esvalue: '宝贝好评率',
369 introduction: { 363 introduction: {
370 material: '钛合金', 364 material: '钛合金',
371 func: '抗疲劳/防辐射', 365 func: '抗疲劳/防辐射',
372 rate: '男/女', 366 rate: '男/女',
373 }, 367 },
374 imgAll: '/static/img/detail/d8.png', 368 imgAll: '/static/img/detail/d8.png',
375 photoes: [ 369 photoes: [
376 { value: '日常办公', img: '/static/img/detail/d9.png' }, 370 { value: '日常办公', img: '/static/img/detail/d9.png' },
377 { value: '上网', img: '/static/img/detail/d10.png' }, 371 { value: '上网', img: '/static/img/detail/d10.png' },
378 { value: '追剧', img: '/static/img/detail/d11.png' }, 372 { value: '追剧', img: '/static/img/detail/d11.png' },
379 { value: '玩游戏', img: '/static/img/detail/d12.png' }, 373 { value: '玩游戏', img: '/static/img/detail/d12.png' },
380 ], 374 ],
381 imgDetail: '/static/img/detail/d13.png', 375 imgDetail: '/static/img/detail/d13.png',
382 imgShop: { 376 imgShop: {
383 img: '/static/tab-cart.png', 377 img: '/static/tab-cart.png',
384 IsShown: false, 378 IsShown: false,
385 }, 379 },
386 tag: { 380 tag: {
387 prod_tag_freesend: [{ 381 prod_tag_freesend: [{
388 label: '眼镜盒', 382 label: '眼镜盒',
389 value: '262', 383 value: '262',
390 }], 384 }],
391 }, 385 },
386
387 pid: 0,
388 // 购物车数据
389 addCartList: {
390 uid: Number,//用户的唯一识别码
391 openid: String,
392 mp_id: Number,//使用人
393 sk_id: Number,//产品的sku_id
394 num: Number,//购买数量
395 pid: Number,//产品id
396 price: Number,//价格
397 checkedSKU:Object//产品信息
398 },
392 } 399 }
393 }, 400 },
394 onLoad: function ({ pid, sk_id: skId }) { 401 onLoad: function ({ pid, sk_id: skId }) {
395 this.pid = pid 402 this.pid = pid
396 // console.log('sk_id=====>',sk_id) 403 // console.log('sk_id=====>',sk_id)
397 store.dispatch('read/fetch', { 404 store.dispatch('read/fetch', {
398 pid, 405 pid,
399 sk_id: skId, 406 sk_id: skId,
400 }).then(() => { 407 }).then(() => {
401 this.parameter[0].slength = `${this.goodInfo.frame_width}mm` 408 this.parameter[0].slength = `${this.goodInfo.frame_width}mm`
402 this.parameter[1].slength = `${this.goodInfo.glass_width}mm` 409 this.parameter[1].slength = `${this.goodInfo.glass_width}mm`
403 this.parameter[2].slength = `${this.goodInfo.glass_height}mm` 410 this.parameter[2].slength = `${this.goodInfo.glass_height}mm`
404 this.parameter[3].slength = `${this.goodInfo.nose_width}mm` 411 this.parameter[3].slength = `${this.goodInfo.nose_width}mm`
405 this.parameter[4].slength = `${this.goodInfo.leg_long}mm` 412 this.parameter[4].slength = `${this.goodInfo.leg_long}mm`
406 this.parameter[5].slength = `${this.goodInfo.weight}mm` 413 this.parameter[5].slength = `${this.goodInfo.weight}mm`
407 this.tag = this.goodInfo.tag 414 this.tag = this.goodInfo.tag
408 this.test = this.goodInfo.prodIntro1 415 this.test = this.goodInfo.prodIntro1
409 this.test = this.test.replace(/\<img/gi, '<img style="max-width:100%;height:auto"') 416 this.test = this.test.replace(/\<img/gi, '<img style="max-width:100%;height:auto"')
410 // addCart 417 // addCart
418 this.addCartList.uid = this.$store.state.user.userInfo.uid
419 this.addCartList.openid = this.$store.state.user.userInfo.openid
420 this.addCartList.pid = this.goodInfo.pid
411 this.addCartList.price = this.goodInfo.priceArea.Min_Price 421 this.addCartList.price = this.goodInfo.priceArea.Min_Price
412 this.addCartList.sk_id = this.goodInfo.skuList[0].sk_id
413 this.addCartList.mp_id = this.goodInfo.glassData.mp_id
414 }) 422 })
415 store.dispatch('cart/getCartList') 423 store.dispatch('cart/getCartList')
416 // console.log(this.$store.state.user.userInfo.uid + 'ssss') 424 // console.log(this.$store.state.user.userInfo.uid + 'ssss')
417 }, 425 },
418 computed: { 426 computed: {
419 updateGoodType () { 427 updateGoodType () {
420 return this.goodType 428 return this.goodType
421 }, 429 },
422 goodInfo () { 430 goodInfo () {
423 // console.log(this.$store.state.read.goodInfo) 431 // console.log(this.$store.state.read.goodInfo)
424 return this.$store.state.read.goodInfo 432 return this.$store.state.read.goodInfo
425 }, 433 },
426 cartNumber() { 434 cartNumber() {
427 return this.$store.state.cart.cartList.length || 0 435 return this.$store.state.cart.cartList.length || 0
428 }, 436 },
429 }, 437 },
430 methods: { 438 methods: {
431 //底部弹窗开关 439 //底部弹窗开关
432 showBottom(){ 440 showBottom(isCart){
441 this.isCart = isCart;
433 this.isShowBottom = true; 442 this.isShowBottom = true;
434 }, 443 },
435 closeBottom(){ 444 closeBottom(){
436 this.isShowBottom = false; 445 this.isShowBottom = false;
437 }, 446 },
438 // 前往购物车 447 // 前往购物车
439 toCart() { 448 toCart() {
440 uni.switchTab({ 449 uni.switchTab({
441 url: '/pages/cart/cart', 450 url: '/pages/cart/cart',
442 success: res => {}, 451 success: res => {},
443 fail: (error) => { console.log('跳转购物车失败======>', error) }, 452 fail: (error) => { console.log('跳转购物车失败======>', error) },
444 complete: () => { console.log('toCart') }, 453 complete: () => { console.log('toCart') },
445 }) 454 })
446 }, 455 },
447 // 加入购物车 456 // 加入购物车
448 addCart () { 457 addCart (mp_id,num,checkedSKU,sk_id) {
449 store.dispatch('cart/addCart', { 458 this.addCartList.mp_id = mp_id
450 uid: this.$store.state.user.userInfo.uid, 459 this.addCartList.sk_id = sk_id
451 openid: this.$store.state.user.userInfo.openid, 460 this.addCartList.num = num
452 mp_id: this.addCartList.mp_id, 461 this.addCartList.checkedSKU = checkedSKU
453 sk_id: this.addCartList.sk_id, 462 console.log('添加购物车的参数',this.addCartList)
454 num: this.addCartList.num, 463 store.dispatch('cart/addCart', this.addCartList).then((res)=>{
455 pid: this.pid, 464 console.log('*-*-*-*--*-',res)
456 price: this.addCartList.price, 465 // 再次请求购物车接口，实现实时更新
457 }) 466 store.dispatch('cart/getCartList', {
458 // 再次请求购物车接口，实现实时更新 467 uid: this.$store.state.user.userInfo.uid,
459 store.dispatch('cart/getCartList', { 468 })
460 uid: this.$store.state.user.userInfo.uid, 469 })
461 })
462 }, 470 },
463 goPerchase () { 471 goPerchase () {
464 // switch (this.updateGoodType) { 472 // switch (this.updateGoodType) {
465 // case '1': 473 // case '1':
466 console.log('goPerchase') 474 console.log('goPerchase')
467 uni.navigateTo({ 475 uni.navigateTo({
468 url: `../purchaseLenses/purchaseLenses?pid=${this.pid}`, 476 url: `../purchaseLenses/purchaseLenses?pid=${this.pid}`,
469 success: res => {}, 477 success: res => {},
470 fail: (error) => { console.log('跳转参数选择失败======>', error) }, 478 fail: (error) => { console.log('跳转参数选择失败======>', error) },
471 complete: () => { console.log('goPerchase') }, 479 complete: () => { console.log('goPerchase') },
472 }) 480 })
473 // break 481 // break
474 // case '2': 482 // case '2':
475 // uni.navigateTo({ 483 // uni.navigateTo({
476 // url: '../detailStandard/detailStandard_k', 484 // url: '../detailStandard/detailStandard_k',
477 // success: res => {}, 485 // success: res => {},
478 // fail: () => {}, 486 // fail: () => {},
479 // complete: () => {} 487 // complete: () => {}
480 // }) 488 // })
481 // break 489 // break
482 // case '3': 490 // case '3':
483 // uni.navigateTo({ 491 // uni.navigateTo({
484 // url: '../purchaseLenses/purchaseLenses', 492 // url: '../purchaseLenses/purchaseLenses',
485 // success: res => {}, 493 // success: res => {},
486 // fail: () => {}, 494 // fail: () => {},
487 // complete: () => {} 495 // complete: () => {}
488 // }) 496 // })
489 // break 497 // break
490 // case '4': 498 // case '4':
491 // uni.navigateTo({ 499 // uni.navigateTo({
492 // url: '../detailStandard/detailStandard_sun', 500 // url: '../detailStandard/detailStandard_sun',
493 // success: res => {}, 501 // success: res => {},
494 // fail: () => {}, 502 // fail: () => {},
495 // complete: () => {} 503 // complete: () => {}
496 // }) 504 // })
497 // break 505 // break
498 // default : 506 // default :
499 // break 507 // break
500 // } 508 // }
501 }, 509 },
502 // 加入购物车 510 // 加入购物车
503 // addCart () { 511 // addCart () {
504 // store.dispatch('cart/addCart', { 512 // store.dispatch('cart/addCart', {
505 // uid: this.$store.state.user.userInfo.uid, 513 // uid: this.$store.state.user.userInfo.uid,
506 // openid: this.$store.state.user.userInfo.openid, 514 // openid: this.$store.state.user.userInfo.openid,
507 // pid: this.pid, 515 // pid: this.pid,
508 // checkedSKU: {}, 516 // checkedSKU: {},
509 // }) 517 // })
510 // store.dispatch('cart/getCartList', { 518 // store.dispatch('cart/getCartList', {
511 // uid: this.$store.state.user.userInfo.uid, // 用户id 519 // uid: this.$store.state.user.userInfo.uid, // 用户id
512 // }) 520 // })
513 // }, 521 // },
514 tabChange (e) { 522 tabChange (e) {
515 if (this.current !== e) { 523 if (this.current !== e) {
516 this.current = e 524 this.current = e
517 } 525 }
518 }, 526 },
519 }, 527 },
520 } 528 }
521 </script> 529 </script>
522 <style lang='scss'> 530 <style lang='scss'>
523 .container { 531 .container {
524 background-color: #f8f8f8; 532 background-color: #f8f8f8;
525 } 533 }
526 .D1, 534 .D1,
527 .D2, 535 .D2,
528 .D3, 536 .D3,
529 .D4, 537 .D4,
530 .D6 { 538 .D6 {
531 background: #ffffff; 539 background: #ffffff;
532 margin-bottom: 10px; 540 margin-bottom: 10px;
533 padding: 8px 20px 8px 20px; 541 padding: 8px 20px 8px 20px;
534 box-sizing: border-box; 542 box-sizing: border-box;
535 .swiperImage { 543 .swiperImage {
536 width: 684rpx; 544 width: 684rpx;
537 height: 480rpx; 545 height: 480rpx;
538 image { 546 image {
539 max-width: 100%; 547 max-width: 100%;
540 max-height: 100%; 548 max-height: 100%;
541 border-radius: 16rpx; 549 border-radius: 16rpx;
542 } 550 }
543 } 551 }
544 } 552 }
545 .D5 { 553 .D5 {
546 background: #ffffff; 554 background: #ffffff;
547 padding: 8px 20px 8px 20px; 555 padding: 8px 20px 8px 20px;
548 box-sizing: border-box; 556 box-sizing: border-box;
549 } 557 }
550 .swiperImage { 558 .swiperImage {
551 width: 100%; 559 width: 100%;
552 height: 560rpx; 560 height: 560rpx;
553 .swiper-item { 561 .swiper-item {
554 width: 100%; 562 width: 100%;
555 image { 563 image {
556 width: 100%; 564 width: 100%;
557 } 565 }
558 } 566 }
559 } 567 }
560 .D1 { 568 .D1 {
561 .D1_price { 569 .D1_price {
562 color: #eb5d3b; 570 color: #eb5d3b;
563 font-size: 18px; 571 font-size: 18px;
564 margin-top: 5px; 572 margin-top: 5px;
565 font-family: "PingFangSC-Semibold"; 573 font-family: "PingFangSC-Semibold";
566 display: flex; 574 display: flex;
567 justify-content: space-between; 575 justify-content: space-between;
568 .D1_number { 576 .D1_number {
569 color: #999999; 577 color: #999999;
570 font-size: 14px; 578 font-size: 14px;
571 font-family: "PingFangSC-Regular"; 579 font-family: "PingFangSC-Regular";
572 } 580 }
573 } 581 }
574 .D1_name { 582 .D1_name {
575 font-size: 16px; 583 font-size: 16px;
576 font-family: "PingFangSC-Semibold"; 584 font-family: "PingFangSC-Semibold";
577 margin-top: 5px; 585 margin-top: 5px;
578 .D1_name1 { 586 .D1_name1 {
579 font-weight: bold; 587 font-weight: bold;
580 font-size: 16px; 588 font-size: 16px;
581 color: #333333; 589 color: #333333;
582 } 590 }
583 } 591 }
584 .D1_spans { 592 .D1_spans {
585 font-size: 10px; 593 font-size: 10px;
586 color: #999999; 594 color: #999999;
587 margin-top: 5px; 595 margin-top: 5px;
588 span { 596 span {
589 height: 14px; 597 height: 14px;
590 margin-right: 10px; 598 margin-right: 10px;
591 } 599 }
592 } 600 }
593 } 601 }
594 .D2 { 602 .D2 {
595 font-size: 14px; 603 font-size: 14px;
596 font-family: "PingFangSC-Regular"; 604 font-family: "PingFangSC-Regular";
597 view { 605 view {
598 height: 24px; 606 height: 24px;
599 } 607 }
600 .D2_span1 { 608 .D2_span1 {
601 color: #999999; 609 color: #999999;
602 } 610 }
603 .D2_span2 { 611 .D2_span2 {
604 color: #333333; 612 color: #333333;
605 } 613 }
606 } 614 }
607 .D3 { 615 .D3 {
608 .screenBar { 616 .screenBar {
609 width: 670rpx; 617 width: 670rpx;
610 margin-top: 20rpx; 618 margin-top: 20rpx;
611 margin-bottom: 24rpx; 619 margin-bottom: 24rpx;
612 display: flex; 620 display: flex;
613 flex-direction: row; 621 flex-direction: row;
614 justify-content: space-between; 622 justify-content: space-between;
615 align-items: center; 623 align-items: center;
616 font-size: 14px; 624 font-size: 14px;
617 color: #333333; 625 color: #333333;
618 transition: all 0.2s; 626 transition: all 0.2s;
619 } 627 }
620 .screen-item { 628 .screen-item {
621 font-size: 32rpx; 629 font-size: 32rpx;
622 color: #333333; 630 color: #333333;
623 display: flex; 631 display: flex;
624 transition: all 0.2s; 632 transition: all 0.2s;
625 .D3_list { 633 .D3_list {
626 margin-bottom: 4px; 634 margin-bottom: 4px;
627 } 635 }
628 .D3_list view { 636 .D3_list view {
629 display: flex; 637 display: flex;
630 align-content: center; 638 align-content: center;
631 font-size: 14px; 639 font-size: 14px;
632 color: #333333; 640 color: #333333;
633 } 641 }
634 .D3_list image { 642 .D3_list image {
635 width: 50px; 643 width: 50px;
636 height: 25px; 644 height: 25px;
637 margin-right: 6px; 645 margin-right: 6px;
638 } 646 }
639 .D3_list span { 647 .D3_list span {
640 margin-left: 6px; 648 margin-left: 6px;
641 margin-right: 5px; 649 margin-right: 5px;
642 font-family: "PingFangSC-Regular"; 650 font-family: "PingFangSC-Regular";
643 } 651 }
644 } 652 }
645 .active { 653 .active {
646 border-bottom: 4rpx solid #ff6b4a; 654 border-bottom: 4rpx solid #ff6b4a;
647 } 655 }
648 .customerService { 656 .customerService {
649 margin-bottom: 90rpx; 657 margin-bottom: 90rpx;
650 .serviceItem { 658 .serviceItem {
651 margin-bottom: 32rpx; 659 margin-bottom: 32rpx;
652 .title { 660 .title {
653 display: flex; 661 display: flex;
654 flex-direction: row; 662 flex-direction: row;
655 align-items: center; 663 align-items: center;
656 .titleText { 664 .titleText {
657 font-size: 14px; 665 font-size: 14px;
658 color: #333333; 666 color: #333333;
659 margin-bottom: 12rpx; 667 margin-bottom: 12rpx;
660 } 668 }
661 } 669 }
662 .itemContent { 670 .itemContent {
663 font-size: 14px; 671 font-size: 14px;
664 color: #999999; 672 color: #999999;
665 margin-left: 18rpx; 673 margin-left: 18rpx;
666 } 674 }
667 } 675 }
668 .serviceItem2 { 676 .serviceItem2 {
669 margin-left: 18rpx; 677 margin-left: 18rpx;
670 margin-bottom: 32rpx; 678 margin-bottom: 32rpx;
671 .titleText { 679 .titleText {
672 font-size: 14px; 680 font-size: 14px;
673 color: #ff6b4a; 681 color: #ff6b4a;
674 } 682 }
675 .itemContent { 683 .itemContent {
676 font-size: 14px; 684 font-size: 14px;
677 color: #999999; 685 color: #999999;
678 .itemContent-child { 686 .itemContent-child {
679 margin-bottom: 40rpx; 687 margin-bottom: 40rpx;
680 .contentTitle { 688 .contentTitle {
681 border-bottom: 1px solid #ff6b4a; 689 border-bottom: 1px solid #ff6b4a;
682 } 690 }
683 } 691 }
684 } 692 }
685 } 693 }
686 } 694 }
687 } 695 }
688 .D4 { 696 .D4 {
689 .D4_esvalue { 697 .D4_esvalue {
690 font-size: 14px; 698 font-size: 14px;
691 color: #333333; 699 color: #333333;
692 display: flex; 700 display: flex;
693 justify-content: space-between; 701 justify-content: space-between;
694 margin-bottom: 10px; 702 margin-bottom: 10px;
695 .D4_2 { 703 .D4_2 {
696 width: 90px; 704 width: 90px;
697 display: flex; 705 display: flex;
698 align-items: center; 706 align-items: center;
699 justify-content: space-between; 707 justify-content: space-between;
700 } 708 }
701 } 709 }
702 .D4_esvalue view { 710 .D4_esvalue view {
703 font-size: 14px; 711 font-size: 14px;
704 color: #333333; 712 color: #333333;
705 font-weight: bold; 713 font-weight: bold;
706 } 714 }
707 .D4_list{ 715 .D4_list{
708 display: grid; 716 display: grid;
709 grid-row-gap: 10px; 717 grid-row-gap: 10px;
710 grid-column-gap: 4px; 718 grid-column-gap: 4px;
711 } 719 }
712 .D4_list view { 720 .D4_list view {
713 display: flex; 721 display: flex;
714 justify-content: center; 722 justify-content: center;
715 align-items: center; 723 align-items: center;
716 font-size: 12px; 724 font-size: 12px;
717 width: 118px; 725 width: 118px;
718 height: 24px; 726 height: 24px;
719 border-radius: 2px; 727 border-radius: 2px;
720 background: #f2f2f2; 728 background: #f2f2f2;
721 color: #666666; 729 color: #666666;
722 // letter-spacing: 1px; 730 // letter-spacing: 1px;
723 } 731 }
724 } 732 }
725 .D5 { 733 .D5 {
726 .D5_fixed1 { 734 .D5_fixed1 {
727 display: flex; 735 display: flex;
728 justify-content: space-between; 736 justify-content: space-between;
729 align-content: center; 737 align-content: center;
730 margin-bottom: 12px; 738 margin-bottom: 12px;
731 view { 739 view {
732 font-size: 14px; 740 font-size: 14px;
733 color: #333333; 741 color: #333333;
734 font-weight: bold; 742 font-weight: bold;
735 font-family: "PingFangSC-Medium"; 743 font-family: "PingFangSC-Medium";
736 line-height: 24px; 744 line-height: 24px;
737 } 745 }
738 image { 746 image {
739 width: 240rpx; 747 width: 240rpx;
740 height: 3px; 748 height: 3px;
741 margin-top: 10px; 749 margin-top: 10px;
742 } 750 }
743 } 751 }
744 .D5_all { 752 .D5_all {
745 width: 100%; 753 width: 100%;
746 margin-top: 30rpx; 754 margin-top: 30rpx;
747 margin-right: 30rpx; 755 margin-right: 30rpx;
748 margin-bottom: 180rpx; 756 margin-bottom: 180rpx;
749 font-family: "PingFangSC-Regular"; 757 font-family: "PingFangSC-Regular";
750 // border: #999999 solid 1.5px; 758 // border: #999999 solid 1.5px;
751 } 759 }
752 } 760 }
753 .D6 { 761 .D6 {
754 width: 100%; 762 width: 100%;
755 height: 430px; 763 height: 430px;
756 background: #f9f6ed; 764 background: #f9f6ed;
757 margin-bottom: 74px; 765 margin-bottom: 74px;
758 view { 766 view {
759 text-align: center; 767 text-align: center;
760 } 768 }
761 .D6_v1 { 769 .D6_v1 {
762 font-weight: bold; 770 font-weight: bold;
763 } 771 }
764 .D6_v2 { 772 .D6_v2 {
765 font-size: 14px; 773 font-size: 14px;
766 margin-bottom: 30px; 774 margin-bottom: 30px;
767 } 775 }
768 .D6_v5 { 776 .D6_v5 {
769 .D6_v5_s1 { 777 .D6_v5_s1 {
770 font-weight: bold; 778 font-weight: bold;
771 } 779 }
772 .D6_v5_s2 { 780 .D6_v5_s2 {
773 font-size: 14px; 781 font-size: 14px;
774 } 782 }
775 } 783 }
776 } 784 }
777 .botton { 785 .botton {
778 position: fixed; 786 position: fixed;
779 bottom: 0; 787 bottom: 0;
780 height: 74px; 788 height: 74px;
781 width: 100%; 789 width: 100%;
782 background: #ffffff; 790 background: #ffffff;
783 padding: 20px 20px 8px 20px; 791 padding: 20px 20px 8px 20px;
784 font-family: "PingFangSC-Regular"; 792 font-family: "PingFangSC-Regular";
785 box-sizing: border-box; 793 box-sizing: border-box;
786 display: flex; 794 display: flex;
787 justify-content: space-between; 795 justify-content: space-between;
788 align-content: center; 796 align-content: center;
789 .botton_1 { 797 .botton_1 {
790 width: 20%; 798 width: 20%;
791 height: 100%; 799 height: 100%;
792 text-align: center; 800 text-align: center;
793 color: #989898; 801 color: #989898;
794 .cart_icon { 802 .cart_icon {
795 position: relative; 803 position: relative;
796 image { 804 image {
797 805
798 } 806 }
799 text { 807 text {
800 position: absolute; 808 position: absolute;
801 color: white; 809 color: white;
802 font-size: 17px; 810 font-size: 17px;
803 background-color: red; 811 background-color: red;
804 min-height: 24px; 812 min-height: 24px;
805 min-width:24px; 813 min-width:24px;
806 line-height: 24px; 814 line-height: 24px;
807 right: -12%; 815 right: -12%;
808 top: -12px; 816 top: -12px;
809 text-align: center; 817 text-align: center;
810 border-radius: 24px; 818 border-radius: 24px;
811 padding:2px; 819 padding:2px;
812 } 820 }
813 } 821 }
814 } 822 }
815 image { 823 image {
816 width: 42%; 824 width: 42%;
817 height: 26px; 825 height: 26px;
818 } 826 }
819 .botton_image { 827 .botton_image {
820 font-size: 12px; 828 font-size: 12px;
821 text-align: center; 829 text-align: center;
822 } 830 }
823 .botton_2 { 831 .botton_2 {
824 width: 74%; 832 width: 74%;
825 height: 86%; 833 height: 86%;
826 display: grid; 834 display: grid;
827 grid-template-columns: 50% 50%; 835 grid-template-columns: 50% 50%;
828 } 836 }
829 .botton_input { 837 .botton_input {
830 display: inline-flex; 838 display: inline-flex;
831 align-items: center; 839 align-items: center;
832 justify-content: space-around; 840 justify-content: space-around;
833 background: #fff0ec; 841 background: #fff0ec;
834 font-size: 16px; 842 font-size: 16px;
835 color: #ff6b4a; 843 color: #ff6b4a;
836 border-radius: 20px 0 0 20px; 844 border-radius: 20px 0 0 20px;
837 } 845 }
838 .botton_now { 846 .botton_now {
839 display: inline-flex; 847 display: inline-flex;
840 align-items: center; 848 align-items: center;
841 justify-content: space-around; 849 justify-content: space-around;
842 background: #ff6b4a; 850 background: #ff6b4a;
843 font-size: 16px; 851 font-size: 16px;
844 color: #ffffff; 852 color: #ffffff;
src/store/modules/cart.js
Diff comments   View file @0bda9ef
1 import urlAlias from '../url' 1 import urlAlias from '../url'
2 import request from '../request' 2 import request from '../request'
3 3
4 const { cartList, cartModi, cartDel, cartAdd } = urlAlias 4 const { cartList, cartModi, cartDel, cartAdd } = urlAlias
5 5
6 const state = { 6 const state = {
7 cartList: [], 7 cartList: [],
8 } 8 }
9 9
10 const mutations = { 10 const mutations = {
11 INIT: (state, cartList) => { 11 INIT: (state, cartList) => {
12 state.cartList = cartList 12 state.cartList = cartList
13 }, 13 },
14 DEL: (state, index) => { 14 DEL: (state, index) => {
15 console.log('mutations====>', state.cartList) 15 console.log('mutations====>', state.cartList)
16 state.cartList.splice(index, 1) 16 state.cartList.splice(index, 1)
17 console.log('mutations====>index', index) 17 console.log('mutations====>index', index)
18 // state.cartList=delList 18 // state.cartList=delList
19 }, 19 },
20 MODI: (state, args) => { 20 MODI: (state, args) => {
21 console.log('the num', state.cartList[args.index].num) 21 console.log('the num', state.cartList[args.index].num)
22 console.log('mutations====>isadd', args) 22 console.log('mutations====>isadd', args)
23 state.cartList[args.index].num = args.num 23 state.cartList[args.index].num = args.num
24 console.log('the num', state.cartList[args.index].num) 24 console.log('the num', state.cartList[args.index].num)
25 }, 25 },
26 26
27 } 27 }
28 28
29 const actions = { 29 const actions = {
30 // 获取购物车列表 30 // 获取购物车列表
31 getCartList({ commit }, param) { 31 getCartList({ commit }, param) {
32 request({ 32 return new Promise((resolve) => request({
33 url: cartList, 33 url: cartList,
34 data: param, 34 data: param,
35 success: (res) => { 35 success: (res) => {
36 console.log('cart===>接口数据', res.data.data) 36 console.log('cart===>接口数据', res.data.data)
37 commit('INIT', res.data.data) 37 commit('INIT', res.data.data)
38 resolve(res.data.data)
38 }, 39 },
39 // fail: (res) => { 40 }))
40 // console.log('fail status === > ', res)
41 // },
42 // complete: (res) => {
43 // console.log('complete status === > ', res)
44 // },
45 })
46 }, 41 },
47 // 修改购物车数量 42 // 修改购物车数量
48 modiCart({ commit }, param) { 43 modiCart({ commit }, param) {
49 const arg = Object.assign({ num: param.num }, param.args) 44 const arg = Object.assign({ num: param.num }, param.args)
50 delete param.args 45 delete param.args
51 request({ 46 request({
52 url: cartModi, 47 url: cartModi,
53 data: param, 48 data: param,
54 success: (res) => { 49 success: (res) => {
55 console.log('modiCart-res=====>', res.data) 50 console.log('modiCart-res=====>', res.data)
56 console.log('modi-parm', param) 51 console.log('modi-parm', param)
57 commit('MODI', arg) 52 commit('MODI', arg)
58 }, 53 },
59 fail: (res) => { 54 fail: (res) => {
60 console.log('fail status === > ', res) 55 console.log('fail status === > ', res)
61 }, 56 },
62 complete: (res) => { 57 complete: (res) => {
63 console.log('complete status === > ', res) 58 console.log('complete status === > ', res)
64 }, 59 },
65 }) 60 })
66 }, 61 },
67 // 删除购物车商品 62 // 删除购物车商品
68 delCart({ commit }, param) { 63 delCart({ commit }, param) {
69 const arg = param.arg 64 const arg = param.arg
70 delete param.arg 65 delete param.arg
71 request({ 66 request({
72 url: cartDel, 67 url: cartDel,
73 data: param, 68 data: param,
74 success: (res) => { 69 success: (res) => {
75 console.log('del-parm', param) 70 console.log('del-parm', param)
76 console.log('del-myparms==>', arg) 71 console.log('del-myparms==>', arg)
77 commit('DEL', arg) 72 commit('DEL', arg)
78 }, 73 },
79 fail: (res) => { 74 fail: (res) => {
80 console.log('fail status === > ', res) 75 console.log('fail status === > ', res)
81 }, 76 },
82 complete: (res) => { 77 complete: (res) => {
83 console.log('complete status === > ', res) 78 console.log('complete status === > ', res)
84 }, 79 },
85 }) 80 })
86 }, 81 },
87 // 添加到购物车 82 // 添加到购物车
88 addCart({ commit }, param) { 83 addCart({ commit }, param) {
89 console.log('请求接口开始') 84 console.log('请求接口开始')
90 request({ 85 return new Promise((resolve) => request({
91 url: cartAdd, 86 url: cartAdd,
92 data: param, 87 data: param,
93 success: (res) => { 88 success: (res) => {
94 console.log('add-parm', param) 89 console.log('add-parm', param)
95 console.log('addcart===>res.data===>', res.data) 90 console.log('addcart===>res.data===>', res.data)
96 // commit('INIT', res.data.data) 91 // commit('INIT', res.data.data)
92 resolve(res.data)
97 }, 93 },
98 fail: (res) => { 94 fail: (res) => {
99 console.log('fail status === > ', res) 95 console.log('添加购物车失败 === > ', res)
100 }, 96 },
101 complete: (res) => { 97 complete: (res) => {
102 console.log('complete status === > ', res) 98 console.log('添加购物车完成 === > ', res)
103 }, 99 },
104 }) 100 }))
105 }, 101 },
106 } 102 }
107 103
108 export default { 104 export default {
109 namespaced: true, 105 namespaced: true,
110 state, 106 state,
111 mutations, 107 mutations,
112 actions, 108 actions,