添加产品接口

src/api/config.ts

@@ -0,0 +1,9 @@
+import request from "../utils/request";
+//获取配置信息
+export const config = (params: any) => {
+  return request({
+    url: "config",
+    method: "get",
+    params,
+  });
+};

src/api/kecheng.ts

@@ -0,0 +1,34 @@
+import request from "../utils/request";
+//课程接口
+//课程列表
+export const list = (params: any) => {
+  return request({
+    url: "course/list",
+    method: "get",
+    params,
+  });
+};
+//课程详情
+export const details = (params: any) => {
+  return request({
+    url: "course/details",
+    method: "get",
+    params,
+  });
+};
+//视频详情
+export const course_video = (params: any) => {
+  return request({
+    url: "course_video/details",
+    method: "get",
+    params,
+  });
+};
+//收藏课程
+export const collect = (data: any) => {
+  return request({
+    url: "collect/add",
+    method: "get",
+    data,
+  });
+};

src/api/login.ts

@@ -8,4 +8,37 @@ export const login = (data: any) => {
     data,
   });
 };
+//产品
+//方案概述
+export const overview = (params: any) => {
+  return request({
+    url: "/overview",
+    method: "get",
+    params,
+  });
+};
+//方案优势
+export const advantage = (params: any) => {
+  return request({
+    url: "/advantage",
+    method: "get",
+    params,
+  });
+};
+//客户案例
+export const customer = (params: any) => {
+  return request({
+    url: "customer-case",
+    method: "get",
+    params,
+  });
+};
+//插件列表
+export const plugin = (params: any) => {
+  return request({
+    url: "plugin",
+    method: "get",
+    params,
+  });
+};
 

src/api/tongyong.ts

@@ -0,0 +1,11 @@
+import request from "../utils/request";
+
+//页脚
+export const footer = (params: any) => {
+  return request({
+    url: "footer",
+    method: "get",
+    params,
+  });
+};
+

src/components/Application .vue

