编写个人主页

src/components/Layout/header.vue

@@ -87,7 +87,12 @@
       </p>
       <p class="select-content">
         <el-dropdown placement="bottom-start" @visible-change="handleOpen"
-          ><p class="product" :class="{ selected: route.path == '/video' ||route.path == '/handbook' }">
+          ><p
+            class="product"
+            :class="{
+              selected: route.path == '/video' || route.path == '/handbook',
+            }"
+          >
             <span>知识库</span> <el-icon v-if="isOpen"><ArrowDown /></el-icon
             ><el-icon v-if="!isOpen"><ArrowUp /></el-icon>
           </p>
@@ -155,11 +160,15 @@
             </div>
           </el-dropdown-item>
           <el-dropdown-item
-            ><p class="homepage" @click="toHomepage">
+            ><p class="homepage" @click="toHomepage('homepage')">
               个人主页
             </p></el-dropdown-item
           >
-          <el-dropdown-item><p class="collect">我的收藏</p></el-dropdown-item>
+          <el-dropdown-item
+            ><p class="collect" @click="toHomepage('collect')">
+              我的收藏
+            </p></el-dropdown-item
+          >
           <el-dropdown-item>
             <p class="exit">退出登录</p>
           </el-dropdown-item>
@@ -189,8 +198,13 @@ const handleOpen = () => {
 };
 
 //跳转主页
-const toHomepage = () => {
-  router.push("/personalCenter");
+const toHomepage = (str: string) => {
+  router.push({
+    path: "/personalCenter",
+    query: {
+      type: str,
+    },
+  });
 };
 
 //跳转合作页面
@@ -401,7 +415,6 @@ onMounted(() => {});
       .version-title {
         font-size: 16px;
         color: #222;
-        margin-bottom: 10px;
         user-select: none;
       }
       .version-introduce {
@@ -409,6 +422,7 @@ onMounted(() => {});
         color: #222;
         opacity: 0.6;
         user-select: none;
+        margin-top: 10px;
       }
     }
   }

src/components/row/row.vue

@@ -1,4 +1,4 @@
-<script setup name="CommentRow">
+<script setup name="CommentRow" lang="ts">
 import { computed, onMounted, ref } from "vue";
 
 // import { placeholderPic } from "~/utils/util";
@@ -56,11 +56,11 @@ const Props = defineProps({
   },
   author_id: {
     type: Number,
-    default:'1'
+    default: "1",
   },
   user_id: {
     type: Number,
-    default:'1'
+    default: "1",
   },
 });
 
@@ -114,7 +114,7 @@ const dele = async (id) => {
       message: "删除成功",
       type: "success",
     });
-    delectshow.value = false
+    delectshow.value = false;
     todetails();
   } catch (error) {
     console.log("error", error);
@@ -122,7 +122,7 @@ const dele = async (id) => {
 };
 const userid = ref();
 // userid.value = JSON.parse(localStorage.getItem("USER_STORE"));
-userid.value = 2
+userid.value = 2;
 
 const delect = () => {};
 </script>
@@ -175,11 +175,11 @@ const delect = () => {};
           v-if="Props.author_id == userid.id || Props.user_id == userid.id"
         >
           <!-- <SvgIcon name="message" :size="22" :rgap="2" color="#888888" /> -->
-          <img
+          <!-- <img
             src="../../assets/delect.png"
             style="width: 16px; height: 16px"
             alt=""
-          />
+          /> -->
           <span>删除</span>
         </li>
       </ul>
@@ -214,7 +214,7 @@ const delect = () => {};
       <div style="margin-top: 16px" class="changeadd">确定要删除吗？</div>
       <div style="display: flex; margin-top: 26px">
         <div class="cancel" @click="delectshow = false">取消</div>
-        <div class="confirm" @click="dele">确定</div>  
+        <div class="confirm" @click="dele">确定</div>
       </div>
     </div>
   </el-dialog>
@@ -325,4 +325,4 @@ const delect = () => {};
     }
   }
 }
