完成个人主页

src/api/homepage.ts

@@ -17,3 +17,37 @@ export const cancelCollection = (data: any) => {
     data,
   });
 };
+
+//试用列表
+export const getApplicationInformation = () => {
+  return request({
+    url: "trial?is_page=0&limit=10&page=1&status=",
+    method: "get",
+  });
+};
+
+//更改个人信息
+export const modifyInformation = (data: any) => {
+  return request({
+    url: "member/update",
+    method: "post",
+    data,
+  });
+};
+
+//获取个人信息
+export const getInformation = () => {
+  return request({
+    url: "member/info",
+    method: "get",
+  });
+};
+
+//上传文件
+export const uploadFile = (data: any) => {
+  return request({
+    url: "upload/images",
+    method: "post",
+    data,
+  });
+};

src/api/login.ts

@@ -42,3 +42,10 @@ export const plugin = (params: any) => {
   });
 };
 
+//获取验证码
+export const getCode = (data: any) => {
+  return request({
+    url: `sms/code?mobile=${data.mobile}&type=${data.type}`,
+    method: "get",
+  });
+};

src/components/Banne/index.vue

@@ -11,6 +11,7 @@
             class="detail"
             v-for="(btnItem, btnIndex) in item.btnList"
             :key="btnIndex"
+            @click="toUrl(item.jump_url)"
             :style="{
               backgroundColor: btnItem.backgroundColor,
               color: btnItem.color,
@@ -33,6 +34,10 @@ const props = defineProps({
     },
   },
 });
+
+const toUrl = (url: string) => {
+  window.open(url);
+};
 </script>
 <style scoped lang="less">
 .demonstration {

src/components/Layout/header.vue

@@ -177,7 +177,7 @@
 <script lang="ts" setup>
 import { reactive, ref, onMounted, computed } from "vue";
 import { useRouter, useRoute } from "vue-router";
-
+import { getInformation } from "../../api/homepage";
 import { ElMessage, ElMessageBox } from "element-plus";
 import { useStore } from "../../store/index";
 const counter = useStore();
@@ -262,8 +262,15 @@ const video = (index) => {
   });
 };
 
+//获取数据
+const getInfo = () => {
+  getInformation().then((res) => {
+    headerData.userinfo = res.data;
+  });
+};
+
 onMounted(() => {
-  headerData.userinfo = JSON.parse(localStorage.getItem("userInfo")!);
+  getInfo();
 });
 </script>
 <style lang="less" scoped>

src/utils/request.ts

