taro/src/pages/account/Profile.tsx

import Buttons from "@/components/basic/Buttons";
import { delSession } from "@/services/common";
import { clear, logout } from "@/services/user";
import { View, Text, Image, Switch } from "@tarojs/components";
import Taro, { useDidShow, useShareAppMessage } from "@tarojs/taro";
import { useDispatch, useSelector } from "react-redux";
import './Profile.scss'
import Box from "@/components/layout/Box";
import { BoxType, NaviBarTitleShowType, TemplateType } from "@/utils/types";
import Layout from "@/components/layout/layout";
import { useTranslation } from "react-i18next";
import TableCell from "@/components/layout/TableCell";
import { useEffect, useState } from "react";


export default function Page() {
    const dispatch = useDispatch();
    const { t } = useTranslation()
    const user = useSelector((state: any) => state.user);
    const [switchOn, setSwitchOn] = useState(false)

    useEffect(() => {
        var status = Taro.getStorageSync('isDebug')
        setSwitchOn(status)
    }, [])

    useShareAppMessage((e)=>{
        return {
          title:t('share.title'),
          path:'pages/clock/Clock'
        }
      })

    function switchChanged(e) {
        setSwitchOn(e.detail.value)
        Taro.setStorageSync('isDebug', e.detail.value)
        global.isDebug = e.detail.value
    }

    function tapLogin() {
        Taro.navigateTo({
            url: '/pages/account/ChooseAuth'
        })
    }

    useDidShow(() => {
        global.updateTab(3)
    })

    function reset() {
        Taro.showModal({
            title: '重置session',
            content: '确认重置session吗？',
            success: res => {
                if (res.confirm) {
                    delSession({ type: 'WX_MP' })
                }
            }
        })

    }

    function clear() {
        Taro.showModal({
            title: '注销账号',
            content: '确定注销此账号吗？',
            success: res => {
                if (res.confirm) {
                    dispatch(clear() as any);
                }
            }
        })
    }

    function tapProfile(e) {
        e.stopPropagation()
        if (user.isLogin) {
            Taro.navigateTo({
                url: '/pages/account/ProfileSetting'
            })
        }
        else {
            Taro.navigateTo({
                url: '/pages/account/ChooseAuth'
            })
        }
    }

    function tapBalance(e) {
        if (user.isLogin) {

        }
        else {
            Taro.navigateTo({
                url: '/pages/account/ChooseAuth'
            })
            e.stopPropagation()
        }

    }

    function goSetting(e) {
        Taro.navigateTo({
            url: '/pages/account/Setting'
        })
        e.stopPropagation()
    }

    console.log(user.avatar)

    function detail() {
        return <View className="container">
            <Box>
                <View className="profile_card" onClick={tapProfile}>
                    <View className="avatar" style={{
                        opacity: user.isLogin ? 1 : 0.4,
                        background: user.isLogin ? 'transparent' : '#fff'
                    }}>
                        {
                            user.isLogin ? <Image src={user.avatar} className="avatar" mode="aspectFill" style={{
                                background: user.isLogin ? 'transparent' : '#fff'
                            }} /> : <Image src={require('@/assets/images/user.png')} className="avatar_placeholder" />
                        }
                    </View>
                    <Text className="nickname">{user.isLogin ? user.nickname : '未登录'}</Text>
                    {/* <Text className="username">{user.isLogin ? '用户名未设置' : ''}</Text> */}
                </View>
            </Box>

            <Box>
                <View className="balance" onClick={tapBalance}>
                    <Text className="title">逆龄石</Text>
                    <Text className="desc">{'会员体系升级中，期间指标记录限时免逆龄石记录\n敬请期待'}</Text>
                </View>
            </Box>
            {
                user.isLogin && <View onClick={goSetting}>
                    <TableCell title="设置" showArrow={true} showMarginBottom={true}></TableCell>
                </View>
            }
            {/* {user.isLogin && <Box >
                <View onClick={goSetting}>
                    <Text className="title">设置</Text>
                </View>
            </Box>
            } */}

            {
                user.isLogin && user.test_user && <TableCell title="user_id" showArrow={true} onClick={clear}>
                    <Text style={{ opacity: 0.8 }}>******{user.id.substring(user.id.length - 10, user.id.length)}</Text>
                </TableCell>
            }
            {
                user.isLogin && user.test_user && <TableCell title="session" showArrow={true} onClick={reset}>
                    <Text style={{ opacity: 0.8 }}>重置session</Text>
                </TableCell>
            }
            {
                user.isLogin && user.test_user && <TableCell title="走查模式" >
                    <Switch checked={switchOn} onChange={switchChanged} />
                </TableCell>
            }

            {/* <Text>未更改前的1px线</Text>
            <View style={{ marginLeft: 100 }}>
                <View className="px2Height" />
                <View className="px2Width" />
                <View className="px2Height" />
                <View className="px2Width" />
                <View className="px2Height" />
                <View className="px2Width" />
                <View className="px2Height" />
                <View className="px2Width" />
                <View className="px2Height" />
                <View className="px2Width" />
                <View className="px2Height" />
                <View className="px2Width" />
            </View>
            <Text>更改后的1px线</Text>
            <View style={{ marginLeft: 100 }}>
                <View className="px1Height" />
                <View className="px1Width" />
                <View className="px1Height" />
                <View className="px1Width" />
                <View className="px1Height" />
                <View className="px1Width" />
                <View className="px1Height" />
                <View className="px1Width" />
                <View className="px1Height" />
                <View className="px1Width" />
                <View className="px1Height" />
                <View className="px1Width" />
            </View>
            <Text>Svg Demo</Text>
            <View style={{ background: 'red', width: 30, height: 30 }}>
                
                <mysvg src='<svg  t="1701751531644" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3687" width="200" height="200"><path d="M509.92 843.84C325.504 843.84 176 694.32 176 509.92 176 325.504 325.504 176 509.92 176c184.416 0 333.92 149.504 333.92 333.92 0 184.416-149.504 333.92-333.92 333.92z m0-48c157.904 0 285.92-128.016 285.92-285.92C795.84 352 667.808 224 509.92 224 352 224 224 352 224 509.92c0 157.904 128 285.92 285.92 285.92z" fill="#5A626A" p-id="3548"></path></svg>
' colors={['blue']} />
            </View>
            <View style={{ background: 'red', width: 30, height: 30 }}>
                
                <mysvg src='<svg  t="1701751531644" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3687" width="200" height="200"><path d="M509.92 843.84C325.504 843.84 176 694.32 176 509.92 176 325.504 325.504 176 509.92 176c184.416 0 333.92 149.504 333.92 333.92 0 184.416-149.504 333.92-333.92 333.92z m0-48c157.904 0 285.92-128.016 285.92-285.92C795.84 352 667.808 224 509.92 224 352 224 224 352 224 509.92c0 157.904 128 285.92 285.92 285.92z" fill="#5A626A" p-id="3548"></path></svg>
' colors={['yellow']} />
            </View>
            <View style={{ background: 'red', width: 30, height: 30 }}>
                
                <mysvg src='<svg  t="1701751531644" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3687" width="200" height="200"><path d="M509.92 843.84C325.504 843.84 176 694.32 176 509.92 176 325.504 325.504 176 509.92 176c184.416 0 333.92 149.504 333.92 333.92 0 184.416-149.504 333.92-333.92 333.92z m0-48c157.904 0 285.92-128.016 285.92-285.92C795.84 352 667.808 224 509.92 224 352 224 224 352 224 509.92c0 157.904 128 285.92 285.92 285.92z" fill="#5A626A" p-id="3548"></path></svg>
' colors={['gray']} />
            </View>
            <View style={{ height: 200,display:'flex',flexShrink:0 }} /> */}

        </View>
    }

    return <Layout title={t('page.more.title')}
        titleShowStyle={NaviBarTitleShowType.scrollToShow} type={TemplateType.flex}>
        {
            detail()
        }
    </Layout>;
}