-</style>
+</style>

src/view/PersonalCenter/component/mineCollect.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="collect">
+    <p class="collect-title">我的收藏</p>
+    <div class="collect-list">
+      <div class="collect-content">
+        <img
+          class="collect-img"
+          src="https://img0.baidu.com/it/u=3156798253,215737037&fm=253&fmt=auto&app=138&f=JPEG?w=758&h=500"
+          alt=""
+        />
+        <p class="name">
+          <span>报价单模板及使用</span
+          ><el-dropdown trigger="click">
+            <span class="dian">...</span>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item>取消收藏</el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+        </p>
+      </div>
+    </div>
+    <div style="display: flex; justify-content: center; margin-top: 20px">
+      <el-pagination
+        background
+        layout="prev, pager, next"
+        :total="10"
+        @current-change="handleCurrentChange"
+      />
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+const handleCurrentChange = (val: number) => {
+  console.log(val);
+};
+</script>
+<style scoped lang="less">
+.collect {
+  width: 904px;
+  background-color: #fff;
+  border-radius: 10px;
+  padding: 32px 40px 40px;
+  .collect-title {
+    font-size: 22px;
+    color: #222;
+    margin-bottom: 36px;
+  }
+  .collect-list {
+    display: flex;
+    .collect-content {
+      .collect-img {
+        width: 214px;
+        height: 130px;
+        border-radius: 10px;
+      }
+      .name {
+        display: flex;
+        justify-content: space-between;
+        align-items: end;
+        margin-top: 10px;
+      }
+    }
+  }
+  .dian {
+    height: 10px;
+    writing-mode: vertical-rl;
+    transform: rotate(180deg);
+    user-select: none;
+    cursor: pointer;
+  }
+}
+
+:deep(.el-pagination.is-background .el-pager li.is-active) {
+  background-color: #0d0fff;
+}
+</style>

src/view/PersonalCenter/component/mineOnTrial.vue

