362 lines
10 KiB
JavaScript
362 lines
10 KiB
JavaScript
import dayjs from 'dayjs';
|
|
import { couponsData } from './mock';
|
|
import { request } from '../../../../services/_utils/request';
|
|
|
|
const emptyCouponImg = `https://tdesign.gtimg.com/miniprogram/template/retail/coupon/ordersure-coupon-newempty.png`;
|
|
|
|
Component({
|
|
properties: {
|
|
storeId: String,
|
|
promotionGoodsList: {
|
|
type: Array,
|
|
value: [],
|
|
},
|
|
orderSureCouponList: {
|
|
type: Array,
|
|
value: [],
|
|
},
|
|
couponsShow: {
|
|
type: Boolean,
|
|
value: false,
|
|
observer(couponsShow) {
|
|
console.log('selectCoupons observer 触发:', { couponsShow });
|
|
if (couponsShow) {
|
|
console.log('开始处理优惠券显示逻辑');
|
|
const { promotionGoodsList, orderSureCouponList, storeId } = this.data;
|
|
console.log('组件数据:', { promotionGoodsList, orderSureCouponList, storeId });
|
|
const products =
|
|
promotionGoodsList &&
|
|
promotionGoodsList.map((goods) => {
|
|
this.storeId = goods.storeId;
|
|
return {
|
|
skuId: goods.skuId,
|
|
spuId: goods.spuId,
|
|
storeId: goods.storeId,
|
|
selected: true,
|
|
quantity: goods.num,
|
|
prices: {
|
|
sale: goods.settlePrice,
|
|
},
|
|
};
|
|
});
|
|
const selectedCoupons =
|
|
orderSureCouponList &&
|
|
orderSureCouponList.map((ele) => {
|
|
return {
|
|
promotionId: ele.promotionId,
|
|
storeId: ele.storeId,
|
|
couponId: ele.couponId,
|
|
};
|
|
});
|
|
this.setData({
|
|
products,
|
|
});
|
|
this.coupons({
|
|
products,
|
|
selectedCoupons,
|
|
storeId,
|
|
}).then((res) => {
|
|
this.initData(res);
|
|
});
|
|
}
|
|
},
|
|
},
|
|
},
|
|
data: {
|
|
emptyCouponImg,
|
|
goodsList: [],
|
|
selectedList: [],
|
|
couponsList: [],
|
|
orderSureCouponList: [],
|
|
promotionGoodsList: [],
|
|
// 新增：临时选择状态，用于确认前的预览
|
|
tempSelectedList: [],
|
|
},
|
|
lifetimes: {
|
|
attached() {
|
|
console.log('selectCoupons组件已挂载');
|
|
},
|
|
ready() {
|
|
console.log('selectCoupons组件已准备就绪');
|
|
console.log('组件属性值:', {
|
|
couponsShow: this.properties.couponsShow,
|
|
storeId: this.properties.storeId,
|
|
promotionGoodsListLength: this.properties.promotionGoodsList.length,
|
|
orderSureCouponListLength: this.properties.orderSureCouponList.length
|
|
});
|
|
}
|
|
},
|
|
methods: {
|
|
initData(data = {}) {
|
|
console.log('initData方法被调用:', data);
|
|
const { couponResultList = [], reduce = 0 } = data;
|
|
const { orderSureCouponList } = this.data;
|
|
console.log('initData - orderSureCouponList:', orderSureCouponList);
|
|
|
|
const selectedList = [];
|
|
let selectedNum = 0;
|
|
const couponsList =
|
|
couponResultList &&
|
|
couponResultList.map((coupon) => {
|
|
const { status, couponVO } = coupon;
|
|
const { couponId, condition = '', endTime = 0, name = '', startTime = 0, value, type } = couponVO;
|
|
|
|
// 检查当前优惠券是否在已选列表中
|
|
const isSelected = orderSureCouponList && orderSureCouponList.some(selectedCoupon => {
|
|
return selectedCoupon.key === coupon.id ||
|
|
selectedCoupon.couponId === couponId ||
|
|
selectedCoupon.id === coupon.id;
|
|
});
|
|
|
|
if (isSelected) {
|
|
selectedNum += 1;
|
|
selectedList.push({
|
|
userCouponId: coupon.id,
|
|
id: coupon.id,
|
|
couponId: couponId,
|
|
key: coupon.id,
|
|
promotionId: couponId,
|
|
storeId: this.storeId,
|
|
});
|
|
}
|
|
|
|
return {
|
|
id: coupon.id, // 用户优惠券ID
|
|
couponId: couponId, // 优惠券模板ID
|
|
key: coupon.id,
|
|
title: name,
|
|
type: type === 1 ? 'price' : 'discount',
|
|
status: status === 1 ? 'default' : 'useless',
|
|
desc: this.getCouponDesc({ condition, type, value }),
|
|
value: type === 1 ? value / 100 : value / 10,
|
|
tag: '',
|
|
timeLimit: this.formatTimeLimit(startTime, endTime),
|
|
isSelected: isSelected,
|
|
};
|
|
});
|
|
|
|
this.setData({
|
|
couponsList,
|
|
selectedList,
|
|
tempSelectedList: [...selectedList], // 初始化临时选择状态
|
|
selectedNum,
|
|
reduce,
|
|
});
|
|
|
|
console.log('initData完成:', {
|
|
couponsList: couponsList.length,
|
|
selectedList: selectedList.length,
|
|
selectedNum,
|
|
reduce
|
|
});
|
|
},
|
|
|
|
// 修改：只更新选择状态，不立即触发确认
|
|
selectCoupon(e) {
|
|
const { key } = e.currentTarget.dataset;
|
|
const { couponsList } = this.data;
|
|
|
|
console.log('用户点击优惠券:', { key });
|
|
|
|
// 先清除所有选中状态（假设一次只能选择一张优惠券）
|
|
couponsList.forEach((coupon) => {
|
|
coupon.isSelected = false;
|
|
});
|
|
|
|
// 设置当前选中的优惠券
|
|
const selectedCoupon = couponsList.find((coupon) => coupon.key === key);
|
|
if (selectedCoupon) {
|
|
selectedCoupon.isSelected = true;
|
|
}
|
|
|
|
const couponSelected = couponsList.filter((coupon) => coupon.isSelected === true);
|
|
|
|
// 转换为后端期望的数据格式，但暂存到临时状态
|
|
const tempSelectedList = couponSelected.map(coupon => ({
|
|
userCouponId: coupon.id,
|
|
id: coupon.id,
|
|
couponId: coupon.couponId,
|
|
key: coupon.key,
|
|
promotionId: coupon.couponId,
|
|
storeId: this.storeId,
|
|
_debug: {
|
|
originalCoupon: coupon,
|
|
userCouponId: coupon.id,
|
|
couponTemplateId: coupon.couponId
|
|
}
|
|
}));
|
|
|
|
this.setData({
|
|
tempSelectedList,
|
|
couponsList: [...couponsList],
|
|
selectedNum: couponSelected.length,
|
|
});
|
|
|
|
console.log('优惠券选择状态更新:', {
|
|
selectedKey: key,
|
|
selectedCoupon,
|
|
tempSelectedList
|
|
});
|
|
},
|
|
|
|
// 新增：确认选择
|
|
onConfirm() {
|
|
const { tempSelectedList } = this.data;
|
|
|
|
console.log('用户确认选择优惠券:', tempSelectedList);
|
|
|
|
this.setData({
|
|
selectedList: [...tempSelectedList],
|
|
});
|
|
|
|
// 触发确认事件
|
|
this.triggerEvent('sure', {
|
|
selectedList: tempSelectedList,
|
|
});
|
|
|
|
// 关闭弹窗
|
|
this.hide();
|
|
},
|
|
|
|
// 新增：取消选择
|
|
onCancel() {
|
|
console.log('用户取消选择优惠券');
|
|
|
|
// 恢复到之前的选择状态
|
|
const { selectedList } = this.data;
|
|
this.restoreSelectionState(selectedList);
|
|
|
|
// 关闭弹窗
|
|
this.hide();
|
|
},
|
|
|
|
// 新增：恢复选择状态
|
|
restoreSelectionState(selectedList) {
|
|
const { couponsList } = this.data;
|
|
|
|
// 重置所有优惠券的选中状态
|
|
couponsList.forEach((coupon) => {
|
|
coupon.isSelected = selectedList.some(selected => selected.key === coupon.key);
|
|
});
|
|
|
|
this.setData({
|
|
couponsList: [...couponsList],
|
|
tempSelectedList: [...selectedList],
|
|
selectedNum: selectedList.length,
|
|
});
|
|
},
|
|
|
|
hide() {
|
|
this.setData({
|
|
couponsShow: false,
|
|
});
|
|
this.triggerEvent('close');
|
|
},
|
|
|
|
onPopupVisibleChange(e) {
|
|
const { visible } = e.detail;
|
|
console.log('弹窗可见性变化:', visible);
|
|
if (!visible) {
|
|
this.hide();
|
|
}
|
|
},
|
|
|
|
async coupons(params = {}) {
|
|
console.log('coupons方法被调用:', params);
|
|
const { products = [], selectedCoupons = [], storeId } = params;
|
|
|
|
try {
|
|
const requestData = {
|
|
products,
|
|
selectedCoupons,
|
|
storeId,
|
|
};
|
|
console.log('发送优惠券请求:', requestData);
|
|
|
|
const result = await request({
|
|
url: '/promotion/coupons',
|
|
method: 'POST',
|
|
data: requestData,
|
|
});
|
|
|
|
console.log('优惠券API响应:', result);
|
|
|
|
if (result && result.data) {
|
|
const formattedData = this.formatCouponsData(result.data);
|
|
console.log('格式化后的优惠券数据:', formattedData);
|
|
return formattedData;
|
|
} else {
|
|
console.warn('优惠券API返回数据格式异常:', result);
|
|
return { couponResultList: [], reduce: 0 };
|
|
}
|
|
} catch (error) {
|
|
console.error('获取优惠券失败:', error);
|
|
return { couponResultList: [], reduce: 0 };
|
|
}
|
|
},
|
|
|
|
calculateOrderAmount() {
|
|
const { products } = this.data;
|
|
if (!products || products.length === 0) {
|
|
return 0;
|
|
}
|
|
|
|
return products.reduce((total, product) => {
|
|
return total + (product.prices.sale * product.quantity);
|
|
}, 0);
|
|
},
|
|
|
|
formatCouponsData(data) {
|
|
if (!data || !Array.isArray(data.couponResultList)) {
|
|
console.warn('优惠券数据格式错误:', data);
|
|
return { couponResultList: [], reduce: 0 };
|
|
}
|
|
|
|
const { couponResultList, reduce = 0 } = data;
|
|
|
|
console.log('格式化优惠券数据:', {
|
|
原始数据: couponResultList,
|
|
优惠金额: reduce
|
|
});
|
|
|
|
return {
|
|
couponResultList: couponResultList.map(coupon => {
|
|
const formatted = {
|
|
...coupon,
|
|
id: coupon.id || coupon.userCouponId,
|
|
status: coupon.status || 1,
|
|
couponVO: {
|
|
...coupon.couponVO,
|
|
value: coupon.couponVO.value || 0,
|
|
type: coupon.couponVO.type || 1,
|
|
}
|
|
};
|
|
console.log('格式化单个优惠券:', { 原始: coupon, 格式化: formatted });
|
|
return formatted;
|
|
}),
|
|
reduce
|
|
};
|
|
},
|
|
|
|
getCouponDesc(coupon) {
|
|
const { condition, type, value } = coupon;
|
|
if (type === 1) {
|
|
// 满减券
|
|
return condition ? `满${condition / 100}元可用` : '无门槛使用';
|
|
} else {
|
|
// 折扣券
|
|
return condition ? `满${condition / 100}元可用` : '无门槛使用';
|
|
}
|
|
},
|
|
|
|
formatTimeLimit(startTime, endTime) {
|
|
if (!startTime || !endTime) {
|
|
return '永久有效';
|
|
}
|
|
|
|
const start = dayjs(startTime).format('YYYY.MM.DD');
|
|
const end = dayjs(endTime).format('YYYY.MM.DD');
|
|
return `${start}-${end}`;
|
|
},
|
|
},
|
|
}); |