@@ -18,17 +18,14 @@ var request = axios.create({
 request.interceptors.request.use(
   (config) => {
     //在请求之前做些什么
-    if (
-      config.url?.split("/").indexOf("change_avatar")! >= 0 ||
-      config.url?.split("/").indexOf("upload_photo")! >= 0
-    ) {
+    if (config.url?.split("/").indexOf("images")! >= 0) {
       config.headers["Content-Type"] = "multipart/form-data";
     }
     // 添加loading加载
     // console.log(localStorage.getItem("access_token"));
     const token = JSON.parse(localStorage.getItem("access_token")!);
     // const token = localStorage.getItem("access_token");
-    
+
     if (token) {
       if (config.url?.split("/").indexOf("precise")! >= 0) {
         config.headers["Authorization"] = `Bearer ${token}`; //请求头添加token

src/view/Home/index.vue

@@ -56,6 +56,7 @@ const getInfo = () => {
       const obj = {
         imgUrl: item.image,
         isBtn: item.is_jump == 1 ? true : false,
+        jump_url: item.jump_url,
         btnList: [
           {
             text: item.title,

src/view/Login/index.vue

@@ -68,7 +68,16 @@
                 placeholder="请输入6位验证码"
               />
             </div>
-            <div class="getcode">获取验证码</div>
+            <div class="getcode" @click="getQrCode" v-show="!isQRCode">
+              获取验证码
+            </div>
+            <div
+              class="getcode"
+              style="color: #a8a8a8; background: #f8f8f8"
+              v-show="isQRCode"
+            >
+              重新获取{{ time }}秒
+            </div>
           </div>
           <div
             class="marg_top xieyi"
@@ -109,6 +118,8 @@ const counter = useStore();
 const router = useRouter();
 const isLogin = ref(true);
 
+const isQRCode: any = ref(false);
+
 //微信登录
 const codelogin = ref(false);
 
@@ -118,6 +129,7 @@ const phone = ref("");
 const code = ref("");
 //多选框
 const checked1 = ref("");
+const time = ref(60);
 
 //登录接口
 const __topic__ = async () => {
@@ -134,6 +146,25 @@ const __topic__ = async () => {
     localStorage.setItem("USER_STORE", JSON.stringify(data));
   } catch (error) {}
 };
+
+const getQrCode = () => {
+  loginApi
+    .getCode({
+      mobile: phone.value,
+      type: "register",
+    })
+    .then((res) => {
+      console.log(res);
+      isQRCode.value = true;
+      const timer = setInterval(() => {
+        time.value--;
+        if (time.value == 0) {
+          isQRCode.value = false;
+          clearInterval(timer);
+        }
+      }, 1000);
+    });
+};
 //登录
 const toindex = () => {
   if (checked1.value == "") {
@@ -274,7 +305,7 @@ const toindex = () => {
   .getcode {
     width: 104px;
     height: 44px;
-    background: #f8f8f8;
+    background: #0d0fff;
     border-radius: 3px;
     border: 1px solid #e0e0e0;
     margin-top: 20px;
@@ -282,7 +313,7 @@ const toindex = () => {
     font-family: PingFangSC, PingFang SC;
     font-weight: 400;
     font-size: 13px;
-    color: #a8a8a8;
+    color: #fff;
     line-height: 44px;
     text-align: center;
     font-style: normal;

src/view/PersonalCenter/component/mineOnTrial.vue

@@ -15,90 +15,91 @@
       </p>
     </div>
 
-    <div class="content-1" v-if="onTrialData.informationName == '申请'">
+    <div
+      class="content-1"
+      v-if="
+        onTrialData.informationName == '申请' && applicationList.length == 0
+      "
+    >
       <img src="../../../assets/image/queshao.png" alt="" />
       <p>暂无申请内容</p>
     </div>
     <div
       class="content-2"
-      v-if="onTrialData.informationName == '申请' && false"
+      v-if="onTrialData.informationName == '申请' && applicationList.length > 0"
     >
       <div class="vision-list">
         <p
-          :class="{ select: onTrialData.visionName == '云厂长企业版' }"
-          @click="switchTab('云厂长企业版')"
-        >
-          云厂长企业版
-        </p>
-        <p
-          :class="{ select: onTrialData.visionName == '云厂长专业版' }"
-          @click="switchTab('云厂长专业版')"
+          v-for="(item, index) in applicationList"
+          :key="item.id"
+          :class="{ select: onTrialData.visionName == item.type_name }"
+          @click="switchTab(item.type_name, index)"
         >
-          云厂长专业版
+          云厂长{{ item.type_name }}
         </p>
       </div>
       <div class="text">
         <p class="label-1">姓名</p>
-        <p class="text-1">陈宇</p>
+        <p class="text-1">{{ informationData.realname }}</p>
       </div>
       <div class="text">
         <p class="label-1">公司名称</p>
-        <p class="text-1">天津承轴科技有限公司</p>
+        <p class="text-1">{{ informationData.company_name }}</p>
       </div>
       <div class="text">
         <p class="label-1">邮箱</p>
-        <p class="text-1">bajo@zezbida.pm</p>
+        <p class="text-1">{{ informationData.email }}</p>
       </div>
       <div class="text">
         <p class="label-1">手机号</p>
-        <p class="text-1">14265743970</p>
+        <p class="text-1">{{ informationData.mobile }}</p>
       </div>
       <div class="text">
         <p class="label-1">试用版本</p>
-        <p class="text-1">云厂长企业版</p>
+        <p class="text-1">云厂长{{ informationData.type_name }}</p>
       </div>
     </div>
     <div class="content-3" v-if="onTrialData.informationName == '试用'">
       <div class="vision-list">
-        <p
-          :class="{ select: onTrialData.visionName == '云厂长企业版' }"
-          @click="switchTab('云厂长企业版')"
+        <div
+          v-for="(item, index) in applicationList"
+          :key="item.id"
+          style="display: flex"
         >
-          云厂长企业版
-        </p>
-        <div class="application">申请成功</div>
-        <div class="applying">申请中</div>
-        <p
-          :class="{ select: onTrialData.visionName == '云厂长专业版' }"
-          @click="switchTab('云厂长专业版')"
-        >
-          云厂长专业版
-        </p>
+          <p
+            :class="{ select: onTrialData.visionName == item.type_name }"
+            @click="switchTab(item.type_name, index)"
+          >
+            云厂长{{ item.type_name }}
+          </p>
+          <div class="application" v-if="item.status == 'pass'">申请成功</div>
+          <div class="applying" v-if="item.status == 'apply'">申请中</div>
+        </div>
       </div>
 
-      <div class="information-content">
+      <div class="information-content" v-if="informationData.status == 'pass'">
         <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>
+            <p class="value-1">{{ informationData.account }}</p>
+            <p class="cope" @click="cope(informationData.account)">一键复制</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>
+            <p class="value-1">{{ informationData.password }}</p>
+            <p class="cope" @click="cope(informationData.password)">一键复制</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="value-1">{{ informationData.url }}</p>
           </div>
         </div>
       </div>
-      <div class="submit">
+      <div class="submit" v-if="informationData.status == 'apply'">
         <img class="submit-img" src="../../../assets/image/weitu.png" alt="" />
         <p class="submit-text">申请已提交</p>
       </div>
@@ -106,17 +107,22 @@
   </div>
 </template>
 <script setup lang="ts">
-import { reactive } from "vue";
+import { reactive, onMounted, ref } from "vue";
 import { ElMessage } from "element-plus";
+import { getApplicationInformation } from "../../../api/homepage";
 
 const onTrialData = reactive({
   visionName: "云厂长企业版",
   informationName: "申请",
 });
 
+const applicationList: any = ref([]);
+const informationData: any = ref({});
+
 //切换试用版本
-const switchTab = (str: string) => {
+const switchTab = (str: string, index: number) => {
   onTrialData.visionName = str;
+  informationData.value = applicationList.value[index];
 };
 
 //切换信息
@@ -124,6 +130,15 @@ const switchInformation = (str: string) => {
   onTrialData.informationName = str;
 };
 
+//获取数据
+const getInfo = () => {
+  getApplicationInformation().then((res) => {
+    applicationList.value = res.data;
+    onTrialData.visionName = res.data[0].type_name;
+    informationData.value = res.data[0];
+  });
+};
+
 //复制
 const cope = (text: string) => {
   let oInput = document.createElement("input");
@@ -137,6 +152,10 @@ const cope = (text: string) => {
     message: "复制成功！",
   });
 };
+
+onMounted(() => {
+  getInfo();
+});
 </script>
 <style scoped lang="less">
 .on-trial {
@@ -227,7 +246,6 @@ const cope = (text: string) => {
       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;
@@ -244,6 +262,7 @@ const cope = (text: string) => {
         text-align: center;
         line-height: 24px;
         color: #28a745;
+        margin-right: 34px;
         font-size: 12px;
       }
       .applying {
@@ -255,6 +274,7 @@ const cope = (text: string) => {
         text-align: center;
         line-height: 24px;
         color: #2264dc;
+        margin-right: 34px;
         font-size: 12px;
       }
       .select {

src/view/PersonalCenter/component/personalData.vue

@@ -8,10 +8,8 @@
         v-model:file-list="fileList"
         class="upload-demo"
         action="-"
-        :on-preview="handlePreview"
-        :on-remove="handleRemove"
-        :before-remove="beforeRemove"
-        :on-exceed="handleExceed"
+        :http-request="httpRequest"
+        :show-file-list="false"
       >
         <p class="modify">修改头像</p>
       </el-upload>
@@ -31,7 +29,7 @@
       </p>
       <div class="save" v-if="personalData.showInput">
         <p @click="personalData.showInput = false">取消</p>
-        <p class="">保存</p>
+        <p class="" @click="save">保存</p>
       </div>
     </div>
     <div class="content-1">
@@ -50,13 +48,21 @@
 </template>
 <script setup lang="ts">
 import { reactive, ref, onMounted } from "vue";
+import { ElMessage } from "element-plus";
+import {
+  modifyInformation,
+  getInformation,
+  uploadFile,
+} from "../../../api/homepage";
+
+const emits: any = defineEmits(["getInfo"]);
 
 const fileList = ref([]);
 const userInformation: any = ref({});
 
 const personalData = reactive({
-  nickName: "柠檬树上的聪明果", //昵称
-  modifyNickName: "柠檬树上的聪明果",
+  nickName: "", //昵称
+  modifyNickName: "",
   showInput: false, //控制修改昵称
 });
 
@@ -64,18 +70,40 @@ const modifyName = () => {
   personalData.showInput = true;
 };
 
-const handlePreview = (uploadFile) => {
-  console.log(uploadFile);
+//获取数据
+const getInfoChildren = () => {
+  getInformation().then((res) => {
+    userInformation.value = res.data;
+    personalData.nickName = userInformation.value.nickname;
+    personalData.modifyNickName = userInformation.value.nickname;
+  });
+};
+
+//修改呢称
+const save = () => {
+  modifyInformation({ nickname: personalData.modifyNickName }).then((res) => {
+    personalData.showInput = false;
+    personalData.nickName = personalData.modifyNickName;
+    emits("modifyName", 0, personalData.modifyNickName);
+    ElMessage({
+      type: "success",
+      message: "修改成功",
+    });
+  });
 };
-const handleRemove = () => {};
-const beforeRemove = () => {};
-const handleExceed = (files, uploadFiles) => {
-  console.log(files, uploadFiles);
+
+const httpRequest = (files: any) => {
+  console.log(files);
+  uploadFile({ file: files.file }).then((res) => {
+    const imgUrl = res.data.filePath;
+    modifyInformation({ avatar: imgUrl });
+    emits("modifyName", imgUrl, 0);
+    userInformation.value.avatar = imgUrl;
+  });
 };
 
 onMounted(() => {
-  userInformation.value = JSON.parse(localStorage.getItem("userInfo")!);
-  personalData.nickName = userInformation.value.nickname;
+  getInfoChildren();
 });
 </script>
 <style scoped lang="less">

src/view/PersonalCenter/index.vue

@@ -5,7 +5,9 @@
         <img class="profile" :src="userInformation.avatar" alt="" />
         <p class="name">{{ userInformation.nickname }}</p>
         <p class="id">ID：{{ userInformation.id }}</p>
-        <p class="points"><span>积分：</span><span>0</span></p>
+        <p class="points">
+          <span>积分：</span><span>{{ Number(userInformation.integral) }}</span>
+        </p>
       </div>
       <div class="btn-list">
         <p
@@ -28,7 +30,10 @@
         </p>
       </div>
     </div>
-    <PersonalData v-if="route.query.type == 'homepage'" />
+    <PersonalData
+      v-if="route.query.type == 'homepage'"
+      @modifyName="modifyName"
+    />
     <MineCollect v-if="route.query.type == 'collect'" />
     <MineOnTrial v-if="route.query.type == 'onTrial'" />
   </div>
@@ -37,6 +42,7 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 import { useRoute, useRouter } from "vue-router";
+import { getInformation } from "../../api/homepage";
 import Bottom from "../../components/Layout/bottom.vue";
 import PersonalData from "./component/personalData.vue";
 import MineCollect from "./component/mineCollect.vue";
@@ -54,8 +60,26 @@ const switchTab = (val: string) => {
   });
 };
 
+//修改头像 and 呢称
+const modifyName = (avatar: any, name: string) => {
+  console.log(avatar, name);
+  if (avatar) {
+    userInformation.value.avatar = avatar;
+  }
+  if (name) {
+    userInformation.value.nickname = name;
+  }
+};
+
+//获取数据
+const getInfo = () => {
+  getInformation().then((res) => {
+    userInformation.value = res.data;
+  });
+};
+
 onMounted(() => {
-  userInformation.value = JSON.parse(localStorage.getItem("userInfo")!);
+  getInfo();
 });
 </script>
 <style scoped lang="less">