EVA-Notify/src/pages/user/user.tsx

import { AtList, AtListItem, AtToast } from 'taro-ui';
import { Component, ReactNode } from 'react';
import { View, Picker, Image, Text } from '@tarojs/components';
import Taro from '@tarojs/taro';
import type CustomTabBar from '@/custom-tab-bar';
import PageFooter from '@/components/PageFooter/PageFooter';
import aboutIcon from '@/assets/icons/UserPage/about.svg';
import userIcon from '@/assets/icons/UserPage/user.svg';
import clockIcon from '@/assets/icons/UserPage/clock.svg';
import messageIcon from '@/assets/icons/UserPage/message.svg';
import pt, { Lang } from '@/plain-text';
import { setLocaleData } from '@/service/localeData';
import wechatUser from '@/wechat';
import './user.scss';

const logo = 'https://wiki.zjueva.net/images/evalogo_hd.png';
const memberClickTimes = 7;

export default class UserPage extends Component {
  state = {
    selector: ['简体中文', 'English'],
    selectorChecked: {
      zh_CN: '简体中文',
      en_US: 'English',
    }[pt.getCurLang()],
    clicks: memberClickTimes,
    isToastOpen: false,
    toastText: '',
  };

  // 以下是TabBar相关
  pageCtx = Taro.getCurrentInstance().page;
  componentDidShow() {
    const tabbar = Taro.getTabBar<CustomTabBar>(this.pageCtx);
    tabbar?.setSelected(2);
  }
  // 以上是TabBar相关

  onTapImage = () => {
    this.setState({
      clicks: this.state.clicks - 1,
    });
    if (this.state.clicks < 3) {
      this.setState({
        toastText:
          pt.get().userPage.memberEntry.prefix +
          (this.state.clicks + 1).toString() + // React State's feature
          pt.get().userPage.memberEntry.affix,
        isToastOpen: true,
      });
      if (this.state.clicks == 0) {
        this.setState({
          isToastOpen: false,
          clicks: memberClickTimes,
        });
        Taro.navigateTo({
          url: '/pages/user/member/member',
        });
      }
    }
  };

  showLangDict: Record<string, Lang> = {
    简体中文: 'zh_CN',
    English: 'en_US',
  };

  onSelect = (e: { detail: { value: string | number } }) => {
    this.setState({
      selectorChecked: this.state.selector[e.detail.value],
    });
    let currentLang = this.showLangDict[this.state.selector[e.detail.value]];
    pt.setLang(currentLang);
    setLocaleData(currentLang);
    Taro.reLaunch({
      url: '/pages/user/user',
    });
  };

  myTicketPage() {
    Taro.navigateTo({
      url: '/pages/user/myTicket/myTicket',
    });
  }

  informPage() {
    Taro.navigateTo({
      url: '/pages/user/inform/inform',
    });
  }

  reportPage() {
    Taro.navigateTo({
      url: '/pages/user/report/report',
    });
  }

  aboutPage() {
    Taro.navigateTo({
      url: '/pages/user/about/about',
    });
  }

  render(): ReactNode {
    return (
      <View>
        <View
          className='at-row at-row__justify--center at-row__align--end'
          style='height:220rpx;'
        >
          <Image
            onTap={this.onTapImage}
            style='width: 200rpx;height: 200rpx;'
            src={logo}
            mode='aspectFit'
          />
        </View>
        <AtToast
          isOpened={this.state.isToastOpen}
          text={this.state.toastText}
        ></AtToast>
        <View
          className='at-row at-row__justify--center at-row__align--center'
          style='height:120rpx;color:#696969;'
        >
          <Text style={{ fontSize: '32rpx' }}> EVA Eta v1.0.2</Text>
        </View>
        <AtList>
          <AtListItem
            title={pt.get().userPage.ticketColumn.title}
            note={pt.get().userPage.ticketColumn.note}
            arrow='right'
            thumb={clockIcon}
            onClick={this.myTicketPage}
          />
          {wechatUser.getAccess() ? (
            <View></View>
          ) : (
            <AtListItem
              title={pt.get().userPage.infoColumn.title}
              note={pt.get().userPage.infoColumn.note}
              arrow='right'
              thumb={userIcon}
              onClick={this.informPage}
            />
          )}

          <AtListItem
            title={pt.get().userPage.reportColumn.title}
            note={pt.get().userPage.reportColumn.note}
            extraText=''
            arrow='right'
            thumb={messageIcon}
            onClick={this.reportPage}
          />
          <AtListItem
            title={pt.get().userPage.aboutColumn.title}
            note={pt.get().userPage.aboutColumn.note}
            extraText=''
            arrow='right'
            thumb={aboutIcon}
            onClick={this.aboutPage}
          />
          <View style={{ height: '40rpx' }}></View>
          <Picker
            mode='selector'
            range={this.state.selector}
            onChange={this.onSelect}
          >
            <AtList>
              <AtListItem
                title='语言 / Language'
                extraText={this.state.selectorChecked}
              />
            </AtList>
          </Picker>
        </AtList>
        <PageFooter />
      </View>
    );
  }
}