刘文博 / gulu-vue

Download as
Browse Code »

Commit 7c4ec59325b629f638f08521c15c700cf85a8aad

Authored by BigBoss
1 parent 6cba581301
Exists in master

修改逻辑

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