吉鹏 / gulu-vue

Download as
Browse Code »

Commit bd002a8ecb827e8b2a8d9ae3a0c9c16a0a9906b4

Authored by 范牧
1 parent d6200736ba
Exists in master

购物车跳转刷新问题

Showing 1 changed file with 2 additions and 3 deletions   Show diff stats
src/pages/cart/cart.vue
Diff comments   View file @bd002a8
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 @click="pClick" 11 @click="pClick"
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="cartList[index].isChecked? 'partentChecked':'partentCheck'" 28 v-bind:class="cartList[index].isChecked? 'partentChecked':'partentCheck'"
29 @click="childClick(cartList[index],index)" 29 @click="childClick(cartList[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 49 <view
50 class="describ" 50 class="describ"
51 @click="showBottom(3,item.pid,item.sk_id,item.mp_id,item.cart_id,index)" 51 @click="showBottom(3,item.pid,item.sk_id,item.mp_id,item.cart_id,index)"
52 > 52 >
53 <view class="desL"> 53 <view class="desL">
54 <view class="people"> 54 <view class="people">
55 使用人：{{item.peopleName}} 55 使用人：{{item.peopleName}}
56 </view> 56 </view>
57 <view class="skuInfo"> 57 <view class="skuInfo">
58 {{item.sku_name}} 58 {{item.sku_name}}
59 </view> 59 </view>
60 </view> 60 </view>
61 <view class="desR"> 61 <view class="desR">
62 <image 62 <image
63 src="../../static/right.png" 63 src="../../static/right.png"
64 mode="aspectFit" 64 mode="aspectFit"
65 style="width: 18rpx;height: 18rpx;" 65 style="width: 18rpx;height: 18rpx;"
66 ></image> 66 ></image>
67 </view> 67 </view>
68 </view> 68 </view>
69 <view class="priceBox"> 69 <view class="priceBox">
70 <view class="price">￥{{item.nowPrice*item.num}}</view> 70 <view class="price">￥{{item.nowPrice*item.num}}</view>
71 <text class="maxCount">(限购{{maxCount}}副)</text> 71 <text class="maxCount">(限购{{maxCount}}副)</text>
72 <view class="counter"> 72 <view class="counter">
73 <view 73 <view
74 class="btn" 74 class="btn"
75 disabled="this.addDisabled" 75 disabled="this.addDisabled"
76 type="default" 76 type="default"
77 @tap="counter(index,false,item)" 77 @tap="counter(index,false,item)"
78 >-</view> 78 >-</view>
79 <text>{{item.num}}</text> 79 <text>{{item.num}}</text>
80 <view 80 <view
81 class="btn" 81 class="btn"
82 disabled="this.desDisabled" 82 disabled="this.desDisabled"
83 type="default" 83 type="default"
84 @tap="counter(index,true,item)" 84 @tap="counter(index,true,item)"
85 >+</view> 85 >+</view>
86 </view> 86 </view>
87 </view> 87 </view>
88 </view> 88 </view>
89 </view> 89 </view>
90 </view> 90 </view>
91 </view> 91 </view>
92 </block> 92 </block>
93 <view class="footer"> 93 <view class="footer">
94 <view class="footerLeft">实付金额:<text>￥{{totalPrice}}</text></view> 94 <view class="footerLeft">实付金额:<text>￥{{totalPrice}}</text></view>
95 <view class="footerRight"> 95 <view class="footerRight">
96 <view 96 <view
97 class="paybtn" 97 class="paybtn"
98 @click="toComfirmOrder" 98 @click="toComfirmOrder"
99 >立即结算</view> 99 >立即结算</view>
100 </view> 100 </view>
101 </view> 101 </view>
102 <BottomSheet 102 <BottomSheet
103 v-if="isShowBottom" 103 v-if="isShowBottom"
104 :isCart="isCart" 104 :isCart="isCart"
105 @addCart="addCart" 105 @addCart="addCart"
106 :sk_id="sk_id" 106 :sk_id="sk_id"
107 :propMpId="mp_id" 107 :propMpId="mp_id"
108 @chooseCartModi="chooseCartModi" 108 @chooseCartModi="chooseCartModi"
109 :cart_id="cart_id" 109 :cart_id="cart_id"
110 :index="cartIndex" 110 :index="cartIndex"
111 :pid="pid" 111 :pid="pid"
112 :goodInfo="goodInfo" 112 :goodInfo="goodInfo"
113 :isShowBottom="isShowBottom" 113 :isShowBottom="isShowBottom"
114 @closeBottom="closeBottom" 114 @closeBottom="closeBottom"
115 ></BottomSheet> 115 ></BottomSheet>
116 </view> 116 </view>
117 </template> 117 </template>
118 118
119 <script> 119 <script>
120 120
121 import store from '@/store' 121 import store from '@/store'
122 import BottomSheet from '../../components/BottomSheet/BottomSheet.vue' 122 import BottomSheet from '../../components/BottomSheet/BottomSheet.vue'
123 export default { 123 export default {
124 components: { 124 components: {
125 BottomSheet, 125 BottomSheet,
126 }, 126 },
127 data() { 127 data() {
128 return { 128 return {
129 pid: Number, 129 pid: Number,
130 isCart: Number, 130 isCart: Number,
131 sk_id: String, 131 sk_id: String,
132 mp_id: String, 132 mp_id: String,
133 isShowBottom: false, // 底部弹窗开关 133 isShowBottom: false, // 底部弹窗开关
134 cart_id: Number, 134 cart_id: Number,
135 maxCount: 20, 135 maxCount: 20,
136 cartIndex: Number, 136 cartIndex: Number,
137 cartList: [], 137 cartList: [],
138 } 138 }
139 }, 139 },
140 computed: { 140 computed: {
141 pIsoPen () { 141 pIsoPen () {
142 if (this.cartList.length > 0) { 142 if (this.cartList.length > 0) {
143 return !this.cartList.find(item => !item.isChecked) 143 return !this.cartList.find(item => !item.isChecked)
144 } 144 }
145 return false 145 return false
146 }, 146 },
147 goodInfo () { 147 goodInfo () {
148 return this.$store.state.read.goodInfo 148 return this.$store.state.read.goodInfo
149 }, 149 },
150 totalPrice() { 150 totalPrice() {
151 let totalPrice = 0 151 let totalPrice = 0
152 this.cartList.forEach((item) => { 152 this.cartList.forEach((item) => {
153 if (item.isChecked) { 153 if (item.isChecked) {
154 totalPrice += item.nowPrice * item.num 154 totalPrice += item.nowPrice * item.num
155 } 155 }
156 }) 156 })
157 return totalPrice 157 return totalPrice
158 }, 158 },
159 }, 159 },
160 onShow() { 160 onShow() {
161 this.cartList = this.$store.state.cart.cartList
162 },
163 onLoad: async function() {
164 await this.$store.dispatch('cart/getCartList', { 161 await this.$store.dispatch('cart/getCartList', {
165 uid: this.$store.state.user.userInfo.uid, // 用户id 162 uid: this.$store.state.user.userInfo.uid, // 用户id
166 }) 163 })
167 164
168 this.cartList = this.$store.state.cart.cartList 165 this.cartList = this.$store.state.cart.cartList
169 this.cartList.forEach((item) => { 166 this.cartList.forEach((item) => {
170 item.isChecked = false 167 item.isChecked = false
171 }) 168 })
172 }, 169 },
170 onLoad: async function() {
171 },
173 methods: { 172 methods: {
174 // 全选按钮 173 // 全选按钮
175 pClick() { 174 pClick() {
176 const pStatus = !this.cartList.find(item => !item.isChecked) 175 const pStatus = !this.cartList.find(item => !item.isChecked)
177 const oldList = this.cartList 176 const oldList = this.cartList
178 oldList.forEach((item, index) => { 177 oldList.forEach((item, index) => {
179 item.isChecked = !pStatus 178 item.isChecked = !pStatus
180 this.cartList.splice(index, 1, item) 179 this.cartList.splice(index, 1, item)
181 }) 180 })
182 }, 181 },
183 // 单选按钮 182 // 单选按钮
184 childClick(type, index) { 183 childClick(type, index) {
185 this.cartList[index].isChecked = !this.cartList[index].isChecked 184 this.cartList[index].isChecked = !this.cartList[index].isChecked
186 // vue没有办法监听数组内部值的变化，所以需要通过这个方法去触发 185 // vue没有办法监听数组内部值的变化，所以需要通过这个方法去触发
187 this.cartList.splice(index, 1, this.cartList[index]) 186 this.cartList.splice(index, 1, this.cartList[index])
188 }, 187 },
189 // 修改购物车 188 // 修改购物车
190 chooseCartModi(mp_id, sk_id, price, pid, num, cart_id, index) { 189 chooseCartModi(mp_id, sk_id, price, pid, num, cart_id, index) {
191 // console.log('modi',mp_id,sk_id,price,pid,num,cart_id) 190 // console.log('modi',mp_id,sk_id,price,pid,num,cart_id)
192 store.dispatch('cart/modiCart', { 191 store.dispatch('cart/modiCart', {
193 uid: this.$store.state.user.userInfo.uid, 192 uid: this.$store.state.user.userInfo.uid,
194 openid: this.$store.state.user.userInfo.openid, 193 openid: this.$store.state.user.userInfo.openid,
195 mp_id: mp_id, 194 mp_id: mp_id,
196 sk_id: sk_id, 195 sk_id: sk_id,
197 price: price, 196 price: price,
198 pid: pid, 197 pid: pid,
199 num: num, 198 num: num,
200 cart_id: cart_id, 199 cart_id: cart_id,
201 args: { 200 args: {
202 index: index, 201 index: index,
203 }, 202 },
204 }) 203 })
205 this.$nextTick(function() { 204 this.$nextTick(function() {
206 store.dispatch('cart/getCartList', { 205 store.dispatch('cart/getCartList', {
207 uid: this.$store.state.user.userInfo.uid, // 用户id 206 uid: this.$store.state.user.userInfo.uid, // 用户id
208 }).then(() => { 207 }).then(() => {
209 this.cartList = this.$store.state.cart.cartList 208 this.cartList = this.$store.state.cart.cartList
210 }) 209 })
211 }) 210 })
212 }, 211 },
213 // 底部弹窗开关 212 // 底部弹窗开关
214 showBottom(isCart, pid, skId, mp_id, cart_id, index) { 213 showBottom(isCart, pid, skId, mp_id, cart_id, index) {
215 store.dispatch('read/fetch', { 214 store.dispatch('read/fetch', {
216 pid, 215 pid,
217 sk_id: skId, 216 sk_id: skId,
218 }).then(() => { 217 }).then(() => {
219 this.cartIndex = index 218 this.cartIndex = index
220 this.sk_id = skId 219 this.sk_id = skId
221 this.pid = pid 220 this.pid = pid
222 this.mp_id = mp_id 221 this.mp_id = mp_id
223 this.isCart = isCart 222 this.isCart = isCart
224 this.cart_id = cart_id 223 this.cart_id = cart_id
225 this.isShowBottom = true 224 this.isShowBottom = true
226 }) 225 })
227 }, 226 },
228 closeBottom() { 227 closeBottom() {
229 this.isShowBottom = false 228 this.isShowBottom = false
230 }, 229 },
231 toGoods(id, skId) { 230 toGoods(id, skId) {
232 uni.navigateTo({ 231 uni.navigateTo({
233 url: '../details/details?pid=' + id + '&sk_id=' + skId, 232 url: '../details/details?pid=' + id + '&sk_id=' + skId,
234 success: res => {}, 233 success: res => {},
235 fail: () => {}, 234 fail: () => {},
236 complete: () => {}, 235 complete: () => {},
237 }) 236 })
238 }, 237 },
239 toComfirmOrder() { 238 toComfirmOrder() {
240 this.$store.state.cart.checkedCartLst = this.cartList.filter(item => item.isChecked) 239 this.$store.state.cart.checkedCartLst = this.cartList.filter(item => item.isChecked)
241 if (this.$store.state.cart.checkedCartLst.length > 0) { 240 if (this.$store.state.cart.checkedCartLst.length > 0) {
242 uni.navigateTo({ 241 uni.navigateTo({
243 url: '../confirmOrder/confirmOrder?isCart=true', 242 url: '../confirmOrder/confirmOrder?isCart=true',
244 }) 243 })
245 } else { 244 } else {
246 uni.showToast({ 245 uni.showToast({
247 title: '您还没有选择宝贝哦~', 246 title: '您还没有选择宝贝哦~',
248 icon: 'none', 247 icon: 'none',
249 }) 248 })
250 } 249 }
251 }, 250 },
252 counter(index, isadd, item) { 251 counter(index, isadd, item) {
253 // console.log('item=====>', item) 252 // console.log('item=====>', item)
254 // console.log('num=====>', item.num) 253 // console.log('num=====>', item.num)
255 const nums = parseInt(item.num) 254 const nums = parseInt(item.num)
256 if (isadd) { 255 if (isadd) {
257 if (nums >= this.maxCount) { 256 if (nums >= this.maxCount) {
258 this.addDisabled = true 257 this.addDisabled = true
259 } else { 258 } else {
260 this.addDisabled = true 259 this.addDisabled = true
261 store.dispatch('cart/modiCart', { 260 store.dispatch('cart/modiCart', {
262 uid: this.$store.state.user.userInfo.uid, 261 uid: this.$store.state.user.userInfo.uid,
263 openid: this.$store.state.user.userInfo.openid, 262 openid: this.$store.state.user.userInfo.openid,
264 mp_id: item.mp_id, 263 mp_id: item.mp_id,
265 sk_id: item.sk_id, 264 sk_id: item.sk_id,
266 price: item.nowPrice, 265 price: item.nowPrice,
267 pid: item.pid, 266 pid: item.pid,
268 num: nums + 1, 267 num: nums + 1,
269 cart_id: item.cart_id, 268 cart_id: item.cart_id,
270 args: { 269 args: {
271 index: index, 270 index: index,
272 isadd: isadd, 271 isadd: isadd,
273 }, 272 },
274 }) 273 })
275 this.addDisabled = false 274 this.addDisabled = false
276 } 275 }
277 } else { 276 } else {
278 if (nums <= 1) { 277 if (nums <= 1) {
279 this.desDisabled = true 278 this.desDisabled = true
280 } else { 279 } else {
281 this.desDisabled = false 280 this.desDisabled = false
282 281
283 store.dispatch('cart/modiCart', { 282 store.dispatch('cart/modiCart', {
284 uid: this.$store.state.user.userInfo.uid, 283 uid: this.$store.state.user.userInfo.uid,
285 openid: this.$store.state.user.userInfo.openid, 284 openid: this.$store.state.user.userInfo.openid,
286 mp_id: item.mp_id, 285 mp_id: item.mp_id,
287 sk_id: item.sk_id, 286 sk_id: item.sk_id,
288 price: item.nowPrice, 287 price: item.nowPrice,
289 pid: item.pid, 288 pid: item.pid,
290 num: nums - 1, 289 num: nums - 1,
291 cart_id: item.cart_id, 290 cart_id: item.cart_id,
292 args: { 291 args: {
293 index: index, 292 index: index,
294 isadd: isadd, 293 isadd: isadd,
295 }, 294 },
296 }) 295 })
297 this.desDisabled = true 296 this.desDisabled = true
298 } 297 }
299 } 298 }
300 }, 299 },
301 delCart(cart_id, index) { 300 delCart(cart_id, index) {
302 cart_id = parseInt(cart_id) 301 cart_id = parseInt(cart_id)
303 uni.showModal({ 302 uni.showModal({
304 title: '是否删除该商品', 303 title: '是否删除该商品',
305 success: function (res) { 304 success: function (res) {
306 if (res.confirm) { 305 if (res.confirm) {
307 store.dispatch('cart/delCart', { 306 store.dispatch('cart/delCart', {
308 uid: this.$store.state.user.userInfo.uid, 307 uid: this.$store.state.user.userInfo.uid,
309 openid: this.$store.state.user.userInfo.openid, 308 openid: this.$store.state.user.userInfo.openid,
310 cart_id: cart_id, // 要修改的购物车id 309 cart_id: cart_id, // 要修改的购物车id
311 arg: index, // 由于action 传参是能接收两参数，因此将index放入对象 310 arg: index, // 由于action 传参是能接收两参数，因此将index放入对象
312 }) 311 })
313 } 312 }
314 }.bind(this), 313 }.bind(this),
315 }) 314 })
316 // this.cartList.splice(index,1) 315 // this.cartList.splice(index,1)
317 }, 316 },
318 }, 317 },
319 } 318 }
320 </script> 319 </script>
321 320
322 <style lang="scss"> 321 <style lang="scss">
323 .content { 322 .content {
324 min-height: 100vh; 323 min-height: 100vh;
325 background-color: #f2f2f2; 324 background-color: #f2f2f2;
326 display: flex; 325 display: flex;
327 flex-direction: column; 326 flex-direction: column;
328 align-items: center; 327 align-items: center;
329 justify-content: space-between; 328 justify-content: space-between;
330 padding: 20rpx 40rpx; 329 padding: 20rpx 40rpx;
331 box-sizing: border-box; 330 box-sizing: border-box;
332 331
333 .partentCheck { 332 .partentCheck {
334 width: 16px; 333 width: 16px;
335 height: 16px; 334 height: 16px;
336 border-radius: 22px; 335 border-radius: 22px;
337 border: 1px solid #cfcfcf; 336 border: 1px solid #cfcfcf;
338 background-color: #ffffff; 337 background-color: #ffffff;
339 margin: 24rpx 12rpx 24rpx 24rpx; 338 margin: 24rpx 12rpx 24rpx 24rpx;
340 } 339 }
341 .partentChecked { 340 .partentChecked {
342 width: 18px; 341 width: 18px;
343 height: 18px; 342 height: 18px;
344 border-radius: 22px; 343 border-radius: 22px;
345 background-color: #ff6b4a; 344 background-color: #ff6b4a;
346 margin: 24rpx 12rpx 24rpx 24rpx; 345 margin: 24rpx 12rpx 24rpx 24rpx;
347 .correct { 346 .correct {
348 display: inline-block; 347 display: inline-block;
349 position: relative; 348 position: relative;
350 width: 10rpx; 349 width: 10rpx;
351 height: 2rpx; 350 height: 2rpx;
352 background: #ffffff; 351 background: #ffffff;
353 line-height: 0; 352 line-height: 0;
354 font-size: 0; 353 font-size: 0;
355 position: relative; 354 position: relative;
356 top: -7px; 355 top: -7px;
357 left: 4px; 356 left: 4px;
358 -webkit-transform: rotate(45deg); 357 -webkit-transform: rotate(45deg);
359 } 358 }
360 .correct:after { 359 .correct:after {
361 content: "/"; 360 content: "/";
362 display: block; 361 display: block;
363 width: 16rpx; 362 width: 16rpx;
364 height: 2rpx; 363 height: 2rpx;
365 background: #ffffff; 364 background: #ffffff;
366 -webkit-transform: rotate(-90deg) translateY(50%) translateX(50%); 365 -webkit-transform: rotate(-90deg) translateY(50%) translateX(50%);
367 } 366 }
368 } 367 }
369 368
370 .card { 369 .card {
371 background-color: #ffffff; 370 background-color: #ffffff;
372 border-radius: 16rpx; 371 border-radius: 16rpx;
373 box-sizing: border-box; 372 box-sizing: border-box;
374 padding: 36rpx 36rpx 36rpx 18rpx; 373 padding: 36rpx 36rpx 36rpx 18rpx;
375 display: flex; 374 display: flex;
376 flex-direction: column; 375 flex-direction: column;
377 align-items: center; 376 align-items: center;
378 justify-content: space-between; 377 justify-content: space-between;
379 margin-bottom: 180rpx; 378 margin-bottom: 180rpx;
380 .cardHeader { 379 .cardHeader {
381 width: 100%; 380 width: 100%;
382 height: 36rpx; 381 height: 36rpx;
383 display: flex; 382 display: flex;
384 align-items: center; 383 align-items: center;
385 justify-content: flex-start; 384 justify-content: flex-start;
386 margin-bottom: 20rpx; 385 margin-bottom: 20rpx;
387 image { 386 image {
388 height: 32rpx; 387 height: 32rpx;
389 width: 32rpx; 388 width: 32rpx;
390 padding-left: 6px; 389 padding-left: 6px;
391 padding-right: 10px; 390 padding-right: 10px;
392 } 391 }
393 text { 392 text {
394 // font-family: PingFangSC-Regular; 393 // font-family: PingFangSC-Regular;
395 font-size: 14px; 394 font-size: 14px;
396 color: #333333; 395 color: #333333;
397 letter-spacing: -0.26px; 396 letter-spacing: -0.26px;
398 } 397 }
399 } 398 }
400 .cardBody { 399 .cardBody {
401 width: 100%; 400 width: 100%;
402 min-height: 300rpx; 401 min-height: 300rpx;
403 display: flex; 402 display: flex;
404 align-items: center; 403 align-items: center;
405 justify-content: space-between; 404 justify-content: space-between;
406 .goodInfo { 405 .goodInfo {
407 width: 390rpx; 406 width: 390rpx;
408 display: flex; 407 display: flex;
409 flex-direction: row; 408 flex-direction: row;
410 justify-content: flex-start; 409 justify-content: flex-start;
411 padding-left: 6px; 410 padding-left: 6px;
412 411
413 .imageWrap { 412 .imageWrap {
414 height: 188rpx; 413 height: 188rpx;
415 width: 188rpx; 414 width: 188rpx;
416 margin-right: 28rpx; 415 margin-right: 28rpx;
417 416
418 image { 417 image {
419 border-radius: 4px; 418 border-radius: 4px;
420 height: 188rpx; 419 height: 188rpx;
421 width: 188rpx; 420 width: 188rpx;
422 } 421 }
423 } 422 }
424 .infoRight { 423 .infoRight {
425 display: flex; 424 display: flex;
426 flex-direction: column; 425 flex-direction: column;
427 align-items: flex-start; 426 align-items: flex-start;
428 justify-content: space-between; 427 justify-content: space-between;
429 min-height: 240rpx; 428 min-height: 240rpx;
430 width: 100%; 429 width: 100%;
431 .goodName { 430 .goodName {
432 display: -webkit-box; 431 display: -webkit-box;
433 -webkit-box-orient: vertical; 432 -webkit-box-orient: vertical;
434 -webkit-line-clamp: 2; 433 -webkit-line-clamp: 2;
435 text-align: justify; 434 text-align: justify;
436 overflow: hidden; 435 overflow: hidden;
437 font-size: 28rpx; 436 font-size: 28rpx;
438 color: #333333; 437 color: #333333;
439 } 438 }
440 .describ { 439 .describ {
441 width: 100%; 440 width: 100%;
442 min-height: 80rpx; 441 min-height: 80rpx;
443 background: #f9f9f9; 442 background: #f9f9f9;
444 border-radius: 2px; 443 border-radius: 2px;
445 box-sizing: border-box; 444 box-sizing: border-box;
446 padding: 10rpx; 445 padding: 10rpx;
447 font-size: 20rpx; 446 font-size: 20rpx;
448 letter-spacing: -0.23px; 447 letter-spacing: -0.23px;
449 color: #999999; 448 color: #999999;
450 display: flex; 449 display: flex;
451 justify-content: space-between; 450 justify-content: space-between;
452 align-items: center; 451 align-items: center;
453 .desL { 452 .desL {
454 view { 453 view {
455 margin: 10rpx 0 10rpx 0; 454 margin: 10rpx 0 10rpx 0;
456 } 455 }
457 } 456 }
458 } 457 }
459 .priceBox { 458 .priceBox {
460 display: flex; 459 display: flex;
461 justify-content: space-between; 460 justify-content: space-between;
462 align-items: center; 461 align-items: center;
463 // margin-top: 26px; 462 // margin-top: 26px;
464 width: 100%; 463 width: 100%;
465 font-size: 14px; 464 font-size: 14px;
466 color: #999999; 465 color: #999999;
467 .maxCount { 466 .maxCount {
468 color: #999999; 467 color: #999999;
469 font-size: 20rpx; 468 font-size: 20rpx;
470 } 469 }
471 .price { 470 .price {
472 color: #ff6b4a; 471 color: #ff6b4a;
473 font-size: 28rpx; 472 font-size: 28rpx;
474 } 473 }
475 .counter { 474 .counter {
476 display: flex; 475 display: flex;
477 flex-direction: row; 476 flex-direction: row;
478 justify-content: space-between; 477 justify-content: space-between;
479 align-items: center; 478 align-items: center;
480 font-size: 28rpx; 479 font-size: 28rpx;
481 color: #333333; 480 color: #333333;
482 width: 122rpx; 481 width: 122rpx;
483 .btn { 482 .btn {
484 display: flex; 483 display: flex;
485 justify-content: center; 484 justify-content: center;
486 line-height: 32rpx; 485 line-height: 32rpx;
487 height: 32rpx; 486 height: 32rpx;
488 width: 32rpx; 487 width: 32rpx;
489 background-color: #f2f2f2; 488 background-color: #f2f2f2;
490 color: #cfcfcf; 489 color: #cfcfcf;
491 } 490 }
492 } 491 }
493 } 492 }
494 } 493 }
495 } 494 }
496 } 495 }
497 } 496 }
498 .footer { 497 .footer {
499 position: fixed; 498 position: fixed;
500 left: 0; 499 left: 0;
501 bottom: 0px; 500 bottom: 0px;
502 height: 112rpx; 501 height: 112rpx;
503 width: 100%; 502 width: 100%;
504 background-color: #ffffff; 503 background-color: #ffffff;
505 font-size: 16px; 504 font-size: 16px;
506 display: flex; 505 display: flex;
507 justify-content: space-between; 506 justify-content: space-between;
508 align-items: center; 507 align-items: center;
509 .footerLeft { 508 .footerLeft {
510 display: flex; 509 display: flex;
511 justify-content: center; 510 justify-content: center;
512 align-items: center; 511 align-items: center;
513 width: 50%; 512 width: 50%;
514 color: #333333; 513 color: #333333;
515 text { 514 text {
516 color: #ff6b4a; 515 color: #ff6b4a;
517 } 516 }
518 } 517 }
519 .footerRight { 518 .footerRight {
520 display: flex; 519 display: flex;
521 justify-content: flex-end; 520 justify-content: flex-end;
522 align-items: center; 521 align-items: center;
523 width: 50%; 522 width: 50%;
524 margin-right: 26rpx; 523 margin-right: 26rpx;
525 .paybtn { 524 .paybtn {
526 display: flex; 525 display: flex;
527 justify-content: center; 526 justify-content: center;
528 align-items: center; 527 align-items: center;
529 background: #ff6b4a; 528 background: #ff6b4a;
530 border-radius: 20px; 529 border-radius: 20px;
531 border-radius: 20px; 530 border-radius: 20px;
532 color: #ffffff; 531 color: #ffffff;
533 width: 204rpx; 532 width: 204rpx;
534 height: 80rpx; 533 height: 80rpx;
535 } 534 }
536 } 535 }
537 } 536 }
538 } 537 }
539 /* 隐藏滚动条 */ 538 /* 隐藏滚动条 */
540 ::-webkit-scrollbar { 539 ::-webkit-scrollbar {
541 width: 0; 540 width: 0;
542 height: 0; 541 height: 0;
543 color: transparent; 542 color: transparent;
544 } 543 }