吉鹏 / gulu-vue

Download as
Browse Code »

Commit 9c990fb492ccaea5962a8a68e2a6685d2383b686

Authored by 喻鹏
1 parent 5638d36da2
Exists in master

修改购物车

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