feat(pages): 添加管理页面功能和配置
- 创建 .editorconfig 文件统一代码风格配置 - 配置 .eslintrc 使用 taro/react 规则集 - 完善 .gitignore 忽略编译产物和敏感文件 - 添加 admin/article/add 页面实现文章管理功能 - 添加 dealer/apply/add 页面实现经销商申请功能 - 添加 dealer/bank/add 页面实现银行卡管理功能 - 添加 dealer/customer/add 页面实现客户管理功能 - 添加 user/address/add 页面实现用户地址管理功能 - 添加 user/chat/message/add 页面实现消息功能 - 添加 user/gift/add 页面实现礼品管理功能 - 配置各页面导航栏标题和样式 - 实现表单验证和数据提交功能 - 集成图片上传和头像选择功能 - 添加日期选择和数据校验逻辑 - 实现编辑和新增模式切换 - 集成用户权限和角色管理功能
This commit is contained in:
4
src/user/about/index.config.ts
Normal file
4
src/user/about/index.config.ts
Normal file
@@ -0,0 +1,4 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '关于我们',
|
||||
navigationBarTextStyle: 'black'
|
||||
})
|
||||
3
src/user/about/index.scss
Normal file
3
src/user/about/index.scss
Normal file
@@ -0,0 +1,3 @@
|
||||
:root {
|
||||
|
||||
}
|
||||
95
src/user/about/index.tsx
Normal file
95
src/user/about/index.tsx
Normal file
@@ -0,0 +1,95 @@
|
||||
import {useEffect, useState} from "react";
|
||||
import Taro from '@tarojs/taro';
|
||||
import {listCmsArticle} from "@/api/cms/cmsArticle";
|
||||
import {Avatar, Cell, Divider} from '@nutui/nutui-react-taro'
|
||||
import {ArrowRight} from '@nutui/icons-react-taro'
|
||||
import {CmsNavigation} from "@/api/cms/cmsNavigation/model";
|
||||
import {listCmsNavigation} from "@/api/cms/cmsNavigation";
|
||||
// 显示html富文本
|
||||
import {View, RichText} from '@tarojs/components'
|
||||
import {listCmsDesign} from "@/api/cms/cmsDesign";
|
||||
import {CmsDesign} from "@/api/cms/cmsDesign/model";
|
||||
import {type Config} from "@/api/cms/cmsWebsiteField/model";
|
||||
import {configWebsiteField} from "@/api/cms/cmsWebsiteField";
|
||||
|
||||
|
||||
const Helper = () => {
|
||||
const [nav, setNav] = useState<CmsNavigation>()
|
||||
const [design, setDesign] = useState<CmsDesign>()
|
||||
const [category, setCategory] = useState<CmsNavigation[]>([])
|
||||
const [config, setConfig] = useState<Config>()
|
||||
|
||||
const reload = async () => {
|
||||
const navs = await listCmsNavigation({model: 'page', parentId: 0});
|
||||
if (navs.length > 0) {
|
||||
const nav = navs[0];
|
||||
setNav(nav);
|
||||
// 查询页面信息
|
||||
const design = await listCmsDesign({categoryId: nav.navigationId})
|
||||
setDesign(design[0])
|
||||
// 查询子栏目
|
||||
const category = await listCmsNavigation({parentId: nav.navigationId})
|
||||
category.map(async (item, index) => {
|
||||
category[index].articles = await listCmsArticle({categoryId: item.navigationId});
|
||||
})
|
||||
setCategory(category)
|
||||
// 查询字段
|
||||
const configInfo = await configWebsiteField({})
|
||||
setConfig(configInfo)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
reload().then()
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className={'px-3'}>
|
||||
<Cell>
|
||||
{nav && (
|
||||
<View className={'flex flex-col justify-center items-center w-full'}>
|
||||
<Avatar
|
||||
src={design?.photo}
|
||||
size={'100'}
|
||||
/>
|
||||
<View className={'font-bold text-sm'}>
|
||||
{design?.comments}
|
||||
</View>
|
||||
<View className={'text-left py-3 text-gray-600'}>
|
||||
<RichText
|
||||
nodes={design?.content || '关于我们的简单描述'}/>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
</Cell>
|
||||
{category.map((item, index) => (
|
||||
<Cell
|
||||
title={(
|
||||
<div className={'font-bold'} id={`${index}`}>
|
||||
{item.categoryName}
|
||||
</div>
|
||||
)}
|
||||
description={(
|
||||
<>
|
||||
<Divider/>
|
||||
{item.articles?.map((child, _) => (
|
||||
<View className={'item flex justify-between items-center my-2'}>
|
||||
<View
|
||||
onClick={() => Taro.navigateTo({url: `/cms/detail/index?id=${child.articleId}`})}>{child.title}</View>
|
||||
<ArrowRight size={16} className={'text-gray-400'}/>
|
||||
</View>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
>
|
||||
</Cell>
|
||||
))}
|
||||
<Cell className={'flex flex-col'}>
|
||||
<span>服务热线:{config?.tel}</span>
|
||||
<span>工作日:{config?.workDay}</span>
|
||||
</Cell>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Helper;
|
||||
4
src/user/address/add.config.ts
Normal file
4
src/user/address/add.config.ts
Normal file
@@ -0,0 +1,4 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '新增收货地址',
|
||||
navigationBarTextStyle: 'black'
|
||||
})
|
||||
0
src/user/address/add.scss
Normal file
0
src/user/address/add.scss
Normal file
373
src/user/address/add.tsx
Normal file
373
src/user/address/add.tsx
Normal file
@@ -0,0 +1,373 @@
|
||||
import {useEffect, useState, useRef} from "react";
|
||||
import {useRouter} from '@tarojs/taro'
|
||||
import {Button, Loading, CellGroup, Input, TextArea, Form} from '@nutui/nutui-react-taro'
|
||||
import {Scan, ArrowRight} from '@nutui/icons-react-taro'
|
||||
import Taro from '@tarojs/taro'
|
||||
import {View} from '@tarojs/components'
|
||||
import {Address} from '@nutui/nutui-react-taro'
|
||||
import {ShopUserAddress} from "@/api/shop/shopUserAddress/model";
|
||||
import {getShopUserAddress, listShopUserAddress, updateShopUserAddress, addShopUserAddress} from "@/api/shop/shopUserAddress";
|
||||
import RegionData from '@/api/json/regions-data.json';
|
||||
import FixedButton from "@/components/FixedButton";
|
||||
|
||||
const AddUserAddress = () => {
|
||||
const {params} = useRouter();
|
||||
const [loading, setLoading] = useState<boolean>(true)
|
||||
const [text, setText] = useState<string>('')
|
||||
const [optionsDemo1, setOptionsDemo1] = useState([])
|
||||
const [visible, setVisible] = useState(false)
|
||||
const [FormData, setFormData] = useState<ShopUserAddress>({})
|
||||
const [inputText, setInputText] = useState<string>('')
|
||||
const formRef = useRef<any>(null)
|
||||
|
||||
// 判断是编辑还是新增模式
|
||||
const isEditMode = !!params.id
|
||||
const addressId = params.id ? Number(params.id) : undefined
|
||||
|
||||
const reload = async () => {
|
||||
// 整理地区数据
|
||||
setRegionData()
|
||||
|
||||
// 如果是编辑模式,加载地址数据
|
||||
if (isEditMode && addressId) {
|
||||
try {
|
||||
const address = await getShopUserAddress(addressId)
|
||||
setFormData(address)
|
||||
// 设置所在地区
|
||||
setText(`${address.province} ${address.city} ${address.region}`)
|
||||
} catch (error) {
|
||||
console.error('加载地址失败:', error)
|
||||
Taro.showToast({
|
||||
title: '加载地址失败',
|
||||
icon: 'error'
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理地区数据
|
||||
*/
|
||||
function setRegionData() {
|
||||
// @ts-ignore
|
||||
setOptionsDemo1(RegionData?.map((a) => {
|
||||
return {
|
||||
value: a.label,
|
||||
text: a.label,
|
||||
children: a.children?.map((b) => {
|
||||
return {
|
||||
value: b.label,
|
||||
text: b.label,
|
||||
children: b.children?.map((c) => {
|
||||
return {
|
||||
value: c.label,
|
||||
text: c.label
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}))
|
||||
}
|
||||
|
||||
/**
|
||||
* 地址识别功能
|
||||
*/
|
||||
const recognizeAddress = () => {
|
||||
if (!inputText.trim()) {
|
||||
Taro.showToast({
|
||||
title: '请输入要识别的文本',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const result = parseAddressText(inputText);
|
||||
|
||||
// 更新表单数据
|
||||
const newFormData = {
|
||||
...FormData,
|
||||
name: result.name || FormData.name,
|
||||
phone: result.phone || FormData.phone,
|
||||
address: result.address || FormData.address,
|
||||
province: result.province || FormData.province,
|
||||
city: result.city || FormData.city,
|
||||
region: result.region || FormData.region
|
||||
};
|
||||
|
||||
setFormData(newFormData);
|
||||
|
||||
// 更新地区显示文本
|
||||
if (result.province && result.city && result.region) {
|
||||
setText(`${result.province} ${result.city} ${result.region}`);
|
||||
}
|
||||
|
||||
// 更新表单字段值
|
||||
if (formRef.current) {
|
||||
formRef.current.setFieldsValue(newFormData);
|
||||
}
|
||||
|
||||
Taro.showToast({
|
||||
title: '识别成功',
|
||||
icon: 'success'
|
||||
});
|
||||
|
||||
// 清空输入框
|
||||
setInputText('');
|
||||
|
||||
} catch (error) {
|
||||
Taro.showToast({
|
||||
title: '识别失败,请检查文本格式',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 解析地址文本
|
||||
*/
|
||||
const parseAddressText = (text: string) => {
|
||||
const result: any = {};
|
||||
|
||||
// 手机号正则 (11位数字)
|
||||
const phoneRegex = /1[3-9]\d{9}/;
|
||||
const phoneMatch = text.match(phoneRegex);
|
||||
if (phoneMatch) {
|
||||
result.phone = phoneMatch[0];
|
||||
}
|
||||
|
||||
// 姓名正则 (2-4个中文字符,通常在开头)
|
||||
const nameRegex = /^[\u4e00-\u9fa5]{2,4}/;
|
||||
const nameMatch = text.match(nameRegex);
|
||||
if (nameMatch) {
|
||||
result.name = nameMatch[0];
|
||||
}
|
||||
|
||||
// 省市区识别
|
||||
const regionResult = parseRegion(text);
|
||||
if (regionResult) {
|
||||
result.province = regionResult.province;
|
||||
result.city = regionResult.city;
|
||||
result.region = regionResult.region;
|
||||
}
|
||||
|
||||
// 详细地址提取 (去除姓名、手机号、省市区后的剩余部分)
|
||||
let addressText = text;
|
||||
if (result.name) {
|
||||
addressText = addressText.replace(result.name, '');
|
||||
}
|
||||
if (result.phone) {
|
||||
addressText = addressText.replace(result.phone, '');
|
||||
}
|
||||
if (result.province) {
|
||||
addressText = addressText.replace(result.province, '');
|
||||
}
|
||||
if (result.city) {
|
||||
addressText = addressText.replace(result.city, '');
|
||||
}
|
||||
if (result.region) {
|
||||
addressText = addressText.replace(result.region, '');
|
||||
}
|
||||
|
||||
// 清理地址文本
|
||||
result.address = addressText.replace(/[,,。\s]+/g, '').trim();
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
/**
|
||||
* 解析省市区
|
||||
*/
|
||||
const parseRegion = (text: string) => {
|
||||
// @ts-ignore
|
||||
for (const province of RegionData) {
|
||||
if (text.includes(province.label)) {
|
||||
const result: any = { province: province.label };
|
||||
|
||||
// 查找城市
|
||||
if (province.children) {
|
||||
for (const city of province.children) {
|
||||
if (text.includes(city.label)) {
|
||||
result.city = city.label;
|
||||
|
||||
// 查找区县
|
||||
if (city.children) {
|
||||
for (const region of city.children) {
|
||||
if (text.includes(region.label)) {
|
||||
result.region = region.label;
|
||||
return result;
|
||||
}
|
||||
}
|
||||
}
|
||||
return result;
|
||||
}
|
||||
}
|
||||
}
|
||||
return result;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
// 提交表单
|
||||
const submitSucceed = async (values: any) => {
|
||||
try {
|
||||
// 准备提交的数据
|
||||
const submitData = {
|
||||
...values,
|
||||
province: FormData.province,
|
||||
city: FormData.city,
|
||||
region: FormData.region,
|
||||
isDefault: true // 新增或编辑的地址都设为默认地址
|
||||
};
|
||||
|
||||
// 如果是编辑模式,添加id
|
||||
if (isEditMode && addressId) {
|
||||
submitData.id = addressId;
|
||||
}
|
||||
|
||||
// 先处理默认地址逻辑
|
||||
const defaultAddress = await listShopUserAddress({isDefault: true});
|
||||
if (defaultAddress && defaultAddress.length > 0) {
|
||||
// 如果当前编辑的不是默认地址,或者是新增地址,需要取消其他默认地址
|
||||
if (!isEditMode || (isEditMode && defaultAddress[0].id !== addressId)) {
|
||||
await updateShopUserAddress({
|
||||
...defaultAddress[0],
|
||||
isDefault: false
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 执行新增或更新操作
|
||||
if (isEditMode) {
|
||||
await updateShopUserAddress(submitData);
|
||||
} else {
|
||||
await addShopUserAddress(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 className={'px-3'}>
|
||||
<div
|
||||
style={{
|
||||
border: '1px dashed #22c55e',
|
||||
display: 'flex',
|
||||
alignItems: 'flex-end',
|
||||
justifyContent: 'space-between',
|
||||
padding: '4px',
|
||||
position: 'relative'
|
||||
}}>
|
||||
|
||||
<TextArea
|
||||
style={{height: '100px'}}
|
||||
value={inputText}
|
||||
onChange={(value) => setInputText(value)}
|
||||
placeholder={'请粘贴或输入文本,点击"识别"自动识别收货人姓名、地址、电话'}
|
||||
/>
|
||||
<Button
|
||||
icon={<Scan/>}
|
||||
style={{position: 'absolute', right: '10px', bottom: '10px'}}
|
||||
type="success"
|
||||
size={'small'}
|
||||
fill="dashed"
|
||||
onClick={recognizeAddress}
|
||||
>
|
||||
识别
|
||||
</Button>
|
||||
</div>
|
||||
</CellGroup>
|
||||
<View className={'bg-gray-100 h-3'}></View>
|
||||
<CellGroup style={{padding: '4px 0'}}>
|
||||
<Form.Item name="name" label="收货人" initialValue={FormData.name} required>
|
||||
<Input placeholder="请输入收货人姓名" maxLength={10}/>
|
||||
</Form.Item>
|
||||
<Form.Item name="phone" label="手机号" initialValue={FormData.phone} required>
|
||||
<Input placeholder="请输入手机号" maxLength={11}/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="所在地区"
|
||||
name="region"
|
||||
initialValue={FormData.region}
|
||||
rules={[{message: '请输入您的所在地区'}]}
|
||||
required
|
||||
>
|
||||
<div className={'flex justify-between items-center'} onClick={() => setVisible(true)}>
|
||||
<Input placeholder="选择所在地区" value={text} disabled/>
|
||||
<ArrowRight className={'text-gray-400'}/>
|
||||
</div>
|
||||
</Form.Item>
|
||||
<Form.Item name="address" label="收货地址" initialValue={FormData.address} required>
|
||||
<TextArea maxLength={50} placeholder="请输入详细收货地址"/>
|
||||
</Form.Item>
|
||||
</CellGroup>
|
||||
</Form>
|
||||
|
||||
<Address
|
||||
visible={visible}
|
||||
options={optionsDemo1}
|
||||
title="选择地址"
|
||||
onChange={(value, _) => {
|
||||
setFormData({
|
||||
...FormData,
|
||||
province: `${value[0]}`,
|
||||
city: `${value[1]}`,
|
||||
region: `${value[2]}`
|
||||
})
|
||||
setText(value.join(' '))
|
||||
}}
|
||||
onClose={() => setVisible(false)}
|
||||
/>
|
||||
|
||||
{/* 底部浮动按钮 */}
|
||||
<FixedButton text={isEditMode ? '更新地址' : '保存并使用'} onClick={() => submitSucceed} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddUserAddress;
|
||||
4
src/user/address/index.config.ts
Normal file
4
src/user/address/index.config.ts
Normal file
@@ -0,0 +1,4 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '地址管理',
|
||||
navigationBarTextStyle: 'black'
|
||||
})
|
||||
3
src/user/address/index.scss
Normal file
3
src/user/address/index.scss
Normal file
@@ -0,0 +1,3 @@
|
||||
:root {
|
||||
|
||||
}
|
||||
154
src/user/address/index.tsx
Normal file
154
src/user/address/index.tsx
Normal file
@@ -0,0 +1,154 @@
|
||||
import {useState} from "react";
|
||||
import Taro, {useDidShow} from '@tarojs/taro'
|
||||
import {Button, Cell, CellGroup, Space, Empty, ConfigProvider, Divider} from '@nutui/nutui-react-taro'
|
||||
import {Dongdong, ArrowRight, CheckNormal, Checked} from '@nutui/icons-react-taro'
|
||||
import {View} from '@tarojs/components'
|
||||
import {ShopUserAddress} from "@/api/shop/shopUserAddress/model";
|
||||
import {listShopUserAddress, removeShopUserAddress, updateShopUserAddress} from "@/api/shop/shopUserAddress";
|
||||
import FixedButton from "@/components/FixedButton";
|
||||
|
||||
const Address = () => {
|
||||
const [list, setList] = useState<ShopUserAddress[]>([])
|
||||
const [address, setAddress] = useState<ShopUserAddress>()
|
||||
|
||||
const reload = () => {
|
||||
listShopUserAddress({
|
||||
userId: Taro.getStorageSync('UserId')
|
||||
})
|
||||
.then(data => {
|
||||
setList(data || [])
|
||||
// 默认地址
|
||||
setAddress(data.find(item => item.isDefault))
|
||||
})
|
||||
.catch(() => {
|
||||
Taro.showToast({
|
||||
title: '获取地址失败',
|
||||
icon: 'error'
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
const onDefault = async (item: ShopUserAddress) => {
|
||||
if (address) {
|
||||
await updateShopUserAddress({
|
||||
...address,
|
||||
isDefault: false
|
||||
})
|
||||
}
|
||||
await updateShopUserAddress({
|
||||
id: item.id,
|
||||
isDefault: true
|
||||
})
|
||||
Taro.showToast({
|
||||
title: '设置成功',
|
||||
icon: 'success'
|
||||
});
|
||||
reload();
|
||||
}
|
||||
|
||||
const onDel = async (id?: number) => {
|
||||
await removeShopUserAddress(id)
|
||||
Taro.showToast({
|
||||
title: '删除成功',
|
||||
icon: 'success'
|
||||
});
|
||||
reload();
|
||||
}
|
||||
|
||||
const selectAddress = async (item: ShopUserAddress) => {
|
||||
if (address) {
|
||||
await updateShopUserAddress({
|
||||
...address,
|
||||
isDefault: false
|
||||
})
|
||||
}
|
||||
await updateShopUserAddress({
|
||||
id: item.id,
|
||||
isDefault: true
|
||||
})
|
||||
setTimeout(() => {
|
||||
Taro.navigateBack()
|
||||
}, 500)
|
||||
}
|
||||
|
||||
useDidShow(() => {
|
||||
reload()
|
||||
});
|
||||
|
||||
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={() => Taro.navigateTo({url: '/user/address/add'})}>新增地址</Button>
|
||||
<Button type="success" fill="dashed"
|
||||
onClick={() => Taro.navigateTo({url: '/user/address/wxAddress'})}>获取微信地址</Button>
|
||||
</Space>
|
||||
</div>
|
||||
</ConfigProvider>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<CellGroup>
|
||||
<Cell
|
||||
onClick={() => Taro.navigateTo({url: '/user/address/wxAddress'})}
|
||||
>
|
||||
<div className={'flex justify-between items-center w-full'}>
|
||||
<div className={'flex items-center gap-3'}>
|
||||
<Dongdong className={'text-green-600'}/>
|
||||
<div>获取微信地址</div>
|
||||
</div>
|
||||
<ArrowRight className={'text-gray-400'}/>
|
||||
</div>
|
||||
</Cell>
|
||||
</CellGroup>
|
||||
{list.map((item, _) => (
|
||||
<Cell.Group>
|
||||
<Cell className={'flex flex-col gap-1'} onClick={() => selectAddress(item)}>
|
||||
<View>
|
||||
<View className={'font-medium text-sm'}>{item.name} {item.phone}</View>
|
||||
</View>
|
||||
<View className={'text-xs'}>
|
||||
{item.province} {item.city} {item.region} {item.address}
|
||||
</View>
|
||||
</Cell>
|
||||
<Cell
|
||||
align="center"
|
||||
title={
|
||||
<View className={'flex items-center gap-1'} onClick={() => onDefault(item)}>
|
||||
{item.isDefault ? <Checked className={'text-green-600'} size={16}/> : <CheckNormal size={16}/>}
|
||||
<View className={'text-gray-400'}>默认地址</View>
|
||||
</View>
|
||||
}
|
||||
extra={
|
||||
<>
|
||||
<View className={'text-gray-400'} onClick={() => onDel(item.id)}>
|
||||
删除
|
||||
</View>
|
||||
<Divider direction={'vertical'}/>
|
||||
<View className={'text-gray-400'}
|
||||
onClick={() => Taro.navigateTo({url: '/user/address/add?id=' + item.id})}>
|
||||
修改
|
||||
</View>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
</Cell.Group>
|
||||
))}
|
||||
{/* 底部浮动按钮 */}
|
||||
<FixedButton text={'新增地址'} onClick={() => Taro.navigateTo({url: '/user/address/add'})} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Address;
|
||||
4
src/user/address/wxAddress.config.ts
Normal file
4
src/user/address/wxAddress.config.ts
Normal file
@@ -0,0 +1,4 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '我的地址',
|
||||
navigationBarTextStyle: 'black'
|
||||
})
|
||||
67
src/user/address/wxAddress.tsx
Normal file
67
src/user/address/wxAddress.tsx
Normal file
@@ -0,0 +1,67 @@
|
||||
import {useEffect} from "react";
|
||||
import Taro from '@tarojs/taro'
|
||||
import {addShopUserAddress} from "@/api/shop/shopUserAddress";
|
||||
|
||||
const WxAddress = () => {
|
||||
/**
|
||||
* 从微信API获取用户收货地址
|
||||
* 调用微信原生地址选择界面,获取成功后保存到服务器并刷新列表
|
||||
*/
|
||||
const getWeChatAddress = () => {
|
||||
Taro.chooseAddress()
|
||||
.then(res => {
|
||||
// 格式化微信返回的地址数据为后端所需格式
|
||||
const addressData = {
|
||||
name: res.userName,
|
||||
phone: res.telNumber,
|
||||
country: res.nationalCode || '中国',
|
||||
province: res.provinceName,
|
||||
city: res.cityName,
|
||||
region: res.countyName,
|
||||
address: res.detailInfo,
|
||||
postalCode: res.postalCode,
|
||||
isDefault: false
|
||||
}
|
||||
console.log(res, 'addrs..')
|
||||
// 调用保存地址的API(假设存在该接口)
|
||||
addShopUserAddress(addressData)
|
||||
.then((msg) => {
|
||||
console.log(msg)
|
||||
Taro.showToast({
|
||||
title: `${msg}`,
|
||||
icon: 'none'
|
||||
})
|
||||
setTimeout(() => {
|
||||
// 保存成功后返回
|
||||
Taro.navigateBack()
|
||||
}, 1000)
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('保存地址失败:', error)
|
||||
Taro.showToast({title: '保存地址失败', icon: 'error'})
|
||||
})
|
||||
})
|
||||
.catch(err => {
|
||||
console.error('获取微信地址失败:', err)
|
||||
// 处理用户拒绝授权的情况
|
||||
if (err.errMsg.includes('auth deny')) {
|
||||
Taro.showModal({
|
||||
title: '授权失败',
|
||||
content: '请在设置中允许获取地址权限',
|
||||
showCancel: false
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
getWeChatAddress()
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default WxAddress;
|
||||
3
src/user/chat/conversation/index.config.ts
Normal file
3
src/user/chat/conversation/index.config.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '站内消息'
|
||||
})
|
||||
167
src/user/chat/conversation/index.tsx
Normal file
167
src/user/chat/conversation/index.tsx
Normal file
@@ -0,0 +1,167 @@
|
||||
import {useState, useCallback, useEffect} from 'react'
|
||||
import {View, Text} from '@tarojs/components'
|
||||
import Taro from '@tarojs/taro'
|
||||
import {Loading, InfiniteLoading, Empty, Space, Tag} from '@nutui/nutui-react-taro'
|
||||
import {pageShopChatConversation} from "@/api/shop/shopChatConversation";
|
||||
import FixedButton from "@/components/FixedButton";
|
||||
|
||||
const Index = () => {
|
||||
const [list, setList] = useState<any[]>([])
|
||||
const [loading, setLoading] = useState<boolean>(false)
|
||||
const [page, setPage] = useState(1)
|
||||
const [hasMore, setHasMore] = useState(true)
|
||||
|
||||
// 获取消息数据
|
||||
const fetchMessageData = useCallback(async (resetPage = false, targetPage?: number, searchKeyword?: string) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const currentPage = resetPage ? 1 : (targetPage || page);
|
||||
|
||||
// 构建API参数,根据状态筛选
|
||||
const params: any = {
|
||||
page: currentPage
|
||||
};
|
||||
|
||||
// 添加搜索关键词
|
||||
if (searchKeyword && searchKeyword.trim()) {
|
||||
params.keywords = searchKeyword.trim();
|
||||
}
|
||||
|
||||
const res = await pageShopChatConversation(params);
|
||||
|
||||
if (res?.list && res.list.length > 0) {
|
||||
// 正确映射状态
|
||||
const mappedList = res.list.map(customer => ({
|
||||
...customer
|
||||
}));
|
||||
|
||||
// 如果是重置页面或第一页,直接设置新数据;否则追加数据
|
||||
if (resetPage || currentPage === 1) {
|
||||
setList(mappedList);
|
||||
} else {
|
||||
setList(prevList => prevList.concat(mappedList));
|
||||
}
|
||||
|
||||
// 正确判断是否还有更多数据
|
||||
const hasMoreData = res.list.length >= 10; // 假设每页10条数据
|
||||
setHasMore(hasMoreData);
|
||||
} else {
|
||||
if (resetPage || currentPage === 1) {
|
||||
setList([]);
|
||||
}
|
||||
setHasMore(false);
|
||||
}
|
||||
|
||||
setPage(currentPage);
|
||||
} catch (error) {
|
||||
console.error('获取消息数据失败:', error);
|
||||
Taro.showToast({
|
||||
title: '加载失败,请重试',
|
||||
icon: 'none'
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [page]);
|
||||
|
||||
const reloadMore = async () => {
|
||||
if (loading || !hasMore) return; // 防止重复加载
|
||||
const nextPage = page + 1;
|
||||
await fetchMessageData(false, nextPage);
|
||||
}
|
||||
|
||||
|
||||
// 获取列表数据(现在使用服务端搜索,不需要消息端过滤)
|
||||
const getFilteredList = () => {
|
||||
return list;
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
// 初始化时加载数据
|
||||
fetchMessageData(true, 1, '');
|
||||
}, []);
|
||||
|
||||
// 渲染消息项
|
||||
const renderMessageItem = (customer: any) => (
|
||||
<View key={customer.userId} className="bg-white rounded-lg p-4 mb-3 shadow-sm">
|
||||
<View className="flex items-center">
|
||||
<View className="flex-1">
|
||||
<View className="flex items-center justify-between mb-1">
|
||||
<Text className="font-semibold text-gray-800 mr-2">
|
||||
关于XXXX的通知
|
||||
</Text>
|
||||
<Tag type={'warning'}>未读</Tag>
|
||||
{/*<Tag type={'success'}>已读</Tag>*/}
|
||||
</View>
|
||||
<Space direction={'vertical'}>
|
||||
{/*<Text className="text-xs text-gray-500">统一代码:{customer.dealerCode}</Text>*/}
|
||||
<Text className="text-xs text-gray-500">
|
||||
创建时间:{customer.createTime}
|
||||
</Text>
|
||||
</Space>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
|
||||
// 渲染消息列表
|
||||
const renderMessageList = () => {
|
||||
const filteredList = getFilteredList();
|
||||
|
||||
return (
|
||||
<View className="p-4" style={{
|
||||
height: '90vh',
|
||||
overflowY: 'auto',
|
||||
overflowX: 'hidden'
|
||||
}}>
|
||||
<InfiniteLoading
|
||||
target="scroll"
|
||||
hasMore={hasMore}
|
||||
onLoadMore={reloadMore}
|
||||
onScroll={() => {
|
||||
// 滚动事件处理
|
||||
}}
|
||||
onScrollToUpper={() => {
|
||||
// 滚动到顶部事件处理
|
||||
}}
|
||||
loadingText={
|
||||
<>
|
||||
加载中...
|
||||
</>
|
||||
}
|
||||
loadMoreText={
|
||||
filteredList.length === 0 ? (
|
||||
<Empty
|
||||
style={{backgroundColor: 'transparent'}}
|
||||
description={loading ? "加载中..." : "暂无消息数据"}
|
||||
/>
|
||||
) : (
|
||||
<View className={'h-12 flex items-center justify-center'}>
|
||||
<Text className="text-gray-500 text-sm">没有更多了</Text>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
>
|
||||
{loading && filteredList.length === 0 ? (
|
||||
<View className="flex items-center justify-center py-8">
|
||||
<Loading/>
|
||||
<Text className="text-gray-500 mt-2 ml-2">加载中...</Text>
|
||||
</View>
|
||||
) : (
|
||||
filteredList.map(renderMessageItem)
|
||||
)}
|
||||
</InfiniteLoading>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<View className="min-h-screen bg-gray-50">
|
||||
{/* 消息列表 */}
|
||||
{renderMessageList()}
|
||||
<FixedButton />
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
export default Index;
|
||||
4
src/user/chat/message/add.config.ts
Normal file
4
src/user/chat/message/add.config.ts
Normal file
@@ -0,0 +1,4 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '发送消息',
|
||||
navigationBarTextStyle: 'black'
|
||||
})
|
||||
135
src/user/chat/message/add.tsx
Normal file
135
src/user/chat/message/add.tsx
Normal file
@@ -0,0 +1,135 @@
|
||||
import {useEffect, useState, useRef} from "react";
|
||||
import {useRouter} from '@tarojs/taro'
|
||||
import {Loading, CellGroup, Input, Form, Cell, Avatar} from '@nutui/nutui-react-taro'
|
||||
import {ArrowRight} from '@nutui/icons-react-taro'
|
||||
import {View, Text} from '@tarojs/components'
|
||||
import Taro from '@tarojs/taro'
|
||||
import FixedButton from "@/components/FixedButton";
|
||||
import {addShopChatMessage} from "@/api/shop/shopChatMessage";
|
||||
import {ShopChatMessage} from "@/api/shop/shopChatMessage/model";
|
||||
import navTo from "@/utils/common";
|
||||
import {getUser} from "@/api/system/user";
|
||||
import {User} from "@/api/system/user/model";
|
||||
|
||||
const AddMessage = () => {
|
||||
const {params} = useRouter();
|
||||
const [toUser, setToUser] = useState<User>()
|
||||
const [loading, setLoading] = useState<boolean>(true)
|
||||
const [FormData, _] = useState<ShopChatMessage>()
|
||||
const formRef = useRef<any>(null)
|
||||
|
||||
// 判断是编辑还是新增模式
|
||||
const isEditMode = !!params.id
|
||||
const toUserId = params.id ? Number(params.id) : undefined
|
||||
|
||||
const reload = async () => {
|
||||
if(toUserId){
|
||||
getUser(Number(toUserId)).then(data => {
|
||||
setToUser(data)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 提交表单
|
||||
const submitSucceed = async (values: any) => {
|
||||
try {
|
||||
// 准备提交的数据
|
||||
const submitData = {
|
||||
...values
|
||||
};
|
||||
|
||||
console.log('提交数据:', submitData)
|
||||
|
||||
// 参数校验
|
||||
if(!toUser){
|
||||
Taro.showToast({
|
||||
title: `请选择发送对象`,
|
||||
icon: 'error'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
// 判断内容是否为空
|
||||
if (!values.content) {
|
||||
Taro.showToast({
|
||||
title: `请输入内容`,
|
||||
icon: 'error'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
// 执行新增或更新操作
|
||||
await addShopChatMessage({
|
||||
toUserId: toUserId,
|
||||
formUserId: Taro.getStorageSync('UserId'),
|
||||
type: 'text',
|
||||
content: values.content
|
||||
});
|
||||
|
||||
Taro.showToast({
|
||||
title: `发送成功`,
|
||||
icon: 'success'
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
Taro.navigateBack();
|
||||
}, 1000);
|
||||
|
||||
} catch (error) {
|
||||
console.error('发送失败:', error);
|
||||
Taro.showToast({
|
||||
title: `发送失败`,
|
||||
icon: 'error'
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const submitFailed = (error: any) => {
|
||||
console.log(error, 'err...')
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
reload().then(() => {
|
||||
setLoading(false)
|
||||
})
|
||||
}, [isEditMode]);
|
||||
|
||||
if (loading) {
|
||||
return <Loading className={'px-2'}>加载中</Loading>
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Cell title={toUser ? (
|
||||
<View className={'flex items-center'}>
|
||||
<Avatar src={toUser.avatar}/>
|
||||
<View className={'ml-2 flex flex-col'}>
|
||||
<Text>{toUser.alias || toUser.nickname}</Text>
|
||||
<Text className={'text-gray-300'}>{toUser.mobile}</Text>
|
||||
</View>
|
||||
</View>
|
||||
) : '选择发送对象'} extra={(
|
||||
<ArrowRight color="#cccccc" className={toUser ? 'mt-2' : ''} size={toUser ? 20 : 18}/>
|
||||
)}
|
||||
onClick={() => navTo(`/dealer/team/index`, true)}/>
|
||||
<Form
|
||||
ref={formRef}
|
||||
divider
|
||||
initialValues={FormData}
|
||||
labelPosition="left"
|
||||
onFinish={(values) => submitSucceed(values)}
|
||||
onFinishFailed={(errors) => submitFailed(errors)}
|
||||
>
|
||||
<CellGroup style={{padding: '4px 0'}}>
|
||||
<Form.Item name="content" initialValue={FormData?.content} required>
|
||||
<Input placeholder="填写消息内容" maxLength={300}/>
|
||||
</Form.Item>
|
||||
</CellGroup>
|
||||
</Form>
|
||||
|
||||
{/* 底部浮动按钮 */}
|
||||
<FixedButton text={isEditMode ? '立即发送' : '立即发送'} onClick={() => formRef.current?.submit()}/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddMessage;
|
||||
4
src/user/chat/message/detail.config.ts
Normal file
4
src/user/chat/message/detail.config.ts
Normal file
@@ -0,0 +1,4 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '查看消息',
|
||||
navigationBarTextStyle: 'black'
|
||||
})
|
||||
77
src/user/chat/message/detail.tsx
Normal file
77
src/user/chat/message/detail.tsx
Normal file
@@ -0,0 +1,77 @@
|
||||
import {useEffect, useState} from "react";
|
||||
import {useRouter} from '@tarojs/taro'
|
||||
import {CellGroup, Cell, Loading, Avatar} from '@nutui/nutui-react-taro'
|
||||
import {View,Text} from '@tarojs/components'
|
||||
import {ArrowRight} from '@nutui/icons-react-taro'
|
||||
import {getShopChatMessage, updateShopChatMessage} from "@/api/shop/shopChatMessage";
|
||||
import {ShopChatMessage} from "@/api/shop/shopChatMessage/model";
|
||||
import navTo from "@/utils/common";
|
||||
|
||||
const AddMessageDetail = () => {
|
||||
const {params} = useRouter();
|
||||
const [loading, setLoading] = useState<boolean>(true)
|
||||
const [item, setItem] = useState<ShopChatMessage>()
|
||||
|
||||
const reload = () => {
|
||||
const id = params.id ? Number(params.id) : undefined
|
||||
if (id) {
|
||||
getShopChatMessage(id).then(data => {
|
||||
setItem(data)
|
||||
setLoading(false)
|
||||
updateShopChatMessage({
|
||||
...data,
|
||||
status: 1
|
||||
}).then(() => {
|
||||
console.log('设为已读')
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
reload()
|
||||
}, []);
|
||||
|
||||
if (loading) {
|
||||
return <Loading className={'px-2'}>加载中</Loading>
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Cell style={{
|
||||
display: 'none'
|
||||
}} title={item?.formUserId ? (
|
||||
<View className={'flex items-center'}>
|
||||
<Avatar src={item.formUserAvatar}/>
|
||||
<View className={'ml-2 flex flex-col'}>
|
||||
<Text>{item.formUserAlias || item.formUserName}</Text>
|
||||
<Text className={'text-gray-300'}>{item.formUserPhone}</Text>
|
||||
</View>
|
||||
</View>
|
||||
) : '选择发送对象'} extra={(
|
||||
<ArrowRight color="#cccccc" className={item ? 'mt-2' : ''} size={item ? 20 : 18}/>
|
||||
)}
|
||||
onClick={() => navTo(`/dealer/team/index`, true)}/>
|
||||
<CellGroup>
|
||||
<Cell title={'发布人'} extra={item?.formUserAlias || item?.formUserName}/>
|
||||
<Cell title={'创建时间'} extra={item?.createTime}/>
|
||||
<Cell title={'状态'} extra={
|
||||
item?.status === 0 ? '未读' : '已读'
|
||||
}/>
|
||||
{/*<Cell title={(*/}
|
||||
{/* <>*/}
|
||||
{/* <Text>{'消息内容:'}</Text>*/}
|
||||
{/* <Text>{item?.content}</Text>*/}
|
||||
{/* </>*/}
|
||||
{/*)} />*/}
|
||||
</CellGroup>
|
||||
<CellGroup>
|
||||
<Cell title={(
|
||||
<Text>{item?.content}</Text>
|
||||
)} />
|
||||
</CellGroup>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddMessageDetail;
|
||||
3
src/user/chat/message/index.config.ts
Normal file
3
src/user/chat/message/index.config.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '我的消息'
|
||||
})
|
||||
179
src/user/chat/message/index.tsx
Normal file
179
src/user/chat/message/index.tsx
Normal file
@@ -0,0 +1,179 @@
|
||||
import {useState, useCallback, useEffect} from 'react'
|
||||
import {View, Text} from '@tarojs/components'
|
||||
import Taro from '@tarojs/taro'
|
||||
import {Loading, InfiniteLoading, Empty, Avatar, Badge} from '@nutui/nutui-react-taro'
|
||||
import FixedButton from "@/components/FixedButton";
|
||||
import {ShopChatMessage} from "@/api/shop/shopChatMessage/model";
|
||||
import {pageShopChatMessage} from "@/api/shop/shopChatMessage";
|
||||
import navTo from "@/utils/common";
|
||||
|
||||
const MessageIndex = () => {
|
||||
const [list, setList] = useState<ShopChatMessage[]>([])
|
||||
const [loading, setLoading] = useState<boolean>(false)
|
||||
const [page, setPage] = useState(1)
|
||||
const [hasMore, setHasMore] = useState(true)
|
||||
|
||||
// 获取消息数据
|
||||
const fetchMessageData = useCallback(async (resetPage = false, targetPage?: number, searchKeyword?: string) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const currentPage = resetPage ? 1 : (targetPage || page);
|
||||
|
||||
// 构建API参数,根据状态筛选
|
||||
const params: any = {
|
||||
type: 'text',
|
||||
page: currentPage,
|
||||
toUserId: Taro.getStorageSync('UserId')
|
||||
};
|
||||
|
||||
// 添加搜索关键词
|
||||
if (searchKeyword && searchKeyword.trim()) {
|
||||
params.keywords = searchKeyword.trim();
|
||||
}
|
||||
|
||||
const res = await pageShopChatMessage(params);
|
||||
|
||||
if (res?.list && res.list.length > 0) {
|
||||
// 正确映射状态
|
||||
const mappedList = res.list.map(customer => ({
|
||||
...customer
|
||||
}));
|
||||
|
||||
// 如果是重置页面或第一页,直接设置新数据;否则追加数据
|
||||
if (resetPage || currentPage === 1) {
|
||||
setList(mappedList);
|
||||
} else {
|
||||
setList(prevList => prevList.concat(mappedList));
|
||||
}
|
||||
|
||||
// 正确判断是否还有更多数据
|
||||
const hasMoreData = res.list.length >= 10; // 假设每页10条数据
|
||||
setHasMore(hasMoreData);
|
||||
} else {
|
||||
if (resetPage || currentPage === 1) {
|
||||
setList([]);
|
||||
}
|
||||
setHasMore(false);
|
||||
}
|
||||
|
||||
setPage(currentPage);
|
||||
} catch (error) {
|
||||
console.error('获取消息数据失败:', error);
|
||||
Taro.showToast({
|
||||
title: '加载失败,请重试',
|
||||
icon: 'none'
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [page]);
|
||||
|
||||
const reloadMore = async () => {
|
||||
if (loading || !hasMore) return; // 防止重复加载
|
||||
const nextPage = page + 1;
|
||||
await fetchMessageData(false, nextPage);
|
||||
}
|
||||
|
||||
|
||||
// 获取列表数据(现在使用服务端搜索,不需要消息端过滤)
|
||||
const getFilteredList = () => {
|
||||
return list;
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
// 初始化时加载数据
|
||||
fetchMessageData(true, 1, '');
|
||||
}, []);
|
||||
|
||||
// 渲染消息项
|
||||
const renderMessageItem = (item: any) => (
|
||||
<View key={item.userId} className="bg-white rounded-lg p-4 mb-3 shadow-sm">
|
||||
<View className="flex items-center" onClick={() => navTo(`/user/chat/message/detail?id=${item.id}`,true)}>
|
||||
<View className="flex-1">
|
||||
<View className="flex items-center justify-between mb-1">
|
||||
<View className={'flex w-full'}>
|
||||
<Badge style={{marginInlineEnd: '10px'}} dot={item.status === 0} top="2" right="4">
|
||||
<Avatar
|
||||
size="40"
|
||||
src={item.formUserAvatar}
|
||||
/>
|
||||
</Badge>
|
||||
<View className="flex flex-col w-full">
|
||||
<View className="flex items-center w-full justify-between">
|
||||
<Text className="font-semibold text-gray-800 mr-2">{item.formUserAlias || item.formUserName}</Text>
|
||||
<Text className="text-xs text-gray-500">
|
||||
{item.createTime}
|
||||
</Text>
|
||||
</View>
|
||||
<Text className="text-gray-500 mt-2 mr-2">
|
||||
{item.content}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
|
||||
// 渲染消息列表
|
||||
const renderMessageList = () => {
|
||||
const filteredList = getFilteredList();
|
||||
|
||||
return (
|
||||
<View className="p-4" style={{
|
||||
height: '90vh',
|
||||
overflowY: 'auto',
|
||||
overflowX: 'hidden'
|
||||
}}>
|
||||
<InfiniteLoading
|
||||
target="scroll"
|
||||
hasMore={hasMore}
|
||||
onLoadMore={reloadMore}
|
||||
onScroll={() => {
|
||||
// 滚动事件处理
|
||||
}}
|
||||
onScrollToUpper={() => {
|
||||
// 滚动到顶部事件处理
|
||||
}}
|
||||
loadingText={
|
||||
<>
|
||||
加载中...
|
||||
</>
|
||||
}
|
||||
loadMoreText={
|
||||
filteredList.length === 0 ? (
|
||||
<Empty
|
||||
style={{backgroundColor: 'transparent'}}
|
||||
description={loading ? "加载中..." : "暂无消息数据"}
|
||||
/>
|
||||
) : (
|
||||
<View className={'h-12 flex items-center justify-center'}>
|
||||
<Text className="text-gray-500 text-sm">没有更多了</Text>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
>
|
||||
{loading && filteredList.length === 0 ? (
|
||||
<View className="flex items-center justify-center py-8">
|
||||
<Loading/>
|
||||
<Text className="text-gray-500 mt-2 ml-2">加载中...</Text>
|
||||
</View>
|
||||
) : (
|
||||
filteredList.map(renderMessageItem)
|
||||
)}
|
||||
</InfiniteLoading>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<View className="min-h-screen bg-gray-50">
|
||||
{/* 消息列表 */}
|
||||
{renderMessageList()}
|
||||
<FixedButton text={'发送消息'} onClick={() => navTo(`/user/chat/message/add`,true)}/>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
export default MessageIndex;
|
||||
3
src/user/company/company.config.ts
Normal file
3
src/user/company/company.config.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '公司资料'
|
||||
})
|
||||
54
src/user/company/company.tsx
Normal file
54
src/user/company/company.tsx
Normal file
@@ -0,0 +1,54 @@
|
||||
import {Cell} from '@nutui/nutui-react-taro';
|
||||
import {ArrowRight} from '@nutui/icons-react-taro'
|
||||
|
||||
function Company() {
|
||||
return (
|
||||
<div className={'p-4'}>
|
||||
<Cell title={
|
||||
<div className={'flex'}>
|
||||
<div className={'title w-16 pr-4'}>企业名称</div>
|
||||
<div className={'extra'}>南宁市网宿信息科技有限公司</div>
|
||||
</div>
|
||||
} align={'center'}/>
|
||||
<div className={'py-2 text-red-100 text-sm'}>经营信息</div>
|
||||
<Cell.Group>
|
||||
{/*<Cell title={*/}
|
||||
{/* <div className={'flex'}>*/}
|
||||
{/* <div className={'title w-16 pr-4'}>商户号</div>*/}
|
||||
{/* <div className={'extra'}>1557418831</div>*/}
|
||||
{/* </div>*/}
|
||||
{/*} align={'center'}/>*/}
|
||||
<Cell title={
|
||||
<div className={'flex'}>
|
||||
<div className={'title w-16 pr-4'}>企业简称</div>
|
||||
<div className={'extra'}>网宿软件</div>
|
||||
</div>
|
||||
} align={'center'}/>
|
||||
<Cell title={
|
||||
<div className={'flex'}>
|
||||
<div className={'title w-16 pr-4'}>联系电话</div>
|
||||
<div className={'extra'}>137****8880</div>
|
||||
</div>
|
||||
} align={'center'}/>
|
||||
</Cell.Group>
|
||||
<div className={'py-2 text-red-100 text-sm'}>主体信息</div>
|
||||
<Cell title={
|
||||
<div className={'flex'}>
|
||||
<div className={'title w-16 pr-4'}>信息详情</div>
|
||||
<div className={'extra'}></div>
|
||||
</div>
|
||||
} align={'center'} extra={<ArrowRight color="#cccccc" size={16} />}/>
|
||||
<div className={'py-2 text-red-100 text-sm'}>企业负责人</div>
|
||||
<Cell.Group>
|
||||
<Cell title={
|
||||
<div className={'flex'}>
|
||||
<div className={'title w-16 pr-4'}>姓名</div>
|
||||
<div className={'extra'}>赵*林</div>
|
||||
</div>
|
||||
} align={'center'}/>
|
||||
</Cell.Group>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Company
|
||||
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'
|
||||
})
|
||||
237
src/user/coupon/coupon.tsx
Normal file
237
src/user/coupon/coupon.tsx
Normal file
@@ -0,0 +1,237 @@
|
||||
import {useState, useEffect, CSSProperties} from 'react'
|
||||
import Taro from '@tarojs/taro'
|
||||
import {Cell, InfiniteLoading, Tabs, TabPane, Tag, Empty, ConfigProvider} from '@nutui/nutui-react-taro'
|
||||
import {pageShopUserCoupon as pageUserCoupon, getMyAvailableCoupons, getMyUsedCoupons, getMyExpiredCoupons} from "@/api/shop/shopUserCoupon";
|
||||
import {ShopUserCoupon as UserCouponType} from "@/api/shop/shopUserCoupon/model";
|
||||
import {View} from '@tarojs/components'
|
||||
|
||||
const InfiniteUlStyle: CSSProperties = {
|
||||
height: '100vh',
|
||||
width: '100%',
|
||||
padding: '0',
|
||||
overflowY: 'auto',
|
||||
overflowX: 'hidden',
|
||||
}
|
||||
|
||||
const UserCoupon = () => {
|
||||
const [list, setList] = useState<UserCouponType[]>([])
|
||||
const [page, setPage] = useState(1)
|
||||
const [hasMore, setHasMore] = useState(true)
|
||||
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 }
|
||||
]
|
||||
|
||||
useEffect(() => {
|
||||
reload()
|
||||
loadCouponCount()
|
||||
}, [])
|
||||
|
||||
const loadMore = async () => {
|
||||
setPage(page + 1)
|
||||
reload();
|
||||
}
|
||||
|
||||
const reload = () => {
|
||||
const userId = Taro.getStorageSync('UserId')
|
||||
if (!userId) {
|
||||
Taro.showToast({
|
||||
title: '请先登录',
|
||||
icon: 'error'
|
||||
});
|
||||
return
|
||||
}
|
||||
|
||||
const tab = tabs.find(t => t.key === activeTab)
|
||||
pageUserCoupon({
|
||||
userId: parseInt(userId),
|
||||
status: tab?.status,
|
||||
page
|
||||
}).then(res => {
|
||||
console.log(res)
|
||||
const newList = res?.list || [];
|
||||
setList([...list, ...newList])
|
||||
setHasMore(newList.length > 0)
|
||||
}).catch(error => {
|
||||
console.error('Coupon error:', error)
|
||||
Taro.showToast({
|
||||
title: error?.message || '获取失败',
|
||||
icon: 'error'
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
const loadCouponCount = async () => {
|
||||
const userId = Taro.getStorageSync('UserId')
|
||||
if (!userId) return
|
||||
|
||||
try {
|
||||
// 并行获取各种状态的优惠券数量
|
||||
const [availableCoupons, usedCoupons, expiredCoupons] = await Promise.all([
|
||||
getMyAvailableCoupons().catch(() => []),
|
||||
getMyUsedCoupons().catch(() => []),
|
||||
getMyExpiredCoupons().catch(() => [])
|
||||
])
|
||||
|
||||
setCouponCount({
|
||||
unused: availableCoupons.length || 0,
|
||||
used: usedCoupons.length || 0,
|
||||
expired: expiredCoupons.length || 0
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('Coupon count error:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const onTabChange = (index: string) => {
|
||||
setActiveTab(index)
|
||||
setList([]) // 清空列表
|
||||
setPage(1) // 重置页码
|
||||
setHasMore(true) // 重置hasMore
|
||||
// 延迟执行reload,确保状态更新完成
|
||||
setTimeout(() => {
|
||||
reload()
|
||||
}, 0)
|
||||
}
|
||||
|
||||
const getCouponTypeText = (type?: number) => {
|
||||
switch (type) {
|
||||
case 10: return '满减券'
|
||||
case 20: return '折扣券'
|
||||
case 30: 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
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<ConfigProvider>
|
||||
<View className="h-screen">
|
||||
<Tabs value={activeTab} onChange={onTabChange}>
|
||||
{tabs.map(tab => (
|
||||
<TabPane key={tab.key} title={tab.title}>
|
||||
<ul style={InfiniteUlStyle} id="scroll">
|
||||
<InfiniteLoading
|
||||
target="scroll"
|
||||
hasMore={hasMore}
|
||||
onLoadMore={loadMore}
|
||||
onScroll={() => {
|
||||
console.log('onScroll')
|
||||
}}
|
||||
onScrollToUpper={() => {
|
||||
console.log('onScrollToUpper')
|
||||
}}
|
||||
loadingText={
|
||||
<>
|
||||
加载中
|
||||
</>
|
||||
}
|
||||
loadMoreText={
|
||||
<>
|
||||
没有更多了
|
||||
</>
|
||||
}
|
||||
>
|
||||
<View className="p-4">
|
||||
{list.length === 0 ? (
|
||||
<div className={'h-full flex flex-col justify-center items-center'} style={{
|
||||
height: 'calc(100vh - 400px)',
|
||||
}}>
|
||||
<Empty
|
||||
style={{
|
||||
backgroundColor: 'transparent'
|
||||
}}
|
||||
description="您还没有优惠券"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
list.map((item, index) => (
|
||||
<Cell.Group key={`${item.couponId}-${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>
|
||||
</InfiniteLoading>
|
||||
</ul>
|
||||
</TabPane>
|
||||
))}
|
||||
</Tabs>
|
||||
</View>
|
||||
</ConfigProvider>
|
||||
);
|
||||
};
|
||||
|
||||
export default UserCoupon;
|
||||
6
src/user/coupon/detail.config.ts
Normal file
6
src/user/coupon/detail.config.ts
Normal file
@@ -0,0 +1,6 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '优惠券详情',
|
||||
navigationBarTextStyle: 'black',
|
||||
navigationBarBackgroundColor: '#ffffff',
|
||||
navigationStyle: 'custom'
|
||||
})
|
||||
259
src/user/coupon/detail.tsx
Normal file
259
src/user/coupon/detail.tsx
Normal file
@@ -0,0 +1,259 @@
|
||||
import {useState, useEffect} from "react";
|
||||
import {useRouter} from '@tarojs/taro'
|
||||
import {Button, ConfigProvider, Tag, Divider} from '@nutui/nutui-react-taro'
|
||||
import {ArrowLeft, Gift, Clock, CartCheck, Share} from '@nutui/icons-react-taro'
|
||||
import Taro from '@tarojs/taro'
|
||||
import {View, Text} from '@tarojs/components'
|
||||
import {ShopCoupon} from "@/api/shop/shopCoupon/model";
|
||||
import {getShopCoupon} from "@/api/shop/shopCoupon";
|
||||
import CouponShare from "@/components/CouponShare";
|
||||
import dayjs from "dayjs";
|
||||
|
||||
const CouponDetail = () => {
|
||||
const router = useRouter()
|
||||
const [coupon, setCoupon] = useState<ShopCoupon | null>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [showShare, setShowShare] = useState(false)
|
||||
const couponId = router.params.id
|
||||
|
||||
useEffect(() => {
|
||||
if (couponId) {
|
||||
loadCouponDetail()
|
||||
}
|
||||
}, [couponId])
|
||||
|
||||
const loadCouponDetail = async () => {
|
||||
try {
|
||||
setLoading(true)
|
||||
const data = await getShopCoupon(Number(couponId))
|
||||
setCoupon(data)
|
||||
} catch (error) {
|
||||
console.error('获取优惠券详情失败:', error)
|
||||
Taro.showToast({
|
||||
title: '获取优惠券详情失败',
|
||||
icon: 'error'
|
||||
})
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
// 获取优惠券类型文本
|
||||
const getCouponTypeText = (type?: number) => {
|
||||
switch (type) {
|
||||
case 10: return '满减券'
|
||||
case 20: return '折扣券'
|
||||
case 30: return '免费券'
|
||||
default: return '优惠券'
|
||||
}
|
||||
}
|
||||
|
||||
// 获取优惠券金额显示
|
||||
const getCouponAmountDisplay = () => {
|
||||
if (!coupon) return ''
|
||||
|
||||
switch (coupon.type) {
|
||||
case 10: // 满减券
|
||||
return `¥${coupon.reducePrice}`
|
||||
case 20: // 折扣券
|
||||
return `${coupon.discount}折`
|
||||
case 30: // 免费券
|
||||
return '免费'
|
||||
default:
|
||||
return `¥${coupon.reducePrice || 0}`
|
||||
}
|
||||
}
|
||||
|
||||
// 获取使用条件文本
|
||||
const getConditionText = () => {
|
||||
if (!coupon) return ''
|
||||
|
||||
if (coupon.type === 30) return '无门槛使用'
|
||||
if (coupon.minPrice && parseFloat(coupon.minPrice) > 0) {
|
||||
return `满${coupon.minPrice}元可用`
|
||||
}
|
||||
return '无门槛使用'
|
||||
}
|
||||
|
||||
// 获取有效期文本
|
||||
const getValidityText = () => {
|
||||
if (!coupon) return ''
|
||||
|
||||
if (coupon.expireType === 10) {
|
||||
return `领取后${coupon.expireDay}天内有效`
|
||||
} else {
|
||||
return `${dayjs(coupon.startTime).format('YYYY年MM月DD日')} 至 ${dayjs(coupon.endTime).format('YYYY年MM月DD日')}`
|
||||
}
|
||||
}
|
||||
|
||||
// 获取适用范围文本
|
||||
const getApplyRangeText = () => {
|
||||
if (!coupon) return ''
|
||||
|
||||
switch (coupon.applyRange) {
|
||||
case 10: return '全部商品'
|
||||
case 20: return '指定商品'
|
||||
case 30: return '指定分类'
|
||||
default: return '全部商品'
|
||||
}
|
||||
}
|
||||
|
||||
// 获取优惠券状态
|
||||
const getCouponStatus = () => {
|
||||
if (!coupon) return { status: 0, text: '未知', color: 'default' }
|
||||
|
||||
if (coupon.isExpire === 1) {
|
||||
return { status: 2, text: '已过期', color: 'danger' }
|
||||
} else if (coupon.status === 1) {
|
||||
return { status: 1, text: '已使用', color: 'warning' }
|
||||
} else {
|
||||
return { status: 0, text: '可使用', color: 'success' }
|
||||
}
|
||||
}
|
||||
|
||||
// 使用优惠券
|
||||
const handleUseCoupon = () => {
|
||||
if (!coupon) return
|
||||
|
||||
Taro.showModal({
|
||||
title: '使用优惠券',
|
||||
content: `确定要使用"${coupon.name}"吗?`,
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
// 跳转到商品页面或购物车页面
|
||||
Taro.navigateTo({
|
||||
url: '/pages/index/index'
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 返回上一页
|
||||
const handleBack = () => {
|
||||
Taro.navigateBack()
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<ConfigProvider>
|
||||
<View className="flex justify-center items-center h-screen">
|
||||
<Text>加载中...</Text>
|
||||
</View>
|
||||
</ConfigProvider>
|
||||
)
|
||||
}
|
||||
|
||||
if (!coupon) {
|
||||
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 = getCouponStatus()
|
||||
|
||||
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 className="flex items-center gap-3">
|
||||
<View onClick={() => setShowShare(true)}>
|
||||
<Share size="20" className="text-gray-600" />
|
||||
</View>
|
||||
<Tag type={statusInfo.color as any}>{statusInfo.text}</Tag>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 优惠券卡片 */}
|
||||
<View className="m-4 p-6 bg-gradient-to-r from-red-400 to-red-500 rounded-2xl text-white">
|
||||
<View className="flex items-center justify-between mb-4">
|
||||
<View>
|
||||
<Text className="text-4xl font-bold">{getCouponAmountDisplay()}</Text>
|
||||
<Text className="text-lg opacity-90 mt-1">{getCouponTypeText(coupon.type)}</Text>
|
||||
</View>
|
||||
<Gift size="40" />
|
||||
</View>
|
||||
|
||||
<Text className="text-xl font-semibold mb-2">{coupon.name}</Text>
|
||||
<Text className="text-base opacity-90">{getConditionText()}</Text>
|
||||
</View>
|
||||
|
||||
{/* 详细信息 */}
|
||||
<View className="bg-white mx-4 rounded-xl p-4">
|
||||
<Text className="text-lg font-semibold mb-4">使用说明</Text>
|
||||
|
||||
<View className="gap-2">
|
||||
<View className="flex items-center">
|
||||
<Clock size="16" className="text-gray-400 mr-3" />
|
||||
<View>
|
||||
<Text className="text-gray-600 text-sm">有效期</Text>
|
||||
<Text className="text-gray-900">{getValidityText()}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<Divider />
|
||||
|
||||
<View className="flex items-center">
|
||||
<CartCheck size="16" className="text-gray-400 mr-3" />
|
||||
<View>
|
||||
<Text className="text-gray-600 text-sm">适用范围</Text>
|
||||
<Text className="text-gray-900">{getApplyRangeText()}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{coupon.description && (
|
||||
<>
|
||||
<Divider />
|
||||
<View>
|
||||
<Text className="text-gray-600 text-sm mb-2">使用说明</Text>
|
||||
<Text className="text-gray-900 leading-relaxed">{coupon.description}</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">
|
||||
<Button
|
||||
type="primary"
|
||||
size="large"
|
||||
block
|
||||
onClick={handleUseCoupon}
|
||||
>
|
||||
立即使用
|
||||
</Button>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* 分享弹窗 */}
|
||||
{coupon && (
|
||||
<CouponShare
|
||||
visible={showShare}
|
||||
coupon={{
|
||||
id: coupon.id || 0,
|
||||
name: coupon.name || '',
|
||||
type: coupon.type || 10,
|
||||
amount: coupon.type === 10 ? coupon.reducePrice || '0' :
|
||||
coupon.type === 20 ? coupon.discount?.toString() || '0' : '0',
|
||||
minAmount: coupon.minPrice,
|
||||
description: coupon.description
|
||||
}}
|
||||
onClose={() => setShowShare(false)}
|
||||
/>
|
||||
)}
|
||||
</ConfigProvider>
|
||||
);
|
||||
};
|
||||
|
||||
export default CouponDetail;
|
||||
5
src/user/coupon/index.config.ts
Normal file
5
src/user/coupon/index.config.ts
Normal file
@@ -0,0 +1,5 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '我的优惠券',
|
||||
navigationBarTextStyle: 'black',
|
||||
navigationBarBackgroundColor: '#ffffff'
|
||||
})
|
||||
466
src/user/coupon/index.tsx
Normal file
466
src/user/coupon/index.tsx
Normal file
@@ -0,0 +1,466 @@
|
||||
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 {Plus, Filter} from '@nutui/icons-react-taro'
|
||||
import {View} from '@tarojs/components'
|
||||
import {ShopUserCoupon} from "@/api/shop/shopUserCoupon/model";
|
||||
import {pageShopUserCoupon, getMyAvailableCoupons, getMyUsedCoupons, getMyExpiredCoupons} from "@/api/shop/shopUserCoupon";
|
||||
import CouponList from "@/components/CouponList";
|
||||
import CouponStats from "@/components/CouponStats";
|
||||
import CouponGuide from "@/components/CouponGuide";
|
||||
import CouponFilter from "@/components/CouponFilter";
|
||||
import CouponExpireNotice, {ExpiringSoon} from "@/components/CouponExpireNotice";
|
||||
import {CouponCardProps} from "@/components/CouponCard";
|
||||
import dayjs from "dayjs";
|
||||
import {transformCouponData} from "@/utils/couponUtils";
|
||||
|
||||
const CouponManage = () => {
|
||||
const [list, setList] = useState<ShopUserCoupon[]>([])
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [hasMore, setHasMore] = useState(true)
|
||||
const [searchValue, setSearchValue] = useState('')
|
||||
const [page, setPage] = useState(1)
|
||||
const [total, setTotal] = useState(0)
|
||||
console.log('total = ', total)
|
||||
const [activeTab, setActiveTab] = useState('0') // 0-可用 1-已使用 2-已过期
|
||||
const [stats, setStats] = useState({
|
||||
available: 0,
|
||||
used: 0,
|
||||
expired: 0
|
||||
})
|
||||
const [showGuide, setShowGuide] = useState(false)
|
||||
const [showFilter, setShowFilter] = useState(false)
|
||||
const [showExpireNotice, setShowExpireNotice] = useState(false)
|
||||
const [expiringSoonCoupons, setExpiringSoonCoupons] = useState<ExpiringSoon[]>([])
|
||||
const [filters, setFilters] = useState({
|
||||
type: [] as number[],
|
||||
minAmount: undefined as number | undefined,
|
||||
sortBy: 'createTime' as 'createTime' | 'amount' | 'expireTime',
|
||||
sortOrder: 'desc' as 'asc' | 'desc'
|
||||
})
|
||||
|
||||
// 获取优惠券状态过滤条件
|
||||
const reload = async (isRefresh = false) => {
|
||||
// 直接调用reloadWithTab,使用当前的activeTab
|
||||
await reloadWithTab(activeTab, isRefresh)
|
||||
}
|
||||
|
||||
// 搜索功能
|
||||
const handleSearch = (value: string) => {
|
||||
setSearchValue(value)
|
||||
reload(true)
|
||||
}
|
||||
|
||||
// 下拉刷新
|
||||
const handleRefresh = async () => {
|
||||
await reload(true)
|
||||
}
|
||||
|
||||
// Tab切换
|
||||
const handleTabChange = (value: string | number) => {
|
||||
const tabValue = String(value)
|
||||
console.log('Tab切换:', {from: activeTab, to: tabValue})
|
||||
setActiveTab(tabValue)
|
||||
setPage(1)
|
||||
setList([])
|
||||
setHasMore(true)
|
||||
|
||||
// 直接调用reload,传入新的tab值
|
||||
reloadWithTab(tabValue)
|
||||
}
|
||||
|
||||
// 根据指定tab加载数据
|
||||
const reloadWithTab = async (tab: string, isRefresh = true) => {
|
||||
if (isRefresh) {
|
||||
setPage(1)
|
||||
setList([])
|
||||
setHasMore(true)
|
||||
}
|
||||
|
||||
setLoading(true)
|
||||
try {
|
||||
let res: any = null
|
||||
|
||||
// 根据tab选择对应的API
|
||||
switch (tab) {
|
||||
case '0': // 可用优惠券
|
||||
res = await getMyAvailableCoupons()
|
||||
break
|
||||
case '1': // 已使用优惠券
|
||||
res = await getMyUsedCoupons()
|
||||
break
|
||||
case '2': // 已过期优惠券
|
||||
res = await getMyExpiredCoupons()
|
||||
break
|
||||
default:
|
||||
res = await getMyAvailableCoupons()
|
||||
}
|
||||
|
||||
console.log('使用Tab加载数据:', { tab, data: res })
|
||||
|
||||
if (res && res.length > 0) {
|
||||
// 应用搜索过滤
|
||||
let filteredList = res
|
||||
if (searchValue) {
|
||||
filteredList = res.filter((item: any) =>
|
||||
item.name?.includes(searchValue) ||
|
||||
item.description?.includes(searchValue)
|
||||
)
|
||||
}
|
||||
|
||||
// 应用其他筛选条件
|
||||
if (filters.type.length > 0) {
|
||||
filteredList = filteredList.filter((item: any) =>
|
||||
filters.type.includes(item.type)
|
||||
)
|
||||
}
|
||||
|
||||
if (filters.minAmount) {
|
||||
filteredList = filteredList.filter((item: any) =>
|
||||
parseFloat(item.minPrice || '0') >= filters.minAmount!
|
||||
)
|
||||
}
|
||||
|
||||
// 排序
|
||||
filteredList.sort((a: any, b: any) => {
|
||||
const aValue = getValueForSort(a, filters.sortBy)
|
||||
const bValue = getValueForSort(b, filters.sortBy)
|
||||
|
||||
if (filters.sortOrder === 'asc') {
|
||||
return aValue - bValue
|
||||
} else {
|
||||
return bValue - aValue
|
||||
}
|
||||
})
|
||||
|
||||
setList(filteredList)
|
||||
setTotal(filteredList.length)
|
||||
setHasMore(false) // 一次性加载所有数据,不需要分页
|
||||
} else {
|
||||
setList([])
|
||||
setTotal(0)
|
||||
setHasMore(false)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取优惠券失败:', error)
|
||||
Taro.showToast({
|
||||
title: '获取优惠券失败',
|
||||
icon: 'error'
|
||||
});
|
||||
setList([])
|
||||
setTotal(0)
|
||||
setHasMore(false)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
// 获取排序值的辅助函数
|
||||
const getValueForSort = (item: any, sortBy: string) => {
|
||||
switch (sortBy) {
|
||||
case 'amount':
|
||||
return parseFloat(item.reducePrice || item.discount || '0')
|
||||
case 'expireTime':
|
||||
return new Date(item.endTime || '').getTime()
|
||||
case 'createTime':
|
||||
default:
|
||||
return new Date(item.createTime || '').getTime()
|
||||
}
|
||||
}
|
||||
|
||||
// 转换优惠券数据并添加使用按钮
|
||||
const transformCouponDataWithAction = (coupon: ShopUserCoupon): CouponCardProps => {
|
||||
console.log('原始优惠券数据:', coupon)
|
||||
|
||||
// 使用统一的转换函数
|
||||
const transformedCoupon = transformCouponData(coupon)
|
||||
|
||||
console.log('转换后的优惠券数据:', transformedCoupon)
|
||||
|
||||
// 添加使用按钮和点击事件
|
||||
const result = {
|
||||
...transformedCoupon,
|
||||
showUseBtn: transformedCoupon.status === 0, // 只有未使用的券显示使用按钮
|
||||
onUse: () => handleUseCoupon(coupon)
|
||||
}
|
||||
|
||||
console.log('最终优惠券数据:', result)
|
||||
return result
|
||||
}
|
||||
|
||||
// 使用优惠券
|
||||
const handleUseCoupon = (_: ShopUserCoupon) => {
|
||||
// 这里可以跳转到商品页面或购物车页面
|
||||
Taro.navigateTo({
|
||||
url: '/shop/category/index?id=4326'
|
||||
})
|
||||
}
|
||||
|
||||
// 优惠券点击事件
|
||||
const handleCouponClick = (_coupon: CouponCardProps, index: number) => {
|
||||
const originalCoupon = list[index]
|
||||
if (originalCoupon) {
|
||||
// 显示优惠券详情
|
||||
showCouponDetail(originalCoupon)
|
||||
}
|
||||
}
|
||||
|
||||
// 显示优惠券详情
|
||||
const showCouponDetail = (coupon: ShopUserCoupon) => {
|
||||
// 跳转到优惠券详情页
|
||||
Taro.navigateTo({
|
||||
url: `/user/coupon/detail?id=${coupon.id}`
|
||||
})
|
||||
}
|
||||
|
||||
// 加载优惠券统计数据
|
||||
const loadCouponStats = async () => {
|
||||
try {
|
||||
// 并行获取各状态的优惠券数量
|
||||
const [availableRes, usedRes, expiredRes] = await Promise.all([
|
||||
getMyAvailableCoupons(),
|
||||
getMyUsedCoupons(),
|
||||
getMyExpiredCoupons()
|
||||
])
|
||||
|
||||
setStats({
|
||||
available: availableRes?.length || 0,
|
||||
used: usedRes?.length || 0,
|
||||
expired: expiredRes?.length || 0
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('获取优惠券统计失败:', error)
|
||||
// 设置默认值
|
||||
setStats({
|
||||
available: 0,
|
||||
used: 0,
|
||||
expired: 0
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 统计卡片点击事件
|
||||
const handleStatsClick = (type: 'available' | 'used' | 'expired') => {
|
||||
const tabMap = {
|
||||
available: '0',
|
||||
used: '1',
|
||||
expired: '2'
|
||||
}
|
||||
handleTabChange(tabMap[type])
|
||||
}
|
||||
|
||||
// 筛选条件变更
|
||||
const handleFiltersChange = (newFilters: any) => {
|
||||
setFilters(newFilters)
|
||||
reload(true).then()
|
||||
}
|
||||
|
||||
// 检查即将过期的优惠券
|
||||
const checkExpiringSoonCoupons = async () => {
|
||||
try {
|
||||
// 获取即将过期的优惠券(3天内过期)
|
||||
const res = await pageShopUserCoupon({
|
||||
page: page,
|
||||
limit: 50,
|
||||
status: 0, // 未使用
|
||||
isExpire: 0 // 未过期
|
||||
})
|
||||
|
||||
if (res && res.list) {
|
||||
const now = dayjs()
|
||||
const expiringSoon = res.list
|
||||
.map(coupon => {
|
||||
const endTime = dayjs(coupon.endTime)
|
||||
const daysLeft = endTime.diff(now, 'day')
|
||||
|
||||
return {
|
||||
id: coupon.id || 0,
|
||||
name: coupon.name || '',
|
||||
type: coupon.type || 10,
|
||||
amount: coupon.type === 10 ? coupon.reducePrice || '0' :
|
||||
coupon.type === 20 ? coupon.discount?.toString() || '0' : '0',
|
||||
minAmount: coupon.minPrice,
|
||||
endTime: coupon.endTime || '',
|
||||
daysLeft
|
||||
}
|
||||
})
|
||||
.filter(coupon => coupon.daysLeft >= 0 && coupon.daysLeft <= 3)
|
||||
.sort((a, b) => a.daysLeft - b.daysLeft)
|
||||
|
||||
if (expiringSoon.length > 0) {
|
||||
// @ts-ignore
|
||||
setExpiringSoonCoupons(expiringSoon)
|
||||
// 延迟显示提醒,避免与页面加载冲突
|
||||
setTimeout(() => {
|
||||
setShowExpireNotice(true)
|
||||
}, 1000)
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('检查即将过期优惠券失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 使用即将过期的优惠券
|
||||
const handleUseExpiringSoonCoupon = (coupon: ExpiringSoon) => {
|
||||
console.log(coupon, '使用即将过期优惠券')
|
||||
setShowExpireNotice(false)
|
||||
// 跳转到商品页面
|
||||
Taro.navigateTo({
|
||||
url: '/pages/index/index'
|
||||
})
|
||||
}
|
||||
|
||||
// 加载更多
|
||||
const loadMore = async () => {
|
||||
if (!loading && hasMore) {
|
||||
await reload(false) // 不刷新,追加数据
|
||||
}
|
||||
}
|
||||
|
||||
useDidShow(() => {
|
||||
reload(true).then()
|
||||
loadCouponStats().then()
|
||||
// 只在可用优惠券tab时检查即将过期的优惠券
|
||||
if (activeTab === '0') {
|
||||
checkExpiringSoonCoupons().then()
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<ConfigProvider>
|
||||
{/* 搜索栏和领取入口 */}
|
||||
<View className="bg-white px-4 py-3 hidden">
|
||||
<View className="flex items-center gap-3">
|
||||
<View className="flex-1">
|
||||
<SearchBar
|
||||
placeholder="搜索"
|
||||
value={searchValue}
|
||||
onChange={setSearchValue}
|
||||
onSearch={handleSearch}
|
||||
/>
|
||||
</View>
|
||||
<Button
|
||||
size="small"
|
||||
type="primary"
|
||||
icon={<Plus/>}
|
||||
onClick={() => Taro.navigateTo({url: '/user/coupon/receive'})}
|
||||
>
|
||||
领取
|
||||
</Button>
|
||||
<Button
|
||||
size="small"
|
||||
fill="outline"
|
||||
icon={<Filter/>}
|
||||
onClick={() => setShowFilter(true)}
|
||||
>
|
||||
筛选
|
||||
</Button>
|
||||
<Button
|
||||
size="small"
|
||||
fill="outline"
|
||||
onClick={() => setShowGuide(true)}
|
||||
>
|
||||
帮助
|
||||
</Button>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 优惠券统计 */}
|
||||
<CouponStats
|
||||
availableCount={stats.available}
|
||||
usedCount={stats.used}
|
||||
expiredCount={stats.expired}
|
||||
onStatsClick={handleStatsClick}
|
||||
/>
|
||||
|
||||
{/* Tab切换 */}
|
||||
<View className="bg-white">
|
||||
<Tabs value={activeTab} onChange={handleTabChange}>
|
||||
<TabPane title="可用" value="0"/>
|
||||
<TabPane title="已使用" value="1"/>
|
||||
<TabPane title="已过期" value="2"/>
|
||||
</Tabs>
|
||||
</View>
|
||||
|
||||
{/* 优惠券列表 */}
|
||||
<PullToRefresh
|
||||
onRefresh={handleRefresh}
|
||||
headHeight={60}
|
||||
>
|
||||
<View style={{height: 'calc(100vh - 200px)', overflowY: 'auto'}} id="coupon-scroll">
|
||||
{list.length === 0 && !loading ? (
|
||||
<View className="flex flex-col justify-center items-center" style={{height: 'calc(100vh - 300px)'}}>
|
||||
<Empty
|
||||
description={
|
||||
activeTab === '0' ? "暂无可用优惠券" :
|
||||
activeTab === '1' ? "暂无已使用优惠券" :
|
||||
"暂无已过期优惠券"
|
||||
}
|
||||
style={{backgroundColor: 'transparent'}}
|
||||
/>
|
||||
</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(transformCouponDataWithAction)}
|
||||
onCouponClick={handleCouponClick}
|
||||
showEmpty={false}
|
||||
/>
|
||||
</InfiniteLoading>
|
||||
)}
|
||||
</View>
|
||||
</PullToRefresh>
|
||||
|
||||
{/* 使用指南弹窗 */}
|
||||
<CouponGuide
|
||||
visible={showGuide}
|
||||
onClose={() => setShowGuide(false)}
|
||||
/>
|
||||
|
||||
{/*/!* 筛选弹窗 *!/*/}
|
||||
<CouponFilter
|
||||
visible={showFilter}
|
||||
filters={filters}
|
||||
onFiltersChange={handleFiltersChange}
|
||||
onClose={() => setShowFilter(false)}
|
||||
/>
|
||||
|
||||
{/*/!* 到期提醒弹窗 *!/*/}
|
||||
<CouponExpireNotice
|
||||
visible={showExpireNotice}
|
||||
expiringSoonCoupons={expiringSoonCoupons}
|
||||
onClose={() => setShowExpireNotice(false)}
|
||||
onUseCoupon={handleUseExpiringSoonCoupon}
|
||||
/>
|
||||
</ConfigProvider>
|
||||
);
|
||||
|
||||
};
|
||||
|
||||
export default CouponManage;
|
||||
5
src/user/coupon/receive.config.ts
Normal file
5
src/user/coupon/receive.config.ts
Normal file
@@ -0,0 +1,5 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '领取优惠券',
|
||||
navigationBarTextStyle: 'black',
|
||||
navigationBarBackgroundColor: '#ffffff'
|
||||
})
|
||||
247
src/user/coupon/receive.tsx
Normal file
247
src/user/coupon/receive.tsx
Normal file
@@ -0,0 +1,247 @@
|
||||
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 (_coupon: 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 = (_coupon: 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;
|
||||
4
src/user/gift/add.config.ts
Normal file
4
src/user/gift/add.config.ts
Normal file
@@ -0,0 +1,4 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '新增收货地址',
|
||||
navigationBarTextStyle: 'black'
|
||||
})
|
||||
323
src/user/gift/add.tsx
Normal file
323
src/user/gift/add.tsx
Normal file
@@ -0,0 +1,323 @@
|
||||
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
Normal file
5
src/user/gift/detail.config.ts
Normal file
@@ -0,0 +1,5 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '礼品卡详情',
|
||||
navigationBarTextStyle: 'black',
|
||||
navigationBarBackgroundColor: '#ffffff'
|
||||
})
|
||||
335
src/user/gift/detail.tsx
Normal file
335
src/user/gift/detail.tsx
Normal file
@@ -0,0 +1,335 @@
|
||||
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
Normal file
5
src/user/gift/index.config.ts
Normal file
@@ -0,0 +1,5 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '我的礼品卡',
|
||||
navigationBarTextStyle: 'black',
|
||||
navigationBarBackgroundColor: '#ffffff'
|
||||
})
|
||||
483
src/user/gift/index.tsx
Normal file
483
src/user/gift/index.tsx
Normal file
@@ -0,0 +1,483 @@
|
||||
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, Board, 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
Normal file
5
src/user/gift/receive.config.ts
Normal file
@@ -0,0 +1,5 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '领取优惠券',
|
||||
navigationBarTextStyle: 'black',
|
||||
navigationBarBackgroundColor: '#ffffff'
|
||||
})
|
||||
247
src/user/gift/receive.tsx
Normal file
247
src/user/gift/receive.tsx
Normal file
@@ -0,0 +1,247 @@
|
||||
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
Normal file
5
src/user/gift/redeem.config.ts
Normal file
@@ -0,0 +1,5 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '兑换礼品卡',
|
||||
navigationBarTextStyle: 'black',
|
||||
navigationBarBackgroundColor: '#ffffff'
|
||||
})
|
||||
278
src/user/gift/redeem.tsx
Normal file
278
src/user/gift/redeem.tsx
Normal file
@@ -0,0 +1,278 @@
|
||||
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
Normal file
6
src/user/gift/use.config.ts
Normal file
@@ -0,0 +1,6 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '使用礼品卡',
|
||||
navigationBarTextStyle: 'black',
|
||||
navigationBarBackgroundColor: '#ffffff',
|
||||
navigationStyle: 'custom'
|
||||
})
|
||||
290
src/user/gift/use.tsx
Normal file
290
src/user/gift/use.tsx
Normal file
@@ -0,0 +1,290 @@
|
||||
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;
|
||||
4
src/user/help/index.config.ts
Normal file
4
src/user/help/index.config.ts
Normal file
@@ -0,0 +1,4 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '常见问题',
|
||||
navigationBarTextStyle: 'black'
|
||||
})
|
||||
3
src/user/help/index.scss
Normal file
3
src/user/help/index.scss
Normal file
@@ -0,0 +1,3 @@
|
||||
:root {
|
||||
|
||||
}
|
||||
61
src/user/help/index.tsx
Normal file
61
src/user/help/index.tsx
Normal file
@@ -0,0 +1,61 @@
|
||||
import {useEffect, useState} from "react";
|
||||
import {CmsArticle} from "@/api/cms/cmsArticle/model";
|
||||
import {listCmsArticle} from "@/api/cms/cmsArticle";
|
||||
import {Collapse, Image, SearchBar} from '@nutui/nutui-react-taro'
|
||||
import {ArrowDown} from '@nutui/icons-react-taro'
|
||||
import {CmsNavigation} from "@/api/cms/cmsNavigation/model";
|
||||
import {listCmsNavigation} from "@/api/cms/cmsNavigation";
|
||||
|
||||
|
||||
const Helper = () => {
|
||||
const [list, setList] = useState<CmsArticle[]>([])
|
||||
const [navigation, setNavigation] = useState<CmsNavigation>()
|
||||
|
||||
const reload = async () => {
|
||||
const navs = await listCmsNavigation({model: 'help', parentId: 0});
|
||||
if (navs.length > 0) {
|
||||
const nav = navs[0];
|
||||
setNavigation(nav);
|
||||
}
|
||||
listCmsArticle({model: 'help'}).then(res => {
|
||||
setList(res)
|
||||
}).catch(error => {
|
||||
console.error("Failed to fetch goods detail:", error);
|
||||
})
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
reload().then()
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<SearchBar shape="round" className={'mt-2'} />
|
||||
{navigation && (
|
||||
<Image
|
||||
src={navigation.icon}
|
||||
mode={'scaleToFill'}
|
||||
className={'mt-2 mb-4 w-full'}
|
||||
height={120}
|
||||
lazyLoad={false}
|
||||
/>
|
||||
)}
|
||||
{list.map((item, index) => (
|
||||
<Collapse defaultActiveName={['1', '2']} expandIcon={<ArrowDown/>}>
|
||||
<Collapse.Item
|
||||
title={
|
||||
<div className={'flex items-center'}>
|
||||
<div className={'text-sm'}>{item.title}</div>
|
||||
</div>
|
||||
}
|
||||
name={`${index}`}
|
||||
>
|
||||
<div className={'text-sm'}>{item.comments}</div>
|
||||
</Collapse.Item>
|
||||
</Collapse>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Helper;
|
||||
533
src/user/order/components/OrderList.tsx
Normal file
533
src/user/order/components/OrderList.tsx
Normal file
@@ -0,0 +1,533 @@
|
||||
import {Avatar, Cell, Space, Empty, Tabs, Button, TabPane, Image} from '@nutui/nutui-react-taro'
|
||||
import {useEffect, useState, CSSProperties} from "react";
|
||||
import {View, Text} from '@tarojs/components'
|
||||
import Taro from '@tarojs/taro';
|
||||
import {InfiniteLoading} from '@nutui/nutui-react-taro'
|
||||
import dayjs from "dayjs";
|
||||
import {pageShopOrder, updateShopOrder} from "@/api/shop/shopOrder";
|
||||
import {ShopOrder, ShopOrderParam} from "@/api/shop/shopOrder/model";
|
||||
import {listShopOrderGoods} from "@/api/shop/shopOrderGoods";
|
||||
import {ShopOrderGoods} from "@/api/shop/shopOrderGoods/model";
|
||||
import {copyText} from "@/utils/common";
|
||||
import PaymentCountdown from "@/components/PaymentCountdown";
|
||||
|
||||
// 判断订单是否支付已过期
|
||||
const isPaymentExpired = (createTime: string, timeoutHours: number = 24): boolean => {
|
||||
if (!createTime) return false;
|
||||
const createTimeObj = dayjs(createTime);
|
||||
const expireTime = createTimeObj.add(timeoutHours, 'hour');
|
||||
const now = dayjs();
|
||||
return now.isAfter(expireTime);
|
||||
};
|
||||
|
||||
const getInfiniteUlStyle = (showSearch: boolean = false): CSSProperties => ({
|
||||
marginTop: showSearch ? '0' : '0', // 如果显示搜索框,增加更多的上边距
|
||||
height: showSearch ? '75vh' : '84vh', // 相应调整高度
|
||||
width: '100%',
|
||||
padding: '0',
|
||||
overflowY: 'auto',
|
||||
overflowX: 'hidden'
|
||||
// 注意:小程序不支持 boxShadow
|
||||
})
|
||||
|
||||
// 统一的订单状态标签配置,与后端 statusFilter 保持一致
|
||||
const tabs = [
|
||||
{
|
||||
index: 0,
|
||||
key: '全部',
|
||||
title: '全部',
|
||||
description: '所有订单',
|
||||
statusFilter: -1 // 使用-1表示全部订单
|
||||
},
|
||||
{
|
||||
index: 1,
|
||||
key: '待付款',
|
||||
title: '待付款',
|
||||
description: '等待付款的订单',
|
||||
statusFilter: 0 // 对应后端:pay_status = false
|
||||
},
|
||||
{
|
||||
index: 2,
|
||||
key: '待发货',
|
||||
title: '待发货',
|
||||
description: '已付款待发货的订单',
|
||||
statusFilter: 1 // 对应后端:pay_status = true AND delivery_status = 10
|
||||
},
|
||||
{
|
||||
index: 3,
|
||||
key: '待收货',
|
||||
title: '待收货',
|
||||
description: '已发货待收货的订单',
|
||||
statusFilter: 3 // 对应后端:pay_status = true AND delivery_status = 20
|
||||
},
|
||||
{
|
||||
index: 4,
|
||||
key: '已完成',
|
||||
title: '已完成',
|
||||
description: '已完成的订单',
|
||||
statusFilter: 5 // 对应后端:order_status = 1
|
||||
},
|
||||
{
|
||||
index: 5,
|
||||
key: '退货/售后',
|
||||
title: '退货/售后',
|
||||
description: '退货/售后的订单',
|
||||
statusFilter: 6 // 对应后端:order_status = 6 (已退款)
|
||||
}
|
||||
]
|
||||
|
||||
// 扩展订单接口,包含商品信息
|
||||
interface OrderWithGoods extends ShopOrder {
|
||||
orderGoods?: ShopOrderGoods[];
|
||||
}
|
||||
|
||||
interface OrderListProps {
|
||||
onReload?: () => void;
|
||||
searchParams?: ShopOrderParam;
|
||||
showSearch?: boolean;
|
||||
}
|
||||
|
||||
function OrderList(props: OrderListProps) {
|
||||
const [list, setList] = useState<OrderWithGoods[]>([])
|
||||
const [page, setPage] = useState(1)
|
||||
const [hasMore, setHasMore] = useState(true)
|
||||
// 根据传入的statusFilter设置初始tab索引
|
||||
const getInitialTabIndex = () => {
|
||||
if (props.searchParams?.statusFilter !== undefined) {
|
||||
const tab = tabs.find(t => t.statusFilter === props.searchParams?.statusFilter);
|
||||
return tab ? tab.index : 0;
|
||||
}
|
||||
return 0;
|
||||
};
|
||||
const [tapIndex, setTapIndex] = useState<string | number>(() => {
|
||||
const initialIndex = getInitialTabIndex();
|
||||
console.log('初始化tapIndex:', initialIndex, '对应statusFilter:', props.searchParams?.statusFilter);
|
||||
return initialIndex;
|
||||
})
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
// 获取订单状态文本
|
||||
const getOrderStatusText = (order: ShopOrder) => {
|
||||
|
||||
// 优先检查订单状态
|
||||
if (order.orderStatus === 2) return '已取消';
|
||||
if (order.orderStatus === 4) return '退款申请中';
|
||||
if (order.orderStatus === 5) return '退款被拒绝';
|
||||
if (order.orderStatus === 6) return '退款成功';
|
||||
if (order.orderStatus === 7) return '客户端申请退款';
|
||||
|
||||
// 检查支付状态 (payStatus为boolean类型,false/0表示未付款,true/1表示已付款)
|
||||
if (!order.payStatus) return '等待买家付款';
|
||||
|
||||
// 已付款后检查发货状态
|
||||
if (order.deliveryStatus === 10) return '待发货';
|
||||
if (order.deliveryStatus === 20) return '待收货';
|
||||
if (order.deliveryStatus === 30) return '已完成';
|
||||
|
||||
// 最后检查订单完成状态
|
||||
if (order.orderStatus === 1) return '已完成';
|
||||
if (order.orderStatus === 0) return '未使用';
|
||||
|
||||
return '未知状态';
|
||||
};
|
||||
|
||||
// 获取订单状态颜色
|
||||
const getOrderStatusColor = (order: ShopOrder) => {
|
||||
// 优先检查订单状态
|
||||
if (order.orderStatus === 2) return 'text-gray-500'; // 已取消
|
||||
if (order.orderStatus === 4) return 'text-orange-500'; // 退款申请中
|
||||
if (order.orderStatus === 5) return 'text-red-500'; // 退款被拒绝
|
||||
if (order.orderStatus === 6) return 'text-green-500'; // 退款成功
|
||||
if (order.orderStatus === 7) return 'text-orange-500'; // 客户端申请退款
|
||||
|
||||
// 检查支付状态
|
||||
if (!order.payStatus) return 'text-orange-500'; // 等待买家付款
|
||||
|
||||
// 已付款后检查发货状态
|
||||
if (order.deliveryStatus === 10) return 'text-blue-500'; // 待发货
|
||||
if (order.deliveryStatus === 20) return 'text-purple-500'; // 待收货
|
||||
if (order.deliveryStatus === 30) return 'text-green-500'; // 已收货
|
||||
|
||||
// 最后检查订单完成状态
|
||||
if (order.orderStatus === 1) return 'text-green-600'; // 已完成
|
||||
if (order.orderStatus === 0) return 'text-gray-500'; // 未使用
|
||||
|
||||
return 'text-gray-600'; // 默认颜色
|
||||
};
|
||||
|
||||
// 使用后端统一的 statusFilter 进行筛选
|
||||
const getOrderStatusParams = (index: string | number) => {
|
||||
let params: ShopOrderParam = {};
|
||||
// 添加用户ID过滤
|
||||
params.userId = Taro.getStorageSync('UserId');
|
||||
|
||||
// 获取当前tab的statusFilter配置
|
||||
const currentTab = tabs.find(tab => tab.index === Number(index));
|
||||
if (currentTab && currentTab.statusFilter !== undefined) {
|
||||
params.statusFilter = currentTab.statusFilter;
|
||||
}
|
||||
// 注意:当statusFilter为undefined时,不要添加到params中,这样API请求就不会包含这个参数
|
||||
|
||||
console.log(`Tab ${index} (${currentTab?.title}) 筛选参数:`, params);
|
||||
return params;
|
||||
};
|
||||
|
||||
const reload = async (resetPage = false, targetPage?: number) => {
|
||||
setLoading(true);
|
||||
setError(null); // 清除之前的错误
|
||||
const currentPage = resetPage ? 1 : (targetPage || page);
|
||||
const statusParams = getOrderStatusParams(tapIndex);
|
||||
// 合并搜索条件,tab的statusFilter优先级更高
|
||||
const searchConditions: any = {
|
||||
page: currentPage,
|
||||
userId: statusParams.userId, // 用户ID
|
||||
...props.searchParams, // 搜索关键词等其他条件
|
||||
};
|
||||
|
||||
// statusFilter总是添加到搜索条件中(包括-1表示全部)
|
||||
if (statusParams.statusFilter !== undefined) {
|
||||
searchConditions.statusFilter = statusParams.statusFilter;
|
||||
}
|
||||
console.log('订单筛选条件:', {
|
||||
tapIndex,
|
||||
statusParams,
|
||||
searchConditions,
|
||||
finalStatusFilter: searchConditions.statusFilter
|
||||
});
|
||||
|
||||
try {
|
||||
const res = await pageShopOrder(searchConditions);
|
||||
let newList: OrderWithGoods[];
|
||||
|
||||
if (res?.list && res?.list.length > 0) {
|
||||
// 批量获取订单商品信息,限制并发数量
|
||||
const batchSize = 3; // 限制并发数量为3
|
||||
const ordersWithGoods: OrderWithGoods[] = [];
|
||||
|
||||
for (let i = 0; i < res.list.length; i += batchSize) {
|
||||
const batch = res.list.slice(i, i + batchSize);
|
||||
const batchResults = await Promise.all(
|
||||
batch.map(async (order) => {
|
||||
try {
|
||||
const orderGoods = await listShopOrderGoods({orderId: order.orderId});
|
||||
return {
|
||||
...order,
|
||||
orderGoods: orderGoods || []
|
||||
};
|
||||
} catch (error) {
|
||||
console.error('获取订单商品失败:', error);
|
||||
return {
|
||||
...order,
|
||||
orderGoods: []
|
||||
};
|
||||
}
|
||||
})
|
||||
);
|
||||
ordersWithGoods.push(...batchResults);
|
||||
}
|
||||
|
||||
// 合并数据
|
||||
newList = resetPage ? ordersWithGoods : list?.concat(ordersWithGoods);
|
||||
|
||||
// 正确判断是否还有更多数据
|
||||
const hasMoreData = res.list.length >= 10; // 假设每页10条数据
|
||||
setHasMore(hasMoreData);
|
||||
} else {
|
||||
newList = resetPage ? [] : list;
|
||||
setHasMore(false);
|
||||
}
|
||||
|
||||
setList(newList || []);
|
||||
setPage(currentPage);
|
||||
setLoading(false);
|
||||
} catch (error) {
|
||||
console.error('加载订单失败:', error);
|
||||
setLoading(false);
|
||||
setError('加载订单失败,请重试');
|
||||
// 添加错误提示
|
||||
Taro.showToast({
|
||||
title: '加载失败,请重试',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const reloadMore = async () => {
|
||||
if (loading || !hasMore) return; // 防止重复加载
|
||||
const nextPage = page + 1;
|
||||
setPage(nextPage);
|
||||
await reload(false, nextPage);
|
||||
};
|
||||
|
||||
// 确认收货
|
||||
const confirmReceive = async (order: ShopOrder) => {
|
||||
try {
|
||||
await updateShopOrder({
|
||||
...order,
|
||||
deliveryStatus: 30, // 已收货
|
||||
orderStatus: 1 // 已完成
|
||||
});
|
||||
Taro.showToast({
|
||||
title: '确认收货成功',
|
||||
});
|
||||
await reload(true); // 重新加载列表
|
||||
props.onReload?.(); // 通知父组件刷新
|
||||
} catch (error) {
|
||||
Taro.showToast({
|
||||
title: '确认收货失败',
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 取消订单
|
||||
const cancelOrder = async (order: ShopOrder) => {
|
||||
try {
|
||||
// 显示确认对话框
|
||||
const result = await Taro.showModal({
|
||||
title: '确认取消',
|
||||
content: '确定要取消这个订单吗?',
|
||||
confirmText: '确认取消',
|
||||
cancelText: '我再想想'
|
||||
});
|
||||
|
||||
if (!result.confirm) return;
|
||||
|
||||
// 更新订单状态为已取消,而不是删除订单
|
||||
await updateShopOrder({
|
||||
...order,
|
||||
orderStatus: 2 // 已取消
|
||||
});
|
||||
|
||||
Taro.showToast({
|
||||
title: '订单已取消',
|
||||
icon: 'success'
|
||||
});
|
||||
void reload(true); // 重新加载列表
|
||||
props.onReload?.(); // 通知父组件刷新
|
||||
} catch (error) {
|
||||
console.error('取消订单失败:', error);
|
||||
Taro.showToast({
|
||||
title: '取消订单失败',
|
||||
icon: 'error'
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
void reload(true); // 首次加载或tab切换时重置页码
|
||||
}, [tapIndex]); // 监听tapIndex变化
|
||||
|
||||
// 监听外部statusFilter变化,同步更新tab索引
|
||||
useEffect(() => {
|
||||
// 获取当前的statusFilter,如果未定义则默认为-1(全部)
|
||||
const currentStatusFilter = props.searchParams?.statusFilter !== undefined
|
||||
? props.searchParams.statusFilter
|
||||
: -1;
|
||||
|
||||
const tab = tabs.find(t => t.statusFilter === currentStatusFilter);
|
||||
const targetTabIndex = tab ? tab.index : 0;
|
||||
|
||||
console.log('外部statusFilter变化:', {
|
||||
statusFilter: currentStatusFilter,
|
||||
originalStatusFilter: props.searchParams?.statusFilter,
|
||||
currentTapIndex: tapIndex,
|
||||
targetTabIndex,
|
||||
shouldUpdate: targetTabIndex !== tapIndex
|
||||
});
|
||||
|
||||
if (targetTabIndex !== tapIndex) {
|
||||
setTapIndex(targetTabIndex);
|
||||
// 不需要调用reload,因为tapIndex变化会触发reload
|
||||
}
|
||||
}, [props.searchParams?.statusFilter]); // 监听statusFilter变化
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<Tabs
|
||||
align={'left'}
|
||||
className={'fixed left-0'}
|
||||
style={{
|
||||
zIndex: 998,
|
||||
borderBottom: '1px solid #e5e5e5'
|
||||
}}
|
||||
tabStyle={{
|
||||
backgroundColor: '#ffffff'
|
||||
// 注意:小程序不支持 boxShadow
|
||||
}}
|
||||
value={tapIndex}
|
||||
onChange={(paneKey) => {
|
||||
setTapIndex(paneKey)
|
||||
}}
|
||||
>
|
||||
{
|
||||
tabs?.map((item, _) => {
|
||||
return (
|
||||
<TabPane
|
||||
key={item.index}
|
||||
title={loading && tapIndex === item.index ? `${item.title}...` : item.title}
|
||||
></TabPane>
|
||||
)
|
||||
})
|
||||
}
|
||||
</Tabs>
|
||||
<View style={getInfiniteUlStyle(props.showSearch)} id="scroll">
|
||||
{error ? (
|
||||
<View className="flex flex-col items-center justify-center h-64">
|
||||
<View className="text-gray-500 mb-4">{error}</View>
|
||||
<Button
|
||||
size="small"
|
||||
type="primary"
|
||||
onClick={() => reload(true)}
|
||||
>
|
||||
重新加载
|
||||
</Button>
|
||||
</View>
|
||||
) : (
|
||||
<InfiniteLoading
|
||||
target="scroll"
|
||||
hasMore={hasMore}
|
||||
onLoadMore={reloadMore}
|
||||
onScroll={() => {
|
||||
|
||||
}}
|
||||
onScrollToUpper={() => {
|
||||
|
||||
}}
|
||||
loadingText={
|
||||
<>
|
||||
加载中
|
||||
</>
|
||||
}
|
||||
loadMoreText={
|
||||
list.length === 0 ? (
|
||||
<Empty style={{backgroundColor: 'transparent'}} description="您还没有订单哦"/>
|
||||
) : (
|
||||
<View className={'h-24'}>
|
||||
没有更多了
|
||||
</View>
|
||||
)
|
||||
}
|
||||
>
|
||||
|
||||
{/* 订单列表 */}
|
||||
{list.length > 0 && list
|
||||
?.filter((item) => {
|
||||
// 如果是待付款标签页(tapIndex === 0),过滤掉支付已过期的订单
|
||||
if (tapIndex === 0 && !item.payStatus && item.orderStatus !== 2 && item.createTime) {
|
||||
return !isPaymentExpired(item.createTime);
|
||||
}
|
||||
return true;
|
||||
})
|
||||
?.map((item, index) => {
|
||||
return (
|
||||
<Cell key={index} style={{padding: '16px'}}
|
||||
onClick={() => Taro.navigateTo({url: `/shop/orderDetail/index?orderId=${item.orderId}`})}>
|
||||
<Space direction={'vertical'} className={'w-full flex flex-col'}>
|
||||
<View className={'order-no flex justify-between'}>
|
||||
<View className={'flex items-center'}>
|
||||
<Text className={'text-gray-600 font-bold text-sm'}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
copyText(`${item.orderNo}`)
|
||||
}}>{item.orderNo}</Text>
|
||||
</View>
|
||||
{/* 右侧显示合并的状态和倒计时 */}
|
||||
<View className={`${getOrderStatusColor(item)} font-medium`}>
|
||||
{!item.payStatus && item.orderStatus !== 2 ? (
|
||||
<PaymentCountdown
|
||||
createTime={item.createTime}
|
||||
payStatus={item.payStatus}
|
||||
realTime={false}
|
||||
showSeconds={false}
|
||||
mode={'badge'}
|
||||
/>
|
||||
) : (
|
||||
getOrderStatusText(item)
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
<View
|
||||
className={'create-time text-gray-400 text-xs'}>{dayjs(item.createTime).format('YYYY年MM月DD日 HH:mm:ss')}</View>
|
||||
|
||||
{/* 商品信息 */}
|
||||
<View className={'goods-info'}>
|
||||
{item.orderGoods && item.orderGoods.length > 0 ? (
|
||||
item.orderGoods.map((goods, goodsIndex) => (
|
||||
<View key={goodsIndex} className={'flex items-center mb-2'}>
|
||||
<Image
|
||||
src={goods.image || '/default-goods.png'}
|
||||
width="50"
|
||||
height="50"
|
||||
lazyLoad={false}
|
||||
className={'rounded'}
|
||||
/>
|
||||
<View className={'ml-2 flex flex-col flex-1'}>
|
||||
<Text className={'text-sm font-bold'}>{goods.goodsName}</Text>
|
||||
{goods.spec && <Text className={'text-gray-500 text-xs'}>规格:{goods.spec}</Text>}
|
||||
<Text className={'text-gray-500 text-xs'}>数量:{goods.totalNum}</Text>
|
||||
</View>
|
||||
<Text className={'text-sm'}>¥{goods.price}</Text>
|
||||
</View>
|
||||
))
|
||||
) : (
|
||||
<View className={'flex items-center'}>
|
||||
<Avatar
|
||||
src='/default-goods.png'
|
||||
size={'50'}
|
||||
shape={'square'}
|
||||
/>
|
||||
<View className={'ml-2'}>
|
||||
<Text className={'text-sm'}>{item.title || '订单商品'}</Text>
|
||||
<Text className={'text-gray-400 text-xs'}>{item.totalNum}件商品</Text>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
|
||||
<Text className={'w-full text-right'}>实付金额:¥{item.payPrice}</Text>
|
||||
|
||||
{/* 操作按钮 */}
|
||||
<Space className={'btn flex justify-end'}>
|
||||
{/* 待付款状态:显示取消订单和立即支付 */}
|
||||
{(!item.payStatus) && item.orderStatus !== 2 && (
|
||||
<Space>
|
||||
<Button size={'small'} onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
void cancelOrder(item);
|
||||
}}>取消订单</Button>
|
||||
<Button size={'small'} type="primary" onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
console.log('立即支付')
|
||||
}}>立即支付</Button>
|
||||
</Space>
|
||||
)}
|
||||
{/* 待收货状态:显示确认收货 */}
|
||||
{item.deliveryStatus === 20 && (
|
||||
<Button size={'small'} type="primary" onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
void confirmReceive(item);
|
||||
}}>确认收货</Button>
|
||||
)}
|
||||
{/* 已完成状态:显示申请退款 */}
|
||||
{item.orderStatus === 1 && (
|
||||
<Button size={'small'} onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
console.log('申请退款')
|
||||
}}>申请退款</Button>
|
||||
)}
|
||||
{/* 退款相关状态的按钮可以在这里添加 */}
|
||||
</Space>
|
||||
</Space>
|
||||
</Cell>
|
||||
)
|
||||
})}
|
||||
</InfiniteLoading>
|
||||
)}
|
||||
</View>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default OrderList
|
||||
4
src/user/order/order.config.ts
Normal file
4
src/user/order/order.config.ts
Normal file
@@ -0,0 +1,4 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '订单列表',
|
||||
navigationStyle: 'custom'
|
||||
})
|
||||
72
src/user/order/order.scss
Normal file
72
src/user/order/order.scss
Normal file
@@ -0,0 +1,72 @@
|
||||
page {
|
||||
background: linear-gradient(to bottom, #f3f3f3, #f9fafb);
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
.search-container {
|
||||
transition: all 0.3s ease;
|
||||
|
||||
.nut-input {
|
||||
background-color: #f8f9fa !important;
|
||||
border: 1px solid #e5e5e5 !important;
|
||||
border-radius: 4px !important;
|
||||
|
||||
&:focus {
|
||||
border-color: #007bff !important;
|
||||
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.nut-button {
|
||||
border-radius: 4px !important;
|
||||
|
||||
&--primary {
|
||||
background: linear-gradient(135deg, #007bff, #0056b3) !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
&--small {
|
||||
padding: 6px 12px !important;
|
||||
font-size: 12px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Tabs样式优化
|
||||
.nut-tabs {
|
||||
.nut-tabs__titles {
|
||||
background: #ffffff !important;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
|
||||
|
||||
.nut-tabs__titles-item {
|
||||
font-size: 14px !important;
|
||||
font-weight: 500 !important;
|
||||
|
||||
&--active {
|
||||
color: #007bff !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.nut-tabs__line {
|
||||
background: #007bff !important;
|
||||
height: 3px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 筛选提示样式
|
||||
.filter-tip {
|
||||
animation: slideDown 0.3s ease;
|
||||
}
|
||||
|
||||
@keyframes slideDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
161
src/user/order/order.tsx
Normal file
161
src/user/order/order.tsx
Normal file
@@ -0,0 +1,161 @@
|
||||
import {useState, useCallback, useRef, useEffect} from "react";
|
||||
import Taro from '@tarojs/taro'
|
||||
import {Space, NavBar, Button, Input} from '@nutui/nutui-react-taro'
|
||||
import {Search, Filter, ArrowLeft} from '@nutui/icons-react-taro'
|
||||
import {View} from '@tarojs/components';
|
||||
import OrderList from "./components/OrderList";
|
||||
import {useRouter} from '@tarojs/taro'
|
||||
import {ShopOrderParam} from "@/api/shop/shopOrder/model";
|
||||
import './order.scss'
|
||||
|
||||
function Order() {
|
||||
const {params} = useRouter();
|
||||
const [statusBarHeight, setStatusBarHeight] = useState<number>(0) // 默认值为0
|
||||
const [searchParams, setSearchParams] = useState<ShopOrderParam>({
|
||||
statusFilter: params.statusFilter != undefined && params.statusFilter != '' ? parseInt(params.statusFilter) : -1
|
||||
})
|
||||
const [showSearch, setShowSearch] = useState(false)
|
||||
const [searchKeyword, setSearchKeyword] = useState('')
|
||||
const searchTimeoutRef = useRef<NodeJS.Timeout>()
|
||||
|
||||
const reload = async (where?: ShopOrderParam) => {
|
||||
console.log(where,'where...')
|
||||
setSearchParams(prev => ({ ...prev, ...where }))
|
||||
}
|
||||
|
||||
// 防抖搜索函数
|
||||
const debouncedSearch = useCallback((keyword: string) => {
|
||||
if (searchTimeoutRef.current) {
|
||||
clearTimeout(searchTimeoutRef.current);
|
||||
}
|
||||
|
||||
searchTimeoutRef.current = setTimeout(() => {
|
||||
if (keyword.trim()) {
|
||||
handleSearch({keywords: keyword.trim()});
|
||||
} else {
|
||||
// 如果搜索关键词为空,清除keywords参数
|
||||
const newSearchParams = { ...searchParams };
|
||||
delete newSearchParams.keywords;
|
||||
setSearchParams(newSearchParams);
|
||||
reload(newSearchParams).then();
|
||||
}
|
||||
}, 500); // 500ms防抖延迟
|
||||
}, [searchParams]);
|
||||
|
||||
// 处理搜索
|
||||
const handleSearch = (where: ShopOrderParam) => {
|
||||
// 合并搜索参数,保留当前的statusFilter
|
||||
const newSearchParams = {
|
||||
...searchParams, // 保留当前的所有参数(包括statusFilter)
|
||||
...where // 应用新的搜索条件
|
||||
};
|
||||
setSearchParams(newSearchParams)
|
||||
reload(newSearchParams).then()
|
||||
}
|
||||
useEffect(() => {
|
||||
// 获取状态栏高度
|
||||
Taro.getSystemInfo({
|
||||
success: (res) => {
|
||||
setStatusBarHeight(res.statusBarHeight ?? 0)
|
||||
},
|
||||
})
|
||||
// 设置导航栏标题
|
||||
Taro.setNavigationBarTitle({
|
||||
title: '我的订单'
|
||||
});
|
||||
|
||||
Taro.setNavigationBarColor({
|
||||
backgroundColor: '#ffffff',
|
||||
frontColor: '#000000',
|
||||
});
|
||||
|
||||
reload().then()
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<View className="bg-gray-50 min-h-screen">
|
||||
<View style={{height: `${statusBarHeight || 0}px`, backgroundColor: '#ffffff'}}></View>
|
||||
<NavBar
|
||||
fixed={true}
|
||||
style={{marginTop: `${statusBarHeight || 0}px`, backgroundColor: '#ffffff'}}
|
||||
left={
|
||||
<>
|
||||
<div className={'flex justify-between items-center w-full'}>
|
||||
<Space>
|
||||
<ArrowLeft onClick={() => Taro.navigateBack()}/>
|
||||
<Search
|
||||
size={18}
|
||||
className={'mx-4'}
|
||||
onClick={() => setShowSearch(!showSearch)}
|
||||
/>
|
||||
</Space>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<span>我的订单</span>
|
||||
</NavBar>
|
||||
{/* 搜索和筛选工具栏 */}
|
||||
<View className="bg-white px-4 py-3 flex justify-between items-center border-b border-gray-100">
|
||||
<View className="flex items-center">
|
||||
<Filter
|
||||
size={18}
|
||||
className="text-gray-600"
|
||||
onClick={() => setShowSearch(!showSearch)}
|
||||
/>
|
||||
<span className="ml-2 text-sm text-gray-600">筛选</span>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 搜索组件 */}
|
||||
{showSearch && (
|
||||
<View className="bg-white p-3 shadow-sm border-b border-gray-100">
|
||||
<View className="flex items-center">
|
||||
<View className="flex-1 mr-2">
|
||||
<Input
|
||||
placeholder="搜索订单号、商品名称"
|
||||
value={searchKeyword}
|
||||
onChange={(value) => {
|
||||
setSearchKeyword(value);
|
||||
debouncedSearch(value); // 使用防抖搜索
|
||||
}}
|
||||
onConfirm={() => {
|
||||
if (searchKeyword.trim()) {
|
||||
handleSearch({keywords: searchKeyword.trim()});
|
||||
}
|
||||
}}
|
||||
style={{
|
||||
padding: '8px 12px',
|
||||
border: '1px solid #e5e5e5',
|
||||
borderRadius: '4px',
|
||||
backgroundColor: '#f8f9fa'
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
<Space>
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={() => {
|
||||
if (searchKeyword.trim()) {
|
||||
handleSearch({keywords: searchKeyword.trim()});
|
||||
}
|
||||
}}
|
||||
>
|
||||
搜索
|
||||
</Button>
|
||||
</Space>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/*订单列表*/}
|
||||
<OrderList
|
||||
onReload={() => reload(searchParams)}
|
||||
searchParams={searchParams}
|
||||
showSearch={showSearch}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
export default Order;
|
||||
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'
|
||||
})
|
||||
213
src/user/points/points.tsx
Normal file
213
src/user/points/points.tsx
Normal file
@@ -0,0 +1,213 @@
|
||||
import {useState, useEffect, CSSProperties} from 'react'
|
||||
import Taro from '@tarojs/taro'
|
||||
import {Cell, InfiniteLoading, Card, Empty, ConfigProvider} from '@nutui/nutui-react-taro'
|
||||
import {pageUserPointsLog, getUserPointsStats} from "@/api/user/points";
|
||||
import {UserPointsLog as UserPointsLogType, UserPointsStats} from "@/api/user/points/model";
|
||||
import {View} from '@tarojs/components'
|
||||
|
||||
const InfiniteUlStyle: CSSProperties = {
|
||||
height: '100vh',
|
||||
width: '100%',
|
||||
padding: '0',
|
||||
overflowY: 'auto',
|
||||
overflowX: 'hidden',
|
||||
}
|
||||
|
||||
const UserPoints = () => {
|
||||
const [list, setList] = useState<UserPointsLogType[]>([])
|
||||
const [page, setPage] = useState(1)
|
||||
const [hasMore, setHasMore] = useState(true)
|
||||
const [stats, setStats] = useState<UserPointsStats>({})
|
||||
|
||||
useEffect(() => {
|
||||
reload()
|
||||
loadPointsStats()
|
||||
}, [])
|
||||
|
||||
const loadMore = async () => {
|
||||
setPage(page + 1)
|
||||
reload();
|
||||
}
|
||||
|
||||
const reload = () => {
|
||||
const userId = Taro.getStorageSync('UserId')
|
||||
if (!userId) {
|
||||
Taro.showToast({
|
||||
title: '请先登录',
|
||||
icon: 'error'
|
||||
});
|
||||
return
|
||||
}
|
||||
|
||||
pageUserPointsLog({
|
||||
userId: parseInt(userId),
|
||||
page
|
||||
}).then(res => {
|
||||
console.log(res)
|
||||
const newList = res?.list || [];
|
||||
setList([...list, ...newList])
|
||||
setHasMore(newList.length > 0)
|
||||
}).catch(error => {
|
||||
console.error('Points log error:', error)
|
||||
Taro.showToast({
|
||||
title: error?.message || '获取失败',
|
||||
icon: 'error'
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
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)
|
||||
})
|
||||
}
|
||||
|
||||
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'
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<ConfigProvider>
|
||||
<View className="bg-gray-50 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 flex-1">
|
||||
|
||||
<ul style={{...InfiniteUlStyle, height: 'calc(100vh - 200px)'}} id="scroll">
|
||||
<InfiniteLoading
|
||||
target="scroll"
|
||||
hasMore={hasMore}
|
||||
onLoadMore={loadMore}
|
||||
onScroll={() => {
|
||||
console.log('onScroll')
|
||||
}}
|
||||
onScrollToUpper={() => {
|
||||
console.log('onScrollToUpper')
|
||||
}}
|
||||
loadingText={
|
||||
<>
|
||||
加载中
|
||||
</>
|
||||
}
|
||||
loadMoreText={
|
||||
<>
|
||||
没有更多了
|
||||
</>
|
||||
}
|
||||
>
|
||||
<View className="p-4">
|
||||
{list.length === 0 ? (
|
||||
<div className={'h-full flex flex-col justify-center items-center'} style={{
|
||||
height: 'calc(100vh - 500px)',
|
||||
}}>
|
||||
<Empty
|
||||
style={{
|
||||
backgroundColor: 'transparent'
|
||||
}}
|
||||
description="您还没有积分记录"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
list.map((item, index) => (
|
||||
<Cell.Group key={`${item.logId}-${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>
|
||||
</InfiniteLoading>
|
||||
</ul>
|
||||
</View>
|
||||
</View>
|
||||
</ConfigProvider>
|
||||
);
|
||||
};
|
||||
|
||||
export default UserPoints;
|
||||
3
src/user/profile/profile.config.ts
Normal file
3
src/user/profile/profile.config.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '个人资料'
|
||||
})
|
||||
6
src/user/profile/profile.scss
Normal file
6
src/user/profile/profile.scss
Normal file
@@ -0,0 +1,6 @@
|
||||
.nut-form-item-label-left {
|
||||
padding-left: 8px !important;
|
||||
}
|
||||
.nut-form-item-label-required{
|
||||
top: 0 !important;
|
||||
}
|
||||
242
src/user/profile/profile.tsx
Normal file
242
src/user/profile/profile.tsx
Normal file
@@ -0,0 +1,242 @@
|
||||
import {Cell, Avatar} from '@nutui/nutui-react-taro';
|
||||
import {ArrowRight} from '@nutui/icons-react-taro'
|
||||
import {useEffect, useState} from "react";
|
||||
import {ConfigProvider} from '@nutui/nutui-react-taro'
|
||||
import Taro, {getCurrentInstance} from '@tarojs/taro'
|
||||
import {getUserInfo} from "@/api/layout";
|
||||
import {TenantId} from "@/config/app";
|
||||
import { TextArea } from '@nutui/nutui-react-taro'
|
||||
import './profile.scss'
|
||||
|
||||
const {router} = getCurrentInstance()
|
||||
import {
|
||||
Form,
|
||||
Button,
|
||||
Input,
|
||||
Radio,
|
||||
} from '@nutui/nutui-react-taro'
|
||||
import {DictData} from "@/api/system/dict-data/model";
|
||||
import {pageDictData} from "@/api/system/dict-data";
|
||||
import {User} from "@/api/system/user/model";
|
||||
import {useUser} from "@/hooks/useUser";
|
||||
|
||||
// 类型定义
|
||||
interface ChooseAvatarEvent {
|
||||
detail: {
|
||||
avatarUrl: string;
|
||||
};
|
||||
}
|
||||
|
||||
interface InputEvent {
|
||||
detail: {
|
||||
value: string;
|
||||
};
|
||||
}
|
||||
function Profile() {
|
||||
const formId = Number(router?.params.id)
|
||||
const {user, updateUser} = useUser()
|
||||
|
||||
const [sex, setSex] = useState<DictData[]>()
|
||||
const [FormData, setFormData] = useState<User>(
|
||||
{
|
||||
userId: undefined,
|
||||
nickname: undefined,
|
||||
realName: undefined,
|
||||
avatar: undefined,
|
||||
sex: undefined,
|
||||
phone: undefined,
|
||||
address: undefined,
|
||||
comments: undefined
|
||||
}
|
||||
)
|
||||
|
||||
const reload = () => {
|
||||
// 获取数据字典
|
||||
pageDictData({limit: 200}).then(res => {
|
||||
setSex(res?.list.filter((item) => item.dictCode === 'sex'))
|
||||
})
|
||||
// 获取用户信息
|
||||
getUserInfo().then((data) => {
|
||||
// 更新表单数据
|
||||
setFormData(data);
|
||||
})
|
||||
}
|
||||
|
||||
// 提交表单
|
||||
const submitSucceed = async (values: User) => {
|
||||
console.log(values, 'values')
|
||||
console.log(formId, 'formId>>')
|
||||
try {
|
||||
// 使用 useUser hook 的 updateUser 方法,它会自动更新状态和本地存储
|
||||
await updateUser(values)
|
||||
// 由于 useEffect 监听了 user 变化,FormData 会自动同步更新
|
||||
setTimeout(() => {
|
||||
return Taro.navigateBack()
|
||||
}, 1000)
|
||||
} catch (error) {
|
||||
// updateUser 方法已经处理了错误提示,这里不需要重复显示
|
||||
console.error('提交表单失败:', error)
|
||||
}
|
||||
}
|
||||
const submitFailed = (error: unknown) => {
|
||||
console.log(error, 'err...')
|
||||
}
|
||||
|
||||
const uploadAvatar = ({detail}: ChooseAvatarEvent) => {
|
||||
// 先更新本地显示的头像
|
||||
setFormData({
|
||||
...FormData,
|
||||
avatar: `${detail.avatarUrl}`,
|
||||
})
|
||||
|
||||
Taro.uploadFile({
|
||||
url: 'https://server.websoft.top/api/oss/upload',
|
||||
filePath: detail.avatarUrl,
|
||||
name: 'file',
|
||||
header: {
|
||||
'content-type': 'application/json',
|
||||
TenantId
|
||||
},
|
||||
success: async (res) => {
|
||||
const data = JSON.parse(res.data);
|
||||
if (data.code === 0) {
|
||||
try {
|
||||
// 使用 useUser hook 的 updateUser 方法更新头像
|
||||
await updateUser({
|
||||
avatar: `${data.data.thumbnail}`
|
||||
})
|
||||
// 由于 useEffect 监听了 user 变化,FormData 会自动同步更新
|
||||
} catch (error) {
|
||||
console.error('更新头像失败:', error)
|
||||
// 如果更新失败,恢复原来的头像
|
||||
setFormData({
|
||||
...FormData,
|
||||
avatar: user?.avatar || ''
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
fail: (error) => {
|
||||
console.error('上传头像失败:', error)
|
||||
Taro.showToast({
|
||||
title: '上传失败',
|
||||
icon: 'error'
|
||||
})
|
||||
// 恢复原来的头像
|
||||
setFormData({
|
||||
...FormData,
|
||||
avatar: user?.avatar || ''
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 获取微信昵称
|
||||
const getWxNickname = (nickname: string) => {
|
||||
// 更新表单数据
|
||||
setFormData({
|
||||
...FormData,
|
||||
nickname: nickname
|
||||
});
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
reload()
|
||||
}, []);
|
||||
|
||||
// 监听 useUser hook 中的用户信息变化,同步更新表单数据
|
||||
useEffect(() => {
|
||||
if (user) {
|
||||
setFormData(user)
|
||||
}
|
||||
}, [user]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={'p-4'}>
|
||||
<Cell.Group>
|
||||
<Cell title={'头像'} align={'center'} extra={
|
||||
<>
|
||||
<Button open-type="chooseAvatar" style={{height: '58px'}} onChooseAvatar={uploadAvatar}>
|
||||
<Avatar src={FormData?.avatar} size="54"/>
|
||||
</Button>
|
||||
<ArrowRight color="#cccccc" className={'ml-1'} size={20}/>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
<Cell title={'手机号码'} align={'center'} extra={FormData?.phone}/>
|
||||
</Cell.Group>
|
||||
<ConfigProvider>
|
||||
<Form
|
||||
divider
|
||||
initialValues={FormData}
|
||||
labelPosition="left"
|
||||
onFinish={(values) => submitSucceed(values)}
|
||||
onFinishFailed={(errors) => submitFailed(errors)}
|
||||
footer={
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
width: '100%'
|
||||
}}
|
||||
>
|
||||
<Button nativeType="submit" block type="info">
|
||||
提交
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Form.Item
|
||||
label={'昵称'}
|
||||
name="nickname"
|
||||
initialValue={FormData.nickname}
|
||||
rules={[{message: '请获取微信昵称'}]}
|
||||
>
|
||||
<Input
|
||||
type="nickname"
|
||||
className="info-content__input"
|
||||
placeholder="请输入昵称"
|
||||
value={FormData?.nickname}
|
||||
onInput={(e: InputEvent) => getWxNickname(e.detail.value)}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="性别"
|
||||
name="sex"
|
||||
initialValue={FormData.sex}
|
||||
rules={[
|
||||
{message: '请选择性别'}
|
||||
]}
|
||||
>
|
||||
<Radio.Group value={FormData?.sex} direction="horizontal">
|
||||
{
|
||||
sex?.map((item, index) => (
|
||||
<Radio key={index} value={item.dictDataCode}>
|
||||
{item.dictDataName}
|
||||
</Radio>
|
||||
))
|
||||
}
|
||||
</Radio.Group>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="备注信息"
|
||||
name="comments"
|
||||
initialValue={FormData.comments}
|
||||
rules={[{message: '备注信息'}]}
|
||||
>
|
||||
<TextArea
|
||||
placeholder={'个性签名'}
|
||||
value={FormData?.comments}
|
||||
onChange={(value) => setFormData({...FormData, comments: value})}
|
||||
/>
|
||||
<Input placeholder={'个性签名'} />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</ConfigProvider>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Profile
|
||||
3
src/user/setting/setting.config.ts
Normal file
3
src/user/setting/setting.config.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '账号设置'
|
||||
})
|
||||
50
src/user/setting/setting.tsx
Normal file
50
src/user/setting/setting.tsx
Normal file
@@ -0,0 +1,50 @@
|
||||
import {Cell} from '@nutui/nutui-react-taro';
|
||||
import {ArrowRight} from '@nutui/icons-react-taro'
|
||||
import {useEffect, useState} from "react";
|
||||
import {getUserInfo} from "@/api/layout";
|
||||
import {User} from "@/api/system/user/model";
|
||||
|
||||
function Company() {
|
||||
const [user, setUser] = useState<User>({
|
||||
mobile: '',
|
||||
nickname: '',
|
||||
phone: '',
|
||||
password: ''
|
||||
})
|
||||
|
||||
console.log(user.userId,'userId')
|
||||
const reload = () => {
|
||||
getUserInfo().then((data) => {
|
||||
setUser(data)
|
||||
})
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
reload()
|
||||
}, []);
|
||||
return (
|
||||
<div className={'p-4'}>
|
||||
{/*<div className={'px-4 py-2 text-gray-400 text-sm'}>系统设置</div>*/}
|
||||
<Cell.Group>
|
||||
<Cell title={
|
||||
<div className={'flex'}>
|
||||
<div className={'title w-16 pr-4'}>关于我们</div>
|
||||
</div>
|
||||
} align={'center'} extra={<ArrowRight color="#cccccc" size={16}/>}/>
|
||||
<Cell title={
|
||||
<div className={'flex'}>
|
||||
<div className={'title w-16 pr-4'}>隐私政策</div>
|
||||
</div>
|
||||
} align={'center'} extra={<ArrowRight color="#cccccc" size={16}/>}/>
|
||||
</Cell.Group>
|
||||
<Cell title={
|
||||
<div className={'flex'}>
|
||||
<div className={'title w-16 pr-4'}>当前版本</div>
|
||||
<div className={'extra text-gray-400'}>v1.0.32</div>
|
||||
</div>
|
||||
} align={'center'} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Company
|
||||
4
src/user/store/verification.config.ts
Normal file
4
src/user/store/verification.config.ts
Normal file
@@ -0,0 +1,4 @@
|
||||
export default {
|
||||
navigationBarTitleText: '门店核销',
|
||||
navigationBarTextStyle: 'black'
|
||||
}
|
||||
376
src/user/store/verification.tsx
Normal file
376
src/user/store/verification.tsx
Normal file
@@ -0,0 +1,376 @@
|
||||
import React, {useState} from 'react'
|
||||
import {View, Text, Image} from '@tarojs/components'
|
||||
import {Button, Input} from '@nutui/nutui-react-taro'
|
||||
import {Scan, Search} from '@nutui/icons-react-taro'
|
||||
import Taro from '@tarojs/taro'
|
||||
import dayjs from 'dayjs'
|
||||
import {getShopGiftByCode, updateShopGift, decryptQrData} from "@/api/shop/shopGift";
|
||||
import {useUser} from "@/hooks/useUser";
|
||||
import type {ShopGift} from "@/api/shop/shopGift/model";
|
||||
import {isValidJSON} from "@/utils/jsonUtils";
|
||||
|
||||
const StoreVerification: React.FC = () => {
|
||||
const {
|
||||
isAdmin
|
||||
} = useUser();
|
||||
const [scanResult, setScanResult] = useState<string>('')
|
||||
const [verificationCode, setVerificationCode] = useState<string>('')
|
||||
const [giftInfo, setGiftInfo] = useState<ShopGift | null>(null)
|
||||
const [loading, setLoading] = useState(false)
|
||||
|
||||
// 扫码功能
|
||||
const handleScan = () => {
|
||||
Taro.scanCode({
|
||||
success: (res) => {
|
||||
if (res.result) {
|
||||
console.log('扫码结果:', res.result)
|
||||
|
||||
// 判断是否为JSON格式
|
||||
if (isValidJSON(res.result)) {
|
||||
setLoading(true)
|
||||
const json = JSON.parse(res.result)
|
||||
console.log(json, 'json')
|
||||
if (json.businessType === 'gift') {
|
||||
// 调用解密接口
|
||||
handleDecryptAndVerify(json.token, json.data).then()
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('扫码失败:', err)
|
||||
Taro.showToast({
|
||||
title: '扫码失败',
|
||||
icon: 'error'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 调用解密接口
|
||||
const handleDecryptAndVerify = async (token: string, encryptedData: string) => {
|
||||
decryptQrData({token, encryptedData}).then(res => {
|
||||
const decryptedData = res;
|
||||
console.log('解密结果:', decryptedData)
|
||||
console.log('解密成功:', decryptedData)
|
||||
setScanResult(`${decryptedData}`)
|
||||
setVerificationCode(`${decryptedData}`)
|
||||
handleVerification(`${decryptedData}`)
|
||||
}).catch(() => {
|
||||
console.error('解密失败:')
|
||||
Taro.showToast({
|
||||
title: `token失效,请刷新二维码重试`,
|
||||
icon: 'none'
|
||||
})
|
||||
}).finally(() => {
|
||||
setLoading(false)
|
||||
})
|
||||
}
|
||||
|
||||
// 验证商品信息
|
||||
const handleVerification = async (code?: string) => {
|
||||
setGiftInfo(null)
|
||||
setVerificationCode(`${code}`)
|
||||
// 这里应该调用后端API验证核销码
|
||||
const gift = await getShopGiftByCode(`${code}`)
|
||||
if(gift){
|
||||
// 设置礼品信息用于显示
|
||||
setGiftInfo(gift)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// 手动输入核销码验证
|
||||
const handleManualVerification = async (code?: string) => {
|
||||
const codeToVerify = code || verificationCode.trim()
|
||||
if (!codeToVerify) {
|
||||
return false;
|
||||
}
|
||||
setLoading(true)
|
||||
try {
|
||||
// 这里应该调用后端API验证核销码
|
||||
const gift = await getShopGiftByCode(codeToVerify)
|
||||
|
||||
// 设置礼品信息用于显示
|
||||
setGiftInfo(gift)
|
||||
|
||||
if (!isAdmin()) {
|
||||
setLoading(false)
|
||||
return Taro.showToast({
|
||||
title: '您没有核销权限',
|
||||
icon: 'error'
|
||||
})
|
||||
}
|
||||
if (gift.status === 1) {
|
||||
setLoading(false)
|
||||
return Taro.showToast({
|
||||
title: '此礼品码已使用',
|
||||
icon: 'error'
|
||||
})
|
||||
}
|
||||
if (gift.status === 2) {
|
||||
setLoading(false)
|
||||
return Taro.showToast({
|
||||
title: '此礼品码已失效',
|
||||
icon: 'error'
|
||||
})
|
||||
}
|
||||
if (gift.userId === 0) {
|
||||
setLoading(false)
|
||||
return Taro.showToast({
|
||||
title: '此礼品码未认领',
|
||||
icon: 'error'
|
||||
})
|
||||
}
|
||||
|
||||
// 验证成功,设置状态
|
||||
await updateShopGift({
|
||||
...gift,
|
||||
status: 1,
|
||||
operatorUserId: Number(Taro.getStorageSync('UserId')) || 0,
|
||||
takeTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
|
||||
verificationTime: dayjs().format('YYYY-MM-DD HH:mm:ss')
|
||||
})
|
||||
Taro.showToast({
|
||||
title: '核销成功',
|
||||
icon: 'success'
|
||||
})
|
||||
// 重置状态
|
||||
setTimeout(() => {
|
||||
resetForm()
|
||||
}, 2000)
|
||||
} catch (error) {
|
||||
console.error('验证失败:', error)
|
||||
Taro.showToast({
|
||||
title: '验证失败',
|
||||
icon: 'error'
|
||||
})
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
// 重置表单
|
||||
const resetForm = () => {
|
||||
setScanResult('')
|
||||
setVerificationCode('')
|
||||
setGiftInfo(null)
|
||||
}
|
||||
|
||||
// 获取类型文本
|
||||
const getTypeText = (type: number) => {
|
||||
switch (type) {
|
||||
case 10:
|
||||
return '实物礼品卡'
|
||||
case 20:
|
||||
return '虚拟礼品卡'
|
||||
case 30:
|
||||
return '服务礼品卡'
|
||||
default:
|
||||
return '礼品卡'
|
||||
}
|
||||
}
|
||||
|
||||
// useEffect(() => {
|
||||
// handleManualVerification().then()
|
||||
// },[verificationCode])
|
||||
|
||||
return (
|
||||
<View className="bg-gray-50 min-h-screen">
|
||||
{/* 页面标题 */}
|
||||
<View className="bg-white px-4 py-3 border-b border-gray-100">
|
||||
<Text className="text-lg font-bold text-center">
|
||||
礼品卡核销
|
||||
</Text>
|
||||
<Text className="text-sm text-gray-600 text-center mt-1 px-2">
|
||||
门店工作人员核销页面
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
{/* 扫码区域 */}
|
||||
<View className="bg-white mx-4 mt-4 p-4 rounded-lg">
|
||||
<View className={'mb-3'}>
|
||||
<Text className="font-bold">扫码核销</Text>
|
||||
</View>
|
||||
<Button
|
||||
size="large"
|
||||
type="primary"
|
||||
icon={<Scan/>}
|
||||
onClick={handleScan}
|
||||
block
|
||||
>
|
||||
扫描二维码
|
||||
</Button>
|
||||
|
||||
|
||||
{/* 手动输入区域 */}
|
||||
<View className="mt-8"></View>
|
||||
<View className="font-bold mb-3">手动输入核销码</View>
|
||||
<View className="flex items-center justify-between">
|
||||
<Input
|
||||
placeholder="请输入6位核销码"
|
||||
value={verificationCode}
|
||||
onChange={setVerificationCode}
|
||||
maxLength={6}
|
||||
className="flex-1 mr-8"
|
||||
style={{
|
||||
backgroundColor: '#f3f3f3',
|
||||
borderRadius: '8px'
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<Search/>}
|
||||
loading={loading}
|
||||
onClick={() => handleVerification(verificationCode)}
|
||||
>
|
||||
验证
|
||||
</Button>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
|
||||
{/*在扫码结果显示区域添加解密状态提示*/}
|
||||
{scanResult && !giftInfo && (
|
||||
<View className="mt-4 p-4 bg-gray-50 rounded-lg">
|
||||
<Text className="text-sm text-gray-600">
|
||||
{loading ? '正在解密验证...' : '扫码结果:'}
|
||||
</Text>
|
||||
<Text className="text-xs text-gray-500 break-all mt-1">
|
||||
{scanResult}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* 商品信息展示 */}
|
||||
{giftInfo && (
|
||||
<View className="mt-4 mx-4 p-4 bg-white rounded-lg shadow-sm border border-gray-100">
|
||||
<View className="flex items-center mb-3">
|
||||
<Text className="text-lg font-semibold text-gray-800">商品信息</Text>
|
||||
<View className={`ml-2 px-2 py-1 rounded text-xs ${
|
||||
giftInfo.status === 0 ? 'bg-green-100 text-green-600' :
|
||||
giftInfo.status === 1 ? 'bg-gray-100 text-gray-600' :
|
||||
'bg-red-100 text-red-600'
|
||||
}`}>
|
||||
{giftInfo.status === 0 ? '未使用' :
|
||||
giftInfo.status === 1 ? '已使用' : '已过期'}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View className="mt-3 pt-3 border-t border-gray-100 flex justify-between">
|
||||
{/* 商品图片 */}
|
||||
{giftInfo.goodsImage && (
|
||||
<View className="w-20 h-20 mr-3 flex-shrink-0">
|
||||
<Image
|
||||
src={giftInfo.goodsImage}
|
||||
className="w-full h-full rounded-lg object-cover border border-gray-200"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* 商品详情 */}
|
||||
<View className="flex-1">
|
||||
<View className="text-base font-medium text-gray-900 mb-1">
|
||||
{giftInfo.goodsName || giftInfo.name}
|
||||
</View>
|
||||
<View className="text-sm text-gray-400">
|
||||
使用门店:{giftInfo.useLocation || '123123'}
|
||||
</View>
|
||||
{giftInfo.description && (
|
||||
<>
|
||||
<View className="text-sm text-gray-600 mb-2" style={{
|
||||
overflow: 'hidden'
|
||||
// 注意:小程序不支持 WebKit 文本截断属性
|
||||
}}>
|
||||
{giftInfo.description}
|
||||
</View>
|
||||
</>
|
||||
)}
|
||||
|
||||
<View className="flex items-center justify-between">
|
||||
<Text className="text-lg font-bold text-red-500">
|
||||
¥{giftInfo.faceValue}
|
||||
</Text>
|
||||
<Text className="text-xs text-gray-500">
|
||||
{giftInfo.type === 10 ? '实物礼品' :
|
||||
giftInfo.type === 20 ? '虚拟礼品' : '服务礼品'}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 附加信息 */}
|
||||
<View className="mt-3 pt-3 border-t border-gray-100">
|
||||
|
||||
{giftInfo.expireTime && (
|
||||
<View className="flex items-center mb-2">
|
||||
<Text className="text-sm text-gray-600">有效期至:</Text>
|
||||
<Text className="text-sm text-gray-800">
|
||||
{dayjs(giftInfo.expireTime).format('YYYY-MM-DD HH:mm')}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{giftInfo.contactInfo && (
|
||||
<View className="flex items-center">
|
||||
<Text className="text-sm text-gray-600">客服电话:</Text>
|
||||
<Text className="text-sm text-blue-600">{giftInfo.contactInfo}</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
<View className="flex justify-between mb-3">
|
||||
<Text className="text-gray-600">类型</Text>
|
||||
<Text>{getTypeText(giftInfo.type as number)}</Text>
|
||||
</View>
|
||||
|
||||
<View className="flex justify-between mb-3">
|
||||
<Text className="text-gray-600">兑换码</Text>
|
||||
<Text className="font-mono text-sm">{giftInfo.code}</Text>
|
||||
</View>
|
||||
|
||||
{giftInfo.operatorUserName && (
|
||||
<View className="flex justify-between mb-3">
|
||||
<Text className="text-gray-600">核销人员</Text>
|
||||
<Text className="font-mono text-sm">{giftInfo.operatorUserName}</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{giftInfo.takeTime && (
|
||||
<View className="flex justify-between mb-3">
|
||||
<Text className="text-gray-600">核销时间</Text>
|
||||
<Text className="font-mono text-sm">{giftInfo.takeTime}</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{giftInfo && giftInfo.status === 0 && (
|
||||
<Button
|
||||
size="large"
|
||||
type="info"
|
||||
loading={loading}
|
||||
onClick={() => handleManualVerification()}
|
||||
block
|
||||
>
|
||||
确认核销
|
||||
</Button>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* 使用说明 */}
|
||||
<View className="bg-blue-50 mx-4 my-4 p-4 rounded-lg">
|
||||
<Text className="font-bold mb-2 text-gray-500">操作说明:</Text>
|
||||
<View>
|
||||
<Text className="text-sm text-gray-500 mb-1">1. 用户出示礼品卡二维码</Text>
|
||||
<Text className="text-sm text-gray-500 mb-1">2. 点击"扫描二维码"进行扫码</Text>
|
||||
<Text className="text-sm text-gray-500 mb-1">3. 或手动输入用户提供的核销码</Text>
|
||||
<Text className="text-sm text-gray-500">4. 验证成功后点击"确认核销"完成</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View className={'h-10'}></View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export default StoreVerification
|
||||
4
src/user/theme/index.config.ts
Normal file
4
src/user/theme/index.config.ts
Normal file
@@ -0,0 +1,4 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '主题设置',
|
||||
navigationBarTextStyle: 'black'
|
||||
})
|
||||
179
src/user/theme/index.tsx
Normal file
179
src/user/theme/index.tsx
Normal file
@@ -0,0 +1,179 @@
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { View, Text } from '@tarojs/components'
|
||||
import { Cell, CellGroup, Radio } from '@nutui/nutui-react-taro'
|
||||
import { gradientThemes, GradientTheme, gradientUtils } from '@/styles/gradients'
|
||||
import Taro from '@tarojs/taro'
|
||||
import FixedButton from "@/components/FixedButton";
|
||||
|
||||
const ThemeSelector: React.FC = () => {
|
||||
const [selectedTheme, setSelectedTheme] = useState<string>('')
|
||||
const [currentTheme, setCurrentTheme] = useState<GradientTheme | null>(null)
|
||||
|
||||
// 获取当前主题
|
||||
useEffect(() => {
|
||||
const savedTheme = Taro.getStorageSync('user_theme') || 'auto'
|
||||
setSelectedTheme(savedTheme)
|
||||
|
||||
if (savedTheme === 'auto') {
|
||||
// 自动主题:根据用户ID生成
|
||||
const userId = Taro.getStorageSync('userId') || '1'
|
||||
const theme = gradientUtils.getThemeByUserId(userId)
|
||||
setCurrentTheme(theme)
|
||||
} else {
|
||||
// 手动选择的主题
|
||||
const theme = gradientThemes.find(t => t.name === savedTheme)
|
||||
setCurrentTheme(theme || gradientThemes[0])
|
||||
}
|
||||
}, [])
|
||||
|
||||
// 保存主题设置
|
||||
const saveTheme = (themeName: string) => {
|
||||
try {
|
||||
Taro.setStorageSync('user_theme', themeName)
|
||||
setSelectedTheme(themeName)
|
||||
|
||||
if (themeName === 'auto') {
|
||||
const userId = Taro.getStorageSync('userId') || '1'
|
||||
const theme = gradientUtils.getThemeByUserId(userId)
|
||||
setCurrentTheme(theme)
|
||||
} else {
|
||||
const theme = gradientThemes.find(t => t.name === themeName)
|
||||
setCurrentTheme(theme || gradientThemes[0])
|
||||
}
|
||||
|
||||
Taro.showToast({
|
||||
title: '主题已保存',
|
||||
icon: 'success',
|
||||
})
|
||||
|
||||
// 延迟返回,让用户看到效果
|
||||
setTimeout(() => {
|
||||
Taro.navigateBack()
|
||||
}, 1000)
|
||||
} catch (error) {
|
||||
Taro.showToast({
|
||||
title: '保存失败',
|
||||
icon: 'error',
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 预览主题
|
||||
const previewTheme = (themeName: string) => {
|
||||
if (themeName === 'auto') {
|
||||
const userId = Taro.getStorageSync('userId') || '1'
|
||||
const theme = gradientUtils.getThemeByUserId(userId)
|
||||
setCurrentTheme(theme)
|
||||
} else {
|
||||
const theme = gradientThemes.find(t => t.name === themeName)
|
||||
setCurrentTheme(theme || gradientThemes[0])
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<View className="min-h-screen bg-gray-50">
|
||||
{/* 当前主题预览 */}
|
||||
{currentTheme && (
|
||||
<View
|
||||
className="mx-4 mt-4 rounded-xl p-6 text-center"
|
||||
style={{
|
||||
background: currentTheme.background,
|
||||
color: currentTheme.textColor
|
||||
}}
|
||||
>
|
||||
<Text className="text-lg font-bold mb-2">当前主题预览</Text>
|
||||
<Text className="text-sm opacity-90 px-2">{currentTheme.description}</Text>
|
||||
<View className="mt-4 flex justify-center space-x-4">
|
||||
<View
|
||||
className="w-8 h-8 rounded-full"
|
||||
style={{ backgroundColor: currentTheme.primary }}
|
||||
></View>
|
||||
{currentTheme.secondary && (
|
||||
<View
|
||||
className="w-8 h-8 rounded-full"
|
||||
style={{ backgroundColor: currentTheme.secondary }}
|
||||
></View>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* 主题选择 */}
|
||||
<View className="mt-4">
|
||||
<CellGroup>
|
||||
<Cell
|
||||
className="px-4 py-2"
|
||||
title={
|
||||
<View className="flex items-center justify-between w-full">
|
||||
<View>
|
||||
<Text className="font-medium">智能主题</Text>
|
||||
<Text className="text-sm text-gray-500 mt-1">
|
||||
根据您的用户ID自动选择个性化主题
|
||||
</Text>
|
||||
</View>
|
||||
<Radio
|
||||
checked={selectedTheme === 'auto'}
|
||||
onChange={() => {
|
||||
setSelectedTheme('auto')
|
||||
previewTheme('auto')
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
}
|
||||
onClick={() => {
|
||||
setSelectedTheme('auto')
|
||||
previewTheme('auto')
|
||||
}}
|
||||
/>
|
||||
</CellGroup>
|
||||
|
||||
<View className="mt-4">
|
||||
<Text className="text-sm text-gray-600 px-4 mb-2">手动选择主题</Text>
|
||||
<CellGroup>
|
||||
{gradientThemes.map((theme) => (
|
||||
<Cell
|
||||
key={theme.name}
|
||||
className="px-4 py-3"
|
||||
title={
|
||||
<View className="flex items-center justify-between w-full">
|
||||
<View className="flex items-center">
|
||||
<View
|
||||
className="w-6 h-6 rounded-full mr-3"
|
||||
style={{ background: theme.background }}
|
||||
></View>
|
||||
<View>
|
||||
<Text className="font-medium">{theme.description.split(' - ')[0]}</Text>
|
||||
<Text className="text-sm text-gray-500 mt-1">
|
||||
{theme.description.split(' - ')[1]}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
<Radio
|
||||
checked={selectedTheme === theme.name}
|
||||
onChange={() => {
|
||||
setSelectedTheme(theme.name)
|
||||
previewTheme(theme.name)
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
}
|
||||
onClick={() => {
|
||||
setSelectedTheme(theme.name)
|
||||
previewTheme(theme.name)
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</CellGroup>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 保存按钮 */}
|
||||
<FixedButton text={'保存主题设置'} background={currentTheme?.background || '#1890ff'} onClick={() => saveTheme(selectedTheme)} />
|
||||
|
||||
{/* 底部安全区域 */}
|
||||
<View className="h-20"></View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export default ThemeSelector
|
||||
3
src/user/userVerify/index.config.ts
Normal file
3
src/user/userVerify/index.config.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '实名认证'
|
||||
})
|
||||
332
src/user/userVerify/index.tsx
Normal file
332
src/user/userVerify/index.tsx
Normal file
@@ -0,0 +1,332 @@
|
||||
import {useEffect, useState} from "react";
|
||||
import {Image} from '@nutui/nutui-react-taro'
|
||||
import {ConfigProvider} from '@nutui/nutui-react-taro'
|
||||
import Taro from '@tarojs/taro'
|
||||
|
||||
import {
|
||||
Form,
|
||||
Button,
|
||||
Input,
|
||||
Radio,
|
||||
} from '@nutui/nutui-react-taro'
|
||||
import {UserVerify} from "@/api/system/userVerify/model";
|
||||
import {addUserVerify, myUserVerify, updateUserVerify} from "@/api/system/userVerify";
|
||||
import {uploadFile} from "@/api/system/file";
|
||||
import {pushReviewReminder} from "@/api/sdy/sdyTemplateMessage";
|
||||
|
||||
function Index() {
|
||||
const [isUpdate, setIsUpdate] = useState<boolean>(false)
|
||||
const [submitText, setSubmitText] = useState<string>('提交')
|
||||
|
||||
const [FormData, setFormData] = useState<UserVerify>({
|
||||
userId: undefined,
|
||||
type: undefined,
|
||||
phone: undefined,
|
||||
avatar: undefined,
|
||||
realName: undefined,
|
||||
idCard: undefined,
|
||||
birthday: undefined,
|
||||
sfz1: undefined,
|
||||
sfz2: undefined,
|
||||
zzCode: undefined,
|
||||
zzImg: undefined,
|
||||
status: undefined,
|
||||
statusText: undefined,
|
||||
comments: undefined
|
||||
})
|
||||
const reload = () => {
|
||||
myUserVerify({}).then(data => {
|
||||
if (data) {
|
||||
setIsUpdate(true);
|
||||
setFormData(data)
|
||||
if(data.status == 2){
|
||||
setSubmitText('重新提交')
|
||||
}
|
||||
} else {
|
||||
setFormData({
|
||||
type: 0
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 提交表单
|
||||
const submitSucceed = (values: any) => {
|
||||
console.log('提交表单', values);
|
||||
if (FormData.status != 2 && FormData.status != undefined) return false;
|
||||
if (FormData.type == 0) {
|
||||
if (!FormData.sfz1 || !FormData.sfz2) {
|
||||
Taro.showToast({
|
||||
title: '请上传身份证正反面',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (!FormData.realName || !FormData.idCard) {
|
||||
Taro.showToast({
|
||||
title: '请填写真实姓名和身份证号码',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
}
|
||||
if (FormData.type == 1) {
|
||||
if (!FormData.zzImg) {
|
||||
Taro.showToast({
|
||||
title: '请上传营业执照',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (!FormData.name || !FormData.zzCode) {
|
||||
Taro.showToast({
|
||||
title: '请填写主体名称和营业执照号码',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
}
|
||||
if(!FormData.realName){
|
||||
Taro.showToast({
|
||||
title: '请填写真实姓名',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
const saveOrUpdate = isUpdate ? updateUserVerify : addUserVerify;
|
||||
saveOrUpdate({...FormData, status: 0}).then(() => {
|
||||
Taro.showToast({title: `提交成功`, icon: 'success'})
|
||||
if(!isUpdate){
|
||||
// 发送派单成功提醒 0FBKFCWXe8WyjReYXwSDEXf1-pxYKQXE0quZre3GYIM
|
||||
pushReviewReminder({
|
||||
realName: FormData.realName,
|
||||
}).then()
|
||||
}
|
||||
setTimeout(() => {
|
||||
return Taro.navigateBack()
|
||||
}, 1000)
|
||||
}).catch(() => {
|
||||
Taro.showToast({
|
||||
title: '提交失败',
|
||||
icon: 'error'
|
||||
});
|
||||
}).finally(() => {
|
||||
reload();
|
||||
})
|
||||
}
|
||||
const submitFailed = (error: any) => {
|
||||
console.log(error, 'err...')
|
||||
}
|
||||
|
||||
const uploadSfz1 = () => {
|
||||
if (FormData.status != 2 && FormData.status != undefined) return false;
|
||||
uploadFile().then(data => {
|
||||
setFormData({
|
||||
...FormData,
|
||||
sfz1: data.url
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
const uploadSfz2 = () => {
|
||||
if (FormData.status != 2 && FormData.status != undefined) return false;
|
||||
uploadFile().then(data => {
|
||||
setFormData({
|
||||
...FormData,
|
||||
sfz2: data.url
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
const uploadZzImg = () => {
|
||||
if (FormData.status != 2 && FormData.status != undefined) return false;
|
||||
uploadFile().then(data => {
|
||||
setFormData({
|
||||
...FormData,
|
||||
zzImg: data.url
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
reload()
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={'p-4'}>
|
||||
<ConfigProvider>
|
||||
<Form
|
||||
divider
|
||||
initialValues={FormData}
|
||||
labelPosition="left"
|
||||
onFinish={(values) => submitSucceed(values)}
|
||||
onFinishFailed={(errors) => submitFailed(errors)}
|
||||
footer={
|
||||
FormData.status != 1 && FormData.status != 0 && (
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
width: '100%'
|
||||
}}
|
||||
>
|
||||
<Button nativeType="submit" block type={'info'}
|
||||
disabled={FormData.status != 2 && FormData.status != undefined}>
|
||||
{submitText}
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
>
|
||||
<Form.Item
|
||||
label="类型"
|
||||
name="type"
|
||||
initialValue={FormData.type}
|
||||
required
|
||||
>
|
||||
<Radio.Group value={FormData?.type} direction="horizontal"
|
||||
disabled={FormData.status != 2 && FormData.status != undefined}
|
||||
onChange={(value) => setFormData({...FormData, type: value})}>
|
||||
<Radio key={0} value={0}>
|
||||
个人
|
||||
</Radio>
|
||||
{/*<Radio key={1} value={1}>*/}
|
||||
{/* 企业*/}
|
||||
{/*</Radio>*/}
|
||||
</Radio.Group>
|
||||
</Form.Item>
|
||||
{
|
||||
// 个人类型
|
||||
FormData.type == 0 && (
|
||||
<>
|
||||
<Form.Item
|
||||
label={'真实姓名'}
|
||||
name="realName"
|
||||
required
|
||||
initialValue={FormData.realName}
|
||||
rules={[{message: '请输入真实姓名'}]}
|
||||
>
|
||||
<Input
|
||||
placeholder={'请输入真实姓名'}
|
||||
type="text"
|
||||
disabled={FormData.status != 2 && FormData.status != undefined}
|
||||
value={FormData?.realName}
|
||||
onChange={(value) => setFormData({...FormData, realName: value})}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={'身份证号码'}
|
||||
name="idCard"
|
||||
required
|
||||
initialValue={FormData.idCard}
|
||||
rules={[{message: '请输入身份证号码'}]}
|
||||
>
|
||||
<Input
|
||||
placeholder="请输入身份证号码"
|
||||
type="text"
|
||||
value={FormData?.idCard}
|
||||
disabled={FormData.status != 2 && FormData.status != undefined}
|
||||
maxLength={18}
|
||||
onChange={(value) => setFormData({...FormData, idCard: value})}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={'上传证件'}
|
||||
name="image"
|
||||
required
|
||||
rules={[{message: '请上传身份证正反面'}]}
|
||||
>
|
||||
<div className={'flex gap-2'}>
|
||||
<div onClick={uploadSfz1}>
|
||||
<Image src={FormData.sfz1} lazyLoad={false}
|
||||
radius="10%" width="80" height="80"/>
|
||||
</div>
|
||||
<div onClick={uploadSfz2}>
|
||||
<Image src={FormData.sfz2} mode={'scaleToFill'} lazyLoad={false}
|
||||
radius="10%" width="80" height="80"/>
|
||||
</div>
|
||||
</div>
|
||||
</Form.Item>
|
||||
</>
|
||||
)
|
||||
}
|
||||
{
|
||||
// 企业类型
|
||||
FormData.type == 1 && (
|
||||
<>
|
||||
<Form.Item
|
||||
label={'主体名称'}
|
||||
name="name"
|
||||
required
|
||||
initialValue={FormData.name}
|
||||
rules={[{message: '请输入公司名称或单位名称'}]}
|
||||
>
|
||||
<Input
|
||||
placeholder={'请输入主体名称'}
|
||||
type="text"
|
||||
value={FormData?.name}
|
||||
onChange={(value) => setFormData({...FormData, name: value})}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={'营业执照号码'}
|
||||
name="zzCode"
|
||||
required
|
||||
initialValue={FormData.zzCode}
|
||||
rules={[{message: '请输入营业执照号码'}]}
|
||||
>
|
||||
<Input
|
||||
placeholder="请输入营业执照号码"
|
||||
type="text"
|
||||
value={FormData?.zzCode}
|
||||
maxLength={18}
|
||||
onChange={(value) => setFormData({...FormData, zzCode: value})}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={'上传营业执照'}
|
||||
name="zzImg"
|
||||
required
|
||||
rules={[{message: '请上传营业执照'}
|
||||
]}
|
||||
>
|
||||
<div onClick={uploadZzImg}>
|
||||
<Image src={FormData.zzImg} mode={'scaleToFill'} lazyLoad={false}
|
||||
radius="10%" width="80" height="80"/>
|
||||
</div>
|
||||
</Form.Item>
|
||||
</>
|
||||
)
|
||||
}
|
||||
{
|
||||
FormData.status != undefined && (
|
||||
<Form.Item
|
||||
label={'审核状态'}
|
||||
name="status"
|
||||
>
|
||||
<span className={'text-gray-500'}>{FormData.statusText}</span>
|
||||
</Form.Item>
|
||||
)
|
||||
}
|
||||
|
||||
{FormData.status == 2 && (
|
||||
<Form.Item
|
||||
label={'驳回原因'}
|
||||
name="comments"
|
||||
>
|
||||
<div className={'flex text-orange-500'}>
|
||||
{FormData.comments}
|
||||
</div>
|
||||
</Form.Item>
|
||||
)}
|
||||
|
||||
</Form>
|
||||
</ConfigProvider>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Index
|
||||
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
105
src/user/wallet/wallet.tsx
Normal file
105
src/user/wallet/wallet.tsx
Normal file
@@ -0,0 +1,105 @@
|
||||
import {useState, useEffect, CSSProperties} from 'react'
|
||||
import {Cell, InfiniteLoading} from '@nutui/nutui-react-taro'
|
||||
import {pageUserBalanceLog} from "@/api/user/balance-log";
|
||||
import {UserBalanceLog} from "@/api/user/balance-log/model";
|
||||
import {formatCurrency} from "@/utils/common";
|
||||
import {View} from '@tarojs/components'
|
||||
|
||||
const InfiniteUlStyle: CSSProperties = {
|
||||
height: '100vh',
|
||||
width: '100%',
|
||||
padding: '0',
|
||||
overflowY: 'auto',
|
||||
overflowX: 'hidden',
|
||||
}
|
||||
|
||||
const Wallet = () => {
|
||||
const [list, setList] = useState<UserBalanceLog[]>([])
|
||||
const [page, setPage] = useState(1)
|
||||
const [hasMore, setHasMore] = useState(true)
|
||||
|
||||
useEffect(() => {
|
||||
reload()
|
||||
}, [])
|
||||
|
||||
const loadMore = async () => {
|
||||
setPage(page + 1)
|
||||
reload();
|
||||
}
|
||||
|
||||
const reload = () => {
|
||||
pageUserBalanceLog({page}).then(res => {
|
||||
console.log(res)
|
||||
const newList = res?.list || [];
|
||||
setList([...list, ...newList])
|
||||
setHasMore(newList.length > 0)
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<ul style={InfiniteUlStyle} id="scroll">
|
||||
<InfiniteLoading
|
||||
target="scroll"
|
||||
hasMore={hasMore}
|
||||
onLoadMore={loadMore}
|
||||
onScroll={() => {
|
||||
console.log('onScroll')
|
||||
}}
|
||||
onScrollToUpper={() => {
|
||||
console.log('onScrollToUpper')
|
||||
}}
|
||||
loadingText={
|
||||
<>
|
||||
加载中
|
||||
</>
|
||||
}
|
||||
loadMoreText={
|
||||
<>
|
||||
没有更多了
|
||||
</>
|
||||
}
|
||||
>
|
||||
<View className="p-4">
|
||||
{list.map((item, index) => (
|
||||
<Cell.Group key={`${item.logId}-${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-orange-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?.balance}</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>
|
||||
</InfiniteLoading>
|
||||
</ul>
|
||||
</>
|
||||
)
|
||||
}
|
||||
export default Wallet
|
||||
Reference in New Issue
Block a user