<template>
<div class="cart-box">
<van-nav-bar>
<template #title>
<span class="title">购物车</span>
</template>
</van-nav-bar>
<van-cell-group inset>
<van-cell
:title="list.name + list.tel"
:label="list.address"
@click="onEdit"
style="margin-top: 50px"
>
<template #right-icon>
<van-icon name="edit" size="0.7rem" />
</template>
</van-cell>
</van-cell-group>
<van-action-sheet v-model="show" title="修改地址">
<van-address-edit
show-deletail
:show-area="false"
show-search-result
:search-result="searchResult"
@save="onSave"
@change-detail="onChangeDetail"
/>
</van-action-sheet>
<div
v-for="item in cartList"
:key="item.id"
class="cart-item"
style="margin-top: 20px"
>
<van-checkbox
:name="item"
@click="onchxClickFn(item)"
class="checkbox-btn"
v-model="item.checked"
></van-checkbox>
<van-card :price="item.price" :thumb="item.img">
<template #num>
<van-stepper
v-model="item.number"
@change="onChange(item.number, item.id)"
/>
</template>
<template #title>
<span>{{ item.goods_name }}</span>
<van-icon
name="delete-o"
class="delete-icon"
@click="onDelete(item)"
/>
</template>
</van-card>
</div>
<van-submit-bar
:price="checkedGoodsAmount * 100"
button-text="提交订单"
@submit="onSubmit"
>
<van-checkbox @click="onClickCheckAll" v-model="checkedAll"
>全选</van-checkbox
>
</van-submit-bar>
</div>
</template>
<script>
import {
GetCartData,
UpdateCartData,
DeleteCartData,
ToggleCartCheckedData,
DeleteCartData2,
} from "@/https/http";
import { Toast } from "vant";
export default {
name: "cart",
data() {
return {
cartList: [
{
id: 45680,
user_id: "0",
goods_id: 1135058,
goods_name: "日式多功能手卷午睡枕坐垫",
price: 79,
goods_specifition_name_value: "",
number: 1,
img: "http://yanxuan.nosdn.127.net/37bc0fa3524a904ac740340fa92bd515.png",
product_id: 213,
session_id: 1,
checked: 0,
goods_sn: "1135058",
goods_specifition_ids: "",
},
{
id: 45681,
user_id: "0",
goods_id: 1130049,
goods_name: "柔软凉爽天丝麻蚕丝填充夏凉被",
price: 429,
goods_specifition_name_value: "",
number: 1,
img: "http://yanxuan.nosdn.127.net/d88513f85b3617d734bde93af2c766c9.png",
product_id: 194,
session_id: 1,
checked: 0,
goods_sn: "1130049",
goods_specifition_ids: "",
},
],
cartTotal: {
goodsCount: 16,
goodsAmount: 4269,
checkedGoodsCount: 5,
checkedGoodsAmount: 3505,
},
goodsId: "",
number: "",
productId: "",
id_: "",
isChecked: "1",
productIds: "",
checkedGoodsAmount: 0,
checkedAll: 0,
chosenAddressId: "1",
list: {
id: "1",
name: "张三",
tel: "13000000000",
address: "浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室",
isDefault: true,
},
show: false,
searchResult: [],
};
},
methods: {
count() {
var totalPrice = 0;
this.cartList.forEach((val) => {
if (val.checked == 1) {
totalPrice += val.number * val.price;
}
});
console.log("商品总价", totalPrice);
this.checkedGoodsAmount = totalPrice;
},
getData() {
GetCartData().then((res) => {
console.log(11111, res);
this.cartList = res.data.cartList;
this.cartTotal = res.data.cartTotal;
this.checkedGoodsAmount = res.data.cartTotal.checkedGoodsAmount;
if (this.cartTotal.checkedGoodsCount > 0) {
if (this.cartTotal.checkedGoodsCount == this.cartTotal.goodsCount) {
this.checkedAll = true;
} else {
this.checkedAll = false;
}
} else {
this.checkedAll = false;
}
});
},
onDelete(item) {
DeleteCartData2({ productIds: item.product_id.toString() }).then(
(res) => {
if (res.errno === 0) {
this.getData();
}
}
);
},
onChange(value, id_) {
this.cartList.forEach((item) => {
if (item.id === id_) {
this.id_ = id_;
this.goodsId = item.goods_id;
this.number = item.number;
this.productId = item.product_id;
}
});
console.log(this.cartList);
this.count();
},
updateCartData() {
UpdateCartData({
goodsId: this.goodsId,
id: this.id_,
number: this.number,
productId: this.productId,
}).then((res) => {
console.log(999, res);
if (res.errno === 0) {
this.getData();
}
});
},
onchxClickFn(item) {
this.isChecked = item.checked ? "1" : "0";
this.productIds = item.product_id.toString();
console.log(this.productIds);
this.toggleCartCheckedData();
},
toggleCartCheckedData() {
console.log(this.isChecked, "切换购物车商品选中状态");
this.count();
},
onClickCheckAll() {
this.isChecked = this.checkedAll ? "1" : "0";
console.log(this.isChecked, this.checkedAll, "点击全选");
this.cartList.forEach((item) => {
this.$nextTick(() => {
item.checked = Number(this.isChecked);
this.count();
});
});
},
onSubmit() {},
onClickEditAddress() {},
onEdit(item, index) {
Toast("编辑地址:" + index);
this.show = true;
},
onSave(data) {
Toast("save");
console.log("地址", data);
},
onChangeDetail(val) {
if (val) {
console.log(val);
} else {
}
},
},
created() {
this.getData();
},
};
</script>
<style scoped lang="less">
/deep/.van-checkbox__label {
flex: 1;
}
/deep/.van-checkbox {
margin-bottom: 2px;
}
/deep/.van-submit-bar {
bottom: 50px;
}
.cart-box {
padding-bottom: 150px;
box-sizing: border-box;
.van-card {
position: relative;
}
.delete-icon {
position: absolute;
top: 5px;
right: 5px;
}
.cart-item {
position: relative;
padding-left: 40px;
.checkbox-btn {
position: absolute;
left: 20px;
top: 50%;
transform: translate(-50%, -50%);
}
}
}
.van-nav-bar {
background-color: #27bbe0;
position: fixed;
top: 0;
width: 100%;
z-index: 100;
}
.title {
color: #fff;
font-size: 20px;
}
.content {
padding: 16px 16px 160px;
}
</style>