@@ -30,6 +30,11 @@ const props = defineProps({
 </script>
 
 <style lang="scss" scoped>
+.image{
+  width: 1200px;
+  height: 270px;
+  margin-top: 60px;
+}
 .flex {
   display: flex;
   flex-wrap: wrap;

src/components/Layout/bottom.vue

@@ -1,12 +1,9 @@
 <template>
   <div class="bg">
     <div class="top">
-      <div v-for="(item, idx) in 5" :key="idx">
-        <div class="title">产品</div>
-        <div class="item">云厂长团队版</div>
-        <div class="item">云厂长企业版</div>
-        <div class="item">云厂长旗舰版</div>
-        <div class="item">云厂长插件</div>
+      <div v-for="(item, idx) in foot.list" :key="idx">
+        <div class="title">{{ item.title }}</div>
+        <div class="item" v-for="(child,index) in item.footer" :key="index">{{ child.title }}</div>
       </div>
       <div>
         <div class="title">联系我们</div>
@@ -37,7 +34,19 @@
 
 <script setup lang="ts">
 import { useRouter } from "vue-router";
-import { onMounted, ref } from "vue";
+import { onMounted, reactive, ref } from "vue";
+import * as tongApi from '../../api/tongyong'
+const foot = reactive({
+  list:[]
+})
+//页脚
+const list = async () => {
+  try {
+    const { data } = await tongApi.footer({});
+    foot.list = data;
+  } catch (error) {}
+};
+onMounted(list)
 onMounted(() => {});
 </script>
 
@@ -126,5 +135,6 @@ onMounted(() => {});
   text-align: justify;
   font-style: normal;
   margin-top: 14px;
+  cursor: pointer;
 }
 </style>

src/components/advantage/index.vue

@@ -2,7 +2,7 @@
   <!-- 方案优势组件 -->
   <div class="bgbox">
     <div class="title">{{ title }}</div>
-    <div class="top_font">{{ titleinfo }}</div>
+    <div class="top_font" v-if="titleinfo">{{ titleinfo }}</div>
     <div style="position: relative">
       <div class="flex">
         <el-tabs
@@ -14,8 +14,8 @@
           <el-tab-pane
             v-for="(item, idx) in tabslist"
             :key="idx"
-            :label="item.label"
-            :name="item.name"
+            :label="item.title"
+            :name="idx"
           ></el-tab-pane>
         </el-tabs>
       </div>
@@ -24,11 +24,11 @@
     <!-- 内容 -->
     <div v-for="(item, idx) in tabslist" :key="idx" class="contenta">
       <div
-        v-if="item.name == activeName"
+        v-if="idx == activeName"
         style="display: flex; align-items: center"
       >
         <div class="left">
-          <div class="title">{{ item.label }}</div>
+          <div class="title">{{ item.title }}</div>
           <div class="content">
             <div
               style="display: flex; align-items: center"
@@ -39,11 +39,11 @@
               <div>{{ child }}</div>
             </div>
           </div>
-          <div class="trybtn" v-if="showbutton">申请试用</div>
+          <div class="trybtn" v-if="item.button_title">申请试用</div>
         </div>
         <div class="right">
           <!-- <img class="right" src="../../assets/images/model.png" alt="" /> -->
-          <img class="right" :src="item.imgae" alt="" />
+          <img class="right" :src="item.image" alt="" />
         </div>
       </div>
     </div>
@@ -54,7 +54,7 @@
 import { useRouter } from "vue-router";
 import { onMounted, ref, reactive } from "vue";
 onMounted(() => {});
-const activeName = ref("first");
+const activeName = ref(0);
 
 const handleClick = (tab, event) => {
   console.log(tab, event);

src/components/corporation.vue

@@ -1,10 +1,16 @@
 <template>
   <!-- 公司模块 -->
   <div class="bgbox">
-    <div class="title">客户案例</div>
+    <div class="title">{{ title }}</div>
+    <div v-if="info" class="info">{{ info }}</div>
     <div class="box">
-        <div class="item"></div>
-        <div class="item"></div>
+      <img
+        class="item"
+        v-for="(item, idx) in list"
+        :key="idx"
+        :src="item.image"
+        alt=""
+      />
     </div>
   </div>
 </template>
@@ -13,19 +19,40 @@
 import { useRouter } from "vue-router";
 import { onMounted, ref } from "vue";
 onMounted(() => {});
+const props = defineProps({
+  title: {
+    default: "",
+  },
+  info: {
+    default: "",
+  },
+  list: {
+    default: [],
+  },
+});
 </script>
 
 <style lang="scss" scoped>
-.box{
-    display: flex;
-    justify-content: space-between;
-    align-content: center;
-    margin-top: 60px;
-    .item{
-        width: 580px;
-        height: 560px;
-        background: red;
-    }
+.info {
+  font-family: PingFangSC, PingFang SC;
+  font-weight: 400;
+  font-size: 16px;
+  color: #525967;
+  line-height: 30px;
+  text-align: center;
+  font-style: normal;
+  margin-top: 12px;
+}
+.box {
+  display: flex;
+  justify-content: space-between;
+  align-content: center;
+  margin-top: 60px;
+  .item {
+    width: 580px;
+    height: 560px;
+    // background: red;
+  }
 }
 .bgbox {
   width: 100%;

src/utils/request.ts

@@ -25,7 +25,10 @@ request.interceptors.request.use(
       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/price.vue

@@ -29,15 +29,65 @@
         </div>
       </div>
       <div class="bankuai">
-        <div class="flex">
+        <div v-if="tabs==0" class="flex">
           <img
             @click="dialogTableVisible2 = true"
             class="image"
-            src="../../assets/login/bg@2x.png"
+            :src="price.month_group"
+            alt=""
+          />
+          <img
+            @click="dialogTableVisible2 = true"
+            class="image"
+            :src="price.month_professional"
+            alt=""
+          />
+          <img
+            @click="dialogTableVisible2 = true"
+            class="image"
+            :src="price.month_enterprise"
+            alt=""
+          />
+        </div>
+        <div v-if="tabs==1" class="flex">
+          <img
+            @click="dialogTableVisible2 = true"
+            class="image"
+            :src="price.year_group"
+            alt=""
+          />
+          <img
+            @click="dialogTableVisible2 = true"
+            class="image"
+            :src="price.year_professional"
+            alt=""
+          />
+          <img
+            @click="dialogTableVisible2 = true"
+            class="image"
+            :src="price.year_enterprise"
+            alt=""
+          />
+        </div>
+        <div v-if="tabs==2" class="flex">
+          <img
+            @click="dialogTableVisible2 = true"
+            class="image"
+            :src="price.base_enhancement"
+            alt=""
+          />
+          <img
+            @click="dialogTableVisible2 = true"
+            class="image"
+            :src="price.professional_enhancement"
+            alt=""
+          />
+          <img
+            @click="dialogTableVisible2 = true"
+            class="image"
+            :src="price.enterprise_enhancement"
             alt=""
           />
-          <img class="image" src="../../assets/login/bg@2x.png" alt="" />
-          <img class="image" src="../../assets/login/bg@2x.png" alt="" />
         </div>
       </div>
       <!-- 免费获取 -->
@@ -50,8 +100,11 @@
       <!-- 功能对比 -->
       <div class="Compare">各个版本功能对比</div>
     </div>
-    <application></application>
-    <corporation></corporation>
+    <div class="content">
+      <img class="bigimage" :src="price.version_compare" alt="">
+    </div>
+    <application :titleinfo="info.scene_content" :image="info.scene_image"></application>
+    <!-- <corporation></corporation> -->
     <bottom></bottom>
 
     <div class="one">
@@ -121,8 +174,27 @@ import { onMounted, ref, reactive } from "vue";
 import bottom from "../../components/Layout/bottom.vue";
 import application from "../../components/Application .vue";
 import corporation from "../../components/corporation.vue";
-import foarm from "../../components/Form/from.vue";
-onMounted(() => {});
+import * as configApi from "../../api/config";
+//价格配置
+const config = async () => {
+  try {
+    const { data } = await configApi.config({
+      module: "cms_price",
+    });
+    price = data
+  } catch (error) {}
+};
+onMounted(config);
+
+const configa = async () => {
+  try {
+    const { data } = await configApi.config({
+      module: "cms_product",
+    });
+    info = data;
+  } catch (error) {}
+};
+onMounted(configa);
 
 //更换标签
 const tabs = ref("0");
@@ -143,9 +215,19 @@ const formLabelAlign = reactive({
   emil: "",
   phone: "",
 });
+const price = reactive({
+
+});
+const info = reactive({
+
+});
 </script>
 
 <style lang="scss" scoped>
+.bigimage{
+  width: 1200px;
+  margin-bottom: 70px;
+}
 ::v-deep .one .el-dialog {
   --el-dialog-width: 420px !important;
 }

src/view/Home/product.vue

@@ -1,37 +1,161 @@
 <template>
   <!-- 产品团队 -->
   <banner class="top" :banneImageList="imgList.banneImageList" />
-  <div class="content">
+  <div v-if="index != 3" class="content">
     <div class="fang">
       <div class="title">方案概述</div>
-      <div class="top_font">轻松实现从销售订单承接到柔性生产的全流程</div>
+      <div v-if="index == 0" class="top_font">
+        {{ tabbar.info.overview_content_group }}
+      </div>
+      <div v-if="index == 1" class="top_font">
+        {{ tabbar.info.overview_content_professional }}
+      </div>
+      <div v-if="index == 2" class="top_font">
+        {{ tabbar.info.overview_content_enterprise }}
+      </div>
       <div class="box_item">
-        <div class="item" v-for="(item, idx) in 4" :key="idx">
-          <div class="item_title">多销售场景</div>
-          <div class="item_font">多种销售场景提升需求准度</div>
+        <div class="item" v-for="(item, idx) in overviewList.list" :key="idx">
+          <div class="item_title">{{ item.title }}</div>
+          <div class="item_font">{{ item.content }}</div>
         </div>
       </div>
-      <div class="imag"></div>
+      <div class="imag">
+        <!-- 团队 -->
+        <img
+          v-if="index == 0"
+          class="imag"
+          :src="tabbar.info.overview_image_group"
+          alt=""
+        />
+        <!-- 专业 -->
+        <img
+          v-if="index == 1"
+          class="imag"
+          :src="tabbar.info.overview_image_professional"
+          alt=""
+        />
+        <!-- 企业 -->
+        <img
+          v-if="index == 2"
+          class="imag"
+          :src="tabbar.info.overview_image_enterprise"
+          alt=""
+        />
+      </div>
     </div>
   </div>
   <advantage
     :tabslist="tabbar.tabslist"
-    title="方案优势"
-    titleinfo="量身定制，满足小型制造行业管理的广泛需求"
-  ></advantage>
-  <application></application>
-  <corporation></corporation>
+    :title="index == 3 ? '三方市场插件让您的企业流程规范化' : '方案优势'"
+    :titleinfo="index == 3 ? '' : tabbar.info.advantage_content"
+  >
+  </advantage>
+  <!-- 安装增包 -->
+  <corporation
+    style="background: rgba(245, 249, 255, 1)"
+    title="按需安装增强包，减少企业成本"
+    :info="tabbar.info.enhancement_package_content"
+    v-if="index == 3"
+    :list="tabbar.newlist"
+  ></corporation>
+  <!-- 管理平台 -->
+  <application :titleinfo="tabbar.info.scene_content" :image="tabbar.info.scene_image" style="background: #ffffff" v-if="index == 3"></application>
+  <application :titleinfo="tabbar.info.scene_content" :image="tabbar.info.scene_image" v-else></application>
+  <!-- 客户案例 -->
+  <corporation
+    v-if="index != 3"
+    title="客户案例"
+    :list="tabbar.customerlist"
+  ></corporation>
   <bottom></bottom>
 </template>
 
 <script setup>
-import { useRouter } from "vue-router";
-import { onMounted, ref, reactive } from "vue";
+import { useRouter, useRoute } from "vue-router";
+import { onMounted, ref, reactive, watch } from "vue";
 import banner from "../../components/Banne/index.vue";
 import bottom from "../../components/Layout/bottom.vue";
 import application from "../../components/Application .vue";
 import corporation from "../../components/corporation.vue";
 import advantage from "../../components/advantage/index.vue";
+import * as productApi from "../../api/login";
+import * as configApi from "../../api/config";
+const route = useRoute();
+const index = ref();
+index.value = route.query.index;
+
+// 方案概述列表
+const overviewList = reactive({
+  list: [],
+});
+const overview = async () => {
+  try {
+    const { data } = await productApi.overview({});
+    overviewList.list = data;
+  } catch (error) {}
+};
+onMounted(overview);
+//方案优势
+const advantag = async () => {
+  try {
+    const { data } = await productApi.advantage({
+      type:
+        index.value == 0
+          ? "group"
+          : index.value == 1
+          ? "professional"
+          : "enterprise",
+    });
+    tabbar.tabslist = data;
+  } catch (error) {}
+};
+//插件列表
+const plugin = async () => {
+  try {
+    const { data } = await productApi.plugin({});
+    tabbar.tabslist = data;
+  } catch (error) {}
+};
+if (index.value == 3) {
+  onMounted(plugin);
+} else {
+  onMounted(advantag);
+}
+
+//客户案例
+const customer = async () => {
+  try {
+    const { data } = await productApi.customer({});
+    tabbar.customerlist = data;
+  } catch (error) {}
+};
+onMounted(customer);
+
+//产品配置
+const config = async () => {
+  try {
+    const { data } = await configApi.config({
+      module: "cms_product",
+    });
+    tabbar.info = data;
+    tabbar.newlist.push({image:data.group_enhancement_package_image})
+    tabbar.newlist.push({image:data.professional_enhancement_package_image})
+  } catch (error) {}
+};
+onMounted(config);
+
+//监听url变化
+watch(
+  () => route.query,
+  (newVal) => {
+    index.value = route.query.index;
+    if (index.value == 3) {
+      plugin();
+    } else {
+      advantag();
+    }
+  }
+);
 
 const tabbar = reactive({
   tabslist: [
@@ -90,6 +214,9 @@ const tabbar = reactive({
         "https://inews.gtimg.com/om_bt/Os3eJ8u3SgB3Kd-zrRRhgfR5hUvdwcVPKUTNO6O7sZfUwAA/641",
     },
   ],
+  customerlist: [],
+  info: {},
+  newlist:[]
 });
 
 const imgList = reactive({
@@ -114,7 +241,7 @@ onMounted(() => {});
   width: 100%;
   height: 570px;
   margin-top: 30px;
-  background: rgba(13, 15, 255, 0.5);
+  // background: rgba(13, 15, 255, 0.5);
 }
 .content {
   width: 1200px;
@@ -129,6 +256,7 @@ onMounted(() => {});
     border: 1px solid rgba(151, 151, 151, 0.3);
     padding: 20px 0 0 28px;
     box-sizing: border-box;
+    // column-gap: 18px
   }
   .item_title {
     font-family: PingFangSC, PingFang SC;
@@ -151,8 +279,9 @@ onMounted(() => {});
   .box_item {
     margin-top: 40px;
     display: flex;
-    justify-content: space-between;
+    // justify-content: space-between;
     align-items: center;
+    column-gap: 20px;
   }
   .title {
     font-family: PingFangSC, PingFang SC;

src/view/Login/index.vue

@@ -131,7 +131,7 @@ const __topic__ = async () => {
     router.push({
       name:'home',
     })
-    localStorage.setItem('access_token',data.token)
+    localStorage.setItem('access_token',JSON.stringify(data.token))
   } catch (error) {}
 };
 //登录

src/view/video/index.vue

@@ -1,29 +1,45 @@
 <template>
   <Banne :banneImageList="imgList.banneImageList" />
   <div class="videobox">
-    <div class="box" >
-      <div @click="toinfo" class="item" v-for="(item,idx) in 8" :key="idx">
-        <img class="image" src="../../assets/images/price_bg.png" alt="" />
-        <div class="minbox">2:12:04</div>
+    <div class="box">
+      <div
+        @click="toinfo"
+        class="item"
+        v-for="(item, idx) in imgList.list"
+        :key="idx"
+      >
+        <img class="image" :src="item.image" alt="" />
+        <div class="minbox">{{ item.duration_num }}</div>
         <div class="bottom">
-          <div class="title">销售模块</div>
+          <div class="title">{{ item.title }}</div>
           <div class="small">
-            <div>共26节课</div>
-            <div>2575人学习</div>
+            <div>共{{ item.video_num }}节课</div>
+            <div>{{ item.study_num }}人学习</div>
           </div>
         </div>
       </div>
     </div>
   </div>
   <!-- <div class="foot"></div> -->
-  <bottom  ></bottom>
+  <bottom></bottom>
 </template>
 <script lang="ts" setup>
 import { ref, reactive, onMounted, nextTick } from "vue";
 import Banne from "../../components/Banne/index.vue";
 import bottom from "../../components/Layout/bottom.vue";
 import { useRouter, useRoute } from "vue-router";
-const router = useRouter()
+import * as videoAPi from "../../api/kecheng";
+const router = useRouter();
+
+//课程列表
+const list = async () => {
+  try {
+    const { data } = await videoAPi.list({});
+    imgList.list = data.data;
+  } catch (error) {}
+};
+onMounted(list);
+
 const imgList = reactive({
   //banne图需要的数据
   banneImageList: [
@@ -36,18 +52,19 @@ const imgList = reactive({
     {
       imgUrl:
         "https://img1.baidu.com/it/u=3821883389,2247186365&fm=253&fmt=auto&app=138&f=JPEG?w=798&h=500",
-      isBtn: false,  
+      isBtn: false,
     },
   ],
+  list: [],
 });
-const toinfo = ()=>{
+const toinfo = () => {
   router.push({
-    name:'course'
-  })
-}
+    name: "course",
+  });
+};
 </script>
 <style lang="less" scoped>
-.foot{
+.foot {
   height: 480px;
 }
 .videobox {
@@ -62,7 +79,8 @@ const toinfo = ()=>{
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  justify-content: space-between;
+  // justify-content: space-between;
+  column-gap: 20px;
   .item {
     width: 285px;
     // height: 246px;
@@ -106,7 +124,7 @@ const toinfo = ()=>{
       position: absolute;
       font-family: SFPro, SFPro;
       font-weight: 400;
-      font-size: 12px; 
+      font-size: 12px;
       color: #ffffff;
       line-height: 22px;
       text-align: center;

src/view/video/info.vue

@@ -91,6 +91,7 @@ import { useRouter } from "vue-router";
 import { onMounted, ref } from "vue";
 import bottom from "../../components/Layout/bottom.vue";
 import row from "../../components/row/row.vue";
+import * as videoAPi from '../../api/kecheng'
 const router = useRouter()
 onMounted(() => {});
 //输入框内容