刘文博 / gulu-vue

Download as
Browse Code »

Commit 15af636b407efe77a91634b3b7e4d90bfb4fbc85

Authored by BigBoss
1 parent e9b87ccef5
Exists in master

购物车逻辑

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