Initial commit
This commit is contained in:
sjk
225
miniprogram/pages/coupon/coupon-list/index.js
Normal file
225
miniprogram/pages/coupon/coupon-list/index.js
Normal file
@@ -0,0 +1,225 @@
|
||||
import { fetchUserCoupons } from '../../../services/coupon/index';
|
||||
|
||||
Page({
|
||||
data: {
|
||||
status: 0,
|
||||
list: [
|
||||
{
|
||||
text: '可使用',
|
||||
key: 0,
|
||||
},
|
||||
{
|
||||
text: '已使用',
|
||||
key: 1,
|
||||
},
|
||||
{
|
||||
text: '已失效',
|
||||
key: 2,
|
||||
},
|
||||
],
|
||||
|
||||
couponList: [],
|
||||
loading: false,
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
this.init();
|
||||
},
|
||||
|
||||
onShow() {
|
||||
// 页面显示时刷新数据，确保从领券中心返回后显示最新的优惠券
|
||||
this.fetchList();
|
||||
},
|
||||
|
||||
init() {
|
||||
this.fetchList();
|
||||
},
|
||||
|
||||
fetchList(status = this.data.status) {
|
||||
this.setData({ loading: true });
|
||||
|
||||
// 状态映射：前端页面状态 -> API状态
|
||||
// 前端: 0=可使用, 1=已使用, 2=已失效
|
||||
// API: 1=未使用, 2=已使用, 3=已过期
|
||||
const statusMap = {
|
||||
0: 1, // 可使用 -> 未使用(API状态1)
|
||||
1: 2, // 已使用 -> 已使用(API状态2)
|
||||
2: 3, // 已失效 -> 已过期(API状态3)
|
||||
};
|
||||
|
||||
const apiStatus = statusMap[status] || 1;
|
||||
|
||||
fetchUserCoupons(apiStatus)
|
||||
.then((result) => {
|
||||
console.log('获取用户优惠券成功:', result);
|
||||
console.log('API返回的原始数据:', JSON.stringify(result.data, null, 2));
|
||||
|
||||
// 检查第一个优惠券的数据结构
|
||||
if (result.data && result.data.length > 0) {
|
||||
const firstCoupon = result.data[0];
|
||||
console.log('第一个优惠券数据:', firstCoupon);
|
||||
console.log('优惠券详情:', firstCoupon.coupon);
|
||||
console.log('优惠券面值:', firstCoupon.coupon?.value);
|
||||
}
|
||||
|
||||
// 转换API数据格式为页面所需格式
|
||||
const couponList = this.transformCouponData(result.data || [], status);
|
||||
|
||||
this.setData({
|
||||
couponList,
|
||||
loading: false
|
||||
});
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('获取用户优惠券失败:', error);
|
||||
wx.showToast({
|
||||
title: '获取优惠券失败',
|
||||
icon: 'none'
|
||||
});
|
||||
this.setData({
|
||||
couponList: [],
|
||||
loading: false
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
// 转换API数据格式
|
||||
transformCouponData(apiData, status) {
|
||||
const statusMap = {
|
||||
0: 'default', // 可使用
|
||||
1: 'useless', // 已使用
|
||||
2: 'disabled' // 已失效
|
||||
};
|
||||
|
||||
return apiData.map((item, index) => {
|
||||
const coupon = item.coupon || item;
|
||||
|
||||
return {
|
||||
key: `coupon_${coupon.id || index}`,
|
||||
title: coupon.name || '优惠券',
|
||||
type: coupon.type || 1,
|
||||
value: coupon.value, // 直接使用原始值，让ui-coupon-card组件处理
|
||||
currency: this.getCurrency(coupon.type),
|
||||
tag: this.getCouponTag(coupon.type),
|
||||
desc: this.getCouponDesc(coupon),
|
||||
timeLimit: this.formatTimeLimit(coupon, status),
|
||||
status: statusMap[status] || 'default',
|
||||
};
|
||||
});
|
||||
},
|
||||
|
||||
// 格式化优惠券金额
|
||||
formatCouponValue(coupon) {
|
||||
console.log('formatCouponValue 输入参数:', coupon);
|
||||
console.log('优惠券类型:', coupon?.type, '面值:', coupon?.value);
|
||||
|
||||
if (!coupon || coupon.value === undefined) {
|
||||
console.log('优惠券数据无效，返回0');
|
||||
return '0';
|
||||
}
|
||||
|
||||
// 直接返回原始值，让ui-coupon-card组件处理单位转换
|
||||
// ui-coupon-card会自动将满减券除以100（分转元），折扣券除以10（85转8.5折）
|
||||
if (coupon.type === 1) { // 满减券
|
||||
console.log('满减券，返回原始值:', coupon.value);
|
||||
return coupon.value.toString(); // 返回原始分值，ui-coupon-card会除以100
|
||||
} else if (coupon.type === 2) { // 折扣券
|
||||
console.log('折扣券，返回原始值:', coupon.value);
|
||||
return coupon.value.toString(); // 返回原始值，ui-coupon-card会除以10
|
||||
} else if (coupon.type === 3) { // 免邮券
|
||||
console.log('免邮券，返回0');
|
||||
return '0';
|
||||
}
|
||||
console.log('未知类型，返回0');
|
||||
return '0';
|
||||
},
|
||||
|
||||
// 获取货币符号
|
||||
getCurrency(type) {
|
||||
if (type === 1) return '¥';
|
||||
if (type === 2) return '折';
|
||||
if (type === 3) return '';
|
||||
return '¥';
|
||||
},
|
||||
|
||||
// 获取优惠券标签
|
||||
getCouponTag(type) {
|
||||
if (type === 1) return '满减券';
|
||||
if (type === 2) return '折扣券';
|
||||
if (type === 3) return '免邮券';
|
||||
return '优惠券';
|
||||
},
|
||||
|
||||
// 获取优惠券描述
|
||||
getCouponDesc(coupon) {
|
||||
if (!coupon) {
|
||||
return '优惠券';
|
||||
}
|
||||
|
||||
if (coupon.type === 1) { // 满减券
|
||||
if (coupon.min_amount > 0) {
|
||||
return `满${(coupon.min_amount / 100).toFixed(0)}元可用`;
|
||||
}
|
||||
return '无门槛使用';
|
||||
} else if (coupon.type === 2) { // 折扣券
|
||||
if (coupon.min_amount > 0) {
|
||||
return `满${(coupon.min_amount / 100).toFixed(0)}元可用`;
|
||||
}
|
||||
return '全场商品可用';
|
||||
} else if (coupon.type === 3) { // 免邮券
|
||||
return '全场包邮';
|
||||
}
|
||||
return '优惠券';
|
||||
},
|
||||
|
||||
// 格式化时间限制
|
||||
formatTimeLimit(coupon, status) {
|
||||
if (status === 1) { // 已使用
|
||||
return `已于${this.formatDate(coupon.updated_at || new Date())}使用`;
|
||||
} else if (status === 2) { // 已失效
|
||||
return `已于${this.formatDate(coupon.end_time)}过期`;
|
||||
} else { // 可使用
|
||||
return `${this.formatDate(coupon.end_time)}前有效`;
|
||||
}
|
||||
},
|
||||
|
||||
// 格式化日期
|
||||
formatDate(dateStr) {
|
||||
const date = new Date(dateStr);
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
return `${year}.${month}.${day}`;
|
||||
},
|
||||
|
||||
tabChange(e) {
|
||||
const { value } = e.detail;
|
||||
|
||||
this.setData({ status: value });
|
||||
this.fetchList(value);
|
||||
},
|
||||
|
||||
goCouponCenterHandle() {
|
||||
wx.navigateTo({
|
||||
url: '/pages/coupon/coupon-center/index',
|
||||
});
|
||||
},
|
||||
|
||||
onPullDownRefresh_(e) {
|
||||
// 安全获取callback
|
||||
const callback = e && e.detail && e.detail.callback;
|
||||
|
||||
this.setData(
|
||||
{
|
||||
couponList: [],
|
||||
},
|
||||
() => {
|
||||
this.fetchList();
|
||||
// 确保callback存在且是函数
|
||||
if (callback && typeof callback === 'function') {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
);
|
||||
},
|
||||
});
|
||||
10
miniprogram/pages/coupon/coupon-list/index.json
Normal file
10
miniprogram/pages/coupon/coupon-list/index.json
Normal file
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"navigationBarTitleText": "优惠券",
|
||||
"usingComponents": {
|
||||
"t-pull-down-refresh": "tdesign-miniprogram/pull-down-refresh/pull-down-refresh",
|
||||
"t-tabs": "tdesign-miniprogram/tabs/tabs",
|
||||
"t-tab-panel": "tdesign-miniprogram/tab-panel/tab-panel",
|
||||
"t-icon": "tdesign-miniprogram/icon/icon",
|
||||
"coupon-card": "../components/coupon-card/index"
|
||||
}
|
||||
}
|
||||
74
miniprogram/pages/coupon/coupon-list/index.wxml
Normal file
74
miniprogram/pages/coupon/coupon-list/index.wxml
Normal file
@@ -0,0 +1,74 @@
|
||||
<t-tabs
|
||||
defaultValue="{{status}}"
|
||||
bind:change="tabChange"
|
||||
tabList="{{list}}"
|
||||
t-class="tabs-external__inner"
|
||||
t-class-item="tabs-external__item"
|
||||
t-class-active="tabs-external__active"
|
||||
t-class-track="tabs-external__track"
|
||||
>
|
||||
<t-tab-panel
|
||||
wx:for="{{list}}"
|
||||
wx:for-index="index"
|
||||
wx:for-item="tab"
|
||||
wx:key="key"
|
||||
label="{{tab.text}}"
|
||||
value="{{tab.key}}"
|
||||
/>
|
||||
</t-tabs>
|
||||
<view class="coupon-list-wrap">
|
||||
<t-pull-down-refresh
|
||||
t-class-indicator="t-class-indicator"
|
||||
id="t-pull-down-refresh"
|
||||
bind:refresh="onPullDownRefresh_"
|
||||
background="#fff"
|
||||
>
|
||||
<!-- 优惠券列表 -->
|
||||
<view wx:if="{{!loading && couponList.length > 0}}">
|
||||
<view class="coupon-list-item" wx:for="{{couponList}}" wx:key="key">
|
||||
<coupon-card couponDTO="{{item}}" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<view class="empty-state" wx:if="{{!loading && couponList.length === 0}}">
|
||||
<view class="empty-icon">
|
||||
<block wx:if="{{status === 0}}">🎫</block>
|
||||
<block wx:elif="{{status === 1}}">✅</block>
|
||||
<block wx:else>⏰</block>
|
||||
</view>
|
||||
<view class="empty-text">
|
||||
<block wx:if="{{status === 0}}">暂无可用优惠券</block>
|
||||
<block wx:elif="{{status === 1}}">暂无已使用优惠券</block>
|
||||
<block wx:else>暂无已失效优惠券</block>
|
||||
</view>
|
||||
<view class="empty-desc">
|
||||
<block wx:if="{{status === 0}}">去领券中心看看吧</block>
|
||||
<block wx:elif="{{status === 1}}">快去使用优惠券吧</block>
|
||||
<block wx:else>关注最新优惠活动</block>
|
||||
</view>
|
||||
<view class="empty-action" wx:if="{{status === 0}}" bind:tap="goCouponCenterHandle">
|
||||
<view class="empty-action-btn">去领券中心</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 加载状态 -->
|
||||
<view class="loading-state" wx:if="{{loading}}">
|
||||
<t-loading theme="circular" size="40rpx" />
|
||||
<view class="loading-text">加载中...</view>
|
||||
</view>
|
||||
</t-pull-down-refresh>
|
||||
|
||||
<view class="center-entry">
|
||||
<view class="center-entry-btn" bind:tap="goCouponCenterHandle">
|
||||
<view>领券中心</view>
|
||||
<t-icon
|
||||
name="chevron-right"
|
||||
color="#fa4126"
|
||||
size="40rpx"
|
||||
style="line-height: 28rpx;"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
146
miniprogram/pages/coupon/coupon-list/index.wxss
Normal file
146
miniprogram/pages/coupon/coupon-list/index.wxss
Normal file
@@ -0,0 +1,146 @@
|
||||
page {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.tabs-external__inner {
|
||||
height: 88rpx;
|
||||
width: 100%;
|
||||
line-height: 88rpx;
|
||||
z-index: 100;
|
||||
}
|
||||
.tabs-external__inner {
|
||||
font-size: 26rpx;
|
||||
color: #333333;
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.tabs-external__inner .tabs-external__track {
|
||||
background: #fa4126 !important;
|
||||
}
|
||||
|
||||
.tabs-external__inner .tabs-external__item {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.tabs-external__inner .tabs-external__active {
|
||||
font-size: 28rpx;
|
||||
color: #fa4126 !important;
|
||||
}
|
||||
|
||||
.tabs-external__inner.order-nav .order-nav-item .bottom-line {
|
||||
bottom: 12rpx;
|
||||
}
|
||||
|
||||
.coupon-list-wrap {
|
||||
margin-top: 32rpx;
|
||||
margin-left: 32rpx;
|
||||
margin-right: 32rpx;
|
||||
overflow-y: auto;
|
||||
padding-bottom: 100rpx;
|
||||
padding-bottom: calc(constant(safe-area-inset-top) + 100rpx);
|
||||
padding-bottom: calc(env(safe-area-inset-bottom) + 100rpx);
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.center-entry {
|
||||
box-sizing: content-box;
|
||||
border-top: 1rpx solid #dce0e4;
|
||||
background-color: #fff;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 100rpx;
|
||||
padding-bottom: 0;
|
||||
padding-bottom: constant(safe-area-inset-top);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
.center-entry-btn {
|
||||
color: #fa4126;
|
||||
font-size: 28rpx;
|
||||
text-align: center;
|
||||
line-height: 100rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100rpx;
|
||||
}
|
||||
|
||||
.coupon-list-wrap .t-pull-down-refresh__bar {
|
||||
background: #fff !important;
|
||||
}
|
||||
.t-class-indicator {
|
||||
color: #b9b9b9 !important;
|
||||
}
|
||||
|
||||
/* 空状态样式 */
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 120rpx 40rpx;
|
||||
text-align: center;
|
||||
min-height: 400rpx;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 120rpx;
|
||||
margin-bottom: 32rpx;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.empty-desc {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
margin-bottom: 40rpx;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.empty-action {
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.empty-action-btn {
|
||||
background: #fa4126;
|
||||
color: #fff;
|
||||
padding: 20rpx 40rpx;
|
||||
border-radius: 40rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
box-shadow: 0 4rpx 12rpx rgba(250, 65, 38, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.empty-action-btn:active {
|
||||
transform: scale(0.95);
|
||||
box-shadow: 0 2rpx 8rpx rgba(250, 65, 38, 0.2);
|
||||
}
|
||||
|
||||
/* 加载状态样式 */
|
||||
.loading-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 120rpx 40rpx;
|
||||
text-align: center;
|
||||
min-height: 400rpx;
|
||||
}
|
||||
|
||||
.loading-text {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
Reference in New Issue
Block a user