gxwebsoft/template-10579
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(articles): 移除文章管理相关页面和配置文件

Browse Source 
- 删除管理员文章新增页面及其配置文件
- 删除用户礼品卡相关页面和配置文件
- 移除文章列表和分类页面组件及配置
- 在应用配置中添加优惠券接收和详情页面路由
- 删除文章相关的表单、列表和详情页面组件
This commit is contained in:
赵忠林
2026-03-17 23:39:25 +08:00
parent c7d2776009
commit 3cf8f40926
27 changed files with 6 additions and 2739 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/admin/article/add.config.ts
View File

@@ -1,4 +0,0 @@
export default definePageConfig({
navigationBarTitleText: '新增收货地址',
navigationBarTextStyle: 'black'
})

323
src/admin/article/add.tsx
View File

@@ -1,323 +0,0 @@
import {useEffect, useState, useRef} from "react";
import {useRouter} from '@tarojs/taro'
import {Button, Loading, CellGroup, Input, TextArea, Form, Switch, InputNumber, Radio, Image} from '@nutui/nutui-react-taro'
import {Edit, Upload as UploadIcon} from '@nutui/icons-react-taro'
import Taro from '@tarojs/taro'
import {View} from '@tarojs/components'
import {ShopArticle} from "@/api/shop/shopArticle/model";
import {getShopArticle, addShopArticle, updateShopArticle} from "@/api/shop/shopArticle";
import FixedButton from "@/components/FixedButton";
const AddShopArticle = () => {
const {params} = useRouter();
const [loading, setLoading] = useState<boolean>(true)
const [formData, setFormData] = useState<ShopArticle>({
type: 0, // 默认常规文章
status: 0, // 默认已发布
permission: 0, // 默认所有人可见
recommend: 0, // 默认不推荐
showType: 10, // 默认小图展示
virtualViews: 0, // 默认虚拟阅读量
actualViews: 0, // 默认实际阅读量
sortNumber: 0 // 默认排序
})
const formRef = useRef<any>(null)
// 判断是编辑还是新增模式
const isEditMode = !!params.id
const articleId = params.id ? Number(params.id) : undefined
// 文章类型选项
const typeOptions = [
{ text: '常规文章', value: 0 },
{ text: '视频文章', value: 1 }
]
// 状态选项
const statusOptions = [
{ text: '已发布', value: 0 },
{ text: '待审核', value: 1 },
{ text: '已驳回', value: 2 },
{ text: '违规内容', value: 3 }
]
// 可见性选项
const permissionOptions = [
{ text: '所有人可见', value: 0 },
{ text: '登录可见', value: 1 },
{ text: '密码可见', value: 2 }
]
// 显示方式选项
const showTypeOptions = [
{ text: '小图展示', value: 10 },
{ text: '大图展示', value: 20 }
]
const reload = async () => {
// 如果是编辑模式，加载文章数据
if (isEditMode && articleId) {
try {
const article = await getShopArticle(articleId)
setFormData(article)
// 更新表单值
if (formRef.current) {
formRef.current.setFieldsValue(article)
}
} catch (error) {
console.error('加载文章失败:', error)
Taro.showToast({
title: '加载文章失败',
icon: 'error'
});
}
}
}
// 图片上传处理
const handleImageUpload = async () => {
try {
const res = await Taro.chooseImage({
count: 1,
sizeType: ['compressed'],
sourceType: ['album', 'camera']
});
if (res.tempFilePaths && res.tempFilePaths.length > 0) {
// 这里应该调用上传接口，暂时使用本地路径
const imagePath = res.tempFilePaths[0];
setFormData({
...formData,
image: imagePath
});
Taro.showToast({
title: '图片选择成功',
icon: 'success'
});
}
} catch (error) {
Taro.showToast({
title: '图片选择失败',
icon: 'error'
});
}
};
// 提交表单
const submitSucceed = async (values: any) => {
try {
// 准备提交的数据
const submitData = {
...formData,
...values,
};
// 如果是编辑模式，添加id
if (isEditMode && articleId) {
submitData.articleId = articleId;
}
// 执行新增或更新操作
if (isEditMode) {
await updateShopArticle(submitData);
} else {
await addShopArticle(submitData);
}
Taro.showToast({
title: `${isEditMode ? '更新' : '保存'}成功`,
icon: 'success'
});
setTimeout(() => {
Taro.navigateBack();
}, 1000);
} catch (error) {
console.error('保存失败:', error);
Taro.showToast({
title: `${isEditMode ? '更新' : '保存'}失败`,
icon: 'error'
});
}
}
const submitFailed = (error: any) => {
console.log(error, 'err...')
}
useEffect(() => {
// 动态设置页面标题
Taro.setNavigationBarTitle({
title: isEditMode ? '编辑文章' : '新增文章'
});
reload().then(() => {
setLoading(false)
})
}, [isEditMode]);
if (loading) {
return <Loading className={'px-2'}>加载中</Loading>
}
return (
<>
<Form
ref={formRef}
divider
initialValues={formData}
labelPosition="left"
onFinish={(values) => submitSucceed(values)}
onFinishFailed={(errors) => submitFailed(errors)}
>
{/* 基本信息 */}
<CellGroup title="基本信息">
<Form.Item
name="title"
label="文章标题"
required
rules={[{ required: true, message: '请输入文章标题' }]}
initialValue={formData.title}
>
<Input placeholder="请输入文章标题" maxLength={100}/>
</Form.Item>
<Form.Item name="overview" label="文章概述" initialValue={formData.overview}>
<TextArea placeholder="请输入文章概述，用于列表展示" maxLength={200} rows={3}/>
</Form.Item>
<Form.Item
name="detail"
label="文章内容"
required
rules={[{ required: true, message: '请输入文章内容' }]}
initialValue={formData.detail}
>
<TextArea placeholder="请输入文章内容" maxLength={10000} rows={8}/>
</Form.Item>
<Form.Item name="author" label="作者" initialValue={formData.author}>
<Input placeholder="请输入作者名称" maxLength={50}/>
</Form.Item>
<Form.Item name="source" label="来源" initialValue={formData.source}>
<Input placeholder="请输入文章来源" maxLength={100}/>
</Form.Item>
</CellGroup>
{/* 文章设置 */}
<CellGroup title="文章设置">
<Form.Item name="type" label="文章类型" initialValue={formData.type}>
<Radio.Group direction="horizontal" value={formData.type}>
{typeOptions.map(option => (
<Radio key={option.value} value={option.value}>
{option.text}
</Radio>
))}
</Radio.Group>
</Form.Item>
<Form.Item name="status" label="发布状态" initialValue={formData.status}>
<Radio.Group direction="horizontal" value={formData.status}>
{statusOptions.map(option => (
<Radio key={option.value} value={option.value}>
{option.text}
</Radio>
))}
</Radio.Group>
</Form.Item>
<Form.Item name="permission" label="可见性" initialValue={formData.permission}>
<Radio.Group direction="horizontal" value={formData.permission}>
{permissionOptions.map(option => (
<Radio key={option.value} value={option.value}>
{option.text}
</Radio>
))}
</Radio.Group>
</Form.Item>
<Form.Item name="showType" label="显示方式" initialValue={formData.showType}>
<Radio.Group direction="horizontal" value={formData.showType}>
{showTypeOptions.map(option => (
<Radio key={option.value} value={option.value}>
{option.text}
</Radio>
))}
</Radio.Group>
</Form.Item>
</CellGroup>
{/* 高级设置 */}
<CellGroup title="高级设置">
<Form.Item name="recommend" label="推荐文章" initialValue={formData.recommend}>
<Switch
checked={formData.recommend === 1}
onChange={(checked) =>
setFormData({...formData, recommend: checked ? 1 : 0})
}
/>
</Form.Item>
<Form.Item name="price" label="付费金额" initialValue={formData.price}>
<Input placeholder="0.00" type="number"/>
<View className="text-xs text-gray-500 mt-1">单位：元</View>
</Form.Item>
<Form.Item name="virtualViews" label="虚拟阅读量" initialValue={formData.virtualViews}>
<InputNumber min={0} defaultValue={formData.virtualViews || 0}/>
</Form.Item>
<Form.Item name="actualViews" label="实际阅读量" initialValue={formData.actualViews}>
<InputNumber min={0} defaultValue={formData.actualViews || 0}/>
</Form.Item>
<Form.Item name="sortNumber" label="排序" initialValue={formData.sortNumber}>
<InputNumber min={0} defaultValue={formData.sortNumber || 0}/>
<View className="text-xs text-gray-500 mt-1">数字越小越靠前</View>
</Form.Item>
<Form.Item name="tags" label="标签" initialValue={formData.tags}>
<Input placeholder="请输入标签，多个标签用逗号分隔" maxLength={200}/>
</Form.Item>
<Form.Item name="topic" label="话题" initialValue={formData.topic}>
<Input placeholder="请输入话题" maxLength={100}/>
</Form.Item>
</CellGroup>
{/* 图片上传 */}
<CellGroup title="文章图片">
<Form.Item name="image" label="封面图片" initialValue={formData.image}>
<View className="flex items-center gap-3">
{formData.image && (
<Image
src={formData.image}
width="80"
height="80"
radius="8"
/>
)}
<Button
size="small"
type="primary"
fill="outline"
icon={<UploadIcon />}
onClick={handleImageUpload}
>
{formData.image ? '更换图片' : '上传图片'}
</Button>
</View>
</Form.Item>
</CellGroup>
{/* 提交按钮 */}
<FixedButton text={isEditMode ? '更新文章' : '发布文章'} onClick={() => submitSucceed} icon={<Edit />} />
</Form>
</>
);
};
export default AddShopArticle;

