Hooke / lls_program

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
addb72ee 1 parent a2ae0a04

feat(优惠券): 重构优惠券列表和详情页面，添加加载状态和API集成 

重构优惠券列表页面，添加分页加载和状态筛选功能
优化优惠券详情页面，完善状态显示和核销逻辑
新增蓝色主题相关样式类
更新API接口路径和返回字段
Inline Side-by-side
Showing 5 changed files with 433 additions and 194 deletions
......@@ -19,6 +19,7 @@ declare module 'vue' {
NutDialog: typeof import('@nutui/nutui-taro')['Dialog']
NutImagePreview: typeof import('@nutui/nutui-taro')['ImagePreview']
NutInput: typeof import('@nutui/nutui-taro')['Input']
NutLoading: typeof import('@nutui/nutui-taro')['Loading']
NutPicker: typeof import('@nutui/nutui-taro')['Picker']
NutPopup: typeof import('@nutui/nutui-taro')['Popup']
NutRow: typeof import('@nutui/nutui-taro')['Row']
......
/*
* @Date: 2024-01-01 00:00:00
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-09-08 13:15:39
* @LastEditTime: 2025-09-08 16:23:23
* @FilePath: /lls_program/src/api/coupon.js
* @Description: 优惠券相关接口
*/
......@@ -15,7 +15,7 @@ const Api = {
REDEEM_COUPON: '/srv/?a=coupon&t=redeem',
MY_COUPON_LIST: '/srv/?a=redemption&t=list',
MY_COUPON_DETAIL: '/srv/?a=redemption&t=detail',
USE_COUPON: '/srv/?a=coupon&t=use',
USE_COUPON: '/srv/?a=redemption&t=use',
}
/**
......@@ -111,6 +111,7 @@ export const redeemCouponAPI = (params) => fn(fetch.post(Api.REDEEM_COUPON, para
* @returns {string} response.data.thumbnail - 优惠券缩略图
* @returns {string} response.data.status - 优惠券状态, UNUSED=未使用, USED=已使用, EXPIRED=已过期
* @returns {string} response.data.expire_time - 有效期截止时间
* @returns {string} response.data.used_time - 核销时间
*/
export const getMyCouponListAPI = (params = {}) => fn(fetch.get(Api.MY_COUPON_LIST, params));
......@@ -127,6 +128,7 @@ export const getMyCouponListAPI = (params = {}) => fn(fetch.get(Api.MY_COUPON_LI
* @returns {string} response.data.banner - 优惠券banner图
* @returns {string} response.data.status - 优惠券状态, UNUSED=未使用, USED=已使用, EXPIRED=已过期
* @returns {string} response.data.expire_time - 有效期截止时间
* @returns {string} response.data.expiration_rules[string] - 有效期
* @returns {Array} response.data.applicable_stores[string] - 可用门店
* @returns {Array} response.data.usage_rules[string] - 使用规则
*/
......
......@@ -5,3 +5,11 @@
.bg-blue-500 {
background-color: #4A90E2 !important;
}
.text-blue-500 {
color: #4A90E2 !important;
}
.border-blue-500 {
border-color: #4A90E2 !important;
}
......
<template>
<view class="min-h-screen bg-white pb-24">
<!-- <AppHeader title="优惠券详情" :showBack="true" /> -->
<!-- Top Image -->
<view class="w-full h-48">
<image :src="reward.image" class="w-full h-full object-cover" />
<!-- Loading State -->
<view v-if="loading" class="flex justify-center items-center h-screen">
<view class="text-gray-500">加载中...</view>
</view>
<!-- Main Content -->
<view class="p-6">
<!-- Points and Title -->
<view class="text-center mb-8">
<view class="text-4xl font-bold text-blue-500 mb-2">
<text class="text-2xl">{{ reward.title }}</text>
</view>
<!-- Content -->
<view v-else>
<!-- Top Image -->
<view class="w-full h-48">
<image :src="reward.banner || 'https://placehold.co/800x400/e2f3ff/0369a1?text=优惠券&font=roboto'" class="w-full h-full object-cover" />
</view>
<!-- Details Sections -->
<view class="space-y-6">
<!-- Applicable Stores -->
<view>
<h2 class="text-lg font-medium mb-3">可用门店</h2>
<view class="space-y-2 text-gray-600">
<view v-for="store in reward.stores" :key="store" class="flex text-sm">
<span class="mr-2">·</span>
<p>{{ store }}</p>
</view>
<!-- Main Content -->
<view class="p-6">
<!-- Points and Title -->
<view class="text-center mb-8">
<view class="text-4xl font-bold text-blue-500 mb-2">
<text class="text-2xl">{{ reward.title }}</text>
</view>
<!-- Status Badge -->
<!-- <view class="mt-2">
<text :class="getStatusClass(reward.status)">{{ getStatusText(reward.status) }}</text>
</view> -->
</view>
<!-- Redemption Rules -->
<view>
<h2 class="text-lg font-medium mb-3">有效期</h2>
<view class="space-y-2 text-gray-600">
<view v-for="rule in reward.redemption_rules" :key="rule" class="flex text-sm">
<span class="mr-2">·</span>
<p>{{ rule }}</p>
<!-- Details Sections -->
<view class="space-y-6">
<!-- Applicable Stores -->
<view v-if="reward.applicable_stores && reward.applicable_stores.length > 0">
<h2 class="text-lg font-medium mb-3">可用门店</h2>
<view class="space-y-2 text-gray-600">
<view v-for="store in reward.applicable_stores" :key="store" class="flex text-sm">
<span class="mr-2">·</span>
<p>{{ store }}</p>
</view>
</view>
</view>
<!-- Expiration Rules -->
<view v-if="reward.expiration_rules && reward.expiration_rules.length > 0">
<h2 class="text-lg font-medium mb-3">有效期</h2>
<view class="space-y-2 text-gray-600">
<view v-for="rule in reward.expiration_rules" :key="rule" class="flex text-sm">
<span class="mr-2">·</span>
<p>{{ rule }}</p>
</view>
</view>
</view>
</view>
<!-- Usage Rules -->
<view>
<h2 class="text-lg font-medium mb-3">使用规则</h2>
<view class="space-y-2 text-gray-600">
<view v-for="rule in reward.usage_rules" :key="rule" class="flex text-sm">
<span class="mr-2">·</span>
<p>{{ rule }}</p>
<!-- Expire Time -->
<view v-if="reward.expire_time">
<h2 class="text-lg font-medium mb-3">到期时间</h2>
<view class="text-gray-600 text-sm">
<p>{{ reward.expire_time }}</p>
</view>
</view>
<!-- Usage Rules -->
<view v-if="reward.usage_rules && reward.usage_rules.length > 0">
<h2 class="text-lg font-medium mb-3">使用规则</h2>
<view class="space-y-2 text-gray-600">
<view v-for="rule in reward.usage_rules" :key="rule" class="flex text-sm">
<span class="mr-2">·</span>
<p>{{ rule }}</p>
</view>
</view>
</view>
</view>
</view>
</view>
<!-- Bottom Button -->
<view class="fixed bottom-0 left-0 right-0 p-4 bg-white border-t border-gray-100">
<nut-button type="primary" size="large" block :color="THEME_COLORS.PRIMARY" @click="handleRedeem">
立即核销
</nut-button>
<!-- Bottom Button -->
<view class="fixed bottom-0 left-0 right-0 p-4 bg-white border-t border-gray-100">
<nut-button
type="primary"
size="large"
block
:color="reward.status === 'UNUSED' ? THEME_COLORS.PRIMARY : '#D1D5DB'"
:disabled="reward.status !== 'UNUSED' || useLoading"
:loading="useLoading"
@click="handleRedeem"
>
{{ getButtonText(reward.status) }}
</nut-button>
</view>
</view>
</view>
</template>
<script setup>
import { ref } from 'vue';
import Taro from '@tarojs/taro';
import AppHeader from '../../components/AppHeader.vue';
import { ref, onMounted } from 'vue';
import Taro, { useLoad } from '@tarojs/taro';
// 导入主题颜色
import { THEME_COLORS } from '@/utils/config';
// 导入接口
import { getMyCouponDetailAPI, useCouponAPI } from '@/api/coupon';
// Mock reward data based on the image
// 页面参数
const couponId = ref('');
const loading = ref(false);
const useLoading = ref(false);
// 优惠券详情数据
const reward = ref({
id: 1,
title: '吴良材眼镜店85折券',
points: 10,
image: 'https://placehold.co/800x400/e2f3ff/0369a1?text=LFX&font=roboto', // Placeholder image
stores: [
'吴良材眼镜店 (南京东路店)',
'吴良材眼镜店 (淮海中路店)',
'吴良材眼镜店 (徐家汇店)'
],
redemption_rules: [
'2025-10-01~2025-12-31',
],
usage_rules: [
'仅限店内正价商品使用',
'不可与其他优惠同时使用',
'特价商品不可使用',
'最终解释权归商家所有'
]
id: '',
title: '',
banner: '',
status: 'UNUSED', // UNUSED=未使用, USED=已使用, EXPIRED=已过期
expire_time: '',
expiration_rules: [],
applicable_stores: [],
usage_rules: []
});
/**
* @description Handles the redemption of the coupon.
* 获取我的优惠券详情
*/
const handleRedeem = () => {
// Show a confirmation modal
Taro.showModal({
title: '温馨提示',
content: `将核销此优惠券，是否确认？`,
success: (res) => {
if (res.confirm) {
// Simulate API call for redemption
Taro.showLoading({ title: '核销中...' });
const fetchCouponDetail = async () => {
if (!couponId.value) {
console.error('缺少优惠券ID');
return;
}
loading.value = true;
try {
const response = await getMyCouponDetailAPI({ id: couponId.value });
if (response && response.data) {
reward.value = {
id: response.data.id || '',
title: response.data.title || '',
banner: response.data.banner || '',
status: response.data.status || 'UNUSED',
expire_time: response.data.expire_time || '',
expiration_rules: response.data.expiration_rules || [],
applicable_stores: response.data.applicable_stores || [],
usage_rules: response.data.usage_rules || []
};
}
} catch (error) {
console.error('获取优惠券详情失败:', error);
Taro.showToast({
title: '获取详情失败',
icon: 'error'
});
} finally {
loading.value = false;
}
};
/**
* 获取状态显示文本
*/
const getStatusText = (status) => {
switch (status) {
case 'UNUSED':
return '未使用';
case 'USED':
return '已使用';
case 'EXPIRED':
return '已过期';
default:
return '';
}
};
/**
* 获取状态样式类
*/
const getStatusClass = (status) => {
switch (status) {
case 'UNUSED':
return 'px-2 py-1 bg-green-100 text-green-600 rounded text-sm';
case 'USED':
return 'px-2 py-1 bg-gray-100 text-gray-600 rounded text-sm';
case 'EXPIRED':
return 'px-2 py-1 bg-red-100 text-red-600 rounded text-sm';
default:
return 'px-2 py-1 bg-gray-100 text-gray-600 rounded text-sm';
}
};
/**
* 获取按钮文本
*/
const getButtonText = (status) => {
switch (status) {
case 'UNUSED':
return '立即核销';
case 'USED':
return '已核销';
case 'EXPIRED':
return '已过期';
default:
return '不可用';
}
};
/**
* 处理优惠券核销
*/
const handleRedeem = async () => {
if (reward.value.status !== 'UNUSED') {
Taro.showToast({
title: '优惠券不可用',
icon: 'none'
});
return;
}
try {
// 显示确认弹窗
const result = await Taro.showModal({
title: '温馨提示',
content: '将核销此优惠券，是否确认？',
confirmText: '确认核销',
cancelText: '取消'
});
if (result.confirm) {
useLoading.value = true;
// 调用核销API
const response = await useCouponAPI({ id: couponId.value });
if (response) {
// 核销成功
reward.value.status = 'USED';
Taro.showToast({
title: '核销成功',
icon: 'success',
duration: 2000
});
// 延迟返回上一页
setTimeout(() => {
Taro.hideLoading();
Taro.showToast({
title: '核销成功',
icon: 'success',
duration: 2000
});
// After successful redemption, you might want to navigate the user to their coupons page
// For now, we'll just navigate back.
setTimeout(() => {
Taro.navigateBack();
}, 2000);
}, 1500);
Taro.navigateBack();
}, 2000);
}
}
});
} catch (error) {
console.error('核销失败:', error);
Taro.showToast({
title: error.message || '核销失败，请重试',
icon: 'error'
});
} finally {
useLoading.value = false;
}
};
/**
* 初始化页面数据
*/
const initPageData = async (options = {}) => {
// 获取URL参数中的优惠券ID
if (options.id) {
couponId.value = options.id;
await fetchCouponDetail();
} else {
console.error('缺少优惠券ID参数');
Taro.showToast({
title: '参数错误',
icon: 'error'
});
}
};
// 页面加载时初始化数据
useLoad((options) => {
initPageData(options);
});
</script>
......
<template>
<view class="min-h-screen bg-gray-100">
<!-- <AppHeader title="我的券" :showBack="true" /> -->
<view class="min-h-screen bg-gray-50">
<!-- Tabs -->
<view class="bg-white flex justify-around items-center border-b border-gray-200">
<view
v-for="tab in tabs"
:key="tab.name"
@click="activeTab = tab.name"
class="py-3 text-center w-1/4 text-base font-medium cursor-pointer"
:class="[
activeTab === tab.name
? 'text-blue-500 border-b-2 border-blue-500'
: 'text-gray-500'
]"
>
{{ tab.label }}
<view class="bg-white px-4 py-2 border-b border-gray-200">
<view class="flex space-x-6">
<view
v-for="tab in tabs"
:key="tab.name"
@click="handleTabChange(tab.name)"
:class="{
'text-blue-500 border-b-2 border-blue-500': activeTab === tab.name,
'text-gray-500': activeTab !== tab.name
}"
class="pb-2 px-1 text-sm font-medium transition-colors"
>
{{ tab.label }}
</view>
</view>
</view>
<!-- Rewards List -->
<view class="p-4">
<!-- Loading State -->
<view v-if="loading" class="flex justify-center items-center py-20">
<view class="text-gray-500">加载中...</view>
</view>
<!-- Content -->
<view v-else class="p-4">
<view v-if="filteredRewards.length > 0" class="space-y-4">
<view
v-for="reward in filteredRewards"
:key="reward.id"
class="bg-white rounded-lg shadow-sm p-4 flex justify-between items-center"
class="bg-white rounded-xl p-4 flex items-center shadow-[0_2px_8px_rgba(0,0,0,0.08)]"
>
<view class="flex-1">
<h3 class="text-lg font-semibold text-gray-800">{{ reward.title }}</h3>
<p class="text-sm text-gray-500 mt-1">有效期至 {{ reward.expiryDate }}</p>
<p v-if="reward.status === 'used'" class="text-sm text-gray-400 mt-1">使用于 {{ reward.usedDate }}</p>
<image :src="reward.thumbnail || 'https://placehold.co/120x120/e2f3ff/0369a1?text=券&font=roboto'" class="w-16 h-16 rounded-lg mr-4 flex-shrink-0" mode="aspectFill" />
<view class="flex-1 min-w-0">
<view class="font-medium text-base mb-1">{{ reward.title }}</view>
<view v-if="reward.status === 'UNUSED'" class="text-xs text-gray-400">
有效期至：{{ formatDate(reward.expire_time) }}
</view>
<view v-if="reward.status === 'USED'" class="text-xs text-red-500">
使用日期：{{ formatDate(reward.used_time) }}
</view>
</view>
<view class="ml-4 flex flex-col items-end">
<button
@click="handleUseReward(reward)"
:disabled="reward.status !== 'UNUSED'"
:class="{
'bg-blue-500 text-white': reward.status === 'UNUSED',
'bg-gray-300 text-gray-500': reward.status !== 'UNUSED'
}"
class="px-4 py-2 rounded-lg text-sm font-medium transition-colors flex-shrink-0"
>
{{ getButtonText(reward.status) }}
</button>
</view>
<button
@click="handleUseReward(reward)"
:disabled="reward.status !== 'unused'"
class="px-6 py-2 rounded-full text-white font-medium text-sm transition-colors"
:class="{
'bg-blue-500 hover:bg-blue-600': reward.status === 'unused',
'bg-gray-300 cursor-not-allowed': reward.status !== 'unused'
}"
>
{{ getButtonText(reward.status) }}
</button>
</view>
</view>
<!-- Empty State -->
<view v-else class="text-center py-20">
<p class="text-gray-500">暂无相关兑换券</p>
<view class="text-gray-400 text-lg mb-2">暂无券</view>
<view class="text-gray-500 text-sm">您还没有任何券</view>
</view>
<!-- Load More -->
<view v-if="hasMore && filteredRewards.length > 0" class="text-center mt-6">
<view
@click="loadMore"
class="text-blue-500 py-4"
>
{{ loading ? '加载中...' : '加载更多' }}
</view>
</view>
<!-- No More Data -->
<view v-if="!hasMore && filteredRewards.length > 0" class="text-center py-4 text-gray-500">
没有更多数据了
</view>
</view>
</view>
......@@ -56,104 +85,150 @@
import { ref, computed } from 'vue';
import Taro from '@tarojs/taro';
import { useDidShow } from '@tarojs/taro';
// 导入接口
import { getMyCouponListAPI } from '@/api/coupon';
const tabs = ref([
{ name: 'all', label: '全部' },
{ name: 'unused', label: '未使用' },
{ name: 'used', label: '已使用' },
{ name: 'expired', label: '已过期' },
{ name: 'all', label: '全部', status: '' },
{ name: 'unused', label: '未使用', status: 'UNUSED' },
{ name: 'used', label: '已使用', status: 'USED' },
{ name: 'expired', label: '已过期', status: 'EXPIRED' },
]);
const activeTab = ref('all');
const loading = ref(false);
const rewards = ref([]);
const currentPage = ref(0);
const hasMore = ref(true);
const filteredRewards = computed(() => {
if (activeTab.value === 'all') {
return rewards.value;
}
return rewards.value.filter(reward => reward.status === activeTab.value);
// 由于API已经根据status参数进行了筛选，这里直接返回rewards
return rewards.value;
});
/**
* 获取按钮文本
*/
const getButtonText = (status) => {
switch (status) {
case 'unused':
case 'UNUSED':
return '使用';
case 'used':
case 'USED':
return '已使用';
case 'expired':
case 'EXPIRED':
return '已过期';
default:
return '';
}
};
/**
* 获取状态文本
*/
// const getStatusText = (status) => {
// switch (status) {
// case 'UNUSED':
// return '未使用';
// case 'USED':
// return '已使用';
// case 'EXPIRED':
// return '已过期';
// default:
// return '';
// }
// };
/**
* 格式化日期
*/
const formatDate = (dateString) => {
if (!dateString) return '';
const date = new Date(dateString);
return date.toLocaleDateString('zh-CN');
};
/**
* 处理优惠券使用
*/
const handleUseReward = (reward) => {
if (reward.status === 'unused') {
// Here you would typically navigate to a usage/QR code page
// For now, we can just log it or update the status for demo purposes
console.log(`Using reward: ${reward.title}`);
// Example of updating status:
// const item = rewards.value.find(r => r.id === reward.id);
// if (item) {
// item.status = 'used';
// item.usedDate = new Date().toISOString().split('T')[0];
// }
if (reward.status === 'UNUSED') {
// 跳转到卡券详情页
Taro.navigateTo({
url: '/pages/CouponDetail/index?id=' + reward.id
})
});
}
};
/**
* 获取我的优惠券列表
*/
const fetchMyCouponList = async (reset = false) => {
if (loading.value || (!hasMore.value && !reset)) return;
loading.value = true;
try {
const currentTab = tabs.value.find(tab => tab.name === activeTab.value);
const params = {
status: currentTab?.status || '',
page: reset ? 0 : currentPage.value,
limit: 10
};
const response = await getMyCouponListAPI(params);
if (response && response.data) {
const coupons = Array.isArray(response.data) ? response.data : [];
if (reset) {
rewards.value = coupons;
currentPage.value = 0;
} else {
rewards.value = [...rewards.value, ...coupons];
}
// 如果返回的数据少于limit，说明没有更多数据了
hasMore.value = coupons.length >= 10;
currentPage.value += 1;
}
} catch (error) {
console.error('获取我的优惠券列表失败:', error);
Taro.showToast({
title: '获取列表失败',
icon: 'error'
});
} finally {
loading.value = false;
}
};
/**
* 处理标签页切换
*/
const handleTabChange = (tabName) => {
if (activeTab.value === tabName) return;
activeTab.value = tabName;
currentPage.value = 0;
hasMore.value = true;
fetchMyCouponList(true); // 重置并重新加载数据
};
/**
* 加载更多
*/
const loadMore = () => {
fetchMyCouponList(false);
};
/**
* 初始化页面数据
*/
const initPageData = () => {
fetchMyCouponList(true);
};
// 页面显示时刷新数据
useDidShow(() => {
initPageData();
});
const initPageData = () => {
rewards.value = [
{
id: 1,
title: '杏花楼集团 85折券',
expiryDate: '2025-08-28',
status: 'unused',
usedDate: null,
},
{
id: 2,
title: '老凤祥银楼 20元抵用券',
expiryDate: '2025-08-28',
status: 'unused',
usedDate: null,
},
{
id: 3,
title: '吴良材眼镜 5折券',
expiryDate: '2024-05-20',
status: 'used',
usedDate: '2024-05-01',
},
{
id: 4,
title: '沈大成双酿团 免费券',
expiryDate: '2024-03-15',
status: 'expired',
usedDate: null,
},
{
id: 5,
title: '沈大成双酿团 免费券',
expiryDate: '2024-03-15',
status: 'expired',
usedDate: null,
},
{
id: 6,
title: '沈大成双酿团 免费券',
expiryDate: '2024-03-15',
status: 'expired',
usedDate: null,
},
];
}
</script>
......