@@ -0,0 +1,331 @@
+<template>
+  <div class="on-trial">
+    <div class="on-title">
+      <p
+        @click="switchInformation('申请')"
+        :style="{ opacity: onTrialData.informationName == '申请' ? '1' : '.6' }"
+      >
+        申请信息
+      </p>
+      <p
+        @click="switchInformation('试用')"
+        :style="{ opacity: onTrialData.informationName == '试用' ? '1' : '.6' }"
+      >
+        试用信息
+      </p>
+    </div>
+
+    <div class="content-1" v-if="onTrialData.informationName == '申请'">
+      <img src="../../../assets/image/queshao.png" alt="" />
+      <p>暂无申请内容</p>
+    </div>
+    <div
+      class="content-2"
+      v-if="onTrialData.informationName == '申请' && false"
+    >
+      <div class="vision-list">
+        <p
+          :class="{ select: onTrialData.visionName == '云厂长企业版' }"
+          @click="switchTab('云厂长企业版')"
+        >
+          云厂长企业版
+        </p>
+        <p
+          :class="{ select: onTrialData.visionName == '云厂长专业版' }"
+          @click="switchTab('云厂长专业版')"
+        >
+          云厂长专业版
+        </p>
+      </div>
+      <div class="text">
+        <p class="label-1">姓名</p>
+        <p class="text-1">陈宇</p>
+      </div>
+      <div class="text">
+        <p class="label-1">公司名称</p>
+        <p class="text-1">天津承轴科技有限公司</p>
+      </div>
+      <div class="text">
+        <p class="label-1">邮箱</p>
+        <p class="text-1">bajo@zezbida.pm</p>
+      </div>
+      <div class="text">
+        <p class="label-1">手机号</p>
+        <p class="text-1">14265743970</p>
+      </div>
+      <div class="text">
+        <p class="label-1">试用版本</p>
+        <p class="text-1">云厂长企业版</p>
+      </div>
+    </div>
+    <div class="content-3" v-if="onTrialData.informationName == '试用'">
+      <div class="vision-list">
+        <p
+          :class="{ select: onTrialData.visionName == '云厂长企业版' }"
+          @click="switchTab('云厂长企业版')"
+        >
+          云厂长企业版
+        </p>
+        <div class="application">申请成功</div>
+        <div class="applying">申请中</div>
+        <p
+          :class="{ select: onTrialData.visionName == '云厂长专业版' }"
+          @click="switchTab('云厂长专业版')"
+        >
+          云厂长专业版
+        </p>
+      </div>
+
+      <div class="information-content">
+        <div class="text-2">
+          <p class="label-2">账号</p>
+          <div class="text-3">
+            <p class="value-1">YCZ-crm004224</p>
+            <p class="cope" @click="cope('111')">一键复制</p>
+          </div>
+        </div>
+        <div class="text-2">
+          <p class="label-2">密码</p>
+          <div class="text-3">
+            <p class="value-1">YCZ-crm004224</p>
+            <p class="cope" @click="cope('111')">一键复制</p>
+          </div>
+        </div>
+        <div class="text-2">
+          <p class="label-2">试用地址</p>
+          <div class="text-3">
+            <p class="value-1">YCZ-crm004224</p>
+          </div>
+        </div>
+      </div>
+      <div class="submit">
+        <img class="submit-img" src="../../../assets/image/weitu.png" alt="" />
+        <p class="submit-text">申请已提交</p>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { reactive } from "vue";
+import { ElMessage } from "element-plus";
+
+const onTrialData = reactive({
+  visionName: "云厂长企业版",
+  informationName: "申请",
+});
+
+//切换试用版本
+const switchTab = (str: string) => {
+  onTrialData.visionName = str;
+};
+
+//切换信息
+const switchInformation = (str: string) => {
+  onTrialData.informationName = str;
+};
+
+//复制
+const cope = (text: string) => {
+  let oInput = document.createElement("input");
+  oInput.value = text;
+  document.body.appendChild(oInput);
+  oInput.select(); // 选择对象;
+  document.execCommand("Copy"); // 执行浏览器复制命令
+  oInput.remove();
+  ElMessage({
+    type: "success",
+    message: "复制成功！",
+  });
+};
+</script>
+<style scoped lang="less">
+.on-trial {
+  padding: 32px 40px;
+  width: 904px;
+  border-radius: 10px;
+  background-color: #fff;
+  .on-title {
+    font-size: 22px;
+    color: #222;
+    display: flex;
+    p {
+      margin-right: 42px;
+      user-select: none;
+      cursor: pointer;
+      opacity: 0.6;
+    }
+  }
+  .content-1 {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin-top: 100px;
+    img {
+      width: 216px;
+      height: 170px;
+    }
+    p {
+      font-size: 16px;
+      color: #222;
+    }
+  }
+  .content-2 {
+    margin-top: 42px;
+    .vision-list {
+      display: flex;
+      padding-bottom: 20px;
+      border-bottom: 1px solid rgba(151, 151, 151, 0.1);
+      p {
+        margin-right: 34px;
+        font-size: 16px;
+        color: #222;
+        opacity: 0.5;
+        user-select: none;
+        cursor: pointer;
+      }
+      .select {
+        opacity: 1;
+        position: relative;
+      }
+      .select::before {
+        content: "";
+        display: block;
+        position: absolute;
+        left: 50%;
+        bottom: -100%;
+        width: 50%;
+        height: 2px;
+        background-color: #0d0fff;
+        transform: translate(-50%, -50%);
+      }
+    }
+    .text {
+      display: flex;
+      align-items: center;
+      height: 73px;
+      border-bottom: 1px solid rgba(151, 151, 151, 0.1);
+      .label-1 {
+        font-size: 16px;
+        color: #222;
+        width: 150px;
+        opacity: 0.6;
+      }
+      .text-1 {
+        font-size: 16px;
+        color: #222;
+      }
+    }
+    .text:last-child {
+      border: none;
+    }
+  }
+  .content-3 {
+    .vision-list {
+      display: flex;
+      padding-bottom: 20px;
+      border-bottom: 1px solid rgba(151, 151, 151, 0.1);
+      margin-top: 42px;
+      p {
+        margin-right: 34px;
+        font-size: 16px;
+        color: #222;
+        opacity: 0.5;
+        user-select: none;
+        cursor: pointer;
+      }
+
+      .application {
+        width: 70px;
+        height: 24px;
+        background-image: url("../../../assets/image/shenqingchenggong.png");
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+        text-align: center;
+        line-height: 24px;
+        color: #28a745;
+        font-size: 12px;
+      }
+      .applying {
+        width: 70px;
+        height: 24px;
+        background-image: url("../../../assets/image/shenqingzhong.png");
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+        text-align: center;
+        line-height: 24px;
+        color: #2264dc;
+        font-size: 12px;
+      }
+      .select {
+        opacity: 1;
+        position: relative;
+      }
+      .select::before {
+        content: "";
+        display: block;
+        position: absolute;
+        left: 50%;
+        bottom: -100%;
+        width: 50%;
+        height: 2px;
+        background-color: #0d0fff;
+        transform: translate(-50%, -50%);
+      }
+    }
+    .information-content {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      margin-top: 42px;
+      .text-2 {
+        display: flex;
+        align-items: center;
+        margin-bottom: 26px;
+        .label-2 {
+          font-size: 16px;
+          color: #222;
+          margin-right: 20px;
+          display: flex;
+          justify-content: flex-end;
+          width: 70px;
+        }
+        .text-3 {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          background-color: #f5f5f7;
+          width: 428px;
+          height: 20px;
+          line-height: 30px;
+          padding: 12px 16px;
+          font-size: 16px;
+          color: #222;
+          border: 1px solid #e4e4e4;
+          .cope {
+            color: #0d0fff;
+            padding-left: 10px;
+            border-left: 1px solid rgba(151, 151, 151, 0.2);
+            user-select: none;
+            cursor: pointer;
+          }
+        }
+      }
+    }
+    .submit {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      .submit-img {
+        width: 160px;
+        height: 160px;
+      }
+      .submit-text {
+        font-size: 16px;
+      }
+    }
+  }
+}
+</style>

