feat(pages): 添加多个页面配置和功能模块
- 新增 .editorconfig、.eslintrc、.gitignore 配置文件 - 添加管理员文章管理页面配置和功能实现 - 添加经销商申请注册页面配置和功能实现 - 添加经销商银行卡管理页面配置和功能实现 - 添加经销商客户管理页面配置和功能实现 - 添加用户地址管理页面配置和功能实现 - 添加用户聊天消息页面配置和功能实现 - 添加用户礼品管理页面配置和功能实现
This commit is contained in:
4
src/dealer/apply/add.config.ts
Normal file
4
src/dealer/apply/add.config.ts
Normal file
@@ -0,0 +1,4 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '邀请注册',
|
||||
navigationBarTextStyle: 'black'
|
||||
})
|
||||
463
src/dealer/apply/add.tsx
Normal file
463
src/dealer/apply/add.tsx
Normal file
@@ -0,0 +1,463 @@
|
||||
import {useEffect, useState, useRef} from "react";
|
||||
import {Loading, CellGroup, Input, Form, Avatar, Button, Space} from '@nutui/nutui-react-taro'
|
||||
import {Edit} from '@nutui/icons-react-taro'
|
||||
import Taro from '@tarojs/taro'
|
||||
import {View} from '@tarojs/components'
|
||||
import FixedButton from "@/components/FixedButton";
|
||||
import {useUser} from "@/hooks/useUser";
|
||||
import {TenantId} from "@/config/app";
|
||||
import {updateUser} from "@/api/system/user";
|
||||
import {User} from "@/api/system/user/model";
|
||||
import {getStoredInviteParams, handleInviteRelation} from "@/utils/invite";
|
||||
import {addShopDealerUser, updateShopDealerUserByUserId} from "@/api/shop/shopDealerUser";
|
||||
import {listUserRole, updateUserRole} from "@/api/system/userRole";
|
||||
import {addShopDealerCapital} from "@/api/shop/shopDealerCapital";
|
||||
|
||||
// 类型定义
|
||||
interface ChooseAvatarEvent {
|
||||
detail: {
|
||||
avatarUrl: string;
|
||||
};
|
||||
}
|
||||
|
||||
interface InputEvent {
|
||||
detail: {
|
||||
value: string;
|
||||
};
|
||||
}
|
||||
|
||||
const AddUserAddress = () => {
|
||||
const {user, loginUser} = useUser()
|
||||
const [loading, setLoading] = useState<boolean>(true)
|
||||
const [submitting, setSubmitting] = useState<boolean>(false)
|
||||
const [FormData, setFormData] = useState<User>()
|
||||
const formRef = useRef<any>(null)
|
||||
|
||||
const reload = async () => {
|
||||
const inviteParams = getStoredInviteParams()
|
||||
if (inviteParams?.inviter) {
|
||||
setFormData({
|
||||
...user,
|
||||
refereeId: Number(inviteParams.inviter),
|
||||
// 清空昵称，强制用户手动输入
|
||||
nickname: '',
|
||||
})
|
||||
} else {
|
||||
// 如果没有邀请参数，也要确保昵称为空
|
||||
setFormData({
|
||||
...user,
|
||||
nickname: '',
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const uploadAvatar = ({detail}: ChooseAvatarEvent) => {
|
||||
// 先更新本地显示的头像（临时显示）
|
||||
const tempFormData = {
|
||||
...FormData,
|
||||
avatar: `${detail.avatarUrl}`,
|
||||
}
|
||||
setFormData(tempFormData)
|
||||
|
||||
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) {
|
||||
const finalAvatarUrl = `${data.data.thumbnail}`
|
||||
|
||||
try {
|
||||
// 使用 useUser hook 的 updateUser 方法更新头像
|
||||
await updateUser({
|
||||
avatar: finalAvatarUrl
|
||||
})
|
||||
|
||||
Taro.showToast({
|
||||
title: '头像上传成功',
|
||||
icon: 'success',
|
||||
duration: 1500
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('更新用户头像失败:', error)
|
||||
}
|
||||
|
||||
// 无论用户信息更新是否成功，都要更新本地FormData
|
||||
const finalFormData = {
|
||||
...tempFormData,
|
||||
avatar: finalAvatarUrl
|
||||
}
|
||||
setFormData(finalFormData)
|
||||
|
||||
// 同步更新表单字段
|
||||
if (formRef.current) {
|
||||
formRef.current.setFieldsValue({
|
||||
avatar: finalAvatarUrl
|
||||
})
|
||||
}
|
||||
} else {
|
||||
// 上传失败，恢复原来的头像
|
||||
setFormData({
|
||||
...FormData,
|
||||
avatar: user?.avatar || ''
|
||||
})
|
||||
Taro.showToast({
|
||||
title: '上传失败',
|
||||
icon: 'error'
|
||||
})
|
||||
}
|
||||
},
|
||||
fail: (error) => {
|
||||
console.error('上传头像失败:', error)
|
||||
Taro.showToast({
|
||||
title: '上传失败',
|
||||
icon: 'error'
|
||||
})
|
||||
// 恢复原来的头像
|
||||
setFormData({
|
||||
...FormData,
|
||||
avatar: user?.avatar || ''
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 提交表单
|
||||
const submitSucceed = async (values: any) => {
|
||||
// 防止重复提交
|
||||
if (submitting) {
|
||||
console.log('正在提交中，请勿重复点击')
|
||||
return
|
||||
}
|
||||
|
||||
setSubmitting(true)
|
||||
try {
|
||||
// 验证必填字段
|
||||
if (!values.phone && !FormData?.phone) {
|
||||
Taro.showToast({
|
||||
title: '请先获取手机号',
|
||||
icon: 'error'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// 验证昵称：必须填写且不能是默认的微信昵称
|
||||
const nickname = values.realName || FormData?.nickname || '';
|
||||
if (!nickname || nickname.trim() === '') {
|
||||
Taro.showToast({
|
||||
title: '请填写昵称',
|
||||
icon: 'error'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// 检查是否为默认的微信昵称（常见的默认昵称）
|
||||
const defaultNicknames = ['微信用户', 'WeChat User', '微信昵称'];
|
||||
if (defaultNicknames.includes(nickname.trim())) {
|
||||
Taro.showToast({
|
||||
title: '请填写真实昵称，不能使用默认昵称',
|
||||
icon: 'error'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// 验证昵称长度
|
||||
if (nickname.trim().length < 2) {
|
||||
Taro.showToast({
|
||||
title: '昵称至少需要2个字符',
|
||||
icon: 'error'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (!values.avatar && !FormData?.avatar) {
|
||||
Taro.showToast({
|
||||
title: '请上传头像',
|
||||
icon: 'error'
|
||||
});
|
||||
return;
|
||||
}
|
||||
console.log(values,FormData)
|
||||
|
||||
const roles = await listUserRole({userId: user?.userId})
|
||||
console.log(roles, 'roles...')
|
||||
|
||||
// 准备提交的数据
|
||||
await updateUser({
|
||||
userId: user?.userId,
|
||||
nickname: values.realName || FormData?.nickname,
|
||||
phone: values.phone || FormData?.phone,
|
||||
avatar: values.avatar || FormData?.avatar,
|
||||
refereeId: values.refereeId || FormData?.refereeId
|
||||
});
|
||||
|
||||
await addShopDealerUser({
|
||||
userId: user?.userId,
|
||||
realName: values.realName || FormData?.nickname,
|
||||
mobile: values.phone || FormData?.phone,
|
||||
refereeId: values.refereeId || FormData?.refereeId
|
||||
})
|
||||
|
||||
if (roles.length > 0) {
|
||||
await updateUserRole({
|
||||
...roles[0],
|
||||
roleId: 1848
|
||||
})
|
||||
}
|
||||
|
||||
// 获得50元奖励
|
||||
await updateShopDealerUserByUserId({
|
||||
userId: user?.userId,
|
||||
money: '50',
|
||||
})
|
||||
|
||||
// 保存明细
|
||||
await addShopDealerCapital({
|
||||
userId: user?.userId,
|
||||
flowType: 50,
|
||||
money: '50',
|
||||
toUserId: user?.refereeId,
|
||||
comments: '新人注册奖励'
|
||||
})
|
||||
|
||||
Taro.showToast({
|
||||
title: `注册成功`,
|
||||
icon: 'success'
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
Taro.navigateBack();
|
||||
}, 1000);
|
||||
|
||||
} catch (error) {
|
||||
console.error('验证邀请人失败:', error);
|
||||
Taro.showToast({
|
||||
title: '注册失败，请重试',
|
||||
icon: 'error'
|
||||
})
|
||||
} finally {
|
||||
setSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
// 获取微信昵称
|
||||
const getWxNickname = (nickname: string) => {
|
||||
// 更新表单数据
|
||||
const updatedFormData = {
|
||||
...FormData,
|
||||
nickname: nickname
|
||||
}
|
||||
setFormData(updatedFormData);
|
||||
|
||||
// 同步更新表单字段
|
||||
if (formRef.current) {
|
||||
formRef.current.setFieldsValue({
|
||||
realName: nickname
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
/* 获取用户手机号 */
|
||||
const handleGetPhoneNumber = ({detail}: { detail: { code?: string, encryptedData?: string, iv?: string } }) => {
|
||||
const {code, encryptedData, iv} = detail
|
||||
Taro.login({
|
||||
success: (loginRes) => {
|
||||
if (code) {
|
||||
Taro.request({
|
||||
url: 'https://server.websoft.top/api/wx-login/loginByMpWxPhone',
|
||||
method: 'POST',
|
||||
data: {
|
||||
authCode: loginRes.code,
|
||||
code,
|
||||
encryptedData,
|
||||
iv,
|
||||
notVerifyPhone: true,
|
||||
refereeId: 0,
|
||||
sceneType: 'save_referee',
|
||||
tenantId: TenantId
|
||||
},
|
||||
header: {
|
||||
'content-type': 'application/json',
|
||||
TenantId
|
||||
},
|
||||
success: async function (res) {
|
||||
if (res.data.code == 1) {
|
||||
Taro.showToast({
|
||||
title: res.data.message,
|
||||
icon: 'error',
|
||||
duration: 2000
|
||||
})
|
||||
return false;
|
||||
}
|
||||
// 登录成功
|
||||
const token = res.data.data.access_token;
|
||||
const userData = res.data.data.user;
|
||||
console.log(userData, 'userData...')
|
||||
// 使用useUser Hook的loginUser方法更新状态
|
||||
loginUser(token, userData);
|
||||
|
||||
if (userData.phone) {
|
||||
console.log('手机号已获取', userData.phone)
|
||||
const updatedFormData = {
|
||||
...FormData,
|
||||
phone: userData.phone,
|
||||
// 不自动填充微信昵称，保持用户已输入的昵称
|
||||
nickname: FormData?.nickname || '',
|
||||
// 只在没有头像时才使用微信头像
|
||||
avatar: FormData?.avatar || userData.avatar
|
||||
}
|
||||
setFormData(updatedFormData)
|
||||
|
||||
// 更新表单字段值
|
||||
if (formRef.current) {
|
||||
formRef.current.setFieldsValue({
|
||||
phone: userData.phone,
|
||||
// 不覆盖用户已输入的昵称
|
||||
realName: FormData?.nickname || '',
|
||||
avatar: FormData?.avatar || userData.avatar
|
||||
})
|
||||
}
|
||||
|
||||
Taro.showToast({
|
||||
title: '手机号获取成功',
|
||||
icon: 'success',
|
||||
duration: 1500
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// 处理邀请关系
|
||||
if (userData?.userId) {
|
||||
try {
|
||||
const inviteSuccess = await handleInviteRelation(userData.userId)
|
||||
if (inviteSuccess) {
|
||||
Taro.showToast({
|
||||
title: '邀请关系建立成功',
|
||||
icon: 'success',
|
||||
duration: 2000
|
||||
})
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('处理邀请关系失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 显示登录成功提示
|
||||
// Taro.showToast({
|
||||
// title: '注册成功',
|
||||
// icon: 'success',
|
||||
// duration: 1500
|
||||
// })
|
||||
|
||||
// 不需要重新启动小程序，状态已经通过useUser更新
|
||||
// 可以选择性地刷新当前页面数据
|
||||
// await reload();
|
||||
}
|
||||
})
|
||||
} else {
|
||||
console.log('登录失败！')
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 处理固定按钮点击事件
|
||||
const handleFixedButtonClick = () => {
|
||||
// 触发表单提交
|
||||
formRef.current?.submit();
|
||||
};
|
||||
|
||||
const submitFailed = (error: any) => {
|
||||
console.log(error, 'err...')
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
reload().then(() => {
|
||||
setLoading(false)
|
||||
})
|
||||
}, [user?.userId]); // 依赖用户ID，当用户变化时重新加载
|
||||
|
||||
// 当FormData变化时，同步更新表单字段值
|
||||
useEffect(() => {
|
||||
if (formRef.current && FormData) {
|
||||
formRef.current.setFieldsValue({
|
||||
refereeId: FormData.refereeId,
|
||||
phone: FormData.phone,
|
||||
avatar: FormData.avatar,
|
||||
realName: FormData.nickname
|
||||
});
|
||||
}
|
||||
}, [FormData]);
|
||||
|
||||
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)}
|
||||
>
|
||||
<View className={'bg-gray-100 h-3'}></View>
|
||||
<CellGroup style={{padding: '4px 0'}}>
|
||||
<Form.Item name="refereeId" label="邀请人ID" initialValue={FormData?.refereeId} required>
|
||||
<Input placeholder="邀请人ID" disabled={true}/>
|
||||
</Form.Item>
|
||||
<Form.Item name="phone" label="手机号" initialValue={FormData?.phone} required>
|
||||
<View className="flex items-center justify-between">
|
||||
<Input
|
||||
placeholder="请填写手机号"
|
||||
disabled={true}
|
||||
maxLength={11}
|
||||
value={FormData?.phone || ''}
|
||||
/>
|
||||
<Button style={{color: '#ffffff'}} open-type="getPhoneNumber" onGetPhoneNumber={handleGetPhoneNumber}>
|
||||
<Space>
|
||||
<Button size="small">点击获取</Button>
|
||||
</Space>
|
||||
</Button>
|
||||
</View>
|
||||
</Form.Item>
|
||||
{
|
||||
FormData?.phone && <Form.Item name="avatar" label="头像" initialValue={FormData?.avatar} required>
|
||||
<Button open-type="chooseAvatar" style={{height: '58px'}} onChooseAvatar={uploadAvatar}>
|
||||
<Avatar src={FormData?.avatar || user?.avatar} size="54"/>
|
||||
</Button>
|
||||
</Form.Item>
|
||||
}
|
||||
<Form.Item name="realName" label="昵称" initialValue="" required>
|
||||
<Input
|
||||
type="nickname"
|
||||
className="info-content__input"
|
||||
placeholder="请获取微信昵称"
|
||||
value={FormData?.nickname || ''}
|
||||
onInput={(e: InputEvent) => getWxNickname(e.detail.value)}
|
||||
/>
|
||||
</Form.Item>
|
||||
</CellGroup>
|
||||
</Form>
|
||||
|
||||
{/* 底部浮动按钮 */}
|
||||
<FixedButton
|
||||
icon={<Edit/>}
|
||||
text={submitting ? '注册中...' : '立即注册'}
|
||||
onClick={handleFixedButtonClick}
|
||||
disabled={submitting}
|
||||
/>
|
||||
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddUserAddress;
|
||||
4
src/dealer/bank/add.config.ts
Normal file
4
src/dealer/bank/add.config.ts
Normal file
@@ -0,0 +1,4 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '添加银行卡',
|
||||
navigationBarTextStyle: 'black'
|
||||
})
|
||||
156
src/dealer/bank/add.tsx
Normal file
156
src/dealer/bank/add.tsx
Normal file
@@ -0,0 +1,156 @@
|
||||
import {useEffect, useState, useRef} from "react";
|
||||
import {useRouter} from '@tarojs/taro'
|
||||
import {Loading, CellGroup, Input, Form} from '@nutui/nutui-react-taro'
|
||||
import Taro from '@tarojs/taro'
|
||||
import {
|
||||
getShopDealerBank,
|
||||
listShopDealerBank,
|
||||
updateShopDealerBank,
|
||||
addShopDealerBank
|
||||
} from "@/api/shop/shopDealerBank";
|
||||
import FixedButton from "@/components/FixedButton";
|
||||
import {ShopDealerBank} from "@/api/shop/shopDealerBank/model";
|
||||
import {myUserVerify} from "@/api/system/userVerify";
|
||||
|
||||
const AddUserAddress = () => {
|
||||
const {params} = useRouter();
|
||||
const [loading, setLoading] = useState<boolean>(true)
|
||||
const [FormData, setFormData] = useState<ShopDealerBank>()
|
||||
const formRef = useRef<any>(null)
|
||||
|
||||
// 判断是编辑还是新增模式
|
||||
const isEditMode = !!params.id
|
||||
const bankId = params.id ? Number(params.id) : undefined
|
||||
|
||||
|
||||
const reload = async () => {
|
||||
// 如果是编辑模式，加载地址数据
|
||||
if (isEditMode && bankId) {
|
||||
try {
|
||||
const bank = await getShopDealerBank(bankId)
|
||||
setFormData(bank)
|
||||
} catch (error) {
|
||||
console.error('加载地址失败:', error)
|
||||
Taro.showToast({
|
||||
title: '加载地址失败',
|
||||
icon: 'error'
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 提交表单
|
||||
const submitSucceed = async (values: any) => {
|
||||
console.log('.>>>>>>,....',values)
|
||||
|
||||
|
||||
const verify = await myUserVerify({userId: Taro.getStorageSync('UserId')})
|
||||
if(verify?.realName !== values.bankAccount){
|
||||
Taro.showToast({
|
||||
title: '收款人姓名与实名认证信息不一致！',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
|
||||
try {
|
||||
// 准备提交的数据
|
||||
const submitData = {
|
||||
...values,
|
||||
isDefault: true // 新增或编辑的地址都设为默认地址
|
||||
};
|
||||
|
||||
console.log('提交数据:', submitData)
|
||||
|
||||
// 如果是编辑模式，添加id
|
||||
if (isEditMode && bankId) {
|
||||
submitData.id = bankId;
|
||||
}
|
||||
|
||||
// 先处理默认地址逻辑
|
||||
const defaultAddress = await listShopDealerBank({isDefault: true});
|
||||
if (defaultAddress && defaultAddress.length > 0) {
|
||||
// 如果当前编辑的不是默认地址，或者是新增地址，需要取消其他默认地址
|
||||
if (!isEditMode || (isEditMode && defaultAddress[0].id !== bankId)) {
|
||||
await updateShopDealerBank({
|
||||
...defaultAddress[0],
|
||||
isDefault: false
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 执行新增或更新操作
|
||||
if (isEditMode) {
|
||||
await updateShopDealerBank(submitData);
|
||||
} else {
|
||||
await addShopDealerBank(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 style={{padding: '4px 0'}}>
|
||||
<Form.Item name="bankName" label="开户行名称" initialValue={FormData?.bankName} required>
|
||||
<Input placeholder="开户行名称"/>
|
||||
</Form.Item>
|
||||
<Form.Item name="bankAccount" label="银行开户名" initialValue={FormData?.bankAccount} required>
|
||||
<Input placeholder="银行开户名"/>
|
||||
</Form.Item>
|
||||
<Form.Item name="bankCard" label="银行卡号" initialValue={FormData?.bankCard} required>
|
||||
<Input placeholder="银行卡号"/>
|
||||
</Form.Item>
|
||||
</CellGroup>
|
||||
</Form>
|
||||
|
||||
{/* 底部浮动按钮 */}
|
||||
<FixedButton text={isEditMode ? '更新地址' : '保存并使用'} onClick={() => formRef.current?.submit()}/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddUserAddress;
|
||||
4
src/dealer/bank/index.config.ts
Normal file
4
src/dealer/bank/index.config.ts
Normal file
@@ -0,0 +1,4 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '银行卡管理',
|
||||
navigationBarTextStyle: 'black'
|
||||
})
|
||||
132
src/dealer/bank/index.tsx
Normal file
132
src/dealer/bank/index.tsx
Normal file
@@ -0,0 +1,132 @@
|
||||
import {useState} from "react";
|
||||
import Taro, {useDidShow} from '@tarojs/taro'
|
||||
import {Button, Cell, Space, Empty, ConfigProvider} from '@nutui/nutui-react-taro'
|
||||
import {CheckNormal, Checked} from '@nutui/icons-react-taro'
|
||||
import {View} from '@tarojs/components'
|
||||
import {ShopDealerBank} from "@/api/shop/shopDealerBank/model";
|
||||
import {listShopDealerBank, removeShopDealerBank, updateShopDealerBank} from "@/api/shop/shopDealerBank";
|
||||
import FixedButton from "@/components/FixedButton";
|
||||
|
||||
const DealerBank = () => {
|
||||
const [list, setList] = useState<ShopDealerBank[]>([])
|
||||
const [bank, setAddress] = useState<ShopDealerBank>()
|
||||
|
||||
const reload = () => {
|
||||
listShopDealerBank({})
|
||||
.then(data => {
|
||||
setList(data || [])
|
||||
// 默认地址
|
||||
setAddress(data.find(item => item.isDefault))
|
||||
})
|
||||
.catch(() => {
|
||||
Taro.showToast({
|
||||
title: '获取地址失败',
|
||||
icon: 'error'
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
const onDefault = async (item: ShopDealerBank) => {
|
||||
if (bank) {
|
||||
await updateShopDealerBank({
|
||||
...bank,
|
||||
isDefault: false
|
||||
})
|
||||
}
|
||||
await updateShopDealerBank({
|
||||
id: item.id,
|
||||
isDefault: true
|
||||
})
|
||||
Taro.showToast({
|
||||
title: '设置成功',
|
||||
icon: 'success'
|
||||
});
|
||||
reload();
|
||||
}
|
||||
|
||||
const onDel = async (id?: number) => {
|
||||
await removeShopDealerBank(id)
|
||||
Taro.showToast({
|
||||
title: '删除成功',
|
||||
icon: 'success'
|
||||
});
|
||||
reload();
|
||||
}
|
||||
|
||||
const selectAddress = async (item: ShopDealerBank) => {
|
||||
if (bank) {
|
||||
await updateShopDealerBank({
|
||||
...bank,
|
||||
isDefault: false
|
||||
})
|
||||
}
|
||||
await updateShopDealerBank({
|
||||
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: '/dealer/bank/add'})}>新增银行卡</Button>
|
||||
</Space>
|
||||
</div>
|
||||
</ConfigProvider>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<View className={'p-3'}>
|
||||
{list.map((item, _) => (
|
||||
<Cell.Group>
|
||||
<Cell className={'flex flex-col gap-1'} extra={item.bankAccount} onClick={() => selectAddress(item)}>
|
||||
<View>
|
||||
<View className={'font-medium text-sm'}>{item.bankName}</View>
|
||||
</View>
|
||||
<View className={'text-xs'}>
|
||||
{item.bankCard} {item.bankAccount}
|
||||
</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>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
</Cell.Group>
|
||||
))}
|
||||
{/* 底部浮动按钮 */}
|
||||
<FixedButton text={'新增银行卡'} onClick={() => Taro.navigateTo({url: '/dealer/bank/add'})} />
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
export default DealerBank;
|
||||
3
src/dealer/capital/detail.config.ts
Normal file
3
src/dealer/capital/detail.config.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '详情'
|
||||
})
|
||||
79
src/dealer/capital/detail.tsx
Normal file
79
src/dealer/capital/detail.tsx
Normal file
@@ -0,0 +1,79 @@
|
||||
import {useState, useEffect} from 'react'
|
||||
import {View, Text} from '@tarojs/components'
|
||||
import {Empty, Loading} from '@nutui/nutui-react-taro'
|
||||
import {useRouter} from '@tarojs/taro'
|
||||
import {getShopDealerCapital} from '@/api/shop/shopDealerCapital'
|
||||
import type {ShopDealerCapital} from '@/api/shop/shopDealerCapital/model'
|
||||
|
||||
const DealerCapitalDetail = () => {
|
||||
const {params} = useRouter();
|
||||
const [loading, setLoading] = useState<boolean>(false)
|
||||
const [item, setItem] = useState<ShopDealerCapital>()
|
||||
|
||||
// 获取订单数据
|
||||
const reload = async () => {
|
||||
const data = await getShopDealerCapital(Number(params.id))
|
||||
setItem(data)
|
||||
}
|
||||
|
||||
const getFlowType = (index?: number) => {
|
||||
if (index === 10) return '电费收益'
|
||||
if (index === 20) return '提现支出'
|
||||
if (index === 30) return '转账支出'
|
||||
if (index === 40) return '转账收入'
|
||||
if (index === 50) return '新注册奖励'
|
||||
return 'warning'
|
||||
}
|
||||
|
||||
// 初始化加载数据
|
||||
useEffect(() => {
|
||||
reload().then(() => {
|
||||
setLoading(true)
|
||||
})
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<View className="min-h-screen bg-gray-50">
|
||||
<View className="p-4">
|
||||
{loading && !item ? (
|
||||
<View className="text-center py-8">
|
||||
<Loading/>
|
||||
<Text className="text-gray-500 mt-2">加载中...</Text>
|
||||
</View>
|
||||
) : item ? (
|
||||
<View key={item.id} className="bg-white rounded-lg p-4 mb-3 shadow-sm">
|
||||
<View className="flex flex-col justify-center items-center py-8">
|
||||
<Text className="text-lg text-gray-300">
|
||||
{getFlowType(item.flowType)}
|
||||
</Text>
|
||||
<View className="text-4xl mt-1 font-semibold flex justify-start">
|
||||
<Text className={'subscript text-xl mt-1'}>￥</Text>
|
||||
<Text className={'text-4xl'}>{Number(item.money).toFixed(2)}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View className="flex flex-col justify-between mb-1">
|
||||
<Text className="text-sm my-1 text-gray-500">
|
||||
收益描述：{item.comments}
|
||||
</Text>
|
||||
{item.orderNo && (
|
||||
<Text className="text-sm my-1 text-gray-500">
|
||||
订单编号：{item.orderNo}
|
||||
</Text>
|
||||
)}
|
||||
<Text className="text-sm my-1 text-gray-500">
|
||||
创建时间：{item.createTime}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
) : (
|
||||
<Empty description="账单不存在" style={{
|
||||
backgroundColor: 'transparent'
|
||||
}}/>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export default DealerCapitalDetail
|
||||
3
src/dealer/capital/index.config.ts
Normal file
3
src/dealer/capital/index.config.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '收益明细'
|
||||
})
|
||||
216
src/dealer/capital/index.tsx
Normal file
216
src/dealer/capital/index.tsx
Normal file
@@ -0,0 +1,216 @@
|
||||
import React, {useState, useEffect, useCallback} from 'react'
|
||||
import {View, Text, ScrollView} from '@tarojs/components'
|
||||
import {ArrowDown} from '@nutui/icons-react-taro'
|
||||
import {Empty, PullToRefresh, DatePicker, Loading} from '@nutui/nutui-react-taro'
|
||||
import Taro from '@tarojs/taro'
|
||||
import {pageShopDealerCapital} from '@/api/shop/shopDealerCapital'
|
||||
import {useDealerUser} from '@/hooks/useDealerUser'
|
||||
import type {ShopDealerCapital} from '@/api/shop/shopDealerCapital/model'
|
||||
import navTo from "@/utils/common";
|
||||
|
||||
const DealerCapital: React.FC = () => {
|
||||
const [loading, setLoading] = useState<boolean>(false)
|
||||
const d = new Date()
|
||||
const currMonth = `${d.getFullYear()}${d.getMonth() + 1}`;
|
||||
const currDate = `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}`;
|
||||
const [date, setDate] = useState(currMonth)
|
||||
const [show1, setShow1] = useState(false)
|
||||
const [refreshing, setRefreshing] = useState<boolean>(false)
|
||||
const [loadingMore, setLoadingMore] = useState<boolean>(false)
|
||||
const [capital, setCapital] = useState<ShopDealerCapital[]>([])
|
||||
const [currentPage, setCurrentPage] = useState<number>(1)
|
||||
const [hasMore, setHasMore] = useState<boolean>(true)
|
||||
const [totayMoney, setTotayMoney] = useState<number>(0)
|
||||
|
||||
const {dealerUser} = useDealerUser()
|
||||
|
||||
// 获取订单数据
|
||||
const fetchCapital = useCallback(async (page: number = 1, isRefresh: boolean = false) => {
|
||||
// if (!dealerUser?.userId) return
|
||||
|
||||
try {
|
||||
if (isRefresh) {
|
||||
setRefreshing(true)
|
||||
} else if (page === 1) {
|
||||
setLoading(true)
|
||||
} else {
|
||||
setLoadingMore(true)
|
||||
}
|
||||
|
||||
const result = await pageShopDealerCapital({
|
||||
page,
|
||||
limit: 10,
|
||||
month: date,
|
||||
userId: Taro.getStorageSync('UserId')
|
||||
})
|
||||
|
||||
if (result?.list) {
|
||||
const newCapital = result.list.map(item => ({
|
||||
...item,
|
||||
orderNo: item.orderNo
|
||||
}))
|
||||
// 通过result.list 返回的数据统计totalMoney
|
||||
setTotayMoney(newCapital.reduce((acc, cur) => acc + Number(cur.money), 0))
|
||||
|
||||
// 本月收益汇总
|
||||
// setTotayMoney(result.totalMoney)
|
||||
|
||||
|
||||
if (page === 1) {
|
||||
setCapital(newCapital)
|
||||
} else {
|
||||
setCapital(prev => [...prev, ...newCapital])
|
||||
}
|
||||
|
||||
setHasMore(newCapital.length === 10)
|
||||
setCurrentPage(page)
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('获取分销订单失败:', error)
|
||||
Taro.showToast({
|
||||
title: '获取订单失败',
|
||||
icon: 'error'
|
||||
})
|
||||
} finally {
|
||||
setLoading(false)
|
||||
setRefreshing(false)
|
||||
setLoadingMore(false)
|
||||
}
|
||||
}, [dealerUser?.userId,date])
|
||||
|
||||
// 下拉刷新
|
||||
const handleRefresh = async () => {
|
||||
await fetchCapital(1, true)
|
||||
}
|
||||
|
||||
// 加载更多
|
||||
const handleLoadMore = async () => {
|
||||
if (!loadingMore && hasMore) {
|
||||
await fetchCapital(currentPage + 1)
|
||||
}
|
||||
}
|
||||
|
||||
const getFlowType = (index?: number) => {
|
||||
if (index === 10) return '电费收益'
|
||||
if (index === 20) return '提现支出'
|
||||
if (index === 30) return '转账支出'
|
||||
if (index === 40) return '转账收入'
|
||||
return 'warning'
|
||||
}
|
||||
|
||||
// 初始化加载数据
|
||||
useEffect(() => {
|
||||
if (dealerUser?.userId) {
|
||||
fetchCapital(1)
|
||||
}
|
||||
}, [fetchCapital,date])
|
||||
|
||||
const renderCapitalItem = (item: ShopDealerCapital) => (
|
||||
<View key={item.id} className="bg-white rounded-lg p-4 mb-3 shadow-sm"
|
||||
onClick={() => navTo(`/dealer/capital/detail?id=${item.id}`)}>
|
||||
<View className="flex justify-between items-start mb-1">
|
||||
<Text className="font-semibold text-gray-800">
|
||||
{getFlowType(item.flowType)}
|
||||
</Text>
|
||||
<Text className="text-lg text-orange-500 font-semibold">
|
||||
¥{Number(item.money).toFixed(2)}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
{item.orderNo && (
|
||||
<View className="flex justify-between items-center mb-1">
|
||||
<Text className="text-sm text-gray-400">
|
||||
{item.orderNo}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
<View className="flex justify-between items-center mb-1">
|
||||
<Text className="text-sm text-gray-400">
|
||||
{item.createTime}
|
||||
</Text>
|
||||
<Text className="text-sm text-gray-400">
|
||||
我的收益：{item.money}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
</View>
|
||||
)
|
||||
|
||||
return (
|
||||
<View className="min-h-screen bg-gray-50">
|
||||
<PullToRefresh
|
||||
onRefresh={handleRefresh}
|
||||
disabled={refreshing}
|
||||
pullingText="下拉刷新"
|
||||
canReleaseText="释放刷新"
|
||||
refreshingText="刷新中..."
|
||||
completeText="刷新完成"
|
||||
>
|
||||
<ScrollView
|
||||
scrollY
|
||||
className={'h-screen'}
|
||||
onScrollToLower={handleLoadMore}
|
||||
lowerThreshold={50}
|
||||
>
|
||||
{/*筛选工具条*/}
|
||||
<View
|
||||
className={'px-4 mt-4 flex flex-1 items-center justify-between'}
|
||||
>
|
||||
<View>
|
||||
<Text className={'text-sm mr-1'} onClick={() => setShow1(true)}>{date ? `${date}` : '请选择'}</Text>
|
||||
<ArrowDown size={10} className={'text-gray-400'} onClick={() => setShow1(true)}/>
|
||||
</View>
|
||||
<View className={'text-center'}>本月收益汇总￥{totayMoney}</View>
|
||||
</View>
|
||||
{/*账单列表*/}
|
||||
<View className="p-4">
|
||||
{loading && capital.length === 0 ? (
|
||||
<View className="text-center py-8">
|
||||
<Loading/>
|
||||
<Text className="text-gray-500 mt-2">加载中...</Text>
|
||||
</View>
|
||||
) : capital.length > 0 ? (
|
||||
<>
|
||||
{capital.map(renderCapitalItem)}
|
||||
{loadingMore && (
|
||||
<View className="text-center py-4">
|
||||
<Loading/>
|
||||
<Text className="text-gray-500 mt-1 text-sm">加载更多...</Text>
|
||||
</View>
|
||||
)}
|
||||
{!hasMore && capital.length > 0 && (
|
||||
<View className="text-center py-4">
|
||||
<Text className="text-gray-400 text-sm">没有更多数据了</Text>
|
||||
</View>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<Empty description="暂无收益" style={{
|
||||
backgroundColor: 'transparent'
|
||||
}}/>
|
||||
)}
|
||||
</View>
|
||||
</ScrollView>
|
||||
</PullToRefresh>
|
||||
<DatePicker
|
||||
title="日期选择"
|
||||
visible={show1}
|
||||
pickerProps={{
|
||||
popupProps: {zIndex: 1220},
|
||||
}}
|
||||
type={'year-month'}
|
||||
defaultValue={new Date(`${currDate}`)}
|
||||
showChinese
|
||||
onCancel={() => setShow1(false)}
|
||||
onConfirm={(_, values) => {
|
||||
setShow1(false)
|
||||
setDate(`${values[0]}${values[1]}`)
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export default DealerCapital
|
||||
3
src/dealer/capital/record.config.ts
Normal file
3
src/dealer/capital/record.config.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '收益明细'
|
||||
})
|
||||
180
src/dealer/capital/record.tsx
Normal file
180
src/dealer/capital/record.tsx
Normal file
@@ -0,0 +1,180 @@
|
||||
import React, {useState, useEffect, useCallback} from 'react'
|
||||
import {View, Text, ScrollView} from '@tarojs/components'
|
||||
import {Empty, PullToRefresh, Loading} from '@nutui/nutui-react-taro'
|
||||
import Taro from '@tarojs/taro'
|
||||
import {pageShopDealerCapital} from '@/api/shop/shopDealerCapital'
|
||||
import {useDealerUser} from '@/hooks/useDealerUser'
|
||||
import type {ShopDealerCapital} from '@/api/shop/shopDealerCapital/model'
|
||||
import navTo from "@/utils/common";
|
||||
// import {pushByUpdateAdmin} from "@/api/sdy/sdyTemplateMessage";
|
||||
|
||||
const DealerCapital: React.FC = () => {
|
||||
const [loading, setLoading] = useState<boolean>(false)
|
||||
const [refreshing, setRefreshing] = useState<boolean>(false)
|
||||
const [loadingMore, setLoadingMore] = useState<boolean>(false)
|
||||
const [capital, setCapital] = useState<ShopDealerCapital[]>([])
|
||||
const [currentPage, setCurrentPage] = useState<number>(1)
|
||||
const [hasMore, setHasMore] = useState<boolean>(true)
|
||||
|
||||
const {dealerUser} = useDealerUser()
|
||||
|
||||
// 获取订单数据
|
||||
const fetchCapital = useCallback(async (page: number = 1, isRefresh: boolean = false) => {
|
||||
// if (!dealerUser?.userId) return
|
||||
|
||||
try {
|
||||
if (isRefresh) {
|
||||
setRefreshing(true)
|
||||
} else if (page === 1) {
|
||||
setLoading(true)
|
||||
} else {
|
||||
setLoadingMore(true)
|
||||
}
|
||||
|
||||
const result = await pageShopDealerCapital({
|
||||
page,
|
||||
limit: 10,
|
||||
userId: Taro.getStorageSync('UserId')
|
||||
})
|
||||
|
||||
if (result?.list) {
|
||||
const newCapital = result.list.map(item => ({
|
||||
...item,
|
||||
orderNo: item.orderNo
|
||||
}))
|
||||
|
||||
if (page === 1) {
|
||||
setCapital(newCapital)
|
||||
} else {
|
||||
setCapital(prev => [...prev, ...newCapital])
|
||||
}
|
||||
|
||||
setHasMore(newCapital.length === 10)
|
||||
setCurrentPage(page)
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('获取分销订单失败:', error)
|
||||
Taro.showToast({
|
||||
title: '获取订单失败',
|
||||
icon: 'error'
|
||||
})
|
||||
} finally {
|
||||
setLoading(false)
|
||||
setRefreshing(false)
|
||||
setLoadingMore(false)
|
||||
}
|
||||
}, [dealerUser?.userId])
|
||||
|
||||
// 下拉刷新
|
||||
const handleRefresh = async () => {
|
||||
await fetchCapital(1, true)
|
||||
}
|
||||
|
||||
// 加载更多
|
||||
const handleLoadMore = async () => {
|
||||
if (!loadingMore && hasMore) {
|
||||
await fetchCapital(currentPage + 1)
|
||||
}
|
||||
}
|
||||
|
||||
const getFlowType = (index?: number) => {
|
||||
if (index === 10) return '电费收益'
|
||||
if (index === 20) return '提现支出'
|
||||
if (index === 30) return '转账支出'
|
||||
if (index === 40) return '转账收入'
|
||||
if (index === 50) return '新注册奖励'
|
||||
return 'warning'
|
||||
}
|
||||
|
||||
// 初始化加载数据
|
||||
useEffect(() => {
|
||||
if (dealerUser?.userId) {
|
||||
fetchCapital(1)
|
||||
}
|
||||
// pushByUpdateAdmin(34423).then()
|
||||
}, [fetchCapital])
|
||||
|
||||
const renderCapitalItem = (item: ShopDealerCapital) => (
|
||||
<View key={item.id} className="bg-white rounded-lg p-4 mb-3 shadow-sm"
|
||||
onClick={() => navTo(`/dealer/capital/detail?id=${item.id}`)}>
|
||||
<View className="flex justify-between items-start mb-1">
|
||||
<Text className="font-semibold text-gray-800">
|
||||
{getFlowType(item.flowType)}
|
||||
</Text>
|
||||
<Text className="text-lg text-orange-500 font-semibold">
|
||||
¥{Number(item.money).toFixed(2)}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
{item.orderNo && (
|
||||
<View className="flex justify-between items-center mb-1">
|
||||
<Text className="text-sm text-gray-400">
|
||||
{item.orderNo}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
<View className="flex justify-between items-center mb-1">
|
||||
<Text className="text-sm text-gray-400">
|
||||
{item.createTime}
|
||||
</Text>
|
||||
<Text className="text-sm text-gray-400">
|
||||
我的收益：{item.money}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
</View>
|
||||
)
|
||||
|
||||
return (
|
||||
<View className="min-h-screen bg-gray-50">
|
||||
<PullToRefresh
|
||||
onRefresh={handleRefresh}
|
||||
disabled={refreshing}
|
||||
pullingText="下拉刷新"
|
||||
canReleaseText="释放刷新"
|
||||
refreshingText="刷新中..."
|
||||
completeText="刷新完成"
|
||||
>
|
||||
<ScrollView
|
||||
scrollY
|
||||
className={'h-screen'}
|
||||
onScrollToLower={handleLoadMore}
|
||||
lowerThreshold={50}
|
||||
>
|
||||
{/*账单列表*/}
|
||||
<View className="p-4">
|
||||
{loading && capital.length === 0 ? (
|
||||
<View className="text-center py-8">
|
||||
<Loading/>
|
||||
<Text className="text-gray-500 mt-2">加载中...</Text>
|
||||
</View>
|
||||
) : capital.length > 0 ? (
|
||||
<>
|
||||
{capital.map(renderCapitalItem)}
|
||||
{loadingMore && (
|
||||
<View className="text-center py-4">
|
||||
<Loading/>
|
||||
<Text className="text-gray-500 mt-1 text-sm">加载更多...</Text>
|
||||
</View>
|
||||
)}
|
||||
{!hasMore && capital.length > 0 && (
|
||||
<View className="text-center py-4">
|
||||
<Text className="text-gray-400 text-sm">没有更多数据了</Text>
|
||||
</View>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<Empty description="暂无收益" style={{
|
||||
backgroundColor: 'transparent'
|
||||
}}/>
|
||||
)}
|
||||
</View>
|
||||
</ScrollView>
|
||||
</PullToRefresh>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export default DealerCapital
|
||||
108
src/dealer/customer/README.md
Normal file
108
src/dealer/customer/README.md
Normal file
@@ -0,0 +1,108 @@
|
||||
# 客户管理页面
|
||||
|
||||
## 功能概述
|
||||
|
||||
这是一个完整的客户管理页面，支持客户数据的展示、筛选和搜索功能。
|
||||
|
||||
## 主要功能
|
||||
|
||||
### 1. 数据源
|
||||
- 使用 `pageUsers` API 从 User 表读取客户数据
|
||||
- 支持按状态筛选用户（status: 0 表示正常状态）
|
||||
|
||||
### 2. 状态管理
|
||||
客户状态包括：
|
||||
- **全部** - 显示所有客户
|
||||
- **跟进中** - 正在跟进的潜在客户
|
||||
- **已签约** - 已经签约的客户
|
||||
- **已取消** - 已取消合作的客户
|
||||
|
||||
### 3. 顶部Tabs筛选
|
||||
- 支持按客户状态筛选
|
||||
- 显示每个状态的客户数量统计
|
||||
- 实时更新统计数据
|
||||
|
||||
### 4. 搜索功能
|
||||
支持多字段搜索：
|
||||
- 客户姓名（realName）
|
||||
- 昵称（nickname）
|
||||
- 用户名（username）
|
||||
- 手机号（phone）
|
||||
- 用户ID（userId）
|
||||
|
||||
### 5. 客户信息展示
|
||||
每个客户卡片显示：
|
||||
- 客户姓名和状态标签
|
||||
- 手机号码
|
||||
- 注册时间
|
||||
- 用户ID、余额、积分等统计信息
|
||||
|
||||
## 技术实现
|
||||
|
||||
### 组件结构
|
||||
```
|
||||
CustomerManagement
|
||||
├── 搜索栏 (SearchBar)
|
||||
├── 状态筛选Tabs
|
||||
└── 客户列表
|
||||
└── 客户卡片项
|
||||
```
|
||||
|
||||
### 主要状态
|
||||
- `list`: 客户数据列表
|
||||
- `loading`: 加载状态
|
||||
- `activeTab`: 当前选中的状态Tab
|
||||
- `searchValue`: 搜索关键词
|
||||
|
||||
### 工具函数
|
||||
使用 `@/utils/customerStatus` 工具函数管理客户状态：
|
||||
- `getStatusText()`: 获取状态文本
|
||||
- `getStatusTagType()`: 获取状态标签类型
|
||||
- `getStatusOptions()`: 获取状态选项列表
|
||||
|
||||
## 使用的组件
|
||||
|
||||
### NutUI 组件
|
||||
- `Tabs` / `TabPane`: 状态筛选标签页
|
||||
- `SearchBar`: 搜索输入框
|
||||
- `Tag`: 状态标签
|
||||
- `Loading`: 加载指示器
|
||||
- `Space`: 间距布局
|
||||
|
||||
### 图标
|
||||
- `Phone`: 手机号图标
|
||||
- `User`: 用户图标
|
||||
|
||||
## 数据流
|
||||
|
||||
1. 页面初始化时调用 `fetchCustomerData()` 获取用户数据
|
||||
2. 为每个用户添加客户状态（目前使用随机状态，实际项目中应从数据库获取）
|
||||
3. 根据当前Tab和搜索条件筛选数据
|
||||
4. 渲染客户列表
|
||||
|
||||
## 注意事项
|
||||
|
||||
### 临时实现
|
||||
- 当前使用 `getRandomStatus()` 生成随机客户状态
|
||||
- 实际项目中应该：
|
||||
1. 在数据库中添加客户状态字段
|
||||
2. 修改后端API返回真实的客户状态
|
||||
3. 删除随机状态生成函数
|
||||
|
||||
### 扩展建议
|
||||
1. 添加客户详情页面
|
||||
2. 支持客户状态的修改操作
|
||||
3. 添加客户添加/编辑功能
|
||||
4. 支持批量操作
|
||||
5. 添加导出功能
|
||||
6. 支持更多筛选条件（注册时间、地区等）
|
||||
|
||||
## 文件结构
|
||||
```
|
||||
src/dealer/customer/
|
||||
├── index.tsx # 主页面组件
|
||||
└── README.md # 说明文档
|
||||
|
||||
src/utils/
|
||||
└── customerStatus.ts # 客户状态工具函数
|
||||
```
|
||||
4
src/dealer/customer/add.config.ts
Normal file
4
src/dealer/customer/add.config.ts
Normal file
@@ -0,0 +1,4 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '客户报备',
|
||||
navigationBarTextStyle: 'black'
|
||||
})
|
||||
430
src/dealer/customer/add.tsx
Normal file
430
src/dealer/customer/add.tsx
Normal file
@@ -0,0 +1,430 @@
|
||||
import {useEffect, useState, useRef} from "react";
|
||||
import {Loading, CellGroup, Cell, Input, Form, Calendar} from '@nutui/nutui-react-taro'
|
||||
import {Edit, Calendar as CalendarIcon} from '@nutui/icons-react-taro'
|
||||
import Taro from '@tarojs/taro'
|
||||
import {useRouter} from '@tarojs/taro'
|
||||
import {View, Text} from '@tarojs/components'
|
||||
import FixedButton from "@/components/FixedButton";
|
||||
import {useUser} from "@/hooks/useUser";
|
||||
import {ShopDealerApply} from "@/api/shop/shopDealerApply/model";
|
||||
import {
|
||||
addShopDealerApply, getShopDealerApply, pageShopDealerApply,
|
||||
updateShopDealerApply
|
||||
} from "@/api/shop/shopDealerApply";
|
||||
import {
|
||||
formatDateForDatabase,
|
||||
extractDateForCalendar, formatDateForDisplay
|
||||
} from "@/utils/dateUtils";
|
||||
import {ShopDealerUser} from "@/api/shop/shopDealerUser/model";
|
||||
import {getShopDealerUser, pageShopDealerUser} from "@/api/shop/shopDealerUser";
|
||||
|
||||
const AddShopDealerApply = () => {
|
||||
const {user} = useUser()
|
||||
const {params} = useRouter();
|
||||
const [loading, setLoading] = useState<boolean>(true)
|
||||
const [FormData, setFormData] = useState<ShopDealerApply>()
|
||||
const formRef = useRef<any>(null)
|
||||
const [isEditMode, setIsEditMode] = useState<boolean>(false)
|
||||
const [existingApply, setExistingApply] = useState<ShopDealerApply | null>(null)
|
||||
const [referee, setReferee] = useState<ShopDealerUser>()
|
||||
|
||||
// 日期选择器状态
|
||||
const [showApplyTimePicker, setShowApplyTimePicker] = useState<boolean>(false)
|
||||
const [showContractTimePicker, setShowContractTimePicker] = useState<boolean>(false)
|
||||
const [applyTime, setApplyTime] = useState<string>('')
|
||||
const [contractTime, setContractTime] = useState<string>('')
|
||||
|
||||
// 获取审核状态文字
|
||||
const getApplyStatusText = (status?: number) => {
|
||||
switch (status) {
|
||||
case 10:
|
||||
return '待审核'
|
||||
case 20:
|
||||
return '已签约'
|
||||
case 30:
|
||||
return '已取消'
|
||||
default:
|
||||
return '未知状态'
|
||||
}
|
||||
}
|
||||
|
||||
console.log(getApplyStatusText)
|
||||
|
||||
// 处理签约时间选择
|
||||
const handleApplyTimeConfirm = (param: string) => {
|
||||
const selectedDate = param[3] // 选中的日期字符串 (YYYY-M-D)
|
||||
const formattedDate = formatDateForDatabase(selectedDate) // 转换为数据库格式
|
||||
setApplyTime(selectedDate) // 保存原始格式用于显示
|
||||
setShowApplyTimePicker(false)
|
||||
|
||||
// 更新表单数据（使用数据库格式）
|
||||
if (formRef.current) {
|
||||
formRef.current.setFieldsValue({
|
||||
applyTime: formattedDate
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 处理合同日期选择
|
||||
const handleContractTimeConfirm = (param: string) => {
|
||||
const selectedDate = param[3] // 选中的日期字符串 (YYYY-M-D)
|
||||
const formattedDate = formatDateForDatabase(selectedDate) // 转换为数据库格式
|
||||
setContractTime(selectedDate) // 保存原始格式用于显示
|
||||
setShowContractTimePicker(false)
|
||||
|
||||
// 更新表单数据（使用数据库格式）
|
||||
if (formRef.current) {
|
||||
formRef.current.setFieldsValue({
|
||||
contractTime: formattedDate
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const reload = async () => {
|
||||
// 查询推荐人信息
|
||||
const dealerUser = await getShopDealerUser(Number(Taro.getStorageSync('UserId')))
|
||||
setReferee(dealerUser)
|
||||
|
||||
if (!params.id) {
|
||||
setLoading(false);
|
||||
return false;
|
||||
}
|
||||
// 查询当前用户ID是否已有申请记录
|
||||
try {
|
||||
const dealerApply = await getShopDealerApply(Number(params.id));
|
||||
if (dealerApply) {
|
||||
setFormData(dealerApply)
|
||||
setIsEditMode(true);
|
||||
setExistingApply(dealerApply)
|
||||
|
||||
// 初始化日期数据（从数据库格式转换为Calendar组件格式）
|
||||
if (dealerApply.applyTime) {
|
||||
setApplyTime(extractDateForCalendar(dealerApply.applyTime))
|
||||
}
|
||||
if (dealerApply.contractTime) {
|
||||
setContractTime(extractDateForCalendar(dealerApply.contractTime))
|
||||
}
|
||||
|
||||
Taro.setNavigationBarTitle({title: '签约'})
|
||||
}
|
||||
} catch (error) {
|
||||
setLoading(false)
|
||||
console.error('查询申请记录失败:', error);
|
||||
setIsEditMode(false);
|
||||
setExistingApply(null);
|
||||
}
|
||||
}
|
||||
|
||||
// 提交表单
|
||||
// 计算保护期过期时间（7天后）
|
||||
const calculateExpirationTime = (): string => {
|
||||
const now = new Date();
|
||||
const expirationDate = new Date(now);
|
||||
expirationDate.setDate(now.getDate() + 7); // 7天后
|
||||
|
||||
// 格式化为数据库需要的格式：YYYY-MM-DD HH:mm:ss
|
||||
const year = expirationDate.getFullYear();
|
||||
const month = String(expirationDate.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(expirationDate.getDate()).padStart(2, '0');
|
||||
const hours = String(expirationDate.getHours()).padStart(2, '0');
|
||||
const minutes = String(expirationDate.getMinutes()).padStart(2, '0');
|
||||
const seconds = String(expirationDate.getSeconds()).padStart(2, '0');
|
||||
|
||||
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
||||
};
|
||||
|
||||
const submitSucceed = async (values: any) => {
|
||||
|
||||
try {
|
||||
// 验证必填字段
|
||||
if (!values.mobile || values.mobile.trim() === '') {
|
||||
Taro.showToast({
|
||||
title: '请填写联系方式',
|
||||
icon: 'error'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// 验证手机号格式
|
||||
const phoneRegex = /^1[3-9]\d{9}$/;
|
||||
if (!phoneRegex.test(values.mobile)) {
|
||||
Taro.showToast({
|
||||
title: '请填写正确的手机号',
|
||||
icon: 'error'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// 验证报备人是否存在
|
||||
if (values.userId > 0) {
|
||||
const isExist = await pageShopDealerUser({userId: Number(values.userId)});
|
||||
if(isExist && isExist.count == 0){
|
||||
Taro.showToast({
|
||||
title: '报备人不存在',
|
||||
icon: 'error'
|
||||
});
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// 检查客户是否已存在
|
||||
const res = await pageShopDealerApply({dealerName: values.dealerName, type: 4, applyStatus: 10});
|
||||
|
||||
if (res && res.count > 0) {
|
||||
const existingCustomer = res.list[0];
|
||||
|
||||
// 检查是否在7天保护期内
|
||||
if (!isEditMode && existingCustomer.applyTime) {
|
||||
// 将申请时间字符串转换为时间戳进行比较
|
||||
const applyTimeStamp = new Date(existingCustomer.applyTime).getTime();
|
||||
const currentTimeStamp = new Date().getTime();
|
||||
const sevenDaysInMs = 7 * 24 * 60 * 60 * 1000; // 7天的毫秒数
|
||||
|
||||
// 如果在7天保护期内，不允许重复添加
|
||||
if (currentTimeStamp - applyTimeStamp < sevenDaysInMs) {
|
||||
const remainingDays = Math.ceil((sevenDaysInMs - (currentTimeStamp - applyTimeStamp)) / (24 * 60 * 60 * 1000));
|
||||
|
||||
Taro.showToast({
|
||||
title: `该客户还在保护期，还需等待${remainingDays}天后才能重新添加`,
|
||||
icon: 'none',
|
||||
duration: 3000
|
||||
});
|
||||
return false;
|
||||
} else {
|
||||
// 超过7天保护期，可以重新添加，显示确认对话框
|
||||
const modalResult = await new Promise<boolean>((resolve) => {
|
||||
Taro.showModal({
|
||||
title: '提示',
|
||||
content: '该客户已超过7天保护期，是否重新添加跟进？',
|
||||
showCancel: true,
|
||||
cancelText: '取消',
|
||||
confirmText: '确定',
|
||||
success: (modalRes) => {
|
||||
resolve(modalRes.confirm);
|
||||
},
|
||||
fail: () => {
|
||||
resolve(false);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
if (!modalResult) {
|
||||
return false; // 用户取消，不继续执行
|
||||
}
|
||||
// 用户确认后继续执行添加逻辑
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 计算过期时间
|
||||
const expirationTime = isEditMode ? existingApply?.expirationTime : calculateExpirationTime();
|
||||
|
||||
// 准备提交的数据
|
||||
const submitData = {
|
||||
...values,
|
||||
type: 4,
|
||||
realName: values.realName || user?.nickname,
|
||||
mobile: values.mobile,
|
||||
refereeId: referee?.refereeId,
|
||||
applyStatus: isEditMode ? 20 : 10,
|
||||
auditTime: undefined,
|
||||
// 设置保护期过期时间（7天后）
|
||||
expirationTime: expirationTime,
|
||||
// 确保日期数据正确提交（使用数据库格式）
|
||||
applyTime: values.applyTime || (applyTime ? formatDateForDatabase(applyTime) : ''),
|
||||
contractTime: values.contractTime || (contractTime ? formatDateForDatabase(contractTime) : '')
|
||||
};
|
||||
|
||||
// 调试信息
|
||||
console.log('=== 提交数据调试 ===');
|
||||
console.log('是否编辑模式:', isEditMode);
|
||||
console.log('计算的过期时间:', expirationTime);
|
||||
console.log('提交的数据:', submitData);
|
||||
console.log('==================');
|
||||
|
||||
// 如果是编辑模式，添加现有申请的id
|
||||
if (isEditMode && existingApply?.applyId) {
|
||||
submitData.applyId = existingApply.applyId;
|
||||
}
|
||||
|
||||
// 执行新增或更新操作
|
||||
if (isEditMode) {
|
||||
await updateShopDealerApply(submitData);
|
||||
} else {
|
||||
await addShopDealerApply(submitData);
|
||||
}
|
||||
|
||||
Taro.showToast({
|
||||
title: `${isEditMode ? '更新' : '提交'}成功`,
|
||||
icon: 'success'
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
Taro.navigateBack();
|
||||
}, 1000);
|
||||
|
||||
} catch (error) {
|
||||
console.error('提交失败:', error);
|
||||
Taro.showToast({
|
||||
title: '提交失败，请重试',
|
||||
icon: 'error'
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 处理固定按钮点击事件
|
||||
const handleFixedButtonClick = () => {
|
||||
// 触发表单提交
|
||||
formRef.current?.submit();
|
||||
};
|
||||
|
||||
const submitFailed = (error: any) => {
|
||||
console.log(error, 'err...')
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
reload().then(() => {
|
||||
setLoading(false)
|
||||
}).catch((error) => {
|
||||
console.error('页面加载失败:', error);
|
||||
setLoading(false);
|
||||
Taro.showToast({
|
||||
title: '页面加载失败',
|
||||
icon: 'error'
|
||||
});
|
||||
})
|
||||
}, []); // 依赖用户ID，当用户变化时重新加载
|
||||
|
||||
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)}
|
||||
>
|
||||
<View className={'bg-gray-100 h-3'}></View>
|
||||
<CellGroup style={{padding: '4px 0'}}>
|
||||
<Form.Item name="dealerName" label="公司名称" initialValue={FormData?.dealerName} required>
|
||||
<Input placeholder="公司名称" disabled={isEditMode}/>
|
||||
</Form.Item>
|
||||
<Form.Item name="realName" label="联系人" initialValue={FormData?.realName} required>
|
||||
<Input placeholder="请输入联系人" disabled={isEditMode}/>
|
||||
</Form.Item>
|
||||
<Form.Item name="mobile" label="联系方式" initialValue={FormData?.mobile} required>
|
||||
<Input placeholder="请输入手机号" disabled={isEditMode} maxLength={11}/>
|
||||
</Form.Item>
|
||||
<Form.Item name="address" label="公司地址" initialValue={FormData?.address} required>
|
||||
<Input placeholder="请输入详细地址" disabled={isEditMode}/>
|
||||
</Form.Item>
|
||||
<Form.Item name="dealerCode" label="户号" initialValue={FormData?.dealerCode} required>
|
||||
<Input placeholder="请填写户号" disabled={isEditMode}/>
|
||||
</Form.Item>
|
||||
{isEditMode && (
|
||||
<>
|
||||
<Form.Item name="money" label="签约价格" initialValue={FormData?.money} required>
|
||||
<Input placeholder="(元/兆瓦时)" disabled={false}/>
|
||||
</Form.Item>
|
||||
<Form.Item name="applyTime" label="签约时间" initialValue={FormData?.applyTime}>
|
||||
<View
|
||||
className="flex items-center justify-between py-2"
|
||||
onClick={() => setShowApplyTimePicker(true)}
|
||||
>
|
||||
<View className="flex items-center">
|
||||
<CalendarIcon size={16} color="#999" className="mr-2"/>
|
||||
<Text style={{color: applyTime ? '#333' : '#999'}}>
|
||||
{applyTime ? formatDateForDisplay(applyTime) : '请选择签约时间'}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</Form.Item>
|
||||
<Form.Item name="contractTime" label="合同日期" initialValue={FormData?.contractTime}>
|
||||
<View
|
||||
className="flex items-center justify-between py-2"
|
||||
onClick={() => setShowContractTimePicker(true)}
|
||||
>
|
||||
<View className="flex items-center">
|
||||
<CalendarIcon size={16} color="#999" className="mr-2"/>
|
||||
<Text style={{color: contractTime ? '#333' : '#999'}}>
|
||||
{contractTime ? formatDateForDisplay(contractTime) : '请选择合同生效起止时间'}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</Form.Item>
|
||||
{/*<Form.Item name="refereeId" label="邀请人ID" initialValue={FormData?.refereeId} required>*/}
|
||||
{/* <Input placeholder="邀请人ID"/>*/}
|
||||
{/*</Form.Item>*/}
|
||||
</>
|
||||
)}
|
||||
<Form.Item name="userId" label="报备人(ID)" initialValue={FormData?.userId}>
|
||||
<Input
|
||||
placeholder="自己报备请留空"
|
||||
disabled={isEditMode}
|
||||
type="number"
|
||||
value={(FormData?.userId)?.toString() || ''}
|
||||
/>
|
||||
</Form.Item>
|
||||
</CellGroup>
|
||||
</Form>
|
||||
|
||||
{/* 签约时间选择器 */}
|
||||
<Calendar
|
||||
visible={showApplyTimePicker}
|
||||
defaultValue={applyTime}
|
||||
onClose={() => setShowApplyTimePicker(false)}
|
||||
onConfirm={handleApplyTimeConfirm}
|
||||
/>
|
||||
|
||||
{/* 合同日期选择器 */}
|
||||
<Calendar
|
||||
visible={showContractTimePicker}
|
||||
defaultValue={contractTime}
|
||||
onClose={() => setShowContractTimePicker(false)}
|
||||
onConfirm={handleContractTimeConfirm}
|
||||
/>
|
||||
|
||||
{/* 审核状态显示（仅在编辑模式下显示） */}
|
||||
{isEditMode && (
|
||||
<CellGroup>
|
||||
{/*<Cell*/}
|
||||
{/* title={'审核状态'}*/}
|
||||
{/* extra={*/}
|
||||
{/* <span style={{*/}
|
||||
{/* color: FormData?.applyStatus === 20 ? '#52c41a' :*/}
|
||||
{/* FormData?.applyStatus === 30 ? '#ff4d4f' : '#faad14'*/}
|
||||
{/* }}>*/}
|
||||
{/* {getApplyStatusText(FormData?.applyStatus)}*/}
|
||||
{/* </span>*/}
|
||||
{/* }*/}
|
||||
{/*/>*/}
|
||||
{FormData?.applyStatus === 20 && (
|
||||
<Cell title={'签约时间'} extra={FormData?.auditTime || '无'}/>
|
||||
)}
|
||||
{FormData?.applyStatus === 30 && (
|
||||
<Cell title={'驳回原因'} extra={FormData?.rejectReason || '无'}/>
|
||||
)}
|
||||
</CellGroup>
|
||||
)}
|
||||
|
||||
|
||||
{/* 底部浮动按钮 */}
|
||||
{(!isEditMode || FormData?.applyStatus === 10) && (
|
||||
<FixedButton
|
||||
icon={<Edit/>}
|
||||
text={'立即提交'}
|
||||
onClick={handleFixedButtonClick}
|
||||
/>
|
||||
)}
|
||||
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddShopDealerApply;
|
||||
3
src/dealer/customer/index.config.ts
Normal file
3
src/dealer/customer/index.config.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '客户列表'
|
||||
})
|
||||
590
src/dealer/customer/index.tsx
Normal file
590
src/dealer/customer/index.tsx
Normal file
@@ -0,0 +1,590 @@
|
||||
import {useState, useEffect, useCallback} from 'react'
|
||||
import {View, Text} from '@tarojs/components'
|
||||
import Taro, {useDidShow} from '@tarojs/taro'
|
||||
import {Loading, InfiniteLoading, Empty, Space, Tabs, TabPane, Tag, Button, SearchBar} from '@nutui/nutui-react-taro'
|
||||
import {Phone, AngleDoubleLeft} from '@nutui/icons-react-taro'
|
||||
import type {ShopDealerApply, ShopDealerApply as UserType} from "@/api/shop/shopDealerApply/model";
|
||||
import {
|
||||
CustomerStatus,
|
||||
getStatusText,
|
||||
getStatusTagType,
|
||||
getStatusOptions,
|
||||
mapApplyStatusToCustomerStatus,
|
||||
mapCustomerStatusToApplyStatus
|
||||
} from '@/utils/customerStatus';
|
||||
import FixedButton from "@/components/FixedButton";
|
||||
import navTo from "@/utils/common";
|
||||
import {pageShopDealerApply, removeShopDealerApply, updateShopDealerApply} from "@/api/shop/shopDealerApply";
|
||||
import {addShopDealerRecord} from "@/api/shop/shopDealerRecord";
|
||||
|
||||
// 扩展User类型，添加客户状态和保护天数
|
||||
interface CustomerUser extends UserType {
|
||||
customerStatus?: CustomerStatus;
|
||||
protectDays?: number; // 剩余保护天数
|
||||
}
|
||||
|
||||
const CustomerIndex = () => {
|
||||
const [list, setList] = useState<CustomerUser[]>([])
|
||||
const [loading, setLoading] = useState<boolean>(false)
|
||||
const [activeTab, setActiveTab] = useState<CustomerStatus>('all')
|
||||
const [searchValue, setSearchValue] = useState<string>('')
|
||||
const [displaySearchValue, setDisplaySearchValue] = useState<string>('')
|
||||
const [page, setPage] = useState(1)
|
||||
const [hasMore, setHasMore] = useState(true)
|
||||
|
||||
// Tab配置
|
||||
const tabList = getStatusOptions();
|
||||
|
||||
// 复制手机号
|
||||
const copyPhone = (phone: string) => {
|
||||
Taro.setClipboardData({
|
||||
data: phone,
|
||||
success: () => {
|
||||
Taro.showToast({
|
||||
title: '手机号已复制',
|
||||
icon: 'success',
|
||||
duration: 1500
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 一键拨打
|
||||
const makePhoneCall = (phone: string) => {
|
||||
Taro.makePhoneCall({
|
||||
phoneNumber: phone,
|
||||
fail: () => {
|
||||
Taro.showToast({
|
||||
title: '拨打取消',
|
||||
icon: 'error'
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 编辑跟进情况
|
||||
const editComments = (customer: CustomerUser) => {
|
||||
Taro.showModal({
|
||||
title: '编辑跟进情况',
|
||||
// @ts-ignore
|
||||
editable: true,
|
||||
placeholderText: '请输入跟进情况',
|
||||
content: customer.comments || '',
|
||||
success: async (res) => {
|
||||
// @ts-ignore
|
||||
if (res.confirm && res.content !== undefined) {
|
||||
try {
|
||||
// 添加跟进记录
|
||||
await addShopDealerRecord({
|
||||
dealerId: customer.userId,
|
||||
// @ts-ignore
|
||||
content: res.content.trim()
|
||||
})
|
||||
// 更新跟进情况
|
||||
await updateShopDealerApply({
|
||||
...customer,
|
||||
// @ts-ignore
|
||||
comments: res.content.trim()
|
||||
});
|
||||
|
||||
Taro.showToast({
|
||||
title: '更新成功',
|
||||
icon: 'success'
|
||||
});
|
||||
|
||||
// 刷新列表
|
||||
setList([]);
|
||||
setPage(1);
|
||||
setHasMore(true);
|
||||
fetchCustomerData(activeTab, true);
|
||||
} catch (error) {
|
||||
console.error('更新跟进情况失败:', error);
|
||||
Taro.showToast({
|
||||
title: '更新失败，请重试',
|
||||
icon: 'error'
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 计算剩余保护天数（基于过期时间）
|
||||
const calculateProtectDays = (expirationTime?: string, applyTime?: string): number => {
|
||||
try {
|
||||
// 优先使用过期时间字段
|
||||
if (expirationTime) {
|
||||
const expDate = new Date(expirationTime.replace(' ', 'T'));
|
||||
const now = new Date();
|
||||
|
||||
// 计算剩余毫秒数
|
||||
const remainingMs = expDate.getTime() - now.getTime();
|
||||
|
||||
// 转换为天数，向上取整
|
||||
const remainingDays = Math.ceil(remainingMs / (1000 * 60 * 60 * 24));
|
||||
|
||||
console.log('=== 基于过期时间计算 ===');
|
||||
console.log('过期时间:', expirationTime);
|
||||
console.log('当前时间:', now.toLocaleString());
|
||||
console.log('剩余天数:', remainingDays);
|
||||
console.log('======================');
|
||||
|
||||
return Math.max(0, remainingDays);
|
||||
}
|
||||
|
||||
// 如果没有过期时间，回退到基于申请时间计算
|
||||
if (!applyTime) return 0;
|
||||
|
||||
const protectionPeriod = 7; // 保护期7天
|
||||
|
||||
// 解析申请时间
|
||||
let applyDate: Date;
|
||||
if (applyTime.includes('T')) {
|
||||
applyDate = new Date(applyTime);
|
||||
} else {
|
||||
applyDate = new Date(applyTime.replace(' ', 'T'));
|
||||
}
|
||||
|
||||
// 获取当前时间
|
||||
const now = new Date();
|
||||
|
||||
// 只比较日期部分，忽略时间
|
||||
const applyDateOnly = new Date(applyDate.getFullYear(), applyDate.getMonth(), applyDate.getDate());
|
||||
const currentDateOnly = new Date(now.getFullYear(), now.getMonth(), now.getDate());
|
||||
|
||||
// 计算已经过去的天数
|
||||
const timeDiff = currentDateOnly.getTime() - applyDateOnly.getTime();
|
||||
const daysPassed = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
|
||||
|
||||
// 计算剩余保护天数
|
||||
const remainingDays = protectionPeriod - daysPassed;
|
||||
|
||||
console.log('=== 基于申请时间计算 ===');
|
||||
console.log('申请时间:', applyTime);
|
||||
console.log('已过去天数:', daysPassed);
|
||||
console.log('剩余保护天数:', remainingDays);
|
||||
console.log('======================');
|
||||
|
||||
return Math.max(0, remainingDays);
|
||||
} catch (error) {
|
||||
console.error('日期计算错误:', error);
|
||||
return 0;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// 获取客户数据
|
||||
const fetchCustomerData = useCallback(async (statusFilter?: CustomerStatus, resetPage = false, targetPage?: number) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const currentPage = resetPage ? 1 : (targetPage || page);
|
||||
|
||||
// 构建API参数，根据状态筛选
|
||||
const params: any = {
|
||||
type: 4,
|
||||
page: currentPage
|
||||
};
|
||||
const applyStatus = mapCustomerStatusToApplyStatus(statusFilter || activeTab);
|
||||
if (applyStatus !== undefined) {
|
||||
params.applyStatus = applyStatus;
|
||||
}
|
||||
|
||||
const res = await pageShopDealerApply(params);
|
||||
|
||||
if (res?.list && res.list.length > 0) {
|
||||
// 正确映射状态并计算保护天数
|
||||
const mappedList = res.list.map(customer => ({
|
||||
...customer,
|
||||
customerStatus: mapApplyStatusToCustomerStatus(customer.applyStatus || 10),
|
||||
protectDays: calculateProtectDays(customer.expirationTime, customer.applyTime || customer.createTime || '')
|
||||
}));
|
||||
|
||||
// 如果是重置页面或第一页，直接设置新数据；否则追加数据
|
||||
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);
|
||||
}
|
||||
}, [activeTab, page]);
|
||||
|
||||
const reloadMore = async () => {
|
||||
if (loading || !hasMore) return; // 防止重复加载
|
||||
const nextPage = page + 1;
|
||||
await fetchCustomerData(activeTab, false, nextPage);
|
||||
}
|
||||
|
||||
|
||||
// 防抖搜索功能
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
setDisplaySearchValue(searchValue);
|
||||
}, 300); // 300ms 防抖
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}, [searchValue]);
|
||||
|
||||
// 根据搜索条件筛选数据（状态筛选已在API层面处理）
|
||||
const getFilteredList = () => {
|
||||
let filteredList = list;
|
||||
|
||||
// 按搜索关键词筛选
|
||||
if (displaySearchValue.trim()) {
|
||||
const keyword = displaySearchValue.trim().toLowerCase();
|
||||
filteredList = filteredList.filter(customer =>
|
||||
(customer.realName && customer.realName.toLowerCase().includes(keyword)) ||
|
||||
(customer.dealerName && customer.dealerName.toLowerCase().includes(keyword)) ||
|
||||
(customer.dealerCode && customer.dealerCode.toLowerCase().includes(keyword)) ||
|
||||
(customer.mobile && customer.mobile.includes(keyword)) ||
|
||||
(customer.userId && customer.userId.toString().includes(keyword))
|
||||
);
|
||||
}
|
||||
|
||||
return filteredList;
|
||||
};
|
||||
|
||||
// 获取各状态的统计数量
|
||||
const [statusCounts, setStatusCounts] = useState({
|
||||
all: 0,
|
||||
pending: 0,
|
||||
signed: 0,
|
||||
cancelled: 0
|
||||
});
|
||||
|
||||
// 获取所有状态的统计数量
|
||||
const fetchStatusCounts = useCallback(async () => {
|
||||
try {
|
||||
// 并行获取各状态的数量
|
||||
const [allRes, pendingRes, signedRes, cancelledRes] = await Promise.all([
|
||||
pageShopDealerApply({type: 4}), // 全部
|
||||
pageShopDealerApply({applyStatus: 10, type: 4}), // 跟进中
|
||||
pageShopDealerApply({applyStatus: 20, type: 4}), // 已签约
|
||||
pageShopDealerApply({applyStatus: 30, type: 4}) // 已取消
|
||||
]);
|
||||
|
||||
setStatusCounts({
|
||||
all: allRes?.count || 0,
|
||||
pending: pendingRes?.count || 0,
|
||||
signed: signedRes?.count || 0,
|
||||
cancelled: cancelledRes?.count || 0
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('获取状态统计失败:', error);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const getStatusCounts = () => statusCounts;
|
||||
|
||||
// 取消操作
|
||||
const handleCancel = (customer: ShopDealerApply) => {
|
||||
updateShopDealerApply({
|
||||
...customer,
|
||||
applyStatus: 30
|
||||
}).then(() => {
|
||||
Taro.showToast({
|
||||
title: '取消成功',
|
||||
icon: 'success'
|
||||
});
|
||||
// 重新加载当前tab的数据
|
||||
setList([]);
|
||||
setPage(1);
|
||||
setHasMore(true);
|
||||
fetchCustomerData(activeTab, true).then();
|
||||
fetchStatusCounts().then();
|
||||
})
|
||||
};
|
||||
|
||||
// 删除
|
||||
const handleDelete = (customer: ShopDealerApply) => {
|
||||
removeShopDealerApply(customer.applyId).then(() => {
|
||||
Taro.showToast({
|
||||
title: '删除成功',
|
||||
icon: 'success'
|
||||
});
|
||||
// 刷新当前tab的数据
|
||||
setList([]);
|
||||
setPage(1);
|
||||
setHasMore(true);
|
||||
fetchCustomerData(activeTab, true).then();
|
||||
fetchStatusCounts().then();
|
||||
})
|
||||
}
|
||||
|
||||
// 初始化数据
|
||||
useEffect(() => {
|
||||
fetchCustomerData(activeTab, true).then();
|
||||
fetchStatusCounts().then();
|
||||
}, []);
|
||||
|
||||
// 当activeTab变化时重新获取数据
|
||||
useEffect(() => {
|
||||
setList([]); // 清空列表
|
||||
setPage(1); // 重置页码
|
||||
setHasMore(true); // 重置加载状态
|
||||
fetchCustomerData(activeTab, true);
|
||||
}, [activeTab]);
|
||||
|
||||
// 监听页面显示，当从其他页面返回时刷新数据
|
||||
useDidShow(() => {
|
||||
// 刷新当前tab的数据和统计信息
|
||||
setList([]);
|
||||
setPage(1);
|
||||
setHasMore(true);
|
||||
fetchCustomerData(activeTab, true);
|
||||
fetchStatusCounts();
|
||||
});
|
||||
|
||||
// 渲染客户项
|
||||
const renderCustomerItem = (customer: CustomerUser) => (
|
||||
<View key={customer.userId} className="bg-white rounded-lg p-4 mb-3 shadow-sm">
|
||||
<View className="flex items-center mb-3">
|
||||
<View className="flex-1">
|
||||
<View className="flex items-center justify-between mb-1">
|
||||
<Text className="font-semibold text-gray-800 mr-2">
|
||||
{customer.dealerName}
|
||||
</Text>
|
||||
{customer.customerStatus && (
|
||||
<Tag type={getStatusTagType(customer.customerStatus)}>
|
||||
{getStatusText(customer.customerStatus)}
|
||||
</Tag>
|
||||
)}
|
||||
</View>
|
||||
<View className="flex items-center mb-1">
|
||||
<Space direction="vertical">
|
||||
<Text className="text-xs text-gray-500">联系人：{customer.realName}</Text>
|
||||
<View className="flex items-center">
|
||||
<Text className="text-xs text-gray-500" onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
makePhoneCall(customer.mobile || '');
|
||||
}}>联系电话：{customer.mobile}</Text>
|
||||
<View className="flex items-center ml-2">
|
||||
<Phone
|
||||
size={12}
|
||||
className="text-green-500 mr-2"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
makePhoneCall(customer.mobile || '');
|
||||
}}
|
||||
/>
|
||||
<Text
|
||||
className="text-xs text-blue-500 cursor-pointer"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
copyPhone(customer.mobile || '');
|
||||
}}
|
||||
>
|
||||
复制
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
<Text className="text-xs text-gray-500">
|
||||
添加时间：{customer.createTime}
|
||||
</Text>
|
||||
</Space>
|
||||
</View>
|
||||
|
||||
{/* 保护天数显示 */}
|
||||
{customer.applyStatus === 10 && (
|
||||
<View className="flex items-center my-1">
|
||||
<Text className="text-xs text-gray-500 mr-2">保护期：</Text>
|
||||
{customer.protectDays && customer.protectDays > 0 ? (
|
||||
<Text className={`text-xs px-2 py-1 rounded ${
|
||||
customer.protectDays <= 2
|
||||
? 'bg-red-100 text-red-600'
|
||||
: customer.protectDays <= 4
|
||||
? 'bg-orange-100 text-orange-600'
|
||||
: 'bg-green-100 text-green-600'
|
||||
}`}>
|
||||
剩余{customer.protectDays}天
|
||||
</Text>
|
||||
) : (
|
||||
<Text className="text-xs px-2 py-1 rounded bg-gray-100 text-gray-500">
|
||||
已过期
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
)}
|
||||
|
||||
<View className={'flex items-center gap-2'}>
|
||||
<Text className="text-xs text-gray-500">报备人：{customer?.nickName}</Text>
|
||||
<AngleDoubleLeft size={12} className={'text-blue-500'} />
|
||||
<Text className={'text-xs text-gray-500'}>{customer?.refereeName}</Text>
|
||||
</View>
|
||||
|
||||
{/* 显示 comments 字段 */}
|
||||
<Space className="flex items-center">
|
||||
<Text className="text-xs text-gray-500">跟进情况：{customer.comments || '暂无'}</Text>
|
||||
<Text
|
||||
className="text-xs text-blue-500 cursor-pointer"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
editComments(customer);
|
||||
}}
|
||||
>
|
||||
编辑
|
||||
</Text>
|
||||
</Space>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 跟进中状态显示操作按钮 */}
|
||||
{(customer.applyStatus === 10 && customer.userId == Taro.getStorageSync('UserId')) && (
|
||||
<Space className="flex justify-end">
|
||||
<Button
|
||||
size="small"
|
||||
onClick={() => navTo(`/dealer/customer/add?id=${customer.applyId}`, true)}
|
||||
style={{marginRight: '8px', backgroundColor: '#52c41a', color: 'white'}}
|
||||
>
|
||||
签约
|
||||
</Button>
|
||||
<Button
|
||||
size="small"
|
||||
onClick={() => handleCancel(customer)}
|
||||
style={{backgroundColor: '#ff4d4f', color: 'white'}}
|
||||
>
|
||||
取消
|
||||
</Button>
|
||||
</Space>
|
||||
)}
|
||||
{(customer.applyStatus === 30 && customer.userId == Taro.getStorageSync('UserId')) && (
|
||||
<Space className="flex justify-end">
|
||||
<Button
|
||||
size="small"
|
||||
onClick={() => handleDelete(customer)}
|
||||
style={{backgroundColor: '#ff4d4f', color: 'white'}}
|
||||
>
|
||||
删除
|
||||
</Button>
|
||||
</Space>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
|
||||
// 渲染客户列表
|
||||
const renderCustomerList = () => {
|
||||
const filteredList = getFilteredList();
|
||||
const isSearching = displaySearchValue.trim().length > 0;
|
||||
|
||||
return (
|
||||
<View className="flex-1">
|
||||
{/* 搜索结果统计 */}
|
||||
{isSearching && (
|
||||
<View className="bg-white px-4 py-2 border-b border-gray-100">
|
||||
<Text className="text-sm text-gray-600">
|
||||
搜索 "{displaySearchValue}" 的结果，共找到 {filteredList.length} 条记录
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
<View className="p-4" style={{
|
||||
height: isSearching ? 'calc(90vh - 40px)' : '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-3 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(renderCustomerItem)
|
||||
)}
|
||||
</InfiniteLoading>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<View className="min-h-screen bg-gray-50">
|
||||
{/* 搜索栏 */}
|
||||
<View className="bg-white py-2 border-b border-gray-100">
|
||||
<SearchBar
|
||||
value={searchValue}
|
||||
placeholder="搜索客户名称、手机号"
|
||||
onChange={(value) => setSearchValue(value)}
|
||||
onClear={() => {
|
||||
setSearchValue('');
|
||||
setDisplaySearchValue('');
|
||||
}}
|
||||
clearable
|
||||
/>
|
||||
</View>
|
||||
|
||||
{/* 顶部Tabs */}
|
||||
<View className="bg-white">
|
||||
<Tabs
|
||||
value={activeTab}
|
||||
onChange={(value) => setActiveTab(value as CustomerStatus)}
|
||||
>
|
||||
{tabList.map(tab => {
|
||||
const counts = getStatusCounts();
|
||||
const count = counts[tab.value as keyof typeof counts] || 0;
|
||||
return (
|
||||
<TabPane
|
||||
key={tab.value}
|
||||
title={`${tab.label}${count > 0 ? `(${count})` : ''}`}
|
||||
value={tab.value}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</Tabs>
|
||||
</View>
|
||||
|
||||
{/* 客户列表 */}
|
||||
{renderCustomerList()}
|
||||
|
||||
<FixedButton text={'客户报备'} onClick={() => Taro.navigateTo({url: '/dealer/customer/add'})}/>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
export default CustomerIndex;
|
||||
3
src/dealer/customer/trading.config.ts
Normal file
3
src/dealer/customer/trading.config.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '入市查询'
|
||||
})
|
||||
202
src/dealer/customer/trading.tsx
Normal file
202
src/dealer/customer/trading.tsx
Normal file
@@ -0,0 +1,202 @@
|
||||
import {useState, useCallback} from 'react'
|
||||
import {View, Text} from '@tarojs/components'
|
||||
import Taro from '@tarojs/taro'
|
||||
import {Loading, InfiniteLoading, Empty, Space, SearchBar} from '@nutui/nutui-react-taro'
|
||||
import type {ShopDealerApply as UserType} from "@/api/shop/shopDealerApply/model";
|
||||
import {
|
||||
CustomerStatus,
|
||||
mapApplyStatusToCustomerStatus,
|
||||
} from '@/utils/customerStatus';
|
||||
import {pageShopDealerApply} from "@/api/shop/shopDealerApply";
|
||||
|
||||
// 扩展User类型，添加客户状态
|
||||
interface CustomerUser extends UserType {
|
||||
customerStatus?: CustomerStatus;
|
||||
}
|
||||
|
||||
const CustomerTrading = () => {
|
||||
const [list, setList] = useState<CustomerUser[]>([])
|
||||
const [loading, setLoading] = useState<boolean>(false)
|
||||
const [searchValue, setSearchValue] = useState<string>('')
|
||||
const [page, setPage] = useState(1)
|
||||
const [hasMore, setHasMore] = useState(true)
|
||||
|
||||
// 获取客户数据
|
||||
const fetchCustomerData = useCallback(async (resetPage = false, targetPage?: number, searchKeyword?: string) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const currentPage = resetPage ? 1 : (targetPage || page);
|
||||
|
||||
// 构建API参数，根据状态筛选
|
||||
const params: any = {
|
||||
type: 3,
|
||||
page: currentPage
|
||||
};
|
||||
|
||||
// 添加搜索关键词
|
||||
if (searchKeyword && searchKeyword.trim()) {
|
||||
params.keywords = searchKeyword.trim();
|
||||
}
|
||||
|
||||
const res = await pageShopDealerApply(params);
|
||||
|
||||
if (res?.list && res.list.length > 0) {
|
||||
// 正确映射状态
|
||||
const mappedList = res.list.map(customer => ({
|
||||
...customer,
|
||||
customerStatus: mapApplyStatusToCustomerStatus(customer.applyStatus || 10)
|
||||
}));
|
||||
|
||||
// 如果是重置页面或第一页，直接设置新数据；否则追加数据
|
||||
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 fetchCustomerData(false, nextPage, searchValue);
|
||||
}
|
||||
|
||||
|
||||
// 获取列表数据（现在使用服务端搜索，不需要客户端过滤）
|
||||
const getFilteredList = () => {
|
||||
return list;
|
||||
};
|
||||
|
||||
// 搜索处理函数
|
||||
const handleSearch = (keyword: string) => {
|
||||
if(keyword.length < 4){
|
||||
return;
|
||||
}
|
||||
setSearchValue(keyword);
|
||||
setList([]);
|
||||
setPage(1);
|
||||
setHasMore(true);
|
||||
fetchCustomerData(true, 1, keyword);
|
||||
};
|
||||
|
||||
// 清空搜索
|
||||
// const handleClearSearch = () => {
|
||||
// setSearchValue('');
|
||||
// setList([]);
|
||||
// setPage(1);
|
||||
// setHasMore(true);
|
||||
// fetchCustomerData(true, 1, '');
|
||||
// };
|
||||
|
||||
// 渲染客户项
|
||||
const renderCustomerItem = (customer: CustomerUser) => (
|
||||
<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">
|
||||
{customer.dealerName}
|
||||
</Text>
|
||||
</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 renderCustomerList = () => {
|
||||
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(renderCustomerItem)
|
||||
)}
|
||||
</InfiniteLoading>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<View className="min-h-screen bg-gray-50">
|
||||
{/* 搜索栏 */}
|
||||
<View className="bg-white shadow-sm">
|
||||
<SearchBar
|
||||
placeholder="请输入搜索关键词"
|
||||
value={searchValue}
|
||||
onChange={(value) => handleSearch(value)}
|
||||
/>
|
||||
</View>
|
||||
|
||||
{/* 客户列表 */}
|
||||
{renderCustomerList()}
|
||||
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
export default CustomerTrading;
|
||||
3
src/dealer/index.config.ts
Normal file
3
src/dealer/index.config.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '分销中心'
|
||||
})
|
||||
0
src/dealer/index.scss
Normal file
0
src/dealer/index.scss
Normal file
347
src/dealer/index.tsx
Normal file
347
src/dealer/index.tsx
Normal file
@@ -0,0 +1,347 @@
|
||||
import React, {useState, useEffect} from 'react'
|
||||
import {View, Text} from '@tarojs/components'
|
||||
import {ConfigProvider, Grid, Avatar} from '@nutui/nutui-react-taro'
|
||||
import {
|
||||
User,
|
||||
Shopping,
|
||||
QrCode,
|
||||
ArrowRight,
|
||||
Purse,
|
||||
People
|
||||
} from '@nutui/icons-react-taro'
|
||||
import {useDealerUser} from '@/hooks/useDealerUser'
|
||||
import {useThemeStyles} from '@/hooks/useTheme'
|
||||
import {businessGradients, cardGradients} from '@/styles/gradients'
|
||||
import Taro from '@tarojs/taro'
|
||||
import {getShopDealerRefereeByUserId} from "@/api/shop/shopDealerReferee";
|
||||
import {ShopDealerUser} from "@/api/shop/shopDealerUser/model";
|
||||
|
||||
const DealerIndex: React.FC = () => {
|
||||
const {
|
||||
dealerUser
|
||||
} = useDealerUser()
|
||||
const [dealer, setDealer] = useState<ShopDealerUser>()
|
||||
|
||||
// 使用主题样式
|
||||
const themeStyles = useThemeStyles()
|
||||
|
||||
// 导航到各个功能页面
|
||||
const navigateToPage = (url: string) => {
|
||||
Taro.navigateTo({url})
|
||||
}
|
||||
|
||||
// 格式化金额
|
||||
const formatMoney = (money?: string) => {
|
||||
if (!money) return '0.00'
|
||||
return parseFloat(money).toFixed(2)
|
||||
}
|
||||
|
||||
// 格式化时间
|
||||
const formatTime = (time?: string) => {
|
||||
if (!time) return '-'
|
||||
return new Date(time).toLocaleDateString()
|
||||
}
|
||||
|
||||
// 获取用户主题
|
||||
// const userTheme = gradientUtils.getThemeByUserId(dealerUser?.userId)
|
||||
|
||||
// 获取渐变背景
|
||||
// const getGradientBackground = (themeColor?: string) => {
|
||||
// if (themeColor) {
|
||||
// const darkerColor = gradientUtils.adjustColorBrightness(themeColor, -30)
|
||||
// return gradientUtils.createGradient(themeColor, darkerColor)
|
||||
// }
|
||||
// return userTheme.background
|
||||
// }
|
||||
|
||||
|
||||
// 初始化当前用户名称
|
||||
useEffect(() => {
|
||||
getShopDealerRefereeByUserId(Taro.getStorageSync('UserId')).then((data) => {
|
||||
setDealer(data);
|
||||
})
|
||||
}, [dealerUser])
|
||||
|
||||
|
||||
// console.log(getGradientBackground(), 'getGradientBackground()')
|
||||
//
|
||||
// if (error) {
|
||||
// return (
|
||||
// <View className="p-4">
|
||||
// <View className="bg-red-50 border border-red-200 rounded-lg p-4 mb-4">
|
||||
// <Text className="text-red-600">{error}</Text>
|
||||
// </View>
|
||||
// <Button type="primary" onClick={refresh}>
|
||||
// 重试
|
||||
// </Button>
|
||||
// </View>
|
||||
// )
|
||||
// }
|
||||
|
||||
return (
|
||||
<View className="bg-gray-100 min-h-screen">
|
||||
<View>
|
||||
{/*头部信息*/}
|
||||
{dealerUser && (
|
||||
<View className="px-4 py-6 relative overflow-hidden" style={themeStyles.primaryBackground}>
|
||||
{/* 装饰性背景元素 - 小程序兼容版本 */}
|
||||
<View className="absolute w-32 h-32 rounded-full" style={{
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.1)',
|
||||
top: '-16px',
|
||||
right: '-16px'
|
||||
}}></View>
|
||||
<View className="absolute w-24 h-24 rounded-full" style={{
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.08)',
|
||||
bottom: '-12px',
|
||||
left: '-12px'
|
||||
}}></View>
|
||||
<View className="absolute w-16 h-16 rounded-full" style={{
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.05)',
|
||||
top: '60px',
|
||||
left: '120px'
|
||||
}}></View>
|
||||
<View className="flex items-center justify-between relative z-10 mb-4">
|
||||
<Avatar
|
||||
size="50"
|
||||
src={dealerUser?.qrcode}
|
||||
icon={<User/>}
|
||||
className="mr-4"
|
||||
style={{
|
||||
border: '2px solid rgba(255, 255, 255, 0.3)'
|
||||
}}
|
||||
/>
|
||||
<View className="flex-1 flex-col">
|
||||
<View className="text-white text-lg font-bold mb-1" style={{}}>
|
||||
{dealerUser?.realName || '分销商'}
|
||||
</View>
|
||||
<View className="text-sm" style={{
|
||||
color: 'rgba(255, 255, 255, 0.8)'
|
||||
}}>
|
||||
ID: {dealerUser.userId} | 推荐人: {dealerUser.refereeId || '无'}
|
||||
</View>
|
||||
</View>
|
||||
<View className="text-right hidden">
|
||||
<Text className="text-xs" style={{
|
||||
color: 'rgba(255, 255, 255, 0.9)'
|
||||
}}>加入时间</Text>
|
||||
<Text className="text-xs" style={{
|
||||
color: 'rgba(255, 255, 255, 0.7)'
|
||||
}}>
|
||||
{formatTime(dealerUser.createTime)}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* 佣金统计卡片 */}
|
||||
{dealerUser && (
|
||||
<View className="mx-4 -mt-6 rounded-xl p-4 relative z-10" style={cardGradients.elevated}>
|
||||
<View className="mb-4">
|
||||
<Text className="font-semibold text-gray-800">收益统计</Text>
|
||||
</View>
|
||||
<View className="grid grid-cols-3 gap-3">
|
||||
<View className="text-center p-3 rounded-lg flex flex-col" style={{
|
||||
background: businessGradients.money.available
|
||||
}}>
|
||||
<Text className="text-lg font-bold mb-1 text-white">
|
||||
{formatMoney(dealerUser.money)}
|
||||
</Text>
|
||||
<Text className="text-xs" style={{color: 'rgba(255, 255, 255, 0.9)'}}>可提现</Text>
|
||||
</View>
|
||||
<View className="text-center p-3 rounded-lg flex flex-col" style={{
|
||||
background: businessGradients.money.frozen
|
||||
}}>
|
||||
<Text className="text-lg font-bold mb-1 text-white">
|
||||
{formatMoney(dealerUser.freezeMoney)}
|
||||
</Text>
|
||||
<Text className="text-xs" style={{color: 'rgba(255, 255, 255, 0.9)'}}>冻结中</Text>
|
||||
</View>
|
||||
<View className="text-center p-3 rounded-lg flex flex-col" style={{
|
||||
background: businessGradients.money.total
|
||||
}}>
|
||||
<Text className="text-lg font-bold mb-1 text-white">
|
||||
{formatMoney(dealerUser.totalMoney)}
|
||||
</Text>
|
||||
<Text className="text-xs" style={{color: 'rgba(255, 255, 255, 0.9)'}}>累计收益</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* 团队统计 */}
|
||||
{dealerUser && (
|
||||
<View className="bg-white mx-4 mt-4 rounded-xl p-4 hidden">
|
||||
<View className="flex items-center justify-between mb-4">
|
||||
<Text className="font-semibold text-gray-800">我的邀请</Text>
|
||||
<View
|
||||
className="text-gray-400 text-sm flex items-center"
|
||||
onClick={() => navigateToPage('/dealer/team/index')}
|
||||
>
|
||||
<Text>查看详情</Text>
|
||||
<ArrowRight size="12"/>
|
||||
</View>
|
||||
</View>
|
||||
<View className="grid grid-cols-3 gap-4">
|
||||
<View className="text-center grid">
|
||||
<Text className="text-xl font-bold text-purple-500 mb-1">
|
||||
{dealerUser.firstNum || 0}
|
||||
</Text>
|
||||
<Text className="text-xs text-gray-500">一级成员</Text>
|
||||
</View>
|
||||
<View className="text-center grid">
|
||||
<Text className="text-xl font-bold text-indigo-500 mb-1">
|
||||
{dealerUser.secondNum || 0}
|
||||
</Text>
|
||||
<Text className="text-xs text-gray-500">二级成员</Text>
|
||||
</View>
|
||||
<View className="text-center grid">
|
||||
<Text className="text-xl font-bold text-pink-500 mb-1">
|
||||
{dealerUser.thirdNum || 0}
|
||||
</Text>
|
||||
<Text className="text-xs text-gray-500">三级成员</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* 功能导航 */}
|
||||
<View className="bg-white mx-4 mt-4 rounded-xl p-4">
|
||||
<View className="font-semibold mb-4 text-gray-800">我的工具</View>
|
||||
<ConfigProvider>
|
||||
<Grid
|
||||
columns={4}
|
||||
className="no-border-grid"
|
||||
style={{
|
||||
'--nutui-grid-border-color': 'transparent',
|
||||
'--nutui-grid-item-border-width': '0px',
|
||||
border: 'none'
|
||||
} as React.CSSProperties}
|
||||
>
|
||||
<Grid.Item text="电费订单" onClick={() => navigateToPage('/dealer/orders/index')}>
|
||||
<View className="text-center">
|
||||
<View className="w-12 h-12 bg-blue-50 rounded-xl flex items-center justify-center mx-auto mb-2">
|
||||
<Shopping color="#3b82f6" size="20"/>
|
||||
</View>
|
||||
</View>
|
||||
</Grid.Item>
|
||||
|
||||
<Grid.Item text="收益明细" onClick={() => navigateToPage('/dealer/capital/record')}>
|
||||
<View className="text-center">
|
||||
<View className="w-12 h-12 bg-blue-50 rounded-xl flex items-center justify-center mx-auto mb-2">
|
||||
<Purse color="#3b82f6" size="20"/>
|
||||
</View>
|
||||
</View>
|
||||
</Grid.Item>
|
||||
|
||||
<Grid.Item text={'提现申请'} onClick={() => navigateToPage('/dealer/withdraw/index')}>
|
||||
<View className="text-center">
|
||||
<View className="w-12 h-12 bg-green-50 rounded-xl flex items-center justify-center mx-auto mb-2">
|
||||
<Purse color="#10b981" size="20"/>
|
||||
</View>
|
||||
</View>
|
||||
</Grid.Item>
|
||||
|
||||
<Grid.Item text={'实名认证'} onClick={() => navigateToPage('/user/userVerify/index')}>
|
||||
<View className="text-center">
|
||||
<View className="w-12 h-12 bg-purple-50 rounded-xl flex items-center justify-center mx-auto mb-2">
|
||||
<People color="#8b5cf6" size="20"/>
|
||||
</View>
|
||||
</View>
|
||||
</Grid.Item>
|
||||
|
||||
<Grid.Item text={'我的邀请码'} onClick={() => navigateToPage('/dealer/qrcode/index')}>
|
||||
<View className="text-center">
|
||||
<View className="w-12 h-12 bg-orange-50 rounded-xl flex items-center justify-center mx-auto mb-2">
|
||||
<QrCode color="#f59e0b" size="20"/>
|
||||
</View>
|
||||
</View>
|
||||
</Grid.Item>
|
||||
{
|
||||
(dealerUser?.userId == 33658 || dealerUser?.userId == 33677) && (
|
||||
<Grid.Item text={'提现审核'} onClick={() => navigateToPage('/dealer/withdraw/admin')}>
|
||||
<View className="text-center">
|
||||
<View className="w-12 h-12 bg-red-50 rounded-xl flex items-center justify-center mx-auto mb-2">
|
||||
<Purse color="#10b981" size="20"/>
|
||||
</View>
|
||||
</View>
|
||||
</Grid.Item>
|
||||
)
|
||||
}
|
||||
|
||||
{
|
||||
(dealerUser?.userId == 33658 || dealerUser?.userId == 33677) && (
|
||||
<Grid.Item text={'实名审核'} onClick={() => navigateToPage('/admin/userVerify/index')}>
|
||||
<View className="text-center">
|
||||
<View className="w-12 h-12 bg-red-50 rounded-xl flex items-center justify-center mx-auto mb-2">
|
||||
<People color="#10b981" size="20"/>
|
||||
</View>
|
||||
</View>
|
||||
</Grid.Item>
|
||||
)
|
||||
}
|
||||
|
||||
</Grid>
|
||||
|
||||
{/* 第二行功能 */}
|
||||
{/*<Grid*/}
|
||||
{/* columns={4}*/}
|
||||
{/* className="no-border-grid mt-4"*/}
|
||||
{/* style={{*/}
|
||||
{/* '--nutui-grid-border-color': 'transparent',*/}
|
||||
{/* '--nutui-grid-item-border-width': '0px',*/}
|
||||
{/* border: 'none'*/}
|
||||
{/* } as React.CSSProperties}*/}
|
||||
{/*>*/}
|
||||
{/* <Grid.Item text={'邀请统计'} onClick={() => navigateToPage('/dealer/invite-stats/index')}>*/}
|
||||
{/* <View className="text-center">*/}
|
||||
{/* <View className="w-12 h-12 bg-indigo-50 rounded-xl flex items-center justify-center mx-auto mb-2">*/}
|
||||
{/* <Presentation color="#6366f1" size="20"/>*/}
|
||||
{/* </View>*/}
|
||||
{/* </View>*/}
|
||||
{/* </Grid.Item>*/}
|
||||
|
||||
{/* /!* 预留其他功能位置 *!/*/}
|
||||
{/* <Grid.Item text={''}>*/}
|
||||
{/* <View className="text-center">*/}
|
||||
{/* <View className="w-12 h-12 bg-gray-50 rounded-xl flex items-center justify-center mx-auto mb-2">*/}
|
||||
{/* </View>*/}
|
||||
{/* </View>*/}
|
||||
{/* </Grid.Item>*/}
|
||||
|
||||
{/* <Grid.Item text={''}>*/}
|
||||
{/* <View className="text-center">*/}
|
||||
{/* <View className="w-12 h-12 bg-gray-50 rounded-xl flex items-center justify-center mx-auto mb-2">*/}
|
||||
{/* </View>*/}
|
||||
{/* </View>*/}
|
||||
{/* </Grid.Item>*/}
|
||||
|
||||
{/* <Grid.Item text={''}>*/}
|
||||
{/* <View className="text-center">*/}
|
||||
{/* <View className="w-12 h-12 bg-gray-50 rounded-xl flex items-center justify-center mx-auto mb-2">*/}
|
||||
{/* </View>*/}
|
||||
{/* </View>*/}
|
||||
{/* </Grid.Item>*/}
|
||||
{/*</Grid>*/}
|
||||
</ConfigProvider>
|
||||
</View>
|
||||
<View className="bg-white mx-4 mt-4 rounded-xl p-4">
|
||||
<View className="font-semibold mb-4 text-gray-800">我的推荐人</View>
|
||||
<View className={'flex items-center gap-2'}>
|
||||
<Avatar src={dealer?.dealerAvatar}/>
|
||||
<View className={'flex flex-col'}>
|
||||
<Text className="text-lg font-semibold">{dealer?.dealerName}</Text>
|
||||
<Text className="text-gray-500"
|
||||
onClick={() => Taro.makePhoneCall({phoneNumber: `${dealer?.dealerPhone}`})}>{dealer?.dealerPhone}</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 底部安全区域 */}
|
||||
<View className="h-20"></View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export default DealerIndex
|
||||
157
src/dealer/info.tsx
Normal file
157
src/dealer/info.tsx
Normal file
@@ -0,0 +1,157 @@
|
||||
import React from 'react'
|
||||
import { View, Text } from '@tarojs/components'
|
||||
import { Button, Cell, CellGroup, Tag } from '@nutui/nutui-react-taro'
|
||||
import { useDealerUser } from '@/hooks/useDealerUser'
|
||||
import Taro from '@tarojs/taro'
|
||||
|
||||
const DealerInfo: React.FC = () => {
|
||||
const {
|
||||
dealerUser,
|
||||
loading,
|
||||
error,
|
||||
refresh,
|
||||
} = useDealerUser()
|
||||
|
||||
// 跳转到申请页面
|
||||
const navigateToApply = () => {
|
||||
Taro.navigateTo({
|
||||
url: '/pages/dealer/apply/add'
|
||||
})
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<View className="p-4">
|
||||
<View className="bg-red-50 border border-red-200 rounded-lg p-4 mb-4">
|
||||
<Text className="text-red-600">{error}</Text>
|
||||
</View>
|
||||
<Button type="primary" onClick={refresh}>
|
||||
重试
|
||||
</Button>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
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>
|
||||
</View>
|
||||
|
||||
{!dealerUser ? (
|
||||
// 非经销商状态
|
||||
<View className="bg-white mx-4 mt-4 rounded-lg p-6">
|
||||
<View className="text-center py-8">
|
||||
<Text className="text-gray-500 mb-4">您还不是经销商</Text>
|
||||
<Text className="text-sm text-gray-400 mb-6">
|
||||
成为经销商后可享受专属价格和佣金收益
|
||||
</Text>
|
||||
<Button
|
||||
type="primary"
|
||||
size="large"
|
||||
onClick={navigateToApply}
|
||||
>
|
||||
申请成为经销商
|
||||
</Button>
|
||||
</View>
|
||||
</View>
|
||||
) : (
|
||||
// 经销商信息展示
|
||||
<View>
|
||||
{/* 状态卡片 */}
|
||||
<View className="bg-white mx-4 mt-4 rounded-lg p-4">
|
||||
<View className="flex items-center justify-between mb-4">
|
||||
<Text className="text-lg font-semibold">经销商状态</Text>
|
||||
<Tag>
|
||||
{dealerUser.realName}
|
||||
</Tag>
|
||||
</View>
|
||||
|
||||
{/* 基本信息 */}
|
||||
<CellGroup>
|
||||
<Cell
|
||||
title="经销商ID"
|
||||
extra={dealerUser.userId || '-'}
|
||||
/>
|
||||
<Cell
|
||||
title="refereeId"
|
||||
extra={dealerUser.refereeId || '-'}
|
||||
/>
|
||||
<Cell
|
||||
title="成为经销商时间"
|
||||
extra={
|
||||
dealerUser.money
|
||||
}
|
||||
/>
|
||||
|
||||
</CellGroup>
|
||||
|
||||
{/* 操作按钮 */}
|
||||
<View className="mt-6 gap-2">
|
||||
<Button
|
||||
type="primary"
|
||||
size="large"
|
||||
loading={loading}
|
||||
>
|
||||
检查状态
|
||||
</Button>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 经销商权益 */}
|
||||
<View className="bg-white mx-4 mt-4 rounded-lg p-4">
|
||||
<Text className="font-semibold mb-3">经销商权益</Text>
|
||||
<View className="gap-2">
|
||||
<Text className="text-sm text-gray-600">
|
||||
• 享受经销商专属价格
|
||||
</Text>
|
||||
<Text className="text-sm text-gray-600">
|
||||
• 获得推广佣金收益
|
||||
</Text>
|
||||
<Text className="text-sm text-gray-600">
|
||||
• 优先获得新品信息
|
||||
</Text>
|
||||
<Text className="text-sm text-gray-600">
|
||||
• 专属客服支持
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 佣金统计 */}
|
||||
<View className="bg-white mx-4 mt-4 rounded-lg p-4">
|
||||
<Text className="font-semibold mb-3">佣金统计</Text>
|
||||
<View className="grid grid-cols-3 gap-4">
|
||||
<View className="text-center">
|
||||
<Text className="text-lg font-bold text-blue-600">0</Text>
|
||||
<Text className="text-sm text-gray-500">今日佣金</Text>
|
||||
</View>
|
||||
<View className="text-center">
|
||||
<Text className="text-lg font-bold text-green-600">0</Text>
|
||||
<Text className="text-sm text-gray-500">本月佣金</Text>
|
||||
</View>
|
||||
<View className="text-center">
|
||||
<Text className="text-lg font-bold text-orange-600">0</Text>
|
||||
<Text className="text-sm text-gray-500">累计佣金</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* 刷新按钮 */}
|
||||
<View className="text-center py-4">
|
||||
<Text
|
||||
className="text-blue-500 text-sm"
|
||||
onClick={refresh}
|
||||
>
|
||||
点击刷新数据
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export default DealerInfo
|
||||
7
src/dealer/invite-stats/index.config.ts
Normal file
7
src/dealer/invite-stats/index.config.ts
Normal file
@@ -0,0 +1,7 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '邀请统计',
|
||||
navigationBarBackgroundColor: '#ffffff',
|
||||
navigationBarTextStyle: 'black',
|
||||
backgroundColor: '#f5f5f5',
|
||||
enablePullDownRefresh: true
|
||||
})
|
||||
336
src/dealer/invite-stats/index.tsx
Normal file
336
src/dealer/invite-stats/index.tsx
Normal file
@@ -0,0 +1,336 @@
|
||||
import React, { useState, useEffect, useCallback } from 'react'
|
||||
import { View, Text } from '@tarojs/components'
|
||||
import {
|
||||
Empty,
|
||||
Tabs,
|
||||
Loading,
|
||||
PullToRefresh,
|
||||
Card,
|
||||
} from '@nutui/nutui-react-taro'
|
||||
import {
|
||||
User,
|
||||
ArrowUp,
|
||||
Calendar,
|
||||
Share,
|
||||
Target,
|
||||
Gift
|
||||
} from '@nutui/icons-react-taro'
|
||||
import Taro from '@tarojs/taro'
|
||||
import { useDealerUser } from '@/hooks/useDealerUser'
|
||||
import {
|
||||
getInviteStats,
|
||||
getMyInviteRecords,
|
||||
getInviteRanking
|
||||
} from '@/api/invite'
|
||||
import type {
|
||||
InviteStats,
|
||||
InviteRecord
|
||||
} from '@/api/invite'
|
||||
import { businessGradients } from '@/styles/gradients'
|
||||
import {InviteRanking} from "@/api/invite/model";
|
||||
|
||||
const InviteStatsPage: React.FC = () => {
|
||||
const [activeTab, setActiveTab] = useState<string>('stats')
|
||||
const [loading, setLoading] = useState<boolean>(false)
|
||||
const [inviteStats, setInviteStats] = useState<InviteStats | null>(null)
|
||||
const [inviteRecords, setInviteRecords] = useState<InviteRecord[]>([])
|
||||
const [ranking, setRanking] = useState<InviteRanking[]>([])
|
||||
const [dateRange, setDateRange] = useState<string>('month')
|
||||
const { dealerUser } = useDealerUser()
|
||||
|
||||
// 获取邀请统计数据
|
||||
const fetchInviteStats = useCallback(async () => {
|
||||
if (!dealerUser?.userId) return
|
||||
|
||||
try {
|
||||
setLoading(true)
|
||||
const stats = await getInviteStats(dealerUser.userId)
|
||||
stats && setInviteStats(stats)
|
||||
} catch (error) {
|
||||
console.error('获取邀请统计失败:', error)
|
||||
Taro.showToast({
|
||||
title: '获取统计数据失败',
|
||||
icon: 'error'
|
||||
})
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [dealerUser?.userId])
|
||||
|
||||
// 获取邀请记录
|
||||
const fetchInviteRecords = useCallback(async () => {
|
||||
if (!dealerUser?.userId) return
|
||||
|
||||
try {
|
||||
const result = await getMyInviteRecords({
|
||||
page: 1,
|
||||
limit: 50,
|
||||
inviterId: dealerUser.userId
|
||||
})
|
||||
setInviteRecords(result?.list || [])
|
||||
} catch (error) {
|
||||
console.error('获取邀请记录失败:', error)
|
||||
}
|
||||
}, [dealerUser?.userId])
|
||||
|
||||
// 获取邀请排行榜
|
||||
const fetchRanking = useCallback(async () => {
|
||||
try {
|
||||
const result = await getInviteRanking({
|
||||
limit: 20,
|
||||
period: dateRange as 'day' | 'week' | 'month'
|
||||
})
|
||||
setRanking(result || [])
|
||||
} catch (error) {
|
||||
console.error('获取排行榜失败:', error)
|
||||
}
|
||||
}, [dateRange])
|
||||
|
||||
// 刷新数据
|
||||
const handleRefresh = async () => {
|
||||
await Promise.all([
|
||||
fetchInviteStats(),
|
||||
fetchInviteRecords(),
|
||||
fetchRanking()
|
||||
])
|
||||
}
|
||||
|
||||
// 初始化数据
|
||||
useEffect(() => {
|
||||
if (dealerUser?.userId) {
|
||||
fetchInviteStats().then()
|
||||
fetchInviteRecords().then()
|
||||
fetchRanking().then()
|
||||
}
|
||||
}, [fetchInviteStats, fetchInviteRecords, fetchRanking])
|
||||
|
||||
// 获取状态显示文本
|
||||
const getStatusText = (status: string) => {
|
||||
const statusMap: Record<string, string> = {
|
||||
'pending': '待注册',
|
||||
'registered': '已注册',
|
||||
'activated': '已激活'
|
||||
}
|
||||
return statusMap[status] || status
|
||||
}
|
||||
|
||||
// 获取状态颜色
|
||||
const getStatusColor = (status: string) => {
|
||||
const colorMap: Record<string, string> = {
|
||||
'pending': 'text-orange-500',
|
||||
'registered': 'text-blue-500',
|
||||
'activated': 'text-green-500'
|
||||
}
|
||||
return colorMap[status] || 'text-gray-500'
|
||||
}
|
||||
|
||||
// 渲染统计概览
|
||||
const renderStatsOverview = () => (
|
||||
<View className="px-4 space-y-4">
|
||||
{/* 核心数据卡片 */}
|
||||
<Card className="bg-white rounded-2xl shadow-sm">
|
||||
<View className="p-4">
|
||||
<Text className="text-lg font-semibold text-gray-800 mb-4">邀请概览</Text>
|
||||
{loading ? (
|
||||
<View className="flex items-center justify-center py-8">
|
||||
<Loading />
|
||||
</View>
|
||||
) : inviteStats ? (
|
||||
<View className="grid grid-cols-2 gap-4">
|
||||
<View className="text-center p-4 bg-blue-50 rounded-xl">
|
||||
<ArrowUp size="24" className="text-blue-500 mx-auto mb-2" />
|
||||
<Text className="text-2xl font-bold text-blue-600">
|
||||
{inviteStats.totalInvites || 0}
|
||||
</Text>
|
||||
<Text className="text-sm text-gray-600">总邀请数</Text>
|
||||
</View>
|
||||
|
||||
<View className="text-center p-4 bg-green-50 rounded-xl">
|
||||
<User size="24" className="text-green-500 mx-auto mb-2" />
|
||||
<Text className="text-2xl font-bold text-green-600">
|
||||
{inviteStats.successfulRegistrations || 0}
|
||||
</Text>
|
||||
<Text className="text-sm text-gray-600">成功注册</Text>
|
||||
</View>
|
||||
|
||||
<View className="text-center p-4 bg-purple-50 rounded-xl">
|
||||
<Target size="24" className="text-purple-500 mx-auto mb-2" />
|
||||
<Text className="text-2xl font-bold text-purple-600">
|
||||
{inviteStats.conversionRate ? `${(inviteStats.conversionRate * 100).toFixed(1)}%` : '0%'}
|
||||
</Text>
|
||||
<Text className="text-sm text-gray-600">转化率</Text>
|
||||
</View>
|
||||
|
||||
<View className="text-center p-4 bg-orange-50 rounded-xl">
|
||||
<Calendar size="24" className="text-orange-500 mx-auto mb-2" />
|
||||
<Text className="text-2xl font-bold text-orange-600">
|
||||
{inviteStats.todayInvites || 0}
|
||||
</Text>
|
||||
<Text className="text-sm text-gray-600">今日邀请</Text>
|
||||
</View>
|
||||
</View>
|
||||
) : (
|
||||
<View className="text-center py-8">
|
||||
<Text className="text-gray-500">暂无统计数据</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
</Card>
|
||||
|
||||
{/* 邀请来源分析 */}
|
||||
{inviteStats?.sourceStats && inviteStats.sourceStats.length > 0 && (
|
||||
<Card className="bg-white rounded-2xl shadow-sm">
|
||||
<View className="p-4">
|
||||
<Text className="text-lg font-semibold text-gray-800 mb-4">邀请来源分析</Text>
|
||||
<View className="space-y-3">
|
||||
{inviteStats.sourceStats.map((source, index) => (
|
||||
<View key={index} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
|
||||
<View className="flex items-center">
|
||||
<Share size="16" className="text-blue-500 mr-2" />
|
||||
<Text className="font-medium text-gray-800">{source.source}</Text>
|
||||
</View>
|
||||
<View className="text-right">
|
||||
<Text className="text-lg font-bold text-gray-800">{source.count}</Text>
|
||||
<Text className="text-sm text-gray-500">
|
||||
转化率 {source.conversionRate ? `${(source.conversionRate * 100).toFixed(1)}%` : '0%'}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
</Card>
|
||||
)}
|
||||
</View>
|
||||
)
|
||||
|
||||
// 渲染邀请记录
|
||||
const renderInviteRecords = () => (
|
||||
<View className="px-4">
|
||||
{inviteRecords.length > 0 ? (
|
||||
<View className="space-y-3">
|
||||
{inviteRecords.map((record, index) => (
|
||||
<Card key={record.id || index} className="bg-white rounded-xl shadow-sm">
|
||||
<View className="p-4">
|
||||
<View className="flex items-center justify-between mb-2">
|
||||
<Text className="font-medium text-gray-800">
|
||||
{record.inviteeName || `用户${record.inviteeId}`}
|
||||
</Text>
|
||||
<Text className={`text-sm font-medium ${getStatusColor(record.status || 'pending')}`}>
|
||||
{getStatusText(record.status || 'pending')}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<View className="flex items-center justify-between text-sm text-gray-500">
|
||||
<Text>来源: {record.source || '未知'}</Text>
|
||||
<Text>{record.inviteTime ? new Date(record.inviteTime).toLocaleDateString() : ''}</Text>
|
||||
</View>
|
||||
|
||||
{record.registerTime && (
|
||||
<Text className="text-xs text-green-600 mt-1">
|
||||
注册时间: {new Date(record.registerTime).toLocaleString()}
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
</Card>
|
||||
))}
|
||||
</View>
|
||||
) : (
|
||||
<Empty description="暂无邀请记录" />
|
||||
)}
|
||||
</View>
|
||||
)
|
||||
|
||||
// 渲染排行榜
|
||||
const renderRanking = () => (
|
||||
<View className="px-4">
|
||||
<View className="mb-4">
|
||||
<Tabs value={dateRange} onChange={() => setDateRange}>
|
||||
<Tabs.TabPane title="日榜" value="day" />
|
||||
<Tabs.TabPane title="周榜" value="week" />
|
||||
<Tabs.TabPane title="月榜" value="month" />
|
||||
</Tabs>
|
||||
</View>
|
||||
|
||||
{ranking.length > 0 ? (
|
||||
<View className="space-y-3">
|
||||
{ranking.map((item, index) => (
|
||||
<Card key={item.inviterId} className="bg-white rounded-xl shadow-sm">
|
||||
<View className="p-4 flex items-center">
|
||||
<View className="flex items-center justify-center w-8 h-8 rounded-full bg-blue-100 mr-3">
|
||||
{index < 3 ? (
|
||||
<Gift size="16" className={index === 0 ? 'text-yellow-500' : index === 1 ? 'text-gray-400' : 'text-orange-400'} />
|
||||
) : (
|
||||
<Text className="text-sm font-bold text-gray-600">{index + 1}</Text>
|
||||
)}
|
||||
</View>
|
||||
|
||||
<View className="flex-1">
|
||||
<Text className="font-medium text-gray-800">{item.inviterName}</Text>
|
||||
<Text className="text-sm text-gray-500">
|
||||
邀请 {item.inviteCount} 人 · 转化率 {item.conversionRate ? `${(item.conversionRate * 100).toFixed(1)}%` : '0%'}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<Text className="text-lg font-bold text-blue-600">{item.successCount}</Text>
|
||||
</View>
|
||||
</Card>
|
||||
))}
|
||||
</View>
|
||||
) : (
|
||||
<Empty description="暂无排行数据" />
|
||||
)}
|
||||
</View>
|
||||
)
|
||||
|
||||
if (!dealerUser) {
|
||||
return (
|
||||
<View className="bg-gray-50 min-h-screen flex items-center justify-center">
|
||||
<Loading />
|
||||
<Text className="text-gray-500 mt-2">加载中...</Text>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<View className="bg-gray-50 min-h-screen">
|
||||
{/* 头部 */}
|
||||
<View className="rounded-b-3xl p-6 mb-6 text-white relative overflow-hidden" style={{
|
||||
background: businessGradients.dealer.header
|
||||
}}>
|
||||
<View className="absolute w-32 h-32 rounded-full" style={{
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.1)',
|
||||
top: '-16px',
|
||||
right: '-16px'
|
||||
}}></View>
|
||||
|
||||
<View className="relative z-10">
|
||||
<Text className="text-2xl font-bold mb-2 text-white">邀请统计</Text>
|
||||
<Text className="text-white text-opacity-80">
|
||||
查看您的邀请效果和推广数据
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 标签页 */}
|
||||
<View className="px-4 mb-4">
|
||||
<Tabs value={activeTab} onChange={() => setActiveTab}>
|
||||
<Tabs.TabPane title="统计概览" value="stats" />
|
||||
<Tabs.TabPane title="邀请记录" value="records" />
|
||||
<Tabs.TabPane title="排行榜" value="ranking" />
|
||||
</Tabs>
|
||||
</View>
|
||||
|
||||
{/* 内容区域 */}
|
||||
<PullToRefresh onRefresh={handleRefresh}>
|
||||
<View className="pb-6">
|
||||
{activeTab === 'stats' && renderStatsOverview()}
|
||||
{activeTab === 'records' && renderInviteRecords()}
|
||||
{activeTab === 'ranking' && renderRanking()}
|
||||
</View>
|
||||
</PullToRefresh>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export default InviteStatsPage
|
||||
3
src/dealer/orders/index.config.ts
Normal file
3
src/dealer/orders/index.config.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '电费订单'
|
||||
})
|
||||
453
src/dealer/orders/index.tsx
Normal file
453
src/dealer/orders/index.tsx
Normal file
@@ -0,0 +1,453 @@
|
||||
import React, {useState, useEffect, useCallback} from 'react'
|
||||
import {View, Text, ScrollView} from '@tarojs/components'
|
||||
import {Empty, PullToRefresh, Space, Loading, DatePicker, Button, Picker} from '@nutui/nutui-react-taro'
|
||||
import {ArrowDown} from '@nutui/icons-react-taro'
|
||||
import Taro from '@tarojs/taro'
|
||||
import {pageShopDealerOrder} from '@/api/shop/shopDealerOrder'
|
||||
import {useDealerUser} from '@/hooks/useDealerUser'
|
||||
import type {ShopDealerOrder} from '@/api/shop/shopDealerOrder/model'
|
||||
import {useUser} from "@/hooks/useUser";
|
||||
import {pageShopDealerReferee} from "@/api/shop/shopDealerReferee";
|
||||
|
||||
interface OrderWithDetails extends ShopDealerOrder {
|
||||
orderNo?: string
|
||||
customerName?: string
|
||||
userCommission?: string
|
||||
}
|
||||
|
||||
interface PickerOption {
|
||||
text: string | number
|
||||
value: string | number
|
||||
disabled?: boolean
|
||||
children?: PickerOption[]
|
||||
className?: string | number
|
||||
}
|
||||
|
||||
const DealerOrder: React.FC = () => {
|
||||
const [loading, setLoading] = useState<boolean>(false)
|
||||
const d = new Date()
|
||||
const currMonth = `${d.getFullYear()}${d.getMonth() + 1}`;
|
||||
const currDate = `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}`;
|
||||
const [date, setDate] = useState(currMonth)
|
||||
const [show1, setShow1] = useState(false)
|
||||
const [refreshing, setRefreshing] = useState<boolean>(false)
|
||||
const [loadingMore, setLoadingMore] = useState<boolean>(false)
|
||||
const [orders, setOrders] = useState<OrderWithDetails[]>([])
|
||||
const [currentPage, setCurrentPage] = useState<number>(1)
|
||||
const [hasMore, setHasMore] = useState<boolean>(true)
|
||||
const [users, setUsers] = useState<any[]>([])
|
||||
const [users2, setUsers2] = useState<any[]>([])
|
||||
const [visible1, setVisible1] = useState(false)
|
||||
const [text1, setText1] = useState('')
|
||||
const [selectedUserId, setSelectedUserId] = useState<number | undefined>(undefined)
|
||||
const [visible2, setVisible2] = useState(false)
|
||||
const [text2, setText2] = useState('')
|
||||
const [selectedFirstUserId, setSelectedFirstUserId] = useState<number | undefined>(undefined)
|
||||
const [visible3, setVisible3] = useState(false)
|
||||
// const [text3, setText3] = useState('')
|
||||
const [selectedSecondUserId, setSelectedSecondUserId] = useState<number | undefined>(undefined)
|
||||
|
||||
|
||||
const {dealerUser} = useDealerUser()
|
||||
const {user} = useUser()
|
||||
|
||||
// 获取订单数据
|
||||
const fetchOrders = useCallback(async (page: number = 1, isRefresh: boolean = false) => {
|
||||
if (!dealerUser?.userId) return
|
||||
|
||||
try {
|
||||
if (isRefresh) {
|
||||
setRefreshing(true)
|
||||
} else if (page === 1) {
|
||||
setLoading(true)
|
||||
} else {
|
||||
setLoadingMore(true)
|
||||
}
|
||||
|
||||
let where = {
|
||||
userId: selectedUserId,
|
||||
firstUserId: selectedSecondUserId,
|
||||
secondUserId: selectedSecondUserId,
|
||||
isInvalid: 0,
|
||||
isSettled: 1,
|
||||
resourceId: user?.userId,
|
||||
month: date,
|
||||
page,
|
||||
limit: 10
|
||||
};
|
||||
if (hasRole('superAdmin') || hasRole('admin')) {
|
||||
console.log('>>>>>>>>>>>>是管理员')
|
||||
where = {...where, resourceId: undefined}
|
||||
}
|
||||
if(selectedUserId){
|
||||
where = {...where,userId: selectedUserId}
|
||||
}
|
||||
if(selectedFirstUserId){
|
||||
where = {...where,secondUserId: selectedFirstUserId}
|
||||
}
|
||||
|
||||
const result = await pageShopDealerOrder(where)
|
||||
|
||||
if (result?.list) {
|
||||
const newOrders = result.list.map(order => ({
|
||||
...order,
|
||||
orderNo: `${order.orderNo}`,
|
||||
customerName: `用户${order.userId}`,
|
||||
userCommission: order.firstMoney || '0.00'
|
||||
}))
|
||||
|
||||
if (page === 1) {
|
||||
setOrders(newOrders)
|
||||
} else {
|
||||
setOrders(prev => [...prev, ...newOrders])
|
||||
}
|
||||
|
||||
setHasMore(newOrders.length === 10)
|
||||
setCurrentPage(page)
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('获取分销订单失败:', error)
|
||||
Taro.showToast({
|
||||
title: '获取订单失败',
|
||||
icon: 'error'
|
||||
})
|
||||
} finally {
|
||||
setLoading(false)
|
||||
setRefreshing(false)
|
||||
setLoadingMore(false)
|
||||
}
|
||||
}, [dealerUser?.userId, date, selectedUserId, selectedFirstUserId, selectedSecondUserId])
|
||||
|
||||
// 下拉刷新
|
||||
const handleRefresh = async () => {
|
||||
await fetchOrders(1, true)
|
||||
}
|
||||
|
||||
// 加载更多
|
||||
const handleLoadMore = async () => {
|
||||
if (!loadingMore && hasMore) {
|
||||
await fetchOrders(currentPage + 1)
|
||||
}
|
||||
}
|
||||
|
||||
// const getResourceId = () => {
|
||||
// if (hasRole('superAdmin')) {
|
||||
// return undefined
|
||||
// }
|
||||
// if (hasRole('admin')) {
|
||||
// return user?.userId
|
||||
// }
|
||||
// return user?.userId;
|
||||
// }
|
||||
|
||||
// 检查是否有特定角色
|
||||
const hasRole = (roleCode: string) => {
|
||||
if (!user || !user.roles) {
|
||||
return false;
|
||||
}
|
||||
return user.roles.some(role => role.roleCode === roleCode);
|
||||
}
|
||||
|
||||
const confirmPicker1 = (
|
||||
options: PickerOption[],
|
||||
values: (string | number)[]
|
||||
) => {
|
||||
if(values && values.length > 0){
|
||||
const userId = Number(values[0])
|
||||
options.forEach((option: any) => {
|
||||
setText1(`${option.text}`)
|
||||
})
|
||||
// 清空其他两个筛选条件
|
||||
setSelectedFirstUserId(undefined)
|
||||
setSelectedSecondUserId(undefined)
|
||||
setText2('')
|
||||
// setText3('')
|
||||
// 设置业务员筛选条件
|
||||
setSelectedUserId(userId)
|
||||
// 关闭选择器
|
||||
setVisible1(false)
|
||||
}
|
||||
}
|
||||
const confirmPicker2 = (
|
||||
options: PickerOption[],
|
||||
values: (string | number)[]
|
||||
) => {
|
||||
if(values && values.length > 0){
|
||||
const firstUserId = Number(values[0])
|
||||
options.forEach((option: any) => {
|
||||
setText2(`${option.text}`)
|
||||
})
|
||||
// 清空其他两个筛选条件
|
||||
// setSelectedUserId(undefined)
|
||||
// setSelectedSecondUserId(undefined)
|
||||
// setText1('')
|
||||
// setText3('')
|
||||
// 设置渠道一筛选条件
|
||||
setSelectedFirstUserId(firstUserId)
|
||||
// 关闭选择器
|
||||
setVisible2(false)
|
||||
}
|
||||
}
|
||||
const confirmPicker3 = (
|
||||
_: PickerOption[],
|
||||
values: (string | number)[]
|
||||
) => {
|
||||
if(values && values.length > 0){
|
||||
const secondUserId = Number(values[0])
|
||||
// options.forEach((option: any) => {
|
||||
// setText3(`${option.text}`)
|
||||
// })
|
||||
// 清空其他两个筛选条件
|
||||
setSelectedUserId(undefined)
|
||||
setSelectedFirstUserId(undefined)
|
||||
setText1('')
|
||||
setText2('')
|
||||
// 设置渠道二筛选条件
|
||||
setSelectedSecondUserId(secondUserId)
|
||||
// 关闭选择器
|
||||
setVisible3(false)
|
||||
}
|
||||
}
|
||||
|
||||
const getStatusText = (isSettled?: number, isInvalid?: number) => {
|
||||
if (isInvalid === 1) return '未签约'
|
||||
if (isSettled === 1) return '已结算'
|
||||
return '待结算'
|
||||
}
|
||||
|
||||
function fetchUsers() {
|
||||
pageShopDealerReferee({
|
||||
dealerId: selectedFirstUserId || Taro.getStorageSync('UserId'),
|
||||
isAdmin: true,
|
||||
limit: 100
|
||||
}).then(res => {
|
||||
const data = res?.list.map(d => {
|
||||
return {
|
||||
text: d.nickname,
|
||||
value: d.userId,
|
||||
disabled: false,
|
||||
children: [],
|
||||
className: ''
|
||||
}
|
||||
})
|
||||
setUsers(data || [])
|
||||
})
|
||||
pageShopDealerReferee({
|
||||
dealerId: selectedUserId || Taro.getStorageSync('UserId'),
|
||||
limit: 100
|
||||
}).then(res => {
|
||||
const data = res?.list.map(d => {
|
||||
return {
|
||||
text: d.nickname,
|
||||
value: d.userId,
|
||||
disabled: false,
|
||||
children: [],
|
||||
className: ''
|
||||
}
|
||||
})
|
||||
setUsers2(data || [])
|
||||
})
|
||||
}
|
||||
|
||||
// 初始化加载数据
|
||||
useEffect(() => {
|
||||
if (dealerUser?.userId) {
|
||||
fetchOrders(1).then()
|
||||
}
|
||||
fetchUsers()
|
||||
}, [fetchOrders, date])
|
||||
|
||||
useEffect(() => {
|
||||
},[])
|
||||
|
||||
const renderOrderItem = (order: OrderWithDetails) => (
|
||||
<View key={order.id} className="bg-white rounded-lg p-4 mb-3 shadow-sm">
|
||||
<View className="flex justify-between items-start mb-1">
|
||||
<Text className="font-semibold text-gray-800">
|
||||
订单号：{order.orderNo}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<View className="flex justify-between items-center mb-1">
|
||||
<Text className="text-sm text-gray-400">
|
||||
客户名称：{order.title}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
{/* 添加收益用户信息显示 */}
|
||||
<View className="flex justify-between items-center mb-1 mt-2">
|
||||
<Text className="text-sm text-gray-400">
|
||||
收益计算
|
||||
</Text>
|
||||
</View>
|
||||
<View className="mb-1">
|
||||
{/* 一级佣金30 */}
|
||||
{(hasRole('superAdmin') || hasRole('admin') || Taro.getStorageSync('UserId') != order.thirdUserId) && (
|
||||
<>
|
||||
{Taro.getStorageSync('UserId') != order.secondUserId && (
|
||||
<>
|
||||
{(order.firstNickname || order.firstUserId) && (
|
||||
<Text className="text-sm text-gray-400 block">
|
||||
一级佣金：{order.firstNickname || `用户${order.firstUserId}`} (¥{order.firstMoney || '0.00'})
|
||||
</Text>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{(order.secondUserId || order.secondUserId) && (
|
||||
<Text className="text-sm text-gray-400 block">
|
||||
二级佣金：{order.secondNickname || `用户${order.secondUserId}`} (¥{order.secondMoney || '0.00'})
|
||||
</Text>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* 三级分销商 */}
|
||||
{(order.thirdUserId !== undefined && order.thirdUserId > 0) && (
|
||||
<Text className="text-sm text-gray-400 block">
|
||||
三级佣金：{order.thirdNickname || `用户${order.thirdUserId}`} (¥{order.thirdMoney || '0.00'})
|
||||
</Text>
|
||||
)}
|
||||
|
||||
</View>
|
||||
|
||||
<View className="flex justify-between items-center mt-2">
|
||||
<Text className="text-sm text-gray-400">
|
||||
结算电量：{order.degreePrice}
|
||||
</Text>
|
||||
<Text className="text-sm text-gray-400">
|
||||
结算金额：{order.settledPrice}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<View className="flex justify-between items-center mb-1">
|
||||
<Text className="text-sm text-gray-400">
|
||||
单价：{order.price}
|
||||
</Text>
|
||||
<Text className="text-sm text-gray-400">
|
||||
税费：{order.rate}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<View className="flex justify-between items-center mb-1">
|
||||
<Text className="text-sm text-gray-400">
|
||||
实发金额：{order.payPrice}
|
||||
</Text>
|
||||
<Text className="text-sm text-gray-400">
|
||||
结算月份：{order.month}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<View className="flex justify-between items-center mb-1">
|
||||
<Text className="text-sm text-gray-400">
|
||||
结算状态：{getStatusText(order.isSettled, order.isInvalid)}
|
||||
</Text>
|
||||
<Text className="text-sm text-gray-400">
|
||||
{order.settleTime}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
</View>
|
||||
)
|
||||
|
||||
return (
|
||||
<View className="min-h-screen bg-gray-50">
|
||||
<PullToRefresh
|
||||
onRefresh={handleRefresh}
|
||||
disabled={refreshing}
|
||||
pullingText="下拉刷新"
|
||||
canReleaseText="释放刷新"
|
||||
refreshingText="刷新中..."
|
||||
completeText="刷新完成"
|
||||
>
|
||||
<ScrollView
|
||||
scrollY
|
||||
className={'h-screen'}
|
||||
onScrollToLower={handleLoadMore}
|
||||
lowerThreshold={50}
|
||||
>
|
||||
{/*筛选工具条*/}
|
||||
<View
|
||||
className={'p-4 flex items-center justify-between'}
|
||||
>
|
||||
<View className={'select-month'}>
|
||||
<Text className={'text-sm mx-1'} onClick={() => setShow1(true)}>{date ? `${date}` : '请选择'}</Text>
|
||||
<ArrowDown size={10} className={'text-gray-400'} onClick={() => setShow1(true)}/>
|
||||
</View>
|
||||
<Space className={'select-user'}>
|
||||
<Button size={'mini'} onClick={() => setVisible1(!visible1)}>{text1 || '业务员'}</Button>
|
||||
{/*{selectedUserId && <Button size={'mini'} onClick={() => setVisible2(!visible2)}>{text2 || '渠道员'}</Button>}*/}
|
||||
<Button size={'mini'} onClick={() => setVisible2(!visible3)}>{text2 || '渠道员'}</Button>
|
||||
</Space>
|
||||
</View>
|
||||
{/*账单列表*/}
|
||||
<View className="px-4">
|
||||
{loading && orders.length === 0 ? (
|
||||
<View className="text-center py-8">
|
||||
<Loading/>
|
||||
<Text className="text-gray-500 mt-2">加载中...</Text>
|
||||
</View>
|
||||
) : orders.length > 0 ? (
|
||||
<>
|
||||
{orders.map(renderOrderItem)}
|
||||
{loadingMore && (
|
||||
<View className="text-center py-4">
|
||||
<Loading/>
|
||||
<Text className="text-gray-500 mt-1 text-sm">加载更多...</Text>
|
||||
</View>
|
||||
)}
|
||||
{!hasMore && orders.length > 0 && (
|
||||
<View className="text-center py-4">
|
||||
<Text className="text-gray-400 text-sm">没有更多数据了</Text>
|
||||
</View>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<Empty description="暂无电费订单" style={{
|
||||
backgroundColor: 'transparent'
|
||||
}}/>
|
||||
)}
|
||||
</View>
|
||||
</ScrollView>
|
||||
</PullToRefresh>
|
||||
<DatePicker
|
||||
title="日期选择"
|
||||
visible={show1}
|
||||
pickerProps={{
|
||||
popupProps: {zIndex: 1220},
|
||||
}}
|
||||
type={'year-month'}
|
||||
defaultValue={new Date(`${currDate}`)}
|
||||
showChinese
|
||||
onCancel={() => setShow1(false)}
|
||||
onConfirm={(_, values) => {
|
||||
setShow1(false)
|
||||
setDate(`${values[0]}${values[1]}`)
|
||||
}}
|
||||
/>
|
||||
<Picker
|
||||
title="请选择"
|
||||
visible={visible1}
|
||||
options={users}
|
||||
onConfirm={(list, values) => confirmPicker1(list, values)}
|
||||
onClose={() => setVisible1(false)}
|
||||
/>
|
||||
<Picker
|
||||
title="请选择"
|
||||
visible={visible2}
|
||||
options={users2}
|
||||
onConfirm={(list, values) => confirmPicker2(list, values)}
|
||||
onClose={() => setVisible2(false)}
|
||||
/>
|
||||
<Picker
|
||||
title="请选择"
|
||||
visible={visible3}
|
||||
options={users}
|
||||
onConfirm={(list, values) => confirmPicker3(list, values)}
|
||||
onClose={() => setVisible3(false)}
|
||||
/>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export default DealerOrder
|
||||
3
src/dealer/qrcode/index.config.ts
Normal file
3
src/dealer/qrcode/index.config.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '推广二维码'
|
||||
})
|
||||
398
src/dealer/qrcode/index.tsx
Normal file
398
src/dealer/qrcode/index.tsx
Normal file
@@ -0,0 +1,398 @@
|
||||
import React, {useState, useEffect} from 'react'
|
||||
import {View, Text, Image} from '@tarojs/components'
|
||||
import {Button, Loading} from '@nutui/nutui-react-taro'
|
||||
import {Download, QrCode} from '@nutui/icons-react-taro'
|
||||
import Taro from '@tarojs/taro'
|
||||
import {useDealerUser} from '@/hooks/useDealerUser'
|
||||
import {generateInviteCode} from '@/api/invite'
|
||||
// import type {InviteStats} from '@/api/invite'
|
||||
import {businessGradients} from '@/styles/gradients'
|
||||
|
||||
const DealerQrcode: React.FC = () => {
|
||||
const [miniProgramCodeUrl, setMiniProgramCodeUrl] = useState<string>('')
|
||||
const [loading, setLoading] = useState<boolean>(false)
|
||||
// const [inviteStats, setInviteStats] = useState<InviteStats | null>(null)
|
||||
// const [statsLoading, setStatsLoading] = useState<boolean>(false)
|
||||
const {dealerUser} = useDealerUser()
|
||||
|
||||
// 生成小程序码
|
||||
const generateMiniProgramCode = async () => {
|
||||
if (!dealerUser?.userId) {
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
setLoading(true)
|
||||
|
||||
// 生成邀请小程序码
|
||||
const codeUrl = await generateInviteCode(dealerUser.userId)
|
||||
|
||||
if (codeUrl) {
|
||||
setMiniProgramCodeUrl(codeUrl)
|
||||
} else {
|
||||
throw new Error('返回的小程序码URL为空')
|
||||
}
|
||||
} catch (error: any) {
|
||||
Taro.showToast({
|
||||
title: error.message || '生成小程序码失败',
|
||||
icon: 'error'
|
||||
})
|
||||
// 清空之前的二维码
|
||||
setMiniProgramCodeUrl('')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
// 获取邀请统计数据
|
||||
// const fetchInviteStats = async () => {
|
||||
// if (!dealerUser?.userId) return
|
||||
//
|
||||
// try {
|
||||
// setStatsLoading(true)
|
||||
// const stats = await getInviteStats(dealerUser.userId)
|
||||
// stats && setInviteStats(stats)
|
||||
// } catch (error) {
|
||||
// // 静默处理错误，不影响用户体验
|
||||
// } finally {
|
||||
// setStatsLoading(false)
|
||||
// }
|
||||
// }
|
||||
|
||||
// 初始化生成小程序码和获取统计数据
|
||||
useEffect(() => {
|
||||
if (dealerUser?.userId) {
|
||||
generateMiniProgramCode()
|
||||
// fetchInviteStats()
|
||||
}
|
||||
}, [dealerUser?.userId])
|
||||
|
||||
// 保存小程序码到相册
|
||||
const saveMiniProgramCode = async () => {
|
||||
if (!miniProgramCodeUrl) {
|
||||
Taro.showToast({
|
||||
title: '小程序码未生成',
|
||||
icon: 'error'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
// 先下载图片到本地
|
||||
const res = await Taro.downloadFile({
|
||||
url: miniProgramCodeUrl
|
||||
})
|
||||
|
||||
if (res.statusCode === 200) {
|
||||
// 保存到相册
|
||||
await Taro.saveImageToPhotosAlbum({
|
||||
filePath: res.tempFilePath
|
||||
})
|
||||
|
||||
Taro.showToast({
|
||||
title: '保存成功',
|
||||
icon: 'success'
|
||||
})
|
||||
}
|
||||
} catch (error: any) {
|
||||
if (error.errMsg?.includes('auth deny')) {
|
||||
Taro.showModal({
|
||||
title: '提示',
|
||||
content: '需要您授权保存图片到相册',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
Taro.openSetting()
|
||||
}
|
||||
}
|
||||
})
|
||||
} else {
|
||||
Taro.showToast({
|
||||
title: '保存失败',
|
||||
icon: 'error'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 复制邀请信息
|
||||
// const copyInviteInfo = () => {
|
||||
// if (!dealerUser?.userId) {
|
||||
// Taro.showToast({
|
||||
// title: '用户信息未加载',
|
||||
// icon: 'error'
|
||||
// })
|
||||
// return
|
||||
// }
|
||||
//
|
||||
// const inviteText = `🎉 邀请您加入我的团队！
|
||||
//
|
||||
// 扫描小程序码或搜索"九云售电云"小程序，即可享受优质商品和服务！
|
||||
//
|
||||
// 💰 成为我的团队成员，一起赚取丰厚佣金
|
||||
// 🎁 新用户专享优惠等你来拿
|
||||
//
|
||||
// 邀请码：${dealerUser.userId}
|
||||
// 快来加入我们吧！`
|
||||
//
|
||||
// Taro.setClipboardData({
|
||||
// data: inviteText,
|
||||
// success: () => {
|
||||
// Taro.showToast({
|
||||
// title: '邀请信息已复制',
|
||||
// icon: 'success'
|
||||
// })
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
|
||||
// 分享小程序码
|
||||
// const shareMiniProgramCode = () => {
|
||||
// if (!dealerUser?.userId) {
|
||||
// Taro.showToast({
|
||||
// title: '用户信息未加载',
|
||||
// icon: 'error'
|
||||
// })
|
||||
// return
|
||||
// }
|
||||
//
|
||||
// // 小程序分享
|
||||
// Taro.showShareMenu({
|
||||
// withShareTicket: true,
|
||||
// showShareItems: ['shareAppMessage']
|
||||
// })
|
||||
// }
|
||||
|
||||
if (!dealerUser) {
|
||||
return (
|
||||
<View className="bg-gray-50 min-h-screen flex items-center justify-center">
|
||||
<Loading/>
|
||||
<Text className="text-gray-500 mt-2">加载中...</Text>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<View className="bg-gray-50 min-h-screen">
|
||||
{/* 头部卡片 */}
|
||||
<View className="rounded-b-3xl p-6 mb-6 text-white relative overflow-hidden" style={{
|
||||
background: businessGradients.dealer.header
|
||||
}}>
|
||||
{/* 装饰背景 */}
|
||||
<View className="absolute w-32 h-32 rounded-full" style={{
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.1)',
|
||||
top: '-16px',
|
||||
right: '-16px'
|
||||
}}></View>
|
||||
|
||||
<View className="relative z-10 flex flex-col">
|
||||
<Text className="text-2xl font-bold mb-2 text-white">我的邀请小程序码</Text>
|
||||
<Text className="text-white text-opacity-80">
|
||||
分享小程序码邀请好友，获得丰厚佣金奖励
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View className="px-4">
|
||||
{/* 小程序码展示区 */}
|
||||
<View className="bg-white rounded-2xl p-6 mb-6 shadow-sm">
|
||||
<View className="text-center">
|
||||
{loading ? (
|
||||
<View className="w-48 h-48 mx-auto mb-4 flex items-center justify-center bg-gray-50 rounded-xl">
|
||||
<Loading/>
|
||||
<Text className="text-gray-500 mt-2">生成中...</Text>
|
||||
</View>
|
||||
) : miniProgramCodeUrl ? (
|
||||
<View className="w-48 h-48 mx-auto mb-4 bg-white rounded-xl shadow-sm p-4">
|
||||
<Image
|
||||
src={miniProgramCodeUrl}
|
||||
className="w-full h-full"
|
||||
mode="aspectFit"
|
||||
onError={() => {
|
||||
Taro.showModal({
|
||||
title: '二维码加载失败',
|
||||
content: '请检查网络连接或联系管理员',
|
||||
showCancel: true,
|
||||
confirmText: '重新生成',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
generateMiniProgramCode();
|
||||
}
|
||||
}
|
||||
});
|
||||
}}
|
||||
|
||||
/>
|
||||
</View>
|
||||
) : (
|
||||
<View className="w-48 h-48 mx-auto mb-4 flex items-center justify-center bg-gray-50 rounded-xl">
|
||||
<QrCode size="48" className="text-gray-400 mb-2"/>
|
||||
<Text className="text-gray-500">小程序码生成失败</Text>
|
||||
<Button
|
||||
size="small"
|
||||
type="primary"
|
||||
className="mt-2"
|
||||
onClick={generateMiniProgramCode}
|
||||
>
|
||||
重新生成
|
||||
</Button>
|
||||
</View>
|
||||
)}
|
||||
|
||||
<View className="text-lg font-semibold text-gray-800 mb-2">
|
||||
扫码加入我的团队
|
||||
</View>
|
||||
<View className="text-sm text-gray-500 mb-4">
|
||||
好友扫描小程序码即可直接进入小程序并建立邀请关系
|
||||
</View>
|
||||
|
||||
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 操作按钮 */}
|
||||
<View className={'gap-2'}>
|
||||
<View className={'my-2'}>
|
||||
<Button
|
||||
type="primary"
|
||||
size="large"
|
||||
block
|
||||
icon={<Download/>}
|
||||
onClick={saveMiniProgramCode}
|
||||
disabled={!miniProgramCodeUrl || loading}
|
||||
>
|
||||
保存小程序码到相册
|
||||
</Button>
|
||||
</View>
|
||||
{/*<View className={'my-2 bg-white'}>*/}
|
||||
{/* <Button*/}
|
||||
{/* size="large"*/}
|
||||
{/* block*/}
|
||||
{/* icon={<Copy/>}*/}
|
||||
{/* onClick={copyInviteInfo}*/}
|
||||
{/* disabled={!dealerUser?.userId || loading}*/}
|
||||
{/* >*/}
|
||||
{/* 复制邀请信息*/}
|
||||
{/* </Button>*/}
|
||||
{/*</View>*/}
|
||||
{/*<View className={'my-2 bg-white'}>*/}
|
||||
{/* <Button*/}
|
||||
{/* size="large"*/}
|
||||
{/* block*/}
|
||||
{/* fill="outline"*/}
|
||||
{/* icon={<Share/>}*/}
|
||||
{/* onClick={shareMiniProgramCode}*/}
|
||||
{/* disabled={!dealerUser?.userId || loading}*/}
|
||||
{/* >*/}
|
||||
{/* 分享给好友*/}
|
||||
{/* </Button>*/}
|
||||
{/*</View>*/}
|
||||
</View>
|
||||
|
||||
{/* 推广说明 */}
|
||||
<View className="bg-white rounded-2xl p-4 mt-6 hidden">
|
||||
<Text className="font-semibold text-gray-800 mb-3">推广说明</Text>
|
||||
<View className="space-y-2">
|
||||
<View className="flex items-start">
|
||||
<View className="w-2 h-2 bg-blue-500 rounded-full mt-2 mr-3 flex-shrink-0"></View>
|
||||
<Text className="text-sm text-gray-600">
|
||||
好友通过您的二维码或链接注册成为您的团队成员
|
||||
</Text>
|
||||
</View>
|
||||
<View className="flex items-start">
|
||||
<View className="w-2 h-2 bg-green-500 rounded-full mt-2 mr-3 flex-shrink-0"></View>
|
||||
<Text className="text-sm text-gray-600">
|
||||
好友购买商品时，您可获得相应层级的分销佣金
|
||||
</Text>
|
||||
</View>
|
||||
<View className="flex items-start">
|
||||
<View className="w-2 h-2 bg-purple-500 rounded-full mt-2 mr-3 flex-shrink-0"></View>
|
||||
<Text className="text-sm text-gray-600">
|
||||
支持三级分销，团队越大收益越多
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 邀请统计数据 */}
|
||||
{/*<View className="bg-white rounded-2xl p-4 mt-4 mb-6">*/}
|
||||
{/* <Text className="font-semibold text-gray-800 mb-3">我的邀请数据</Text>*/}
|
||||
{/* {statsLoading ? (*/}
|
||||
{/* <View className="flex items-center justify-center py-8">*/}
|
||||
{/* <Loading/>*/}
|
||||
{/* <Text className="text-gray-500 mt-2">加载中...</Text>*/}
|
||||
{/* </View>*/}
|
||||
{/* ) : inviteStats ? (*/}
|
||||
{/* <View className="space-y-4">*/}
|
||||
{/* <View className="grid grid-cols-2 gap-4">*/}
|
||||
{/* <View className="text-center">*/}
|
||||
{/* <Text className="text-2xl font-bold text-blue-500">*/}
|
||||
{/* {inviteStats.totalInvites || 0}*/}
|
||||
{/* </Text>*/}
|
||||
{/* <Text className="text-sm text-gray-500">总邀请数</Text>*/}
|
||||
{/* </View>*/}
|
||||
{/* <View className="text-center">*/}
|
||||
{/* <Text className="text-2xl font-bold text-green-500">*/}
|
||||
{/* {inviteStats.successfulRegistrations || 0}*/}
|
||||
{/* </Text>*/}
|
||||
{/* <Text className="text-sm text-gray-500">成功注册</Text>*/}
|
||||
{/* </View>*/}
|
||||
{/* </View>*/}
|
||||
|
||||
{/* <View className="grid grid-cols-2 gap-4">*/}
|
||||
{/* <View className="text-center">*/}
|
||||
{/* <Text className="text-2xl font-bold text-purple-500">*/}
|
||||
{/* {inviteStats.conversionRate ? `${(inviteStats.conversionRate * 100).toFixed(1)}%` : '0%'}*/}
|
||||
{/* </Text>*/}
|
||||
{/* <Text className="text-sm text-gray-500">转化率</Text>*/}
|
||||
{/* </View>*/}
|
||||
{/* <View className="text-center">*/}
|
||||
{/* <Text className="text-2xl font-bold text-orange-500">*/}
|
||||
{/* {inviteStats.todayInvites || 0}*/}
|
||||
{/* </Text>*/}
|
||||
{/* <Text className="text-sm text-gray-500">今日邀请</Text>*/}
|
||||
{/* </View>*/}
|
||||
{/* </View>*/}
|
||||
|
||||
{/* /!* 邀请来源统计 *!/*/}
|
||||
{/* {inviteStats.sourceStats && inviteStats.sourceStats.length > 0 && (*/}
|
||||
{/* <View className="mt-4">*/}
|
||||
{/* <Text className="text-sm font-medium text-gray-700 mb-2">邀请来源分布</Text>*/}
|
||||
{/* <View className="space-y-2">*/}
|
||||
{/* {inviteStats.sourceStats.map((source, index) => (*/}
|
||||
{/* <View key={index} className="flex items-center justify-between py-2 px-3 bg-gray-50 rounded-lg">*/}
|
||||
{/* <View className="flex items-center">*/}
|
||||
{/* <View className="w-3 h-3 rounded-full bg-blue-500 mr-2"></View>*/}
|
||||
{/* <Text className="text-sm text-gray-700">{source.source}</Text>*/}
|
||||
{/* </View>*/}
|
||||
{/* <View className="text-right">*/}
|
||||
{/* <Text className="text-sm font-medium text-gray-800">{source.count}</Text>*/}
|
||||
{/* <Text className="text-xs text-gray-500">*/}
|
||||
{/* {source.conversionRate ? `${(source.conversionRate * 100).toFixed(1)}%` : '0%'}*/}
|
||||
{/* </Text>*/}
|
||||
{/* </View>*/}
|
||||
{/* </View>*/}
|
||||
{/* ))}*/}
|
||||
{/* </View>*/}
|
||||
{/* </View>*/}
|
||||
{/* )}*/}
|
||||
{/* </View>*/}
|
||||
{/* ) : (*/}
|
||||
{/* <View className="text-center py-8">*/}
|
||||
{/* <View className="text-gray-500">暂无邀请数据</View>*/}
|
||||
{/* <Button*/}
|
||||
{/* size="small"*/}
|
||||
{/* type="primary"*/}
|
||||
{/* className="mt-2"*/}
|
||||
{/* onClick={fetchInviteStats}*/}
|
||||
{/* >*/}
|
||||
{/* 刷新数据*/}
|
||||
{/* </Button>*/}
|
||||
{/* </View>*/}
|
||||
{/* )}*/}
|
||||
{/*</View>*/}
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export default DealerQrcode
|
||||
3
src/dealer/team/index.config.ts
Normal file
3
src/dealer/team/index.config.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '邀请推广'
|
||||
})
|
||||
444
src/dealer/team/index.tsx
Normal file
444
src/dealer/team/index.tsx
Normal file
@@ -0,0 +1,444 @@
|
||||
import React, {useState, useEffect, useCallback} from 'react'
|
||||
import {View, Text} from '@tarojs/components'
|
||||
import {Phone, Edit, Message} from '@nutui/icons-react-taro'
|
||||
import {Space, Empty, Avatar, Button} from '@nutui/nutui-react-taro'
|
||||
import Taro from '@tarojs/taro'
|
||||
import {useDealerUser} from '@/hooks/useDealerUser'
|
||||
import {listShopDealerReferee} from '@/api/shop/shopDealerReferee'
|
||||
import {pageShopDealerOrder} from '@/api/shop/shopDealerOrder'
|
||||
import type {ShopDealerReferee} from '@/api/shop/shopDealerReferee/model'
|
||||
import FixedButton from "@/components/FixedButton";
|
||||
import navTo from "@/utils/common";
|
||||
import {updateUser} from "@/api/system/user";
|
||||
|
||||
interface TeamMemberWithStats extends ShopDealerReferee {
|
||||
name?: string
|
||||
avatar?: string
|
||||
nickname?: string;
|
||||
alias?: string;
|
||||
phone?: string;
|
||||
orderCount?: number
|
||||
commission?: string
|
||||
status?: 'active' | 'inactive'
|
||||
subMembers?: number
|
||||
joinTime?: string
|
||||
dealerAvatar?: string;
|
||||
dealerName?: string;
|
||||
dealerPhone?: string;
|
||||
}
|
||||
|
||||
// 层级信息接口
|
||||
interface LevelInfo {
|
||||
dealerId: number
|
||||
dealerName?: string
|
||||
level: number
|
||||
}
|
||||
|
||||
const DealerTeam: React.FC = () => {
|
||||
const [teamMembers, setTeamMembers] = useState<TeamMemberWithStats[]>([])
|
||||
const {dealerUser} = useDealerUser()
|
||||
const [dealerId, setDealerId] = useState<number>()
|
||||
// 层级栈，用于支持返回上一层
|
||||
const [levelStack, setLevelStack] = useState<LevelInfo[]>([])
|
||||
const [loading, setLoading] = useState(false)
|
||||
// 当前查看的用户名称
|
||||
const [currentDealerName, setCurrentDealerName] = useState<string>('')
|
||||
|
||||
// 异步加载成员统计数据
|
||||
const loadMemberStats = async (members: TeamMemberWithStats[]) => {
|
||||
// 分批处理，避免过多并发请求
|
||||
const batchSize = 3
|
||||
for (let i = 0; i < members.length; i += batchSize) {
|
||||
const batch = members.slice(i, i + batchSize)
|
||||
|
||||
const batchStats = await Promise.all(
|
||||
batch.map(async (member) => {
|
||||
try {
|
||||
// 并行获取订单统计和下级成员数量
|
||||
const [orderResult, subMembersResult] = await Promise.all([
|
||||
pageShopDealerOrder({
|
||||
page: 1,
|
||||
userId: member.userId
|
||||
}),
|
||||
listShopDealerReferee({
|
||||
dealerId: member.userId,
|
||||
deleted: 0
|
||||
})
|
||||
])
|
||||
|
||||
let orderCount = 0
|
||||
let commission = '0.00'
|
||||
let status: 'active' | 'inactive' = 'inactive'
|
||||
|
||||
if (orderResult?.list) {
|
||||
const orders = orderResult.list
|
||||
orderCount = orders.length
|
||||
commission = orders.reduce((sum, order) => {
|
||||
const levelCommission = member.level === 1 ? order.firstMoney :
|
||||
member.level === 2 ? order.secondMoney :
|
||||
order.thirdMoney
|
||||
return sum + parseFloat(levelCommission || '0')
|
||||
}, 0).toFixed(2)
|
||||
|
||||
// 判断活跃状态（30天内有订单为活跃）
|
||||
const thirtyDaysAgo = new Date()
|
||||
thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30)
|
||||
const hasRecentOrder = orders.some(order =>
|
||||
new Date(order.createTime || '') > thirtyDaysAgo
|
||||
)
|
||||
status = hasRecentOrder ? 'active' : 'inactive'
|
||||
}
|
||||
|
||||
return {
|
||||
...member,
|
||||
orderCount,
|
||||
commission,
|
||||
status,
|
||||
subMembers: subMembersResult?.length || 0
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`获取成员${member.userId}数据失败:`, error)
|
||||
return {
|
||||
...member,
|
||||
orderCount: 0,
|
||||
commission: '0.00',
|
||||
status: 'inactive' as const,
|
||||
subMembers: 0
|
||||
}
|
||||
}
|
||||
})
|
||||
)
|
||||
|
||||
// 更新这一批成员的数据
|
||||
setTeamMembers(prevMembers => {
|
||||
const updatedMembers = [...prevMembers]
|
||||
batchStats.forEach(updatedMember => {
|
||||
const index = updatedMembers.findIndex(m => m.userId === updatedMember.userId)
|
||||
if (index !== -1) {
|
||||
updatedMembers[index] = updatedMember
|
||||
}
|
||||
})
|
||||
return updatedMembers
|
||||
})
|
||||
|
||||
// 添加小延迟，避免请求过于密集
|
||||
if (i + batchSize < members.length) {
|
||||
await new Promise(resolve => setTimeout(resolve, 100))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 获取团队数据
|
||||
const fetchTeamData = useCallback(async () => {
|
||||
if (!dealerUser?.userId && !dealerId) return
|
||||
|
||||
try {
|
||||
setLoading(true)
|
||||
console.log(dealerId, 'dealerId>>>>>>>>>')
|
||||
// 获取团队成员关系
|
||||
const refereeResult = await listShopDealerReferee({
|
||||
dealerId: dealerId ? dealerId : dealerUser?.userId
|
||||
})
|
||||
|
||||
if (refereeResult) {
|
||||
console.log('团队成员原始数据:', refereeResult)
|
||||
// 处理团队成员数据
|
||||
const processedMembers: TeamMemberWithStats[] = refereeResult.map(member => ({
|
||||
...member,
|
||||
name: `${member.userId}`,
|
||||
orderCount: 0,
|
||||
commission: '0.00',
|
||||
status: 'active' as const,
|
||||
subMembers: 0,
|
||||
joinTime: member.createTime
|
||||
}))
|
||||
|
||||
// 先显示基础数据，然后异步加载详细统计
|
||||
setTeamMembers(processedMembers)
|
||||
setLoading(false)
|
||||
|
||||
// 异步加载每个成员的详细统计数据
|
||||
loadMemberStats(processedMembers)
|
||||
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取团队数据失败:', error)
|
||||
Taro.showToast({
|
||||
title: '获取团队数据失败',
|
||||
icon: 'error'
|
||||
})
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [dealerUser?.userId, dealerId])
|
||||
|
||||
// 查看下级成员
|
||||
const getNextUser = (item: TeamMemberWithStats) => {
|
||||
// 检查层级限制：最多只能查看2层（levelStack.length >= 1 表示已经是第2层了）
|
||||
if (levelStack.length >= 1) {
|
||||
return
|
||||
}
|
||||
|
||||
// 如果没有下级成员，不允许点击
|
||||
if (!item.subMembers || item.subMembers === 0) {
|
||||
return
|
||||
}
|
||||
|
||||
console.log('点击用户:', item.userId, item.name)
|
||||
|
||||
// 将当前层级信息推入栈中
|
||||
const currentLevel: LevelInfo = {
|
||||
dealerId: dealerId || dealerUser?.userId || 0,
|
||||
dealerName: currentDealerName || (dealerId ? '上级' : dealerUser?.realName || '我'),
|
||||
level: levelStack.length
|
||||
}
|
||||
setLevelStack(prev => [...prev, currentLevel])
|
||||
|
||||
// 切换到下级
|
||||
setDealerId(item.userId)
|
||||
setCurrentDealerName(item.nickname || item.dealerName || `用户${item.userId}`)
|
||||
}
|
||||
|
||||
// 返回上一层
|
||||
const goBack = () => {
|
||||
if (levelStack.length === 0) {
|
||||
// 如果栈为空，返回首页或上一页
|
||||
Taro.navigateBack()
|
||||
return
|
||||
}
|
||||
|
||||
// 从栈中弹出上一层信息
|
||||
const prevLevel = levelStack[levelStack.length - 1]
|
||||
setLevelStack(prev => prev.slice(0, -1))
|
||||
|
||||
if (prevLevel.dealerId === (dealerUser?.userId || 0)) {
|
||||
// 返回到根层级
|
||||
setDealerId(undefined)
|
||||
setCurrentDealerName('')
|
||||
} else {
|
||||
setDealerId(prevLevel.dealerId)
|
||||
setCurrentDealerName(prevLevel.dealerName || '')
|
||||
}
|
||||
}
|
||||
|
||||
// 一键拨打
|
||||
const makePhoneCall = (phone: string) => {
|
||||
Taro.makePhoneCall({
|
||||
phoneNumber: phone,
|
||||
fail: () => {
|
||||
Taro.showToast({
|
||||
title: '拨打取消',
|
||||
icon: 'error'
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 别名备注
|
||||
const editAlias = (item: any, index: number) => {
|
||||
Taro.showModal({
|
||||
title: '备注',
|
||||
// @ts-ignore
|
||||
editable: true,
|
||||
placeholderText: '真实姓名',
|
||||
content: item.alias || '',
|
||||
success: async (res: any) => {
|
||||
if (res.confirm && res.content !== undefined) {
|
||||
try {
|
||||
// 更新跟进情况
|
||||
await updateUser({
|
||||
userId: item.userId,
|
||||
alias: res.content.trim()
|
||||
});
|
||||
teamMembers[index].alias = res.content.trim()
|
||||
setTeamMembers(teamMembers)
|
||||
} catch (error) {
|
||||
console.error('备注失败:', error);
|
||||
Taro.showToast({
|
||||
title: '备注失败，请重试',
|
||||
icon: 'error'
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 发送消息
|
||||
const sendMessage = (item: TeamMemberWithStats) => {
|
||||
return navTo(`/user/chat/message/add?id=${item.userId}`, true)
|
||||
}
|
||||
|
||||
// 监听数据变化，获取团队数据
|
||||
useEffect(() => {
|
||||
if (dealerUser?.userId || dealerId) {
|
||||
fetchTeamData().then()
|
||||
}
|
||||
}, [fetchTeamData])
|
||||
|
||||
// 初始化当前用户名称
|
||||
useEffect(() => {
|
||||
if (!dealerId && dealerUser?.realName && !currentDealerName) {
|
||||
setCurrentDealerName(dealerUser.realName)
|
||||
}
|
||||
}, [dealerUser, dealerId, currentDealerName])
|
||||
|
||||
const renderMemberItem = (member: TeamMemberWithStats, index: number) => {
|
||||
// 判断是否可以点击：有下级成员且未达到层级限制
|
||||
const canClick = member.subMembers && member.subMembers > 0 && levelStack.length < 1
|
||||
// 判断是否显示手机号：只有本级（levelStack.length === 0）才显示
|
||||
const showPhone = levelStack.length === 0
|
||||
// 判断数据是否还在加载中（初始值都是0或'0.00'）
|
||||
const isStatsLoading = member.orderCount === 0 && member.commission === '0.00' && member.subMembers === 0
|
||||
|
||||
return (
|
||||
<View
|
||||
key={member.id}
|
||||
className={`bg-white rounded-lg p-4 mb-3 shadow-sm ${
|
||||
canClick ? 'cursor-pointer' : 'cursor-default opacity-75'
|
||||
}`}
|
||||
onClick={() => getNextUser(member)}
|
||||
>
|
||||
<View className="flex items-center mb-3">
|
||||
<Avatar
|
||||
size="40"
|
||||
src={member.avatar}
|
||||
className="mr-3"
|
||||
/>
|
||||
<View className="flex-1">
|
||||
<View className="flex items-center justify-between mb-1">
|
||||
<View className="flex items-center">
|
||||
<Space>
|
||||
{member.alias ? <Text className="font-semibold text-blue-700 mr-2">{member.alias}</Text> :
|
||||
<Text className="font-semibold text-gray-800 mr-2">{member.nickname}</Text>}
|
||||
{/*别名备注*/}
|
||||
<Edit size={16} className={'text-blue-500 mr-2'} onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
editAlias(member, index)
|
||||
}}/>
|
||||
{/*发送消息*/}
|
||||
<Message size={16} className={'text-orange-500 mr-2'} onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
sendMessage(member)
|
||||
}}/>
|
||||
</Space>
|
||||
</View>
|
||||
{/* 显示手机号（仅本级可见） */}
|
||||
{showPhone && member.phone && (
|
||||
<Text className="text-sm text-gray-500" onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
makePhoneCall(member.phone || '');
|
||||
}}>
|
||||
{member.phone}
|
||||
<Phone size={12} className="ml-1 text-green-500"/>
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
<Space>
|
||||
<Text>
|
||||
<Text className="text-xs text-gray-500">UID：{member.userId}</Text>
|
||||
</Text>
|
||||
<Text className="text-xs text-gray-500">
|
||||
加入时间：{member.joinTime}
|
||||
</Text>
|
||||
</Space>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View className="grid grid-cols-3 gap-4 text-center">
|
||||
<Space>
|
||||
<Text className="text-xs text-gray-500">订单数</Text>
|
||||
<Text className="text-sm font-semibold text-blue-600">
|
||||
{isStatsLoading ? '-' : member.orderCount}
|
||||
</Text>
|
||||
</Space>
|
||||
<Space>
|
||||
<Text className="text-xs text-gray-500">贡献佣金</Text>
|
||||
<Text className="text-sm font-semibold text-green-600">
|
||||
{isStatsLoading ? '-' : `¥${member.commission}`}
|
||||
</Text>
|
||||
</Space>
|
||||
<Space>
|
||||
<Text className="text-xs text-gray-500">团队成员</Text>
|
||||
<Text className={`text-sm font-semibold ${
|
||||
canClick ? 'text-purple-600' : 'text-gray-400'
|
||||
}`}>
|
||||
{isStatsLoading ? '-' : (member.subMembers || 0)}
|
||||
</Text>
|
||||
</Space>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const renderOverview = () => (
|
||||
<View className="rounded-xl p-4">
|
||||
<View
|
||||
className={'bg-white rounded-lg py-2 px-4 mb-3 shadow-sm text-right text-sm font-medium flex justify-between items-center'}>
|
||||
<Text className="text-lg font-semibold">我的团队成员</Text>
|
||||
<Text className={'text-gray-500 '}>成员数：{teamMembers.length}</Text>
|
||||
</View>
|
||||
{teamMembers.map(renderMemberItem)}
|
||||
</View>
|
||||
)
|
||||
|
||||
// 渲染顶部导航栏
|
||||
const renderHeader = () => {
|
||||
if (levelStack.length === 0) return null
|
||||
|
||||
return (
|
||||
<View className="bg-white p-4 mb-3 shadow-sm">
|
||||
<View className="flex items-center justify-between">
|
||||
<View className="flex items-center">
|
||||
<Text className="text-lg font-semibold">
|
||||
{currentDealerName}的团队成员
|
||||
</Text>
|
||||
</View>
|
||||
<Button
|
||||
size="small"
|
||||
type="primary"
|
||||
onClick={goBack}
|
||||
className="bg-blue-500"
|
||||
>
|
||||
返回上一层
|
||||
</Button>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
if (!dealerUser) {
|
||||
return (
|
||||
<Space className="flex items-center justify-center">
|
||||
<Empty description="您还不是业务人员" style={{
|
||||
backgroundColor: 'transparent'
|
||||
}} actions={[{text: '立即申请', onClick: () => navTo(`/dealer/apply/add`, true)}]}
|
||||
/>
|
||||
</Space>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{renderHeader()}
|
||||
|
||||
{loading ? (
|
||||
<View className="flex items-center justify-center mt-20">
|
||||
<Text className="text-gray-500">加载中...</Text>
|
||||
</View>
|
||||
) : teamMembers.length > 0 ? (
|
||||
renderOverview()
|
||||
) : (
|
||||
<View className="flex items-center justify-center mt-20">
|
||||
<Empty description="暂无成员" style={{
|
||||
backgroundColor: 'transparent'
|
||||
}}/>
|
||||
</View>
|
||||
)}
|
||||
|
||||
<FixedButton text={'立即邀请'} onClick={() => navTo(`/dealer/qrcode/index`, true)}/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default DealerTeam;
|
||||
3
src/dealer/wechat/index.config.ts
Normal file
3
src/dealer/wechat/index.config.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '微信客服'
|
||||
})
|
||||
176
src/dealer/wechat/index.scss
Normal file
176
src/dealer/wechat/index.scss
Normal file
@@ -0,0 +1,176 @@
|
||||
.wechat-service-page {
|
||||
min-height: 100vh;
|
||||
|
||||
.service-tabs {
|
||||
background-color: #fff;
|
||||
|
||||
.nut-tabs__titles {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.nut-tabs__content {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.qr-container {
|
||||
padding: 20px;
|
||||
min-height: calc(100vh - 100px);
|
||||
|
||||
.qr-header {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
|
||||
.qr-title {
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.qr-description {
|
||||
display: block;
|
||||
color: #666;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
.qr-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 30px;
|
||||
|
||||
.qr-code-wrapper {
|
||||
background-color: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 30px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
||||
text-align: center;
|
||||
|
||||
.qr-code-image {
|
||||
width: 360px;
|
||||
height: 360px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.wechat-id {
|
||||
display: block;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.qr-tips {
|
||||
background-color: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
width: 100%;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
||||
|
||||
.tip-title {
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.tip-item {
|
||||
display: block;
|
||||
color: #666;
|
||||
line-height: 1.8;
|
||||
margin-bottom: 8px;
|
||||
padding-left: 10px;
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
content: '•';
|
||||
color: #07c160;
|
||||
font-weight: bold;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 响应式适配
|
||||
@media (max-width: 375px) {
|
||||
.wechat-service-page {
|
||||
.qr-container {
|
||||
padding: 15px;
|
||||
|
||||
.qr-content {
|
||||
.qr-code-wrapper {
|
||||
padding: 20px;
|
||||
|
||||
.qr-code-image {
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 深色模式适配
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.wechat-service-page {
|
||||
background-color: #1a1a1a;
|
||||
|
||||
.service-tabs {
|
||||
.nut-tabs__titles {
|
||||
background-color: #2a2a2a;
|
||||
border-bottom-color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.qr-container {
|
||||
background-color: #1a1a1a;
|
||||
|
||||
.qr-header {
|
||||
.qr-title {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.qr-description {
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
|
||||
.qr-content {
|
||||
.qr-code-wrapper {
|
||||
background-color: #2a2a2a;
|
||||
|
||||
.qr-code-image {
|
||||
border-color: #444;
|
||||
}
|
||||
|
||||
.wechat-id {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.qr-tips {
|
||||
background-color: #2a2a2a;
|
||||
|
||||
.tip-title {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.tip-item {
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
121
src/dealer/wechat/index.tsx
Normal file
121
src/dealer/wechat/index.tsx
Normal file
@@ -0,0 +1,121 @@
|
||||
import {useEffect, useState} from 'react'
|
||||
import {View, Text, Image} from '@tarojs/components'
|
||||
import {Tabs} from '@nutui/nutui-react-taro'
|
||||
import Taro from '@tarojs/taro'
|
||||
import './index.scss'
|
||||
import {listCmsWebsiteField} from "@/api/cms/cmsWebsiteField";
|
||||
import {CmsWebsiteField} from "@/api/cms/cmsWebsiteField/model";
|
||||
|
||||
const WechatService = () => {
|
||||
const [activeTab, setActiveTab] = useState('0')
|
||||
const [codes, setCodes] = useState<CmsWebsiteField[]>([])
|
||||
|
||||
// 长按保存二维码到相册
|
||||
const saveQRCodeToAlbum = (imageUrl: string) => {
|
||||
// 首先下载图片到本地
|
||||
Taro.downloadFile({
|
||||
url: imageUrl,
|
||||
success: (res) => {
|
||||
if (res.statusCode === 200) {
|
||||
// 保存图片到相册
|
||||
Taro.saveImageToPhotosAlbum({
|
||||
filePath: res.tempFilePath,
|
||||
success: () => {
|
||||
Taro.showToast({
|
||||
title: '保存成功',
|
||||
icon: 'success',
|
||||
duration: 2000
|
||||
})
|
||||
},
|
||||
fail: (error) => {
|
||||
console.error('保存失败:', error)
|
||||
if (error.errMsg.includes('auth deny')) {
|
||||
Taro.showModal({
|
||||
title: '提示',
|
||||
content: '需要您授权保存图片到相册',
|
||||
showCancel: true,
|
||||
cancelText: '取消',
|
||||
confirmText: '去设置',
|
||||
success: (modalRes) => {
|
||||
if (modalRes.confirm) {
|
||||
Taro.openSetting()
|
||||
}
|
||||
}
|
||||
})
|
||||
} else {
|
||||
Taro.showToast({
|
||||
title: '保存失败',
|
||||
icon: 'error',
|
||||
duration: 2000
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
} else {
|
||||
Taro.showToast({
|
||||
title: '图片下载失败',
|
||||
icon: 'error',
|
||||
duration: 2000
|
||||
})
|
||||
}
|
||||
},
|
||||
fail: () => {
|
||||
Taro.showToast({
|
||||
title: '图片下载失败',
|
||||
icon: 'error',
|
||||
duration: 2000
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const renderQRCode = (data: typeof codes[0]) => (
|
||||
<View className="qr-container">
|
||||
<View className="qr-content">
|
||||
<View className="qr-code-wrapper">
|
||||
<Image
|
||||
src={`${data.value}`}
|
||||
className="qr-code-image"
|
||||
mode="aspectFit"
|
||||
onLongPress={() => saveQRCodeToAlbum(`${data.value}`)}
|
||||
/>
|
||||
{data.style && <Text className="wechat-id">联系电话：{data.style}</Text>}
|
||||
</View>
|
||||
|
||||
<View className="qr-tips">
|
||||
<Text className="tip-title">使用说明：</Text>
|
||||
<Text className="tip-item">1. 长按二维码保存到相册</Text>
|
||||
<Text className="tip-item">2. 打开微信扫一扫</Text>
|
||||
<Text className="tip-item">3. 选择相册中的二维码图片</Text>
|
||||
<Text className="tip-item">4. 添加好友并发送验证消息</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
listCmsWebsiteField({name: 'kefu'}).then(data => {
|
||||
if (data) {
|
||||
setCodes(data)
|
||||
}
|
||||
})
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<View className="wechat-service-page">
|
||||
<Tabs
|
||||
value={activeTab}
|
||||
onChange={(value) => setActiveTab(`${value}`)}
|
||||
className="service-tabs"
|
||||
>
|
||||
{codes.map((item) => (
|
||||
<Tabs.TabPane key={item.id} title={item.comments} value={item.id}>
|
||||
{renderQRCode(item)}
|
||||
</Tabs.TabPane>
|
||||
))}
|
||||
</Tabs>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export default WechatService
|
||||
3
src/dealer/withdraw/admin.config.ts
Normal file
3
src/dealer/withdraw/admin.config.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '提现审核'
|
||||
})
|
||||
498
src/dealer/withdraw/admin.tsx
Normal file
498
src/dealer/withdraw/admin.tsx
Normal file
@@ -0,0 +1,498 @@
|
||||
import React, {useState, useEffect, useCallback} from 'react'
|
||||
import {View, Text} from '@tarojs/components'
|
||||
import {
|
||||
Space,
|
||||
Tabs,
|
||||
Tag,
|
||||
Empty,
|
||||
ActionSheet,
|
||||
Loading,
|
||||
PullToRefresh,
|
||||
Button,
|
||||
Dialog,
|
||||
Image,
|
||||
TextArea
|
||||
} from '@nutui/nutui-react-taro'
|
||||
import Taro from '@tarojs/taro'
|
||||
import {useDealerUser} from '@/hooks/useDealerUser'
|
||||
import {pageShopDealerWithdraw, updateShopDealerWithdraw} from '@/api/shop/shopDealerWithdraw'
|
||||
import type {ShopDealerWithdraw} from '@/api/shop/shopDealerWithdraw/model'
|
||||
import {ShopDealerBank} from "@/api/shop/shopDealerBank/model";
|
||||
import {listShopDealerBank} from "@/api/shop/shopDealerBank";
|
||||
import {pushNoticeOfWithdrawalToAccount} from "@/api/sdy/sdyTemplateMessage";
|
||||
import {uploadFile} from "@/api/system/file";
|
||||
|
||||
interface WithdrawRecordWithDetails extends ShopDealerWithdraw {
|
||||
accountDisplay?: string
|
||||
}
|
||||
|
||||
const DealerWithdraw: React.FC = () => {
|
||||
const [activeTab, setActiveTab] = useState<string | number>('10')
|
||||
const [loading, setLoading] = useState<boolean>(false)
|
||||
const [refreshing, setRefreshing] = useState<boolean>(false)
|
||||
const [banks, setBanks] = useState<any[]>([])
|
||||
const [isVisible, setIsVisible] = useState<boolean>(false)
|
||||
const [withdrawRecords, setWithdrawRecords] = useState<WithdrawRecordWithDetails[]>([])
|
||||
const [rejectDialogVisible, setRejectDialogVisible] = useState<boolean>(false)
|
||||
const [rejectReason, setRejectReason] = useState<string>('')
|
||||
const [currentRecord, setCurrentRecord] = useState<ShopDealerWithdraw | null>(null)
|
||||
const [payDialogVisible, setPayDialogVisible] = useState<boolean>(false)
|
||||
const [paymentImages, setPaymentImages] = useState<string[]>([])
|
||||
|
||||
const {dealerUser} = useDealerUser()
|
||||
|
||||
// Tab 切换处理函数
|
||||
const handleTabChange = (value: string | number) => {
|
||||
console.log('Tab切换到:', value)
|
||||
setActiveTab(value)
|
||||
// activeTab变化会自动触发useEffect重新获取数据，无需手动调用
|
||||
}
|
||||
|
||||
// 获取提现记录
|
||||
const fetchWithdrawRecords = useCallback(async () => {
|
||||
if (!dealerUser?.userId) return
|
||||
|
||||
try {
|
||||
setLoading(true)
|
||||
const currentStatus = Number(activeTab)
|
||||
const result = await pageShopDealerWithdraw({
|
||||
page: 1,
|
||||
limit: 100,
|
||||
applyStatus: currentStatus // 后端筛选，提高性能
|
||||
})
|
||||
|
||||
if (result?.list) {
|
||||
const processedRecords = result.list.map(record => ({
|
||||
...record,
|
||||
accountDisplay: getAccountDisplay(record)
|
||||
}))
|
||||
setWithdrawRecords(processedRecords)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取提现记录失败:', error)
|
||||
Taro.showToast({
|
||||
title: '获取提现记录失败',
|
||||
icon: 'none'
|
||||
})
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [dealerUser?.userId, activeTab])
|
||||
|
||||
function fetchBanks() {
|
||||
listShopDealerBank({}).then(data => {
|
||||
const list = data.map(d => {
|
||||
d.name = d.bankName;
|
||||
d.type = d.bankName;
|
||||
return d;
|
||||
})
|
||||
setBanks(list.concat({
|
||||
name: '管理银行卡',
|
||||
type: 'add'
|
||||
}))
|
||||
})
|
||||
}
|
||||
|
||||
// 格式化账户显示
|
||||
const getAccountDisplay = (record: ShopDealerWithdraw) => {
|
||||
if (record.payType === 10) {
|
||||
return '微信钱包'
|
||||
} else if (record.payType === 20 && record.alipayAccount) {
|
||||
return `支付宝(${record.alipayAccount.slice(-4)})`
|
||||
} else if (record.payType === 30 && record.bankCard) {
|
||||
return `${record.bankName || '银行卡'}(尾号${record.bankCard.slice(-4)})`
|
||||
}
|
||||
return '未知账户'
|
||||
}
|
||||
|
||||
// 刷新数据
|
||||
const handleRefresh = async () => {
|
||||
setRefreshing(true)
|
||||
await Promise.all([fetchWithdrawRecords()])
|
||||
setRefreshing(false)
|
||||
}
|
||||
|
||||
const handleSelect = (item: ShopDealerBank) => {
|
||||
if(item.type === 'add'){
|
||||
return Taro.navigateTo({
|
||||
url: '/dealer/bank/index'
|
||||
})
|
||||
}
|
||||
setIsVisible(false)
|
||||
}
|
||||
|
||||
// 审核通过
|
||||
const handleApprove = async (record: ShopDealerWithdraw) => {
|
||||
try {
|
||||
await updateShopDealerWithdraw({
|
||||
...record,
|
||||
applyStatus: 20, // 审核通过
|
||||
})
|
||||
|
||||
Taro.showToast({
|
||||
title: '审核通过',
|
||||
icon: 'success'
|
||||
})
|
||||
|
||||
await fetchWithdrawRecords()
|
||||
} catch (error: any) {
|
||||
if (error !== 'cancel') {
|
||||
console.error('审核通过失败:', error)
|
||||
Taro.showToast({
|
||||
title: error.message || '操作失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 驳回申请
|
||||
const handleReject = (record: ShopDealerWithdraw) => {
|
||||
setCurrentRecord(record)
|
||||
setRejectReason('')
|
||||
setRejectDialogVisible(true)
|
||||
}
|
||||
|
||||
// 确认驳回
|
||||
const confirmReject = async () => {
|
||||
if (!rejectReason.trim()) {
|
||||
Taro.showToast({
|
||||
title: '请输入驳回原因',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
await updateShopDealerWithdraw({
|
||||
...currentRecord!,
|
||||
applyStatus: 30, // 驳回
|
||||
rejectReason: rejectReason.trim()
|
||||
})
|
||||
|
||||
Taro.showToast({
|
||||
title: '已驳回',
|
||||
icon: 'success'
|
||||
})
|
||||
|
||||
setRejectDialogVisible(false)
|
||||
setCurrentRecord(null)
|
||||
setRejectReason('')
|
||||
await fetchWithdrawRecords()
|
||||
} catch (error: any) {
|
||||
console.error('驳回失败:', error)
|
||||
Taro.showToast({
|
||||
title: error.message || '操作失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 确认打款 - 打开打款对话框
|
||||
const handleConfirmPay = (record: ShopDealerWithdraw) => {
|
||||
setCurrentRecord(record)
|
||||
setPaymentImages([])
|
||||
setPayDialogVisible(true)
|
||||
}
|
||||
|
||||
// 上传打款凭证
|
||||
const handleUploadPaymentImage = async () => {
|
||||
try {
|
||||
// 直接调用uploadFile，它内部会处理图片选择和上传
|
||||
const data = await uploadFile();
|
||||
console.log(data.url, 'uploaded image url');
|
||||
|
||||
// 确保url存在再添加到状态中
|
||||
if (data.url) {
|
||||
// 将返回的图片URL添加到状态中
|
||||
const newImages = [...paymentImages, data.url];
|
||||
setPaymentImages(newImages.slice(0, 3));
|
||||
} else {
|
||||
Taro.showToast({
|
||||
title: '图片上传失败：未返回有效URL',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('上传图片失败:', error);
|
||||
Taro.showToast({
|
||||
title: '上传失败: ' + (error instanceof Error ? error.message : '未知错误'),
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 删除打款凭证
|
||||
const handleRemovePaymentImage = (index: number) => {
|
||||
const newImages = paymentImages.filter((_, i) => i !== index)
|
||||
setPaymentImages(newImages)
|
||||
}
|
||||
|
||||
// 确认提交打款
|
||||
const confirmPayment = async () => {
|
||||
try {
|
||||
await updateShopDealerWithdraw({
|
||||
...currentRecord!,
|
||||
applyStatus: 40, // 已打款
|
||||
image: paymentImages.length > 0 ? JSON.stringify(paymentImages) : undefined
|
||||
})
|
||||
|
||||
Taro.showToast({
|
||||
title: '打款确认成功',
|
||||
icon: 'success'
|
||||
})
|
||||
|
||||
if(currentRecord){
|
||||
await pushNoticeOfWithdrawalToAccount(currentRecord).then()
|
||||
}
|
||||
|
||||
setPayDialogVisible(false)
|
||||
setCurrentRecord(null)
|
||||
setPaymentImages([])
|
||||
await fetchWithdrawRecords()
|
||||
} catch (error: any) {
|
||||
console.error('确认打款失败:', error)
|
||||
Taro.showToast({
|
||||
title: error.message || '操作失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化加载数据
|
||||
useEffect(() => {
|
||||
if (dealerUser?.userId) {
|
||||
fetchWithdrawRecords().then()
|
||||
fetchBanks()
|
||||
}
|
||||
}, [fetchWithdrawRecords])
|
||||
|
||||
const getStatusText = (status?: number) => {
|
||||
switch (status) {
|
||||
case 40:
|
||||
return '已到账'
|
||||
case 20:
|
||||
return '审核通过'
|
||||
case 10:
|
||||
return '待审核'
|
||||
case 30:
|
||||
return '已驳回'
|
||||
default:
|
||||
return '未知'
|
||||
}
|
||||
}
|
||||
|
||||
const getStatusColor = (status?: number) => {
|
||||
switch (status) {
|
||||
case 40:
|
||||
return 'success'
|
||||
case 20:
|
||||
return 'success'
|
||||
case 10:
|
||||
return 'warning'
|
||||
case 30:
|
||||
return 'danger'
|
||||
default:
|
||||
return 'default'
|
||||
}
|
||||
}
|
||||
|
||||
const renderWithdrawRecords = () => {
|
||||
console.log('渲染提现记录:', {loading, recordsCount: withdrawRecords.length, dealerUserId: dealerUser?.userId})
|
||||
|
||||
return (
|
||||
<PullToRefresh
|
||||
disabled={refreshing}
|
||||
onRefresh={handleRefresh}
|
||||
>
|
||||
<View>
|
||||
{loading ? (
|
||||
<View className="text-center py-8">
|
||||
<Loading/>
|
||||
<Text className="text-gray-500 mt-2">加载中...</Text>
|
||||
</View>
|
||||
) : withdrawRecords.length > 0 ? (
|
||||
withdrawRecords.map(record => (
|
||||
<View key={record.id} className="rounded-lg bg-gray-50 p-4 mb-3 shadow-sm">
|
||||
<View className="flex justify-between items-start mb-3">
|
||||
<Space direction={'vertical'}>
|
||||
<Text className="font-semibold text-gray-800 mb-1">
|
||||
提现金额：¥{Number(record.money).toFixed(2)}
|
||||
</Text>
|
||||
<Text className="text-sm text-gray-500">
|
||||
{record.comments}
|
||||
</Text>
|
||||
<Text className={'text-sm text-gray-500'}>
|
||||
申请人：{record.bankAccount} {record.phone}
|
||||
</Text>
|
||||
</Space>
|
||||
<Tag type={getStatusColor(record.applyStatus)}>
|
||||
{getStatusText(record.applyStatus)}
|
||||
</Tag>
|
||||
</View>
|
||||
|
||||
<View className="text-xs text-gray-400">
|
||||
<Text>申请时间：{record.createTime}</Text>
|
||||
{record.auditTime && (
|
||||
<Text className="block mt-1">
|
||||
审核时间：{new Date(record.auditTime).toLocaleString()}
|
||||
</Text>
|
||||
)}
|
||||
{record.rejectReason && (
|
||||
<Text className="block mt-1 text-red-500">
|
||||
驳回原因：{record.rejectReason}
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
|
||||
{/* 操作按钮 */}
|
||||
{record.applyStatus === 10 && (
|
||||
<View className="flex gap-2 mt-3">
|
||||
<Button
|
||||
type="success"
|
||||
size="small"
|
||||
className="flex-1"
|
||||
onClick={() => handleApprove(record)}
|
||||
>
|
||||
审核通过
|
||||
</Button>
|
||||
<Button
|
||||
type="danger"
|
||||
size="small"
|
||||
className="flex-1"
|
||||
onClick={() => handleReject(record)}
|
||||
>
|
||||
驳回
|
||||
</Button>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{record.applyStatus === 20 && (
|
||||
<View className="mt-3">
|
||||
<Button
|
||||
type="primary"
|
||||
size="small"
|
||||
block
|
||||
onClick={() => handleConfirmPay(record)}
|
||||
>
|
||||
确认打款
|
||||
</Button>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
))
|
||||
) : (
|
||||
<Empty description="暂无提现记录"/>
|
||||
)}
|
||||
</View>
|
||||
</PullToRefresh>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<View className="bg-gray-50 min-h-screen">
|
||||
<Tabs value={activeTab} onChange={handleTabChange}>
|
||||
<Tabs.TabPane title="待审核" value="10">
|
||||
{renderWithdrawRecords()}
|
||||
</Tabs.TabPane>
|
||||
|
||||
<Tabs.TabPane title="已通过" value="20">
|
||||
{renderWithdrawRecords()}
|
||||
</Tabs.TabPane>
|
||||
|
||||
<Tabs.TabPane title="已打款" value="40">
|
||||
{renderWithdrawRecords()}
|
||||
</Tabs.TabPane>
|
||||
|
||||
<Tabs.TabPane title="已驳回" value="30">
|
||||
{renderWithdrawRecords()}
|
||||
</Tabs.TabPane>
|
||||
</Tabs>
|
||||
<ActionSheet
|
||||
visible={isVisible}
|
||||
options={banks}
|
||||
onSelect={handleSelect}
|
||||
onCancel={() => setIsVisible(false)}
|
||||
/>
|
||||
|
||||
{/* 驳回原因对话框 */}
|
||||
<Dialog
|
||||
visible={rejectDialogVisible}
|
||||
title="驳回原因"
|
||||
onCancel={() => {
|
||||
setRejectDialogVisible(false)
|
||||
setCurrentRecord(null)
|
||||
setRejectReason('')
|
||||
}}
|
||||
onConfirm={confirmReject}
|
||||
>
|
||||
<View className="p-4">
|
||||
<TextArea
|
||||
placeholder="请输入驳回原因"
|
||||
value={rejectReason}
|
||||
onChange={(value) => setRejectReason(value)}
|
||||
maxLength={200}
|
||||
rows={4}
|
||||
/>
|
||||
</View>
|
||||
</Dialog>
|
||||
|
||||
{/* 打款凭证对话框 */}
|
||||
<Dialog
|
||||
visible={payDialogVisible}
|
||||
title="确认打款"
|
||||
onCancel={() => {
|
||||
setPayDialogVisible(false)
|
||||
setCurrentRecord(null)
|
||||
setPaymentImages([])
|
||||
}}
|
||||
onConfirm={confirmPayment}
|
||||
>
|
||||
<View className="p-4">
|
||||
<View className="mb-3 flex flex-col">
|
||||
<Text className="text-sm text-gray-600">
|
||||
打款金额：¥{(Number(currentRecord?.money) - 3).toFixed(2)}
|
||||
</Text>
|
||||
<Text className="text-sm">
|
||||
开户行：{currentRecord?.bankName}
|
||||
</Text>
|
||||
<Text className="text-sm">
|
||||
户名：{currentRecord?.bankAccount}
|
||||
</Text>
|
||||
<Text className="text-sm">
|
||||
卡号：{currentRecord?.bankCard}
|
||||
</Text>
|
||||
</View>
|
||||
<View className="mb-3">
|
||||
<Text className="text-sm text-gray-600 mb-2 block">
|
||||
上传打款凭证（选填，最多3张）
|
||||
</Text>
|
||||
<View className="flex flex-wrap gap-2">
|
||||
{paymentImages.map((img, index) => (
|
||||
<View key={index} className="relative w-20 h-20">
|
||||
<Image src={img} className="w-full h-full object-cover rounded" />
|
||||
<View
|
||||
className="absolute top-0 right-0 bg-red-500 text-white rounded-full w-5 h-5 flex items-center justify-center text-xs"
|
||||
onClick={() => handleRemovePaymentImage(index)}
|
||||
>
|
||||
×
|
||||
</View>
|
||||
</View>
|
||||
))}
|
||||
{paymentImages.length < 3 && (
|
||||
<View
|
||||
className="w-20 h-20 border-2 border-dashed border-gray-300 rounded flex items-center justify-center"
|
||||
onClick={handleUploadPaymentImage}
|
||||
>
|
||||
<Text className="text-2xl text-gray-400">+</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</Dialog>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export default DealerWithdraw
|
||||
80
src/dealer/withdraw/debug.tsx
Normal file
80
src/dealer/withdraw/debug.tsx
Normal file
@@ -0,0 +1,80 @@
|
||||
import React, { useState } from 'react'
|
||||
import { View, Text } from '@tarojs/components'
|
||||
import { Tabs, Button } from '@nutui/nutui-react-taro'
|
||||
|
||||
/**
|
||||
* 提现功能调试组件
|
||||
* 用于测试 Tabs 组件的点击和切换功能
|
||||
*/
|
||||
const WithdrawDebug: React.FC = () => {
|
||||
const [activeTab, setActiveTab] = useState<string | number>('0')
|
||||
const [clickCount, setClickCount] = useState(0)
|
||||
|
||||
// Tab 切换处理函数
|
||||
const handleTabChange = (value: string | number) => {
|
||||
console.log('Tab切换:', { from: activeTab, to: value, type: typeof value })
|
||||
setActiveTab(value)
|
||||
setClickCount(prev => prev + 1)
|
||||
}
|
||||
|
||||
// 手动切换测试
|
||||
const manualSwitch = (tab: string | number) => {
|
||||
console.log('手动切换到:', tab)
|
||||
setActiveTab(tab)
|
||||
setClickCount(prev => prev + 1)
|
||||
}
|
||||
|
||||
return (
|
||||
<View className="bg-gray-50 min-h-screen p-4">
|
||||
<View className="bg-white rounded-lg p-4 mb-4">
|
||||
<Text className="text-lg font-bold mb-2">调试信息</Text>
|
||||
<Text className="block mb-1">当前Tab: {String(activeTab)}</Text>
|
||||
<Text className="block mb-1">切换次数: {clickCount}</Text>
|
||||
<Text className="block mb-1">Tab类型: {typeof activeTab}</Text>
|
||||
</View>
|
||||
|
||||
<View className="bg-white rounded-lg p-4 mb-4">
|
||||
<Text className="text-lg font-bold mb-2">手动切换测试</Text>
|
||||
<View className="flex gap-2">
|
||||
<Button size="small" onClick={() => manualSwitch('0')}>
|
||||
切换到申请提现
|
||||
</Button>
|
||||
<Button size="small" onClick={() => manualSwitch('1')}>
|
||||
切换到提现记录
|
||||
</Button>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View className="bg-white rounded-lg">
|
||||
<Tabs value={activeTab} onChange={handleTabChange}>
|
||||
<Tabs.TabPane title="申请提现" value="0">
|
||||
<View className="p-4">
|
||||
<Text className="text-center text-gray-600">申请提现页面内容</Text>
|
||||
<Text className="text-center text-sm text-gray-400 mt-2">
|
||||
当前Tab值: {String(activeTab)}
|
||||
</Text>
|
||||
</View>
|
||||
</Tabs.TabPane>
|
||||
|
||||
<Tabs.TabPane title="提现记录" value="1">
|
||||
<View className="p-4">
|
||||
<Text className="text-center text-gray-600">提现记录页面内容</Text>
|
||||
<Text className="text-center text-sm text-gray-400 mt-2">
|
||||
当前Tab值: {String(activeTab)}
|
||||
</Text>
|
||||
</View>
|
||||
</Tabs.TabPane>
|
||||
</Tabs>
|
||||
</View>
|
||||
|
||||
<View className="bg-white rounded-lg p-4 mt-4">
|
||||
<Text className="text-lg font-bold mb-2">事件日志</Text>
|
||||
<Text className="text-sm text-gray-500">
|
||||
请查看控制台输出以获取详细的切换日志
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export default WithdrawDebug
|
||||
3
src/dealer/withdraw/index.config.ts
Normal file
3
src/dealer/withdraw/index.config.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '提现申请'
|
||||
})
|
||||
480
src/dealer/withdraw/index.tsx
Normal file
480
src/dealer/withdraw/index.tsx
Normal file
@@ -0,0 +1,480 @@
|
||||
import React, {useState, useEffect, useCallback} from 'react'
|
||||
import {View, Text} from '@tarojs/components'
|
||||
import {
|
||||
Cell,
|
||||
Space,
|
||||
Button,
|
||||
Input,
|
||||
CellGroup,
|
||||
Tabs,
|
||||
Tag,
|
||||
Empty,
|
||||
ActionSheet,
|
||||
Loading,
|
||||
PullToRefresh
|
||||
} from '@nutui/nutui-react-taro'
|
||||
import {Wallet, ArrowRight} from '@nutui/icons-react-taro'
|
||||
import {businessGradients} from '@/styles/gradients'
|
||||
import Taro from '@tarojs/taro'
|
||||
import {useDealerUser} from '@/hooks/useDealerUser'
|
||||
import {pageShopDealerWithdraw, addShopDealerWithdraw} from '@/api/shop/shopDealerWithdraw'
|
||||
import type {ShopDealerWithdraw} from '@/api/shop/shopDealerWithdraw/model'
|
||||
import {ShopDealerBank} from "@/api/shop/shopDealerBank/model";
|
||||
import {listShopDealerBank} from "@/api/shop/shopDealerBank";
|
||||
import {listCmsWebsiteField} from "@/api/cms/cmsWebsiteField";
|
||||
import {myUserVerify} from "@/api/system/userVerify";
|
||||
import navTo from "@/utils/common";
|
||||
import {pushWithdrawalReviewReminder} from "@/api/sdy/sdyTemplateMessage";
|
||||
|
||||
interface WithdrawRecordWithDetails extends ShopDealerWithdraw {
|
||||
accountDisplay?: string
|
||||
}
|
||||
|
||||
const DealerWithdraw: React.FC = () => {
|
||||
const [activeTab, setActiveTab] = useState<string | number>('0')
|
||||
const [loading, setLoading] = useState<boolean>(false)
|
||||
const [refreshing, setRefreshing] = useState<boolean>(false)
|
||||
const [submitting, setSubmitting] = useState<boolean>(false)
|
||||
const [banks, setBanks] = useState<any[]>([])
|
||||
const [bank, setBank] = useState<ShopDealerBank>()
|
||||
const [isVisible, setIsVisible] = useState<boolean>(false)
|
||||
const [availableAmount, setAvailableAmount] = useState<string>('0.00')
|
||||
const [withdrawRecords, setWithdrawRecords] = useState<WithdrawRecordWithDetails[]>([])
|
||||
const [withdrawAmount, setWithdrawAmount] = useState<string>('')
|
||||
const [withdrawValue, setWithdrawValue] = useState<string>('')
|
||||
|
||||
const {dealerUser} = useDealerUser()
|
||||
|
||||
// Tab 切换处理函数
|
||||
const handleTabChange = (value: string | number) => {
|
||||
console.log('Tab切换到:', value)
|
||||
setActiveTab(value)
|
||||
|
||||
// 如果切换到提现记录页面，刷新数据
|
||||
if (String(value) === '1') {
|
||||
fetchWithdrawRecords().then()
|
||||
}
|
||||
}
|
||||
|
||||
// 获取可提现余额
|
||||
const fetchBalance = useCallback(async () => {
|
||||
console.log(dealerUser, 'dealerUser...')
|
||||
try {
|
||||
setAvailableAmount(String(dealerUser?.money || '0.00'))
|
||||
} catch (error) {
|
||||
console.error('获取余额失败:', error)
|
||||
}
|
||||
}, [dealerUser])
|
||||
|
||||
// 获取提现记录
|
||||
const fetchWithdrawRecords = useCallback(async () => {
|
||||
if (!dealerUser?.userId) return
|
||||
|
||||
try {
|
||||
setLoading(true)
|
||||
const result = await pageShopDealerWithdraw({
|
||||
page: 1,
|
||||
limit: 100,
|
||||
userId: dealerUser.userId
|
||||
})
|
||||
|
||||
if (result?.list) {
|
||||
const processedRecords = result.list.map(record => ({
|
||||
...record,
|
||||
accountDisplay: getAccountDisplay(record)
|
||||
}))
|
||||
setWithdrawRecords(processedRecords)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取提现记录失败:', error)
|
||||
Taro.showToast({
|
||||
title: '获取提现记录失败',
|
||||
icon: 'none'
|
||||
})
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [dealerUser?.userId])
|
||||
|
||||
function fetchBanks() {
|
||||
listShopDealerBank({}).then(data => {
|
||||
const list = data.map(d => {
|
||||
d.name = d.bankName;
|
||||
d.type = d.bankName;
|
||||
return d;
|
||||
})
|
||||
setBanks(list.concat({
|
||||
name: '管理银行卡',
|
||||
type: 'add'
|
||||
}))
|
||||
setBank(data[0])
|
||||
})
|
||||
}
|
||||
|
||||
// 格式化账户显示
|
||||
const getAccountDisplay = (record: ShopDealerWithdraw) => {
|
||||
if (record.payType === 10) {
|
||||
return '微信钱包'
|
||||
} else if (record.payType === 20 && record.alipayAccount) {
|
||||
return `支付宝(${record.alipayAccount.slice(-4)})`
|
||||
} else if (record.payType === 30 && record.bankCard) {
|
||||
return `${record.bankName || '银行卡'}(尾号${record.bankCard.slice(-4)})`
|
||||
}
|
||||
return '未知账户'
|
||||
}
|
||||
|
||||
// 刷新数据
|
||||
const handleRefresh = async () => {
|
||||
setRefreshing(true)
|
||||
await Promise.all([fetchBalance(), fetchWithdrawRecords()])
|
||||
setRefreshing(false)
|
||||
}
|
||||
|
||||
const handleSelect = (item: ShopDealerBank) => {
|
||||
if(item.type === 'add'){
|
||||
return Taro.navigateTo({
|
||||
url: '/dealer/bank/index'
|
||||
})
|
||||
}
|
||||
setBank(item)
|
||||
setIsVisible(false)
|
||||
}
|
||||
|
||||
function fetchCmsField() {
|
||||
listCmsWebsiteField({ name: 'WithdrawValue'}).then(res => {
|
||||
if(res && res.length > 0){
|
||||
const text = res[0].value;
|
||||
setWithdrawValue(text || '')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 初始化加载数据
|
||||
useEffect(() => {
|
||||
if (dealerUser?.userId) {
|
||||
fetchBalance().then()
|
||||
fetchWithdrawRecords().then()
|
||||
fetchBanks()
|
||||
fetchCmsField()
|
||||
}
|
||||
}, [fetchBalance, fetchWithdrawRecords])
|
||||
|
||||
const getStatusText = (status?: number) => {
|
||||
switch (status) {
|
||||
case 40:
|
||||
return '已到账'
|
||||
case 20:
|
||||
return '审核通过'
|
||||
case 10:
|
||||
return '待审核'
|
||||
case 30:
|
||||
return '已驳回'
|
||||
default:
|
||||
return '未知'
|
||||
}
|
||||
}
|
||||
|
||||
const getStatusColor = (status?: number) => {
|
||||
switch (status) {
|
||||
case 40:
|
||||
return 'success'
|
||||
case 20:
|
||||
return 'success'
|
||||
case 10:
|
||||
return 'warning'
|
||||
case 30:
|
||||
return 'danger'
|
||||
default:
|
||||
return 'default'
|
||||
}
|
||||
}
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!dealerUser?.userId) {
|
||||
Taro.showToast({
|
||||
title: '用户信息获取失败',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
if (!bank) {
|
||||
Taro.showToast({
|
||||
title: '请选择提现银行卡',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
// 验证提现金额
|
||||
const amount = parseFloat(withdrawAmount)
|
||||
const availableStr = String(availableAmount || '0')
|
||||
const available = parseFloat(availableStr.replace(/,/g, ''))
|
||||
|
||||
if (isNaN(amount) || amount <= 0) {
|
||||
Taro.showToast({
|
||||
title: '请输入有效的提现金额',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
if (amount < 100) {
|
||||
Taro.showToast({
|
||||
title: '最低提现金额为100元',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
if (amount > available) {
|
||||
Taro.showToast({
|
||||
title: '提现金额超过可用余额',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
// 验证银行卡信息
|
||||
if (!bank.bankCard || !bank.bankAccount || !bank.bankName) {
|
||||
Taro.showToast({
|
||||
title: '银行卡信息不完整',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
// 验证实名认证
|
||||
const isChecked = await myUserVerify({})
|
||||
if(!isChecked){
|
||||
console.log(isChecked,'isCheckedisCheckedisCheckedisChecked');
|
||||
return navTo(`/user/userVerify/index`,true)
|
||||
}
|
||||
if(isChecked.status === 0){
|
||||
Taro.showToast({
|
||||
title: '实名认证还在审核中...',
|
||||
icon: 'none'
|
||||
})
|
||||
return false;
|
||||
}
|
||||
try {
|
||||
setSubmitting(true)
|
||||
|
||||
const withdrawData: ShopDealerWithdraw = {
|
||||
userId: dealerUser.userId,
|
||||
money: withdrawAmount,
|
||||
payType: 30, // 银行卡提现
|
||||
applyStatus: 10, // 待审核
|
||||
platform: 'MiniProgram',
|
||||
bankCard: bank.bankCard,
|
||||
bankAccount: bank.bankAccount,
|
||||
bankName: bank.bankName,
|
||||
comments: `提现费3元/笔，预计到账金额￥${calculateExpectedAmount(withdrawAmount)}`,
|
||||
}
|
||||
|
||||
await addShopDealerWithdraw(withdrawData)
|
||||
|
||||
Taro.showToast({
|
||||
title: '提现申请已提交',
|
||||
icon: 'success'
|
||||
})
|
||||
|
||||
await pushWithdrawalReviewReminder(withdrawData)
|
||||
|
||||
// 重置表单
|
||||
setWithdrawAmount('')
|
||||
|
||||
// 刷新数据
|
||||
await handleRefresh()
|
||||
|
||||
// 切换到提现记录页面
|
||||
setActiveTab('1')
|
||||
|
||||
} catch (error: any) {
|
||||
console.error('提现申请失败:', error)
|
||||
Taro.showToast({
|
||||
title: error.message || '提现申请失败',
|
||||
icon: 'none'
|
||||
})
|
||||
} finally {
|
||||
setSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
// 格式化金额
|
||||
const formatMoney = (money?: string) => {
|
||||
if (!money) return '0.00'
|
||||
return parseFloat(money).toFixed(2)
|
||||
}
|
||||
|
||||
// 计算预计到账金额
|
||||
const calculateExpectedAmount = (amount: string) => {
|
||||
if (!amount || isNaN(parseFloat(amount))) return '0.00'
|
||||
const withdrawAmount = parseFloat(amount)
|
||||
// 提现费率 16% + 3元
|
||||
const feeRate = 0
|
||||
const fixedFee = 3
|
||||
const totalFee = withdrawAmount * feeRate + fixedFee
|
||||
const expectedAmount = withdrawAmount - totalFee
|
||||
return Math.max(0, expectedAmount).toFixed(2)
|
||||
}
|
||||
|
||||
const renderWithdrawForm = () => (
|
||||
<View>
|
||||
{/* 余额卡片 */}
|
||||
<View className="rounded-xl p-6 mb-6 text-white relative overflow-hidden" style={{
|
||||
background: businessGradients.dealer.header
|
||||
}}>
|
||||
{/* 装饰背景 - 小程序兼容版本 */}
|
||||
<View className="absolute top-0 right-0 w-24 h-24 rounded-full" style={{
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.1)',
|
||||
right: '-12px',
|
||||
top: '-12px'
|
||||
}}></View>
|
||||
|
||||
<View className="flex items-center justify-between relative z-10">
|
||||
<View className={'flex flex-col'}>
|
||||
<Text className="text-2xl font-bold text-white">{formatMoney(dealerUser?.money)}</Text>
|
||||
<Text className="text-white text-opacity-80 text-sm mb-1">可提现余额</Text>
|
||||
</View>
|
||||
<View className="p-3 rounded-full" style={{
|
||||
background: 'rgba(255, 255, 255, 0.2)'
|
||||
}}>
|
||||
<Wallet color="white" size="32"/>
|
||||
</View>
|
||||
</View>
|
||||
<View className="mt-4 pt-4 relative z-10" style={{
|
||||
borderTop: '1px solid rgba(255, 255, 255, 0.3)'
|
||||
}}>
|
||||
<Text className="text-white text-opacity-80 text-xs">
|
||||
最低提现金额：¥100
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<CellGroup>
|
||||
<Cell style={{
|
||||
padding: '36px 12px'
|
||||
}} title={
|
||||
<View className="flex items-center justify-between">
|
||||
<Text className={'text-xl'}>￥</Text>
|
||||
<Input
|
||||
placeholder="提现金额"
|
||||
type="number"
|
||||
maxLength={7}
|
||||
value={withdrawAmount}
|
||||
onChange={(value) => setWithdrawAmount(value)}
|
||||
style={{
|
||||
padding: '0 10px',
|
||||
fontSize: '20px'
|
||||
}}
|
||||
/>
|
||||
<Button fill="none" size={'small'} onClick={() => setWithdrawAmount(dealerUser?.money || '0')}><Text className={'text-blue-500'}>全部提现</Text></Button>
|
||||
</View>
|
||||
}
|
||||
/>
|
||||
<Cell title={'提现到'} onClick={() => setIsVisible(true)} extra={
|
||||
<View className="flex items-center justify-between gap-1">
|
||||
{bank ? <Text className={'text-gray-800'}>{bank.bankName}</Text> : <Text className={'text-gray-400'}>请选择</Text>}
|
||||
<ArrowRight className={'text-gray-300'} size={15}/>
|
||||
</View>
|
||||
}/>
|
||||
<Cell title={'预计到账金额'} extra={
|
||||
<View className="flex items-center justify-between gap-1">
|
||||
<Text className={'text-orange-500 px-2 text-lg'}>¥{calculateExpectedAmount(withdrawAmount)}</Text>
|
||||
</View>
|
||||
}/>
|
||||
<Cell title={<Text className={'text-gray-400'}>说明：{withdrawValue}</Text>}/>
|
||||
</CellGroup>
|
||||
|
||||
<View className="mt-6 px-4">
|
||||
<Button
|
||||
block
|
||||
type="primary"
|
||||
nativeType="submit"
|
||||
loading={submitting}
|
||||
disabled={submitting || !withdrawAmount || !bank}
|
||||
onClick={handleSubmit}
|
||||
>
|
||||
{submitting ? '提交中...' : '申请提现'}
|
||||
</Button>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
|
||||
const renderWithdrawRecords = () => {
|
||||
console.log('渲染提现记录:', {loading, recordsCount: withdrawRecords.length, dealerUserId: dealerUser?.userId})
|
||||
|
||||
return (
|
||||
<PullToRefresh
|
||||
disabled={refreshing}
|
||||
onRefresh={handleRefresh}
|
||||
>
|
||||
<View>
|
||||
{loading ? (
|
||||
<View className="text-center py-8">
|
||||
<Loading/>
|
||||
<Text className="text-gray-500 mt-2">加载中...</Text>
|
||||
</View>
|
||||
) : withdrawRecords.length > 0 ? (
|
||||
withdrawRecords.map(record => (
|
||||
<View key={record.id} className="rounded-lg bg-gray-50 p-4 mb-3 shadow-sm">
|
||||
<View className="flex justify-between items-start mb-3">
|
||||
<Space direction={'vertical'}>
|
||||
<Text className="font-semibold text-gray-800 mb-1">
|
||||
提现金额：¥{Number(record.money).toFixed(2)}
|
||||
</Text>
|
||||
<Text className="text-sm text-gray-500">
|
||||
{record.comments}
|
||||
</Text>
|
||||
</Space>
|
||||
<Tag type={getStatusColor(record.applyStatus)}>
|
||||
{getStatusText(record.applyStatus)}
|
||||
</Tag>
|
||||
</View>
|
||||
|
||||
<View className="text-xs text-gray-400">
|
||||
<Text>申请时间：{record.createTime}</Text>
|
||||
{record.auditTime && (
|
||||
<Text className="block mt-1">
|
||||
审核时间：{new Date(record.auditTime).toLocaleString()}
|
||||
</Text>
|
||||
)}
|
||||
{record.rejectReason && (
|
||||
<Text className="block mt-1 text-red-500">
|
||||
驳回原因：{record.rejectReason}
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
))
|
||||
) : (
|
||||
<Empty description="暂无提现记录"/>
|
||||
)}
|
||||
</View>
|
||||
</PullToRefresh>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<View className="bg-gray-50 min-h-screen">
|
||||
<Tabs value={activeTab} onChange={handleTabChange}>
|
||||
<Tabs.TabPane title="申请提现" value="0">
|
||||
{renderWithdrawForm()}
|
||||
</Tabs.TabPane>
|
||||
|
||||
<Tabs.TabPane title="提现记录" value="1">
|
||||
{renderWithdrawRecords()}
|
||||
</Tabs.TabPane>
|
||||
</Tabs>
|
||||
<ActionSheet
|
||||
visible={isVisible}
|
||||
options={banks}
|
||||
onSelect={handleSelect}
|
||||
onCancel={() => setIsVisible(false)}
|
||||
/>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export default DealerWithdraw
|
||||
Reference in New Issue
Block a user