757 lines
24 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view>
<view class="header">
<view class="searchBox" :style="{ height: localHeight + 'px', paddingTop: top + 'px' }">
<view class="searchBox_left" @click="back">
<u-icon name="arrow-left" size="20px" color="#000"></u-icon>
</view>
<view class="searchBox_mid">购物车({{ shopCarTotal }})</view>
<view class="searchBox_right">
<u-icon name="arrow-left" size="20px" color="#000"></u-icon>
</view>
</view>
</view>
<view class="empty" v-if="shopCarTotal == 0">
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/shopCar_no.png"></image>
</view>
<view class="main" v-else>
<view class="deleteIcon" @click="deleteItem">
<u-icon name="trash" size="50rpx"></u-icon>
</view>
<view class="is_day " v-if="isDayshow">
<view class="footer_all" @click="is_day_checked"
style="color: orange; font-size: 35rpx; font-weight: bolder;">
<image v-if="!isDaychecked"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check1.png">
</image>
<image v-if="isDaychecked"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check2.png">
</image>
当日达
</view>
<view class="goodsList">
<view v-for="(carItem, carIndex) in isDayCarList" :key="carItem.id" :index="carIndex">
<view class="goodsItem_supplier">
<view class="goodsItem_left" @click="supplierCheck(carItem, true)">
<image v-if="!carItem.supplierChecked"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check1.png">
</image>
<image v-if="carItem.supplierChecked"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check2.png">
</image>
</view>
<view class="goodsItem_tit">
{{ carItem.supplier_name }}
</view>
</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"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check1.png">
</image>
<image v-if="item.checked"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check2.png">
</image>
</view>
<view class="goodsItem_right">
<view class="goodsItem_msg">
<view class="goodsItem_msg_img">
<view class="tag tag-img">当日达</view>
<image :src="picUrl + item.commodity_goods_info.commodity_pic">
</image>
</view>
<view class="goodsItem_msg_right">
<view class="goodsItem_msg_right_tit">
{{ item.commodity_goods_info.goods_name }}
</view>
<view class="goodsItem_msg_right_subTit">
{{ item.commodity_goods_info.goods_intro }}
</view>
<view class="goodsItem_msg_right_msg">
<view class="goodsItem_msg_right_msg_left">
<span>¥</span>{{ getPrice(item) }}
<!-- {{ item.commodity_goods_info.group_buy_price ?
item.commodity_goods_info.group_buy_price :
item.commodity_goods_info.sales_price }} -->
<span>/{{ item.commodity_goods_info.goods_unit }}</span>
</view>
<view class="goodsItem_msg_right_msg_right">
<u-number-box v-model="item.count" :asyncChange="true" min="0">
<view slot="minus" class="minus"
@click="minus(carItem, index, carItem.commodity_cart_and_goods_model)">
<u-icon name="minus" size="32" bold></u-icon>
</view>
<text slot="input" style="width: 80rpx; text-align: center"
class="input">{{ item.count }}</text>
<view slot="plus" class="plus" @click="add(carItem, index)">
<u-icon name="plus" color="#FFFFFF" size="32" bold></u-icon>
</view>
</u-number-box>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="is_day" v-if="parcelPostshow" style="margin-top: 20rpx;">
<view class="footer_all" @click="parcel_post_checked"
style="color: orange; font-size: 35rpx; font-weight: bolder;">
<image v-if="!isParcelPostchecked"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check1.png">
</image>
<image v-if="isParcelPostchecked"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check2.png">
</image>
包邮
</view>
<view class="goodsList">
<view v-for="(carItem, carIndex) in shopCarList" :key="carItem.id" :index="carIndex">
<view class="goodsItem_supplier">
<view class="goodsItem_left" @click="supplierCheck(carItem, false)">
<image v-if="!carItem.supplierChecked"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check1.png">
</image>
<image v-if="carItem.supplierChecked"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check2.png">
</image>
</view>
<view class="goodsItem_tit">
{{ carItem.supplier_name }}
</view>
</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"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check1.png">
</image>
<image v-if="item.checked"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check2.png">
</image>
</view>
<view class="goodsItem_right">
<view class="goodsItem_msg">
<view class="goodsItem_msg_img">
<image :src="picUrl + item.commodity_goods_info.commodity_pic">
</image>
</view>
<view class="goodsItem_msg_right">
<view class="goodsItem_msg_right_tit">
{{ item.commodity_goods_info.goods_name }}
</view>
<view class="goodsItem_msg_right_subTit">
{{ item.commodity_goods_info.goods_intro }}
</view>
<view class="goodsItem_msg_right_msg">
<view class="goodsItem_msg_right_msg_left">
<span></span>{{ getPrice(item) }}
<!-- {{ item.commodity_goods_info.group_buy_price ?
item.commodity_goods_info.group_buy_price :
item.commodity_goods_info.sales_price }} -->
<span>/{{ item.commodity_goods_info.goods_unit }}</span>
</view>
<view class="goodsItem_msg_right_msg_right">
<u-number-box v-model="item.count" :asyncChange="true" min="0">
<view slot="minus" class="minus"
@click="minus(item, index, carItem.commodity_cart_and_goods_model)">
<u-icon name="minus" size="32" bold></u-icon>
</view>
<text slot="input" style="width: 80rpx; text-align: center"
class="input">{{ item.count }}</text>
<view slot="plus" class="plus" @click="add(item, index)">
<u-icon name="plus" color="#FFFFFF" size="32" bold></u-icon>
</view>
</u-number-box>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="footer">
<view class="footer_left">
<view class="footer_all" @click="allChecked">
<image v-if="!isAllchecked"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check1.png">
</image>
<image v-if="isAllchecked"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check2.png">
</image>
全选
</view>
<view class="footer_total">
<span>合计</span>
{{ shopMoney }}
</view>
</view>
<view class="footer_right" @click="submitOrder">结算</view>
</view>
</view>
</view>
</template>
<script>
import {
apiArr
} from "../../../api/shop";
import {
picUrl,
menuButtonInfo,
request,
NavgateTo
} from "../../../utils";
export default {
data() {
return {
picUrl,
top: "",
localHeight: "",
value: 3,
type: "error",
shopCarList: [],
isDayCarList: [],
shopCarTotal: 0,
shopMoney: 0,
isAllchecked: false, // 全选
isDaychecked: false, // 当日达
isDayshow: false,
isParcelPostchecked: false,
parcelPostshow: false,
is_group_buy: '',
is_adver: ''
};
},
// watch: {
// // console.log(this.isDaychecked);
// isDaychecked(e) {
// console.log('当日达状态', e);
// },
// isParcelPostchecked(e) {
// console.log('包邮状态', e);
// }
// isAllchecked(e) {
// console.log('全选状态', e);
// }
// },
methods: {
back() {
NavgateTo("1");
},
// 商家单选框全选/取消全选
supplierCheck(carItem, isDay) {
carItem.supplierChecked = !carItem.supplierChecked;
carItem.commodity_cart_and_goods_model.forEach(goods => {
goods.checked = carItem.supplierChecked;
});
this.calcTotal();
// 更新当日达或包邮全选状态
if (isDay) {
this.isDaychecked = this.isDayCarList.every(item =>
item.commodity_cart_and_goods_model.every(goods => goods.checked)
);
} else {
this.isParcelPostchecked = this.shopCarList.every(item =>
item.commodity_cart_and_goods_model.every(goods => goods.checked)
);
}
// 更新全选状态
this.isAllchecked = this.isDaychecked && this.isParcelPostchecked;
},
// 结算
submitOrder() {
let arr = [];
// 收集包邮购物车中选中的商品
this.shopCarList.forEach((item) => {
item.commodity_cart_and_goods_model.forEach((ite) => {
if (ite.checked) {
ite.supplier_name = item.supplier_name;
arr.push(ite);
}
})
});
// 收集当日达购物车中选中的商品
this.isDayCarList.forEach((item) => {
item.commodity_cart_and_goods_model.forEach((ite) => {
if (ite.checked) {
ite.supplier_name = item.supplier_name;
arr.push(ite);
}
})
});
if (arr.length == 0) {
this.$u.toast("请选择商品");
return;
}
// 给每个商品添加isAdver=true参数
const updatedArr = arr.map(item => ({
...item,
isAdver: item.adver_id ? true : ''
}));
// NavgateTo(`../submitOrder/index?shopCarList=${JSON.stringify(arr)}`);
NavgateTo(`../groupPurchaseSubmit/index?shopCarList=${JSON.stringify(updatedArr)}`);
},
// 获取购物车列表
getShopCar() {
const params = {
is_group_buy: this.is_group_buy,
is_adver: this.is_adver
}
request(apiArr.getCar, "POST", params).then((res) => {
if (res.normal_cart_list.length > 0) {
res.normal_cart_list.forEach((item) => {
item.checked = false;
item.supplierChecked = false;
})
this.parcelPostshow = true;
this.shopCarList = res.normal_cart_list
} else {
res.normal_cart_list.forEach((item) => {
item.checked = false;
item.supplierChecked = false;
})
this.parcelPostshow = false;
this.shopCarList = []
}
if (res.same_day_cart_list.length > 0) {
res.same_day_cart_list.forEach((item) => {
item.checked = false;
item.supplierChecked = false;
})
this.isDayshow = true;
this.isDayCarList = res.same_day_cart_list
} else {
res.normal_cart_list.forEach((item) => {
item.checked = false;
item.supplierChecked = false;
})
this.isDayshow = false;
this.isDayCarList = []
}
// 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;
});
},
// 单个修改
changeChecked(item) {
item.checked = !item.checked;
this.calcTotal();
// 找到对应的商家并更新商家选中状态
this.shopCarList.forEach(carItem => {
if (carItem.commodity_cart_and_goods_model.includes(item)) {
carItem.supplierChecked = carItem.commodity_cart_and_goods_model.every(goods => goods.checked);
}
});
// 检查当日达是否全选
this.isDaychecked = this.isDayCarList.every(carItem =>
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) {
item.checked = !item.checked;
this.calcTotal();
// 找到对应的商家并更新商家选中状态
this.isDayCarList.forEach(carItem => {
if (carItem.commodity_cart_and_goods_model.includes(item)) {
carItem.supplierChecked = carItem.commodity_cart_and_goods_model.every(goods => goods.checked);
}
});
// 检查当日达是否全选
this.isDaychecked = this.isDayCarList.every(carItem =>
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() {
this.isAllchecked = !this.isAllchecked;
this.isDaychecked = this.isAllchecked;
this.isParcelPostchecked = this.isAllchecked;
// 设置当日达购物车商品和商家选中状态
this.isDayCarList.forEach(carItem => {
carItem.supplierChecked = this.isAllchecked;
carItem.commodity_cart_and_goods_model.forEach(goods => {
goods.checked = this.isAllchecked;
});
});
// 设置包邮购物车商品和商家选中状态
this.shopCarList.forEach(carItem => {
carItem.supplierChecked = this.isAllchecked;
carItem.commodity_cart_and_goods_model.forEach(goods => {
goods.checked = this.isAllchecked;
});
});
this.calcTotal();
},
// 全选当日达
is_day_checked() {
this.isDaychecked = !this.isDaychecked;
// 设置当日达购物车商品和商家选中状态
this.isDayCarList.forEach(carItem => {
carItem.supplierChecked = this.isDaychecked;
carItem.commodity_cart_and_goods_model.forEach(goods => {
goods.checked = this.isDaychecked;
});
});
// 更新全选状态
this.isAllchecked = this.isDaychecked && this.isParcelPostchecked;
this.calcTotal();
},
// 全选包邮
parcel_post_checked() {
this.isParcelPostchecked = !this.isParcelPostchecked;
// 设置包邮购物车商品和商家选中状态
this.shopCarList.forEach(carItem => {
carItem.supplierChecked = this.isParcelPostchecked;
carItem.commodity_cart_and_goods_model.forEach(goods => {
goods.checked = this.isParcelPostchecked;
});
});
// 更新全选状态
this.isAllchecked = this.isDaychecked && this.isParcelPostchecked;
this.calcTotal();
},
// 计算金额
calcTotal() {
let total = 0;
const currentTime = new Date().getTime();
// 计算当日达购物车金额
this.isDayCarList.forEach(carItem => {
carItem.commodity_cart_and_goods_model.forEach(goods => {
if (goods.checked) {
// 团购活动时间判断
const startTime = new Date(goods.commodity_goods_info.group_buy_activity_info?.start_time).getTime();
const endTime = new Date(goods.commodity_goods_info.group_buy_activity_info?.end_time).getTime();
if (currentTime >= startTime && currentTime <= endTime) {
total += goods.commodity_goods_info.group_buy_price * goods.count;
} else {
total += goods.commodity_goods_info.sales_price * goods.count;
}
}
});
});
// 计算包邮购物车金额
this.shopCarList.forEach(carItem => {
carItem.commodity_cart_and_goods_model.forEach(goods => {
if (goods.checked) {
// 团购活动时间判断
const startTime = new Date(goods.commodity_goods_info.group_buy_activity_info?.start_time).getTime();
const endTime = new Date(goods.commodity_goods_info.group_buy_activity_info?.end_time).getTime();
if (currentTime >= startTime && currentTime <= endTime) {
total += goods.commodity_goods_info.group_buy_price * goods.count;
} else {
total += goods.commodity_goods_info.sales_price * goods.count;
}
}
});
});
this.shopMoney = total.toFixed(2);
},
// 减少数量
// 删除商品的通用方法
deleteCarItem(carItem, goodsIndex, item) {
const that = this;
request(apiArr.deleteCar, "POST", {
ids: [carItem.id],
}).then((res) => {
// 从商品列表中移除该商品
item.splice(goodsIndex, 1);
// 如果商家没有商品了,移除该商家
if (item.length === 0) {
// 分别检查并移除当日达和普通购物车中的商家
const dayCarIndex = that.isDayCarList.findIndex(dayItem =>
dayItem.commodity_cart_and_goods_model === item
);
const normalCarIndex = that.shopCarList.findIndex(normalItem =>
normalItem.commodity_cart_and_goods_model === item
);
if (dayCarIndex !== -1) {
that.isDayCarList.splice(dayCarIndex, 1);
// 如果当日达购物车为空,更新显示状态
if (that.isDayCarList.length === 0) {
that.isDayshow = false;
}
}
if (normalCarIndex !== -1) {
that.shopCarList.splice(normalCarIndex, 1);
// 如果普通购物车为空,更新显示状态
if (that.shopCarList.length === 0) {
that.parcelPostshow = false;
}
}
}
that.calcTotal();
}).catch(error => {
console.error('删除商品失败:', error);
uni.showToast({
title: '删除失败,请重试',
icon: 'none'
});
});
},
// 减少商品数量
minus(carItem, goodsIndex, item) {
const that = this;
const currentTime = new Date().getTime();
// 检查商品是否有团购活动且在活动时间内
const isGroupBuyActive = carItem.commodity_goods_info.group_buy_activity_info &&
currentTime >= new Date(carItem.commodity_goods_info.group_buy_activity_info?.start_time).getTime() &&
currentTime <= new Date(carItem.commodity_goods_info.group_buy_activity_info?.end_time).getTime();
if (carItem.count > 0) {
if (isGroupBuyActive && carItem.count === carItem.commodity_goods_info.min_order_quantity) {
// 团购商品达到最小购买数量,提示用户并删除商品
uni.showToast({
title: '最少购买' + carItem.commodity_goods_info.min_order_quantity + '件',
icon: 'none'
});
// 更新购物车总数
that.shopCarTotal = Math.max(0, that.shopCarTotal - carItem.commodity_goods_info.min_order_quantity);
// 删除商品
that.deleteCarItem(carItem, goodsIndex, item);
} else {
// 正常减少数量
this.shopCarTotal = Math.max(0, this.shopCarTotal - 1);
carItem.count = carItem.count - 1;
this.handleQuantityChange(carItem.count, carItem);
// 如果数量减为0删除商品
if (carItem.count === 0) {
that.deleteCarItem(carItem, goodsIndex, item);
} else {
// 只在数量不为0时计算总价
this.calcTotal();
}
}
}
},
// 添加数量
add(carItem, goodsIndex) {
const currentTime = new Date().getTime();
const isGroupBuyActive = carItem.commodity_goods_info.group_buy_activity_info &&
currentTime >= new Date(carItem.commodity_goods_info.group_buy_activity_info?.start_time).getTime() &&
currentTime <= new Date(carItem.commodity_goods_info.group_buy_activity_info?.end_time).getTime();
if (isGroupBuyActive) {
if (carItem.count == 0) {
carItem.count = carItem.commodity_goods_info.min_order_quantity
this.shopCarTotal += carItem.commodity_goods_info.min_order_quantity;
} else {
if (carItem.count == carItem.commodity_goods_info.total_stock) {
uni.showToast({
title: '库存不足',
icon: 'none'
});
return
}
if (carItem.count == carItem.commodity_goods_info.max_limit_quantity) {
uni.showToast({
title: '一次最多购买' + carItem.commodity_goods_info.max_limit_quantity + '件',
icon: 'none'
});
return
}
carItem.count++;
this.shopCarTotal++;
}
} else {
if (carItem.count >= carItem.commodity_goods_info.stock_quantity) {
uni.showToast({
title: '库存不足',
icon: 'none'
});
return
}
carItem.count++;
this.shopCarTotal++;
}
const item = carItem.commodity_cart_and_goods_model;
this.handleQuantityChange(carItem.count, carItem);
this.calcTotal();
},
// 删除
deleteItem() {
let that = this;
uni.showModal({
title: "提示",
content: "确定删除所选商品吗",
success: function (res) {
if (res.confirm) {
let ids = [];
// 收集当日达购物车中选中的商品ID
that.isDayCarList.forEach(carItem => {
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", {
ids,
})
.then((res) => {
uni.showToast({
title: "删除成功",
duration: 2000,
});
that.getShopCar();
that.calcTotal();
})
.catch((err) => {
console.log(err);
});
} else if (res.cancel) {
console.log("用户点击取消");
}
},
});
},
//商品数量变化
handleQuantityChange(val, item) {
const params = {
user_id: uni.getStorageSync("userId"),
goods_id_and_count: [{
goods_id: item.goods_id,
count: val,
},],
};
request(apiArr.updateCar, "POST", params).then((res) => {
console.log(res);
uni.showToast({
title: "操作成功!",
success() { },
});
return Promise.resolve();
});
},
//获取价格 - 该显示团购价还是正常价
getPrice(item) {
const currentTime = new Date().getTime();
const startTime = new Date(item.commodity_goods_info.group_buy_activity_info?.start_time).getTime();
const endTime = new Date(item.commodity_goods_info.group_buy_activity_info?.end_time).getTime();
if (currentTime >= startTime && currentTime <= endTime) {
return item.commodity_goods_info.group_buy_price;
} else {
return item.commodity_goods_info.sales_price;
}
},
},
onLoad(options) {
const meun = menuButtonInfo();
this.top = meun.top;
this.localHeight = meun.height;
this.is_group_buy = options.item ? JSON.parse(options.item).is_group_buy : ''
this.is_adver = options.item ? JSON.parse(options.item).is_adver : ''
this.getShopCar();
},
onShow() {
this.getShopCar();
// 取消所有选中状态并重置金额
this.isAllchecked = false;
this.isDaychecked = false;
this.isParcelPostchecked = false;
this.shopMoney = 0.00;
},
onReachBottom() { },
};
</script>
<style>
@import url("./index.css");
</style>