177 lines
4.0 KiB
Vue
177 lines
4.0 KiB
Vue
<template>
|
|
<div class="Car">
|
|
<van-nav-bar
|
|
fixed
|
|
left-arrow
|
|
title="购物车">
|
|
<template #right>
|
|
<span @click="changeAction">{{ ShowDelete ? '管理' : '完成' }}</span>
|
|
<!-- <span @click="changeAction">完成</span>-->
|
|
</template>
|
|
</van-nav-bar>
|
|
|
|
<div class="content">
|
|
|
|
<van-checkbox-group ref="checkboxGroup" v-model="checkCarItem">
|
|
<div v-for="(v,i) in CarList" :key="i" class="carItem">
|
|
<van-checkbox :name="v.car_id"></van-checkbox>
|
|
<van-card
|
|
:desc="v.wares_info.substring(0,20)+'..'"
|
|
:price="v.wares_oldprice"
|
|
:thumb="v.wares_masterimg[0]"
|
|
:title="v.wares_title">
|
|
<template #footer>
|
|
<van-stepper
|
|
v-model="v.car_num"
|
|
@minus="UpdateCarNums(v.car_id,v.car_num-1)"
|
|
@plus="UpdateCarNums(v.car_id,v.car_num+1)"
|
|
/>
|
|
</template>
|
|
</van-card>
|
|
</div>
|
|
</van-checkbox-group>
|
|
|
|
<van-goods-action>
|
|
<van-checkbox v-model="checkCarItem.length == CarList.length ? true : false" @click="SelectAllCarItem">全选
|
|
</van-checkbox>
|
|
<van-goods-action-button
|
|
:text="ShowDelete?`结算(${Money})`: '删除'"
|
|
type="danger"
|
|
@click="ShowDelete ? SubmitCar() : DeleteCarItem()"/>
|
|
</van-goods-action>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapMutations } from 'vuex'
|
|
|
|
export default {
|
|
name: 'car',
|
|
data () {
|
|
return {
|
|
checkCarItem: [],
|
|
ShowDelete: true,
|
|
CarList: []
|
|
}
|
|
},
|
|
async created () {
|
|
this.GetCarList()
|
|
},
|
|
methods: {
|
|
...mapMutations([
|
|
'Set_OrderList'
|
|
]),
|
|
async GetCarList () {
|
|
this.CarList = await this.$http.IndexService.getCarList({});
|
|
console.log(this.CarList)
|
|
},
|
|
async UpdateCarNums (carid, nums) {
|
|
let res = await this.$http.IndexService.updateCarNum({
|
|
carid: carid,
|
|
quantity: nums
|
|
});
|
|
},
|
|
async SubmitCar () {
|
|
let data = [], orderData = []
|
|
this.CarList.forEach((v) => {
|
|
if (this.checkCarItem.includes(v.car_id)) {
|
|
orderData.push(v)
|
|
data.push({
|
|
waresid: v.wares_id,
|
|
goodsnum: v.car_num,
|
|
goodsprice: v.wares_oldprice
|
|
})
|
|
}
|
|
});
|
|
let res = await this.$http.IndexService.submitCar(JSON.stringify({
|
|
carList: data
|
|
}));
|
|
this.$toast("订单增加成功");
|
|
//this.Set_OrderList(orderData)
|
|
|
|
setTimeout(() => {
|
|
this.$router.push("/Pay")
|
|
}, 2000)
|
|
|
|
},
|
|
// 全选
|
|
SelectAllCarItem () {
|
|
if (this.checkCarItem.length == 0) {
|
|
this.$refs.checkboxGroup.toggleAll(true);
|
|
} else {
|
|
this.$refs.checkboxGroup.toggleAll();
|
|
}
|
|
console.log(this.checkCarItem)
|
|
},
|
|
// 删除购物车商品
|
|
async DeleteCarItem () {
|
|
console.log(this.checkCarItem)
|
|
let res = await this.$http.IndexService.deleteCar({
|
|
carid: this.checkCarItem
|
|
});
|
|
this.GetCarList()
|
|
},
|
|
changeAction () {
|
|
this.ShowDelete = !this.ShowDelete;
|
|
}
|
|
},
|
|
computed: {
|
|
Money () {
|
|
if (this.checkCarItem.length != 0) {
|
|
console.log("this.checkCarItem: ", this.checkCarItem)
|
|
let price = 0
|
|
this.CarList.forEach((v) => {
|
|
if (this.checkCarItem.includes(v.car_id)) {
|
|
price += v.car_num * v.wares_oldprice
|
|
}
|
|
})
|
|
|
|
return price
|
|
} else {
|
|
return 0
|
|
}
|
|
}
|
|
},
|
|
components: {}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.content {
|
|
padding-bottom: 110px !important;
|
|
}
|
|
|
|
.van-card {
|
|
background: #fff !important;
|
|
}
|
|
|
|
.van-goods-action {
|
|
bottom: 49.37px !important;
|
|
padding-left: 10px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.van-goods-action-button {
|
|
width: 30%;
|
|
position: absolute;
|
|
right: 0;
|
|
}
|
|
|
|
.carItem {
|
|
display: flex;
|
|
align-items: center;
|
|
padding-left: 15px;
|
|
box-sizing: border-box;
|
|
|
|
.van-card {
|
|
flex: 1;
|
|
padding-left: 0 !important;
|
|
}
|
|
}
|
|
|
|
//@import "~@less/page/Home.less";
|
|
</style>
|