src/api/mine.ts

New file
@@ -0,0 +1,23 @@
/**
 * （不建议写成 request.post(xxx)，因为这样 post 时，无法 params 与 data 同时传参）
 *
 * 个人中心api接口集合
 * @method login 登录
 */

import { http } from "@/utils/http";
import { baseUrlApi } from "./util";
type Result = {
  success: boolean;
  data: Array<any>;
};

// 获取个人中心数据
export const cusExtendInfo = (data?: object) => {
  return http.request("post", baseUrlApi("/api/customer/cusExtendInfo"), { data });
};

// 修改个人中心数据
export const changeCusExtend = (data?: object) => {
  return http.request("post", baseUrlApi("/api/customer/changeCusExtend"), { data });
};

 src/layout/hooks/useNav.ts

@@ -51,6 +51,13 @@
      : useUserStoreHook()?.nickname;
  });

  /** 角色 */
  const userRoles = computed(() => {
    return isAllEmpty(useUserStoreHook()?.exRoles)
      ? useUserStoreHook()?.exRoles
      : {};
  });

  const avatarsStyle = computed(() => {
    return username.value ? { marginRight: "10px" } : "";
  });
@@ -150,6 +157,7 @@
    isCollapse,
    pureApp,
    username,
    userRoles,
    userAvatar,
    avatarsStyle,
    tooltipEffect

 src/router/index.ts

