init
This commit is contained in:
sjk
@@ -0,0 +1,375 @@
|
||||
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: [],
|
||||
},
|
||||
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 === couponId ||
|
||||
selectedCoupon.couponId === couponId ||
|
||||
selectedCoupon.id === couponId;
|
||||
});
|
||||
|
||||
console.log(`initData - 优惠券 ${name} (ID: ${couponId}) 是否已选: ${isSelected}`);
|
||||
|
||||
if (isSelected) {
|
||||
selectedNum++;
|
||||
selectedList.push({
|
||||
userCouponId: coupon.id, // 用户优惠券ID，用于后端验证所有权
|
||||
id: coupon.id, // 保持兼容性
|
||||
couponId,
|
||||
promotionId: couponId, // 使用couponId作为promotionId
|
||||
storeId: this.storeId,
|
||||
key: couponId,
|
||||
// 添加调试信息
|
||||
_debug: {
|
||||
userCouponId: coupon.id,
|
||||
couponTemplateId: couponId
|
||||
}
|
||||
});
|
||||
}
|
||||
const val = value; // 直接使用原始值，ui-coupon-card组件会自动处理单位转换
|
||||
return {
|
||||
id: coupon.id, // 用户优惠券ID，用于后端验证所有权
|
||||
key: couponId, // 保持原有的key逻辑
|
||||
couponId: couponId, // 优惠券模板ID
|
||||
title: name,
|
||||
isSelected: isSelected,
|
||||
timeLimit: this.formatTimeLimit(startTime, endTime),
|
||||
value: val,
|
||||
status: status === -1 ? 'useless' : 'default',
|
||||
desc: condition,
|
||||
type,
|
||||
tag: '',
|
||||
};
|
||||
});
|
||||
console.log('initData设置数据:', { selectedList, couponsList, reduce, selectedNum });
|
||||
this.setData({
|
||||
selectedList,
|
||||
couponsList,
|
||||
reduce,
|
||||
selectedNum,
|
||||
});
|
||||
},
|
||||
selectCoupon(e) {
|
||||
const { key } = e.currentTarget.dataset;
|
||||
const { couponsList } = this.data;
|
||||
|
||||
// 先清除所有选中状态（假设一次只能选择一张优惠券）
|
||||
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 selectedListForBackend = couponSelected.map(coupon => ({
|
||||
userCouponId: coupon.id, // 用户优惠券ID，用于后端验证所有权
|
||||
id: coupon.id, // 保持兼容性
|
||||
couponId: coupon.couponId, // 优惠券模板ID，用于获取优惠券信息
|
||||
key: coupon.key,
|
||||
promotionId: coupon.couponId, // 使用couponId作为promotionId
|
||||
storeId: this.storeId,
|
||||
// 添加调试信息
|
||||
_debug: {
|
||||
originalCoupon: coupon,
|
||||
userCouponId: coupon.id,
|
||||
couponTemplateId: coupon.couponId
|
||||
}
|
||||
}));
|
||||
|
||||
this.setData({
|
||||
selectedList: selectedListForBackend,
|
||||
couponsList: [...couponsList],
|
||||
});
|
||||
|
||||
console.log('优惠券选择:', {
|
||||
selectedKey: key,
|
||||
selectedCoupon,
|
||||
couponSelected,
|
||||
selectedListForBackend
|
||||
});
|
||||
|
||||
this.triggerEvent('sure', {
|
||||
selectedList: selectedListForBackend,
|
||||
});
|
||||
},
|
||||
hide() {
|
||||
this.setData({
|
||||
couponsShow: false,
|
||||
});
|
||||
},
|
||||
onPopupVisibleChange(e) {
|
||||
const { visible } = e.detail;
|
||||
console.log('弹窗状态变化:', visible);
|
||||
|
||||
// 只有当弹窗被关闭时才触发父组件的状态更新
|
||||
if (!visible && this.data.couponsShow) {
|
||||
// 通知父组件关闭弹窗
|
||||
this.triggerEvent('close');
|
||||
}
|
||||
},
|
||||
async coupons(params = {}) {
|
||||
console.log('coupons方法被调用:', params);
|
||||
try {
|
||||
// 计算订单总金额
|
||||
const calculatedAmount = this.calculateOrderAmount();
|
||||
// 确保订单金额至少为1，避免后端验证错误
|
||||
const orderAmount = calculatedAmount > 0 ? calculatedAmount : 100;
|
||||
console.log('计算的订单金额:', calculatedAmount, '使用的订单金额:', orderAmount);
|
||||
|
||||
// 调用API获取可用优惠券
|
||||
const response = await request({
|
||||
url: `/coupons/order/available?order_amount=${orderAmount}`,
|
||||
method: 'GET'
|
||||
});
|
||||
|
||||
console.log('优惠券API响应:', response);
|
||||
|
||||
if (response.code === 200 && response.data) {
|
||||
const formattedData = this.formatCouponsData(response.data);
|
||||
console.log('格式化后的优惠券数据:', formattedData);
|
||||
|
||||
// 返回符合initData期望的格式
|
||||
return {
|
||||
couponResultList: formattedData.map(coupon => ({
|
||||
status: coupon.status === 'default' ? 1 : 0,
|
||||
id: coupon.id, // 用户优惠券ID
|
||||
couponVO: {
|
||||
couponId: coupon.couponId,
|
||||
name: coupon.name,
|
||||
type: coupon.type,
|
||||
value: coupon.value,
|
||||
condition: coupon.desc,
|
||||
startTime: coupon.startTime,
|
||||
endTime: coupon.endTime
|
||||
}
|
||||
})),
|
||||
reduce: 0
|
||||
};
|
||||
} else {
|
||||
console.error('获取优惠券失败:', response.message);
|
||||
return { couponResultList: [], reduce: 0 };
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取优惠券异常:', error);
|
||||
// 如果API调用失败，返回mock数据作为备选
|
||||
console.log('使用mock数据:', couponsData);
|
||||
return {
|
||||
couponResultList: couponsData.couponResultList || [],
|
||||
reduce: couponsData.reduce || 0
|
||||
};
|
||||
}
|
||||
},
|
||||
|
||||
// 计算订单总金额
|
||||
calculateOrderAmount() {
|
||||
const { promotionGoodsList } = this.data;
|
||||
let totalAmount = 0;
|
||||
|
||||
if (promotionGoodsList && promotionGoodsList.length > 0) {
|
||||
promotionGoodsList.forEach(store => {
|
||||
if (store.goodsList && store.goodsList.length > 0) {
|
||||
store.goodsList.forEach(item => {
|
||||
totalAmount += (item.price || 0) * (item.quantity || 1);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return totalAmount;
|
||||
},
|
||||
|
||||
// 格式化优惠券数据
|
||||
formatCouponsData(coupons) {
|
||||
const { orderSureCouponList } = this.data;
|
||||
console.log('formatCouponsData - orderSureCouponList:', orderSureCouponList);
|
||||
|
||||
return coupons.map(userCoupon => {
|
||||
const coupon = userCoupon.coupon;
|
||||
|
||||
// 检查当前优惠券是否在已选列表中
|
||||
const isSelected = orderSureCouponList && orderSureCouponList.some(selectedCoupon => {
|
||||
return selectedCoupon.key === userCoupon.id ||
|
||||
selectedCoupon.couponId === coupon.id ||
|
||||
selectedCoupon.id === userCoupon.id;
|
||||
});
|
||||
|
||||
console.log(`优惠券 ${coupon.name} (ID: ${coupon.id}) 是否已选: ${isSelected}`);
|
||||
|
||||
return {
|
||||
id: userCoupon.id,
|
||||
key: userCoupon.id, // 添加key字段用于选择
|
||||
couponId: coupon.id,
|
||||
name: coupon.name,
|
||||
title: coupon.name, // 添加title字段映射到name
|
||||
type: coupon.type,
|
||||
value: coupon.value, // 保持原始值，ui-coupon-card组件会自动除以100
|
||||
minAmount: coupon.min_amount,
|
||||
desc: this.getCouponDesc(coupon),
|
||||
timeLimit: this.formatTimeLimit(coupon.start_time, coupon.end_time),
|
||||
startTime: coupon.start_time,
|
||||
endTime: coupon.end_time,
|
||||
status: userCoupon.status === 0 ? 'default' : 'disabled',
|
||||
tag: '', // 添加tag字段
|
||||
isSelected: isSelected // 根据orderSureCouponList设置选中状态
|
||||
};
|
||||
});
|
||||
},
|
||||
|
||||
// 获取优惠券描述
|
||||
getCouponDesc(coupon) {
|
||||
if (coupon.type === 1) { // 满减券
|
||||
if (coupon.min_amount > 0) {
|
||||
return `满${coupon.min_amount/100}元减${coupon.value/100}元`;
|
||||
}
|
||||
return `立减${coupon.value/100}元`;
|
||||
} else if (coupon.type === 2) { // 折扣券
|
||||
return `${coupon.value/10}折`;
|
||||
} else if (coupon.type === 3) { // 免邮券
|
||||
return '免运费';
|
||||
}
|
||||
return coupon.description || '优惠券';
|
||||
},
|
||||
|
||||
// 格式化时间限制
|
||||
formatTimeLimit(startTime, endTime) {
|
||||
// 检查时间数据是否有效
|
||||
if (!startTime || !endTime) {
|
||||
console.warn('formatTimeLimit: 时间数据无效', { startTime, endTime });
|
||||
return '有效期待确认';
|
||||
}
|
||||
|
||||
try {
|
||||
// 处理不同格式的时间数据
|
||||
let start, end;
|
||||
|
||||
// 如果是时间戳（数字或数字字符串）
|
||||
if (typeof startTime === 'number' || (typeof startTime === 'string' && /^\d+$/.test(startTime))) {
|
||||
start = dayjs(Number(startTime));
|
||||
} else {
|
||||
start = dayjs(startTime);
|
||||
}
|
||||
|
||||
if (typeof endTime === 'number' || (typeof endTime === 'string' && /^\d+$/.test(endTime))) {
|
||||
end = dayjs(Number(endTime));
|
||||
} else {
|
||||
end = dayjs(endTime);
|
||||
}
|
||||
|
||||
// 验证日期是否有效
|
||||
if (!start.isValid() || !end.isValid()) {
|
||||
console.warn('formatTimeLimit: 日期解析失败', { startTime, endTime });
|
||||
return '有效期待确认';
|
||||
}
|
||||
|
||||
return `${start.format('YYYY.MM.DD')} - ${end.format('YYYY.MM.DD')}`;
|
||||
} catch (error) {
|
||||
console.error('formatTimeLimit: 格式化时间出错', error, { startTime, endTime });
|
||||
return '有效期待确认';
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"t-popup": "tdesign-miniprogram/popup/popup",
|
||||
"t-icon": "tdesign-miniprogram/icon/icon",
|
||||
"t-image": "/components/webp-image/index",
|
||||
"wr-price": "/components/price/index",
|
||||
"coupon-card": "/components/promotion/ui-coupon-card/index"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
<wxs src="../selectCoupon.wxs" module="m1" />
|
||||
|
||||
|
||||
<t-popup visible="{{couponsShow}}" placement="bottom" bind:visible-change="onPopupVisibleChange">
|
||||
<view class="select-coupons">
|
||||
<view class="title">选择优惠券</view>
|
||||
<block wx:if="{{couponsList && couponsList.length > 0}}">
|
||||
<view class="info">
|
||||
<block wx:if="{{!selectedNum}}">你有{{couponsList.length}}张可用优惠券</block>
|
||||
<block wx:else>
|
||||
已选中{{selectedNum}}张推荐优惠券, 共抵扣
|
||||
<wr-price fill="{{false}}" price="{{reduce || 0}}" />
|
||||
</block>
|
||||
</view>
|
||||
<scroll-view class="coupons-list" scroll-y="true">
|
||||
<view class="coupons-wrap">
|
||||
<block wx:for="{{couponsList}}" wx:key="index" wx:for-item="coupon">
|
||||
<coupon-card
|
||||
title="{{coupon.title}}"
|
||||
type="{{coupon.type}}"
|
||||
status="{{coupon.status}}"
|
||||
desc="{{coupon.desc}}"
|
||||
value="{{coupon.value}}"
|
||||
tag="{{coupon.tag}}"
|
||||
timeLimit="{{coupon.timeLimit}}"
|
||||
>
|
||||
<view class="slot-radio" slot="operator">
|
||||
<t-icon bindtap="selectCoupon" data-key="{{coupon.key}}" name="{{coupon.isSelected ? 'check-circle-filled' : 'circle'}}" color="#fa4126" size="40rpx"/>
|
||||
</view>
|
||||
</coupon-card>
|
||||
<view class="disable" wx:if="{{coupon.status == 'useless'}}">此优惠券不能和已勾选的优惠券叠加使用</view>
|
||||
</block>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</block>
|
||||
<view wx:else class="couponp-empty-wrap">
|
||||
<t-image t-class="couponp-empty-img" src="{{emptyCouponImg}}" />
|
||||
<view class="couponp-empty-title">暂无优惠券</view>
|
||||
</view>
|
||||
<view class="coupons-cover" />
|
||||
</view>
|
||||
</t-popup>
|
||||
|
||||
@@ -0,0 +1,104 @@
|
||||
.select-coupons {
|
||||
background: #fff;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
padding-top: 28rpx;
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
.select-coupons .title {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
line-height: 44rpx;
|
||||
}
|
||||
.select-coupons .info {
|
||||
width: 100%;
|
||||
height: 34rpx;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
line-height: 34rpx;
|
||||
margin: 20rpx 0;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
.select-coupons .info .price {
|
||||
color: #fa4126;
|
||||
}
|
||||
.select-coupons .coupons-list {
|
||||
max-height: 500rpx;
|
||||
}
|
||||
.select-coupons .coupons-list .coupons-wrap {
|
||||
padding: 0rpx 20rpx;
|
||||
}
|
||||
.select-coupons .coupons-list .disable {
|
||||
font-size: 24rpx;
|
||||
color: #ff2525;
|
||||
padding-top: 20rpx;
|
||||
}
|
||||
.select-coupons .coupons-list .slot-radio {
|
||||
position: absolute;
|
||||
right: 22rpx;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
display: inline-block;
|
||||
}
|
||||
.select-coupons .coupons-list .slot-radio .wr-check-filled {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
.select-coupons .coupons-list .slot-radio .check {
|
||||
width: 36rpx;
|
||||
}
|
||||
.select-coupons .coupons-list .slot-radio .text-primary {
|
||||
color: #fa4126;
|
||||
}
|
||||
.select-coupons .coupons-list .slot-radio .wr-check {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
.select-coupons .coupons-list .slot-radio .wr-uncheck {
|
||||
font-size: 36rpx;
|
||||
color: #999;
|
||||
}
|
||||
.select-coupons .couponp-empty-wrap {
|
||||
padding: 40rpx;
|
||||
}
|
||||
.select-coupons .couponp-empty-wrap .couponp-empty-img {
|
||||
display: block;
|
||||
width: 240rpx;
|
||||
height: 240rpx;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.select-coupons .couponp-empty-wrap .couponp-empty-title {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
text-align: center;
|
||||
line-height: 40rpx;
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
.select-coupons .coupons-cover {
|
||||
height: 112rpx;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
margin-top: 30rpx;
|
||||
padding: 12rpx 32rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.select-coupons .coupons-cover .btn {
|
||||
width: 332rpx;
|
||||
height: 88rpx;
|
||||
text-align: center;
|
||||
line-height: 88rpx;
|
||||
font-size: 32rpx;
|
||||
border-radius: 44rpx;
|
||||
box-sizing: border-box;
|
||||
border: 2rpx solid #dddddd;
|
||||
color: #333333;
|
||||
}
|
||||
.select-coupons .coupons-cover .red {
|
||||
border-color: #fa4126;
|
||||
background-color: #fa4126;
|
||||
color: #ffffff;
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
export const couponsData = {
|
||||
couponResultList: [
|
||||
{
|
||||
couponVO: {
|
||||
condition: '满200元可用',
|
||||
couponId: 11,
|
||||
endTime: 1584530282686,
|
||||
name: '折扣券',
|
||||
profit: '5.5折',
|
||||
promotionCode: 90,
|
||||
promotionSubCode: 1,
|
||||
scopeText: '部分商品可用',
|
||||
startTime: 1584530282686,
|
||||
storeId: 90,
|
||||
value: 550,
|
||||
type: 2,
|
||||
},
|
||||
status: 0, // 0:未勾选。1:勾选。-1:置灰
|
||||
},
|
||||
],
|
||||
reduce: 1000,
|
||||
};
|
||||
@@ -0,0 +1,16 @@
|
||||
function formatDays(value) {
|
||||
if (value < 10) {
|
||||
return '0' + value;
|
||||
}
|
||||
return value;
|
||||
}
|
||||
var dateFormat = function (d) {
|
||||
var date = getDate(+d);
|
||||
return (
|
||||
date.getFullYear() +
|
||||
'-' +
|
||||
formatDays(date.getMonth() + 1) +
|
||||
formatDays(date.getDate())
|
||||
);
|
||||
};
|
||||
module.exports.dateFormat = dateFormat;
|
||||
@@ -0,0 +1,362 @@
|
||||
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}`;
|
||||
},
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,50 @@
|
||||
<wxs src="./selectCoupon.wxs" module="m1" />
|
||||
|
||||
<t-popup visible="{{couponsShow}}" placement="bottom" bind:visible-change="onPopupVisibleChange">
|
||||
<view class="select-coupons">
|
||||
<view class="title">选择优惠券</view>
|
||||
<block wx:if="{{couponsList && couponsList.length > 0}}">
|
||||
<view class="info">
|
||||
<block wx:if="{{!selectedNum}}">你有{{couponsList.length}}张可用优惠券</block>
|
||||
<block wx:else>
|
||||
已选中{{selectedNum}}张推荐优惠券, 共抵扣
|
||||
<wr-price fill="{{false}}" price="{{reduce || 0}}" />
|
||||
</block>
|
||||
</view>
|
||||
<scroll-view class="coupons-list" scroll-y="true">
|
||||
<view class="coupons-wrap">
|
||||
<block wx:for="{{couponsList}}" wx:key="index" wx:for-item="coupon">
|
||||
<coupon-card
|
||||
title="{{coupon.title}}"
|
||||
type="{{coupon.type}}"
|
||||
status="{{coupon.status}}"
|
||||
desc="{{coupon.desc}}"
|
||||
value="{{coupon.value}}"
|
||||
tag="{{coupon.tag}}"
|
||||
timeLimit="{{coupon.timeLimit}}"
|
||||
>
|
||||
<view class="slot-radio" slot="operator">
|
||||
<t-icon bindtap="selectCoupon" data-key="{{coupon.key}}" name="{{coupon.isSelected ? 'check-circle-filled' : 'circle'}}" color="#fa4126" size="40rpx"/>
|
||||
</view>
|
||||
</coupon-card>
|
||||
<view class="disable" wx:if="{{coupon.status == 'useless'}}">此优惠券不能和已勾选的优惠券叠加使用</view>
|
||||
</block>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</block>
|
||||
<view wx:else class="couponp-empty-wrap">
|
||||
<t-image t-class="couponp-empty-img" src="{{emptyCouponImg}}" />
|
||||
<view class="couponp-empty-title">暂无优惠券</view>
|
||||
</view>
|
||||
|
||||
<!-- 添加确认按钮区域 -->
|
||||
<view class="coupons-actions">
|
||||
<view class="action-buttons">
|
||||
<view class="cancel-btn" bindtap="onCancel">取消</view>
|
||||
<view class="confirm-btn" bindtap="onConfirm">确定</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="coupons-cover" />
|
||||
</view>
|
||||
</t-popup>
|
||||
@@ -0,0 +1,142 @@
|
||||
.select-coupons {
|
||||
background: #fff;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
padding-top: 28rpx;
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
.select-coupons .title {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
line-height: 44rpx;
|
||||
}
|
||||
.select-coupons .info {
|
||||
width: 100%;
|
||||
height: 34rpx;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
line-height: 34rpx;
|
||||
margin: 20rpx 0;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
.select-coupons .info .price {
|
||||
color: #fa4126;
|
||||
}
|
||||
.select-coupons .coupons-list {
|
||||
max-height: 500rpx;
|
||||
}
|
||||
.select-coupons .coupons-list .coupons-wrap {
|
||||
padding: 0rpx 20rpx;
|
||||
}
|
||||
.select-coupons .coupons-list .disable {
|
||||
font-size: 24rpx;
|
||||
color: #ff2525;
|
||||
padding-top: 20rpx;
|
||||
}
|
||||
.select-coupons .coupons-list .slot-radio {
|
||||
position: absolute;
|
||||
right: 22rpx;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
display: inline-block;
|
||||
}
|
||||
.select-coupons .coupons-list .slot-radio .wr-check-filled {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
.select-coupons .coupons-list .slot-radio .check {
|
||||
width: 36rpx;
|
||||
}
|
||||
.select-coupons .coupons-list .slot-radio .text-primary {
|
||||
color: #fa4126;
|
||||
}
|
||||
.select-coupons .coupons-list .slot-radio .wr-check {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
.select-coupons .coupons-list .slot-radio .wr-uncheck {
|
||||
font-size: 36rpx;
|
||||
color: #999;
|
||||
}
|
||||
.select-coupons .couponp-empty-wrap {
|
||||
padding: 40rpx;
|
||||
}
|
||||
.select-coupons .couponp-empty-wrap .couponp-empty-img {
|
||||
display: block;
|
||||
width: 240rpx;
|
||||
height: 240rpx;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.select-coupons .couponp-empty-wrap .couponp-empty-title {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
text-align: center;
|
||||
line-height: 40rpx;
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
|
||||
/* 新增：确认按钮区域样式 */
|
||||
.select-coupons .coupons-actions {
|
||||
width: 100%;
|
||||
padding: 20rpx 32rpx 32rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.select-coupons .action-buttons {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.select-coupons .cancel-btn,
|
||||
.select-coupons .confirm-btn {
|
||||
flex: 1;
|
||||
height: 88rpx;
|
||||
text-align: center;
|
||||
line-height: 88rpx;
|
||||
font-size: 32rpx;
|
||||
border-radius: 44rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.select-coupons .cancel-btn {
|
||||
border: 2rpx solid #dddddd;
|
||||
color: #333333;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.select-coupons .confirm-btn {
|
||||
border: 2rpx solid #fa4126;
|
||||
background-color: #fa4126;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.select-coupons .coupons-cover {
|
||||
height: 112rpx;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
margin-top: 30rpx;
|
||||
padding: 12rpx 32rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.select-coupons .coupons-cover .btn {
|
||||
width: 332rpx;
|
||||
height: 88rpx;
|
||||
text-align: center;
|
||||
line-height: 88rpx;
|
||||
font-size: 32rpx;
|
||||
border-radius: 44rpx;
|
||||
box-sizing: border-box;
|
||||
border: 2rpx solid #dddddd;
|
||||
color: #333333;
|
||||
}
|
||||
.select-coupons .coupons-cover .red {
|
||||
border-color: #fa4126;
|
||||
background-color: #fa4126;
|
||||
color: #ffffff;
|
||||
}
|
||||
@@ -0,0 +1,451 @@
|
||||
import dayjs from 'dayjs';
|
||||
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: [],
|
||||
tempSelectedList: [], // 临时选择状态，用于确认前的预览
|
||||
couponsList: [],
|
||||
orderSureCouponList: [],
|
||||
promotionGoodsList: [],
|
||||
},
|
||||
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 === couponId ||
|
||||
selectedCoupon.couponId === couponId ||
|
||||
selectedCoupon.id === couponId;
|
||||
});
|
||||
|
||||
console.log(`initData - 优惠券 ${name} (ID: ${couponId}) 是否已选: ${isSelected}`);
|
||||
|
||||
if (isSelected) {
|
||||
selectedNum++;
|
||||
selectedList.push({
|
||||
userCouponId: coupon.id, // 用户优惠券ID，用于后端验证所有权
|
||||
id: coupon.id, // 保持兼容性
|
||||
couponId,
|
||||
promotionId: couponId, // 使用couponId作为promotionId
|
||||
storeId: this.storeId,
|
||||
key: couponId,
|
||||
// 添加调试信息
|
||||
_debug: {
|
||||
userCouponId: coupon.id,
|
||||
couponTemplateId: couponId
|
||||
}
|
||||
});
|
||||
}
|
||||
const val = value; // 直接使用原始值，ui-coupon-card组件会自动处理单位转换
|
||||
return {
|
||||
id: coupon.id, // 用户优惠券ID，用于后端验证所有权
|
||||
key: couponId, // 保持原有的key逻辑
|
||||
couponId: couponId, // 优惠券模板ID
|
||||
title: name,
|
||||
isSelected: isSelected,
|
||||
timeLimit: this.formatTimeLimit(startTime, endTime),
|
||||
value: val,
|
||||
status: status === -1 ? 'useless' : 'default',
|
||||
desc: condition,
|
||||
type,
|
||||
tag: '',
|
||||
};
|
||||
});
|
||||
console.log('initData设置数据:', { selectedList, couponsList, reduce, selectedNum });
|
||||
this.setData({
|
||||
selectedList,
|
||||
couponsList,
|
||||
reduce,
|
||||
selectedNum,
|
||||
});
|
||||
},
|
||||
selectCoupon(e) {
|
||||
const { key } = e.currentTarget.dataset;
|
||||
const { couponsList } = this.data;
|
||||
|
||||
// 先清除所有选中状态（假设一次只能选择一张优惠券）
|
||||
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 tempSelectedListForBackend = couponSelected.map(coupon => ({
|
||||
userCouponId: coupon.userCouponId || coupon.id, // 用户优惠券ID，用于后端验证所有权
|
||||
id: coupon.id, // 保持兼容性
|
||||
couponId: coupon.couponId, // 优惠券模板ID，用于获取优惠券信息
|
||||
key: coupon.key,
|
||||
promotionId: coupon.couponId, // 使用couponId作为promotionId
|
||||
storeId: this.storeId,
|
||||
// 添加调试信息
|
||||
_debug: {
|
||||
originalCoupon: coupon,
|
||||
userCouponId: coupon.userCouponId || coupon.id,
|
||||
couponTemplateId: coupon.couponId
|
||||
}
|
||||
}));
|
||||
|
||||
// 只更新临时选择状态和UI显示，不触发sure事件
|
||||
this.setData({
|
||||
tempSelectedList: tempSelectedListForBackend,
|
||||
couponsList: [...couponsList],
|
||||
});
|
||||
|
||||
console.log('优惠券临时选择:', {
|
||||
selectedKey: key,
|
||||
selectedCoupon,
|
||||
couponSelected,
|
||||
tempSelectedListForBackend
|
||||
});
|
||||
},
|
||||
hide() {
|
||||
this.setData({
|
||||
couponsShow: false,
|
||||
});
|
||||
},
|
||||
onPopupVisibleChange(e) {
|
||||
const { visible } = e.detail;
|
||||
console.log('弹窗状态变化:', visible);
|
||||
|
||||
// 只有当弹窗被关闭时才触发父组件的状态更新
|
||||
if (!visible && this.data.couponsShow) {
|
||||
// 通知父组件关闭弹窗
|
||||
this.triggerEvent('close');
|
||||
}
|
||||
},
|
||||
async coupons(params = {}) {
|
||||
console.log('coupons方法被调用:', params);
|
||||
try {
|
||||
// 计算订单总金额
|
||||
const calculatedAmount = this.calculateOrderAmount();
|
||||
// 确保订单金额至少为1，避免后端验证错误
|
||||
const orderAmount = calculatedAmount > 0 ? calculatedAmount : 100;
|
||||
console.log('计算的订单金额:', calculatedAmount, '使用的订单金额:', orderAmount);
|
||||
|
||||
// 调用API获取可用优惠券
|
||||
const response = await request({
|
||||
url: `/coupons/order/available?order_amount=${orderAmount}`,
|
||||
method: 'GET'
|
||||
});
|
||||
|
||||
console.log('优惠券API响应:', response);
|
||||
|
||||
if (response.code === 200 && response.data) {
|
||||
const formattedData = this.formatCouponsData(response.data);
|
||||
console.log('格式化后的优惠券数据:', formattedData);
|
||||
|
||||
// 返回符合initData期望的格式
|
||||
return {
|
||||
couponResultList: formattedData.map(coupon => ({
|
||||
status: coupon.status === 'default' ? 1 : 0,
|
||||
id: coupon.id, // 用户优惠券ID
|
||||
couponVO: {
|
||||
couponId: coupon.couponId,
|
||||
name: coupon.name,
|
||||
type: coupon.type,
|
||||
value: coupon.value,
|
||||
condition: coupon.desc,
|
||||
startTime: coupon.startTime,
|
||||
endTime: coupon.endTime
|
||||
}
|
||||
})),
|
||||
reduce: 0
|
||||
};
|
||||
} else {
|
||||
console.error('获取优惠券失败:', response.message);
|
||||
return { couponResultList: [], reduce: 0 };
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取优惠券异常:', error);
|
||||
// 如果API调用失败，返回空数据而不是mock数据
|
||||
// 避免使用硬编码的优惠券ID导致权限错误
|
||||
console.log('API调用失败，返回空优惠券列表');
|
||||
return {
|
||||
couponResultList: [],
|
||||
reduce: 0
|
||||
};
|
||||
}
|
||||
},
|
||||
|
||||
// 计算订单总金额
|
||||
calculateOrderAmount() {
|
||||
const { promotionGoodsList } = this.data;
|
||||
let totalAmount = 0;
|
||||
|
||||
if (promotionGoodsList && promotionGoodsList.length > 0) {
|
||||
promotionGoodsList.forEach(store => {
|
||||
if (store.goodsList && store.goodsList.length > 0) {
|
||||
store.goodsList.forEach(item => {
|
||||
totalAmount += (item.price || 0) * (item.quantity || 1);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return totalAmount;
|
||||
},
|
||||
|
||||
// 格式化优惠券数据
|
||||
formatCouponsData(coupons) {
|
||||
const { orderSureCouponList } = this.data;
|
||||
console.log('formatCouponsData - orderSureCouponList:', orderSureCouponList);
|
||||
|
||||
return coupons.map(userCoupon => {
|
||||
const coupon = userCoupon.coupon;
|
||||
|
||||
// 检查当前优惠券是否在已选列表中
|
||||
const isSelected = orderSureCouponList && orderSureCouponList.some(selectedCoupon => {
|
||||
return selectedCoupon.key === userCoupon.id ||
|
||||
selectedCoupon.couponId === coupon.id ||
|
||||
selectedCoupon.id === userCoupon.id;
|
||||
});
|
||||
|
||||
console.log(`优惠券 ${coupon.name} (ID: ${coupon.id}) 是否已选: ${isSelected}`);
|
||||
|
||||
return {
|
||||
id: userCoupon.id,
|
||||
key: userCoupon.id, // 添加key字段用于选择
|
||||
userCouponId: userCoupon.id, // 确保userCouponId字段存在，这是用户优惠券表的主键
|
||||
couponId: coupon.id, // 优惠券模板ID
|
||||
name: coupon.name,
|
||||
title: coupon.name, // 添加title字段映射到name
|
||||
type: coupon.type,
|
||||
value: coupon.value, // 保持原始值，ui-coupon-card组件会自动除以100
|
||||
minAmount: coupon.min_amount,
|
||||
desc: this.getCouponDesc(coupon),
|
||||
timeLimit: this.formatTimeLimit(coupon.start_time, coupon.end_time),
|
||||
startTime: coupon.start_time,
|
||||
endTime: coupon.end_time,
|
||||
status: userCoupon.status === 0 ? 'default' : 'disabled',
|
||||
tag: '', // 添加tag字段
|
||||
isSelected: isSelected // 根据orderSureCouponList设置选中状态
|
||||
};
|
||||
});
|
||||
},
|
||||
|
||||
// 获取优惠券描述
|
||||
getCouponDesc(coupon) {
|
||||
if (coupon.type === 1) { // 满减券
|
||||
if (coupon.min_amount > 0) {
|
||||
return `满${coupon.min_amount/100}元减${coupon.value/100}元`;
|
||||
}
|
||||
return `立减${coupon.value/100}元`;
|
||||
} else if (coupon.type === 2) { // 折扣券
|
||||
return `${coupon.value/10}折`;
|
||||
} else if (coupon.type === 3) { // 免邮券
|
||||
return '免运费';
|
||||
}
|
||||
return coupon.description || '优惠券';
|
||||
},
|
||||
|
||||
// 格式化时间限制
|
||||
formatTimeLimit(startTime, endTime) {
|
||||
// 检查时间数据是否有效
|
||||
if (!startTime || !endTime) {
|
||||
console.warn('formatTimeLimit: 时间数据无效', { startTime, endTime });
|
||||
return '有效期待确认';
|
||||
}
|
||||
|
||||
try {
|
||||
// 处理不同格式的时间数据
|
||||
let start, end;
|
||||
|
||||
// 如果是时间戳（数字或数字字符串）
|
||||
if (typeof startTime === 'number' || (typeof startTime === 'string' && /^\d+$/.test(startTime))) {
|
||||
start = dayjs(Number(startTime));
|
||||
} else {
|
||||
start = dayjs(startTime);
|
||||
}
|
||||
|
||||
if (typeof endTime === 'number' || (typeof endTime === 'string' && /^\d+$/.test(endTime))) {
|
||||
end = dayjs(Number(endTime));
|
||||
} else {
|
||||
end = dayjs(endTime);
|
||||
}
|
||||
|
||||
// 验证日期是否有效
|
||||
if (!start.isValid() || !end.isValid()) {
|
||||
console.warn('formatTimeLimit: 日期解析失败', { startTime, endTime });
|
||||
return '有效期待确认';
|
||||
}
|
||||
|
||||
return `${start.format('YYYY.MM.DD')} - ${end.format('YYYY.MM.DD')}`;
|
||||
} catch (error) {
|
||||
console.error('formatTimeLimit: 格式化时间出错', error, { startTime, endTime });
|
||||
return '有效期待确认';
|
||||
}
|
||||
},
|
||||
|
||||
// 确认选择优惠券
|
||||
onConfirm() {
|
||||
const { tempSelectedList, couponsList } = this.data;
|
||||
|
||||
console.log('确认选择优惠券:', { tempSelectedList });
|
||||
|
||||
// 为传递给后端的优惠券数据添加完整字段
|
||||
const completeSelectedList = tempSelectedList.map(selectedCoupon => {
|
||||
// 从couponsList中找到对应的完整优惠券信息
|
||||
const fullCouponInfo = couponsList.find(coupon => coupon.key === selectedCoupon.key);
|
||||
|
||||
return {
|
||||
...selectedCoupon,
|
||||
// 确保userCouponId字段正确传递（这是用户优惠券表的ID，用于后端验证权限）
|
||||
userCouponId: selectedCoupon.userCouponId || selectedCoupon.id,
|
||||
// 添加后端计算折扣所需的关键字段
|
||||
status: 'default', // 确保状态为default，这样后端才会计算折扣
|
||||
type: fullCouponInfo ? fullCouponInfo.type : 1, // 优惠券类型
|
||||
value: fullCouponInfo ? fullCouponInfo.value : 0, // 优惠券面值
|
||||
name: fullCouponInfo ? fullCouponInfo.title : '', // 优惠券名称
|
||||
desc: fullCouponInfo ? fullCouponInfo.desc : '', // 优惠券描述
|
||||
};
|
||||
});
|
||||
|
||||
console.log('完整的优惠券数据:', { completeSelectedList });
|
||||
console.log('优惠券ID字段检查:', completeSelectedList.map(coupon => ({
|
||||
userCouponId: coupon.userCouponId,
|
||||
id: coupon.id,
|
||||
couponId: coupon.couponId
|
||||
})));
|
||||
|
||||
// 将临时选择状态应用到正式状态
|
||||
this.setData({
|
||||
selectedList: completeSelectedList,
|
||||
});
|
||||
|
||||
// 触发sure事件，通知父组件
|
||||
this.triggerEvent('sure', {
|
||||
selectedList: completeSelectedList,
|
||||
});
|
||||
|
||||
console.log('优惠券选择已确认并通知父组件');
|
||||
},
|
||||
|
||||
// 取消选择，恢复到原始状态
|
||||
onCancel() {
|
||||
const { selectedList, couponsList } = this.data;
|
||||
|
||||
console.log('取消优惠券选择，恢复原始状态');
|
||||
|
||||
// 恢复优惠券列表的选中状态到确认前的状态
|
||||
couponsList.forEach((coupon) => {
|
||||
coupon.isSelected = false;
|
||||
});
|
||||
|
||||
// 如果有之前确认的选择，恢复其选中状态
|
||||
if (selectedList && selectedList.length > 0) {
|
||||
selectedList.forEach(selected => {
|
||||
const coupon = couponsList.find(c => c.key === selected.key);
|
||||
if (coupon) {
|
||||
coupon.isSelected = true;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 清空临时选择状态，恢复UI
|
||||
this.setData({
|
||||
tempSelectedList: [],
|
||||
couponsList: [...couponsList],
|
||||
});
|
||||
|
||||
// 触发close事件，关闭弹窗
|
||||
this.triggerEvent('close');
|
||||
|
||||
console.log('优惠券选择已取消');
|
||||
},
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"t-popup": "tdesign-miniprogram/popup/popup",
|
||||
"t-icon": "tdesign-miniprogram/icon/icon",
|
||||
"t-image": "/components/webp-image/index",
|
||||
"wr-price": "/components/price/index",
|
||||
"coupon-card": "/components/promotion/ui-coupon-card/index"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
<wxs src="./selectCoupon.wxs" module="m1" />
|
||||
|
||||
|
||||
<t-popup visible="{{couponsShow}}" placement="bottom" bind:visible-change="onPopupVisibleChange">
|
||||
<view class="select-coupons">
|
||||
<view class="title">选择优惠券</view>
|
||||
<block wx:if="{{couponsList && couponsList.length > 0}}">
|
||||
<view class="info">
|
||||
<block wx:if="{{!selectedNum}}">你有{{couponsList.length}}张可用优惠券</block>
|
||||
<block wx:else>
|
||||
已选中{{selectedNum}}张推荐优惠券, 共抵扣
|
||||
<wr-price fill="{{false}}" price="{{reduce || 0}}" />
|
||||
</block>
|
||||
</view>
|
||||
<scroll-view class="coupons-list" scroll-y="true">
|
||||
<view class="coupons-wrap">
|
||||
<block wx:for="{{couponsList}}" wx:key="index" wx:for-item="coupon">
|
||||
<coupon-card
|
||||
title="{{coupon.title}}"
|
||||
type="{{coupon.type}}"
|
||||
status="{{coupon.status}}"
|
||||
desc="{{coupon.desc}}"
|
||||
value="{{coupon.value}}"
|
||||
tag="{{coupon.tag}}"
|
||||
timeLimit="{{coupon.timeLimit}}"
|
||||
userCouponId="{{coupon.id}}"
|
||||
couponTemplateId="{{coupon.couponId}}"
|
||||
>
|
||||
<view class="slot-radio" slot="operator">
|
||||
<t-icon bindtap="selectCoupon" data-key="{{coupon.key}}" name="{{coupon.isSelected ? 'check-circle-filled' : 'circle'}}" color="#fa4126" size="40rpx"/>
|
||||
</view>
|
||||
</coupon-card>
|
||||
<view class="disable" wx:if="{{coupon.status == 'useless'}}">此优惠券不能和已勾选的优惠券叠加使用</view>
|
||||
</block>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</block>
|
||||
<view wx:else class="couponp-empty-wrap">
|
||||
<t-image t-class="couponp-empty-img" src="{{emptyCouponImg}}" />
|
||||
<view class="couponp-empty-title">暂无优惠券</view>
|
||||
</view>
|
||||
<view class="coupons-cover" />
|
||||
|
||||
<!-- 确认按钮区域 -->
|
||||
<view class="confirm-buttons">
|
||||
<view class="cancel-btn" bindtap="onCancel">取消</view>
|
||||
<view class="confirm-btn" bindtap="onConfirm">确定</view>
|
||||
</view>
|
||||
</view>
|
||||
</t-popup>
|
||||
|
||||
@@ -0,0 +1,144 @@
|
||||
.select-coupons {
|
||||
background: #fff;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
padding-top: 28rpx;
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
.select-coupons .title {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
line-height: 44rpx;
|
||||
}
|
||||
.select-coupons .info {
|
||||
width: 100%;
|
||||
height: 34rpx;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
line-height: 34rpx;
|
||||
margin: 20rpx 0;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
.select-coupons .info .price {
|
||||
color: #fa4126;
|
||||
}
|
||||
.select-coupons .coupons-list {
|
||||
max-height: 500rpx;
|
||||
}
|
||||
.select-coupons .coupons-list .coupons-wrap {
|
||||
padding: 0rpx 20rpx;
|
||||
}
|
||||
.select-coupons .coupons-list .disable {
|
||||
font-size: 24rpx;
|
||||
color: #ff2525;
|
||||
padding-top: 20rpx;
|
||||
}
|
||||
.select-coupons .coupons-list .slot-radio {
|
||||
position: absolute;
|
||||
right: 22rpx;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
display: inline-block;
|
||||
}
|
||||
.select-coupons .coupons-list .slot-radio .wr-check-filled {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
.select-coupons .coupons-list .slot-radio .check {
|
||||
width: 36rpx;
|
||||
}
|
||||
.select-coupons .coupons-list .slot-radio .text-primary {
|
||||
color: #fa4126;
|
||||
}
|
||||
.select-coupons .coupons-list .slot-radio .wr-check {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
.select-coupons .coupons-list .slot-radio .wr-uncheck {
|
||||
font-size: 36rpx;
|
||||
color: #999;
|
||||
}
|
||||
.select-coupons .couponp-empty-wrap {
|
||||
padding: 40rpx;
|
||||
}
|
||||
.select-coupons .couponp-empty-wrap .couponp-empty-img {
|
||||
display: block;
|
||||
width: 240rpx;
|
||||
height: 240rpx;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.select-coupons .couponp-empty-wrap .couponp-empty-title {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
text-align: center;
|
||||
line-height: 40rpx;
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
.select-coupons .coupons-cover {
|
||||
height: 112rpx;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
margin-top: 30rpx;
|
||||
padding: 12rpx 32rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.select-coupons .coupons-cover .btn {
|
||||
width: 332rpx;
|
||||
height: 88rpx;
|
||||
text-align: center;
|
||||
line-height: 88rpx;
|
||||
font-size: 32rpx;
|
||||
border-radius: 44rpx;
|
||||
box-sizing: border-box;
|
||||
border: 2rpx solid #dddddd;
|
||||
color: #333333;
|
||||
}
|
||||
.select-coupons .coupons-cover .red {
|
||||
border-color: #fa4126;
|
||||
background-color: #fa4126;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* 确认按钮区域样式 */
|
||||
.select-coupons .confirm-buttons {
|
||||
display: flex;
|
||||
padding: 32rpx;
|
||||
background-color: #ffffff;
|
||||
border-top: 1rpx solid #f0f0f0;
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.select-coupons .cancel-btn,
|
||||
.select-coupons .confirm-btn {
|
||||
flex: 1;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
text-align: center;
|
||||
font-size: 32rpx;
|
||||
border-radius: 44rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.select-coupons .cancel-btn {
|
||||
background-color: #f8f8f8;
|
||||
color: #666666;
|
||||
border: 1rpx solid #e0e0e0;
|
||||
}
|
||||
|
||||
.select-coupons .confirm-btn {
|
||||
background-color: #fa4126;
|
||||
color: #ffffff;
|
||||
border: 1rpx solid #fa4126;
|
||||
}
|
||||
|
||||
.select-coupons .cancel-btn:active {
|
||||
background-color: #e8e8e8;
|
||||
}
|
||||
|
||||
.select-coupons .confirm-btn:active {
|
||||
background-color: #e03618;
|
||||
}
|
||||
Reference in New Issue
Block a user