首页服务

src/router/index.js

@@ -1,7 +1,7 @@
 import Vue from 'vue';
 import VueRouter from 'vue-router';
 import store from '../store';
-import HomeView from '../views/HomeView.vue';
+// import HomeView from '../views/HomeView.vue';
 
 Vue.use(VueRouter)
 // 第三种侧边栏展示白名单
@@ -44,7 +44,7 @@ const blackFooterList = [
 const routes = [{
     path: '/',
     name: '首页',
-    component: HomeView,
+    component: () => import( /* webpackChunkName: "register" */ '../views/agent/home.vue'),
     isFirst: true, //是否属于一级路由
     meta: {
       title: '首页', //面包屑名称（此页面确认不需要放置在面包屑可以不添加此属性；如果获取不到title 会自动 获取 name 作为面包屑名称）
@@ -56,7 +56,7 @@ const routes = [{
     name: 'register',
     // this generates a separate chunk (about.[hash].js) for this route
     // which is lazy-loaded when the route is visited.
-    component: () => import( /* webpackChunkName: "register" */ '../views/Register.vue'),
+    component: () => import( /* webpackChunkName: "register" */ '../views/agent/home.vue'),
     meta: {
       title: '注册页',
       hideBreadcrumb: true, // 一级页面不显示面包屑

src/views/agent/home.vue

@@ -0,0 +1,753 @@
+<template>
+  <div class="home-wrap column">
+    <div class="home-main flex">
+      <div class="home-main-left column">
+        <div class="systemNotice common-area">
+          <h2 class="flex-between">
+            <b>系统通知</b>
+            <span class="hoverCommon" @click="lookMoreSystem">查看更多</span>
+          </h2>
+          <div class="systemNotice-main">
+            <div class="sales-item flex" v-for="(item) in systemList" :key="item.name">
+              <img :src="require(`@/assets/home/NEW.svg`)" alt="">
+              <div class="column">
+                <b class="flex">{{ item.label }} <img class="systemIcon" src="@/assets/home/systemIcon.svg" alt=""> </b>
+                <p>{{ item.desc }}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="salesStatistics common-area">
+          <h2 class="flex-between">
+            <b>销售统计 <span>2024–10-28数据</span></b>
+            <span class="hoverCommon" @click="lookMoreSystem">查看全部</span>
+
+          </h2>
+          <div class="salesStatistics-main flex">
+            <div class="sales-item flex" v-for="(item, index) in salesList" :key="item.name">
+              <img :src="require(`@/assets/home/sales${index + 1}.png`)" alt="">
+              <div class="column">
+                <p class="flex"><span class="number">{{ item.num }}</span> <span v-if="index < 2" class="unit">元</span></p>
+                <span class="label">{{ item.label }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="supplyPrice common-area">
+          <h2>供货价格 </h2>
+          <div class="supplyPrice-main flex">
+            <div style="height:500px;overflow: hidden;" :class="['supplyPric-item', 'supplyPric-item' + classification_id]" v-for="(classification_name, classification_id) in serviceClassifications" :key="classification_id">
+              <div class="item-top flex-between">
+                <div class="flex">
+                  <img :src="require(`@/assets/home/service_classification_${classification_id}.png`)" alt="">
+                  <b>{{ classification_name }}</b>
+                </div>
+                <span>详情</span>
+              </div>
+              <div class="list-wrap">
+                <div v-for="(veritem, key) in serviceClassificationServices[classification_id]" :key="key" class="item-list">
+                  <p class="item-list-name">{{ veritem.name }}</p>
+                  <p class="flex-between" v-for="(type, index3) in veritem.types" :key="index3">
+                    {{ type2name[type] }}
+                    <span>{{ supplyPriceList[type].price }}元 / {{ supplyPriceList[type].unit_format }}</span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <Footer></Footer>
+
+      </div>
+      <div class="home-main-right">
+        <div class="accountBalance flex-between common-area">
+          <span>账户余额&nbsp; <b>4560</b>&nbsp;元</span>
+          <span class="hoverCommon">展开</span>
+        </div>
+        <div style=" background: #fff">
+          <div class="importantReminder common-area">
+            <h2>重要提醒</h2>
+            <div class="reminder1 column">
+              <p>淘宝账号即将过期</p>
+              <div @click="lookTaoBaoNum">查看</div>
+            </div>
+            <div class="reminder2 column hide">
+              <p>请尽快建立站点，开始售卖</p>
+              <div @click="lookTaoBaoNum1">立即前往</div>
+            </div>
+          </div>
+          <div class="carouselImage common-area">
+            <!-- 轮播图 -->
+            <img src="@/assets/home/home-right.png" alt="">
+          </div>
+          <div class="preferredMarket common-area">
+            <h2>优选营销</h2>
+            <div class="column">
+              <div class="sales-item flex" v-for="(item, index) in preferredMarketList" :key="item.name">
+                <img :src="require(`@/assets/home/preferredMarket${index + 1}.png`)" alt="">
+                <div class="column">
+                  <span class="flex">{{ item.label }} 
+                    <!-- <img class="systemIcon" src="@/assets/home/systemIcon.svg" alt=""> -->
+                  </span>
+                  <p>{{ item.desc }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="usageGuide common-area">
+            <h2 class="flex-between">
+              <b>使用指南</b>
+              <span class="hoverCommon">查看全部</span>
+            </h2>
+            <p class="hoverCommon">我想将商品绑定淘宝店应该怎么做？</p>
+            <p class="hoverCommon">基于成交量的推广支持</p>
+            <p class="hoverCommon">二级、裂变分销，发展代理网络</p>
+          </div>
+          <div class="customWrap common-area">
+            <h2>联系客服</h2>
+            <img src="@/assets/home/customer.png" alt="">
+          </div>
+        </div>
+
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Footer from '@/components/Footer.vue';
+
+export default {
+  name: 'HomeView',
+  data() {
+    return {
+      // AUTH
+      token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3NTAwNTM3MjQsIm5iZiI6MTc1MDA1MzcyNCwiZXhwIjoxNzUyNjQ1NzI0LCJ1c2VyIjoic3VidXNlciIsImxvZ2luX3R5cGUiOjAsImFpZCI6IjEifQ.xyIqBLelB-k6jCifgRevBJTyg_Qrm6m1e4OcHhOpepU',
+      // 表格加载
+      tableLoading: true,
+      type2name:[],
+      serviceClassifications: [],
+      serviceClassificationServices: [],
+      supplyPriceList: [],
+      serviceList: [],
+
+
+      preferredMarketList: [
+        {
+          desc: '电脑版、小程序、微信H5',
+          label: '多端系统'
+        },
+        {
+          desc: '电脑版、小程序、微信H5',
+          label: 'OCPC推广'
+        },
+        {
+          desc: '电脑版、小程序、微信H5',
+          label: '多级分销'
+        },
+        {
+          desc: '电脑版、小程序、微信H5',
+          label: '嵌入广告'
+        },
+        {
+          desc: '电脑版、小程序、微信H5',
+          label: '发放卡券'
+        },
+      ],
+      salesList: [
+        {
+          num: 4560,
+          label: '销售金额'
+        },
+        {
+          num: 1000,
+          label: '成本支出'
+        },
+        {
+          num: 20,
+          label: '查重订单量'
+        },
+        {
+          num: 60,
+          label: 'AIGC订单量'
+        },
+      ],
+      systemList: [
+        {
+          desc: 'AI中文范文2万字版、AI中文范文万字版已整合到AI中文范文内(可选3000/5000AI中文范文2万字版、AI中文范文万字版已整合到AI中文范文内(可选3000/5000/8000/10000/15000/000000/10000/…',
+          label: 'AI范文整合的通知'
+        },
+        {
+          desc: 'AI中文范文2万字版、AI中文范文万字版已整合到AI中文范文内(可选3000/5000AI中文范文2万字版、AI中文范文万字版已整合到AI中文范文内(可选3000/5000/8000/10000/15000/000000/10000/…',
+          label: 'AI范文整合的通知'
+        },
+      ],
+      supplyList1: [
+        '查重服务',
+        'AIGC服务',
+        '写作辅助',
+      ],
+      supplyList: [
+        {
+          name: '万方系统',
+          list: [
+            {
+              name: '万方硕博版',
+              word: '千字符',
+              price: 2.4
+            },
+            {
+              name: '万方硕博版',
+              word: '千字符',
+              price: 2.4
+            },
+            {
+              name: '万方硕博版',
+              word: '千字符',
+              price: 2.4
+            },
+          ]
+
+        },
+        {
+          name: '维普系统',
+          list: [
+            {
+              name: '维普硕博版',
+              word: '千字符',
+              price: 2.4
+            },
+            {
+              name: '维普系统硕博版',
+              word: '千字符',
+              price: 2.4
+            },
+            {
+              name: '维普系统硕博版',
+              word: '千字符',
+              price: 2.4
+            },
+          ]
+
+        },
+        {
+          name: 'PaperPass旗舰版',
+          list: [
+            {
+              name: '万方硕博版',
+              word: '千字符',
+              price: 2.4
+            },
+          ]
+
+        },
+        {
+          name: '学术不端',
+          list: [
+            {
+              name: '硕博预审版',
+              word: '篇',
+              price: 2.4
+            },
+            {
+              name: '期刊小论文小篇幅版',
+              word: '篇',
+              price: 2.4
+            },
+            {
+              name: '期刊小论文小篇幅版',
+              word: '篇',
+              price: 2.4
+            },
+            {
+              name: '期刊小论文小篇幅版',
+              word: '篇',
+              price: 2.4
+            },
+          ]
+
+        },
+      ]
+
+    }
+  },
+  components: {
+    // HelloWorld
+    Footer,
+  },
+  mounted() {
+      this.getSupplyServiceList()
+  },
+  methods: {
+    getSupplyServiceList() {
+
+        this.tableLoading = true
+        const that = this
+        that.serviceList = []
+        this.$http('POST', '/agentnew/ajax_get_supply_services', {
+
+        },{
+            headers:{
+                'Auth': this.token
+            }
+        }).then(response => {
+            this.tableLoading = false
+            this.$nextTick(() => {
+                that.serviceList = response.data.list
+                this.type2name = response.data.type2name;
+                this.serviceClassifications = response.data.service_classification;
+                this.serviceClassificationServices = response.data.service_classification_services;
+                this.supplyPriceList = response.data.supply_price;
+                console.log(this.supplyPriceList[2].price)
+                console.log(this.supplyPriceList[2].unit_format)
+            })
+        }).catch(error => {
+            console.error(error, 'error')
+        })
+    },
+    lookTaoBaoNum() {
+      // 查看淘宝账号
+    },
+    lookTaoBaoNum1() {
+      // 查看淘宝账号
+    },
+    lookMoreSystem() {
+      // 系统通知 -查看更多
+    },
+    lookAllSales() {
+      // 销售统计 -查看全部
+    },
+  }
+}
+</script>
+<style scoped lang="scss">
+.home-wrap {
+  padding: 12px;
+
+
+
+  .home-main {
+    width: 100%;
+    display: flex;
+    gap: 12px;
+    min-width: 1018px;
+    max-width: 1750px;
+    margin: 0 auto;
+    align-items: stretch;
+    box-sizing: border-box;
+    .home-main-left {
+      min-width: 746px;
+      max-width: 1398px;
+      flex: 1;
+
+      .common-area {
+        width: 100%;
+        padding: 20px 14px;
+        box-sizing: border-box;
+        /* 确保 padding 不会影响宽度计算 */
+        background: #fff;
+        margin-bottom: 12px;
+
+        h2 {
+          font-size: 16px;
+          font-weight: bold;
+          letter-spacing: 0.08em;
+          color: #1E2226;
+          margin: 0 0 20px 0;
+          text-align: left;
+
+          span {
+            font-size: 14px;
+            font-weight: normal;
+            letter-spacing: 0.08em;
+            color: #8A9099;
+          }
+        }
+      }
+
+      .systemNotice-main {
+        img {
+          width: 32px;
+          height: 32px;
+          margin-right: 8px;
+        }
+
+        .sales-item {
+          width: 100%;
+          justify-content: flex-start;
+          padding: 18px 12px;
+          box-sizing: border-box;
+          transition: all .3s;
+
+          .systemIcon {
+            display: none;
+            width: 12px;
+            height: 8px;
+          }
+
+          &:hover {
+            background: #F6F7FA;
+
+            b {
+              color: #006AFF;
+            }
+
+            .systemIcon {
+              margin-left: 12px;
+              display: block;
+            }
+          }
+
+          div {
+            width: calc(100% - 30px);
+          }
+
+          /* 确保 padding 不会影响宽度计算 */
+          b {
+            font-size: 14px;
+            font-weight: normal;
+            line-height: normal;
+            letter-spacing: 0.08em;
+            color: #1E2226;
+          }
+
+          p {
+            width: 100%;
+            margin-top: 6px;
+            overflow: hidden;
+            -webkit-box-orient: vertical;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            text-align: left;
+            color: #8A9099;
+          }
+        }
+
+      }
+
+      .salesStatistics-main {
+        img {
+          width: 54px;
+          height: 54px;
+          margin-right: 12px;
+        }
+
+        .sales-item {
+          width: 25%;
+          justify-content: flex-start;
+          padding: 14px 12px;
+          transition: all .3s;
+          .number{
+            font-size: 22px;
+            font-weight: bold;
+            font-family: 'Roboto Condensed';
+            display: inline-block;
+            margin-right: 2px;
+            color: #1E2226;
+            line-height: 29px;
+          }
+          .unit{
+            color: #1E2226;
+            font-size: 12px;
+          }
+          .label{
+            color: #8A9099;
+            letter-spacing: 0.08em;
+          }
+          &:hover {
+            border-radius: 8px;
+            background: #F6F7FA;
+          }
+        }
+      }
+
+      .supplyPrice-main {
+        display: flex;
+        gap: 20px;
+
+        .supplyPric-item {
+          padding: 20px 14px;
+          box-sizing: border-box;
+          color: #8A9099;
+          flex: 1;
+          border-radius: 4px;
+          transition: all .5s;
+          cursor: pointer;
+
+          .item-top {
+            border-bottom: 1px solid #EAECF0;
+            padding-bottom: 20px;
+
+            b {
+              color: #1E2226;
+            }
+
+            img {
+              width: 28px;
+              height: 28px;
+              margin-right: 12px;
+            }
+          }
+
+          .item-list {
+            margin-top: 16px;
+            text-align: left;
+            line-height: 18px;
+
+            p {
+              margin-bottom: 8px;
+
+              &:last-child {
+                margin-bottom: 0;
+              }
+            }
+
+            .item-list-name {
+              margin-bottom: 8px;
+              color: #1E2226;
+            }
+          }
+        }
+
+        .supplyPric-item1 {
+
+          background: linear-gradient(180deg, #F3F8FF 0%, #FFFFFF 17%, #FFFFFF 100%);
+          border: 1px solid #DFE2E6;
+          transition: all .5s ease;
+          
+          &:hover {
+            color: #626573;
+            transition: all .5s ease;
+            background: linear-gradient(180deg, #F3F8FF 0%, #FFFFFF 60%);
+            box-shadow: 0px 2px 14px 0px rgba(0, 0, 0, 0.13);
+          }
+        }
+
+        .supplyPric-item2 {
+          background: linear-gradient(180deg, #FFFAF6 1%, rgba(255, 255, 255, 0.6233) 14%);
+          border: 1px solid #DFE2E6;
+          transition: all .5s ease;
+
+          &:hover {
+            color: #626573;
+            transition: all .5s ease;
+            box-shadow: 0px 2px 14px 0px rgba(0, 0, 0, 0.13);
+            background: linear-gradient(180deg, #FFFAF6 0%, #FFFFFF 60%);
+          }
+        }
+
+        .supplyPric-item3 {
+          background: linear-gradient(180deg, #FFF6F6 0%, rgba(255, 255, 255, 0.8151) 14%, rgba(255, 255, 255, 0) 100%);
+          border: 1px solid #DFE2E6;
+          transition: all .5s ease;
+
+          &:hover {
+            color: #626573;
+            transition: all .5s ease;
+            box-shadow: 0px 2px 14px 0px rgba(0, 0, 0, 0.13);
+            background: linear-gradient(180deg, #FFF6F6 0%, #FFFFFF 60%);
+          }
+        }
+      }
+    }
+
+    .home-main-right {
+      flex: 0 0 auto;
+      /* 右边盒子不伸缩 */
+      min-width: 260px;
+      /* 右边盒子最小宽度 */
+      max-width: 328px;
+      /* 右边盒子最大宽度 */
+      width: 260px;
+
+      /* 在 1440px 屏幕下的固定宽度 */
+      .common-area {
+        padding: 20px 0px;
+        margin: 0 14px;
+        text-align: left;
+        font-size: 14px;
+        line-height: normal;
+        letter-spacing: 0.08em;
+
+        /* text/text_1 */
+        h2 {
+          font-weight: bold;
+          margin: 0;
+          font-size: 16px;
+          color: #1E2226;
+
+          span {
+            font-size: 14px;
+            color: #8A9099;
+            font-weight: normal;
+          }
+        }
+      }
+
+      .accountBalance {
+        padding: 27px 14px;
+        margin: 0;
+        margin-bottom: 12px;
+        align-items: baseline;
+        background: #fff;
+
+        b {
+          font-family: Roboto Condensed;
+          font-size: 32px;
+          font-weight: bold;
+          line-height: 27px;
+          letter-spacing: normal;
+          color: #1F2026;
+        }
+
+        span {
+          font-size: 14px;
+          font-weight: normal;
+          // color: #8A9099;
+          color: #1F2026;
+          &:nth-last-child(1){
+            color: #8A9099;
+          }
+
+        }
+      }
+
+      .importantReminder {
+        border-bottom: 1px solid #EAECF0;
+
+        .reminder1,
+        .reminder2 {
+          border-radius: 4px;
+          background: linear-gradient(271deg, #F8DCDC 0%, #FCEEEE 60%);
+          padding: 14px 8px;
+          border: 1px solid transparent;
+          margin-top: 20px;
+          transition: all .3s;
+
+          &:hover {
+            transition: all .3s;
+            border-radius: 4px;
+            background: linear-gradient(271deg, #F8DCDC 0%, #FCEEEE 60%);
+            /* main/main_erro */
+            border: 1px solid #FF4D4F;
+          }
+
+          div {
+            display: flex;
+            justify-content: flex-end;
+            color: #FF4D4F;
+            margin-top: 10px;
+            width: 100%;
+          }
+        }
+      }
+
+      .carouselImage {
+        padding-bottom: 0;
+
+        img {
+          width: 100%;
+        }
+      }
+
+      .preferredMarket {
+        border-bottom: 1px solid #EAECF0;
+
+        h2 {
+          margin-bottom: 20px;
+        }
+
+        .sales-item {
+          padding: 12px 0;
+          color: #8A9099;
+          font-size: 12px;
+          transition: all .3s ease-in-out;
+
+          .systemIcon {
+            display: none;
+            width: 12px;
+            height: 8px;
+            margin-left: 12px;
+          }
+
+          span {
+            font-size: 14px;
+            color: #1F2026;
+            margin-bottom: 6px;
+          }
+
+          &:hover {
+            .systemIcon {
+              display: block;
+            }
+            
+            span {
+              transition: all .3s ease-in-out;
+              color: #006AFF;
+            }
+          }
+        }
+
+        img {
+          width: 34px;
+          height: 34px;
+          margin-right: 10px;
+        }
+      }
+
+      .customWrap {
+        h2 {
+          margin-bottom: 20px;
+        }
+
+        img {
+          /* 自动布局子元素 */
+          width: 106px;
+          height: 106px;
+          z-index: 0;
+        }
+      }
+
+      .usageGuide {
+        border-bottom: 1px solid #EAECF0;
+
+        h2 {
+          margin-bottom: 20px;
+        }
+
+        p {
+          margin-bottom: 10px;
+
+          &:last-child {
+            margin-bottom: 0;
+          }
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 1440px) {
+  .home-main-right {
+    transition: all .3s;
+    width: 286px !important;
+    /* 在 1440px 屏幕下的固定宽度 */
+  }
+}
+
+@media screen and (max-width: 1200px) {
+  .home-main-right {
+    transition: all .3s;
+    width: 260px !important;
+    /* 在 1440px 屏幕下的固定宽度 */
+  }
+}
+
+@media screen and (min-width: 1441px) {
+  .home-main-right {
+    transition: all .3s;
+    width: 328px !important;
+    /* 在大于 1440px 屏幕下的最大宽度 */
+  }
+}
+</style>