@@ -137,7 +137,7 @@
  }
  if (Cookies.get(multipleTabsKey) && userInfo) {
    // 无权限跳转403页面
    if (to.meta?.roles && !isOneOfArray(to.meta?.roles, userInfo?.roles)) {
    if (to.meta?.roles && !isOneOfArray(to.meta?.roles, userInfo?.exRoles)) {
      next({ path: "/error/403" });
    }
    // 开启隐藏首页后在浏览器地址栏手动输入首页welcome路由则跳转到404页面

 src/router/modules/mine.ts

@@ -1,7 +1,7 @@
export default {
  path: "/item",
  component: () => import("@/views/item/index.vue"),
  name: "item",
  path: "/mine",
  component: () => import("@/views/mine/index.vue"),
  name: "Mine",
  // redirect: "/error/403",
  meta: {
    icon: "ep/home-filled",

 src/router/utils.ts

@@ -84,7 +84,7 @@
/** 从localStorage里取出当前登录用户的角色roles，过滤无权限的菜单 */
function filterNoPermissionTree(data: RouteComponent[]) {
  const currentRoles =
    storageLocal().getItem<DataInfo<number>>(userKey)?.roles ?? [];
    storageLocal().getItem<DataInfo<number>>(userKey)?.exRoles ?? [];
  const newTree = cloneDeep(data).filter((v: any) =>
    isOneOfArray(v.meta?.roles, currentRoles)
  );

 src/store/modules/user.ts

@@ -25,7 +25,7 @@
    // 昵称
    nickname: storageLocal().getItem<DataInfo<number>>(userKey)?.nickname ?? "",
    // 页面级别权限
    roles: storageLocal().getItem<DataInfo<number>>(userKey)?.roles ?? [],
    exRoles: storageLocal().getItem<DataInfo<number>>(userKey)?.exRoles ?? [],
    // 按钮级别权限
    permissions:
      storageLocal().getItem<DataInfo<number>>(userKey)?.permissions ?? [],
@@ -48,10 +48,8 @@
      this.nickname = nickname;
    },
    /** 存储角色 */
    SET_ROLES(roles: Array<string>) {
      console.log(roles, "setroles");

      this.roles = roles;
    SET_ROLES(exRoles: Array<string>) {
      this.exRoles = exRoles;
    },
    /** 存储按钮级别权限 */
    SET_PERMS(permissions: Array<string>) {
@@ -83,7 +81,7 @@
    /** 前端登出（不调用接口） */
    logOut() {
      this.username = "";
      this.roles = [];
      this.exRoles = [];
      this.permissions = [];
      removeToken();
      useMultiTagsStoreHook().handleTags("equal", [...routerArrays]);

 src/store/types.ts

@@ -40,7 +40,7 @@
  avatar?: string;
  username?: string;
  nickname?: string;
  roles?: Array<string>;
  exRoles?: Array<string>;
  permissions?: Array<string>;
  isRemembered?: boolean;
  loginDay?: number;

 src/utils/auth.ts

@@ -43,7 +43,7 @@
 * @description 设置`token`以及一些必要信息并采用无感刷新`token`方案
 * 无感刷新：后端返回`accessToken`（访问接口使用的`token`）、`refreshToken`（用于调用刷新`accessToken`的接口时所需的`token`，`refreshToken`的过期时间（比如30天）应大于`accessToken`的过期时间（比如2小时））、`expires`（`accessToken`的过期时间）
 * 将`accessToken`、`expires`、`refreshToken`这三条信息放在key值为authorized-token的cookie里（过期自动销毁）
 * 将`avatar`、`username`、`nickname`、`roles`、`permissions`、`refreshToken`、`expires`这七条信息放在key值为`user-info`的localStorage里（利用`multipleTabsKey`当浏览器完全关闭后自动销毁）
 * 将`avatar`、`username`、`nickname`、`exRoles`、`permissions`、`refreshToken`、`expires`这七条信息放在key值为`user-info`的localStorage里（利用`multipleTabsKey`当浏览器完全关闭后自动销毁）
 */
export function setToken(data: DataInfo<Date>) {
  let expires = 0;

 src/views/home/index.vue

@@ -407,7 +407,7 @@
const userStore = useUserStore();

// 访问 state 属性
console.log(userStore.roles,'-'); // 直接获取值
// console.log(userStore.roles,'-'); // 直接获取值
defineOptions({
  name: "Main"
});

 src/views/mine/index.vue

@@ -1,11 +1,192 @@
<script setup lang="ts">
<script setup lang="tsx">
import { cusExtendInfo } from "@/api/mine";
import { message } from "@/utils/message";
import { onMounted, reactive } from "vue";
import {
  addDialog,
  closeDialog,
  updateDialog,
  closeAllDialog
} from "@/components/ReDialog";
let state = reactive({
  userInfo: {}
});
onMounted(async () => {
  let res = await cusExtendInfo();
  if (res.code == 200) {
    state.userInfo = res.result;
  } else {
    message(res.message || res.result, {
      type: "error"
    });
  }
});
const showImg = name => {
  console.log("点击率");
  addDialog({
    width: "40%",
    title: "查看营业执照",
    contentRenderer: () => <img src={state.userInfo[name]} />, // jsx 语法 （注意在.vue文件启用jsx语法，需要在script开启lang="tsx"）
    closeCallBack: ({ options, args }) => {
      // options.props 是响应式的
      // const { formInline } = options.props as FormProps;
      // const text = `姓名：${formInline.user} 城市：${formInline.region}`;
      if (args?.command === "cancel") {
        // 您点击了取消按钮
        // active.value -= 1;
      } else if (args?.command === "sure") {
      } else {
      }
    }
  });
};
defineOptions({
  name: "mine"
});
</script>

<template>
  <div>我是个人之心</div>
  <el-descriptions class="margin-top" title="" :column="3" :size="size" border>
    <!-- <template #extra>
      <el-button type="primary">Operation</el-button>
    </template> -->
    <el-descriptions-item :span="3">
      <template #label>
        <div class="cell-item">交易主体</div>
      </template>
      {{ state.userInfo.transactionCode }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">企业名称</div>
      </template>
      {{ state.userInfo.enterpriseName }}

      <span @click="showImg('businessLicense')">
        <el-link type="primary" underline>查看营业执照</el-link>
      </span>
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">统一社会信用代码</div>
      </template>
      {{ state.userInfo.unifiedSocialCreditCode }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">注册资金</div>
      </template>
      {{ state.userInfo.registeredCapital }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">企业类型</div>
      </template>
      {{ state.userInfo.enterpriseType }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">住所地</div>
      </template>
      {{ state.userInfo.residence }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">联系电话</div>
      </template>
      {{ state.userInfo.legalRepresentativePhone }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">成立时间</div>
      </template>
      {{ state.userInfo.establishmentTime }}
    </el-descriptions-item>
    <el-descriptions-item :span="2">
      <template #label>
        <div class="cell-item">电子邮箱</div>
      </template>
      {{ state.userInfo.enterpriseEmail }}
    </el-descriptions-item>
    <el-descriptions-item :span="3" label-width="100">
      <template #label>
        <div class="cell-item">主营业务</div>
      </template>
      {{ state.userInfo.mainBusiness }}
    </el-descriptions-item>

    <el-descriptions-item>
      <template #label>
        <div class="cell-item">法定代表人</div>
      </template>
      {{ state.userInfo.legalRepresentativeName }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">身份证</div>
      </template>
      {{ state.userInfo.legalRepresentativeIdNumber }}
      <span @click="showImg('legalRepresentativeIdCard')">
        <el-link type="primary" underline>查看身份证</el-link>
      </span>
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">联系电话</div>
      </template>
      {{ state.userInfo.legalRepresentativePhone }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">业务经办人</div>
      </template>
      {{ state.userInfo.operatorName }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">身份证</div>
      </template>
      {{ state.userInfo.operatorIdNumber }}
      <span style="margin-right: auto" @click="showImg('operatorIdCard')">
        <el-link type="primary" underline>查看身份证</el-link>
      </span>
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">联系电话</div>
      </template>
      {{ state.userInfo.operatorPhone }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">开户银行</div>
      </template>
      {{ state.userInfo.bankName }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">银行账号</div>
      </template>
      {{ state.userInfo.bankAccount }}
    </el-descriptions-item>
  </el-descriptions>
</template>

<style lang="sass" scoped></style>
<style lang="scss">
.el-descriptions {
  margin-top: 20px;
}
.cell-item {
  display: flex;
  align-items: center;
}
.flex-between {
  height: 100%;
  display: flex;
  justify-content: space-between;
}
.element {
  position: absolute;
  right: 0;
}
</style>

 src/views/register/registernav.vue

@@ -390,7 +390,7 @@
      <div v-if="active !== 3" class="mx-auto pt-2 pb-5 flex justify-center">
        <el-button :disabled="active == 1" @click="backStep">上一步</el-button>
        <el-button type="primary" @click="nextStep(ruleFormRef)"
          ><span v-if="active == 1">同意</span>下一步</el-button
          ><span v-if="active == 0">同意</span>下一步</el-button
        >
      </div>
    </div>
@@ -398,6 +398,8 @@
</template>
<script setup lang="tsx">
import { h, ref, reactive, onMounted } from "vue";
import { useNav } from "@/layout/hooks/useNav";
import { useUserStoreHook } from "@/store/modules/user";
import type { FormInstance, FormRules, UploadProps } from "element-plus";
import { message } from "@/utils/message";
import { baseUrlApi } from "@/api/util";
@@ -415,7 +417,7 @@
import { getToken } from "@/utils/auth";
import { useRoute, useRouter } from "vue-router";
const router = useRouter();
const route = useRoute();
const { route } = useNav();

defineOptions({
  name: "RegisterNav"
@@ -596,13 +598,20 @@
};
// 页面初始化
onMounted(async () => {
  state.ruleForm.transactionCode = route.query.code;
  let nowRole = useUserStoreHook()?.exRoles;
  if (nowRole.length >= 1 && !route.query.code) {
    state.ruleForm.transactionCode = nowRole[0].code;
  } else {
    state.ruleForm.transactionCode = route.query.code;
  }
  // 企业类型
  let res = await enterpriseTypes();
  state.enterpriseList = res?.result;
});
let active = ref(0);
const nextStep = async (formEl: FormInstance | undefined) => {
  console.log(state.ruleForm);

  if (active.value >= 1) {
    if (!formEl) return;
    await formEl.validate((valid, fields) => {

 types/router.d.ts

@@ -23,7 +23,7 @@
    /** 是否显示父级菜单 `可选` */
    showParent?: boolean;
    /** 页面级别权限设置 `可选` */
    roles?: Array<string>;
    exRoles?: Array<string>;
    /** 按钮级别权限设置 `可选` */
    auths?: Array<string>;
    /** 路由组件缓存（开启 `true`、关闭 `false`）`可选` */