增加首页接口

src/api/home.ts

@@ -0,0 +1,49 @@
+import request from "../utils/request";
+
+//获取解决问题列表
+export const getQuestionList = () => {
+  return request({
+    url: "problem",
+    method: "get",
+  });
+};
+
+//获取轮播图
+export const getBanneList = () => {
+  return request({
+    url: "banner?code=index",
+    method: "get",
+  });
+};
+
+//获取功能介绍
+export const getIntroduction = () => {
+  return request({
+    url: "introduction",
+    method: "get",
+  });
+};
+
+//为什么选择云厂长
+export const whySelect = () => {
+  return request({
+    url: "choice",
+    method: "get",
+  });
+};
+
+//为什么选择云厂长
+export const getUserSound = () => {
+  return request({
+    url: "voice",
+    method: "get",
+  });
+};
+
+//获取企业列表
+export const getEnterpriseList = () => {
+  return request({
+    url: "enterprise",
+    method: "get",
+  });
+};

src/components/Layout/header.vue

@@ -130,32 +130,27 @@
         合作
       </p>
     </div>
-    <div class="login-register" v-if="false">
-      <p class="login">登录</p>
+    <div
+      class="login-register"
+      v-if="JSON.stringify(headerData.userinfo) == '{}'"
+    >
+      <p class="login" @click="toLogin">登录</p>
       <p class="register">立即注册</p>
     </div>
-    <el-dropdown>
+    <el-dropdown v-else>
       <div class="login-register">
-        <img
-          class="header-img"
-          src="https://tse3-mm.cn.bing.net/th/id/OIP-C.qidgOqAsPEdzAg5inmSK3AAAAA?rs=1&pid=ImgDetMain"
-          alt=""
-        />
-        <p class="name">圣埃蒂安</p>
+        <img class="header-img" :src="headerData.userinfo.avatar" alt="" />
+        <p class="name">{{ headerData.userinfo.nickname }}</p>
         <el-icon><ArrowDown /></el-icon>
       </div>
       <template #dropdown>
         <el-dropdown-menu>
           <el-dropdown-item>
             <div class="header-name">
-              <img
-                class="img-1"
-                src="https://tse3-mm.cn.bing.net/th/id/OIP-C.qidgOqAsPEdzAg5inmSK3AAAAA?rs=1&pid=ImgDetMain"
-                alt=""
-              />
+              <img class="img-1" :src="headerData.userinfo.avatar" alt="" />
               <div>
-                <p class="name">圣埃蒂安</p>
-                <p class="id">ID:28875432</p>
+                <p class="name">{{ headerData.userinfo.nickname }}</p>
+                <p class="id">ID:{{ headerData.userinfo.id }}</p>
               </div>
             </div>
           </el-dropdown-item>
@@ -189,6 +184,14 @@ const counter = useStore();
 const router = useRouter();
 const route = useRoute();
 
+interface HeaderType {
+  userinfo: any;
+}
+
+const headerData = reactive<HeaderType>({
+  userinfo: {},
+});
+
 //判断是打开还是收起
 const isOpen = ref(true);
 
@@ -225,8 +228,13 @@ const toproduct = (index) => {
     },
   });
 };
-// 跳转到价格
 
