吉鹏 / gulu-vue

Compare View

switch
from
...
to
 
Commits (2)
Showing 1 changed file   Show diff stats
src/pages/cart/cart.vue
Diff comments   View file @43f318e
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="index" 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" style="justify-content: space-around;width: 196px;"> 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[0].label+'/'+item.tag.prod_tag_fun[1].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 },
137
138 counter(index, isadd, item) {
139 // console.log('===>>counter ===>num',num)
140 // console.log('===>>counter ===>isadd',isadd)
141 console.log('item=====>',item)
142 console.log('num=====>',item.num)
143 let nums = parseInt(item.num)
144 if (isadd) {
145 if (nums >= this.maxCount) {
146 this.addDisabled = true
147 } else {
148 this.addDisabled = true
149 // 修改num
150 if (this.childIsOpen[index]) {
151 this.totalPrice = this.totalPrice + this.$store.state.cart.cartList[index].nowPrice
152 }
153 store.dispatch('cart/modiCart', {
154 uid: this.$store.state.user.userInfo.uid,
155 openid: this.$store.state.user.userInfo.openid,
156 mp_id: item.mp_id,
157 sk_id: item.sk_id,
158 price: item.nowPrice,
159 pid: item.pid,
160 num: nums + 1,
161 cart_id: item.cart_id,
162 args: {
163 index: index,
164 isadd: isadd
165 }
166 })
167 this.addDisabled = false
168 }
169 } else {
170 if (nums <= 1) {
171 this.desDisabled = true
172 } else {
173 this.desDisabled = false
174 // post 请求修改相关参数
175 if (this.childIsOpen[index]) {
176 this.totalPrice = this.totalPrice - this.$store.state.cart.cartList[index].nowPrice
177 }
178 store.dispatch('cart/modiCart', {
179 uid: this.$store.state.user.userInfo.uid, 136 },
180 openid: this.$store.state.user.userInfo.openid, 137
181 mp_id: item.mp_id, 138 counter(index, isadd, item) {
182 sk_id: item.sk_id, 139 // console.log('===>>counter ===>num',num)
183 price: item.nowPrice, 140 // console.log('===>>counter ===>isadd',isadd)
184 pid: item.pid, 141 console.log('item=====>',item)
185 num: nums - 1, 142 console.log('num=====>',item.num)
186 cart_id: item.cart_id, 143 let nums = parseInt(item.num)
187 args: { 144 if (isadd) {
188 index: index, 145 if (nums >= this.maxCount) {
189 isadd: isadd 146 this.addDisabled = true
190 } 147 } else {
191 }) 148 this.addDisabled = true
192 this.desDisabled = true 149 // 修改num
193 } 150 if (this.childIsOpen[index]) {
194 } 151 this.totalPrice = this.totalPrice + this.$store.state.cart.cartList[index].nowPrice
195 // store.dispatch('cart/getCartList', { 152 }
196 // uid: this.$store.state.user.userInfo.uid // 用户id 153 store.dispatch('cart/modiCart', {
197 // }) 154 uid: this.$store.state.user.userInfo.uid,
198 }, 155 openid: this.$store.state.user.userInfo.openid,
199 156 mp_id: item.mp_id,
200 Change(isopen, indexC) { 157 sk_id: item.sk_id,
201 // console.log('lalla===>',isopen) 158 price: item.nowPrice,
202 this.childIsOpen[indexC] = !isopen 159 pid: item.pid,
203 if (!isopen) { 160 num: nums + 1,
204 this.totalPrice = this.totalPrice + (this.$store.state.cart.cartList[indexC].num * this.$store.state.cart.cartList[indexC].nowPrice) 161 cart_id: item.cart_id,
205 } else { 162 args: {
206 this.totalPrice = this.totalPrice - (this.$store.state.cart.cartList[indexC].num * this.$store.state.cart.cartList[indexC].nowPrice) 163 index: index,
207 } 164 isadd: isadd
208 let m = true 165 }
209 for (let i = 0; i < this.childIsOpen.length; i++) { 166 })
210 m = m & this.childIsOpen[i] 167 this.addDisabled = false
211 } 168 }
212 if (m == 1) { 169 } else {
213 this.pIsoPen = true 170 if (nums <= 1) {
214 } else { 171 this.desDisabled = true
215 this.pIsoPen = false 172 } else {
216 } 173 this.desDisabled = false
217 }, 174 // post 请求修改相关参数
218 pChange(isopen) { 175 if (this.childIsOpen[index]) {
219 this.pIsoPen = !isopen 176 this.totalPrice = this.totalPrice - this.$store.state.cart.cartList[index].nowPrice
220 for (let i = 0; i < this.childIsOpen.length; i++) { 177 }
221 this.childIsOpen[i] = !isopen 178 store.dispatch('cart/modiCart', {
222 } 179 uid: this.$store.state.user.userInfo.uid,
223 if (this.pIsoPen) { 180 openid: this.$store.state.user.userInfo.openid,
224 // 计算总价逻辑 181 mp_id: item.mp_id,
225 if (this.childIsOpen.length != 0) { 182 sk_id: item.sk_id,
226 for (let i = 0; i < this.childIsOpen.length; i++) { 183 price: item.nowPrice,
227 if (this.childIsOpen[i]) { 184 pid: item.pid,
228 this.totalPrice = this.totalPrice + (this.$store.state.cart.cartList[i].num * this.$store.state.cart.cartList[i].nowPrice) 185 num: nums - 1,
229 } 186 cart_id: item.cart_id,
230 } 187 args: {
231 } 188 index: index,
232 } else { 189 isadd: isadd
233 this.totalPrice = 0 190 }
234 } 191 })
235 }, 192 this.desDisabled = true
236 delCart(cart_id, index) { 193 }
237 // console.log('userInfo',this.$store.state.user.userInfo) 194 }
238 cart_id = parseInt(cart_id) 195 // store.dispatch('cart/getCartList', {
239 // console.log('delcart------>cart_id',cart_id) 196 // uid: this.$store.state.user.userInfo.uid // 用户id
240 // console.log('cartlist====>delcart',this.$store.state.cart.cartList) 197 // })
241 // console.log('delcart======>index',index) 198 },
242 const uid=this.$store.state.user.userInfo.uid 199
243 const openid=this.$store.state.user.userInfo.openid 200 Change(isopen, indexC) {
244 uni.showModal({ 201 // console.log('lalla===>',isopen)
245 title: '是否删除该商品', 202 this.childIsOpen[indexC] = !isopen
246 // content: '是否删除该商品', 203 if (!isopen) {
247 success: function (res) { 204 this.totalPrice = this.totalPrice + (this.$store.state.cart.cartList[indexC].num * this.$store.state.cart.cartList[indexC].nowPrice)
248 if (res.confirm) { 205 } else {
249 // this.$store.state.cart.cartList.splice(index,1) 206 this.totalPrice = this.totalPrice - (this.$store.state.cart.cartList[indexC].num * this.$store.state.cart.cartList[indexC].nowPrice)
250 store.dispatch('cart/delCart', { 207 }
251 uid: uid, 208 let m = true
252 openid: openid, 209 for (let i = 0; i < this.childIsOpen.length; i++) {
253 cart_id: cart_id, // 要修改的购物车id 210 m = m & this.childIsOpen[i]
254 arg: index // 由于action 传参是能接收两参数，因此将index放入对象 211 }
255 }) 212 if (m == 1) {
256 console.log('用户点击确定') 213 this.pIsoPen = true
257 } 214 } else {
258 } 215 this.pIsoPen = false
259 }) 216 }
260 } 217 },
261 } 218 pChange(isopen) {
262 } 219 this.pIsoPen = !isopen
263 </script> 220 for (let i = 0; i < this.childIsOpen.length; i++) {
264 221 this.childIsOpen[i] = !isopen
265 <style lang="scss"> 222 }
266 .content { 223 if (this.pIsoPen) {
267 min-height: 100vh; 224 // 计算总价逻辑
268 background-color: #f2f2f2; 225 if (this.childIsOpen.length != 0) {
269 display: flex; 226 for (let i = 0; i < this.childIsOpen.length; i++) {
270 flex-direction: column; 227 if (this.childIsOpen[i]) {
271 align-items: center; 228 this.totalPrice = this.totalPrice + (this.$store.state.cart.cartList[i].num * this.$store.state.cart.cartList[i].nowPrice)
272 justify-content: space-between; 229 }
273 padding: 20rpx 40rpx; 230 }
274 box-sizing: border-box; 231 }
275 232 } else {
276 .partentCheck{ 233 this.totalPrice = 0
277 width: 16px; 234 }
278 height: 16px; 235 },
279 border-radius: 22px; 236 delCart(cart_id, index) {
280 border: 1px solid #CFCFCF; 237 // console.log('userInfo',this.$store.state.user.userInfo)
281 background-color: #FFFFFF; 238 cart_id = parseInt(cart_id)
282 margin: 6px; 239 // console.log('delcart------>cart_id',cart_id)
283 } 240 // console.log('cartlist====>delcart',this.$store.state.cart.cartList)
284 .partentChecked{ 241 // console.log('delcart======>index',index)
285 width: 18px; 242 const uid=this.$store.state.user.userInfo.uid
286 height: 18px; 243 const openid=this.$store.state.user.userInfo.openid
287 border-radius: 22px; 244 uni.showModal({
288 background-color: #FF6B4A; 245 title: '是否删除该商品',
289 margin: 6px; 246 // content: '是否删除该商品',
290 .correct { 247 success: function (res) {
291 display: inline-block; 248 if (res.confirm) {
292 position: relative; 249 // this.$store.state.cart.cartList.splice(index,1)
293 width: 10rpx; 250 store.dispatch('cart/delCart', {
294 height: 2rpx; 251 uid: uid,
295 background: #FFFFFF; 252 openid: openid,
296 line-height: 0; 253 cart_id: cart_id, // 要修改的购物车id
297 font-size: 0; 254 arg: index // 由于action 传参是能接收两参数，因此将index放入对象
298 position: relative; 255 })
299 top: -7px; 256 console.log('用户点击确定')
300 left: 4px; 257 }
301 -webkit-transform: rotate(45deg); 258 }
302 } 259 })
303 .correct:after { 260 }
304 content: '/'; 261 }
305 display: block; 262 }
306 width: 16rpx; 263 </script>
307 height: 2rpx; 264
308 background: #FFFFFF; 265 <style lang="scss">
309 -webkit-transform: rotate(-90deg) translateY(50%) translateX(50%); 266 .content {
310 } 267 min-height: 100vh;
311 } 268 background-color: #f2f2f2;
312 269 display: flex;
313 .card{ 270 flex-direction: column;
314 background-color: #FFFFFF; 271 align-items: center;
315 border-radius: 16rpx; 272 justify-content: space-between;
316 box-sizing: border-box; 273 padding: 20rpx 40rpx;
317 padding: 36rpx 36rpx 36rpx 18rpx; 274 box-sizing: border-box;
318 display: flex; 275
319 flex-direction: column; 276 .partentCheck{
320 align-items: center; 277 width: 16px;
321 justify-content: space-between; 278 height: 16px;
322 margin-bottom: 180rpx; 279 border-radius: 22px;
323 .cardHeader{ 280 border: 1px solid #CFCFCF;
324 width: 100%; 281 background-color: #FFFFFF;
325 height: 36rpx; 282 margin: 6px;
326 display: flex; 283 }
327 align-items: center; 284 .partentChecked{
328 justify-content: flex-start; 285 width: 18px;
329 margin-bottom: 20rpx; 286 height: 18px;
330 image{ 287 border-radius: 22px;
331 height: 32rpx; 288 background-color: #FF6B4A;
332 width: 32rpx; 289 margin: 6px;
333 padding-left: 6px; 290 .correct {
334 padding-right: 10px; 291 display: inline-block;
335 } 292 position: relative;
336 text{ 293 width: 10rpx;
337 // font-family: PingFangSC-Regular; 294 height: 2rpx;
338 font-size: 14px; 295 background: #FFFFFF;
339 color: #333333; 296 line-height: 0;
340 letter-spacing: -0.26px; 297 font-size: 0;
341 } 298 position: relative;
342 } 299 top: -7px;
343 .cardBody{ 300 left: 4px;
344 width: 100%; 301 -webkit-transform: rotate(45deg);
345 min-height: 300rpx; 302 }
346 display: flex; 303 .correct:after {
347 align-items: center; 304 content: '/';
348 justify-content: space-between; 305 display: block;
349 .goodInfo{ 306 width: 16rpx;
350 width: 390rpx; 307 height: 2rpx;
351 display: flex; 308 background: #FFFFFF;
352 flex-direction: row; 309 -webkit-transform: rotate(-90deg) translateY(50%) translateX(50%);
353 justify-content: flex-start; 310 }
354 padding-left: 6px; 311 }
355 312
356 .imageWrap{ 313 .card{
357 height: 188rpx; 314 background-color: #FFFFFF;
358 width: 188rpx; 315 border-radius: 16rpx;
359 margin-right: 28rpx; 316 box-sizing: border-box;
360 317 padding: 36rpx 36rpx 36rpx 18rpx;
361 image{ 318 display: flex;
362 border-radius: 4px; 319 flex-direction: column;
363 height: 188rpx; 320 align-items: center;
364 width: 188rpx; 321 justify-content: space-between;
365 } 322 margin-bottom: 180rpx;
366 } 323 .cardHeader{
367 .infoRight{ 324 width: 100%;
368 display: flex; 325 height: 36rpx;
369 flex-direction: column; 326 display: flex;
370 align-items: flex-start; 327 align-items: center;
371 justify-content: space-between; 328 justify-content: flex-start;
372 min-height: 240rpx; 329 margin-bottom: 20rpx;
373 .goodName{ 330 image{
374 display: -webkit-box; 331 height: 32rpx;
375 -webkit-box-orient: vertical; 332 width: 32rpx;
376 -webkit-line-clamp: 2; 333 padding-left: 6px;
377 text-align: justify; 334 padding-right: 10px;
378 overflow: hidden; 335 }
379 font-size: 28rpx; 336 text{
380 color: #333333; 337 // font-family: PingFangSC-Regular;
381 } 338 font-size: 14px;
382 .describ{ 339 color: #333333;
383 width: 100%; 340 letter-spacing: -0.26px;
384 // min-height: 80rpx; 341 }
385 // box-sizing: border-box; 342 }
386 // padding: 10rpx; 343 .cardBody{
387 font-size: 20rpx; 344 width: 100%;
388 letter-spacing: -0.23px; 345 min-height: 300rpx;
389 text-align: justify; 346 display: flex;
390 color: #999999; 347 align-items: center;
391 // background: #F9F9F9; 348 justify-content: space-between;
392 // display: flex; 349 .goodInfo{
393 // justify-content: center; 350 width: 390rpx;
394 // align-items: center; 351 display: flex;
395 // text{ 352 flex-direction: row;
396 // text-overflow: -o-ellipsis-lastline; 353 justify-content: flex-start;
397 // overflow: hidden; 354 padding-left: 6px;
398 // text-overflow: ellipsis; 355
399 // display: -webkit-box; 356 .imageWrap{
400 // -webkit-line-clamp: 2; 357 height: 188rpx;
401 // line-clamp: 2; 358 width: 188rpx;
402 // -webkit-box-orient: vertical; 359 margin-right: 28rpx;
403 // } 360
404 // .icon { 361 image{
405 // width: 0; 362 border-radius: 4px;
406 // height: 0; 363 height: 188rpx;
407 // border-left: 5px transparent; 364 width: 188rpx;
408 // border-right: 5px transparent; 365 }
409 // border-top: 5px #979797; 366 }
410 // border-bottom: 0 transparent; 367 .infoRight{
411 // border-style: solid; 368 display: flex;
412 // position: relative; 369 flex-direction: column;
413 // margin-left: 10px; 370 align-items: flex-start;
414 // // transform: scaleY(-1); 371 justify-content: space-between;
415 // } 372 min-height: 240rpx;
416 // .icon::after{ 373 .goodName{
417 // content: ''; 374 display: -webkit-box;
418 // position: absolute; 375 -webkit-box-orient: vertical;
419 // top: -6.5px; 376 -webkit-line-clamp: 2;
420 // left: -5px; 377 text-align: justify;
421 // border-left: 5px transparent; 378 overflow: hidden;
422 // border-right: 5px transparent; 379 font-size: 28rpx;
423 // border-top: 5px #FFFFFF; 380 color: #333333;
424 // border-bottom: 0 transparent; 381 }
425 // border-style: solid; 382 .describ{
426 // } 383 width: 100%;
427 } 384 // min-height: 80rpx;
428 .priceBox{ 385 // box-sizing: border-box;
429 display: flex; 386 // padding: 10rpx;
430 justify-content: space-between; 387 font-size: 20rpx;
431 align-items: center; 388 letter-spacing: -0.23px;
432 // margin-top: 26px; 389 text-align: justify;
433 width: 100%; 390 color: #999999;
434 font-size: 14px; 391 // background: #F9F9F9;
435 color: #999999; 392 // display: flex;
436 .maxCount{ 393 // justify-content: center;
437 color: #999999; 394 // align-items: center;
438 font-size: 24rpx; 395 // text{
439 } 396 // text-overflow: -o-ellipsis-lastline;
440 .price{ 397 // overflow: hidden;
441 color: #FF6B4A; 398 // text-overflow: ellipsis;
442 font-size: 28rpx; 399 // display: -webkit-box;
443 } 400 // -webkit-line-clamp: 2;
444 .counter{ 401 // line-clamp: 2;
445 display: flex; 402 // -webkit-box-orient: vertical;
446 flex-direction: row; 403 // }
447 justify-content: space-between; 404 // .icon {
448 align-items: center; 405 // width: 0;
449 font-size: 28rpx; 406 // height: 0;
450 color: #333333; 407 // border-left: 5px transparent;
451 width: 122rpx; 408 // border-right: 5px transparent;
452 .btn{ 409 // border-top: 5px #979797;
453 display: flex; 410 // border-bottom: 0 transparent;
454 justify-content: center; 411 // border-style: solid;
455 line-height: 32rpx; 412 // position: relative;
456 height: 32rpx; 413 // margin-left: 10px;
457 width: 32rpx; 414 // // transform: scaleY(-1);
458 background-color: #F2F2F2; 415 // }
459 color: #CFCFCF; 416 // .icon::after{
460 } 417 // content: '';
461 } 418 // position: absolute;
462 } 419 // top: -6.5px;
463 } 420 // left: -5px;
464 } 421 // border-left: 5px transparent;
465 } 422 // border-right: 5px transparent;
466 } 423 // border-top: 5px #FFFFFF;
467 424 // border-bottom: 0 transparent;
468 .footer{ 425 // border-style: solid;
469 position: fixed; 426 // }
470 left: 0; 427 }
471 bottom: 0px; 428 .priceBox{
472 height: 112rpx; 429 display: flex;
473 width: 100%; 430 justify-content: space-between;
474 background-color: #FFFFFF; 431 align-items: center;
475 font-size: 16px; 432 // margin-top: 26px;
476 display: flex; 433 width: 100%;
477 justify-content: space-between; 434 font-size: 14px;
478 align-items: center; 435 color: #999999;
479 .footerLeft{ 436 .maxCount{
480 display: flex; 437 color: #999999;
481 justify-content: center; 438 font-size: 24rpx;
482 align-items: center; 439 }
483 width: 50%; 440 .price{
484 color: #333333; 441 color: #FF6B4A;
485 text{ 442 font-size: 28rpx;
486 color: #FF6B4A; 443 }
487 } 444 .counter{
488 } 445 display: flex;
489 .footerRight{ 446 flex-direction: row;
490 display: flex; 447 justify-content: space-between;
491 justify-content: flex-end; 448 align-items: center;
492 align-items: center; 449 font-size: 28rpx;
493 width: 50%; 450 color: #333333;
494 margin-right: 26rpx; 451 width: 122rpx;
495 .paybtn{ 452 .btn{
496 display: flex; 453 display: flex;
497 justify-content: center; 454 justify-content: center;
498 align-items: center; 455 line-height: 32rpx;
499 background: #FF6B4A; 456 height: 32rpx;
500 border-radius: 20px; 457 width: 32rpx;
501 border-radius: 20px; 458 background-color: #F2F2F2;
502 color: #FFFFFF; 459 color: #CFCFCF;
503 width: 204rpx; 460 }
504 height: 80rpx; 461 }
505 } 462 }
506 } 463 }
507 464 }
508 } 465 }
509 } 466 }
510 467
511 </style> 468 .footer{
512 469 position: fixed;