11
src/admin/components/UserCard.tsx
View File

@@ -16,7 +16,6 @@ function UserCard() {
const [userInfo, setUserInfo] = useState<User>()
const [couponCount, setCouponCount] = useState(0)
// const [pointsCount, setPointsCount] = useState(0)
const [giftCount, setGiftCount] = useState(0)
useEffect(() => {
// Taro.getSetting：获取用户的当前设置。返回值中只会出现小程序已经向用户请求过的权限。
@@ -54,11 +53,6 @@ function UserCard() {
// .catch((error: any) => {
// console.error('Points stats error:', error)
// })
// 加载礼品劵数量
setGiftCount(0)
// pageUserGiftLog({userId, page: 1, limit: 1}).then(res => {
// setGiftCount(res.count || 0)
// })
}
const reload = () => {
@@ -235,11 +229,6 @@ function UserCard() {
<span className={'text-sm text-gray-500'}>优惠券</span>
<span className={'text-xl'}>{couponCount}</span>
</div>
<div className={'item flex justify-center flex-col items-center'}
onClick={() => navTo('/user/gift/index', true)}>
<span className={'text-sm text-gray-500'}>水票</span>
<span className={'text-xl'}>{giftCount}</span>
</div>
{/*<div className={'item flex justify-center flex-col items-center'}>*/}
{/* <span className={'text-sm text-gray-500'}>积分</span>*/}
{/* <span className={'text-xl'}>{pointsCount}</span>*/}

2
src/app.config.ts
View File

@@ -52,6 +52,8 @@ export default {
"about/index",
"wallet/wallet",
"coupon/index",
"coupon/receive",
"coupon/detail",
"points/points",
"ticket/index",
"ticket/use",

180
src/app.config.ts.backup.1773665957890
View File

@@ -1,180 +0,0 @@
export default {
pages: [
'pages/index/index',
'pages/cart/cart',
'pages/find/find',
'pages/user/user'
],
"subpackages": [
{
"root": "passport",
"pages": [
"login",
"register",
"forget",
"setting",
"agreement",
"sms-login",
'qr-login/index',
'qr-confirm/index',
'unified-qr/index'
]
},
{
"root": "cms",
"pages": [
'category/index',
"detail/index"
]
},
{
"root": "coupon",
"pages": [
"index"
]
},
{
"root": "user",
"pages": [
"order/order",
"order/logistics/index",
"order/evaluate/index",
"order/refund/index",
"order/progress/index",
"company/company",
"profile/profile",
"setting/setting",
"userVerify/index",
"address/index",
"address/add",
"address/wxAddress",
"help/index",
"about/index",
"wallet/wallet",
"coupon/index",
"points/points",
"ticket/index",
"ticket/use",
"ticket/orders/index",
// "gift/index",
// "gift/redeem",
// "gift/detail",
// "gift/add",
"store/verification",
"store/orders/index",
"theme/index",
"poster/poster",
"chat/conversation/index",
"chat/message/index",
"chat/message/add",
"chat/message/detail"
]
},
{
"root": "dealer",
"pages": [
"index",
"apply/add",
"withdraw/index",
"orders/index",
"capital/index",
"team/index",
"qrcode/index",
"invite-stats/index",
"info"
]
},
{
"root": "shop",
"pages": [
'category/index',
'orderDetail/index',
'goodsDetail/index',
'orderConfirm/index',
'orderConfirmCart/index',
'comments/index',
'search/index']
},
{
"root": "store",
"pages": [
"index",
"orders/index"
]
},
{
"root": "rider",
"pages": [
"index",
"orders/index",
"ticket/verification/index"
]
},
{
"root": "admin",
"pages": [
"index",
"article/index",
]
},
{
"root": "credit",
"pages": [
"data/index",
"customer/index",
"order/index",
"order/add",
"company/index",
"company/add",
"company/detail",
"company/follow-step1",
"company/edit"
]
}
],
window: {
backgroundTextStyle: 'dark',
navigationBarBackgroundColor: '#fff',
navigationBarTitleText: 'WeChat',
navigationBarTextStyle: 'black'
},
tabBar: {
custom: false,
color: "#8a8a8a",
selectedColor: "#e60012",
backgroundColor: "#ffffff",
list: [
{
pagePath: "pages/index/index",
iconPath: "assets/tabbar/home.png",
selectedIconPath: "assets/tabbar/home-active.png",
text: "首页",
},
{
pagePath: "pages/find/find",
iconPath: "assets/tabbar/shop.png",
selectedIconPath: "assets/tabbar/shop-active.png",
text: "网点",
},
{
pagePath: "pages/user/user",
iconPath: "assets/tabbar/user.png",
selectedIconPath: "assets/tabbar/user-active.png",
text: "我的",
},
],
},
requiredPrivateInfos: [
"getLocation",
"chooseLocation",
"chooseAddress"
],
permission: {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序位置接口的效果展示"
},
"scope.writePhotosAlbum": {
"desc": "用于保存小程序码到相册，方便分享给好友"
}
}
}

35
src/pages/category/components/ArticleList.tsx
View File

@@ -1,35 +0,0 @@
import {Image, Cell} from '@nutui/nutui-react-taro'
import {View, Text} from '@tarojs/components'
import Taro from '@tarojs/taro'
const ArticleList = (props: any) => {
return (
<>
<View className={'px-3'}>
{props.data.map((item: any, index: number) => {
return (
<Cell
title={
<View>
<View className="text-base font-medium mb-1">{item.title}</View>
{item.comments && (
<Text className="text-sm text-gray-500 leading-relaxed">
{item.comments}
</Text>
)}
</View>
}
extra={
<Image src={item.image} mode={'aspectFit'} lazyLoad={false} width={100} height="100"/>
}
key={index}
onClick={() => Taro.navigateTo({url: '/cms/detail/index?id=' + item.articleId})}
/>
)
})}
</View>
</>
)
}
export default ArticleList

59
src/pages/category/components/ArticleTabs.tsx
View File

@@ -1,59 +0,0 @@
import {useEffect, useState} from "react";
import {Tabs, Loading} from '@nutui/nutui-react-taro'
import {pageCmsArticle} from "@/api/cms/cmsArticle";
import {CmsArticle} from "@/api/cms/cmsArticle/model";
import ArticleList from "./ArticleList";
const ArticleTabs = (props: any) => {
const [loading, setLoading] = useState<boolean>(true)
const [tab1value, setTab1value] = useState<string | number>('0')
const [list, setList] = useState<CmsArticle[]>([])
const reload = async (value) => {
const {data} = props
pageCmsArticle({
categoryId: data[value].navigationId,
page: 1,
status: 0,
limit: 10
}).then((res) => {
res && setList(res?.list || [])
})
.catch(err => {
console.log(err)
})
.finally(() => {
setTab1value(value)
setLoading(false)
})
}
useEffect(() => {
reload(0).then()
}, []);
if (loading) {
return (
<Loading className={'px-2'}>加载中</Loading>
)
}
return (
<>
<Tabs
value={tab1value}
onChange={(value) => {
reload(value).then()
}}
>
{props.data?.map((item, index) => {
return (
<Tabs.TabPane title={item.categoryName} key={index}/>
)
})}
</Tabs>
<ArticleList data={list}/>
</>
)
}
export default ArticleTabs

31
src/pages/category/components/Banner.tsx
View File

@@ -1,31 +0,0 @@
import { useEffect, useState } from 'react'
import { Swiper } from '@nutui/nutui-react-taro'
import {CmsAd} from "@/api/cms/cmsAd/model";
import {Image} from '@nutui/nutui-react-taro'
import {getCmsAd} from "@/api/cms/cmsAd";
const MyPage = () => {
const [item, setItem] = useState<CmsAd>()
const reload = () => {
getCmsAd(439).then(data => {
setItem(data)
})
}
useEffect(() => {
reload()
}, [])
return (
<>
<Swiper defaultValue={0} height={item?.height} indicator style={{ height: item?.height + 'px', display: 'none' }}>
{item?.imageList?.map((item) => (
<Swiper.Item key={item}>
<Image width="100%" height="100%" src={item.url} mode={'scaleToFill'} lazyLoad={false} style={{ height: item.height + 'px' }} />
</Swiper.Item>
))}
</Swiper>
</>
)
}
export default MyPage

4
src/pages/category/index.config.ts
View File

@@ -1,4 +0,0 @@
export default definePageConfig({
navigationBarTitleText: '文章列表',
navigationBarTextStyle: 'black'
})

0
src/pages/category/index.scss
View File

96
src/pages/category/index.tsx
View File

@@ -1,96 +0,0 @@
import Taro from '@tarojs/taro'
import {useShareAppMessage} from "@tarojs/taro"
import {useEffect, useState} from "react"
import {useRouter} from '@tarojs/taro'
import {View} from '@tarojs/components'
import {getCmsNavigation, listCmsNavigation} from "@/api/cms/cmsNavigation";
import {CmsNavigation} from "@/api/cms/cmsNavigation/model";
import {pageCmsArticle} from "@/api/cms/cmsArticle";
import {CmsArticle} from "@/api/cms/cmsArticle/model";
import ArticleList from './components/ArticleList'
import ArticleTabs from "./components/ArticleTabs";
import './index.scss'
function Category() {
const {params} = useRouter();
const [categoryId, setCategoryId] = useState<number>(0)
const [category, setCategory] = useState<CmsNavigation[]>([])
const [loading, setLoading] = useState<boolean>(true)
const [nav, setNav] = useState<CmsNavigation>()
const [list, setList] = useState<CmsArticle[]>([])
const reload = async () => {
try {
setLoading(true)
// 1.加载远程数据
const id = Number(params.id || 4328)
const nav = await getCmsNavigation(id)
const categoryList = await listCmsNavigation({parentId: id})
const shopGoods = await pageCmsArticle({categoryId: id})
// 2.赋值
setCategoryId(id)
setNav(nav)
setList(shopGoods?.list || [])
setCategory(categoryList)
Taro.setNavigationBarTitle({
title: `${nav?.categoryName}`
})
} catch (error) {
console.error('文章分类加载失败:', error)
} finally {
setLoading(false)
}
};
useEffect(() => {
reload()
}, []);
useShareAppMessage(() => {
return {
title: `${nav?.categoryName}_易赊宝`,
path: `/shop/category/index?id=${categoryId}`,
success: function () {
console.log('分享成功');
},
fail: function () {
console.log('分享失败');
}
};
});
// 骨架屏组件
const ArticleSkeleton = () => (
<View className="px-3">
{[1, 2, 3, 4, 5].map(i => (
<View key={i} className="flex items-center py-4 border-b border-gray-100">
{/* 左侧文字骨架屏 */}
<View className="flex-1 pr-4">
{/* 标题骨架屏 */}
<View className="bg-gray-200 h-5 rounded animate-pulse mb-2" style={{width: '75%'}}/>
{/* 副标题骨架屏 */}
<View className="bg-gray-200 h-4 rounded animate-pulse" style={{width: '50%'}}/>
</View>
{/* 右侧图片骨架屏 */}
<View
className="bg-gray-200 rounded animate-pulse flex-shrink-0"
style={{width: '100px', height: '100px'}}
/>
</View>
))}
</View>
)
if (loading) {
return <ArticleSkeleton />
}
if(category.length > 0){
return <ArticleTabs data={category}/>
}
return <ArticleList data={list}/>
}
export default Category

5
src/passport/register.tsx
View File

@@ -87,9 +87,8 @@ function isTabBarUrl(url: string) {
const pure = url.split('?')[0]
return (
pure === '/pages/index/index' ||
pure === '/pages/cart/cart' ||
pure === '/pages/user/user' ||
pure === '/pages/category/index'
pure === '/pages/find/find' ||
pure === '/pages/user/user'
)
}

5
src/passport/sms-login.tsx
View File

@@ -36,9 +36,8 @@ const SmsLogin = () => {
const pure = url.split('?')[0]
return (
pure === '/pages/index/index' ||
pure === '/pages/cart/cart' ||
pure === '/pages/user/user' ||
pure === '/pages/category/index'
pure === '/pages/find/find' ||
pure === '/pages/user/user'
)
}

4
src/shop/gift/index.config.ts
View File

@@ -1,4 +0,0 @@
export default definePageConfig({
navigationBarTitleText: '立即送水',
navigationBarTextStyle: 'black'
})

0
src/shop/gift/index.tsx
View File

4
src/user/gift/add.config.ts
View File

@@ -1,4 +0,0 @@
export default definePageConfig({
navigationBarTitleText: '新增收货地址',
navigationBarTextStyle: 'black'
})

323
src/user/gift/add.tsx
View File

@@ -1,323 +0,0 @@
import {useEffect, useState, useRef} from "react";
import {useRouter} from '@tarojs/taro'
import {Button, Loading, CellGroup, Input, TextArea, Form, Switch, InputNumber, Radio, Image} from '@nutui/nutui-react-taro'
import {Edit, Upload as UploadIcon} from '@nutui/icons-react-taro'
import Taro from '@tarojs/taro'
import {View} from '@tarojs/components'
import {ShopArticle} from "@/api/shop/shopArticle/model";
import {getShopArticle, addShopArticle, updateShopArticle} from "@/api/shop/shopArticle";
import FixedButton from "@/components/FixedButton";
const AddShopArticle = () => {
const {params} = useRouter();
const [loading, setLoading] = useState<boolean>(true)
const [formData, setFormData] = useState<ShopArticle>({
type: 0, // 默认常规文章
status: 0, // 默认已发布
permission: 0, // 默认所有人可见
recommend: 0, // 默认不推荐
showType: 10, // 默认小图展示
virtualViews: 0, // 默认虚拟阅读量
actualViews: 0, // 默认实际阅读量
sortNumber: 0 // 默认排序
})
const formRef = useRef<any>(null)
// 判断是编辑还是新增模式
const isEditMode = !!params.id
const articleId = params.id ? Number(params.id) : undefined
// 文章类型选项
const typeOptions = [
{ text: '常规文章', value: 0 },
{ text: '视频文章', value: 1 }
]
// 状态选项
const statusOptions = [
{ text: '已发布', value: 0 },
{ text: '待审核', value: 1 },
{ text: '已驳回', value: 2 },
{ text: '违规内容', value: 3 }
]
// 可见性选项
const permissionOptions = [
{ text: '所有人可见', value: 0 },
{ text: '登录可见', value: 1 },
{ text: '密码可见', value: 2 }
]
// 显示方式选项
const showTypeOptions = [
{ text: '小图展示', value: 10 },
{ text: '大图展示', value: 20 }
]
const reload = async () => {
// 如果是编辑模式，加载文章数据
if (isEditMode && articleId) {
try {
const article = await getShopArticle(articleId)
setFormData(article)
// 更新表单值
if (formRef.current) {
formRef.current.setFieldsValue(article)
}
} catch (error) {
console.error('加载文章失败:', error)
Taro.showToast({
title: '加载文章失败',
icon: 'error'
});
}
}
}
// 图片上传处理
const handleImageUpload = async () => {
try {
const res = await Taro.chooseImage({
count: 1,
sizeType: ['compressed'],
sourceType: ['album', 'camera']
});
if (res.tempFilePaths && res.tempFilePaths.length > 0) {
// 这里应该调用上传接口，暂时使用本地路径
const imagePath = res.tempFilePaths[0];
setFormData({
...formData,
image: imagePath
});
Taro.showToast({
title: '图片选择成功',
icon: 'success'
});
}
} catch (error) {
Taro.showToast({
title: '图片选择失败',
icon: 'error'
});
}
};
// 提交表单
const submitSucceed = async (values: any) => {
try {
// 准备提交的数据
const submitData = {
...formData,
...values,
};
// 如果是编辑模式，添加id
if (isEditMode && articleId) {
submitData.articleId = articleId;
}
// 执行新增或更新操作
if (isEditMode) {
await updateShopArticle(submitData);
} else {
await addShopArticle(submitData);
}
Taro.showToast({
title: `${isEditMode ? '更新' : '保存'}成功`,
icon: 'success'
});
setTimeout(() => {
Taro.navigateBack();
}, 1000);
} catch (error) {
console.error('保存失败:', error);
Taro.showToast({
title: `${isEditMode ? '更新' : '保存'}失败`,
icon: 'error'
});
}
}
const submitFailed = (error: any) => {
console.log(error, 'err...')
}
useEffect(() => {
// 动态设置页面标题
Taro.setNavigationBarTitle({
title: isEditMode ? '编辑文章' : '新增文章'
});
reload().then(() => {
setLoading(false)
})
}, [isEditMode]);
if (loading) {
return <Loading className={'px-2'}>加载中</Loading>
}
return (
<>
<Form
ref={formRef}
divider
initialValues={formData}
labelPosition="left"
onFinish={(values) => submitSucceed(values)}
onFinishFailed={(errors) => submitFailed(errors)}
>
{/* 基本信息 */}
<CellGroup title="基本信息">
<Form.Item
name="title"
label="文章标题"
required
rules={[{ required: true, message: '请输入文章标题' }]}
initialValue={formData.title}
>
<Input placeholder="请输入文章标题" maxLength={100}/>
</Form.Item>
<Form.Item name="overview" label="文章概述" initialValue={formData.overview}>
<TextArea placeholder="请输入文章概述，用于列表展示" maxLength={200} rows={3}/>
</Form.Item>
<Form.Item
name="detail"
label="文章内容"
required
rules={[{ required: true, message: '请输入文章内容' }]}
initialValue={formData.detail}
>
<TextArea placeholder="请输入文章内容" maxLength={10000} rows={8}/>
</Form.Item>
<Form.Item name="author" label="作者" initialValue={formData.author}>
<Input placeholder="请输入作者名称" maxLength={50}/>
</Form.Item>
<Form.Item name="source" label="来源" initialValue={formData.source}>
<Input placeholder="请输入文章来源" maxLength={100}/>
</Form.Item>
</CellGroup>
{/* 文章设置 */}
<CellGroup title="文章设置">
<Form.Item name="type" label="文章类型" initialValue={formData.type}>
<Radio.Group direction="horizontal" value={formData.type}>
{typeOptions.map(option => (
<Radio key={option.value} value={option.value}>
{option.text}
</Radio>
))}
</Radio.Group>
</Form.Item>
<Form.Item name="status" label="发布状态" initialValue={formData.status}>
<Radio.Group direction="horizontal" value={formData.status}>
{statusOptions.map(option => (
<Radio key={option.value} value={option.value}>
{option.text}
</Radio>
))}
</Radio.Group>
</Form.Item>
<Form.Item name="permission" label="可见性" initialValue={formData.permission}>
<Radio.Group direction="horizontal" value={formData.permission}>
{permissionOptions.map(option => (
<Radio key={option.value} value={option.value}>
{option.text}
</Radio>
))}
</Radio.Group>
</Form.Item>
<Form.Item name="showType" label="显示方式" initialValue={formData.showType}>
<Radio.Group direction="horizontal" value={formData.showType}>
{showTypeOptions.map(option => (
<Radio key={option.value} value={option.value}>
{option.text}
</Radio>
))}
</Radio.Group>
</Form.Item>
</CellGroup>
{/* 高级设置 */}
<CellGroup title="高级设置">
<Form.Item name="recommend" label="推荐文章" initialValue={formData.recommend}>
<Switch
checked={formData.recommend === 1}
onChange={(checked) =>
setFormData({...formData, recommend: checked ? 1 : 0})
}
/>
</Form.Item>
<Form.Item name="price" label="付费金额" initialValue={formData.price}>
<Input placeholder="0.00" type="number"/>
<View className="text-xs text-gray-500 mt-1">单位：元</View>
</Form.Item>
<Form.Item name="virtualViews" label="虚拟阅读量" initialValue={formData.virtualViews}>
<InputNumber min={0} defaultValue={formData.virtualViews || 0}/>
</Form.Item>
<Form.Item name="actualViews" label="实际阅读量" initialValue={formData.actualViews}>
<InputNumber min={0} defaultValue={formData.actualViews || 0}/>
</Form.Item>
<Form.Item name="sortNumber" label="排序" initialValue={formData.sortNumber}>
<InputNumber min={0} defaultValue={formData.sortNumber || 0}/>
<View className="text-xs text-gray-500 mt-1">数字越小越靠前</View>
</Form.Item>
<Form.Item name="tags" label="标签" initialValue={formData.tags}>
<Input placeholder="请输入标签，多个标签用逗号分隔" maxLength={200}/>
</Form.Item>
<Form.Item name="topic" label="话题" initialValue={formData.topic}>
<Input placeholder="请输入话题" maxLength={100}/>
</Form.Item>
</CellGroup>
{/* 图片上传 */}
<CellGroup title="文章图片">
<Form.Item name="image" label="封面图片" initialValue={formData.image}>
<View className="flex items-center gap-3">
{formData.image && (
<Image
src={formData.image}
width="80"
height="80"
radius="8"
/>
)}
<Button
size="small"
type="primary"
fill="outline"
icon={<UploadIcon />}
onClick={handleImageUpload}
>
{formData.image ? '更换图片' : '上传图片'}
</Button>
</View>
</Form.Item>
</CellGroup>
{/* 提交按钮 */}
<FixedButton text={isEditMode ? '更新文章' : '发布文章'} onClick={() => submitSucceed} icon={<Edit />} />
</Form>
</>
);
};
export default AddShopArticle;

5
src/user/gift/detail.config.ts
View File

@@ -1,5 +0,0 @@
export default definePageConfig({
navigationBarTitleText: '礼品卡详情',
navigationBarTextStyle: 'black',
navigationBarBackgroundColor: '#ffffff'
})

335
src/user/gift/detail.tsx
View File

@@ -1,335 +0,0 @@
import {useState, useEffect} from "react";
import {useRouter} from '@tarojs/taro'
import {Button, ConfigProvider, Divider} from '@nutui/nutui-react-taro'
import {Gift, Clock, Location, Phone, Copy, QrCode} from '@nutui/icons-react-taro'
import Taro from '@tarojs/taro'
import {View, Text} from '@tarojs/components'
import {ShopGift} from "@/api/shop/shopGift/model";
import {getShopGift} from "@/api/shop/shopGift";
import GiftCardShare from "@/components/GiftCardShare";
import SimpleQRCodeModal from "@/components/SimpleQRCodeModal";
import dayjs from "dayjs";
const GiftCardDetail = () => {
const router = useRouter()
const [gift, setGift] = useState<ShopGift | null>(null)
const [loading, setLoading] = useState(true)
const [showShare, setShowShare] = useState(false)
const [showQRCode, setShowQRCode] = useState(false)
const giftId = router.params.id
useEffect(() => {
if (giftId) {
loadGiftDetail()
}
}, [giftId])
const loadGiftDetail = async () => {
try {
setLoading(true)
const data = await getShopGift(Number(giftId))
setGift(data)
} catch (error) {
console.error('获取礼品卡详情失败:', error)
Taro.showToast({
title: '获取礼品卡详情失败',
icon: 'error'
})
} finally {
setLoading(false)
}
}
// 获取礼品卡类型文本
const getGiftTypeText = (type?: number) => {
switch (type) {
case 10: return '礼品劵'
case 20: return '虚拟礼品卡'
case 30: return '服务礼品卡'
default: return '水票'
}
}
// 获取礼品卡面值显示
const getGiftValueDisplay = () => {
if (!gift || !gift.faceValue) return ''
return `¥${gift.faceValue}`
}
// 获取使用条件文本
const getUsageText = () => {
if (!gift) return ''
if (gift.instructions) {
return gift.instructions
}
switch (gift.type) {
case 10: return '请到指定门店使用此礼品卡'
case 20: return '可在线上平台直接使用'
case 30: return '请联系客服预约服务时间'
default: return '请按照使用说明进行操作'
}
}
// 获取有效期文本
const getValidityText = () => {
if (!gift) return ''
if (gift.validDays) {
return `有效期${gift.validDays}天`
} else if (gift.expireTime) {
return `有效期至 ${dayjs(gift.expireTime).format('YYYY年MM月DD日')}`
} else {
return '长期有效'
}
}
// 获取礼品卡状态
const getGiftStatus = () => {
if (!gift) return { status: 0, text: '未知', color: 'default' }
switch (gift.status) {
case 0:
return { status: 0, text: '可使用', color: 'success' }
case 1:
return { status: 1, text: '已使用', color: 'warning' }
case 2:
return { status: 2, text: '已过期', color: 'danger' }
default:
return { status: 0, text: '未知', color: 'default' }
}
}
// 使用礼品卡 - 打开二维码弹窗
const handleUseGift = () => {
if (!gift) return
setShowQRCode(true)
}
// 点击二维码图标
const handleQRCodeClick = () => {
if (!gift) return
setShowQRCode(true)
}
// 复制兑换码
const handleCopyCode = () => {
if (!gift?.code) return
Taro.setClipboardData({
data: gift.code,
success: () => {
Taro.showToast({
title: '兑换码已复制',
icon: 'success'
})
},
fail: () => {
Taro.showToast({
title: '复制失败',
icon: 'error'
})
}
})
}
// 返回上一页
const handleBack = () => {
Taro.navigateBack()
}
if (loading) {
return (
<ConfigProvider>
<View className="flex justify-center items-center h-screen">
<Text>加载中...</Text>
</View>
</ConfigProvider>
)
}
if (!gift) {
return (
<ConfigProvider>
<View className="flex flex-col justify-center items-center h-screen">
<Text className="text-gray-500 mb-4">礼品卡不存在</Text>
<Button onClick={handleBack}>返回</Button>
</View>
</ConfigProvider>
)
}
const statusInfo = getGiftStatus()
return (
<ConfigProvider>
{/* 礼品卡卡片 */}
<View className="m-4 p-6 rounded-2xl text-white" style={{background: 'linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%)'}}>
<View className="flex items-center justify-between mb-4">
<View className="w-full">
<Text className="text-4xl font-bold">{getGiftValueDisplay()}</Text>
<Text className="opacity-90 mt-1 px-2">{getGiftTypeText(gift.type)}</Text>
</View>
<View
className="p-2 bg-white bg-opacity-20 rounded-lg cursor-pointer"
onClick={handleQRCodeClick}
>
<QrCode size="24" />
</View>
</View>
<Text className="text-xl font-semibold mb-2">{gift.name}</Text>
<Text className="text-base opacity-90 px-2">{gift.description || getUsageText()}</Text>
{/* 兑换码 */}
{gift.code && (
<View className="mt-4 p-3 bg-white bg-opacity-20 rounded-lg">
<View className="flex items-center justify-between">
<View>
<Text className="text-sm opacity-80 px-2">兑换码</Text>
<Text className="text-lg font-mono font-bold">{gift.code}</Text>
</View>
<Button
size="small"
fill="outline"
icon={<Copy />}
onClick={handleCopyCode}
className="border-white text-white"
>
复制
</Button>
</View>
</View>
)}
</View>
{/* 详细信息 */}
<View className="bg-white mx-4 rounded-xl p-4">
<Text className="text-lg font-semibold">使用说明</Text>
<View className={'mt-4'}>
<View className="flex items-center mb-3">
<Clock size="16" className="text-gray-400 mr-3" />
<View>
<Text className="text-gray-400 text-sm">有效期</Text>
<Text className="text-blue-500 text-sm px-1">{getValidityText()}</Text>
</View>
</View>
<Divider />
<View className="flex items-center mb-3">
<Gift size="16" className="text-gray-400 mr-3" />
<View>
<Text className="text-gray-400 text-sm">类型</Text>
<Text className="text-blue-500 text-sm px-1">{getGiftTypeText(gift.type)}</Text>
</View>
</View>
{gift.useLocation && (
<>
<Divider />
<View className="flex items-center">
<Location size="16" className="text-gray-400 mr-3" />
<View>
<Text className="text-gray-400 text-sm">使用地址</Text>
<Text className="text-blue-500 text-sm px-1">{gift.useLocation}</Text>
</View>
</View>
</>
)}
{gift.contactInfo && (
<>
<Divider />
<View className="flex items-center">
<Phone size="16" className="text-gray-400 mr-3" />
<View>
<Text className="text-gray-600 text-sm">客服联系</Text>
<Text className="text-gray-900">{gift.contactInfo}</Text>
</View>
</View>
</>
)}
{gift.instructions && (
<>
<Divider />
<View>
<Text className="text-gray-600 text-sm mb-2">使用说明</Text>
<Text className="text-gray-900 leading-relaxed">{gift.instructions}</Text>
</View>
</>
)}
{gift.takeTime && (
<>
<Divider />
<View>
<Text className="text-gray-600 text-sm mb-2">使用记录</Text>
<Text className="text-gray-900">使用时间：{dayjs(gift.takeTime).format('YYYY-MM-DD HH:mm')}</Text>
</View>
</>
)}
</View>
</View>
{/* 底部操作按钮 */}
{statusInfo.status === 0 && (
<View className="fixed bottom-0 left-0 right-0 p-4 bg-white border-t border-gray-100">
<View className="flex gap-3">
{gift.code && (
<Button
fill="outline"
size="large"
className="flex-1"
icon={<Copy />}
onClick={handleCopyCode}
>
复制兑换码
</Button>
)}
<Button
type="primary"
size="large"
className="flex-1"
onClick={handleUseGift}
>
立即使用
</Button>
</View>
</View>
)}
{/* 分享弹窗 */}
{gift && (
<GiftCardShare
visible={showShare}
giftCard={{
id: gift.id || 0,
name: gift.name || '',
type: gift.type || 10,
faceValue: gift.faceValue || '0',
code: gift.code,
description: gift.description
}}
onClose={() => setShowShare(false)}
/>
)}
{/* 二维码弹窗 */}
{gift && (
<SimpleQRCodeModal
visible={showQRCode}
onClose={() => setShowQRCode(false)}
qrContent={gift.code + ''}
giftName={gift.goodsName || gift.name}
faceValue={gift.faceValue}
/>
)}
</ConfigProvider>
);
};
export default GiftCardDetail;

5
src/user/gift/index.config.ts
View File

@@ -1,5 +0,0 @@
export default definePageConfig({
navigationBarTitleText: '我的水票',
navigationBarTextStyle: 'black',
navigationBarBackgroundColor: '#ffffff'
})

483
src/user/gift/index.tsx
View File

@@ -1,483 +0,0 @@
import {useState} from "react";
import Taro, {useDidShow} from '@tarojs/taro'
import {Button, Empty, ConfigProvider,SearchBar, InfiniteLoading, Loading, PullToRefresh, Tabs, TabPane} from '@nutui/nutui-react-taro'
import {Gift, Retweet, QrCode} from '@nutui/icons-react-taro'
import {View} from '@tarojs/components'
import {ShopGift} from "@/api/shop/shopGift/model";
import {getUserGifts} from "@/api/shop/shopGift";
import GiftCardList from "@/components/GiftCardList";
import GiftCardGuide from "@/components/GiftCardGuide";
import {GiftCardProps} from "@/components/GiftCard";
const GiftCardManage = () => {
const [list, setList] = useState<ShopGift[]>([])
const [loading, setLoading] = useState(false)
const [hasMore, setHasMore] = useState(true)
const [searchValue, setSearchValue] = useState('')
const [page, setPage] = useState(1)
const [activeTab, setActiveTab] = useState<string | number>('0') // 0-可用 1-已使用 2-已过期
const [showGuide, setShowGuide] = useState(false)
// const [showRedeemModal, setShowRedeemModal] = useState(false)
// const [filters, setFilters] = useState({
// type: [] as number[],
// sortBy: 'createTime' as 'createTime' | 'expireTime' | 'faceValue' | 'takeTime',
// sortOrder: 'desc' as 'asc' | 'desc'
// })
// 获取水票状态过滤条件
const getStatusFilter = () => {
switch (String(activeTab)) {
case '0': // 未使用
return { status: 0 }
case '1': // 已使用
return { status: 1 }
case '2': // 失效
return { status: 2 }
default:
return {}
}
}
// 根据传入的值获取状态过滤条件
const getStatusFilterByValue = (value: string | number) => {
switch (String(value)) {
case '0': // 未使用
return { status: 0 }
case '1': // 已使用
return { status: 1 }
case '2': // 失效
return { status: 2 }
default:
return {}
}
}
// 根据状态过滤条件加载水票
const loadGiftsByStatus = async (statusFilter: any) => {
setLoading(true)
try {
const res = await getUserGifts({
page: 1,
limit: 10,
userId: Taro.getStorageSync('UserId'),
...statusFilter
})
console.log('API返回数据:', res?.list)
if (res && res.list) {
setList(res.list)
setHasMore(res.list.length === 10)
setPage(2)
} else {
setList([])
setHasMore(false)
}
} catch (error) {
console.error('获取水票失败:', error)
Taro.showToast({
title: '获取水票失败',
icon: 'error'
})
} finally {
setLoading(false)
}
}
const reload = async (isRefresh = false) => {
if (isRefresh) {
setPage(1)
setList([])
setHasMore(true)
}
setLoading(true)
try {
const currentPage = isRefresh ? 1 : page
const statusFilter = getStatusFilter()
console.log('reload - 当前activeTab:', activeTab, '状态过滤:', statusFilter)
const res = await getUserGifts({
page: currentPage,
limit: 10,
userId: Taro.getStorageSync('UserId'),
// keywords: searchValue,
...statusFilter,
// 应用筛选条件
// ...(filters.type.length > 0 && { type: filters.type[0] }),
// sortBy: filters.sortBy,
// sortOrder: filters.sortOrder
})
console.log('reload - API返回数据:', res?.list)
if (res && res.list) {
const newList = isRefresh ? res.list : [...list, ...res.list]
setList(newList)
// setTotal(res.count || 0)
// 判断是否还有更多数据
setHasMore(res.list.length === 10) // 如果返回的数据等于limit，说明可能还有更多
if (!isRefresh) {
setPage(currentPage + 1)
} else {
setPage(2) // 刷新后下一页是第2页
}
} else {
setHasMore(false)
// setTotal(0)
}
} catch (error) {
console.error('获取水票失败:', error)
Taro.showToast({
title: '获取水票失败',
icon: 'error'
});
} finally {
setLoading(false)
}
}
// 搜索功能
const handleSearch = (value: string) => {
setSearchValue(value)
reload(true)
}
// 下拉刷新
const handleRefresh = async () => {
await reload(true)
}
// Tab切换
const handleTabChange = (value: string | number) => {
console.log('Tab切换到:', value)
setActiveTab(value)
setPage(1)
setList([])
setHasMore(true)
// 直接传递状态值，避免异步状态更新问题
const statusFilter = getStatusFilterByValue(value)
console.log('状态过滤条件:', statusFilter)
// 立即加载数据
loadGiftsByStatus(statusFilter)
}
// 转换水票数据为GiftCard组件所需格式
const transformGiftData = (gift: ShopGift): GiftCardProps => {
return {
id: gift.id || 0,
name: gift.name || '水票', // 水票名称
goodsName: gift.goodsName, // 商品名称（新增字段）
description: gift.description || gift.instructions, // 使用说明作为描述
code: gift.code,
goodsImage: gift.goodsImage, // 商品图片
faceValue: gift.faceValue,
type: gift.type,
status: gift.status,
expireTime: gift.expireTime,
takeTime: gift.takeTime,
useLocation: gift.useLocation,
contactInfo: gift.contactInfo,
// 添加商品信息
goodsInfo: {
// 如果有商品名称或商品ID，说明是关联商品的水票
...((gift.goodsName || gift.goodsId) && {
specification: `水票面值：¥${gift.faceValue}`,
category: getTypeText(gift.type),
tags: [
getTypeText(gift.type),
gift.status === 0 ? '未使用' : gift.status === 1 ? '已使用' : '失效',
...(gift.goodsName ? ['商品水票'] : [])
].filter(Boolean),
instructions: gift.instructions ? [gift.instructions] : [
'请在有效期内使用',
'出示兑换码即可使用',
'不可兑换现金',
...(gift.goodsName ? ['此水票关联具体商品'] : [])
],
notices: [
'水票一经使用不可退换',
'请妥善保管兑换码',
'如有疑问请联系客服',
...(gift.goodsName ? ['商品以实际为准'] : [])
]
})
},
showCode: gift.status === 0, // 只有未使用状态显示兑换码
showUseBtn: gift.status === 0, // 只有未使用状态显示使用按钮
showDetailBtn: true,
showGoodsDetail: true, // 显示商品详情
theme: getThemeByType(gift.type),
onUse: () => handleUseGift(gift),
onDetail: () => handleGiftDetail(gift)
}
}
// 获取水票类型文本
const getTypeText = (type?: number): string => {
switch (type) {
case 10: return '实物水票'
case 20: return '虚拟水票'
case 30: return '服务水票'
default: return '水票'
}
}
// 根据水票类型获取主题色
const getThemeByType = (type?: number): 'gold' | 'silver' | 'bronze' | 'blue' | 'green' | 'purple' => {
switch (type) {
case 10: return 'gold' // 实物水票 - 金色
case 20: return 'blue' // 虚拟水票 - 蓝色
case 30: return 'green' // 服务水票 - 绿色
default: return 'purple' // 默认使用紫色主题，更美观
}
}
// 使用水票
const handleUseGift = (gift: ShopGift) => {
Taro.showModal({
title: '使用水票',
content: `确定要使用"${gift.name}"吗？`,
success: (res) => {
if (res.confirm) {
// 跳转到水票使用页面
Taro.navigateTo({
url: `/user/gift/use?id=${gift.id}`
})
}
}
})
}
// 水票点击事件
const handleGiftClick = (gift: GiftCardProps, index: number) => {
console.log(gift.code)
const originalGift = list[index]
if (originalGift) {
// 显示水票详情
handleGiftDetail(originalGift)
}
}
// 显示水票详情
const handleGiftDetail = (gift: ShopGift) => {
// 跳转到水票详情页
Taro.navigateTo({
url: `/user/gift/detail?id=${gift.id}`
})
}
// 加载水票统计数据
// const loadGiftStats = async () => {
// try {
// // 并行获取各状态的水票数量
// const [availableRes, usedRes, expiredRes] = await Promise.all([
// getUserGifts({ page: 1, limit: 1, useStatus: 0 }),
// getUserGifts({ page: 1, limit: 1, useStatus: 1 }),
// getUserGifts({ page: 1, limit: 1, useStatus: 2 })
// ])
//
// // 计算总价值（仅可用水票）
// const availableGifts = await getUserGifts({ page: 1, limit: 100, useStatus: 0 })
// const totalValue = availableGifts?.list?.reduce((sum, gift) => {
// return sum + parseFloat(gift.faceValue || '0')
// }, 0) || 0
//
// setStats({
// available: availableRes?.count || 0,
// used: usedRes?.count || 0,
// expired: expiredRes?.count || 0,
// totalValue
// })
// } catch (error) {
// console.error('获取水票统计失败:', error)
// }
// }
// 统计卡片点击事件
// const handleStatsClick = (type: 'available' | 'used' | 'expired' | 'total') => {
// const tabMap = {
// available: '0',
// used: '1',
// expired: '2',
// total: '0' // 总价值点击跳转到可用水票
// }
// if (tabMap[type]) {
// handleTabChange(tabMap[type])
// }
// }
// 兑换水票
const handleRedeemGift = () => {
Taro.navigateTo({
url: '/user/gift/redeem'
})
}
// 扫码兑换水票
const handleScanRedeem = () => {
Taro.scanCode({
success: (res) => {
// 处理扫码结果
const code = res.result
if (code) {
Taro.navigateTo({
url: `/user/gift/redeem?code=${encodeURIComponent(code)}`
})
}
},
fail: () => {
Taro.showToast({
title: '扫码失败',
icon: 'error'
})
}
})
}
// 加载更多
const loadMore = async () => {
if (!loading && hasMore) {
await reload(false) // 不刷新，追加数据
}
}
useDidShow(() => {
reload(true).then()
// loadGiftStats().then()
});
return (
<ConfigProvider>
{/* 搜索栏和功能入口 */}
<View className="bg-white px-4 py-3">
<View className="flex items-center justify-between gap-3">
<View className="flex-1 hidden">
<SearchBar
placeholder="搜索"
value={searchValue}
className={'border'}
onChange={setSearchValue}
onSearch={handleSearch}
/>
</View>
<Button
size="small"
type="primary"
icon={<Retweet />}
onClick={handleRedeemGift}
>
兑换
</Button>
<Button
size="small"
fill="outline"
icon={<QrCode />}
onClick={handleScanRedeem}
>
扫码
</Button>
{/*<Button*/}
{/* size="small"*/}
{/* fill="outline"*/}
{/* icon={<Board />}*/}
{/* onClick={() => setShowGuide(true)}*/}
{/*>*/}
{/* 帮助*/}
{/*</Button>*/}
</View>
</View>
{/* Tab切换 */}
<View className="bg-white">
<Tabs value={activeTab} onChange={handleTabChange}>
<TabPane title="未使用" value="0">
</TabPane>
<TabPane title="已使用" value="1">
</TabPane>
<TabPane title="失效" value="2">
</TabPane>
</Tabs>
</View>
{/* 水票列表 */}
<PullToRefresh
onRefresh={handleRefresh}
headHeight={60}
>
<View style={{ height: '600px', overflowY: 'auto' }} id="gift-scroll">
{list.length === 0 && !loading ? (
<View className="flex flex-col justify-center items-center" style={{height: '500px'}}>
<Empty
description={
activeTab === '0' ? "暂无未使用水票" :
activeTab === '1' ? "暂无已使用水票" :
"暂无失效水票"
}
style={{backgroundColor: 'transparent'}}
/>
</View>
) : (
<InfiniteLoading
target="gift-scroll"
hasMore={hasMore}
onLoadMore={loadMore}
loadingText={
<View className="flex justify-center items-center py-4">
<Loading />
<View className="ml-2">加载中...</View>
</View>
}
loadMoreText={
<View className="text-center py-4 text-gray-500">
{list.length === 0 ? "暂无数据" : "没有更多了"}
</View>
}
>
<GiftCardList
gifts={list.map(transformGiftData)}
onGiftClick={handleGiftClick}
showEmpty={false}
/>
</InfiniteLoading>
)}
</View>
</PullToRefresh>
{/* 底部提示 */}
{activeTab === '0' && list.length === 0 && !loading && (
<View className="text-center py-8">
<View className="text-gray-400 mb-4">
<Gift size="48" />
</View>
<View className="text-gray-500 mb-2">暂无未使用水票</View>
<View className="flex gap-2 justify-center">
<Button
size="small"
type="primary"
onClick={handleRedeemGift}
>
兑换水票
</Button>
<Button
size="small"
fill="outline"
onClick={handleScanRedeem}
>
扫码兑换
</Button>
</View>
</View>
)}
{/* 使用指南弹窗 */}
<GiftCardGuide
visible={showGuide}
onClose={() => setShowGuide(false)}
/>
</ConfigProvider>
);
};
export default GiftCardManage;

5
src/user/gift/receive.config.ts
View File

@@ -1,5 +0,0 @@
export default definePageConfig({
navigationBarTitleText: '领取优惠券',
navigationBarTextStyle: 'black',
navigationBarBackgroundColor: '#ffffff'
})

247
src/user/gift/receive.tsx
View File

@@ -1,247 +0,0 @@
import {useState} from "react";
import Taro, {useDidShow} from '@tarojs/taro'
import {Button, Empty, ConfigProvider, SearchBar, InfiniteLoading, Loading, PullToRefresh} from '@nutui/nutui-react-taro'
import {Gift} from '@nutui/icons-react-taro'
import {View} from '@tarojs/components'
import {ShopCoupon} from "@/api/shop/shopCoupon/model";
import {pageShopCoupon} from "@/api/shop/shopCoupon";
import CouponList from "@/components/CouponList";
import {CouponCardProps} from "@/components/CouponCard";
const CouponReceive = () => {
const [list, setList] = useState<ShopCoupon[]>([])
const [loading, setLoading] = useState(false)
const [hasMore, setHasMore] = useState(true)
const [searchValue, setSearchValue] = useState('')
const [page, setPage] = useState(1)
const [total, setTotal] = useState(0)
const reload = async (isRefresh = false) => {
if (isRefresh) {
setPage(1)
setList([])
setHasMore(true)
}
setLoading(true)
try {
const currentPage = isRefresh ? 1 : page
// 获取可领取的优惠券（启用状态且未过期）
const res = await pageShopCoupon({
page: currentPage,
limit: 10,
keywords: searchValue,
enabled: 1, // 启用状态
isExpire: 0 // 未过期
})
if (res && res.list) {
const newList = isRefresh ? res.list : [...list, ...res.list]
setList(newList)
setTotal(res.count || 0)
setHasMore(res.list.length === 10)
if (!isRefresh) {
setPage(currentPage + 1)
} else {
setPage(2)
}
} else {
setHasMore(false)
setTotal(0)
}
} catch (error) {
console.error('获取优惠券失败:', error)
Taro.showToast({
title: '获取优惠券失败',
icon: 'error'
});
} finally {
setLoading(false)
}
}
// 搜索功能
const handleSearch = (value: string) => {
setSearchValue(value)
reload(true)
}
// 下拉刷新
const handleRefresh = async () => {
await reload(true)
}
// 转换优惠券数据为CouponCard组件所需格式
const transformCouponData = (coupon: ShopCoupon): CouponCardProps => {
let amount = 0
let type: 10 | 20 | 30 = 10 // 使用新的类型值
if (coupon.type === 10) { // 满减券
type = 10
amount = parseFloat(coupon.reducePrice || '0')
} else if (coupon.type === 20) { // 折扣券
type = 20
amount = coupon.discount || 0
} else if (coupon.type === 30) { // 免费券
type = 30
amount = 0
}
return {
amount,
type,
status: 0, // 可领取状态
minAmount: parseFloat(coupon.minPrice || '0'),
title: coupon.name || '优惠券',
startTime: coupon.startTime,
endTime: coupon.endTime,
showReceiveBtn: true, // 显示领取按钮
onReceive: () => handleReceiveCoupon(coupon),
theme: getThemeByType(coupon.type)
}
}
// 根据优惠券类型获取主题色
const getThemeByType = (type?: number): 'red' | 'orange' | 'blue' | 'purple' | 'green' => {
switch (type) {
case 10: return 'red' // 满减券
case 20: return 'orange' // 折扣券
case 30: return 'green' // 免费券
default: return 'blue'
}
}
// 领取优惠券
const handleReceiveCoupon = async (_: ShopCoupon) => {
try {
// 这里应该调用领取优惠券的API
// await receiveCoupon(coupon.id)
Taro.showToast({
title: '领取成功',
icon: 'success'
})
// 刷新列表
reload(true)
} catch (error) {
console.error('领取优惠券失败:', error)
Taro.showToast({
title: '领取失败',
icon: 'error'
})
}
}
// 优惠券点击事件
const handleCouponClick = (_: CouponCardProps, index: number) => {
const originalCoupon = list[index]
if (originalCoupon) {
// 显示优惠券详情
showCouponDetail(originalCoupon)
}
}
// 显示优惠券详情
const showCouponDetail = (coupon: ShopCoupon) => {
// 跳转到优惠券详情页
Taro.navigateTo({
url: `/user/coupon/detail?id=${coupon.id}`
})
}
// 加载更多
const loadMore = async () => {
if (!loading && hasMore) {
await reload(false)
}
}
useDidShow(() => {
reload(true).then()
});
return (
<ConfigProvider>
{/* 搜索栏 */}
<View className="bg-white px-4 py-3">
<SearchBar
placeholder="搜索优惠券名称"
value={searchValue}
onChange={setSearchValue}
onSearch={handleSearch}
/>
</View>
{/* 统计信息 */}
{total > 0 && (
<View className="px-4 py-2 text-sm text-gray-500 bg-gray-50">
共找到 {total} 张可领取优惠券
</View>
)}
{/* 优惠券列表 */}
<PullToRefresh
onRefresh={handleRefresh}
headHeight={60}
>
<View style={{ height: 'calc(100vh - 160px)', overflowY: 'auto' }} id="coupon-scroll">
{list.length === 0 && !loading ? (
<View className="flex flex-col justify-center items-center" style={{height: 'calc(100vh - 250px)'}}>
<Empty
description="暂无可领取优惠券"
style={{backgroundColor: 'transparent'}}
/>
<Button
type="primary"
size="small"
className="mt-4"
onClick={() => Taro.navigateTo({url: '/pages/index/index'})}
>
去逛逛
</Button>
</View>
) : (
<InfiniteLoading
target="coupon-scroll"
hasMore={hasMore}
onLoadMore={loadMore}
loadingText={
<View className="flex justify-center items-center py-4">
<Loading />
<View className="ml-2">加载中...</View>
</View>
}
loadMoreText={
<View className="text-center py-4 text-gray-500">
{list.length === 0 ? "暂无数据" : "没有更多了"}
</View>
}
>
<CouponList
coupons={list.map(transformCouponData)}
onCouponClick={handleCouponClick}
showEmpty={false}
/>
</InfiniteLoading>
)}
</View>
</PullToRefresh>
{/* 底部提示 */}
{list.length === 0 && !loading && (
<View className="text-center py-8">
<View className="text-gray-400 mb-4">
<Gift size="48" />
</View>
<View className="text-gray-500 mb-2">暂无可领取优惠券</View>
<View className="text-gray-400 text-sm">请关注商家活动获取更多优惠券</View>
</View>
)}
</ConfigProvider>
);
};
export default CouponReceive;

5
src/user/gift/redeem.config.ts
View File

@@ -1,5 +0,0 @@
export default definePageConfig({
navigationBarTitleText: '兑换礼品卡',
navigationBarTextStyle: 'black',
navigationBarBackgroundColor: '#ffffff'
})

278
src/user/gift/redeem.tsx
View File

@@ -1,278 +0,0 @@
import {useState, useEffect} from "react";
import {useRouter} from '@tarojs/taro'
import {Button, ConfigProvider, Input, Divider} from '@nutui/nutui-react-taro'
import {ArrowLeft, QrCode, Gift, Voucher} from '@nutui/icons-react-taro'
import Taro from '@tarojs/taro'
import {View, Text} from '@tarojs/components'
import dayjs from 'dayjs'
import {ShopGift} from "@/api/shop/shopGift/model";
import {pageShopGift, updateShopGift} from "@/api/shop/shopGift";
import GiftCard from "@/components/GiftCard";
const GiftCardRedeem = () => {
const router = useRouter()
const [code, setCode] = useState('')
const [loading, setLoading] = useState(false)
const [validating, setValidating] = useState(false)
const [validGift, setValidGift] = useState<ShopGift | null>(null)
const [redeemSuccess, setRedeemSuccess] = useState(false)
// 从路由参数获取扫码结果
useEffect(() => {
if (router.params.code) {
const scannedCode = decodeURIComponent(router.params.code)
setCode(scannedCode)
handleValidateCode(scannedCode)
}
}, [router.params.code])
// 验证兑换码
const handleValidateCode = async (inputCode?: string) => {
const codeToValidate = inputCode || code
if (!codeToValidate.trim()) {
Taro.showToast({
title: '请输入兑换码',
icon: 'none'
})
return
}
setValidating(true)
try {
const gifts = await pageShopGift({code: codeToValidate,status: 0})
if(gifts?.count == 0){
Taro.showToast({
title: '兑换码无效或已使用',
icon: 'none'
})
return
}
const item = gifts?.list[0];
if(item){
setValidGift(item)
Taro.showToast({
title: '验证成功',
icon: 'success'
})
}
} catch (error) {
console.error('验证兑换码失败:', error)
setValidGift(null)
Taro.showToast({
title: '兑换码无效或已使用',
icon: 'error'
})
} finally {
setValidating(false)
}
}
// 兑换礼品卡
const handleRedeem = async () => {
if (!validGift || !code.trim()) return
setLoading(true)
try {
await updateShopGift({
...validGift,
userId: Taro.getStorageSync('UserId'),
takeTime: dayjs.unix(Date.now() / 1000).format('YYYY-MM-DD HH:mm:ss')
})
setRedeemSuccess(true)
Taro.showToast({
title: '兑换成功',
icon: 'success'
})
} catch (error) {
console.error('兑换礼品卡失败:', error)
Taro.showToast({
title: '兑换失败',
icon: 'error'
})
} finally {
setLoading(false)
}
}
// 扫码兑换
const handleScanCode = () => {
Taro.scanCode({
success: (res) => {
const scannedCode = res.result
if (scannedCode) {
setCode(scannedCode)
handleValidateCode(scannedCode)
}
},
fail: () => {
Taro.showToast({
title: '扫码失败',
icon: 'error'
})
}
})
}
// 返回上一页
const handleBack = () => {
Taro.navigateBack()
}
// 查看我的礼品卡
const handleViewMyGifts = () => {
Taro.navigateTo({
url: '/user/gift/index'
})
}
// 转换礼品卡数据
const transformGiftData = (gift: ShopGift) => {
return {
id: gift.id || 0,
name: gift.name || '水票',
description: gift.description,
code: gift.code,
goodsImage: gift.goodsImage,
faceValue: gift.faceValue,
type: gift.type,
expireTime: gift.expireTime,
takeTime: gift.takeTime,
useLocation: gift.useLocation,
contactInfo: gift.contactInfo,
showCode: false, // 兑换页面不显示兑换码
showUseBtn: false, // 兑换页面不显示使用按钮
showDetailBtn: false, // 兑换页面不显示详情按钮
theme: 'gold' as const
}
}
return (
<ConfigProvider>
{/* 自定义导航栏 */}
<View className="flex items-center justify-between p-4 bg-white border-b border-gray-100 hidden">
<View className="flex items-center" onClick={handleBack}>
<ArrowLeft size="20" />
<Text className="ml-2 text-lg">兑换礼品卡</Text>
</View>
</View>
{!redeemSuccess ? (
<>
{/* 兑换说明 */}
<View className="bg-blue-50 mx-4 mt-4 p-4 rounded-xl border border-blue-200">
<View className="flex items-center mb-2">
<Gift size="20" className="text-blue-600 mr-2" />
<Text className="font-semibold text-blue-800">兑换说明</Text>
</View>
<Text className="text-blue-700 text-sm leading-relaxed">
请输入或扫描礼品卡兑换码，验证成功后即可兑换到您的账户中。每个兑换码只能使用一次。
</Text>
</View>
{/* 兑换码输入 */}
<View className="bg-white mx-4 mt-4 p-4 rounded-xl">
<Text className="font-semibold mb-3 text-gray-800">输入兑换码</Text>
<View className="mb-4">
<Input
placeholder="请输入礼品卡兑换码"
value={code}
onChange={setCode}
clearable
className="border border-gray-200 rounded-lg"
/>
</View>
<View className="flex gap-3">
<Button
fill="outline"
size="large"
className="flex-1"
icon={<QrCode />}
onClick={handleScanCode}
>
扫码输入
</Button>
<Button
type="primary"
size="large"
className="flex-1"
loading={validating}
onClick={() => handleValidateCode()}
>
验证兑换码
</Button>
</View>
</View>
{/* 验证结果 */}
{validGift && (
<>
<Divider className="my-4">验证成功</Divider>
<View className="mx-4">
<GiftCard {...transformGiftData(validGift)} />
</View>
<View className="mx-4 mt-4">
<Button
type="primary"
size="large"
block
loading={loading}
onClick={handleRedeem}
>
确认兑换
</Button>
</View>
</>
)}
</>
) : (
/* 兑换成功页面 */
<View className="flex flex-col items-center justify-center px-4" style={{height: '600px'}}>
<View className="text-center">
<View className="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
<Voucher size="40" className="text-green-600" />
</View>
<Text className="text-2xl font-bold text-gray-900 mb-2">兑换成功！</Text>
<Text className="text-left text-gray-500 mb-6">礼品卡已添加到您的账户中</Text>
{validGift && (
<View className="mb-6">
<GiftCard {...transformGiftData(validGift)} />
</View>
)}
<View className="flex flex-col gap-3 w-full max-w-xs">
<Button
type="primary"
size="large"
block
onClick={handleViewMyGifts}
>
查看我的礼品卡
</Button>
<Button
fill="outline"
size="large"
block
onClick={() => {
setCode('')
setValidGift(null)
setRedeemSuccess(false)
}}
>
继续兑换
</Button>
</View>
</View>
</View>
)}
</ConfigProvider>
);
};
export default GiftCardRedeem;

6
src/user/gift/use.config.ts
View File

@@ -1,6 +0,0 @@
export default definePageConfig({
navigationBarTitleText: '使用礼品卡',
navigationBarTextStyle: 'black',
navigationBarBackgroundColor: '#ffffff',
navigationStyle: 'custom'
})

290
src/user/gift/use.tsx
View File

@@ -1,290 +0,0 @@
import {useState, useEffect} from "react";
import {useRouter} from '@tarojs/taro'
import {Button, ConfigProvider, Input, TextArea} from '@nutui/nutui-react-taro'
import {ArrowLeft, Location} from '@nutui/icons-react-taro'
import Taro from '@tarojs/taro'
import {View, Text} from '@tarojs/components'
import {ShopGift} from "@/api/shop/shopGift/model";
import {getShopGift, useGift} from "@/api/shop/shopGift";
import GiftCard from "@/components/GiftCard";
const GiftCardUse = () => {
const router = useRouter()
const [gift, setGift] = useState<ShopGift | null>(null)
const [loading, setLoading] = useState(true)
const [submitting, setSubmitting] = useState(false)
const [useLocation, setUseLocation] = useState('')
const [useNote, setUseNote] = useState('')
const [useSuccess, setUseSuccess] = useState(false)
const giftId = router.params.id
useEffect(() => {
if (giftId) {
loadGiftDetail()
}
}, [giftId])
// 加载礼品卡详情
const loadGiftDetail = async () => {
try {
setLoading(true)
const data = await getShopGift(Number(giftId))
setGift(data)
// 如果礼品卡有预设使用地址，自动填入
if (data.useLocation) {
setUseLocation(data.useLocation)
}
} catch (error) {
console.error('获取礼品卡详情失败:', error)
Taro.showToast({
title: '获取礼品卡详情失败',
icon: 'error'
})
} finally {
setLoading(false)
}
}
// 使用礼品卡
const handleUseGift = async () => {
if (!gift) return
// 根据礼品卡类型进行不同的验证
if (gift.type === 10 && !useLocation.trim()) { // 实物礼品卡需要地址
Taro.showToast({
title: '请填写使用地址',
icon: 'none'
})
return
}
setSubmitting(true)
try {
await useGift({
giftId: gift.id!,
useLocation: useLocation.trim(),
useNote: useNote.trim()
})
setUseSuccess(true)
Taro.showToast({
title: '使用成功',
icon: 'success'
})
} catch (error) {
console.error('使用礼品卡失败:', error)
Taro.showToast({
title: '使用失败',
icon: 'error'
})
} finally {
setSubmitting(false)
}
}
// 获取当前位置
const handleGetLocation = () => {
Taro.getLocation({
type: 'gcj02',
success: (res) => {
// 这里可以调用地理编码API将坐标转换为地址
// 暂时使用坐标信息
setUseLocation(`经度:${res.longitude}, 纬度:${res.latitude}`)
Taro.showToast({
title: '位置获取成功',
icon: 'success'
})
},
fail: () => {
Taro.showToast({
title: '位置获取失败',
icon: 'error'
})
}
})
}
// 返回上一页
const handleBack = () => {
Taro.navigateBack()
}
// 查看我的礼品卡
const handleViewMyGifts = () => {
Taro.navigateTo({
url: '/user/gift/index'
})
}
// 转换礼品卡数据
const transformGiftData = (gift: ShopGift) => {
return {
id: gift.id || 0,
name: gift.name || '水票',
description: gift.description,
code: gift.code,
goodsImage: gift.goodsImage,
faceValue: gift.faceValue,
type: gift.type,
expireTime: gift.expireTime,
takeTime: gift.takeTime,
useLocation: gift.useLocation,
contactInfo: gift.contactInfo,
showCode: false,
showUseBtn: false,
showDetailBtn: false,
theme: 'gold' as const
}
}
if (loading) {
return (
<ConfigProvider>
<View className="flex justify-center items-center h-screen">
<Text>加载中...</Text>
</View>
</ConfigProvider>
)
}
if (!gift) {
return (
<ConfigProvider>
<View className="flex flex-col justify-center items-center h-screen">
<Text className="text-gray-500 mb-4">礼品卡不存在</Text>
<Button onClick={handleBack}>返回</Button>
</View>
</ConfigProvider>
)
}
return (
<ConfigProvider>
{/* 自定义导航栏 */}
<View className="flex items-center justify-between p-4 bg-white border-b border-gray-100">
<View className="flex items-center" onClick={handleBack}>
<ArrowLeft size="20" />
<Text className="ml-2 text-lg">使用礼品卡</Text>
</View>
</View>
{!useSuccess ? (
<>
{/* 礼品卡信息 */}
<View className="mx-4 mt-4">
<GiftCard {...transformGiftData(gift)} />
</View>
{/* 使用表单 */}
<View className="bg-white mx-4 mt-4 p-4 rounded-xl">
<Text className="font-semibold mb-4 text-gray-800">使用信息</Text>
{/* 使用地址（实物礼品卡必填） */}
{gift.type === 10 && (
<View className="mb-4">
<Text className="text-gray-700 mb-2">使用地址 *</Text>
<View className="flex gap-2">
<Input
placeholder="请输入使用地址"
value={useLocation}
onChange={setUseLocation}
className="flex-1 border border-gray-200 rounded-lg"
/>
<Button
size="small"
fill="outline"
icon={<Location />}
onClick={handleGetLocation}
>
定位
</Button>
</View>
</View>
)}
{/* 虚拟礼品卡和服务礼品卡的地址选填 */}
{gift.type !== 10 && (
<View className="mb-4">
<Text className="text-gray-700 mb-2">使用地址（选填）</Text>
<Input
placeholder="请输入使用地址"
value={useLocation}
onChange={setUseLocation}
className="border border-gray-200 rounded-lg"
/>
</View>
)}
{/* 使用备注 */}
<View className="mb-4">
<Text className="text-gray-700 mb-2">使用备注（选填）</Text>
<TextArea
placeholder="请输入使用备注"
value={useNote}
onChange={setUseNote}
rows={3}
className="border border-gray-200 rounded-lg"
/>
</View>
{/* 使用说明 */}
<View className="bg-yellow-50 p-3 rounded-lg border border-yellow-200 mb-4">
<Text className="text-yellow-800 text-sm">
{gift.type === 10 && '💡 实物礼品卡使用后请到指定地址领取商品'}
{gift.type === 20 && '💡 虚拟礼品卡使用后将自动发放到您的账户'}
{gift.type === 30 && '💡 服务礼品卡使用后请联系客服预约服务时间'}
</Text>
</View>
<Button
type="primary"
size="large"
block
loading={submitting}
onClick={handleUseGift}
>
确认使用
</Button>
</View>
</>
) : (
/* 使用成功页面 */
<View className="flex flex-col items-center justify-center px-4" style={{height: '600px'}}>
<View className="text-center">
<View className="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
{/*<Voucher size="40" className="text-green-600" />*/}
</View>
<Text className="text-2xl font-bold text-gray-900 mb-2">使用成功！</Text>
<Text className="text-gray-600 mb-6">
{gift.type === 10 && '请到指定地址领取您的商品'}
{gift.type === 20 && '虚拟商品已发放到您的账户'}
{gift.type === 30 && '请联系客服预约服务时间'}
</Text>
{gift.contactInfo && (
<View className="bg-blue-50 p-4 rounded-lg mb-6 border border-blue-200">
<Text className="text-blue-800 font-semibold mb-1">客服联系方式</Text>
<Text className="text-blue-700">{gift.contactInfo}</Text>
</View>
)}
<View className="flex flex-col gap-3 w-full max-w-xs">
<Button
type="primary"
size="large"
block
onClick={handleViewMyGifts}
>
查看我的礼品卡
</Button>
</View>
</View>
</View>
)}
</ConfigProvider>
);
};
export default GiftCardUse;