maguodong/uniapp-ZHSQ
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改购物车样式和逻辑

Browse Source
This commit is contained in:
赵毅 2025-08-25 11:19:09 +08:00
parent e1014ef6ef
commit c15528bcde
2 changed files with 428 additions and 330 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/shop/shopCar/index.css
View File

@ -76,6 +76,12 @@
justify-content: flex-end; justify-content: flex-end;
} }
.goodsItem_tit{
margin: 20rpx 0 0 20rpx;
font-size: 35rpx;
font-weight: bold;
}
.goodsItem { .goodsItem {
display: flex; display: flex;
align-items: center; align-items: center;

288
packages/shop/shopCar/index.vue
View File

@ -28,9 +28,13 @@
当日达 当日达
</view> </view>
<view class="goodsList"> <view class="goodsList">
<view class="goodsItem" v-for="(item, index) in isDayCarList" :key="item.id"> <view v-for="(carItem, carIndex) in isDayCarList" :key="carItem.id" :index="carIndex">
<view class="goodsItem_tit">
<view class="goodsItem_left" @click="DayChecked(item, index)"> {{ carItem.supplier_name }}
</view>
<view class="goodsItem" v-for="(item, index) in carItem.commodity_cart_and_goods_model"
:key="item.id">
<view class="goodsItem_left" @click="DayChecked(item)">
<image v-if="!item.checked" <image v-if="!item.checked"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check1.png"> src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check1.png">
</image> </image>
@ -59,12 +63,12 @@
</view> </view>
<view class="goodsItem_msg_right_msg_right"> <view class="goodsItem_msg_right_msg_right">
<u-number-box v-model="item.count" :asyncChange="true" min="0"> <u-number-box v-model="item.count" :asyncChange="true" min="0">
<view slot="minus" class="minus" @click="minus(item, index)"> <view slot="minus" class="minus" @click="minus(carItem, index)">
<u-icon name="minus" size="32" bold></u-icon> <u-icon name="minus" size="32" bold></u-icon>
</view> </view>
<text slot="input" style="width: 80rpx; text-align: center" <text slot="input" style="width: 80rpx; text-align: center"
class="input">{{ item.count }}</text> class="input">{{ item.count }}</text>
<view slot="plus" class="plus" @click="add(item, index)"> <view slot="plus" class="plus" @click="add(carItem, index)">
<u-icon name="plus" color="#FFFFFF" size="32" bold></u-icon> <u-icon name="plus" color="#FFFFFF" size="32" bold></u-icon>
</view> </view>
</u-number-box> </u-number-box>
@ -76,6 +80,7 @@
</view> </view>
</view> </view>
</view> </view>
</view>
<view class="is_day" v-if="parcelPostshow" style="margin-top: 20rpx;"> <view class="is_day" v-if="parcelPostshow" style="margin-top: 20rpx;">
@ -90,9 +95,13 @@
包邮 包邮
</view> </view>
<view class="goodsList"> <view class="goodsList">
<view class="goodsItem" v-for="(item, index) in shopCarList" :key="item.id"> <view v-for="(carItem, carIndex) in shopCarList" :key="carItem.id" :index="carIndex">
<view class="goodsItem_tit">
<view class="goodsItem_left" @click="changeChecked(item, index)"> {{ carItem.supplier_name }}
</view>
<view class="goodsItem" v-for="(item, index) in carItem.commodity_cart_and_goods_model"
:key="item.id">
<view class="goodsItem_left" @click="changeChecked(item)">
<image v-if="!item.checked" <image v-if="!item.checked"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check1.png"> src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check1.png">
</image> </image>
@ -138,6 +147,7 @@
</view> </view>
</view> </view>
</view> </view>
</view>
@ -224,10 +234,22 @@
// 结算 // 结算
submitOrder() { submitOrder() {
let arr = []; let arr = [];
console.log("🚀 ~ submitOrder ~ this.shopCarList:", this.shopCarList)
// 收集包邮购物车中选中的商品
this.shopCarList.forEach((item) => { this.shopCarList.forEach((item) => {
if (item.checked) { item.commodity_cart_and_goods_model.forEach((ite) => {
arr.push(item); if (ite.checked) {
arr.push(ite);
} }
})
});
// 收集当日达购物车中选中的商品
this.isDayCarList.forEach((item) => {
item.commodity_cart_and_goods_model.forEach((ite) => {
if (ite.checked) {
arr.push(ite);
}
})
}); });
// NavgateTo(`../submitOrder/index?shopCarList=${JSON.stringify(arr)}`); // NavgateTo(`../submitOrder/index?shopCarList=${JSON.stringify(arr)}`);
@ -237,149 +259,195 @@
// 获取购物车列表 // 获取购物车列表
getShopCar() { getShopCar() {
request(apiArr.getCar, "POST", {}).then((res) => { request(apiArr.getCar, "POST", {}).then((res) => {
console.log(res.total); if (res.normal_cart_list.length > 0) {
// res.commodity_cart_list.forEach((item) => {
res.normal_cart_list.forEach((item) => { res.normal_cart_list.forEach((item) => {
console.log(item.commodity_cart_and_goods_model); item.checked = false;
if(item.is_support_same_day == false) {
this.isDayshow = false;
this.parcelPostshow = true; this.parcelPostshow = true;
this.shopCarList = item.commodity_cart_and_goods_model; })
item.checked = false; this.shopCarList = res.normal_cart_list
} else { } else {
this.isDayshow = true; res.normal_cart_list.forEach((item) => {
this.parcelPostshow = false;
this.isDayCarList = item.commodity_cart_and_goods_model;
item.checked = false; item.checked = false;
this.parcelPostshow = false;
})
} }
});
// this.shopCarList = res.commodity_cart_list; if (res.same_day_cart_list.length > 0) {
// this.shopCarList = res.normal_cart_list[0].commodity_cart_and_goods_model; res.same_day_cart_list.forEach((item) => {
item.checked = false;
this.isDayshow = true;
})
this.isDayCarList = res.same_day_cart_list
} else {
res.normal_cart_list.forEach((item) => {
item.checked = false;
this.isDayshow = false;
})
}
// res.normal_cart_list.forEach((item) => {
// if (item.is_support_same_day == false) {
// this.isDayshow = false;
// this.parcelPostshow = true;
// this.shopCarList = item.commodity_cart_and_goods_model;
// item.checked = false;
// } else {
// this.isDayshow = true;
// this.parcelPostshow = false;
// this.isDayCarList = item.commodity_cart_and_goods_model;
// item.checked = false;
// }
// });
this.shopCarTotal = res.total; this.shopCarTotal = res.total;
}); });
}, },
// ceshi() {
// console.log(this.shopCarTotal);
// console.log(this.shopCarList);
// },
// 单个修改 // 单个修改
changeChecked(item, index) { changeChecked(item) {
this.shopCarList[index].checked = !this.shopCarList[index].checked; item.checked = !item.checked;
this.calcTotal(); this.calcTotal();
this.isParcelPostchecked = this.shopCarList.every((item) => item.checked); // 检查当日达是否全选
if(this.isDayshow == false) { this.isDaychecked = this.isDayCarList.every(carItem =>
this.isAllchecked = this.shopCarList.every((item) => item.checked); carItem.commodity_cart_and_goods_model.every(goods => goods.checked)
} );
// 检查包邮是否全选
this.isParcelPostchecked = this.shopCarList.every(carItem =>
carItem.commodity_cart_and_goods_model.every(goods => goods.checked)
);
// 检查全选状态
this.isAllchecked = this.isDaychecked && this.isParcelPostchecked;
}, },
DayChecked(item, index) { DayChecked(item) {
this.isDayCarList[index].checked = !this.isDayCarList[index].checked; item.checked = !item.checked;
this.calcTotal(); this.calcTotal();
this.isDaychecked = this.isDayCarList.every((item) => item.checked); // 检查当日达是否全选
if(this.parcelPostshow == false) { this.isDaychecked = this.isDayCarList.every(carItem =>
this.isAllchecked = this.isDayCarList.every((item) => item.checked); carItem.commodity_cart_and_goods_model.every(goods => goods.checked)
} );
// 检查包邮是否全选
this.isParcelPostchecked = this.shopCarList.every(carItem =>
carItem.commodity_cart_and_goods_model.every(goods => goods.checked)
);
// 检查全选状态
this.isAllchecked = this.isDaychecked && this.isParcelPostchecked;
}, },
// 全选 // 全选
allChecked() { allChecked() {
this.isAllchecked = !this.isAllchecked; this.isAllchecked = !this.isAllchecked;
// this.isDaychecked = !this.isDaychecked; this.isDaychecked = this.isAllchecked;
// this.isParcelPostchecked = !this.isParcelPostchecked; this.isParcelPostchecked = this.isAllchecked;
// Bug 修复：将 !this.allChecked 改为 !this.isAllchecked
if (this.isAllchecked) { // 设置当日达购物车商品选中状态
this.isDaychecked = true; this.isDayCarList.forEach(carItem => {
this.isParcelPostchecked = true; carItem.commodity_cart_and_goods_model.forEach(goods => {
this.shopCarList.forEach((item) => { goods.checked = this.isAllchecked;
item.checked = true;
}); });
} else {
this.isDaychecked = false;
this.isParcelPostchecked = false;
this.shopCarList.forEach((item) => {
item.checked = false;
}); });
}
// 设置包邮购物车商品选中状态
this.shopCarList.forEach(carItem => {
carItem.commodity_cart_and_goods_model.forEach(goods => {
goods.checked = this.isAllchecked;
});
});
this.calcTotal(); this.calcTotal();
}, },
// 全选当日达 // 全选当日达
is_day_checked() { is_day_checked() {
this.isDaychecked = !this.isDaychecked; this.isDaychecked = !this.isDaychecked;
this.isAllchecked = !this.isAllchecked
if (this.isDaychecked) { // 设置当日达购物车商品选中状态
this.isDayCarList.forEach((item) => { this.isDayCarList.forEach(carItem => {
item.checked = true; carItem.commodity_cart_and_goods_model.forEach(goods => {
goods.checked = this.isDaychecked;
}); });
} else {
this.isDayCarList.forEach((item) => {
item.checked = false;
}); });
}
// 更新全选状态
this.isAllchecked = this.isDaychecked && this.isParcelPostchecked;
this.calcTotal(); this.calcTotal();
console.log("全选当日达");
}, },
// 全选包邮 // 全选包邮
parcel_post_checked() { parcel_post_checked() {
this.isParcelPostchecked = !this.isParcelPostchecked; this.isParcelPostchecked = !this.isParcelPostchecked;
this.isAllchecked = !this.isAllchecked
console.log(this.isParcelPostchecked); // 设置包邮购物车商品选中状态
if (this.isParcelPostchecked) { this.shopCarList.forEach(carItem => {
this.shopCarList.forEach((item) => { carItem.commodity_cart_and_goods_model.forEach(goods => {
item.checked = true; goods.checked = this.isParcelPostchecked;
}); });
} else {
this.shopCarList.forEach((item) => {
item.checked = false;
}); });
}
// 更新全选状态
this.isAllchecked = this.isDaychecked && this.isParcelPostchecked;
this.calcTotal(); this.calcTotal();
console.log("全选包邮");
}, },
// 计算金额 // 计算金额
calcTotal() { calcTotal() {
let total = 0; let total = 0;
this.shopCarList.forEach((item) => {
console.log(item);
if (item.checked) { // 计算当日达购物车金额
total += item.commodity_goods_info.sales_price * item.count; this.isDayCarList.forEach(carItem => {
carItem.commodity_cart_and_goods_model.forEach(goods => {
if (goods.checked) {
total += goods.commodity_goods_info.sales_price * goods.count;
} }
}); });
});
// 计算包邮购物车金额
this.shopCarList.forEach(carItem => {
carItem.commodity_cart_and_goods_model.forEach(goods => {
if (goods.checked) {
total += goods.commodity_goods_info.sales_price * goods.count;
}
});
});
this.shopMoney = total; this.shopMoney = total;
}, },
// 减少数量 // 减少数量
minus(item, index) { minus(carItem, goodsIndex) {
let that = this; let that = this;
if (item.count === 1) { const item = carItem.commodity_cart_and_goods_model;
if (carItem.count === 1) {
request(apiArr.deleteCar, "POST", { request(apiArr.deleteCar, "POST", {
ids: [item.id], ids: [item.id],
}).then((res) => { }).then((res) => {
that.shopCarList.splice(index, 1); carItem.commodity_cart_and_goods_model.splice(goodsIndex, 1);
that.calcTotal(); // 如果商家没有商品了，移除该商家
}); if (carItem.commodity_cart_and_goods_model.length === 0) {
const carIndex = this.shopCarList.indexOf(carItem);
if (carIndex !== -1) {
this.shopCarList.splice(carIndex, 1);
} }
this.shopCarTotal = this.shopCarTotal - 1 }
this.shopCarList[index].count = this.shopCarList[index].count - 1; that.calcTotal();
this.handleQuantityChange(this.shopCarList[index].count, this.shopCarList[index]) that.shopCarTotal = that.shopCarTotal - 1;
});
} else {
this.shopCarTotal = this.shopCarTotal - 1;
carItem.count = carItem.count - 1;
this.handleQuantityChange(carItem.count, carItem);
this.calcTotal(); this.calcTotal();
}
}, },
// 添加数量 // 添加数量
add(item, index) { add(carItem, goodsIndex) {
this.shopCarTotal = this.shopCarTotal + 1 const item = carItem.commodity_cart_and_goods_model;
this.shopCarList[index].count = this.shopCarList[index].count + 1; this.shopCarTotal = this.shopCarTotal + 1;
this.handleQuantityChange(this.shopCarList[index].count, this.shopCarList[index]) carItem.count = carItem.count + 1;
this.handleQuantityChange(carItem.count, carItem);
this.calcTotal(); this.calcTotal();
}, },
@ -392,12 +460,36 @@
success: function (res) { success: function (res) {
if (res.confirm) { if (res.confirm) {
let ids = []; let ids = [];
that.shopCarList.forEach((item) => {
if (item.checked) { // 收集当日达购物车中选中的商品ID
ids.push(item.id); that.isDayCarList.forEach(carItem => {
item.checked = false; carItem.commodity_cart_and_goods_model.forEach(goods => {
if (goods.checked) {
ids.push(goods.id);
goods.checked = false;
} }
}); });
});
// 收集包邮购物车中选中的商品ID
that.shopCarList.forEach(carItem => {
carItem.commodity_cart_and_goods_model.forEach(goods => {
if (goods.checked) {
ids.push(goods.id);
goods.checked = false;
}
});
});
if (ids.length === 0) {
uni.showToast({
title: "请选择要删除的商品",
icon: "none",
duration: 2000,
});
return;
}
request(apiArr.deleteCar, "POST", { request(apiArr.deleteCar, "POST", {
ids, ids,
}) })