Initial commit
This commit is contained in:
sjk
BIN
miniprogram/pages/coupon/.DS_Store
vendored
Normal file
BIN
miniprogram/pages/coupon/.DS_Store
vendored
Normal file
Binary file not shown.
57
miniprogram/pages/coupon/components/coupon-card/index.js
Normal file
57
miniprogram/pages/coupon/components/coupon-card/index.js
Normal file
@@ -0,0 +1,57 @@
|
||||
const statusMap = {
|
||||
default: { text: '去使用', theme: 'primary' },
|
||||
useless: { text: '已使用', theme: 'default' },
|
||||
disabled: { text: '已过期', theme: 'default' },
|
||||
};
|
||||
Component({
|
||||
options: {
|
||||
addGlobalClass: true,
|
||||
multipleSlots: true, // 在组件定义时的选项中启用多slot支持
|
||||
},
|
||||
|
||||
externalClasses: ['coupon-class'],
|
||||
|
||||
properties: {
|
||||
couponDTO: {
|
||||
type: Object,
|
||||
value: {}, // 优惠券数据
|
||||
},
|
||||
},
|
||||
|
||||
data: {
|
||||
btnText: '',
|
||||
btnTheme: '',
|
||||
},
|
||||
|
||||
observers: {
|
||||
couponDTO: function (couponDTO) {
|
||||
if (!couponDTO) {
|
||||
return;
|
||||
}
|
||||
const statusInfo = statusMap[couponDTO.status] || statusMap.default;
|
||||
|
||||
this.setData({
|
||||
btnText: statusInfo.text,
|
||||
btnTheme: statusInfo.theme,
|
||||
});
|
||||
},
|
||||
},
|
||||
|
||||
attached() {},
|
||||
|
||||
methods: {
|
||||
// 跳转到详情页
|
||||
gotoDetail() {
|
||||
wx.navigateTo({
|
||||
url: `/pages/coupon/coupon-detail/index?id=${this.data.couponDTO.key}`,
|
||||
});
|
||||
},
|
||||
|
||||
// 跳转到商品列表
|
||||
gotoGoodsList() {
|
||||
wx.navigateTo({
|
||||
url: `/pages/coupon/coupon-activity-goods/index?id=${this.data.couponDTO.key}`,
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"ui-coupon-card": "/components/promotion/ui-coupon-card/index",
|
||||
"t-button": "tdesign-miniprogram/button/button"
|
||||
}
|
||||
}
|
||||
23
miniprogram/pages/coupon/components/coupon-card/index.wxml
Normal file
23
miniprogram/pages/coupon/components/coupon-card/index.wxml
Normal file
@@ -0,0 +1,23 @@
|
||||
<ui-coupon-card
|
||||
title="{{couponDTO.title || ''}}"
|
||||
type="{{couponDTO.type || ''}}"
|
||||
value="{{couponDTO.value || '0'}}"
|
||||
tag="{{couponDTO.tag || ''}}"
|
||||
desc="{{couponDTO.desc || ''}}"
|
||||
currency="{{couponDTO.currency || ''}}"
|
||||
timeLimit="{{couponDTO.timeLimit || ''}}"
|
||||
status="{{couponDTO.status || ''}}"
|
||||
bind:tap="gotoDetail"
|
||||
>
|
||||
<view slot="operator" class="coupon-btn-slot">
|
||||
<t-button
|
||||
t-class="coupon-btn-{{btnTheme}}"
|
||||
theme="{{btnTheme}}"
|
||||
variant="outline"
|
||||
shape="round"
|
||||
size="extra-small"
|
||||
bind:tap="gotoGoodsList"
|
||||
>{{btnText}}
|
||||
</t-button>
|
||||
</view>
|
||||
</ui-coupon-card>
|
||||
@@ -0,0 +1,9 @@
|
||||
.coupon-btn-default {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.coupon-btn-primary {
|
||||
--td-button-extra-small-padding-horizontal: 26rpx;
|
||||
--td-button-primary-outline-color: #fa4126;
|
||||
--td-button-primary-outline-border-color: #fa4126;
|
||||
}
|
||||
17
miniprogram/pages/coupon/components/floating-button/index.js
Normal file
17
miniprogram/pages/coupon/components/floating-button/index.js
Normal file
@@ -0,0 +1,17 @@
|
||||
Component({
|
||||
data: { icon: 'cart' },
|
||||
|
||||
properties: {
|
||||
count: {
|
||||
type: Number,
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
goToCart() {
|
||||
wx.switchTab({
|
||||
url: '/pages/cart/index',
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"t-icon": "tdesign-miniprogram/icon/icon"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
<view class="floating-button" bind:tap="goToCart">
|
||||
<view class="floating-inner-container">
|
||||
<t-icon
|
||||
prefix="wr"
|
||||
name="{{icon}}"
|
||||
size="42rpx"
|
||||
color="#FFFFFF"
|
||||
/>
|
||||
</view>
|
||||
<view class="floating-right-top">
|
||||
{{count}}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -0,0 +1,30 @@
|
||||
.floating-button {
|
||||
position: fixed;
|
||||
right: 20rpx;
|
||||
bottom: 108rpx;
|
||||
}
|
||||
|
||||
.floating-button .floating-inner-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 96rpx;
|
||||
width: 96rpx;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
opacity: 0.7;
|
||||
border-radius: 48rpx;
|
||||
}
|
||||
|
||||
.floating-button .floating-right-top {
|
||||
position: absolute;
|
||||
right: 0rpx;
|
||||
top: 0rpx;
|
||||
height: 28rpx;
|
||||
background: #fa4126;
|
||||
border-radius: 64rpx;
|
||||
font-weight: bold;
|
||||
font-size: 22rpx;
|
||||
line-height: 28rpx;
|
||||
color: #fff;
|
||||
padding: 0 8rpx;
|
||||
}
|
||||
78
miniprogram/pages/coupon/coupon-activity-goods/index.js
Normal file
78
miniprogram/pages/coupon/coupon-activity-goods/index.js
Normal file
@@ -0,0 +1,78 @@
|
||||
import { fetchCouponDetail } from '../../../services/coupon/index';
|
||||
import { fetchGoodsList } from '../../../services/good/fetchGoods';
|
||||
import Toast from 'tdesign-miniprogram/toast/index';
|
||||
|
||||
Page({
|
||||
data: {
|
||||
goods: [],
|
||||
detail: {},
|
||||
couponTypeDesc: '',
|
||||
showStoreInfoList: false,
|
||||
cartNum: 2,
|
||||
},
|
||||
|
||||
id: '',
|
||||
|
||||
onLoad(query) {
|
||||
const id = parseInt(query.id);
|
||||
this.id = id;
|
||||
|
||||
this.getCouponDetail(id);
|
||||
this.getGoodsList(id);
|
||||
},
|
||||
|
||||
getCouponDetail(id) {
|
||||
fetchCouponDetail(id).then(({ detail }) => {
|
||||
this.setData({ detail });
|
||||
if (detail.type === 2) {
|
||||
if (detail.base > 0) {
|
||||
this.setData({
|
||||
couponTypeDesc: `满${detail.base / 100}元${detail.value}折`,
|
||||
});
|
||||
} else {
|
||||
this.setData({ couponTypeDesc: `${detail.value}折` });
|
||||
}
|
||||
} else if (detail.type === 1) {
|
||||
if (detail.base > 0) {
|
||||
this.setData({
|
||||
couponTypeDesc: `满${detail.base / 100}元减${detail.value / 100}元`,
|
||||
});
|
||||
} else {
|
||||
this.setData({ couponTypeDesc: `减${detail.value / 100}元` });
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
getGoodsList(id) {
|
||||
fetchGoodsList(id).then((goods) => {
|
||||
this.setData({ goods });
|
||||
});
|
||||
},
|
||||
|
||||
openStoreList() {
|
||||
this.setData({
|
||||
showStoreInfoList: true,
|
||||
});
|
||||
},
|
||||
|
||||
closeStoreList() {
|
||||
this.setData({
|
||||
showStoreInfoList: false,
|
||||
});
|
||||
},
|
||||
|
||||
goodClickHandle(e) {
|
||||
const { index } = e.detail;
|
||||
const { spuId } = this.data.goods[index];
|
||||
wx.navigateTo({ url: `/pages/goods/details/index?spuId=${spuId}` });
|
||||
},
|
||||
|
||||
cartClickHandle() {
|
||||
Toast({
|
||||
context: this,
|
||||
selector: '#t-toast',
|
||||
message: '点击加入购物车',
|
||||
});
|
||||
},
|
||||
});
|
||||
10
miniprogram/pages/coupon/coupon-activity-goods/index.json
Normal file
10
miniprogram/pages/coupon/coupon-activity-goods/index.json
Normal file
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"navigationBarTitleText": "活动商品",
|
||||
"usingComponents": {
|
||||
"t-icon": "tdesign-miniprogram/icon/icon",
|
||||
"t-popup": "tdesign-miniprogram/popup/popup",
|
||||
"t-toast": "tdesign-miniprogram/toast/toast",
|
||||
"goods-list": "/components/goods-list/index",
|
||||
"floating-button": "../components/floating-button/index"
|
||||
}
|
||||
}
|
||||
41
miniprogram/pages/coupon/coupon-activity-goods/index.wxml
Normal file
41
miniprogram/pages/coupon/coupon-activity-goods/index.wxml
Normal file
@@ -0,0 +1,41 @@
|
||||
<view class="coupon-page-container">
|
||||
<view class="notice-bar-content">
|
||||
<view class="notice-bar-text">
|
||||
以下商品可使用
|
||||
<text class="height-light">{{couponTypeDesc}}</text>
|
||||
优惠券
|
||||
</view>
|
||||
<t-icon name="help-circle" size="32rpx" color="#AAAAAA" bind:tap="openStoreList" />
|
||||
</view>
|
||||
<view class="goods-list-container">
|
||||
<goods-list
|
||||
wr-class="goods-list-wrap"
|
||||
goodsList="{{goods}}"
|
||||
show-cart="{{false}}"
|
||||
bind:click="goodClickHandle"
|
||||
bind:addcart="cartClickHandle"
|
||||
/>
|
||||
</view>
|
||||
<floating-button count="{{cartNum}}" />
|
||||
<t-popup visible="{{showStoreInfoList}}" placement="bottom" bind:visible-change="closeStoreList">
|
||||
<t-icon slot="closeBtn" name="close" size="40rpx" bind:tap="closeStoreList" />
|
||||
<view class="popup-content-wrap">
|
||||
<view class="popup-content-title"> 规则详情 </view>
|
||||
<view class="desc-group-wrap">
|
||||
<view wx:if="{{detail && detail.timeLimit}}" class="item-wrap">
|
||||
<view class="item-title">优惠券有效时间</view>
|
||||
<view class="item-label">{{detail.timeLimit}}</view>
|
||||
</view>
|
||||
<view wx:if="{{detail && detail.desc}}" class="item-wrap">
|
||||
<view class="item-title">优惠券说明</view>
|
||||
<view class="item-label">{{detail.desc}}</view>
|
||||
</view>
|
||||
<view wx:if="{{detail && detail.useNotes}}" class="item-wrap">
|
||||
<view class="item-title">使用须知</view>
|
||||
<view class="item-label">{{detail.useNotes}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</t-popup>
|
||||
</view>
|
||||
<t-toast id="t-toast" />
|
||||
69
miniprogram/pages/coupon/coupon-activity-goods/index.wxss
Normal file
69
miniprogram/pages/coupon/coupon-activity-goods/index.wxss
Normal file
@@ -0,0 +1,69 @@
|
||||
page {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.coupon-page-container .notice-bar-content {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 8rpx 0;
|
||||
}
|
||||
|
||||
.coupon-page-container .notice-bar-text {
|
||||
font-size: 26rpx;
|
||||
line-height: 36rpx;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
margin-left: 24rpx;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
|
||||
.coupon-page-container .notice-bar-text .height-light {
|
||||
color: #fa550f;
|
||||
}
|
||||
|
||||
.coupon-page-container .popup-content-wrap {
|
||||
background-color: #fff;
|
||||
border-top-left-radius: 20rpx;
|
||||
border-top-right-radius: 20rpx;
|
||||
}
|
||||
|
||||
.coupon-page-container .popup-content-title {
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
height: 104rpx;
|
||||
line-height: 104rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.coupon-page-container .desc-group-wrap {
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
.coupon-page-container .desc-group-wrap .item-wrap {
|
||||
margin: 0 30rpx 30rpx;
|
||||
}
|
||||
|
||||
.coupon-page-container .desc-group-wrap .item-title {
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.coupon-page-container .desc-group-wrap .item-label {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
margin-top: 12rpx;
|
||||
white-space: pre-line;
|
||||
word-break: break-all;
|
||||
line-height: 34rpx;
|
||||
}
|
||||
|
||||
.coupon-page-container .goods-list-container {
|
||||
margin: 0 24rpx 24rpx;
|
||||
}
|
||||
|
||||
.coupon-page-container .goods-list-wrap {
|
||||
background: #f5f5f5 !important;
|
||||
}
|
||||
345
miniprogram/pages/coupon/coupon-center/index-browser.js
Normal file
345
miniprogram/pages/coupon/coupon-center/index-browser.js
Normal file
@@ -0,0 +1,345 @@
|
||||
// 浏览器环境下的优惠券中心页面逻辑
|
||||
|
||||
// API配置
|
||||
const API_CONFIG = {
|
||||
// 生产环境
|
||||
production: 'https://tral.cc/api/v1',
|
||||
// 开发环境
|
||||
development: 'http://localhost:8080/api/v1'
|
||||
};
|
||||
|
||||
// 当前环境 - 根据域名自动判断
|
||||
const CURRENT_ENV = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1'
|
||||
? 'development'
|
||||
: 'production';
|
||||
|
||||
const config = {
|
||||
apiBase: API_CONFIG[CURRENT_ENV]
|
||||
};
|
||||
|
||||
// 模拟请求函数
|
||||
async function request(options) {
|
||||
const { url, method = 'GET', data } = options;
|
||||
const fullUrl = config.apiBase + url;
|
||||
|
||||
try {
|
||||
const response = await fetch(fullUrl, {
|
||||
method,
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': localStorage.getItem('token') || ''
|
||||
},
|
||||
body: data ? JSON.stringify(data) : undefined
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
|
||||
}
|
||||
|
||||
const result = await response.json();
|
||||
return result;
|
||||
} catch (error) {
|
||||
console.error('请求失败:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
// 页面数据
|
||||
let pageData = {
|
||||
availableCoupons: [],
|
||||
loading: false
|
||||
};
|
||||
|
||||
// 页面初始化
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// 设置测试用的JWT token
|
||||
const testToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoxLCJleHAiOjE3NjEwMzE0ODQsImlhdCI6MTc2MDk0NTA4NH0.JAi7VnVTsA-qPegR9DCINr1nISrxakaQxf6aY4EZykU';
|
||||
localStorage.setItem('token', testToken);
|
||||
|
||||
fetchAvailableCoupons();
|
||||
});
|
||||
|
||||
// 获取可领取优惠券列表
|
||||
async function fetchAvailableCoupons() {
|
||||
try {
|
||||
setLoading(true);
|
||||
|
||||
// 调用真实API获取优惠券数据
|
||||
const response = await request({
|
||||
url: '/coupons',
|
||||
method: 'GET'
|
||||
});
|
||||
|
||||
const coupons = response.data || [];
|
||||
const formattedCoupons = formatCoupons(coupons);
|
||||
pageData.availableCoupons = formattedCoupons;
|
||||
|
||||
renderCouponList(formattedCoupons);
|
||||
setLoading(false);
|
||||
} catch (error) {
|
||||
console.error('获取可领取优惠券失败:', error);
|
||||
setLoading(false);
|
||||
showToast('获取优惠券失败，请稍后重试');
|
||||
}
|
||||
}
|
||||
|
||||
// 格式化优惠券数据
|
||||
function formatCoupons(coupons) {
|
||||
return coupons.map(coupon => {
|
||||
const remainingCount = coupon.total_count > 0 ? coupon.total_count - coupon.used_count : -1;
|
||||
|
||||
return {
|
||||
id: coupon.id,
|
||||
name: coupon.name,
|
||||
type: coupon.type,
|
||||
value: coupon.value,
|
||||
minAmount: coupon.min_amount,
|
||||
desc: getCouponDesc(coupon),
|
||||
timeLimit: formatTimeLimit(coupon.start_time, coupon.end_time),
|
||||
status: 'default',
|
||||
totalCount: coupon.total_count,
|
||||
usedCount: coupon.used_count,
|
||||
remainingCount: remainingCount
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
// 获取优惠券描述
|
||||
function getCouponDesc(coupon) {
|
||||
if (coupon.type === 1) { // 满减券
|
||||
if (coupon.min_amount > 0) {
|
||||
return `满${(coupon.min_amount / 100).toFixed(0)}元减${(coupon.value / 100).toFixed(0)}元`;
|
||||
}
|
||||
return `立减${(coupon.value / 100).toFixed(0)}元`;
|
||||
} else if (coupon.type === 2) { // 折扣券
|
||||
return `${coupon.value / 10}折`;
|
||||
} else if (coupon.type === 3) { // 免邮券
|
||||
return '免运费';
|
||||
}
|
||||
return coupon.description || '优惠券';
|
||||
}
|
||||
|
||||
// 格式化时间限制
|
||||
function formatTimeLimit(startTime, endTime) {
|
||||
return `${startTime} - ${endTime}`;
|
||||
}
|
||||
|
||||
// 渲染优惠券列表
|
||||
function renderCouponList(coupons) {
|
||||
const couponListElement = document.getElementById('couponList');
|
||||
const emptyStateElement = document.getElementById('emptyState');
|
||||
|
||||
if (!coupons || coupons.length === 0) {
|
||||
couponListElement.innerHTML = '';
|
||||
emptyStateElement.style.display = 'flex';
|
||||
return;
|
||||
}
|
||||
|
||||
emptyStateElement.style.display = 'none';
|
||||
|
||||
const couponHTML = coupons.map(coupon => {
|
||||
const valueDisplay = coupon.type === 1
|
||||
? `<span class="value-number">${coupon.value / 100}</span><span class="value-unit">元</span>`
|
||||
: coupon.type === 2
|
||||
? `<span class="value-number">${coupon.value / 10}</span><span class="value-unit">折</span>`
|
||||
: `<span class="value-text">免邮</span>`;
|
||||
|
||||
const stockText = coupon.remainingCount > 0
|
||||
? `剩余 ${coupon.remainingCount} 张`
|
||||
: '已抢完';
|
||||
|
||||
const isDisabled = coupon.remainingCount === 0;
|
||||
|
||||
return `
|
||||
<div class="coupon-item">
|
||||
<div class="coupon-card">
|
||||
<div class="coupon-main">
|
||||
<div class="coupon-left">
|
||||
<div class="coupon-value">
|
||||
${valueDisplay}
|
||||
</div>
|
||||
<div class="coupon-desc">${coupon.desc}</div>
|
||||
</div>
|
||||
|
||||
<div class="coupon-right">
|
||||
<div class="coupon-name">${coupon.name}</div>
|
||||
<div class="coupon-time">${coupon.timeLimit}</div>
|
||||
<div class="coupon-stock">${stockText}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="coupon-action">
|
||||
<button class="receive-btn ${isDisabled ? 'disabled' : ''}"
|
||||
data-coupon-id="${coupon.id}"
|
||||
${isDisabled ? 'disabled' : ''}>
|
||||
${isDisabled ? '已抢完' : '立即领取'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}).join('');
|
||||
|
||||
couponListElement.innerHTML = couponHTML;
|
||||
|
||||
// 添加事件委托处理按钮点击
|
||||
couponListElement.removeEventListener('click', handleCouponListClick);
|
||||
couponListElement.addEventListener('click', handleCouponListClick);
|
||||
}
|
||||
|
||||
// 处理优惠券列表点击事件
|
||||
function handleCouponListClick(event) {
|
||||
const target = event.target;
|
||||
|
||||
// 检查是否点击了领取按钮
|
||||
if (target.classList.contains('receive-btn') && !target.disabled) {
|
||||
const couponId = target.getAttribute('data-coupon-id');
|
||||
if (couponId) {
|
||||
receiveCoupon(event, parseInt(couponId));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 领取优惠券
|
||||
async function receiveCoupon(event, couponId) {
|
||||
// 阻止事件冒泡和默认行为
|
||||
if (event) {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
event.stopImmediatePropagation();
|
||||
}
|
||||
|
||||
if (!couponId) return;
|
||||
|
||||
// 检查优惠券是否还有库存
|
||||
const coupon = pageData.availableCoupons.find(c => c.id == couponId);
|
||||
if (!coupon || coupon.remainingCount === 0) {
|
||||
showToast('优惠券已抢完', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
// 防止重复点击
|
||||
const button = event.target;
|
||||
if (button.disabled) return;
|
||||
|
||||
button.disabled = true;
|
||||
button.textContent = '领取中...';
|
||||
|
||||
try {
|
||||
showLoading('正在领取优惠券...');
|
||||
|
||||
const response = await request({
|
||||
url: `/coupons/${couponId}/receive`,
|
||||
method: 'POST'
|
||||
});
|
||||
console.log('优惠券领取成功:', response);
|
||||
|
||||
hideLoading();
|
||||
|
||||
// 显示成功提示
|
||||
showToast(`🎉 ${coupon.name} 领取成功！`, 'success');
|
||||
|
||||
// 重新获取优惠券列表以确保数据同步
|
||||
await fetchAvailableCoupons();
|
||||
|
||||
} catch (error) {
|
||||
hideLoading();
|
||||
console.error('领取优惠券失败:', error);
|
||||
showToast(error.message || '领取失败，请重试', 'error');
|
||||
|
||||
// 重新获取列表以确保状态正确
|
||||
await fetchAvailableCoupons();
|
||||
}
|
||||
}
|
||||
|
||||
// 查看优惠券详情
|
||||
function viewCouponDetail(couponId) {
|
||||
showToast(`查看优惠券详情: ${couponId}`);
|
||||
}
|
||||
|
||||
// 返回
|
||||
function goBack() {
|
||||
if (window.history.length > 1) {
|
||||
window.history.back();
|
||||
} else {
|
||||
showToast('返回上一页');
|
||||
}
|
||||
}
|
||||
|
||||
// 设置加载状态
|
||||
function setLoading(loading) {
|
||||
pageData.loading = loading;
|
||||
const loadingElement = document.getElementById('loadingState');
|
||||
const couponListElement = document.getElementById('couponList');
|
||||
|
||||
if (loading) {
|
||||
loadingElement.style.display = 'flex';
|
||||
couponListElement.style.display = 'none';
|
||||
} else {
|
||||
loadingElement.style.display = 'none';
|
||||
couponListElement.style.display = 'block';
|
||||
}
|
||||
}
|
||||
|
||||
// 显示提示
|
||||
function showToast(message, type = 'info') {
|
||||
// 创建toast元素
|
||||
const toast = document.createElement('div');
|
||||
toast.style.cssText = `
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background: ${type === 'success' ? '#4CAF50' : type === 'error' ? '#f44336' : '#333'};
|
||||
color: white;
|
||||
padding: 12px 24px;
|
||||
border-radius: 4px;
|
||||
z-index: 10000;
|
||||
font-size: 14px;
|
||||
max-width: 80%;
|
||||
text-align: center;
|
||||
`;
|
||||
toast.textContent = message;
|
||||
|
||||
document.body.appendChild(toast);
|
||||
|
||||
setTimeout(() => {
|
||||
document.body.removeChild(toast);
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
// 显示加载中
|
||||
function showLoading(message = '加载中...') {
|
||||
const loading = document.createElement('div');
|
||||
loading.id = 'globalLoading';
|
||||
loading.style.cssText = `
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 10001;
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
`;
|
||||
|
||||
loading.innerHTML = `
|
||||
<div style="width: 40px; height: 40px; border: 3px solid #f3f3f3; border-top: 3px solid #fff; border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 16px;"></div>
|
||||
<div>${message}</div>
|
||||
`;
|
||||
|
||||
document.body.appendChild(loading);
|
||||
}
|
||||
|
||||
// 隐藏加载中
|
||||
function hideLoading() {
|
||||
const loading = document.getElementById('globalLoading');
|
||||
if (loading) {
|
||||
document.body.removeChild(loading);
|
||||
}
|
||||
}
|
||||
377
miniprogram/pages/coupon/coupon-center/index.css
Normal file
377
miniprogram/pages/coupon/coupon-center/index.css
Normal file
@@ -0,0 +1,377 @@
|
||||
/* 基础样式重置 */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 移动端优化 */
|
||||
html {
|
||||
/* 防止iOS Safari缩放 */
|
||||
-webkit-text-size-adjust: 100%;
|
||||
/* 防止横屏时字体缩放 */
|
||||
text-size-adjust: 100%;
|
||||
/* 平滑滚动 */
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
|
||||
background-color: #f5f5f5;
|
||||
line-height: 1.4;
|
||||
/* 支持安全区域 */
|
||||
padding-top: env(safe-area-inset-top);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
padding-left: env(safe-area-inset-left);
|
||||
padding-right: env(safe-area-inset-right);
|
||||
/* 移动端触摸优化 */
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
/* 防止橡皮筋效果 */
|
||||
overscroll-behavior: contain;
|
||||
}
|
||||
/* 主容器 */
|
||||
.coupon-center-container {
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
/* 适配移动端安全区域 */
|
||||
min-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
|
||||
padding-bottom: max(20px, env(safe-area-inset-bottom));
|
||||
/* 为固定标题栏留出空间 */
|
||||
padding-top: calc(44px + env(safe-area-inset-top));
|
||||
}
|
||||
|
||||
/* 页面头部 */
|
||||
.page-header {
|
||||
background: #ffffff;
|
||||
padding: 0;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
/* 状态栏高度适配 - 模拟微信小程序标准导航栏位置 */
|
||||
padding-top: env(safe-area-inset-top);
|
||||
height: calc(44px + env(safe-area-inset-top));
|
||||
}
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 16px;
|
||||
height: 44px;
|
||||
margin-top: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.header-back {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
transition: background-color 0.2s ease;
|
||||
position: absolute;
|
||||
left: 16px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.header-back:hover {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.header-back svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.header-back svg path {
|
||||
stroke: #333333;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
text-align: center;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.header-placeholder {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
/* 优惠券列表容器 */
|
||||
.coupon-list-container {
|
||||
padding: 12px;
|
||||
/* 适配移动端安全区域 */
|
||||
padding-left: max(12px, env(safe-area-inset-left));
|
||||
padding-right: max(12px, env(safe-area-inset-right));
|
||||
padding-bottom: max(20px, env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
/* 优惠券项 */
|
||||
.coupon-item {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.coupon-card {
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.coupon-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
/* 优惠券主体 */
|
||||
.coupon-main {
|
||||
display: flex;
|
||||
padding: 16px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.coupon-main::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 1px;
|
||||
height: 30px;
|
||||
background: linear-gradient(to bottom, transparent, #e5e5e5, transparent);
|
||||
}
|
||||
|
||||
.coupon-left {
|
||||
flex: 0 0 100px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
|
||||
color: #fff;
|
||||
border-radius: 6px;
|
||||
padding: 12px 8px;
|
||||
margin-right: 16px;
|
||||
min-height: 80px;
|
||||
}
|
||||
|
||||
.coupon-value {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.value-number {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.value-unit {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.value-text {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.coupon-desc {
|
||||
font-size: 11px;
|
||||
opacity: 0.9;
|
||||
text-align: center;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.coupon-right {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
.coupon-name {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 6px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.coupon-time {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.coupon-stock {
|
||||
font-size: 12px;
|
||||
color: #ff6b6b;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 领取按钮区域 */
|
||||
.coupon-action {
|
||||
padding: 12px 16px;
|
||||
background: #f8f9fa;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
.receive-btn {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.receive-btn:hover {
|
||||
background: linear-gradient(135deg, #ff5252, #ff7979);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.receive-btn.disabled {
|
||||
background: #ccc;
|
||||
color: #999;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.receive-btn.disabled:hover {
|
||||
transform: none;
|
||||
background: #ccc;
|
||||
}
|
||||
|
||||
.receive-btn:not(.disabled):active {
|
||||
transform: scale(0.98);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* 加载状态 */
|
||||
.loading-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 60px 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 3px solid #f3f3f3;
|
||||
border-top: 3px solid #ff6b6b;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.loading-text {
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* 空状态 */
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 60px 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 60px;
|
||||
margin-bottom: 16px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.empty-desc {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 响应式适配 */
|
||||
@media (max-width: 480px) {
|
||||
.coupon-left {
|
||||
flex: 0 0 80px;
|
||||
padding: 8px 6px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.value-number {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.coupon-name {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.coupon-main {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.coupon-action {
|
||||
padding: 10px 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 360px) {
|
||||
.header-content {
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.coupon-list-container {
|
||||
padding: 12px 8px;
|
||||
}
|
||||
|
||||
.coupon-left {
|
||||
flex: 0 0 70px;
|
||||
padding: 6px 4px;
|
||||
}
|
||||
|
||||
.value-number {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.coupon-desc {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
49
miniprogram/pages/coupon/coupon-center/index.html
Normal file
49
miniprogram/pages/coupon/coupon-center/index.html
Normal file
@@ -0,0 +1,49 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="light-content">
|
||||
<title>领券中心</title>
|
||||
<link rel="stylesheet" href="index.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="coupon-center-container">
|
||||
<!-- 页面标题 -->
|
||||
<header class="page-header">
|
||||
<div class="header-content">
|
||||
<div class="header-back" onclick="goBack()">
|
||||
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15 18L9 12L15 6" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="header-title">领券中心</div>
|
||||
<div class="header-placeholder">
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 优惠券列表 -->
|
||||
<div class="coupon-list-container" id="couponListContainer">
|
||||
<!-- 加载状态 -->
|
||||
<div class="loading-state" id="loadingState" style="display: none;">
|
||||
<div class="loading-spinner"></div>
|
||||
<div class="loading-text">加载中...</div>
|
||||
</div>
|
||||
|
||||
<!-- 优惠券列表将通过JavaScript动态生成 -->
|
||||
<div id="couponList"></div>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<div class="empty-state" id="emptyState" style="display: none;">
|
||||
<div class="empty-icon">🎫</div>
|
||||
<div class="empty-text">暂无可领取的优惠券</div>
|
||||
<div class="empty-desc">请稍后再来看看吧</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="index-browser.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
173
miniprogram/pages/coupon/coupon-center/index.js
Normal file
173
miniprogram/pages/coupon/coupon-center/index.js
Normal file
@@ -0,0 +1,173 @@
|
||||
import { request } from '../../../services/_utils/request';
|
||||
|
||||
Page({
|
||||
data: {
|
||||
availableCoupons: [], // 可领取的优惠券列表
|
||||
loading: false,
|
||||
refreshing: false,
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
this.fetchAvailableCoupons();
|
||||
},
|
||||
|
||||
onShow() {
|
||||
// 页面显示时刷新数据，以防用户已领取某些优惠券
|
||||
this.fetchAvailableCoupons();
|
||||
},
|
||||
|
||||
// 刷新数据
|
||||
onRefresh() {
|
||||
this.setData({ refreshing: true });
|
||||
this.fetchAvailableCoupons().finally(() => {
|
||||
this.setData({ refreshing: false });
|
||||
});
|
||||
},
|
||||
|
||||
// 获取可领取优惠券列表
|
||||
async fetchAvailableCoupons() {
|
||||
try {
|
||||
this.setData({ loading: true });
|
||||
|
||||
const response = await request({
|
||||
url: '/coupons',
|
||||
method: 'GET'
|
||||
});
|
||||
|
||||
const coupons = response.data || [];
|
||||
const formattedCoupons = this.formatCoupons(coupons);
|
||||
this.setData({
|
||||
availableCoupons: formattedCoupons,
|
||||
loading: false
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('获取可领取优惠券失败:', error);
|
||||
this.setData({ loading: false });
|
||||
wx.showToast({
|
||||
title: '获取优惠券失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// 格式化优惠券数据
|
||||
formatCoupons(coupons) {
|
||||
return coupons.map(coupon => {
|
||||
return {
|
||||
id: coupon.id,
|
||||
name: coupon.name,
|
||||
type: coupon.type,
|
||||
value: coupon.value,
|
||||
minAmount: coupon.min_amount,
|
||||
desc: this.getCouponDesc(coupon),
|
||||
timeLimit: this.formatTimeLimit(coupon.start_time, coupon.end_time),
|
||||
status: 'default', // 可领取状态
|
||||
totalCount: coupon.total_count,
|
||||
usedCount: coupon.used_count,
|
||||
remainingCount: coupon.total_count > 0 ? coupon.total_count - coupon.used_count : -1,
|
||||
isReceived: coupon.is_received || false // 是否已领取
|
||||
};
|
||||
});
|
||||
},
|
||||
|
||||
// 获取优惠券描述
|
||||
getCouponDesc(coupon) {
|
||||
if (coupon.type === 1) { // 满减券
|
||||
if (coupon.min_amount > 0) {
|
||||
return `满${(coupon.min_amount / 100).toFixed(0)}元减${(coupon.value / 100).toFixed(0)}元`;
|
||||
}
|
||||
return `立减${(coupon.value / 100).toFixed(0)}元`;
|
||||
} else if (coupon.type === 2) { // 折扣券
|
||||
return `${coupon.value / 10}折`;
|
||||
} else if (coupon.type === 3) { // 免邮券
|
||||
return '免运费';
|
||||
}
|
||||
return coupon.description || '优惠券';
|
||||
},
|
||||
|
||||
// 格式化时间限制
|
||||
formatTimeLimit(startTime, endTime) {
|
||||
const start = new Date(startTime);
|
||||
const end = new Date(endTime);
|
||||
const formatDate = (date) => {
|
||||
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}`;
|
||||
};
|
||||
return `${formatDate(start)} - ${formatDate(end)}`;
|
||||
},
|
||||
|
||||
// 领取优惠券
|
||||
async receiveCoupon(e) {
|
||||
const { couponid } = e.currentTarget.dataset;
|
||||
if (!couponid) return;
|
||||
|
||||
// 检查优惠券是否还有库存
|
||||
const coupon = this.data.availableCoupons.find(c => c.id == couponid);
|
||||
if (!coupon || coupon.remainingCount === 0) {
|
||||
wx.showToast({
|
||||
title: '优惠券已抢完',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// 检查是否已领取
|
||||
if (coupon.isReceived) {
|
||||
wx.showToast({
|
||||
title: '您已领取过该优惠券',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
wx.showLoading({ title: '领取中...' });
|
||||
|
||||
const response = await request({
|
||||
url: `/coupons/${couponid}/receive`,
|
||||
method: 'POST'
|
||||
});
|
||||
|
||||
wx.hideLoading();
|
||||
|
||||
wx.showToast({
|
||||
title: '领取成功',
|
||||
icon: 'success'
|
||||
});
|
||||
|
||||
// 设置刷新标识，确保返回其他页面时能刷新优惠券数据
|
||||
wx.setStorageSync('shouldRefreshCoupons', true);
|
||||
|
||||
// 重新获取优惠券列表
|
||||
this.fetchAvailableCoupons();
|
||||
} catch (error) {
|
||||
wx.hideLoading();
|
||||
console.error('领取优惠券失败:', error);
|
||||
wx.showToast({
|
||||
title: error.message || '领取失败，请重试',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// 下拉刷新
|
||||
onPullDownRefresh() {
|
||||
this.setData({ refreshing: true });
|
||||
this.fetchAvailableCoupons().finally(() => {
|
||||
this.setData({ refreshing: false });
|
||||
wx.stopPullDownRefresh();
|
||||
});
|
||||
},
|
||||
|
||||
// 查看优惠券详情
|
||||
viewCouponDetail(e) {
|
||||
const { couponid } = e.currentTarget.dataset;
|
||||
wx.navigateTo({
|
||||
url: `/pages/coupon/coupon-detail/index?id=${couponid}`
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
});
|
||||
9
miniprogram/pages/coupon/coupon-center/index.json
Normal file
9
miniprogram/pages/coupon/coupon-center/index.json
Normal file
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"navigationBarTitleText": "领券中心",
|
||||
"enablePullDownRefresh": true,
|
||||
"backgroundColor": "#f5f5f5",
|
||||
"usingComponents": {
|
||||
"t-icon": "tdesign-miniprogram/icon/icon",
|
||||
"t-loading": "tdesign-miniprogram/loading/loading"
|
||||
}
|
||||
}
|
||||
128
miniprogram/pages/coupon/coupon-center/index.wxml
Normal file
128
miniprogram/pages/coupon/coupon-center/index.wxml
Normal file
@@ -0,0 +1,128 @@
|
||||
<view class="coupon-center-container">
|
||||
|
||||
<!-- 优惠券列表 -->
|
||||
<view class="coupon-list-container">
|
||||
<block wx:if="{{!loading && availableCoupons.length > 0}}">
|
||||
<view class="coupon-item" wx:for="{{availableCoupons}}" wx:key="id">
|
||||
<view class="coupon-card {{item.isReceived ? 'received-card' : ''}} {{item.remainingCount === 0 ? 'soldout-card' : ''}}">
|
||||
<!-- 状态标签 - 移除已领取标签 -->
|
||||
<view class="coupon-status-tag soldout" wx:if="{{item.remainingCount === 0}}">
|
||||
<text class="status-icon">!</text>
|
||||
<text class="status-text">已抢完</text>
|
||||
</view>
|
||||
<view class="coupon-status-tag hot" wx:elif="{{item.remainingCount <= 10 && item.remainingCount > 0}}">
|
||||
<text class="status-icon">🔥</text>
|
||||
<text class="status-text">仅剩{{item.remainingCount}}张</text>
|
||||
</view>
|
||||
|
||||
<!-- 优惠券主体 -->
|
||||
<view class="coupon-main">
|
||||
<view class="coupon-left {{item.type === 1 ? 'type-amount' : item.type === 2 ? 'type-discount' : 'type-shipping'}}">
|
||||
<!-- 装饰元素 -->
|
||||
<view class="value-decoration"></view>
|
||||
|
||||
<view class="coupon-value">
|
||||
<block wx:if="{{item.type === 1}}">
|
||||
<text class="value-symbol">¥</text>
|
||||
<text class="value-number">{{item.value / 100}}</text>
|
||||
<text class="value-unit">元</text>
|
||||
</block>
|
||||
<block wx:elif="{{item.type === 2}}">
|
||||
<text class="value-number">{{item.value / 10}}</text>
|
||||
<text class="value-unit">折</text>
|
||||
</block>
|
||||
<block wx:else>
|
||||
<text class="value-text">免邮</text>
|
||||
</block>
|
||||
</view>
|
||||
<view class="coupon-desc">{{item.desc}}</view>
|
||||
</view>
|
||||
|
||||
<view class="coupon-right">
|
||||
<view class="coupon-header">
|
||||
<view class="coupon-name">{{item.name}}</view>
|
||||
<view class="coupon-type-badge" wx:if="{{item.type === 1}}">满减券</view>
|
||||
<view class="coupon-type-badge discount" wx:elif="{{item.type === 2}}">折扣券</view>
|
||||
<view class="coupon-type-badge shipping" wx:else>包邮券</view>
|
||||
</view>
|
||||
|
||||
<view class="coupon-details">
|
||||
<view class="detail-item">
|
||||
<text class="detail-icon">⏰</text>
|
||||
<text class="detail-text">{{item.timeLimit}}</text>
|
||||
</view>
|
||||
<view class="detail-item" wx:if="{{item.totalCount > 0}}">
|
||||
<text class="detail-icon">📦</text>
|
||||
<text class="detail-text">剩余 {{item.remainingCount}} 张</text>
|
||||
</view>
|
||||
<view class="detail-item" wx:if="{{item.minAmount > 0}}">
|
||||
<text class="detail-icon">💰</text>
|
||||
<text class="detail-text">满{{item.minAmount / 100}}元可用</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 领取按钮 -->
|
||||
<view class="coupon-action">
|
||||
<view
|
||||
class="receive-btn {{item.remainingCount === 0 ? 'disabled' : ''}} {{item.isReceived ? 'received' : ''}}"
|
||||
catchtap="{{item.isReceived ? '' : 'receiveCoupon'}}"
|
||||
data-couponid="{{item.id}}"
|
||||
>
|
||||
<view class="btn-content">
|
||||
<block wx:if="{{item.isReceived}}">
|
||||
<text class="btn-icon">✓</text>
|
||||
<text class="btn-text">已领取</text>
|
||||
</block>
|
||||
<block wx:elif="{{item.remainingCount === 0}}">
|
||||
<text class="btn-icon">😔</text>
|
||||
<text class="btn-text">已抢完</text>
|
||||
</block>
|
||||
<block wx:else>
|
||||
<text class="btn-icon">🎁</text>
|
||||
<text class="btn-text">立即领取</text>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<view class="empty-state" wx:if="{{!loading && availableCoupons.length === 0}}">
|
||||
<view class="empty-animation">
|
||||
<view class="empty-icon">🎫</view>
|
||||
<view class="empty-sparkles">
|
||||
<view class="sparkle sparkle-1">✨</view>
|
||||
<view class="sparkle sparkle-2">⭐</view>
|
||||
<view class="sparkle sparkle-3">💫</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="empty-content">
|
||||
<view class="empty-text">暂无可领取的优惠券</view>
|
||||
<view class="empty-desc">精彩活动即将上线，敬请期待</view>
|
||||
<view class="empty-action">
|
||||
<view class="refresh-btn" bindtap="onRefresh">
|
||||
<text class="refresh-icon">🔄</text>
|
||||
<text class="refresh-text">刷新试试</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 加载状态 -->
|
||||
<view class="loading-state" wx:if="{{loading}}">
|
||||
<view class="loading-animation">
|
||||
<t-loading theme="circular" size="40rpx" />
|
||||
<view class="loading-dots">
|
||||
<view class="dot dot-1"></view>
|
||||
<view class="dot dot-2"></view>
|
||||
<view class="dot dot-3"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="loading-text">正在为您寻找最优惠券...</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
817
miniprogram/pages/coupon/coupon-center/index.wxss
Normal file
817
miniprogram/pages/coupon/coupon-center/index.wxss
Normal file
@@ -0,0 +1,817 @@
|
||||
.coupon-center-container {
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
/* 页面头部 */
|
||||
.page-header {
|
||||
background: linear-gradient(135deg, #ff6b6b 0%, #ff8e8e 50%, #ffa8a8 100%);
|
||||
padding: 20rpx 0 0;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 背景装饰 */
|
||||
.header-bg-decoration {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.decoration-circle {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.circle-1 {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
top: -60rpx;
|
||||
right: 50rpx;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.circle-2 {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
top: 100rpx;
|
||||
right: -40rpx;
|
||||
animation-delay: 2s;
|
||||
}
|
||||
|
||||
.circle-3 {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
top: 50rpx;
|
||||
left: 30rpx;
|
||||
animation-delay: 4s;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0px) rotate(0deg); }
|
||||
50% { transform: translateY(-20rpx) rotate(180deg); }
|
||||
}
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 32rpx;
|
||||
margin-top: 20rpx;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.title-main {
|
||||
font-size: 36rpx;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.title-subtitle {
|
||||
font-size: 22rpx;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
|
||||
.header-placeholder {
|
||||
width: 48rpx;
|
||||
}
|
||||
|
||||
/* 统计信息 */
|
||||
.header-stats {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 32rpx;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
animation: slideInUp 0.8s ease-out 0.3s both;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.stat-item:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: 48rpx;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
|
||||
animation: fadeIn 1s ease-out 0.5s both;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 24rpx;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
margin-top: 8rpx;
|
||||
animation: fadeIn 1s ease-out 0.7s both;
|
||||
}
|
||||
|
||||
.stat-divider {
|
||||
width: 2rpx;
|
||||
height: 60rpx;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
margin: 0 40rpx;
|
||||
}
|
||||
|
||||
/* 优惠券列表容器 */
|
||||
.coupon-list-container {
|
||||
padding: 24rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
/* 优惠券项 */
|
||||
.coupon-item {
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
animation: slideInUp 0.6s ease-out;
|
||||
}
|
||||
|
||||
@keyframes slideInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30rpx);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideInLeft {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-30rpx);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideInRight {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(30rpx);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes glow {
|
||||
0%, 100% {
|
||||
box-shadow: 0 0 20rpx rgba(255, 107, 107, 0.3);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 40rpx rgba(255, 107, 107, 0.6);
|
||||
}
|
||||
}
|
||||
|
||||
.coupon-card {
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.12);
|
||||
position: relative;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border: 1rpx solid rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.coupon-card:active {
|
||||
transform: scale(0.98);
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
/* 卡片状态样式 */
|
||||
.coupon-card.received-card {
|
||||
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
|
||||
border-color: #0ea5e9;
|
||||
}
|
||||
|
||||
.coupon-card.soldout-card {
|
||||
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
|
||||
border-color: #cbd5e1;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* 状态标签 */
|
||||
.coupon-status-tag {
|
||||
position: absolute;
|
||||
top: 12rpx;
|
||||
right: 12rpx;
|
||||
background: linear-gradient(135deg, #10b981, #059669);
|
||||
color: #fff;
|
||||
padding: 6rpx 12rpx;
|
||||
border-radius: 16rpx;
|
||||
font-size: 18rpx;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
z-index: 3;
|
||||
box-shadow: 0 2rpx 8rpx rgba(16, 185, 129, 0.3);
|
||||
}
|
||||
|
||||
.coupon-status-tag.soldout {
|
||||
background: linear-gradient(135deg, #ef4444, #dc2626);
|
||||
box-shadow: 0 2rpx 8rpx rgba(239, 68, 68, 0.3);
|
||||
}
|
||||
|
||||
.coupon-status-tag.hot {
|
||||
background: linear-gradient(135deg, #f59e0b, #d97706);
|
||||
box-shadow: 0 2rpx 8rpx rgba(245, 158, 11, 0.3);
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { transform: scale(1); }
|
||||
50% { transform: scale(1.05); }
|
||||
}
|
||||
|
||||
.status-icon {
|
||||
margin-right: 4rpx;
|
||||
font-size: 16rpx;
|
||||
}
|
||||
|
||||
.status-text {
|
||||
font-size: 18rpx;
|
||||
}
|
||||
|
||||
/* 优惠券主体 */
|
||||
.coupon-main {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 20rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.coupon-left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
|
||||
color: #fff;
|
||||
border-radius: 12rpx;
|
||||
padding: 20rpx 16rpx;
|
||||
margin-right: 20rpx;
|
||||
width: 160rpx;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 不同类型的优惠券背景 */
|
||||
.coupon-left.type-amount {
|
||||
background: linear-gradient(135deg, #ff6b6b 0%, #ff8e8e 50%, #ffa8a8 100%);
|
||||
}
|
||||
|
||||
.coupon-left.type-discount {
|
||||
background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 50%, #c4b5fd 100%);
|
||||
}
|
||||
|
||||
.coupon-left.type-shipping {
|
||||
background: linear-gradient(135deg, #10b981 0%, #34d399 50%, #6ee7b7 100%);
|
||||
}
|
||||
|
||||
/* 装饰元素 */
|
||||
.value-decoration {
|
||||
position: absolute;
|
||||
top: -20rpx;
|
||||
right: -20rpx;
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 50%;
|
||||
animation: rotate 10s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.coupon-value {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
margin-bottom: 12rpx;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.value-symbol {
|
||||
font-size: 22rpx;
|
||||
font-weight: 600;
|
||||
margin-right: 4rpx;
|
||||
}
|
||||
|
||||
.value-number {
|
||||
font-size: 44rpx;
|
||||
font-weight: 800;
|
||||
line-height: 1;
|
||||
text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.value-unit {
|
||||
font-size: 22rpx;
|
||||
font-weight: 600;
|
||||
margin-left: 6rpx;
|
||||
}
|
||||
|
||||
.value-text {
|
||||
font-size: 32rpx;
|
||||
font-weight: 800;
|
||||
text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.coupon-desc {
|
||||
font-size: 22rpx;
|
||||
opacity: 0.9;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.coupon-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12rpx;
|
||||
flex: 1;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.coupon-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.coupon-name {
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: #1f2937;
|
||||
flex: 1;
|
||||
margin-right: 12rpx;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.coupon-type-badge {
|
||||
background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
|
||||
color: #fff;
|
||||
padding: 4rpx 8rpx;
|
||||
border-radius: 8rpx;
|
||||
font-size: 18rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.coupon-type-badge.discount {
|
||||
background: linear-gradient(135deg, #8b5cf6, #a78bfa);
|
||||
}
|
||||
|
||||
.coupon-type-badge.shipping {
|
||||
background: linear-gradient(135deg, #10b981, #34d399);
|
||||
}
|
||||
|
||||
.coupon-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6rpx;
|
||||
}
|
||||
|
||||
.detail-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 20rpx;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.detail-icon {
|
||||
margin-right: 6rpx;
|
||||
font-size: 16rpx;
|
||||
}
|
||||
|
||||
.detail-text {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* 领取按钮区域 */
|
||||
.coupon-action {
|
||||
padding: 16rpx 20rpx 20rpx;
|
||||
background: linear-gradient(180deg, rgba(248, 249, 250, 0.5) 0%, rgba(248, 249, 250, 0.8) 100%);
|
||||
border-top: 1rpx solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.receive-btn {
|
||||
width: 100%;
|
||||
height: 64rpx;
|
||||
background: linear-gradient(135deg, #ff6b6b 0%, #ff8e8e 50%, #ffa8a8 100%);
|
||||
color: #fff;
|
||||
border-radius: 32rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
box-shadow: 0 4rpx 16rpx rgba(255, 107, 107, 0.3);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.receive-btn::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
|
||||
transition: left 0.6s ease;
|
||||
}
|
||||
|
||||
.receive-btn:active::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.receive-btn.disabled {
|
||||
background: linear-gradient(135deg, #e5e7eb, #d1d5db);
|
||||
color: #9ca3af;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.receive-btn.received {
|
||||
background: linear-gradient(135deg, #10b981, #34d399);
|
||||
color: #fff;
|
||||
border: 2rpx solid #059669;
|
||||
box-shadow: 0 4rpx 16rpx rgba(16, 185, 129, 0.3);
|
||||
}
|
||||
|
||||
.receive-btn:not(.disabled):active {
|
||||
transform: scale(0.96);
|
||||
box-shadow: 0 2rpx 8rpx rgba(255, 107, 107, 0.2);
|
||||
}
|
||||
|
||||
.btn-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
font-size: 24rpx;
|
||||
animation: bounce 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
|
||||
40% { transform: translateY(-4rpx); }
|
||||
60% { transform: translateY(-2rpx); }
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
font-size: 24rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* 空状态 */
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 120rpx 32rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.empty-animation {
|
||||
position: relative;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 120rpx;
|
||||
opacity: 0.8;
|
||||
animation: float 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.empty-sparkles {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.sparkle {
|
||||
position: absolute;
|
||||
font-size: 32rpx;
|
||||
animation: sparkle 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.sparkle-1 {
|
||||
top: 20rpx;
|
||||
right: 20rpx;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.sparkle-2 {
|
||||
bottom: 30rpx;
|
||||
left: 10rpx;
|
||||
animation-delay: 0.7s;
|
||||
}
|
||||
|
||||
.sparkle-3 {
|
||||
top: 60rpx;
|
||||
left: -10rpx;
|
||||
animation-delay: 1.4s;
|
||||
}
|
||||
|
||||
@keyframes sparkle {
|
||||
0%, 100% {
|
||||
opacity: 0;
|
||||
transform: scale(0.5) rotate(0deg);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: scale(1) rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
.empty-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 32rpx;
|
||||
color: #374151;
|
||||
margin-bottom: 16rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.empty-desc {
|
||||
font-size: 26rpx;
|
||||
color: #6b7280;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.empty-action {
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
|
||||
.refresh-btn {
|
||||
background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
|
||||
color: #fff;
|
||||
padding: 16rpx 32rpx;
|
||||
border-radius: 32rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: 600;
|
||||
box-shadow: 0 4rpx 16rpx rgba(255, 107, 107, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.refresh-btn:active {
|
||||
transform: scale(0.95);
|
||||
box-shadow: 0 2rpx 8rpx rgba(255, 107, 107, 0.2);
|
||||
}
|
||||
|
||||
.refresh-icon {
|
||||
font-size: 24rpx;
|
||||
animation: rotate 2s linear infinite;
|
||||
}
|
||||
|
||||
.refresh-text {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
/* 加载状态 */
|
||||
.loading-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 120rpx 32rpx;
|
||||
}
|
||||
|
||||
.loading-animation {
|
||||
position: relative;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.loading-dots {
|
||||
display: flex;
|
||||
gap: 8rpx;
|
||||
margin-top: 16rpx;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 12rpx;
|
||||
height: 12rpx;
|
||||
border-radius: 50%;
|
||||
background: #ff6b6b;
|
||||
animation: loadingDots 1.4s ease-in-out infinite both;
|
||||
}
|
||||
|
||||
.dot-1 { animation-delay: -0.32s; }
|
||||
.dot-2 { animation-delay: -0.16s; }
|
||||
.dot-3 { animation-delay: 0s; }
|
||||
|
||||
@keyframes loadingDots {
|
||||
0%, 80%, 100% {
|
||||
transform: scale(0.8);
|
||||
opacity: 0.5;
|
||||
}
|
||||
40% {
|
||||
transform: scale(1.2);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.loading-text {
|
||||
font-size: 28rpx;
|
||||
color: #6b7280;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 响应式适配 */
|
||||
@media (max-width: 750rpx) {
|
||||
.header {
|
||||
padding: 60rpx 24rpx 40rpx;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.header-subtitle {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.stats-section {
|
||||
padding: 0 24rpx;
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.coupon-list {
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
.coupon-card {
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.coupon-value {
|
||||
font-size: 48rpx;
|
||||
}
|
||||
|
||||
.coupon-unit {
|
||||
font-size: 20rpx;
|
||||
}
|
||||
|
||||
.coupon-name {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.coupon-desc {
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
font-size: 24rpx;
|
||||
padding: 16rpx 24rpx;
|
||||
}
|
||||
|
||||
.coupon-status-tag {
|
||||
font-size: 20rpx;
|
||||
padding: 6rpx 12rpx;
|
||||
}
|
||||
|
||||
.coupon-type-badge {
|
||||
font-size: 18rpx;
|
||||
padding: 4rpx 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 超小屏幕适配 */
|
||||
@media (max-width: 600rpx) {
|
||||
.header {
|
||||
padding: 50rpx 20rpx 30rpx;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.header-subtitle {
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.stats-section {
|
||||
flex-direction: column;
|
||||
gap: 16rpx;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
flex-direction: row;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.coupon-list {
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.coupon-card {
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
.coupon-left {
|
||||
min-width: 120rpx;
|
||||
}
|
||||
|
||||
.coupon-value {
|
||||
font-size: 42rpx;
|
||||
}
|
||||
|
||||
.coupon-right {
|
||||
padding-left: 20rpx;
|
||||
}
|
||||
|
||||
.coupon-name {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.coupon-desc {
|
||||
font-size: 20rpx;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
font-size: 22rpx;
|
||||
padding: 14rpx 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
.coupon-left {
|
||||
flex: 0 0 160rpx;
|
||||
padding: 20rpx 12rpx;
|
||||
}
|
||||
|
||||
.value-number {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.coupon-name {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
32
miniprogram/pages/coupon/coupon-detail/index.js
Normal file
32
miniprogram/pages/coupon/coupon-detail/index.js
Normal file
@@ -0,0 +1,32 @@
|
||||
import { fetchCouponDetail } from '../../../services/coupon/index';
|
||||
|
||||
Page({
|
||||
data: {
|
||||
detail: null,
|
||||
storeInfoList: [],
|
||||
storeInfoStr: '',
|
||||
showStoreInfoList: false,
|
||||
},
|
||||
|
||||
id: '',
|
||||
|
||||
onLoad(query) {
|
||||
const id = parseInt(query.id);
|
||||
this.id = id;
|
||||
this.getGoodsList(id);
|
||||
},
|
||||
|
||||
getGoodsList(id) {
|
||||
fetchCouponDetail(id).then(({ detail }) => {
|
||||
this.setData({
|
||||
detail,
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
navGoodListHandle() {
|
||||
wx.navigateTo({
|
||||
url: `/pages/coupon/coupon-activity-goods/index?id=${this.id}`,
|
||||
});
|
||||
},
|
||||
});
|
||||
10
miniprogram/pages/coupon/coupon-detail/index.json
Normal file
10
miniprogram/pages/coupon/coupon-detail/index.json
Normal file
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"navigationBarTitleText": "优惠券详情",
|
||||
"usingComponents": {
|
||||
"coupon-card": "../components/coupon-card/index",
|
||||
"t-cell": "tdesign-miniprogram/cell/cell",
|
||||
"t-cell-group": "tdesign-miniprogram/cell-group/cell-group",
|
||||
"t-button": "tdesign-miniprogram/button/button",
|
||||
"t-icon": "tdesign-miniprogram/icon/icon"
|
||||
}
|
||||
}
|
||||
45
miniprogram/pages/coupon/coupon-detail/index.wxml
Normal file
45
miniprogram/pages/coupon/coupon-detail/index.wxml
Normal file
@@ -0,0 +1,45 @@
|
||||
<!-- 优惠券 -->
|
||||
<view class="coupon-card-wrap">
|
||||
<coupon-card couponDTO="{{detail}}" />
|
||||
</view>
|
||||
<!-- 说明 -->
|
||||
<view class="desc-wrap">
|
||||
<t-cell-group t-class="desc-group-wrap">
|
||||
<t-cell
|
||||
wx:if="{{detail && detail.desc}}"
|
||||
t-class="t-class-cell"
|
||||
t-class-title="t-class-title"
|
||||
t-class-note="t-class-note"
|
||||
title="规则说明"
|
||||
note="{{detail && detail.desc}}"
|
||||
/>
|
||||
<t-cell
|
||||
wx:if="{{detail && detail.timeLimit}}"
|
||||
t-class="t-class-cell"
|
||||
t-class-title="t-class-title"
|
||||
t-class-note="t-class-note"
|
||||
title="有效时间"
|
||||
note="{{detail && detail.timeLimit}}"
|
||||
/>
|
||||
<t-cell
|
||||
wx:if="{{detail && detail.storeAdapt}}"
|
||||
t-class="t-class-cell"
|
||||
t-class-title="t-class-title"
|
||||
t-class-note="t-class-note"
|
||||
title="适用范围"
|
||||
note="{{detail && detail.storeAdapt}}"
|
||||
/>
|
||||
<t-cell
|
||||
wx:if="{{detail && detail.useNotes}}"
|
||||
t-class="t-class-cell"
|
||||
t-class-title="t-class-title"
|
||||
t-class-note="t-class-note"
|
||||
title="使用须知"
|
||||
note="{{detail && detail.useNotes}}"
|
||||
/>
|
||||
</t-cell-group>
|
||||
<!-- 查看可用商品 -->
|
||||
<view class="button-wrap">
|
||||
<t-button shape="round" block bindtap="navGoodListHandle"> 查看可用商品 </t-button>
|
||||
</view>
|
||||
</view>
|
||||
92
miniprogram/pages/coupon/coupon-detail/index.wxss
Normal file
92
miniprogram/pages/coupon/coupon-detail/index.wxss
Normal file
@@ -0,0 +1,92 @@
|
||||
page {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.coupon-card-wrap {
|
||||
background-color: #fff;
|
||||
padding: 32rpx 32rpx 1rpx;
|
||||
}
|
||||
.desc-wrap {
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
.desc-wrap .button-wrap {
|
||||
margin: 50rpx 32rpx 0;
|
||||
}
|
||||
|
||||
.desc-group-wrap .t-class-cell {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.desc-group-wrap .t-class-title {
|
||||
font-size: 26rpx;
|
||||
width: 140rpx;
|
||||
flex: none;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.desc-group-wrap .t-class-note {
|
||||
font-size: 26rpx;
|
||||
word-break: break-all;
|
||||
white-space: pre-line;
|
||||
justify-content: flex-start;
|
||||
color: #333;
|
||||
width: 440rpx;
|
||||
}
|
||||
|
||||
.desc-group-wrap {
|
||||
border-radius: 8rpx;
|
||||
overflow: hidden;
|
||||
|
||||
--cell-label-font-size: 26rpx;
|
||||
--cell-label-line-height: 36rpx;
|
||||
--cell-label-color: #999;
|
||||
}
|
||||
|
||||
.desc-group-wrap.in-popup {
|
||||
border-radius: 0;
|
||||
overflow: auto;
|
||||
max-height: 828rpx;
|
||||
}
|
||||
|
||||
.desc-group-wrap .wr-cell__title {
|
||||
color: #333;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
/* .desc-group-wrap .max-width-cell {
|
||||
overflow: hidden;
|
||||
} */
|
||||
|
||||
/* .desc-group-wrap .signal-line-label {
|
||||
word-break: keep-all;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.desc-group-wrap .multi-line-label {
|
||||
word-break: break-all;
|
||||
white-space: pre-line;
|
||||
} */
|
||||
|
||||
.popup-content-wrap {
|
||||
background-color: #fff;
|
||||
border-top-left-radius: 20rpx;
|
||||
border-top-right-radius: 20rpx;
|
||||
}
|
||||
|
||||
.popup-content-title {
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
|
||||
text-align: center;
|
||||
height: 104rpx;
|
||||
line-height: 104rpx;
|
||||
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.popup-content-title .close-icon {
|
||||
position: absolute;
|
||||
top: 24rpx;
|
||||
right: 24rpx;
|
||||
}
|
||||
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