+//登录
+const toLogin = () => {
+  router.push("/login");
+};
+
+// 跳转到价格
 const prick = (index) => {
   router.push({
     name: "price",
@@ -245,7 +253,9 @@ const video = (index) => {
   });
 };
 
-onMounted(() => {});
+onMounted(() => {
+  headerData.userinfo = JSON.parse(localStorage.getItem("userInfo")!);
+});
 </script>
 <style lang="less" scoped>
 .header {
@@ -348,6 +358,7 @@ onMounted(() => {});
   align-items: center;
   padding: 10px 0;
   border-bottom: 1px solid rgba(151, 151, 151, 0.1);
+  width: 200px;
   .img-1 {
     width: 38px;
     height: 38px;

src/view/Home/component/functionIntroduction.vue

@@ -5,64 +5,72 @@
       多种功能增强包，不同的版本功能，智能的OA系统，总有一款适合您
     </p>
     <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
-      <el-tab-pane label="插件包介绍" name="first">
+      <el-tab-pane v-for="item in funData.introductionList" :key="item.id" :label="item.title" :name="item.title" >
         <div class="demo-content">
           <div>
-            <p class="demo-title">安装多功能增强包插件，效果事半功倍 <p class="heng"></p></p>
-            <div class="select-list list-1" 
-          @mouseenter="handleMouseEnter('list-1')"
-          @mouseleave="handleMouseLeave('list-1')">
-              <p class="select-title">CRM与项目管理增强包</p>
+            <p class="demo-title">{{item.content}} <p class="heng"></p></p>
+            <div v-for="(items,indexs) in item.items" :key="items.id" class="select-list "  :class="'list-'+items.id"
+          @mouseenter="handleMouseEnter('list-'+items.id,items)"
+          @mouseleave="handleMouseLeave('list-'+items.id)">
+              <p class="select-title">{{items.title}}</p>
               <p class="selext-content">
-                云厂长通过CRM和项目管理增强包，提供线索认证、多团队协作和数据统计等功能，帮助企业全面优化客户关系管理和项目执行流程。这类似于为企业的销售和项目团队提供了一个强大的协作和分析平台，提升业务效率和决策质量
-              </p>
-            </div>
-            <div class="select-list list-2"  @mouseenter="handleMouseEnter('list-2')" @mouseleave="handleMouseLeave('list-2')">
-              <p class="select-title">采购与供应链管理插件</p>
-              <p class="selext-content">
-                云厂长的采购插件，包括采购协议、供应商价格表和订单管理等高级功能，帮助企业实现供应链的精细化管理。这类似于为采购团队提供了一个全面的供应链管理工具，确保采购流程的透明、高效和成本效益。
-              </p>
-            </div>
-            <div class="select-list list-3" @mouseenter="handleMouseEnter('list-3')" @mouseleave="handleMouseLeave('list-3')">
-              <p class="select-title">高级OA与数据引擎插件</p>
-              <p class="selext-content">
-                云厂长的高级OA系统结合数据引擎，提供报表、审批、Word自定义表单等功能，支持企业实现高效的内部管理和决策支持。这类似于为企业打造了一个全面的办公自动化平台，帮助企业实现数据驱动的智能管理。
+                {{items.content}}
               </p>
             </div>
           </div>
           <img
             class="demo-img"
-            src="../../../assets/image/chajianbao.png"
+            :src="itemUrl"
             alt=""
           />
         </div>
       </el-tab-pane>
-      <el-tab-pane label="智能生产决策" name="second">Config</el-tab-pane>
-      <el-tab-pane label="定制化审批流程" name="third">Role</el-tab-pane>
-      <el-tab-pane label="试用与专业培训" name="fourth">Task</el-tab-pane>
     </el-tabs>
     <div></div>
   </div>
 </template>
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref,reactive,onMounted } from "vue";
+import { getIntroduction } from '../../../api/home'
 import type { TabsPaneContext } from "element-plus";
-const activeName = ref("first");
+const activeName = ref("");
+const itemUrl = ref('')
+
+interface FunType {
+  introductionList:any
+}
+const funData = reactive<FunType>({
+  introductionList:[]
+})
 
 const handleClick = (tab: TabsPaneContext, event: Event) => {
-  console.log(tab, event);
 };
 
-const handleMouseEnter = (str:string)=>{
+const handleMouseEnter = (str:string,item:any)=>{
+  console.log(str)
   const railDom: any = document.getElementsByClassName(str);
   railDom[0].style.borderColor = "#0D0FFF";
+  itemUrl.value = item.image
 }
 
 const handleMouseLeave = (str:string)=>{
-    
   const railDom: any = document.getElementsByClassName(str);
   railDom[0].style.borderColor = "rgba(151, 151, 151, 0.1)";
 }
+
+//获取数据
+const getInfo = ()=>{
+  getIntroduction().then(res=>{
+    funData.introductionList = res.data
+    activeName.value = res.data[0].title
+    itemUrl.value = res.data[0].items[0].image
+  })
+}
+
+onMounted(()=>{
+  getInfo()
+})
+
 </script>
 <style scoped lang="less">
 .demo-tabs > .el-tabs__content {

src/view/Home/component/solveQuestion.vue

@@ -7,14 +7,16 @@
       </p>
       <div class="card-list">
         <div
+          v-for="(item, index) in solveData.questionList"
+          :key="item.id"
           class="card"
-          @mouseenter="handleMouseEnter('rail-1', 'title-1')"
-          @mouseleave="handleMouseLeave('rail-1', 'title-1')"
+          @mouseenter="handleMouseEnter('rail-' + index, 'title-' + index)"
+          @mouseleave="handleMouseLeave('rail-' + index, 'title-' + index)"
         >
-          <p class="rail-1 rail"></p>
-          <p class="title title-1">市场洞察与决策支持</p>
+          <p class="rail" :class="'rail-' + index"></p>
+          <p class="title" :class="'title-' + index">{{ item.title }}</p>
           <p class="detail">
-            利用AIGC技术，云厂长能够自动分析生产数据和市场动态，提供精准的市场洞察和决策支持，帮助企业发现市场机会并做出明智的业务决策。
+            {{ item.content }}
           </p>
           <p class="understand">
             进一步了解<img
@@ -23,9 +25,9 @@
               alt=""
             />
           </p>
-          <img class="tubiao" src="../../../assets/image/tubiao1.png" alt="" />
+          <img class="tubiao" :src="item.image" alt="" />
         </div>
-        <div
+        <!-- <div
           class="card"
           @mouseenter="handleMouseEnter('rail-2', 'title-2')"
           @mouseleave="handleMouseLeave('rail-2', 'title-2')"
@@ -81,12 +83,30 @@
             />
           </p>
           <img class="tubiao" src="../../../assets/image/tubiao3.png" alt="" />
-        </div>
+        </div> -->
       </div>
     </div>
   </div>
 </template>
 <script setup lang="ts">
+import { reactive, onMounted } from "vue";
+import { getQuestionList } from "../../../api/home";
+
+interface SolveType {
+  questionList: any;
+}
+
+//组件数据
+const solveData = reactive<SolveType>({
+  questionList: [],
+});
+
+//获取数据
+const getInfo = () => {
+  getQuestionList().then((res) => {
+    solveData.questionList = res.data;
+  });
+};
 //鼠标移入 更改样式
 const handleMouseEnter = (str: string, str2: string) => {
   const railDom: any = document.getElementsByClassName(str);
@@ -101,6 +121,10 @@ const handleMouseLeave = (str: string, str2: string) => {
   const titleDom: any = document.getElementsByClassName(str2);
   titleDom[0].style.color = "#000";
 };
+
+onMounted(() => {
+  getInfo();
+});
 </script>
 <style scoped lang="less">
 .solve-question {
@@ -149,6 +173,7 @@ const handleMouseLeave = (str: string, str2: string) => {
           margin-left: 28px;
           color: #525967;
           font-size: 14px;
+          height: 96px;
           width: 80%;
           border-top: 1px solid rgba(151, 151, 151, 0.1);
           padding-top: 18px;

src/view/Home/component/userSound.vue

@@ -3,13 +3,13 @@
     <p class="user-title">用户声音</p>
     <div class="content">
       <div class="card-list">
-        <div class="card">
+        <div class="card" v-for="item in soundList" :key="item.id">
           <p class="evaluate">
-            用过很多系统，云厂长是功能最强大的一个，场景覆盖面很广，用起来也很方便，系统里面就连筛选功能都做的很强大，可以满足不同岗位的人使用，很灵活方便，我很满意。
+            {{ item.content }}
           </p>
           <p class="company">
-            <span class="name">张总</span>
-            <span class="company-name">天津诚轴科技有限公司</span>
+            <span class="name">{{ item.username }}</span>
+            <span class="company-name">{{ item.company_name }}</span>
           </p>
         </div>
       </div>
@@ -19,12 +19,37 @@
         <p class="heng-right"></p>
       </div>
       <div class="enterprise-list">
-        <p class="enterprise-logo">交通银行</p>
+        <p
+          class="enterprise-logo"
+          v-for="item in enterpriseList"
+          :key="item.id"
+        >
+          <img :src="item.image" alt="" />
+        </p>
       </div>
     </div>
   </div>
 </template>
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { getUserSound, getEnterpriseList } from "../../../api/home";
+
+const soundList: any = ref([]);
+const enterpriseList: any = ref([]);
+
+const getInfo = () => {
+  getUserSound().then((res) => {
+    soundList.value = res.data;
+  });
+  getEnterpriseList().then((res) => {
+    enterpriseList.value = res.data;
+  });
+};
+
+onMounted(() => {
+  getInfo();
+});
+</script>
 <style scoped lang="less">
 .user {
   padding: 80px 0 72px;
@@ -36,14 +61,16 @@
     font-weight: 600;
   }
   .content {
-    width: 70%;
+    width: 66%;
     margin: 0 auto;
     .card-list {
       display: flex;
       align-items: center;
       flex-wrap: wrap;
+      margin-top: 50px;
+      justify-content: space-around;
       .card {
-        width: 388px;
+        width: 328px;
         height: 206px;
         border-radius: 8px;
         background-color: #fff;
@@ -105,12 +132,21 @@
     }
     .enterprise-list {
       display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      width: 106%;
       .enterprise-logo {
         width: 180px;
         height: 82px;
         text-align: center;
         line-height: 82px;
         background-color: #fff;
+        margin-bottom: 10px;
+        margin-right: 10px;
+        img {
+          width: 100%;
+          height: 100%;
+        }
       }
     }
   }

src/view/Home/component/whyFactoryDirector.vue

@@ -5,54 +5,45 @@
       智能生产，值得信赖；技术驱动，创新引领，助力制造业企业实现数字化转型
     </p>
     <div class="select-list">
-      <div class="select-item">
-        <img
-          class="select-img"
-          src="../../../assets/image/xuanzetubiao1.png"
-          alt=""
-        />
+      <div
+        class="select-item"
+        v-for="item in selectData.numList"
+        :key="item.id"
+      >
+        <img class="select-img" :src="item.image" alt="" />
         <div class="information">
-          <p><span class="num">7</span><span class="plus">年+</span></p>
-          <p class="introduce">2017-2024七年技术沉淀</p>
-        </div>
-      </div>
-      <div class="select-item">
-        <img
-          class="select-img"
-          src="../../../assets/image/xuanzetubiao2.png"
-          alt=""
-        />
-        <div class="information">
-          <p><span class="num">1000</span><span class="plus">+</span></p>
-          <p class="introduce">全球制造业企业用户数</p>
-        </div>
-      </div>
-      <div class="select-item">
-        <img
-          class="select-img"
-          src="../../../assets/image/xuanzetubiao3.png"
-          alt=""
-        />
-        <div class="information">
-          <p><span class="num">500</span><span class="plus">+</span></p>
-          <p class="introduce">行业领先企业的信赖之选</p>
-        </div>
-      </div>
-      <div class="select-item">
-        <img
-          class="select-img"
-          src="../../../assets/image/xuanzetubiao4.png"
-          alt=""
-        />
-        <div class="information">
-          <p><span class="num">100</span><span class="plus">+</span></p>
-          <p class="introduce">功能模块，灵活组合</p>
+          <p>
+            <span class="num">{{ item.number }}</span
+            ><span class="plus">+</span>
+          </p>
+          <p class="introduce">{{ item.title }}</p>
         </div>
       </div>
     </div>
   </div>
 </template>
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { reactive, onMounted } from "vue";
+import { whySelect } from "../../../api/home";
+
+interface SelectType {
+  numList: any;
+}
+
+const selectData = reactive<SelectType>({
+  numList: [],
+});
+
+const getInfo = () => {
+  whySelect().then((res) => {
+    selectData.numList = res.data;
+  });
+};
+
+onMounted(() => {
+  getInfo();
+});
+</script>
 <style scoped lang="less">
 .factory-director {
   padding: 80px 0 88px;

src/view/Home/index.vue

@@ -30,6 +30,7 @@
 </template>
 <script lang="ts" setup>
 import { ref, reactive, onMounted, nextTick } from "vue";
+import { getBanneList } from "../../api/home";
 import Banne from "../../components/Banne/index.vue";
 import SolveQuestion from "./component/solveQuestion.vue";
 import Project from "./component/project.vue";
@@ -43,25 +44,36 @@ import { ElMessage } from "element-plus";
 
 const imgList = reactive({
   //banne图需要的数据
-  banneImageList: [
-    {
-      imgUrl:
-        "https://img1.baidu.com/it/u=1964831979,2551193402&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=357",
-      isBtn: true,
-      btnText: [
-        {
-          text: "点我,了解详情",
-          backgroundColor: "#0D0FFF",
-          color: "#fff",
-        },
-      ],
-    },
-    {
-      imgUrl:
-        "https://img1.baidu.com/it/u=3821883389,2247186365&fm=253&fmt=auto&app=138&f=JPEG?w=798&h=500",
-      isBtn: false,
-    },
-  ],
+  banneImageList: [],
+});
+
+//获取数据
+const getInfo = () => {
+  getBanneList().then((res) => {
+    let arr: any = [];
+    res.data.map((item: any) => {
+      console.log(item.is_jump);
+      const obj = {
+        imgUrl: item.image,
+        isBtn: item.is_jump == 1 ? true : false,
+        btnList: [
+          {
+            text: item.title,
+            backgroundColor: "#0D0FFF",
+            color: "#fff",
+          },
+        ],
+      };
+      arr.push(obj);
+    });
+
+    imgList.banneImageList = arr;
+    console.log(imgList.banneImageList);
+  });
+};
+
+onMounted(() => {
+  getInfo();
 });
 </script>
 <style lang="less" scoped>

src/view/Login/index.vue

@@ -92,9 +92,7 @@
           </div>
           <div v-else @click="isLogin = true">
             <span>已有账号？</span>
-            <span style="color: rgba(13, 15, 255, 1)" 
-              >立即登录</span
-            >
+            <span style="color: rgba(13, 15, 255, 1)">立即登录</span>
           </div>
         </div>
       </div>
@@ -129,9 +127,10 @@ const __topic__ = async () => {
       password: 123456,
     });
     router.push({
-      name:'home',
-    })
-    localStorage.setItem('access_token',JSON.stringify(data.token))
+      name: "home",
+    });
+    localStorage.setItem("access_token", JSON.stringify(data.token));
+    localStorage.setItem("userInfo", JSON.stringify(data));
   } catch (error) {}
 };
 //登录
@@ -141,9 +140,8 @@ const toindex = () => {
       message: "请勾选协议",
       type: "warning",
     });
-  }
-  else{
-    __topic__()
+  } else {
+    __topic__();
   }
 };
 </script>

src/view/PersonalCenter/component/mineCollect.vue

@@ -32,6 +32,8 @@
   </div>
 </template>
 <script setup lang="ts">
+import { ref, onMounted } from "vue";
+
 const handleCurrentChange = (val: number) => {
   console.log(val);
 };

src/view/PersonalCenter/component/personalData.vue

@@ -3,12 +3,18 @@
     <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>
+      <img class="header-img" :src="userInformation.avatar" alt="" />
+      <el-upload
+        v-model:file-list="fileList"
+        class="upload-demo"
+        action="-"
+        :on-preview="handlePreview"
+        :on-remove="handleRemove"
+        :before-remove="beforeRemove"
+        :on-exceed="handleExceed"
+      >
+        <p class="modify">修改头像</p>
+      </el-upload>
     </div>
     <div class="content-1">
       <p class="label-1">昵称</p>
@@ -30,20 +36,23 @@
     </div>
     <div class="content-1">
       <p class="label-1">手机号码</p>
-      <p class="label-2">18429681987</p>
+      <p class="label-2">{{ userInformation.mobile }}</p>
     </div>
     <div class="content-1">
       <p class="label-1">注册时间</p>
-      <p class="label-2">2023-04-19 15:43:00</p>
+      <p class="label-2">{{ userInformation.created_at }}</p>
     </div>
     <div class="content-1">
       <p class="label-1">上次登录时间</p>
-      <p class="label-2">2023-04-19 15:43:00</p>
+      <p class="label-2">{{ userInformation.updated_at }}</p>
     </div>
   </div>
 </template>
 <script setup lang="ts">
-import { reactive } from "vue";
+import { reactive, ref, onMounted } from "vue";
+
+const fileList = ref([]);
+const userInformation: any = ref({});
 
 const personalData = reactive({
   nickName: "柠檬树上的聪明果", //昵称
@@ -54,6 +63,20 @@ const personalData = reactive({
 const modifyName = () => {
   personalData.showInput = true;
 };
+
+const handlePreview = (uploadFile) => {
+  console.log(uploadFile);
+};
+const handleRemove = () => {};
+const beforeRemove = () => {};
+const handleExceed = (files, uploadFiles) => {
+  console.log(files, uploadFiles);
+};
+
+onMounted(() => {
+  userInformation.value = JSON.parse(localStorage.getItem("userInfo")!);
+  personalData.nickName = userInformation.value.nickname;
+});
 </script>
 <style scoped lang="less">
 .information {

src/view/PersonalCenter/index.vue

@@ -2,13 +2,9 @@
   <div class="personal-center">
     <div class="personal-list">
       <div class="personal">
-        <img
-          class="profile"
-          src="https://tse3-mm.cn.bing.net/th/id/OIP-C.qidgOqAsPEdzAg5inmSK3AAAAA?rs=1&pid=ImgDetMain"
-          alt=""
-        />
-        <p class="name">圣埃蒂安</p>
-        <p class="id">ID：28875432</p>
+        <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>
       </div>
       <div class="btn-list">
@@ -39,6 +35,7 @@
   <Bottom />
 </template>
 <script setup lang="ts">
+import { ref, onMounted } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import Bottom from "../../components/Layout/bottom.vue";
 import PersonalData from "./component/personalData.vue";
@@ -46,8 +43,8 @@ import MineCollect from "./component/mineCollect.vue";
 import MineOnTrial from "./component/mineOnTrial.vue";
 const route = useRoute();
 const router = useRouter();
-console.log(route);
 
+const userInformation: any = ref({});
 const switchTab = (val: string) => {
   router.push({
     path: "/personalCenter",
@@ -56,6 +53,10 @@ const switchTab = (val: string) => {
     },
   });
 };
+
+onMounted(() => {
+  userInformation.value = JSON.parse(localStorage.getItem("userInfo")!);
+});
 </script>
 <style scoped lang="less">
 .personal-center {