template-10584/src/pages/user/components/OrderIcon.tsx

import {useEffect, useState} from 'react'
import {navigateTo} from '@tarojs/taro'
import Taro from '@tarojs/taro'
import {Button} from '@tarojs/components';
import {Image} from '@nutui/nutui-react-taro'
import {getUserInfo, getWxOpenId} from "@/api/layout";
import {TenantId} from "@/config/app";
import {User} from "@/api/system/user/model";
// import News from "./News";
import {myPageBszxBm} from "@/api/bszx/bszxBm";
import {listCmsNavigation} from "@/api/cms/cmsNavigation";

const OrderIcon = () => {

  const [loading, setLoading] = useState(true)
  const [isLogin, setIsLogin] = useState<boolean>(false)
  const [userInfo, setUserInfo] = useState<User>()
  const [bmLogs, setBmLogs] = useState<any>()
  const [navItems, setNavItems] = useState<any>([])

  /* 获取用户手机号 */
  const handleGetPhoneNumber = ({detail}) => {
    const {code, encryptedData, iv} = detail
    Taro.login({
      success: function () {
        if (code) {
          Taro.request({
            url: 'https://server.websoft.top/api/wx-login/loginByMpWxPhone',
            method: 'POST',
            data: {
              code,
              encryptedData,
              iv,
              notVerifyPhone: true,
              refereeId: 0,
              sceneType: 'save_referee',
              tenantId: TenantId
            },
            header: {
              'content-type': 'application/json',
              TenantId
            },
            success: function (res) {
              Taro.setStorageSync('access_token', res.data.data.access_token)
              Taro.setStorageSync('UserId', res.data.data.user.userId)
              setUserInfo(res.data.data.user)
              Taro.setStorageSync('Phone', res.data.data.user.phone)
              setIsLogin(true)
              Taro.showToast({
                title: '登录成功',
                icon: 'success'
              });
            }
          })
        } else {
          console.log('登录失败！')
        }
      }
    })
  }

  const onLogin = (item: any, index: number) => {
    if(!isLogin){
      return navigateTo({url: `/pages/category/category?id=${item.navigationId}`})
    }else {
      // 报名链接
      if(index == 0){
        console.log(bmLogs,'bmLogs')
        if(bmLogs && bmLogs.length > 0){
          return navigateTo({url: `/bszx/bm-cert/bm-cert?id=${bmLogs[0].id}`})
        }else {
          navigateTo({url: `/user/profile/profile`})
        }
      }
      // 善款明细
      if(item.navigationId == 4119){
        return navigateTo({url: `/bszx/pay-record/pay-record`})
      }
      return navigateTo({url: `/pages/category/category?id=${item.navigationId}`})
    }
  }

  const reload = () => {
    // 读取栏目
    listCmsNavigation({parentId: 2828,hide: 0}).then(res => {
      console.log(res,'9999')
      setNavItems(res);
    })
    Taro.getUserInfo({
      success: (res) => {
        const avatar = res.userInfo.avatarUrl;
        setUserInfo({
          avatar,
          nickname: res.userInfo.nickName,
          sexName: res.userInfo.gender == 1 ? '男' : '女'
        })
        getUserInfo().then((data) => {
          if (data) {
            setUserInfo(data)
            setIsLogin(true);
            console.log(userInfo, 'userInfo...')
            Taro.setStorageSync('UserId', data.userId)
            // 获取openId
            if (!data.openid) {
              Taro.login({
                success: (res) => {
                  getWxOpenId({code: res.code}).then(() => {
                  })
                }
              })
            }
          }
        }).catch(() => {
          console.log('未登录')
        });
      }
    });
    // 报名日志
    myPageBszxBm({limit: 1}).then(res => {
      if (res.list) {
        setBmLogs(res.list);
      }
    })
    setLoading(false);
  };

  const showAuthModal = () => {
    Taro.showModal({
      title: '授权提示',
      content: '需要获取您的用户信息',
      confirmText: '去授权',
      cancelText: '取消',
      success: (res) => {
        if (res.confirm) {
          // 用户点击确认，打开授权设置页面
          openSetting();
        }
      }
    });
  };

  const openSetting = () => {
    // Taro.openSetting：调起客户端小程序设置界面，返回用户设置的操作结果。设置界面只会出现小程序已经向用户请求过的权限。
    Taro.openSetting({
      success: (res) => {
        if (res.authSetting['scope.userInfo']) {
          // 用户授权成功，可以获取用户信息
          reload();
        } else {
          // 用户拒绝授权，提示授权失败
          Taro.showToast({
            title: '授权失败',
            icon: 'none'
          });
        }
      }
    });
  };

  useEffect(() => {
    Taro.getSetting({
      success: (res) => {
        if (res.authSetting['scope.userInfo']) {
          // 用户已经授权过，可以直接获取用户信息
          console.log('用户已经授权过，可以直接获取用户信息')
          reload();
        } else {
          // 用户未授权，需要弹出授权窗口
          console.log('用户未授权，需要弹出授权窗口')
          showAuthModal();
        }
      }
    });
    reload();
  }, [])

  return (
    <div className={'my-3'}>
      <div className={'pt-4 bg-yellow-50 rounded-2xl'}
           style={{background: 'linear-gradient(to bottom, #ffffff, #ffffcc)'}}>
        <div className={'flex justify-between pb-2 px-1'}>
          {
            navItems.map((item, index) => (
              <div key={index} className={'text-center'}>
                {
                  isLogin && !loading ?
                    <div className={'flex flex-col justify-center items-center'} onClick={() => {
                      onLogin(item, index)
                    }}>
                      <Image src={item.icon} height={28} width={28} lazyLoad={false}/>
                      <div className={'mt-2'} style={{fontSize: '15px'}}>{item?.title}</div>
                    </div>
                    :
                    <Button className={'text-white'} open-type="getPhoneNumber" onGetPhoneNumber={handleGetPhoneNumber}>
                      <div className={'flex flex-col justify-center items-center'}>
                        <Image src={item.icon} height={28} width={28} lazyLoad={false}/>
                        <div className={'mt-2 text-gray-700'} style={{fontSize: '15px'}}>{item?.title}</div>
                      </div>
                    </Button>
                }
              </div>
            ))
          }
        </div>
      </div>
      {/*<image src={'https://oss.wsdns.cn/20250224/18a2f3b807c94aac8a67af34e95534d6.jpeg'} className={'book'}>倡议书</image>*/}
      {/*<News id={categoryId}/>*/}
    </div>
  )
}
export default OrderIcon