miniapp/src/pages/mine/index.jsx

import { useState, useEffect } from 'react'
import { useSelector } from 'react-redux'
import withLayout from '@/layout'
import { ScrollView, Image } from '@tarojs/components'
import Taro from '@tarojs/taro'
import '@/assets/css/iconfont.css'
import { fetch } from '@/utils/request'
import { API_PUT_REGISTERCONSULTANT } from '@/constants/api'
import { getImgURL } from '@/utils/image'
import { UPDATE_USER_INFO, ROLE_CODE } from '@/constants/user'
import store from '@/store'
import './index.scss'
import MineMenuList from './tabData'

const defaultRuleImage = 'https://yz-websit.oss-cn-hangzhou.aliyuncs.com/xlk/index-icon18.jpg'

const version = `版本: ${Version}`
const copyRight = `云致科技 @ ${(new Date()).getFullYear()}`

export default withLayout(() => {

  const user = useSelector(state => state.user)
  const [UserRole, setUserRole] = useState(null) // 1-普通用户 2-经纪人 3-置业顾问 4-驻场管理
  const [MenuList, setMenuList] = useState([])
  const { dispatch } = store

  useEffect(() => {
    if (user?.userInfo?.person?.personId) {
      const person = user.userInfo.person
      setUserRole(person.personType === ROLE_CODE.CUSTOMER || person.personType === ROLE_CODE.DRIFT ? 1 : person.personType === ROLE_CODE.CHANNEL_AGENT ? 2 : person.personType === ROLE_CODE.CONSULTANT ? 3 : 4)
    }
  }, [user])

  useEffect(() => {
    if (UserRole !== null) {
      setMenuList(UserRole === 1 ? MineMenuList.User : UserRole === 2 ? MineMenuList.Broker : UserRole === 3 ? MineMenuList.Adviser : MineMenuList.Resident)
    }
  }, [UserRole])

  const MenuClick = (router) => {
    return () => {
      if (router === 'propertyConsultant') {
        fetch({ url: API_PUT_REGISTERCONSULTANT, method: 'put' }).then(() => {
          Taro.showToast({
            title: '匹配成功',
            icon: 'none',
            duration: 2000
          })
          dispatch({ type: UPDATE_USER_INFO, payload: { personType: 'Realty Consultant' } })
          setTimeout(() => {
            Taro.navigateBack({ delta: 1 })
          }, 2000)
        }).catch(() => {
          Taro.showToast({
            title: '匹配失败，请联系相关管理人员',
            icon: 'none'
          })
        })
      } else if (router) {
        Taro.navigateTo({ url: router })
      }
    }
  }

  return (
    <view className='Page Mine'>

      <ScrollView scroll-y>
        <view className='PageContent'>
            <view className='Content'>

              {/* 用户信息 */}
              <view className='UserInfo'>
                <view className='UserIcon'>
                  <Image mode='aspectFill' className='centerLabel' src={getImgURL(user?.userInfo?.person?.userPhoto || user?.userInfo?.person?.avatarurl) || defaultRuleImage} />
                </view>
                <view className='OtherInfo'>
                  <view className='Name'>
                    <view>
                      <text>{user?.userInfo?.person?.nickname}</text>
                      <view>
                        <text className='iconfont icon-bianji' onClick={() => { Taro.navigateTo({ url: `/pages/mine/userInfo/index` }) }}></text>
                        <text onClick={() => { Taro.navigateTo({ url: `/pages/mine/userInfo/index` }) }}>个人信息资料修改</text>
                      </view>
                    </view>
                    <text className='Role'>{UserRole === 1 ? '客户' : UserRole === 2 ? '经纪人' : UserRole === 3 ? '置业顾问' : '驻场管理'}</text>
                    <text className='New'>NEW</text>
                    <text className='iconfont icon-diqiu'></text>
                  </view>
                </view>
              </view>

              {/* 用户菜单 */}
              <view className='MenuList'>
                {
                  MenuList.map((item, index) => (
                    <view>
                      {
                        item.map((subItem, subIndex) => (
                          <view key={`MenuItem-${index}-${subIndex}`} className='flex-h' onClick={MenuClick(subItem.router)}>
                            <view className='Icon'>
                              <Image mode='aspectFit' className='centerLabel' src={subItem.icon} />
                            </view>
                            <view className='flex-item flex-h'>
                              <text className='flex-item'>{subItem.name}</text>
                              <text className='iconfont icon-jiantouright'></text>
                            </view>
                          </view>
                        ))
                      }
                    </view>
                  ))
                }
              </view>

            </view>
        </view>

        <view className='copyright'>
          <view>{version}</view>
          <view>{copyRight}</view>
        </view>
      </ScrollView>

    </view>
  )
})