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