487 lines
12 KiB
Vue
487 lines
12 KiB
Vue
<template>
|
|
<div>
|
|
<div class="top-title">
|
|
<span>购物车</span>
|
|
<span style="position:absolute;right:20rpx;font-size:24rpx;padding:0 10rpx;line-height:36rpx;" @click="deleteAllChoese">删除</span>
|
|
</div>
|
|
<div class="shop-cart">
|
|
<view
|
|
v-for="item in cateList"
|
|
class="food-grouping"
|
|
:key="item.USERDEFINEDTYPE_ID"
|
|
:id="'catGood_'+item.USERDEFINEDTYPE_ID"
|
|
>
|
|
<view class="goodlist-title">{{item.USERDEFINEDTYPE_NAME}}</view>
|
|
<van-checkbox-group :value="checkGoodIds" @change="choeseGoods">
|
|
<div class="foods-item" v-for="(good,s) in cateGoods[item.USERDEFINEDTYPE_NAME]" :key="s">
|
|
|
|
<van-swipe-cell :right-width="65">
|
|
<van-cell-group>
|
|
<view class="content">
|
|
<van-checkbox :name="good.COMMODITY_ID" checked-color="#c78249"></van-checkbox>
|
|
<image class="good-img" mode="aspectFit" lazy-load="true" :src="good.DEFAULT_IMG || 'https://eshangtech.com/ShopICO/no-picture.png'"></image>
|
|
<view class="detail-price">
|
|
<text class="title">{{good.COMMODITY_NAME}}</text>
|
|
<view class="cartcontrol-wrap">
|
|
|
|
<view>
|
|
<view class="price">
|
|
<span class="unit">¥</span>
|
|
{{(user.ISPLUS === 1 || user.MEMBERSHIP_TYPE === 3000) ? good.COMMODITY_MEMBERPRICE :good.COMMODITY_RETAILPRICE}}
|
|
</view>
|
|
<span style="font-size:24rpx;" v-if="good.COMMODITY_UNIT">/ {{good.COMMODITY_UNIT}}</span>
|
|
</view>
|
|
<!--加减器-->
|
|
|
|
<view class="cartcontrol">
|
|
<span
|
|
v-if="good.count>1"
|
|
@click="reducCount(good)"
|
|
class="cart-decrease"
|
|
:id="'decrease_'+good.COMMODITY_ID+'_'+good.USERDEFINEDTYPE_ID"
|
|
></span>
|
|
<span
|
|
v-else
|
|
@click="del(good)"
|
|
class="cart-decrease"
|
|
:id="'decrease_'+good.COMMODITY_ID+'_'+good.USERDEFINEDTYPE_ID"
|
|
></span>
|
|
<input class="cart-count" type="digit" maxlength="6" v-model="good.count" @blur="chang($event,good)">
|
|
|
|
<span
|
|
@click="addCount(good,item)"
|
|
:id="'add_'+good.COMMODITY_ID+'_'+good.USERDEFINEDTYPE_ID"
|
|
class="cart-add icon-add_circle"
|
|
></span>
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</van-cell-group>
|
|
<view class="right-delt" slot="right" @click="del(good)">删除</view>
|
|
</van-swipe-cell>
|
|
</div>
|
|
</van-checkbox-group>
|
|
</view>
|
|
<van-dialog id="van-dialog" />
|
|
|
|
<van-submit-bar :price="getTotal*100" button-text="去结算" @submit="onSubmit" :disabled='checkGoodIds.length===0' button-class="sub-btn">
|
|
<div style="padding-left:30rpx;">
|
|
|
|
<van-checkbox :value="isAllChoese" @change="choeseAll" checked-color="#c78249" > 全选</van-checkbox>
|
|
</div>
|
|
</van-submit-bar>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapMutations, mapGetters, mapActions } from 'vuex'
|
|
// import Dialog from '/static/vant/dialog/dialog'
|
|
export default {
|
|
data () {
|
|
return {
|
|
isAllChoese: true,
|
|
isChangeChecked: 0,
|
|
checkGoodIds: []
|
|
}
|
|
},
|
|
components:[Dialog],
|
|
computed: {
|
|
...mapGetters(['user']),
|
|
...mapGetters('shoppingCart', {
|
|
goodsList: 'goodList',
|
|
orderTotal: 'totalPrice',
|
|
plusPrice: 'plusPrice',
|
|
totalNum: 'goodNum',
|
|
cateGoods: 'cateGoods',
|
|
cateList: 'cateList'
|
|
}),
|
|
allGoodIds () {
|
|
let s = []
|
|
this.goodsList.map(el => { s.push(el.COMMODITY_ID + '') })
|
|
return s
|
|
},
|
|
getTotal () {
|
|
let total = 0
|
|
if (this.totalNum > 0) {
|
|
let _pName = (this.user.ISPLUS === 1 || this.user.MEMBERSHIP_TYPE === 3000) ? 'COMMODITY_MEMBERPRICE' : 'COMMODITY_RETAILPRICE'
|
|
this.goodsList.map(n => {
|
|
if (n.isCheck && n.count) {
|
|
total += Number(n.count * n[_pName])
|
|
}
|
|
})
|
|
|
|
// return Math.round(total * 100) / 100 || 0
|
|
if (this.isChangeChecked) {
|
|
return Math.round(total * 100) / 100 || 0
|
|
// return this.user.ISPLUS === 1 ? this.plusPrice : this.orderTotal
|
|
}
|
|
} else {
|
|
return 0.00
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
...mapMutations('shoppingCart', {
|
|
// setNum: 'GOODNUM',
|
|
changeCount: 'CHANGSHOPCART',
|
|
delProduct: 'DELSHOPCART',
|
|
setOrder: 'ORDERGOOD'
|
|
// setBadge: 'SETBADGE'
|
|
}),
|
|
...mapActions('shoppingCart', {
|
|
add: 'ADDGOOD',
|
|
addCate: 'ADDCATE',
|
|
reduce: 'REDGOOD',
|
|
remove: 'REMOVEGOOD',
|
|
change: 'CHANGCOUNT',
|
|
deleteChoese: 'DELTCHOESE'
|
|
|
|
}),
|
|
chang (e, good) {
|
|
if (e.mp.detail.value > 999) {
|
|
mpvue.showToast({
|
|
title: '采购数量为 0.1 ~ 999。小数不可超过两位。',
|
|
icon: 'none',
|
|
success: () => {
|
|
good.count = 999
|
|
this.change(good)
|
|
this.$forceUpdate()
|
|
}
|
|
})
|
|
|
|
return false
|
|
}
|
|
if (e.mp.detail.value > 0) {
|
|
// console.log(e.mp.detail.value)
|
|
good.count = Number(e.mp.detail.value)
|
|
this.change(good)
|
|
this.$forceUpdate()
|
|
} else {
|
|
good.count = 1
|
|
this.change(good)
|
|
this.$forceUpdate()
|
|
}
|
|
|
|
// mpvue.setTabBarBadge({
|
|
// index: 1,
|
|
// text: this.totalNum + ''
|
|
// })
|
|
},
|
|
|
|
reducCount (good) {
|
|
this.reduce(good)
|
|
this.$forceUpdate()
|
|
// mpvue.setTabBarBadge({
|
|
// index: 1,
|
|
// text: this.totalNum + ''
|
|
// })
|
|
},
|
|
addCount (good, item) {
|
|
this.add(good)
|
|
this.addCate(item)
|
|
this.$forceUpdate()
|
|
// mpvue.setTabBarBadge({
|
|
// index: 1,
|
|
// text: this.totalNum + ''
|
|
// })
|
|
},
|
|
choeseGoods (e) {
|
|
if (e) {
|
|
this.checkGoodIds = e.mp.detail
|
|
}
|
|
|
|
// let s = []
|
|
// let priceName = this.user.ISPLUS === 1 ? 'COMMODITY_MEMBERPRICE' : 'COMMODITY_RETAILPRICE'
|
|
this.goodsList.map(n => {
|
|
if (this.checkGoodIds.indexOf(n.COMMODITY_ID + '') > -1) {
|
|
// n.AVERAGE_PRICE = Number(n.count * n[priceName]).toFixed(2)
|
|
n.isCheck = true
|
|
// s.push(n)
|
|
} else {
|
|
n.isCheck = false
|
|
}
|
|
})
|
|
// this.setOrder(s)
|
|
if (this.checkGoodIds.length === this.allGoodIds.length) {
|
|
this.isAllChoese = true
|
|
} else {
|
|
this.isAllChoese = false
|
|
}
|
|
this.isChangeChecked += 1
|
|
},
|
|
choeseAll (e) {
|
|
this.isAllChoese = e.mp.detail
|
|
if (e.mp.detail) {
|
|
this.checkGoodIds = this.allGoodIds
|
|
this.goodsList.map(n => {
|
|
n.isCheck = true
|
|
})
|
|
} else {
|
|
this.checkGoodIds = []
|
|
this.goodsList.map(n => {
|
|
n.isCheck = false
|
|
})
|
|
}
|
|
this.isChangeChecked += 1
|
|
},
|
|
del (item) {
|
|
Dialog.confirm({
|
|
title: '温馨提示',
|
|
message: '您确定移除该商品吗？'
|
|
}).then(() => {
|
|
this.remove(item)
|
|
}).catch(() => {
|
|
// on cancel
|
|
})
|
|
},
|
|
deleteAllChoese () {
|
|
let _this = this
|
|
Dialog.confirm({
|
|
title: '温馨提示',
|
|
message: '您确定移除选中的商品吗？'
|
|
}).then(() => {
|
|
if (_this.checkGoodIds.length > 0) {
|
|
_this.deleteChoese(_this.checkGoodIds)
|
|
_this.checkGoodIds = []
|
|
} else {
|
|
mpvue.showToast({
|
|
title: '请选择需要删除的商品',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
}).catch(() => {
|
|
// on cancel
|
|
})
|
|
},
|
|
|
|
onSubmit () {
|
|
let _this = this
|
|
if (_this.checkGoodIds.length === 0) {
|
|
return false
|
|
}
|
|
let s = []
|
|
|
|
// _this.goodsList.map(n => {
|
|
// if (_this.checkGoodIds.indexOf(n.COMMODITY_ID + '') > -1) {
|
|
// n.AVERAGE_PRICE = Number(n.count * n.COMMODITY_RETAILPRICE).toFixed(2)
|
|
// s.push(n)
|
|
// }
|
|
// })
|
|
let priceName = (this.user.ISPLUS === 1 || this.user.MEMBERSHIP_TYPE === 3000) ? 'COMMODITY_MEMBERPRICE' : 'COMMODITY_RETAILPRICE'
|
|
this.goodsList.map(el => {
|
|
if (_this.checkGoodIds.indexOf(el.COMMODITY_ID + '') > -1) {
|
|
s.push({
|
|
COMMODITY_ID: el.COMMODITY_ID,
|
|
COMMODITY_CODE: el.COMMODITY_CODE,
|
|
COMMODITY_NAME: el.COMMODITY_NAME,
|
|
COMMODITY_BARCODE: el.COMMODITY_BARCODE,
|
|
COMMODITY_UNIT: el.COMMODITY_UNIT,
|
|
COMMODITY_RULE: el.COMMODITY_RULE,
|
|
ORDER_COUNT: el.count,
|
|
AVERAGE_PRICE: el[priceName],
|
|
ORDER_AMOUNT: el[priceName] * el.count,
|
|
DISCOUNT_AMOUNT: 0,
|
|
SUPPLIER_ID: el.SUPPLIER_ID,
|
|
SUPPLIER_NAME: el.SUPPLIER_NAME,
|
|
DEFAULT_IMG: el.DEFAULT_IMG
|
|
})
|
|
}
|
|
})
|
|
_this.setOrder(s)
|
|
mpvue.navigateTo({url: '/pages/product/confirmOrder/main'})
|
|
}
|
|
},
|
|
onShow () {
|
|
this.checkGoodIds = this.allGoodIds
|
|
this.choeseGoods()
|
|
// this.setBadge(this.totalNum)
|
|
// mpvue.setTabBarBadge({
|
|
// index: 1,
|
|
// text: this.totalNum + ''
|
|
// })
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="stylus" scoped>
|
|
.top-title
|
|
background-color #ffffff
|
|
display flex
|
|
justify-content center
|
|
padding 16rpx 0
|
|
font-size 28rpx
|
|
position fixed
|
|
width 100%
|
|
z-index 1
|
|
.shop-cart
|
|
background #f8f8f8
|
|
padding 94rpx 24rpx 120rpx 24rpx
|
|
height 100%
|
|
|
|
.food-grouping +.food-grouping
|
|
margin-top 24rpx
|
|
|
|
|
|
.food-grouping
|
|
background-color #ffffff
|
|
border-radius 12rpx
|
|
padding 16rpx
|
|
|
|
.goodlist-title
|
|
font-size: 28rpx;
|
|
border-bottom: 1rpx solid #f7f7f7;
|
|
line-height: 56rpx;
|
|
height: 56rpx;
|
|
|
|
|
|
.foods-item
|
|
margin 24rpx 0
|
|
padding-left 16rpx
|
|
background #fff
|
|
border-radius 12rpx
|
|
overflow hidden
|
|
|
|
.foods-item + .foods-item
|
|
border-top: 1rpx solid #f7f7f7;
|
|
|
|
|
|
|
|
.good-img
|
|
margin-left 12rpx
|
|
width 180rpx
|
|
height 180rpx
|
|
|
|
|
|
.foods-item .icon
|
|
display inline-block
|
|
width 100%
|
|
height 180rpx
|
|
margin-right 16rpx
|
|
border-radius 4rpx
|
|
|
|
.detail-price
|
|
flex 1
|
|
display flex
|
|
flex-direction column
|
|
justify-content space-between
|
|
padding 32rpx 32rpx 32rpx 8rpx
|
|
|
|
.foods-item .title {
|
|
display: block;
|
|
color: #464245;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.foods-item .content
|
|
display flex
|
|
justify-content space-between
|
|
// margin-top: 16rpx;
|
|
align-items center
|
|
|
|
|
|
.foods-item .price
|
|
font-size 32rpx
|
|
color #e75534
|
|
font-weight bolder
|
|
display inline
|
|
|
|
.foods-item .price .unit
|
|
font-size 24rpx
|
|
|
|
.cartcontrol-wrap
|
|
margin-top 16rpx
|
|
display flex
|
|
justify-content space-between
|
|
|
|
.cartcontrol
|
|
display flex
|
|
align-items center
|
|
justify-content flex-end
|
|
|
|
|
|
.cart-decrease {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
border: 2rpx solid #eee;
|
|
position: relative;
|
|
border-radius: 50%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.cart-decrease:before {
|
|
content: '';
|
|
height: 4rpx;
|
|
width: 25rpx;
|
|
background: #4d4d4d;
|
|
display: block;
|
|
position: absolute;
|
|
left: 11rpx;
|
|
top: 21rpx;
|
|
border-radius: 4rpx;
|
|
}
|
|
|
|
.cart-count {
|
|
width: 80rpx;
|
|
min-height: 48rpx;
|
|
height: 48rpx;
|
|
border: 1rpx solid #e6e6e6;
|
|
border-radius: 8rpx;
|
|
margin: 0 16rpx;
|
|
padding-left: 4rpx;
|
|
font-size: 24rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.cart-add
|
|
width 48rpx
|
|
height 48rpx
|
|
border 2rpx solid #e6e6e6
|
|
position relative
|
|
border-radius 50%
|
|
box-sizing border-box
|
|
|
|
.right-delt
|
|
font-size 28rpx
|
|
background-color #f44
|
|
color #fff
|
|
width 110rpx
|
|
height 100%
|
|
line-height 178rpx
|
|
margin-left 16rpx
|
|
text-align center
|
|
border-radius 0 12rpx 12rpx 0
|
|
|
|
.cart-add-hover {
|
|
background: #f8f8f8;
|
|
}
|
|
|
|
.cart-add:before {
|
|
content: '';
|
|
height: 4rpx;
|
|
width: 25rpx;
|
|
background: #4d4d4d;
|
|
display: block;
|
|
position: absolute;
|
|
left: 11rpx;
|
|
top: 21rpx;
|
|
border-radius: 4rpx;
|
|
}
|
|
|
|
.cart-add:after
|
|
content: '';
|
|
height: 25rpx;
|
|
width: 4rpx;
|
|
background: #4d4d4d;
|
|
display: block;
|
|
position: absolute;
|
|
top: 11rpx;
|
|
left: 21rpx;
|
|
border-radius: 4rpx;
|
|
|
|
.sub-btn
|
|
background #4d4d4d
|
|
</style>
|