refactor(user): 重构用户页面布局和功能
- 移除未使用的导入和注释 - 更新页面标题和样式 - 添加新的 UserGrid 组件 - 修改 IsDealer 组件的文案 - 优化搜索框样式 - 更新分享信息标题
This commit is contained in:
@@ -1,7 +1,7 @@
|
|||||||
import React, {useState, useEffect} from 'react'
|
import React, {useState, useEffect} from 'react'
|
||||||
import {View, Text, Image} from '@tarojs/components'
|
import {View, Text, Image} from '@tarojs/components'
|
||||||
import {Button, Loading} from '@nutui/nutui-react-taro'
|
import {Button, Loading} from '@nutui/nutui-react-taro'
|
||||||
import {Share, Download, Copy, QrCode} from '@nutui/icons-react-taro'
|
import {Download, QrCode} from '@nutui/icons-react-taro'
|
||||||
import Taro from '@tarojs/taro'
|
import Taro from '@tarojs/taro'
|
||||||
import {useDealerUser} from '@/hooks/useDealerUser'
|
import {useDealerUser} from '@/hooks/useDealerUser'
|
||||||
import {generateInviteCode} from '@/api/invite'
|
import {generateInviteCode} from '@/api/invite'
|
||||||
@@ -115,52 +115,52 @@ const DealerQrcode: React.FC = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// 复制邀请信息
|
// 复制邀请信息
|
||||||
const copyInviteInfo = () => {
|
// const copyInviteInfo = () => {
|
||||||
if (!dealerUser?.userId) {
|
// if (!dealerUser?.userId) {
|
||||||
Taro.showToast({
|
// Taro.showToast({
|
||||||
title: '用户信息未加载',
|
// title: '用户信息未加载',
|
||||||
icon: 'error'
|
// icon: 'error'
|
||||||
})
|
// })
|
||||||
return
|
// return
|
||||||
}
|
// }
|
||||||
|
//
|
||||||
const inviteText = `🎉 邀请您加入我的团队!
|
// const inviteText = `🎉 邀请您加入我的团队!
|
||||||
|
//
|
||||||
扫描小程序码或搜索"时里院子市集"小程序,即可享受优质商品和服务!
|
// 扫描小程序码或搜索"时里院子市集"小程序,即可享受优质商品和服务!
|
||||||
|
//
|
||||||
💰 成为我的团队成员,一起赚取丰厚佣金
|
// 💰 成为我的团队成员,一起赚取丰厚佣金
|
||||||
🎁 新用户专享优惠等你来拿
|
// 🎁 新用户专享优惠等你来拿
|
||||||
|
//
|
||||||
邀请码:${dealerUser.userId}
|
// 邀请码:${dealerUser.userId}
|
||||||
快来加入我们吧!`
|
// 快来加入我们吧!`
|
||||||
|
//
|
||||||
Taro.setClipboardData({
|
// Taro.setClipboardData({
|
||||||
data: inviteText,
|
// data: inviteText,
|
||||||
success: () => {
|
// success: () => {
|
||||||
Taro.showToast({
|
// Taro.showToast({
|
||||||
title: '邀请信息已复制',
|
// title: '邀请信息已复制',
|
||||||
icon: 'success'
|
// icon: 'success'
|
||||||
})
|
// })
|
||||||
}
|
// }
|
||||||
})
|
// })
|
||||||
}
|
// }
|
||||||
|
|
||||||
// 分享小程序码
|
// 分享小程序码
|
||||||
const shareMiniProgramCode = () => {
|
// const shareMiniProgramCode = () => {
|
||||||
if (!dealerUser?.userId) {
|
// if (!dealerUser?.userId) {
|
||||||
Taro.showToast({
|
// Taro.showToast({
|
||||||
title: '用户信息未加载',
|
// title: '用户信息未加载',
|
||||||
icon: 'error'
|
// icon: 'error'
|
||||||
})
|
// })
|
||||||
return
|
// return
|
||||||
}
|
// }
|
||||||
|
//
|
||||||
// 小程序分享
|
// // 小程序分享
|
||||||
Taro.showShareMenu({
|
// Taro.showShareMenu({
|
||||||
withShareTicket: true,
|
// withShareTicket: true,
|
||||||
showShareItems: ['shareAppMessage']
|
// showShareItems: ['shareAppMessage']
|
||||||
})
|
// })
|
||||||
}
|
// }
|
||||||
|
|
||||||
if (!dealerUser) {
|
if (!dealerUser) {
|
||||||
return (
|
return (
|
||||||
@@ -263,29 +263,29 @@ const DealerQrcode: React.FC = () => {
|
|||||||
保存小程序码到相册
|
保存小程序码到相册
|
||||||
</Button>
|
</Button>
|
||||||
</View>
|
</View>
|
||||||
<View className={'my-2 bg-white'}>
|
{/*<View className={'my-2 bg-white'}>*/}
|
||||||
<Button
|
{/* <Button*/}
|
||||||
size="large"
|
{/* size="large"*/}
|
||||||
block
|
{/* block*/}
|
||||||
icon={<Copy/>}
|
{/* icon={<Copy/>}*/}
|
||||||
onClick={copyInviteInfo}
|
{/* onClick={copyInviteInfo}*/}
|
||||||
disabled={!dealerUser?.userId || loading}
|
{/* disabled={!dealerUser?.userId || loading}*/}
|
||||||
>
|
{/* >*/}
|
||||||
复制邀请信息
|
{/* 复制邀请信息*/}
|
||||||
</Button>
|
{/* </Button>*/}
|
||||||
</View>
|
{/*</View>*/}
|
||||||
<View className={'my-2 bg-white'}>
|
{/*<View className={'my-2 bg-white'}>*/}
|
||||||
<Button
|
{/* <Button*/}
|
||||||
size="large"
|
{/* size="large"*/}
|
||||||
block
|
{/* block*/}
|
||||||
fill="outline"
|
{/* fill="outline"*/}
|
||||||
icon={<Share/>}
|
{/* icon={<Share/>}*/}
|
||||||
onClick={shareMiniProgramCode}
|
{/* onClick={shareMiniProgramCode}*/}
|
||||||
disabled={!dealerUser?.userId || loading}
|
{/* disabled={!dealerUser?.userId || loading}*/}
|
||||||
>
|
{/* >*/}
|
||||||
分享给好友
|
{/* 分享给好友*/}
|
||||||
</Button>
|
{/* </Button>*/}
|
||||||
</View>
|
{/*</View>*/}
|
||||||
</View>
|
</View>
|
||||||
|
|
||||||
{/* 推广说明 */}
|
{/* 推广说明 */}
|
||||||
|
|||||||
@@ -41,7 +41,7 @@ function Cart() {
|
|||||||
|
|
||||||
useShareAppMessage(() => {
|
useShareAppMessage(() => {
|
||||||
return {
|
return {
|
||||||
title: '购物车 - 网宿小店',
|
title: '购物车 - 时里院子市集',
|
||||||
success: function () {
|
success: function () {
|
||||||
console.log('分享成功');
|
console.log('分享成功');
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -173,9 +173,10 @@ const Header = (props: any) => {
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<View className={'fixed top-0 header-bg'} style={{
|
<View className={'fixed top-0 header-bg'} style={{
|
||||||
height: !props.stickyStatus ? '180px' : '148px',
|
height: !props.stickyStatus ? '180px' : 'auto',
|
||||||
|
paddingBottom: '12px'
|
||||||
}}>
|
}}>
|
||||||
<MySearch/>
|
<MySearch statusBarHeight={statusBarHeight} />
|
||||||
{/*{!props.stickyStatus && <MySearch done={reload}/>}*/}
|
{/*{!props.stickyStatus && <MySearch done={reload}/>}*/}
|
||||||
</View>
|
</View>
|
||||||
<NavBar
|
<NavBar
|
||||||
|
|||||||
@@ -4,7 +4,7 @@ import {useState} from "react";
|
|||||||
import Taro from '@tarojs/taro';
|
import Taro from '@tarojs/taro';
|
||||||
import { goTo } from '@/utils/navigation';
|
import { goTo } from '@/utils/navigation';
|
||||||
|
|
||||||
function MySearch() {
|
function MySearch(props: any) {
|
||||||
const [keywords, setKeywords] = useState<string>('')
|
const [keywords, setKeywords] = useState<string>('')
|
||||||
|
|
||||||
const onKeywords = (keywords: string) => {
|
const onKeywords = (keywords: string) => {
|
||||||
@@ -39,7 +39,7 @@ function MySearch() {
|
|||||||
background: '#ffffff',
|
background: '#ffffff',
|
||||||
padding: '0 5px',
|
padding: '0 5px',
|
||||||
borderRadius: '20px',
|
borderRadius: '20px',
|
||||||
marginTop: '100px',
|
marginTop: `${props.statusBarHeight + 50}px`,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Search size={18} className={'ml-2 text-gray-400'}/>
|
<Search size={18} className={'ml-2 text-gray-400'}/>
|
||||||
|
|||||||
@@ -21,7 +21,7 @@ function Home() {
|
|||||||
const userId = Taro.getStorageSync('UserId');
|
const userId = Taro.getStorageSync('UserId');
|
||||||
|
|
||||||
return {
|
return {
|
||||||
title: '网宿小店 - 网宿软件',
|
title: '时里院子市集',
|
||||||
path: userId ? `/pages/index/index?inviter=${userId}&source=share&t=${Date.now()}` : `/pages/index/index`,
|
path: userId ? `/pages/index/index?inviter=${userId}&source=share&t=${Date.now()}` : `/pages/index/index`,
|
||||||
success: function () {
|
success: function () {
|
||||||
console.log('首页分享成功');
|
console.log('首页分享成功');
|
||||||
|
|||||||
@@ -56,7 +56,7 @@ const UserCell = () => {
|
|||||||
<View style={{display: 'inline-flex', alignItems: 'center'}}>
|
<View style={{display: 'inline-flex', alignItems: 'center'}}>
|
||||||
<Reward className={'text-orange-100 '} size={16}/>
|
<Reward className={'text-orange-100 '} size={16}/>
|
||||||
<Text style={{fontSize: '16px'}}
|
<Text style={{fontSize: '16px'}}
|
||||||
className={'pl-3 text-orange-100 font-medium'}>管理中心</Text>
|
className={'pl-3 text-orange-100 font-medium'}>分销中心</Text>
|
||||||
{/*<Text className={'text-white opacity-80 pl-3'}>门店核销</Text>*/}
|
{/*<Text className={'text-white opacity-80 pl-3'}>门店核销</Text>*/}
|
||||||
</View>
|
</View>
|
||||||
}
|
}
|
||||||
|
|||||||
111
src/pages/user/components/UserGrid.tsx
Normal file
111
src/pages/user/components/UserGrid.tsx
Normal file
@@ -0,0 +1,111 @@
|
|||||||
|
import {Grid, ConfigProvider} from '@nutui/nutui-react-taro'
|
||||||
|
import navTo from "@/utils/common";
|
||||||
|
import Taro from '@tarojs/taro'
|
||||||
|
import {View} from '@tarojs/components'
|
||||||
|
import {ShieldCheck, Location, Tips, Ask, Dongdong, People, AfterSaleService, Logout} from '@nutui/icons-react-taro'
|
||||||
|
import {useUser} from "@/hooks/useUser";
|
||||||
|
|
||||||
|
const UserCell = () => {
|
||||||
|
const {logoutUser} = useUser();
|
||||||
|
|
||||||
|
const onLogout = () => {
|
||||||
|
Taro.showModal({
|
||||||
|
title: '提示',
|
||||||
|
content: '确定要退出登录吗?',
|
||||||
|
success: function (res) {
|
||||||
|
if (res.confirm) {
|
||||||
|
// 使用 useUser hook 的 logoutUser 方法
|
||||||
|
logoutUser();
|
||||||
|
Taro.reLaunch({
|
||||||
|
url: '/pages/index/index'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<View className="bg-white mx-4 mt-4 rounded-xl">
|
||||||
|
<View className="font-semibold text-gray-800 pt-4 pl-4">我的服务</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={() => navTo('/user/address/index', true)}>
|
||||||
|
<View className="text-center">
|
||||||
|
<View className="w-12 h-12 bg-blue-50 rounded-xl flex items-center justify-center mx-auto mb-2">
|
||||||
|
<Location color="#3b82f6" size="20"/>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</Grid.Item>
|
||||||
|
|
||||||
|
<Grid.Item text={'实名认证'} onClick={() => navTo('/user/userVerify/index', true)}>
|
||||||
|
<View className="text-center">
|
||||||
|
<View className="w-12 h-12 bg-green-50 rounded-xl flex items-center justify-center mx-auto mb-2">
|
||||||
|
<ShieldCheck color="#10b981" size="20"/>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</Grid.Item>
|
||||||
|
|
||||||
|
<Grid.Item text={'我的邀请'} onClick={() => navTo('/dealer/team/index', true)}>
|
||||||
|
<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={() => navTo('/dealer/qrcode/index', true)}>
|
||||||
|
<View className="text-center">
|
||||||
|
<View className="w-12 h-12 bg-orange-50 rounded-xl flex items-center justify-center mx-auto mb-2">
|
||||||
|
<Dongdong color="#f59e0b" size="20"/>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</Grid.Item>
|
||||||
|
|
||||||
|
<Grid.Item text={'管理中心'} onClick={() => navTo('/admin/index', true)}>
|
||||||
|
<View className="text-center">
|
||||||
|
<View className="w-12 h-12 bg-red-50 rounded-xl flex items-center justify-center mx-auto mb-2">
|
||||||
|
<AfterSaleService className={'text-red-500'} size="20"/>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</Grid.Item>
|
||||||
|
|
||||||
|
<Grid.Item text={'常见问题'} onClick={() => navTo('/user/help/index')}>
|
||||||
|
<View className="text-center">
|
||||||
|
<View className="w-12 h-12 bg-cyan-50 rounded-xl flex items-center justify-center mx-auto mb-2">
|
||||||
|
<Ask className={'text-cyan-500'} size="20"/>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</Grid.Item>
|
||||||
|
|
||||||
|
<Grid.Item text={'关于我们'} onClick={() => navTo('/user/about/index')}>
|
||||||
|
<View className="text-center">
|
||||||
|
<View className="w-12 h-12 bg-amber-50 rounded-xl flex items-center justify-center mx-auto mb-2">
|
||||||
|
<Tips className={'text-amber-500'} size="20"/>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</Grid.Item>
|
||||||
|
|
||||||
|
<Grid.Item text={'安全退出'} onClick={onLogout}>
|
||||||
|
<View className="text-center">
|
||||||
|
<View className="w-12 h-12 bg-pink-50 rounded-xl flex items-center justify-center mx-auto mb-2">
|
||||||
|
<Logout className={'text-pink-500'} size="20"/>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</Grid.Item>
|
||||||
|
|
||||||
|
</Grid>
|
||||||
|
</ConfigProvider>
|
||||||
|
</View>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
export default UserCell
|
||||||
@@ -2,17 +2,13 @@ import {useEffect, useRef} from 'react'
|
|||||||
import {PullToRefresh} from '@nutui/nutui-react-taro'
|
import {PullToRefresh} from '@nutui/nutui-react-taro'
|
||||||
import UserCard from "./components/UserCard";
|
import UserCard from "./components/UserCard";
|
||||||
import UserOrder from "./components/UserOrder";
|
import UserOrder from "./components/UserOrder";
|
||||||
import UserCell from "./components/UserCell";
|
|
||||||
import UserFooter from "./components/UserFooter";
|
import UserFooter from "./components/UserFooter";
|
||||||
import {useUser} from "@/hooks/useUser";
|
|
||||||
import {useUserData} from "@/hooks/useUserData";
|
import {useUserData} from "@/hooks/useUserData";
|
||||||
import './user.scss'
|
import './user.scss'
|
||||||
import IsDealer from "./components/IsDealer";
|
import IsDealer from "./components/IsDealer";
|
||||||
|
import UserGrid from "@/pages/user/components/UserGrid";
|
||||||
|
|
||||||
function User() {
|
function User() {
|
||||||
const {
|
|
||||||
isAdmin
|
|
||||||
} = useUser();
|
|
||||||
|
|
||||||
const { refresh } = useUserData()
|
const { refresh } = useUserData()
|
||||||
const userCardRef = useRef<any>()
|
const userCardRef = useRef<any>()
|
||||||
@@ -29,28 +25,6 @@ function User() {
|
|||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
/**
|
|
||||||
* 门店核销管理
|
|
||||||
*/
|
|
||||||
if (isAdmin()) {
|
|
||||||
return (
|
|
||||||
<PullToRefresh
|
|
||||||
onRefresh={handleRefresh}
|
|
||||||
headHeight={60}
|
|
||||||
>
|
|
||||||
<div className={'w-full'} style={{
|
|
||||||
background: 'linear-gradient(to bottom, #e9fff2, #f9fafb)'
|
|
||||||
}}>
|
|
||||||
<UserCard ref={userCardRef}/>
|
|
||||||
<UserOrder/>
|
|
||||||
<IsDealer/>
|
|
||||||
<UserCell/>
|
|
||||||
<UserFooter/>
|
|
||||||
</div>
|
|
||||||
</PullToRefresh>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<PullToRefresh
|
<PullToRefresh
|
||||||
onRefresh={handleRefresh}
|
onRefresh={handleRefresh}
|
||||||
@@ -62,7 +36,7 @@ function User() {
|
|||||||
<UserCard ref={userCardRef}/>
|
<UserCard ref={userCardRef}/>
|
||||||
<UserOrder/>
|
<UserOrder/>
|
||||||
<IsDealer/>
|
<IsDealer/>
|
||||||
<UserCell/>
|
<UserGrid/>
|
||||||
<UserFooter/>
|
<UserFooter/>
|
||||||
</div>
|
</div>
|
||||||
</PullToRefresh>
|
</PullToRefresh>
|
||||||
|
|||||||
Reference in New Issue
Block a user