forked from gxwebsoft/mp-10550
新增：优惠券、积分明细
This commit is contained in:
4
src/user/coupon/coupon.ts
Normal file
4
src/user/coupon/coupon.ts
Normal file
@@ -0,0 +1,4 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '我的优惠券',
|
||||
navigationBarTextStyle: 'black'
|
||||
})
|
||||
213
src/user/coupon/coupon.tsx
Normal file
213
src/user/coupon/coupon.tsx
Normal file
@@ -0,0 +1,213 @@
|
||||
import {useEffect, useState} from "react";
|
||||
import Taro from '@tarojs/taro'
|
||||
import {Button, Cell, Space, Empty, ConfigProvider, Tabs, TabPane, Tag} from '@nutui/nutui-react-taro'
|
||||
import {View} from '@tarojs/components'
|
||||
import {pageUserCoupon, getUserCouponCount} from "@/api/user/coupon";
|
||||
import {UserCoupon as UserCouponType} from "@/api/user/coupon/model";
|
||||
|
||||
const UserCoupon = () => {
|
||||
const [list, setList] = useState<UserCouponType[]>([])
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [activeTab, setActiveTab] = useState('0')
|
||||
const [couponCount, setCouponCount] = useState({
|
||||
total: 0,
|
||||
unused: 0,
|
||||
used: 0,
|
||||
expired: 0
|
||||
})
|
||||
|
||||
const tabs = [
|
||||
{ key: '0', title: '全部', status: undefined },
|
||||
{ key: '1', title: '未使用', status: 0 },
|
||||
{ key: '2', title: '已使用', status: 1 },
|
||||
{ key: '3', title: '已过期', status: 2 }
|
||||
]
|
||||
|
||||
const reload = (status?: number) => {
|
||||
setLoading(true)
|
||||
const userId = Taro.getStorageSync('UserId')
|
||||
|
||||
console.log('Loading coupons for userId:', userId, 'status:', status)
|
||||
|
||||
if (!userId) {
|
||||
console.warn('No userId found in storage')
|
||||
Taro.showToast({
|
||||
title: '请先登录',
|
||||
icon: 'error'
|
||||
});
|
||||
setLoading(false)
|
||||
return
|
||||
}
|
||||
|
||||
pageUserCoupon({
|
||||
userId: parseInt(userId),
|
||||
status: status,
|
||||
page: 1,
|
||||
limit: 20
|
||||
})
|
||||
.then((res: any) => {
|
||||
console.log('Coupon response:', res)
|
||||
setList(res?.list || [])
|
||||
})
|
||||
.catch((error: any) => {
|
||||
console.error('Coupon error:', error)
|
||||
Taro.showToast({
|
||||
title: error?.message || '获取失败',
|
||||
icon: 'error'
|
||||
});
|
||||
})
|
||||
.finally(() => {
|
||||
setLoading(false)
|
||||
})
|
||||
}
|
||||
|
||||
const loadCouponCount = () => {
|
||||
const userId = Taro.getStorageSync('UserId')
|
||||
if (!userId) return
|
||||
|
||||
getUserCouponCount(parseInt(userId))
|
||||
.then((res: any) => {
|
||||
setCouponCount(res)
|
||||
})
|
||||
.catch((error: any) => {
|
||||
console.error('Coupon count error:', error)
|
||||
})
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
reload()
|
||||
loadCouponCount()
|
||||
}, []);
|
||||
|
||||
const onTabChange = (index: string) => {
|
||||
setActiveTab(index)
|
||||
const tab = tabs.find(t => t.key === index)
|
||||
reload(tab?.status)
|
||||
}
|
||||
|
||||
const getCouponTypeText = (type?: number) => {
|
||||
switch (type) {
|
||||
case 1: return '满减券'
|
||||
case 2: return '折扣券'
|
||||
case 3: return '免费券'
|
||||
default: return '优惠券'
|
||||
}
|
||||
}
|
||||
|
||||
const getCouponStatusText = (status?: number) => {
|
||||
switch (status) {
|
||||
case 0: return '未使用'
|
||||
case 1: return '已使用'
|
||||
case 2: return '已过期'
|
||||
default: return '未知'
|
||||
}
|
||||
}
|
||||
|
||||
const getCouponStatusColor = (status?: number) => {
|
||||
switch (status) {
|
||||
case 0: return 'success'
|
||||
case 1: return 'default'
|
||||
case 2: return 'danger'
|
||||
default: return 'default'
|
||||
}
|
||||
}
|
||||
|
||||
const formatCouponValue = (type?: number, value?: string) => {
|
||||
if (!value) return '0'
|
||||
switch (type) {
|
||||
case 1: return `¥${value}`
|
||||
case 2: return `${parseFloat(value) * 10}折`
|
||||
case 3: return '免费'
|
||||
default: return value
|
||||
}
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<ConfigProvider>
|
||||
<div className={'h-full flex flex-col justify-center items-center'} style={{
|
||||
height: 'calc(100vh - 300px)',
|
||||
}}>
|
||||
<div>加载中...</div>
|
||||
</div>
|
||||
</ConfigProvider>
|
||||
)
|
||||
}
|
||||
|
||||
if (list.length == 0) {
|
||||
return (
|
||||
<ConfigProvider>
|
||||
<div className={'h-full flex flex-col justify-center items-center'} style={{
|
||||
height: 'calc(100vh - 300px)',
|
||||
}}>
|
||||
<Empty
|
||||
style={{
|
||||
backgroundColor: 'transparent'
|
||||
}}
|
||||
description="您还没有优惠券"
|
||||
/>
|
||||
<Space>
|
||||
<Button onClick={() => reload()}>刷新</Button>
|
||||
</Space>
|
||||
</div>
|
||||
</ConfigProvider>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<ConfigProvider>
|
||||
<View>
|
||||
<Tabs value={activeTab} onChange={onTabChange}>
|
||||
{tabs.map(tab => (
|
||||
<TabPane key={tab.key} title={tab.title}>
|
||||
<View className="p-4">
|
||||
{list.map((item, index) => (
|
||||
<Cell.Group key={index} className="mb-4">
|
||||
<Cell className="coupon-item p-4">
|
||||
<View className="flex justify-between items-center">
|
||||
<View className="flex-1">
|
||||
<View className="flex items-center mb-2">
|
||||
<View className="coupon-value text-2xl font-bold text-red-500 mr-3">
|
||||
{formatCouponValue(item.type, item.value)}
|
||||
</View>
|
||||
<View className="flex flex-col">
|
||||
<View className="text-base font-medium text-gray-800">
|
||||
{item.name || getCouponTypeText(item.type)}
|
||||
</View>
|
||||
{item.minAmount && parseFloat(item.minAmount) > 0 && (
|
||||
<View className="text-sm text-gray-500">
|
||||
满¥{item.minAmount}可用
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View className="flex justify-between items-center text-xs text-gray-400">
|
||||
<View>
|
||||
有效期: {item.startTime ? new Date(item.startTime).toLocaleDateString() : ''} - {item.endTime ? new Date(item.endTime).toLocaleDateString() : ''}
|
||||
</View>
|
||||
<Tag type={getCouponStatusColor(item.status)} size="small">
|
||||
{getCouponStatusText(item.status)}
|
||||
</Tag>
|
||||
</View>
|
||||
|
||||
{item.comments && (
|
||||
<View className="text-xs text-gray-500 mt-2 p-2 bg-gray-50 rounded">
|
||||
{item.comments}
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
</Cell>
|
||||
</Cell.Group>
|
||||
))}
|
||||
</View>
|
||||
</TabPane>
|
||||
))}
|
||||
</Tabs>
|
||||
</View>
|
||||
</ConfigProvider>
|
||||
);
|
||||
};
|
||||
|
||||
export default UserCoupon;
|
||||
4
src/user/points/points.config.ts
Normal file
4
src/user/points/points.config.ts
Normal file
@@ -0,0 +1,4 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '我的积分',
|
||||
navigationBarTextStyle: 'black'
|
||||
})
|
||||
199
src/user/points/points.tsx
Normal file
199
src/user/points/points.tsx
Normal file
@@ -0,0 +1,199 @@
|
||||
import {useEffect, useState} from "react";
|
||||
import Taro from '@tarojs/taro'
|
||||
import {Button, Cell, Space, Empty, ConfigProvider, Card} from '@nutui/nutui-react-taro'
|
||||
import {View} from '@tarojs/components'
|
||||
import {pageUserPointsLog, getUserPointsStats} from "@/api/user/points";
|
||||
import {UserPointsLog as UserPointsLogType, UserPointsStats} from "@/api/user/points/model";
|
||||
|
||||
const UserPoints = () => {
|
||||
const [list, setList] = useState<UserPointsLogType[]>([])
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [stats, setStats] = useState<UserPointsStats>({})
|
||||
|
||||
const reload = () => {
|
||||
setLoading(true)
|
||||
const userId = Taro.getStorageSync('UserId')
|
||||
|
||||
console.log('Loading points log for userId:', userId)
|
||||
|
||||
if (!userId) {
|
||||
console.warn('No userId found in storage')
|
||||
Taro.showToast({
|
||||
title: '请先登录',
|
||||
icon: 'error'
|
||||
});
|
||||
setLoading(false)
|
||||
return
|
||||
}
|
||||
|
||||
pageUserPointsLog({
|
||||
userId: parseInt(userId),
|
||||
page: 1,
|
||||
limit: 20
|
||||
})
|
||||
.then((res: any) => {
|
||||
console.log('Points log response:', res)
|
||||
setList(res?.list || [])
|
||||
})
|
||||
.catch((error: any) => {
|
||||
console.error('Points log error:', error)
|
||||
Taro.showToast({
|
||||
title: error?.message || '获取失败',
|
||||
icon: 'error'
|
||||
});
|
||||
})
|
||||
.finally(() => {
|
||||
setLoading(false)
|
||||
})
|
||||
}
|
||||
|
||||
const loadPointsStats = () => {
|
||||
const userId = Taro.getStorageSync('UserId')
|
||||
if (!userId) return
|
||||
|
||||
getUserPointsStats(parseInt(userId))
|
||||
.then((res: any) => {
|
||||
setStats(res)
|
||||
})
|
||||
.catch((error: any) => {
|
||||
console.error('Points stats error:', error)
|
||||
})
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
reload()
|
||||
loadPointsStats()
|
||||
}, []);
|
||||
|
||||
const getPointsTypeText = (type?: number) => {
|
||||
switch (type) {
|
||||
case 1: return '获得积分'
|
||||
case 2: return '消费积分'
|
||||
case 3: return '积分过期'
|
||||
case 4: return '管理员调整'
|
||||
default: return '积分变动'
|
||||
}
|
||||
}
|
||||
|
||||
const getPointsTypeColor = (type?: number) => {
|
||||
switch (type) {
|
||||
case 1: return 'text-green-500'
|
||||
case 2: return 'text-red-500'
|
||||
case 3: return 'text-gray-500'
|
||||
case 4: return 'text-blue-500'
|
||||
default: return 'text-gray-500'
|
||||
}
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<ConfigProvider>
|
||||
<div className={'h-full flex flex-col justify-center items-center'} style={{
|
||||
height: 'calc(100vh - 300px)',
|
||||
}}>
|
||||
<div>加载中...</div>
|
||||
</div>
|
||||
</ConfigProvider>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<ConfigProvider>
|
||||
<View className="bg-gray-50 min-h-screen">
|
||||
{/* 积分统计卡片 */}
|
||||
<View className="p-4">
|
||||
<Card className="points-stats-card">
|
||||
<View className="text-center py-4">
|
||||
<View className="text-3xl font-bold text-orange-500 mb-2">
|
||||
{stats.currentPoints || 0}
|
||||
</View>
|
||||
<View className="text-sm text-gray-500 mb-4">当前积分</View>
|
||||
|
||||
<View className="flex justify-around text-center">
|
||||
<View>
|
||||
<View className="text-lg font-medium text-gray-800">
|
||||
{stats.totalEarned || 0}
|
||||
</View>
|
||||
<View className="text-xs text-gray-500">累计获得</View>
|
||||
</View>
|
||||
<View>
|
||||
<View className="text-lg font-medium text-gray-800">
|
||||
{stats.totalUsed || 0}
|
||||
</View>
|
||||
<View className="text-xs text-gray-500">累计消费</View>
|
||||
</View>
|
||||
<View>
|
||||
<View className="text-lg font-medium text-gray-800">
|
||||
{stats.expiringSoon || 0}
|
||||
</View>
|
||||
<View className="text-xs text-gray-500">即将过期</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</Card>
|
||||
</View>
|
||||
|
||||
{/* 积分记录 */}
|
||||
<View className="px-4">
|
||||
<View className="text-base font-medium text-gray-800 mb-3">积分明细</View>
|
||||
|
||||
{list.length === 0 ? (
|
||||
<div className={'h-full flex flex-col justify-center items-center'} style={{
|
||||
height: 'calc(100vh - 400px)',
|
||||
}}>
|
||||
<Empty
|
||||
style={{
|
||||
backgroundColor: 'transparent'
|
||||
}}
|
||||
description="您还没有积分记录"
|
||||
/>
|
||||
<Space>
|
||||
<Button onClick={() => reload()}>刷新</Button>
|
||||
</Space>
|
||||
</div>
|
||||
) : (
|
||||
list.map((item, index) => (
|
||||
<Cell.Group key={index} className="mb-3">
|
||||
<Cell className="flex flex-col gap-2 p-4">
|
||||
<View className="flex justify-between items-start">
|
||||
<View className="flex-1">
|
||||
<View className="font-medium text-base text-gray-800 mb-1">
|
||||
{getPointsTypeText(item.type)}
|
||||
</View>
|
||||
<View className="text-sm text-gray-500">
|
||||
{item.reason || '无备注'}
|
||||
</View>
|
||||
</View>
|
||||
<View className={`text-lg font-bold ${getPointsTypeColor(item.type)}`}>
|
||||
{item.type === 1 ? '+' : item.type === 2 ? '-' : ''}
|
||||
{item.points || 0}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View className="flex justify-between items-center text-xs text-gray-400 mt-2">
|
||||
<View>
|
||||
{item.createTime ? new Date(item.createTime).toLocaleString() : ''}
|
||||
</View>
|
||||
{item.orderId && (
|
||||
<View>
|
||||
订单: {item.orderId}
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
|
||||
{item.comments && (
|
||||
<View className="text-xs text-gray-500 mt-1 p-2 bg-gray-50 rounded">
|
||||
备注: {item.comments}
|
||||
</View>
|
||||
)}
|
||||
</Cell>
|
||||
</Cell.Group>
|
||||
))
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
</ConfigProvider>
|
||||
);
|
||||
};
|
||||
|
||||
export default UserPoints;
|
||||
4
src/user/wallet/wallet.config.ts
Normal file
4
src/user/wallet/wallet.config.ts
Normal file
@@ -0,0 +1,4 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '余额明细',
|
||||
navigationBarTextStyle: 'black'
|
||||
})
|
||||
0
src/user/wallet/wallet.scss
Normal file
0
src/user/wallet/wallet.scss
Normal file
134
src/user/wallet/wallet.tsx
Normal file
134
src/user/wallet/wallet.tsx
Normal file
@@ -0,0 +1,134 @@
|
||||
import {useEffect, useState} from "react";
|
||||
import Taro from '@tarojs/taro'
|
||||
import {Button, Cell, Space, Empty, ConfigProvider, InfiniteLoading} from '@nutui/nutui-react-taro'
|
||||
import {View, ScrollView} from '@tarojs/components'
|
||||
import {pageUserBalanceLog} from "@/api/user/balance-log";
|
||||
import {UserBalanceLog} from "@/api/user/balance-log/model";
|
||||
import {formatCurrency} from "@/utils/common";
|
||||
|
||||
const Wallet = () => {
|
||||
const [list, setList] = useState<UserBalanceLog[]>([])
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [loadingMore, setLoadingMore] = useState(false)
|
||||
const [refreshing, setRefreshing] = useState(false)
|
||||
const [hasMore, setHasMore] = useState(true)
|
||||
const [currentPage, setCurrentPage] = useState(1)
|
||||
const [total, setTotal] = useState(0)
|
||||
const pageSize = 20
|
||||
|
||||
const reload = () => {
|
||||
setLoading(true)
|
||||
const userId = Taro.getStorageSync('UserId')
|
||||
|
||||
console.log('Loading balance log for userId:', userId)
|
||||
|
||||
if (!userId) {
|
||||
console.warn('No userId found in storage')
|
||||
Taro.showToast({
|
||||
title: '请先登录',
|
||||
icon: 'error'
|
||||
});
|
||||
setLoading(false)
|
||||
return
|
||||
}
|
||||
|
||||
pageUserBalanceLog({
|
||||
userId: parseInt(userId),
|
||||
page: 1,
|
||||
limit: 20
|
||||
})
|
||||
.then((res: any) => {
|
||||
console.log('Balance log response:', res)
|
||||
setList(res?.list || [])
|
||||
})
|
||||
.catch((error: any) => {
|
||||
console.error('Balance log error:', error)
|
||||
Taro.showToast({
|
||||
title: error?.message || '获取失败',
|
||||
icon: 'error'
|
||||
});
|
||||
})
|
||||
.finally(() => {
|
||||
setLoading(false)
|
||||
})
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
reload()
|
||||
}, []);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<ConfigProvider>
|
||||
<div className={'h-full flex flex-col justify-center items-center'} style={{
|
||||
height: 'calc(100vh - 300px)',
|
||||
}}>
|
||||
<div>加载中...</div>
|
||||
</div>
|
||||
</ConfigProvider>
|
||||
)
|
||||
}
|
||||
|
||||
if (list.length == 0) {
|
||||
return (
|
||||
<ConfigProvider>
|
||||
<div className={'h-full flex flex-col justify-center items-center'} style={{
|
||||
height: 'calc(100vh - 300px)',
|
||||
}}>
|
||||
<Empty
|
||||
style={{
|
||||
backgroundColor: 'transparent'
|
||||
}}
|
||||
description="您还没有消费记录"
|
||||
/>
|
||||
<Space>
|
||||
<Button onClick={() => reload()}>刷新</Button>
|
||||
</Space>
|
||||
</div>
|
||||
</ConfigProvider>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<ConfigProvider>
|
||||
<View className="p-4">
|
||||
{list.map((item, index) => (
|
||||
<Cell.Group key={index} className="mb-4">
|
||||
<Cell className="flex flex-col gap-2 p-4">
|
||||
<View className="flex justify-between items-start w-full">
|
||||
<View className="flex-1">
|
||||
<View className="font-medium text-base text-gray-800 mb-1">
|
||||
{item.scene === 10 ? '会员充值' : item.scene === 20 ? '用户消费' : item.scene === 30 ? '管理员操作' : '订单退款'}
|
||||
</View>
|
||||
<View className="text-sm text-gray-500">
|
||||
{item.comments}
|
||||
</View>
|
||||
</View>
|
||||
<View className={`text-lg font-bold ${
|
||||
item.scene === 10 ? 'text-green-500' : ''
|
||||
}`}>
|
||||
{item.scene === 10 ? '+' : '-'}
|
||||
{formatCurrency(Number(item.money), 'CNY') || '0.00'}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View className="flex justify-between w-full items-center text-xs text-gray-400 mt-2">
|
||||
<View>
|
||||
{item.createTime}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{item.remark && (
|
||||
<View className="text-xs text-gray-500 mt-1 p-2 bg-gray-50 rounded">
|
||||
备注: {item.remark}
|
||||
</View>
|
||||
)}
|
||||
</Cell>
|
||||
</Cell.Group>
|
||||
))}
|
||||
</View>
|
||||
</ConfigProvider>
|
||||
);
|
||||
};
|
||||
|
||||
export default Wallet;
|
||||
Reference in New Issue
Block a user