taro/src/pages/account/Profile.tsx

import Buttons from "@/components/basic/Buttons";
import { delSession } from "@/services/common";
import { clear, getInfo, getPerm, logout, uploadPerm } from "@/services/user";
import { View, Text, Image, Switch } from "@tarojs/components";
import Taro, { useDidShow, usePullDownRefresh, 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";
import { jumpPage } from "@/features/trackTimeDuration/hooks/Common";
import Tabbar from "@/components/navigation/TabBar";
import { getInfoSuccess, updateDebug } from "@/store/user";
import TitleView from "@/features/trackTimeDuration/components/TitleView";
import showAlert from "@/components/basic/Alert";
import { rpxToPx } from "@/utils/tools";
import dayjs from "dayjs";

let useNavigation, SwitchRN;
if (process.env.TARO_ENV == 'rn') {
    useNavigation = require("@react-navigation/native").useNavigation
    SwitchRN = require('react-native').Switch
}

export default function Page() {
    const dispatch = useDispatch();
    const { t } = useTranslation()
    const user = useSelector((state: any) => state.user);
    const [switchOn, setSwitchOn] = useState(false)
    const [triggered, setTriggered] = useState(true)
    const [memberAlert, setMemberAlert] = useState(global.memberAlert)
    const [baseDeviceTime, setBaseDeviceTime] = useState(false)
    const accessObj = useSelector((state: any) => state.access);

    let navigation;
    if (useNavigation) {
        navigation = useNavigation()
    }

    useEffect(() => {
        if (process.env.TARO_ENV == 'weapp') {
            var status = Taro.getStorageSync('isDebug')
            setSwitchOn(status)
        }
        getPermissions()
    }, [])

    if (process.env.TARO_ENV == 'weapp') {
        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
        dispatch(updateDebug({ is_debug: e.detail.value }))
    }

    function alertChanged(e) {
        setMemberAlert(e.detail.value)
        global.memberAlert = e.detail.value
        Taro.setStorage({
            key: 'memberAlert',
            data: e.detail.value
        })
    }

    function baseDeviceChanged(e) {
        setBaseDeviceTime(e)
        global.baseDeviceTime = e

        uploadPerm({ expire_based_on_device_time: e }).then(res => {
            if (global.indexPageRefresh) {
                global.indexPageRefresh()
            }
        })
    }

    function getPermissions() {
        getPerm().then(res => {
            setBaseDeviceTime((res as any).expire_based_on_device_time)
        })
    }

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

    function reset() {
        showAlert({
            title: t('feature.common.modal.reset_session_title'),
            content: t('feature.common.modal.reset_session_content'),
            showCancel: false,
            confirm: () => {
                delSession({ type: 'WX_MP' })
            }
        })

    }

    function clearF() {
        showAlert({
            title: t('feature.common.modal.deluser_title'),
            content: t('feature.common.modal.deluser_content'),
            showCancel: true,
            confirm: () => {
                dispatch(clear() as any);
            }
        })
    }

    function tapProfile(e) {
        if (process.env.TARO_ENV == 'weapp') {
            e.stopPropagation()
        }
        if (user.isLogin) {
            jumpPage('/pages/account/ProfileSetting', 'ProfileSetting', navigation)
        }
        else {
            jumpPage('/pages/account/ChooseAuth', 'ChooseAuth', navigation)
        }
    }

    function tapBalance(e) {
        if (user.isLogin) {
            jumpPage('/pages/store/product_list', 'ProductList', navigation)
        }
        else {
            jumpPage('/pages/account/ChooseAuth', 'ChooseAuth', navigation)
            if (process.env.TARO_ENV == 'weapp') {
                e.stopPropagation()
            }
        }

    }

    function goSetting(e) {
        console.log('apple')
        jumpPage('/pages/account/Setting', 'Setting', navigation)
        if (process.env.TARO_ENV == 'weapp' && e) {
            e.stopPropagation()
        }
    }

    usePullDownRefresh(() => {
        refresh()
    })

    function refresh() {
        setTriggered(true)
        getInfo().then(res => {
            console.log(res)
            Taro.stopPullDownRefresh()
            dispatch(getInfoSuccess(res))
            setTriggered(false)
        }).catch(e => {
            Taro.stopPullDownRefresh()
            setTriggered(false)
        })
    }

    function headerView() {
        return <TitleView title={t('page.more.title')} showAddBtn={false}>
        </TitleView>
    }

    function memberdesc() {
        if (!accessObj.access) {
            return ''
        }
        if (accessObj.access.member.type == 'NON_CONSUMABLE') {
            return 'Unlimited premium access to Pro features forever.'
        }
        if (accessObj.access.member.type == 'AUTO_RENEW') {
            return 'Premium access to Pro features during membership.'
        }
        return t('page.more.member_desc', { time: member_expire() })
    }

    function member_expire() {

        if (global.language == 'en') {
            return dayjs(accessObj.access.member.expire).format('MMM D HH:mm')
        }

        return dayjs(accessObj.access.member.expire).format('YYYY年MM月DD日 HH:mm')
    }

    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 : t('page.more.un_login')}</Text>
                    {/* <Text className="username">{user.isLogin ? '用户名未设置' : ''}</Text> */}
                </View>
            </Box>



            <Box>
                {
                    (!user.isLogin || (accessObj && accessObj.access && accessObj.access.member.status == 'NON_MEMBER')) ? <View className="balance" onClick={tapBalance}>
                        <Text className="title">{t('page.more.stone')}</Text>
                        <Text className="desc" style={{ height: process.env.TARO_ENV == 'weapp' ? rpxToPx(32) : rpxToPx(64) }}>{t('page.more.stone_desc')}</Text>
                    </View> :
                        <View className="balance" onClick={tapBalance}>
                            <Text className="title">{t('page.more.pro_member')}</Text>
                            <Text className="desc">{memberdesc()}</Text>
                            {/* <Text className="desc">{t('page.more.member_desc', { time: member_expire() })}</Text> */}
                        </View>
                }

            </Box>
            {
                user.isLogin && process.env.TARO_ENV == 'rn' && <View onClick={goSetting}>
                    <TableCell title={t('page.more.setting')} showArrow={true} showMarginBottom={true} onClick={goSetting}></TableCell>
                </View>
            }
            {
                user.isLogin && process.env.TARO_ENV == 'weapp' && <TableCell title={t('page.more.setting')} showArrow={true} showMarginBottom={true} onClick={goSetting}></TableCell>
            }
            {/* {user.isLogin && <Box >
                <View onClick={goSetting}>
                    <Text className="title">设置</Text>
                </View>
            </Box>
            } */}

            {
                user.isLogin && user.test_user && <View>
                    <View className="cell_top" onClick={clearF}>
                        <Text className="cell_title">user_id</Text>
                        <Text className="cell_value">{user.id.substring(0, 6)}***{user.id.substring(user.id.length - 10, user.id.length)}</Text>
                        <Image className="cell_arrow" src={require('@/assets/images/arrow3.png')} />
                    </View>
                    <View className="cell_line" style={{ marginLeft: rpxToPx(46), marginRight: rpxToPx(46) }}></View>
                    <View className="cell_center" onClick={reset}>
                        <Text className="cell_title">session</Text>
                        <Text className="cell_value">{t('page.more.reset_session')}</Text>
                        <Image className="cell_arrow" src={require('@/assets/images/arrow3.png')} />
                    </View>
                    <View className="cell_line" style={{ marginLeft: rpxToPx(46), marginRight: rpxToPx(46) }}></View>
                    <View className="cell_center">
                        <Text className="cell_title">member alert</Text>
                        <Switch checked={memberAlert} onChange={alertChanged} />
                    </View>
                    <View className="cell_line" style={{ marginLeft: rpxToPx(46), marginRight: rpxToPx(46) }}></View>
                    <View className="cell_center">
                        <Text className="cell_title">expire based on device time</Text>
                        {
                            process.env.TARO_ENV == 'rn' ? <SwitchRN value={baseDeviceTime} onChange={(e) => { baseDeviceChanged(e.nativeEvent.value) }} /> : <Switch checked={baseDeviceTime} onChange={(e) => { baseDeviceChanged(e.detail.value) }} />
                        }

                    </View>
                    <View className="cell_line" style={{ marginLeft: rpxToPx(46), marginRight: rpxToPx(46) }}></View>
                    <View className="cell_bottom">
                        <Text className="cell_title">{t('page.more.debug_mode')}</Text>
                        <Switch checked={switchOn} onChange={switchChanged} />
                    </View>

                </View>
            }

            {/* {
                user.isLogin && user.test_user && <TableCell title="user_id" showArrow={true} onClick={clearF}>
                    <Text style={{ opacity: 0.8 }}>{user.id.substring(0, 6)}***{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 }}>{t('page.more.reset_session')}</Text>
                </TableCell>
            }
            {
                user.isLogin && user.test_user && <TableCell title={t('page.more.debug_mode')} >
                    <Switch checked={switchOn} onChange={switchChanged} />
                </TableCell>
            } */}
            <View style={{ height: 40 }}></View>

            {/* <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 <View>
        <Layout title={t('page.more.title')}
            titleShowStyle={NaviBarTitleShowType.scrollToShow}
            type={TemplateType.customHeader}
            header={headerView()}
            triggered={triggered}
            refresh={refresh}
        >
            {
                detail()
            }
        </Layout>
        <Tabbar index={3} />
    </View>
}