src/view/PersonalCenter/component/personalData.vue

@@ -1,8 +1,113 @@
 <template>
-  <div>
-    <p>个人资料</p>
-    <div></div>
+  <div class="information">
+    <p class="per-infor">个人资料</p>
+    <div class="content-1">
+      <p class="label-1">头像</p>
+      <img
+        class="header-img"
+        src="https://tse3-mm.cn.bing.net/th/id/OIP-C.qidgOqAsPEdzAg5inmSK3AAAAA?rs=1&pid=ImgDetMain"
+        alt=""
+      />
+      <p class="modify">修改头像</p>
+    </div>
+    <div class="content-1">
+      <p class="label-1">昵称</p>
+      <p class="label-2" v-if="!personalData.showInput">
+        {{ personalData.nickName }}
+      </p>
+      <el-input
+        v-if="personalData.showInput"
+        v-model="personalData.modifyNickName"
+        placeholder="请输入昵称"
+      />
+      <p class="modify" v-if="!personalData.showInput" @click="modifyName">
+        修改昵称
+      </p>
+      <div class="save" v-if="personalData.showInput">
+        <p @click="personalData.showInput = false">取消</p>
+        <p class="">保存</p>
+      </div>
+    </div>
+    <div class="content-1">
+      <p class="label-1">手机号码</p>
+      <p class="label-2">18429681987</p>
+    </div>
+    <div class="content-1">
+      <p class="label-1">注册时间</p>
+      <p class="label-2">2023-04-19 15:43:00</p>
+    </div>
+    <div class="content-1">
+      <p class="label-1">上次登录时间</p>
+      <p class="label-2">2023-04-19 15:43:00</p>
+    </div>
   </div>
 </template>
