pj_h5_cloud/src/pages/tabbar/my.vue

<script setup lang="ts">
import { ref, reactive } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { isEmpty } from "radash";

import { hooks, router, constant } from "@@/index";
import { merchantApi, userApi, walletApi } from "@@/api";

const data = {
  serviceList: [
    { text: "钱包管理", icon: "/static/icon/service_3.png", router: "/pages/wallet/list" },
    { text: "包厢预定", icon: "/static/icon/service_4.png", router: "/pages/boxes/apply-list" },
    { text: "外来人员就餐", icon: "/static/icon/service_1.png", router: "/pages/apply/foreign-list" },
    { text: "跨单位就餐", icon: "/static/icon/service_1.png", router: "/pages/apply/stride-list" },
    { text: "人脸管理", icon: "/static/icon/service_5.png", router: "/pages/human-face/list" },
    { text: "测试登录", icon: "/static/icon/login.png", router: "/pages/test/login" },
  ],
};

const state = reactive<any>({
  wallet: [],
  userInfo: {},
});

onLoad((options) => {
  (window as any).CP2.getAppInfo().then((res) => {
    console.log(res);
    if (res.code == 1) {
      //诗画
      console.log("诗画环境");
      (window as any).CP2.getUserInfo().then((res) => {
        let accountId = res.data.accountId;
        let sessionId = res.sessionId;
        doLogin(1, null, accountId, sessionId);
      });
    } else {
      //浙政钉或者h5
      const url = window.location.href;
      const params = new URL(url).searchParams;
      const token = params.get("uabaseToken"); // 获取 uabaseToken 参数值
      console.log("Token:", token);
      if (null != token) {
        //浙政钉
        doLogin(2, token, null, null);
      }
    }
  });
});
onShow(() => {
  getUserInfo();
});

const getUserInfo = () => {
  const userInfoKey = constant.storageConstant.USERINFO;
  const userStorage = uni.getStorageSync(userInfoKey);
  if (!isEmpty(userStorage)) {
    state.userInfo = userStorage;
  }
};

const doLogin = async (loginType, token, accountId, sessionId) => {
  const tokenKey = constant.storageConstant.TOKEN;
  const userInfoKey = constant.storageConstant.USERINFO;
  const tokenStorage = uni.getStorageSync(tokenKey);
  const userStorage = uni.getStorageSync(userInfoKey);
  if (isEmpty(tokenStorage) || isEmpty(userStorage)) {
    uni.showLoading({
      title: "登录中...",
      mask: true,
    });
    let authData;
    if (loginType == 1) {
      // 诗画
      const params = {
        accountId: accountId,
        sessionId: sessionId,
      };
      const response = await userApi.authsh(params);
      authData = response.data;
    } else if (loginType == 2) {
      //浙政钉
      const response = await userApi.auth(token);
      authData = response.data;
    } else {
      //后期手机号+验证码登录
      router.jump("/pages/test/login");
      uni.hideLoading();
      return;
    }
    // const {data: authData} = await userApi.auth(token);
    uni.setStorageSync(tokenKey, authData);
    const { data: userData } = await userApi.userInfo();
    uni.setStorageSync(userInfoKey, userData);
    getUserInfo();
    uni.hideLoading();
    uni.showToast({ title: "登录成功", icon: "none" });
  }
};

const doLogout = async () => {
  uni.showLoading({
    title: "退出登录中...",
    mask: true,
  });
  const tokenKey = constant.storageConstant.TOKEN;
  const userInfoKey = constant.storageConstant.USERINFO;
  uni.removeStorageSync(tokenKey);
  uni.removeStorageSync(userInfoKey);
  state.userInfo = {};
  uni.hideLoading();
  uni.showToast({ title: "退出登录成功", icon: "none" });
};
</script>

<template>
  <crud-layout title="我的" bg="/static/page/blue-bg.png">
    <view class="flex-row items-center">
      <image class="w-100rpx h-100rpx rounded-full" v-if="state.userInfo.avatar" :src="state.userInfo.avatar"
        mode="aspectFill" />
      <image class="w-100rpx h-100rpx rounded-full" v-else src="/static/icon/default-avatar.png" mode="aspectFill" />
      <view class="m-l-30rpx" v-if="state.userInfo.id">
        <view class="flex-row items-center">
          <text class="sub-text-30">{{ state.userInfo.nickname }}</text>
          <text class="iconfont icon-youjiantou color-#666666 m-l-20rpx"></text>
        </view>
        <text class="sub-text-26">ID {{ state.userInfo.id }}</text>
      </view>
      <view v-else class="flex-row items-center m-l-30rpx" @tap="doLogin">
        <text class="sub-text-32">请先登录</text>
        <text class="iconfont icon-youjiantou"></text>
      </view>
    </view>

    <view class="m-t-40rpx rounded-20rpx shadow-main p-30rpx p-b-40rpx bg-white!">
      <view class="service_item flex-row items-center justify-between" v-for="(v, i) in data.serviceList" :key="i"
        @tap="router.jump(v.router)">
        <view class="flex-row-center">
          <image class="w-40rpx h-40rpx" :src="v.icon" mode="aspectFill" />
          <text class="sub-text-28 m-l-20rpx">{{ v.text }}</text>
        </view>
        <view class="iconfont icon-youjiantou"></view>
      </view>
    </view>

    <view class="flex-col-center m-t-40rpx m-x-30rpx">
      <view class="w-full text-center sub-text-28 p-y-20rpx rounded-40rpx border-solid border border-#0094ff"
        @tap="doLogout">
        退出登录
      </view>
    </view>
  </crud-layout>
</template>

<style lang="scss" scoped>
.service_item:not(:last-child) {
  padding-bottom: 40rpx;
  border-bottom: 1px solid #fafafa;
  margin-bottom: 40rpx;
}
</style>