gxwebsoft
/
template-10550
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

refactor(user): 重构用户页面布局和功能 

- 移除未使用的导入和注释
- 更新页面标题和样式
- 添加新的 UserGrid 组件
- 修改 IsDealer 组件的文案
- 优化搜索框样式
- 更新分享信息标题
demo
科技小王子 3 weeks ago
parent
a4a200fd8a
commit
be74cb34c8
8 changed files with 189 additions and 103 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 136
      src/dealer/qrcode/index.tsx
  2. 2
      src/pages/cart/cart.tsx
  3. 5
      src/pages/index/Header.tsx
  4. 4
      src/pages/index/MySearch.tsx
  5. 2
      src/pages/index/index.tsx
  6. 2
      src/pages/user/components/IsDealer.tsx
  7. 111
      src/pages/user/components/UserGrid.tsx
  8. 30
      src/pages/user/user.tsx

136
src/dealer/qrcode/index.tsx
View File

@ -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 = () => {
if (!dealerUser?.userId) {
Taro.showToast({
title: '用户信息未加载',
icon: 'error'
})
return
}
const inviteText = `🎉 邀请您加入我的团队！
扫描小程序码或搜索"时里院子市集"小程序，即可享受优质商品和服务！
💰 成为我的团队成员，一起赚取丰厚佣金
🎁 新用户专享优惠等你来拿
邀请码：${dealerUser.userId}
快来加入我们吧！`
Taro.setClipboardData({
data: inviteText,
success: () => {
Taro.showToast({
title: '邀请信息已复制',
icon: 'success'
})
}
})
}
// 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']
})
}
// const shareMiniProgramCode = () => {
// if (!dealerUser?.userId) {
// Taro.showToast({
// title: '用户信息未加载',
// icon: 'error'
// })
// return
// }
//
// // 小程序分享
// Taro.showShareMenu({
// withShareTicket: true,
// 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'}>
<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 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>
{/* 推广说明 */} {/* 推广说明 */}

2
src/pages/cart/cart.tsx
View File

@ -41,7 +41,7 @@ function Cart() {
useShareAppMessage(() => { useShareAppMessage(() => {
return { return {
title: '购物车 - 网宿小店',
title: '购物车 - 时里院子市集',
success: function () { success: function () {
console.log('分享成功'); console.log('分享成功');
}, },

5
src/pages/index/Header.tsx
View File

@ -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
src/pages/index/MySearch.tsx
View File

@ -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'}/>

2
src/pages/index/index.tsx
View File

@ -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('首页分享成功');

2
src/pages/user/components/IsDealer.tsx
View File

@ -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
View 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

30
src/pages/user/user.tsx
View File

@ -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>

Write Preview
Loading…
Cancel
Save