-<script setup lang="ts"></script>
-<style scoped lang="less"></style>
+<script setup lang="ts">
+import { reactive } from "vue";
+
+const personalData = reactive({
+  nickName: "柠檬树上的聪明果", //昵称
+  modifyNickName: "柠檬树上的聪明果",
+  showInput: false, //控制修改昵称
+});
+
+const modifyName = () => {
+  personalData.showInput = true;
+};
+</script>
+<style scoped lang="less">
+.information {
+  width: 904px;
+  background-color: #fff;
+  border-radius: 10px;
+  padding: 32px 40px;
+  .per-infor {
+    font-size: 22px;
+    color: #222;
+    margin-bottom: 36px;
+  }
+  .content-1 {
+    display: flex;
+    padding-bottom: 32px;
+    border-bottom: 1px solid rgba(151, 151, 151, 0.1);
+    margin-top: 32px;
+    align-items: center;
+    position: relative;
+    .label-1 {
+      font-size: 16px;
+      opacity: 0.8;
+      color: #222;
+      width: 200px;
+    }
+    .label-2 {
+      font-size: 16px;
+      color: #222;
+    }
+    .modify {
+      font-size: 16px;
+      color: #0d0fff;
+      position: absolute;
+      right: 0;
+      cursor: pointer;
+      user-select: none;
+    }
+    .save {
+      display: flex;
+      color: #0d0fff;
+      font-size: 16px;
+      width: 120px;
+      justify-content: space-between;
+      margin-left: 20px;
+      p {
+        user-select: none;
+        cursor: pointer;
+      }
+    }
+    .header-img {
+      width: 52px;
+      height: 52px;
+      border-radius: 50%;
+    }
+  }
+}
+</style>

src/view/PersonalCenter/index.vue

@@ -12,17 +12,50 @@
         <p class="points"><span>积分：</span><span>0</span></p>
       </div>
       <div class="btn-list">
-        <p>个人资料</p>
-        <p>我的收藏</p>
-        <p>我的试用</p>
+        <p
+          :class="{ select: route.query.type == 'homepage' }"
+          @click="switchTab('homepage')"
+        >
+          个人资料
+        </p>
+        <p
+          :class="{ select: route.query.type == 'collect' }"
+          @click="switchTab('collect')"
+        >
+          我的收藏
+        </p>
+        <p
+          :class="{ select: route.query.type == 'onTrial' }"
+          @click="switchTab('onTrial')"
+        >
+          我的试用
+        </p>
       </div>
     </div>
-    <div></div>
+    <PersonalData v-if="route.query.type == 'homepage'" />
+    <MineCollect v-if="route.query.type == 'collect'" />
+    <MineOnTrial v-if="route.query.type == 'onTrial'" />
   </div>
   <Bottom />
 </template>
 <script setup lang="ts">
+import { useRoute, useRouter } from "vue-router";
 import Bottom from "../../components/Layout/bottom.vue";
+import PersonalData from "./component/personalData.vue";
+import MineCollect from "./component/mineCollect.vue";
+import MineOnTrial from "./component/mineOnTrial.vue";
+const route = useRoute();
+const router = useRouter();
+console.log(route);
+
+const switchTab = (val: string) => {
+  router.push({
+    path: "/personalCenter",
+    query: {
+      type: val,
+    },
+  });
+};
 </script>
 <style scoped lang="less">
 .personal-center {
@@ -33,6 +66,7 @@ import Bottom from "../../components/Layout/bottom.vue";
   justify-content: center;
   padding-bottom: 100px;
   .personal-list {
+    margin-right: 16px;
     .personal {
       width: 200px;
       height: 242px;
@@ -81,6 +115,9 @@ import Bottom from "../../components/Layout/bottom.vue";
         user-select: none;
         cursor: pointer;
       }
+      .select {
+        color: #0d0fff;
+      }
     }
   }
 }