save

src/components/BlackModeMenu/index.vue

+<template>
+  <syMenu
+    class="blackModeMenu___"
+    :ellipsis="false"
+    :modelValue="modelValue"
+    @update:modelValue="($event) => $emit('update:modelValue', $event)"
+    :menu-list="list"
+    textColor="var(--sy-black)"
+    activeTextColor="var(--sy-black)"
+    :text-font-weight="400"
+    :active-text-font-weight="600"
+  ></syMenu>
+</template>
+
+<script setup lang="ts">
+import { syMenu } from "cqk-sy-ui";
+
+const props = defineProps<{
+  modelValue: string;
+  list: { name: string; value: string }[];
+}>();
+
+const emit = defineEmits(["update:modelValue"]);
+</script>
+
+<style lang="scss">
+.blackModeMenu___ {
+  .line {
+    height: 3px;
+  }
+  &.el-menu {
+    height: 48px;
+  }
+  .el-menu-item {
+    margin-left: 30px;
+    margin-right: 30px;
+  }
+}
+</style>

src/router.ts

@@ -84,11 +84,6 @@ const routes = [
         component: () => import("@/views/Collection/TransferRecords/index.vue"),
       },
       {
-        path: "/userCenter",
-        name: "userCenter",
-        component: () => import("@/views/userCenter/index.vue"),
-      },
-      {
         path: "/choosePackage",
         name: "choosePackage",
         component: () => import("@/views/userCenter/choosePackage/index.vue"),
@@ -128,6 +123,11 @@ const routes = [
   //   ),
   // },
   {
+    path: "/userCenter",
+    name: "userCenter",
+    component: () => import("@/views/userCenter/index.vue"),
+  },
+  {
     path: "/editTemplate",
     name: "editTemplate",
     component: () => import("@/views/editTemplate/index.vue"),

src/service/Transfer.ts

@@ -17,7 +17,7 @@ export async function reTransfer(
     id?: number;
   }
 ) {
-  if (transferType === "picture") {
+  if (transferType === "copyright") {
     const res = await $ajax({
       type: "post",
       url: GO_URLS.reTransfer,

src/views/userCenter/components/Authenticate/components/Authenticated.vue

+<template>
+  <div class="flex items-center">
+    <div style="font-size: 16px; font-weight: 600; color: var(--sy-black)">
+      认证信息
+    </div>
+    <div
+      style="font-size: 14px; font-weight: 400; color: var(--sy-gray)"
+      class="ml-3 flex-grow"
+    >
+      认证信息在获得认证后将不能修改
+    </div>
+    <div style="font-size: 16px; font-weight: 600; color: #f5b82b">
+      已实名认证-审核通过
+    </div>
+  </div>
+  <div style="height: 1px; background: #f0f0f0; margin-top: 15px"></div>
+  <ElForm
+    :rules="rules"
+    :model="model"
+    label-position="top"
+    ref="formRef"
+    class="mx-[147px] mt-16"
+  >
+    <CustomizeFormItem prop="name" label="姓名">
+      <syDialogInput :value="userInfo.name" class="w-full" :disabled="true" />
+    </CustomizeFormItem>
+    <CustomizeFormItem prop="name" label="身份证号"
+      ><syDialogInput
+        :value="userInfo.id_card"
+        class="w-full"
+        :disabled="true"
+      />
+    </CustomizeFormItem>
+    <CustomizeFormItem prop="name" label="银行卡号"
+      ><syDialogInput
+        :value="userInfo.bank_card"
+        class="w-full"
+        :disabled="true"
+      />
+    </CustomizeFormItem>
+    <CustomizeFormItem prop="name" label="银行预留手机号"
+      ><syDialogInput
+        :value="userInfo.bank_phone"
+        class="w-full"
+        :disabled="true"
+      />
+    </CustomizeFormItem>
+  </ElForm>
+</template>
+<script lang="ts" setup>
+import CustomizeFormItem from "@/components/Form/CustomizeFormItem.vue";
+import { ElForm, FormInstance } from "element-plus";
+import { ref, reactive, inject } from "vue";
+import { syDialogInput } from "cqk-sy-ui";
+
+const formRef = ref<FormInstance>();
+const userInfo = inject<any>("userInfo");
+const rules = ref({
+  name: [{ required: true }],
+});
+
+const model = reactive({});
+</script>
+<style scoped lang="scss"></style>

src/views/userCenter/components/Authenticate/index.vue

+<template>
+  <Authenticated v-if="ident.status"></Authenticated>
+</template>
+<script lang="ts" setup>
+import { inject } from "vue";
+import Authenticated from "./components/Authenticated.vue";
+
+const ident = inject<any>("ident");
+
+</script>
+<style scoped lang="scss"></style>

src/views/userCenter/components/BaseInfo.vue

 <template>
-  <div class="user-base-info">
-    <div class="title">基本信息</div>
-    <div class="content-info">
-      <div class="user-icon" @click="upload">
-        <div class="box">
+  <div class="">
+    <div class="">
+      <div class="user-icon flex items-center mb-5" @click="upload">
+        <div class="box mr-5">
           <img v-if="infos.icon" :src="infos.icon" />
           <i v-else class="iconfont iconpaishe"></i>
         </div>
-        <p v-if="infos.icon">修改头像</p>
-        <p v-else>上传头像</p>
+        <div v-if="infos.icon" class="blue-button">修改头像</div>
+        <div v-else class="blue-button">上传头像</div>
       </div>
-      <div class="msg-info">
-        <div class="top">
-          <h1>欢迎&nbsp;&nbsp;{{ infos.phone || infos.email }}</h1>
-          <div class="info-states">
-            <div class="imgbox">
-              <img
-                v-if="infos.auth_suc === 1"
-                src="/images/userCenter/state2.png"
-              />
-              <img
-                v-else
-                src="/images/userCenter/state1.png"
-              />
+      <div>
+        <div class="flex w-full mb-7 mt-[22px]">
+          <div class="label w-[119px]">姓名</div>
+          <div class="flex-grow content">{{ infos.user }}</div>
+          <div class="modifyBtn flex-shrink-0">修改</div>
+        </div>
+        <div class="flex w-full mb-7 mt-[22px]">
+          <div class="label w-[119px]">密码</div>
+          <div class="flex-grow content">
+            {{ (__status as any).status ? "已设置" : "未设置" }}
+          </div>
+          <div class="modifyBtn flex-shrink-0">修改</div>
+        </div>
+        <div class="flex w-full mb-7 mt-[22px]">
+          <div class="label w-[119px]">手机号</div>
+          <div class="flex-grow content">
+            {{ infos.phone }}
+          </div>
+          <div class="modifyBtn flex-shrink-0">修改</div>
+        </div>
+        <div class="flex w-full mb-7 mt-[22px]">
+          <div class="label w-[119px]">邮箱</div>
+          <div class="flex-grow content">
+            {{ infos.email === "" ? "未设置" : infos.email }}
+          </div>
+          <div class="modifyBtn flex-shrink-0">修改</div>
+        </div>
+      </div>
+      <div style="height: 1px; background-color: #e8e8e8"></div>
+      <div>
+        <div class="flex w-full mb-7 mt-[22px]">
+          <div class="label w-[119px]">UID</div>
+          <div class="flex-grow content">{{ infos.user_id }}</div>
+        </div>
+        <div class="flex w-full mb-7 mt-[22px]">
+          <div class="label w-[119px]">存证地址</div>
+          <div class="flex-grow content flex items-center">
+            {{ infos.addr }}
+            <div
+              class="modifyBtn ml-4"
+              @click="
+                copyText(infos.addr);
+                syMessage.success('复制成功');
+              "
+            >
+              复制
             </div>
           </div>
         </div>
-        <p>
-          <span>UID账户：</span>
-          {{ getuid }}
-        </p>
       </div>
     </div>
     <common-dialog
@@ -83,12 +111,13 @@
 
 <script lang="ts">
 import { $ajax } from "@/service";
-import { syCommonDialog, GO_URLS } from "cqk-sy-ui";
+import { syCommonDialog, GO_URLS, copyText, syMessage } from "cqk-sy-ui";
 import { ElMessage } from "element-plus";
 import { defineComponent } from "vue";
 import HeadPortrait from "./HeadPortrait.vue";
 
 export default defineComponent({
+  inject: ["passwordStatus"],
   components: {
     CommonDialog: syCommonDialog,
     HeadPortrait,
@@ -100,11 +129,18 @@ export default defineComponent({
     };
   },
   computed: {
+    __status() {
+      return (this as any).passwordStatus;
+    },
     getuid() {
       return JSON.parse(String(sessionStorage.getItem("user"))).id;
     },
+    syMessage() {
+      return syMessage;
+    },
   },
   methods: {
+    copyText,
     async callDialogMethod(refName: string, methodName: string) {
       return (this.$refs as any)[refName][methodName]();
     },
@@ -131,41 +167,17 @@ export default defineComponent({
 </script>
 
 <style scoped lang="scss">
-.user-base-info {
-  width: 49.5%;
-  height: 350px;
-  margin-right: 24px;
-  border-radius: 4px;
-}
-
-.title {
-  padding-left: 28px;
-  line-height: 60px;
-  color: #979797;
-  font-size: 14px;
-  background: #fff;
-}
-.content-info {
-  position: relative;
-  margin-top: 1px;
-  height: 290px;
-  background: #fff;
-}
 .user-icon {
-  margin: 30px 45px 0 44px;
-  float: left;
   cursor: pointer;
   .box {
-    width: 80px;
-    height: 80px;
+    width: 46px;
+    height: 46px;
     background: rgba(242, 244, 246, 1);
-    box-shadow: 2px 2px 4px 0px rgba(0, 1, 3, 0.12);
     border-radius: 50%;
-    border: 5px solid white;
     text-align: center;
     cursor: pointer;
     overflow: hidden;
-    line-height: 80px;
+    line-height: 46px;
     img {
       width: 100%;
       height: 100%;
@@ -184,44 +196,28 @@ export default defineComponent({
     margin: 0;
   }
 }
-.msg-info {
-  float: left;
-}
-.top {
-  overflow: hidden;
-}
-.info-states {
-  float: left;
-  padding-top: 37px;
-  padding-left: 10px;
-  .imgbox {
-    width: 73px;
-    height: 26px;
-    img {
-      width: 100%;
-      height: 100%;
-    }
-  }
-}
-h1 {
-  margin-top: 40px;
-  margin-bottom: 40px;
-  float: left;
-  font-size: 20px;
-  font-family: PingFangSC-Semibold;
-  font-weight: 600;
-  color: rgba(37, 38, 49, 1);
-  line-height: 1;
+
+.label,
+.content {
+  font-size: 14px;
+  font-weight: 400;
+  color: var(--sy-gray);
 }
-p {
-  color: #252631ff;
+.blue-button {
+  width: 84px;
+  height: 30px;
+  border-radius: var(--sy-border-radius);
+  border: 1px solid var(--sy-blue);
   font-size: 14px;
-  margin: 0;
-  padding: 0;
-  margin-top: 10px;
+  font-weight: 500;
+  color: var(--sy-blue);
+  line-height: 30px;
+  text-align: center;
 }
-span {
-  color: var(--text-gray)ff;
+.modifyBtn {
   font-size: 14px;
+  font-weight: 400;
+  color: var(--sy-blue);
+  cursor: pointer;
 }
 </style>

src/views/userCenter/components/ModuleContainer/index.vue

+<template>
+  <div class="module-container">
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="scss" scpoed>
+.module-container {
+  width: 1054px;
+  background: #ffffff;
+  box-shadow: 0px 2px 20px 0px #f0f0f0;
+  border-radius: var(--sy-border-radius);
+
+  padding-top: 38px;
+  padding-left: 46px;
+  padding-right: 46px;
+  padding-bottom: 38px;
+}
+</style>

src/views/userCenter/index.vue

 <template>
-  <div style="margin-top: 42.5px; padding-right: 31px" class="flex justify-end">
-    <Avatar></Avatar>
+  <div class="min-h-screen flow-root" style="background: #f9f9f9">
+    <div style="height: 50px; margin-bottom: 20px"></div>
+    <syHeaderNavBar
+      class="fixed top-0 left-0 right-0"
+      @back="() => $router.back()"
+    >
+      <div class="flex w-full justify-center items-center">
+        <BlackModeMenu v-model="activedMenu" :list="menuList"></BlackModeMenu>
+      </div>
+    </syHeaderNavBar>
+    <ModuleContainer class="mx-auto">
+      <base-info
+        v-show="activedMenu === 'info'"
+        :infos="userInfo"
+        @ToUpdate="ToUpdate"
+      ></base-info>
+      <Authenticate v-show="activedMenu === 'authenticate'"></Authenticate>
+    </ModuleContainer>
   </div>
-  <div class="user-center">
-    <div class="g-flex-between">
+  <div class="">
+    <!-- <div class="g-flex-between">
       <base-info :infos="userInfo" @ToUpdate="ToUpdate"></base-info>
       <assets :infos="userInfo"></assets>
     </div>
-    <!-- 信息修改 -->
     <div class="g-flex-between set-box">
       <safe-set :Infos="setOptions.ident" @to="to"></safe-set>
       <safe-set :Infos="setOptions.password" @to="to"></safe-set>
       <safe-set :Infos="setOptions.phone" @to="to"></safe-set>
-    </div>
+    </div> -->
     <common-dialog
       :visible="showVerify"
       @closePopup="showVerify = false"
@@ -59,7 +74,7 @@
 </template>
 <script lang="ts">
 import { defineComponent } from "vue";
-import { syCommonDialog } from "cqk-sy-ui";
+import { syCommonDialog, syHeaderNavBar, syMenu } from "cqk-sy-ui";
 import BaseInfo from "./components/BaseInfo.vue";
 import Assets from "./components/Assets.vue";
 import SafeSet from "./components/SafeSet.vue";
@@ -69,8 +84,18 @@ import { getUserInfo } from "@/service/Api.service";
 import { setuserInfos } from "@/store/mutations";
 import { $ajax } from "@/service";
 import Avatar from "@/components/Avatar/index.vue";
+import BlackModeMenu from "@/components/BlackModeMenu/index.vue";
+import ModuleContainer from "./components/ModuleContainer/index.vue";
+import Authenticate from "./components/Authenticate/index.vue";
 
 export default defineComponent({
+  provide() {
+    return {
+      passwordStatus: this.setOptions.password,
+      ident: this.setOptions.ident,
+      userInfo: this.userInfo
+    };
+  },
   components: {
     BaseInfo,
     Assets,
@@ -78,9 +103,21 @@ export default defineComponent({
     CommonDialog: syCommonDialog,
     VerifyDialog,
     Avatar,
+    syHeaderNavBar,
+    syMenu,
+    BlackModeMenu,
+    ModuleContainer,
+    Authenticate,
   },
   data() {
     return {
+      menuList: [
+        { label: "个人资料", value: "info" },
+        { label: "认证信息", value: "authenticate" },
+        { label: "资产管理", value: "asset" },
+        { label: "账户安全", value: "security" },
+      ] as any[],
+      activedMenu: "info",
       userInfo: {} as any,
       setOptions: {
         ident: {
@@ -115,7 +152,19 @@ export default defineComponent({
       status: 0, //当前用户的一个状态
     };
   },
-
+  created() {
+    this.activedMenu =
+      (this.$route.query.type as string) || (this.menuList[0].value as string);
+  },
+  watch: {
+    activedMenu(newV) {
+      this.$router.replace({
+        query: {
+          type: newV,
+        },
+      });
+    },
+  },
   mounted() {
     this.getUserInfos();
   },
@@ -188,7 +237,7 @@ export default defineComponent({
 });
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .g-flex-between {
   display: flex;
   justify-content: space-between;
@@ -197,8 +246,6 @@ export default defineComponent({
 .user-center {
   position: relative;
   padding: 16px;
-  min-height: calc(100vh - 95px);
-  min-width: 1200px;
   background: #f8fafb;
 }
 .set-box {