供货列表

src/router/index.js

@@ -52,6 +52,16 @@ const routes = [{
     }
   },
   {
+    path: '/agent/supplyList',
+    name: '首页',
+    component: () => import( /* webpackChunkName: "register" */ '../views/agent/supplyList.vue'),
+    isFirst: true, //是否属于一级路由
+    meta: {
+      title: '首页', //面包屑名称（此页面确认不需要放置在面包屑可以不添加此属性；如果获取不到title 会自动 获取 name 作为面包屑名称）
+      hideBreadcrumb: true // 是否隐藏面包屑
+    }
+  },
+  {
     path: '/register',
     name: 'register',
     // this generates a separate chunk (about.[hash].js) for this route

src/views/agent/home.vue

@@ -57,18 +57,18 @@
         <div class="supplyPrice common-area">
           <h2>供货价格 </h2>
           <div class="supplyPrice-main flex">
-            <div :class="['supplyPric-item', 'supplyPric-item' + classification_id]" v-for="(classification_name, classification_id) in serviceClassifications" :key="classification_id">
+            <div :class="['supplyPric-item', 'supplyPric-item' + classify_id]" v-for="(vers, classify_id) in classifyId2Vers" :key="classify_id">
               <div class="item-top flex-between">
                 <div class="flex">
-                  <img :src="require(`@/assets/home/service_classification_${classification_id}.png`)" alt="">
+                  <img :src="require(`@/assets/home/service_classification_${classify_id}.png`)" alt="">
-                  <b>{{ classification_name }}</b>
+                  <b>{{ classifyId2Name[classify_id] }}</b>
                 </div>
                 <a href="/agent/supplyList" target="_blank"><span>详情</span></a>
               </div>
               <div class="list-wrap" style="overflow: auto;height:410px">
-                <div v-for="(veritem, key) in serviceClassificationServices[classification_id]" :key="key" class="item-list">
+                <div v-for="verid in vers" :key="verid" class="item-list">
-                  <p class="item-list-name">{{ veritem.name }}</p>
+                  <p class="item-list-name" v-if="ver2types[verid] && ver2types[verid].length>1">{{ ver2info[verid].name }}</p>
-                  <p class="flex-between" v-for="(type, index3) in veritem.types" :key="index3">
+                  <p class="flex-between" v-for="type in ver2types[verid]" :key="type">
                     {{ type2name[type] }}
                     <span>{{ supplyPriceList[type].price }}元 / {{ supplyPriceList[type].unit_format }}</span>
                   </p>
@@ -158,8 +158,10 @@ export default {
       // 表格加载
       tableLoading: true,
       type2name:[],
-      serviceClassifications: [],
+      classifyId2Name: [],
-      serviceClassificationServices: [],
+      classifyId2Vers: [],
+      ver2types: [],
+      ver2info: [],
       supplyPriceList: [],
       serviceList: [],
 
@@ -231,9 +233,11 @@ export default {
             this.tableLoading = false
             this.$nextTick(() => {
                 that.serviceList = response.data.list
+                this.classifyId2Name = response.data.classifyid2name;
+                this.classifyId2Vers = response.data.classifyid2vers;
+                this.ver2types = response.data.ver2types;
+                this.ver2info = response.data.ver2info;
                 this.type2name = response.data.type2name;
-                this.serviceClassifications = response.data.service_classification;
-                this.serviceClassificationServices = response.data.service_classification_services;
                 this.supplyPriceList = response.data.supply_price;
             })
         }).catch(error => {

src/views/agent/supplyList.vue

@@ -3,25 +3,54 @@
 
         <PromptText text='平台针对不同品牌产品，已做了风险提醒义务，请安全规避销售。平台仅保障货品正版，针对有风险的产品，请具备安全销售方案后再开展销售。' :type="3" />
 
-        <!-- page header -->
+        <div class="supply-list" v-for="(vers, classify_id) in classifyId2Vers" :key="classify_id">
-        <div class="pageheader">
+            <div class="classify">
-            <span class="pagetitle">基本设置</span>
+                <span class="classify-title mr-20">{{ classifyId2Name[classify_id] }}</span>
+                
+                <div class="ver-anchor-point flex mr-12" v-for="verid in vers" :key="verid">
+                    <a class="flex anchor" href="javascript:;" @click="scrollToAnchor(verid)">
+                        <img class="ver-icon" :src="require('@/assets/serviceIcon/ver_'+verid+'.svg')" alt="" style="width:20px"><span>{{ ver2info[verid].name }}</span>
+                    </a>
+                </div>
+                
             </div>
 
-        <!-- page content -->
+            <div class="ver-wrap" v-for="verid in vers" :key="verid" :id="'ver_'+verid">
-        <div class="site-setting-wrap min-flex-right">
+                <div class="ver">
-            <div class="siteMessage flex-common" id="siteMessage1">
+                    <div class="ver-title-wrap">
-                <h3>站点信息</h3>
+                        <img class="ver-icon mr-8" :src="require('@/assets/serviceIcon/ver_'+verid+'.svg')" alt="">
+                        <span class="ver-title mr-8">{{ ver2info[verid].name }}</span>
+                        <div class="status-item divgreen mr-8" v-if="ver2info[verid].is_official_api==1"><span class="fontgreen">官方接口</span></div>
+                        <div class="status-item divblue" v-if="ver2info[verid].sale_policy==1"><span class="fontblue">{{ salePolicy[ver2info[verid].sale_policy] }}</span></div>
+                        <div class="status-item divorange" v-else-if="ver2info[verid].sale_policy==2"><span class="fontorange">{{ salePolicy[ver2info[verid].sale_policy] }}</span></div>
+                        <div class="status-item divred" v-if="ver2info[verid].sale_policy==3"><span class="fontred">{{ salePolicy[ver2info[verid].sale_policy] }}</span></div>
+                    </div>
+                    <div class="ver-desc flex"  v-if="ver2types[verid] && ver2types[verid].length>1">{{ ver2info[verid].desc }}</div>
+                    <div class="ver-services-wrap" v-if="ver2types[verid] && ver2types[verid].length>1">
+                        <div class="ver-service" v-for="type in ver2types[verid]" :key="type">
+                            <div class="service-title">{{ type2name[type] }}</div>
+                            <div class="service-desc">
                                 <el-form>
-                    <div class="flex-wrap">
+                                    <GuipToolTip :content="type2info[type].introduce">
-                        <div class="flex-left">
+                                    <span>{{ type2info[type].introduce }}</span>
+                                    </GuipToolTip>
+                                </el-form>
                             </div>
-                        <div class="flex-line"></div>
+                            <div class="service-price">￥<span class="price">{{ supplyPriceList[type].price }}</span><span class="unit"> / {{ supplyPriceList[type].unit_format }}</span></div>
-                        <div class="flex-right">
                         </div>
                     </div>
+                    <div class="ver-single flex" v-else>
+                        <div class="ver-single-desc">
+                            <el-form>
+                                <GuipToolTip :content="ver2info[verid].desc">
+                                <span>{{ ver2info[verid].desc }}</span>
+                                </GuipToolTip>
                             </el-form>
                         </div>
+                        <div class="service-price">￥<span class="price">{{ supplyPriceList[ver2types[verid][0]].price }}</span><span class="unit"> / {{ supplyPriceList[ver2types[verid][0]].unit_format }}</span></div>
+                    </div>
+                </div>
+            </div>
         </div>
     </div>
 </template>
@@ -30,6 +59,7 @@
 import store from '@/store';
 import { mapState } from 'vuex';
 import PromptText from '@/components/PromptText.vue';
+import GuipToolTip from '@/components/GuipToolTip.vue';
 
 export default {
     // 站点设置
@@ -37,17 +67,20 @@ export default {
     props: [''],
     components: {
         PromptText,
+        GuipToolTip,
     },
     data() {
         return {
             // AUTH
             token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3NTI2NDY1NDUsIm5iZiI6MTc1MjY0NjU0NSwiZXhwIjoxNzU1MjM4NTQ1LCJ1c2VyIjoic3VidXNlciIsImxvZ2luX3R5cGUiOjAsImFpZCI6IjEifQ.G-Is-x9qPMiV_urOlDPQVRjfAIozySxL5EK2k82d46k',
-            // 表格加载
-            tableLoading: true,
             type2name:[],
-            serviceClassifications: [],
+            classifyId2Name: [],
-            serviceClassificationServices: [],
+            classifyId2Vers: [],
+            ver2types: [],
+            ver2info: [],
+            type2info: [],
             supplyPriceList: [],
+            salePolicy: [],
         }
     },
     computed: {
@@ -60,17 +93,18 @@ export default {
     mounted() {
         store.commit('SET_PAGETITLE', '基本设置');
 
-        this.getSiteInfo();
+        this.getSupplyServiceList();
-        this.getPayList();
-        this.getAddablePays();
     },
     methods: {
-        // 获取可添加的收款方式
+        scrollToAnchor(ver) {
+            this.$nextTick(() => {
+            const element = document.getElementById('ver_'+ver);
+            if (element) {
+                element.scrollIntoView({ behavior: 'smooth' });
+            }
+            });
+        },
         getSupplyServiceList() {
-
-            this.tableLoading = true
-            const that = this
-            that.serviceList = []
         this.$http('POST', '/agentnew/ajax_get_supply_services', {
 
         },{
@@ -78,15 +112,15 @@ export default {
                 'Auth': this.token
             }
         }).then(response => {
-                this.tableLoading = false
             this.$nextTick(() => {
-                    that.serviceList = response.data.list
+                this.classifyId2Name = response.data.classifyid2name;
+                this.classifyId2Vers = response.data.classifyid2vers;
+                this.ver2types = response.data.ver2types;
+                this.ver2info = response.data.ver2info;
                 this.type2name = response.data.type2name;
-                    this.serviceClassifications = response.data.service_classification;
+                this.type2info = response.data.type2info;
-                    this.serviceClassificationServices = response.data.service_classification_services;
                 this.supplyPriceList = response.data.supply_price;
-                    console.log(this.supplyPriceList[2].price)
+                this.salePolicy = response.data.sale_policy;
-                    console.log(this.supplyPriceList[2].unit_format)
             })
         }).catch(error => {
             console.error(error, 'error')
@@ -100,129 +134,318 @@ export default {
     padding: 20px 48px;
 }
 
-.pageheader {
+.classify {
     display: flex;
-    justify-content: space-between;
+    margin-bottom: 20px;
-    /* 关键属性 */
+    margin-top: 20px;
-    align-items: center;
+}
-    margin: 16px 0px 16px 0px;
+
+.classify-title {
+    font-family: Microsoft YaHei UI;
+    font-size: 20px;
+    font-weight: bold;
+    line-height: 26px;
+    letter-spacing: 0.08em;
+    color: #1E2226;
 }
 
-.pagetitle {
+.ver-wrap {
+    width: 100%;
+    /* 自动布局 */
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    z-index: 0;
+    background: #FFFFFF;
+    margin-bottom: 10px;
+}
+.ver {
+    padding: 20px;
+}
+.ver-title-wrap {
+    height: 30px;
+    /* 自动布局 */
+    display: flex;
+    justify-content: space-flex-start;
+    align-items: center;
+    padding: 0px;
+    align-self: stretch;
+    z-index: 0;
+}
+.ver-title {
+    /* body/body 1_bold */
+    font-family: Microsoft YaHei UI;
     font-size: 16px;
     font-weight: bold;
     line-height: normal;
+    text-align: justify; /* 浏览器可能不支持 */
     letter-spacing: 0.08em;
+    /* text/text_1 */
     color: #1E2226;
-    margin-top: 8px;
 }
 
-.siteMessage {
+.ver-icon {
-    border-radius: 4px;
+    height: 30px;
-    transition: all .5s;
+    width: 30px;
-    border: 1px solid transparent;
 }
-.combo-formItem {
-    ::v-deep {
-        .form-item-bottom {
-            position: relative;
-        }
 
-        .select-trigger {
+.ver-anchor-point {
-            background: #F6F7FA;
+    /* 自动布局子元素 */
-            border-color: transparent;
+    height: 28px;
-        }
+    /* 自动布局 */
-
+    display: flex;
-        .is-open .select-trigger {
-            border-color: #006AFF;
-        }
-
-        .el-input__inner {
-            border-radius: 2px 0 0 2px;
-        }
-    }
-    .self-drop-wrap {
-        position: absolute;
-        z-index: 1;
-        width: 100%;
-    }
-    .appendDrop {
-        height: 38px;
     align-items: center;
-        border-radius: 0 2px 2px 0;
+    padding: 4px 10px;
-        border: 1px solid #DFE2E6;
+    gap: 4px;
-        border-left-color: transparent;
+    z-index: 0;
-        justify-content: center;
+    border-radius: 100px;
+    /* text/text_white_1 */
+    background: #FFFFFF;
     box-sizing: border-box;
-        padding: 0 30px 0 12px;
+    /* main/main_stardard */
-        text-overflow: ellipsis;
+}
-        white-space: nowrap;
+.ver-anchor-point:hover {
-        overflow: hidden;
-        &:hover {
     border: 1px solid #006AFF;
-        }
-    }
 }
-.addStore {
+.anchor {
-    margin-top: 12px;
+    text-decoration: none;
-    // border-radius: 4px;
+    /* body/body 2_regular */
-    // opacity: 1;
+    font-family: Microsoft YaHei UI;
-    // /* text/text_white_2 */
+    font-size: 14px;
-    // border: 1px dashed #BABDC2;
+    font-weight: normal;
-    // padding: 15px 20px;
+    line-height: normal;
-    // color: #626573;
+    text-align: justify; /* 浏览器可能不支持 */
-    // justify-content: center;
+    letter-spacing: 0.08em;
+    /* text/text_4 */
+    color: #8A9099;
+}
 
-    // img {
+.ver-desc {
-    //     margin-right: 12px;
+    /* body/body 2_regular */
-    // }
+    font-family: Microsoft YaHei UI;
+    font-size: 14px;
+    font-weight: normal;
+    line-height: normal;
+    text-align: justify; /* 浏览器可能不支持 */
+    letter-spacing: 0.08em;
+    color: #8A8C99;
+    margin-top: 10px;
+    margin-bottom: 20px;
 }
 
+.ver-single {
+    font-family: Microsoft YaHei UI;
+    font-size: 14px;
+    font-weight: normal;
+    line-height: normal;
+    //text-align: justify; /* 浏览器可能不支持 */
+    letter-spacing: 0.08em;
+    color: #8A8C99;
+    margin-top: 10px;
+}
+
+.ver-single-desc {
+    font-family: Microsoft YaHei UI;
+    font-size: 14px;
+    font-weight: normal;
+    line-height: normal;
+    text-align: justify; /* 浏览器可能不支持 */
+    letter-spacing: 0.08em;
+    color: #8A8C99;
+    width: 600px;
+    height: 18px;
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
 
-.site-setting-wrap {
+.ver-services-wrap {
     width: 100%;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
+    justify-items: flex-start;
+    gap: 14px 14px;
 
-    .siteMessage5_desc {
+    padding: 0px;
+}
+
+.ver-service {
+    width: 270px;
     border-radius: 4px;
-        /* middle/middle_blue_1 */
+    background: #FFFFFF;
+    box-sizing: border-box;
+    /* middle/middle_line_1 */
+    border: 1px solid #DFE2E6;
+    padding: 14px 10px;
+    display: flex;
+    flex-direction: column;
+}
+
+.service-title {
+    /* body/body 2_regular */
+    font-family: Microsoft YaHei UI;
+    font-size: 14px;
+    font-weight: normal;
+    line-height: normal;
+    text-align: justify; /* 浏览器可能不支持 */
+    letter-spacing: 0.08em;
+    /* text/text_1 */
+    color: #1E2226;
+    height: 18px;
+}
+
+.service-desc {
+    font-family: Microsoft YaHei UI;
+    font-size: 12px;
+    font-weight: normal;
+    line-height: 17px;
+    text-align: justify; /* 浏览器可能不支持 */
+    letter-spacing: 0.03em;
+    /* text/text_4 */
+    color: #8A9099;
+    margin-top: 14px;
+    margin-bottom: 14px;
+    flex: 1;
+    height:34px;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.service-price {
+    /* 自动布局子元素 */
+    height: 20px;
+    /* 自动布局 */
+    display: flex;
+    align-items: flex-end;
+    padding: 0px;
+    gap: 2px;
+    z-index: 1;
+}
+.price {
+    font-family: Microsoft YaHei UI;
+    font-size: 20px;
+    font-weight: normal;
+    line-height: 20px;
+    text-align: center;
+    letter-spacing: normal;
+    /* text/text_1 */
+    color: #1E2226;
+}
+
+.unit {
+    font-family: Microsoft YaHei UI;
+    font-size: 12px;
+    font-weight: normal;
+    line-height: 16px;
+    text-align: right;
+    letter-spacing: 0.08em;
+    /* text/text_4 */
+    color: #8A9099;
+}
+
+.status-item {
+    height: 22px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 6px;
+    z-index: 0;
+    padding: 2px 10px;
+    border-radius: 4px;
+
+}
+
+.divgreen {
+    background: rgba(239, 255, 224, 0.5);
+    box-sizing: border-box;
+    border: 1px solid rgba(0, 194, 97, 0.6);
+}
+
+.fontgreen {
+    font-family: Microsoft YaHei UI;
+    font-size: 14px;
+    font-weight: normal;
+    line-height: normal;
+    text-align: center;
+    letter-spacing: 0.08em;
+    color: #0DAF49;
+}
+
+.divblue {
     background: #F2F7FF;
-        /* middle/middle_blue_3 */
+    box-sizing: border-box;
     border: 1px solid #BFDAFF;
-        padding: 8px 13px;
+}
-        margin-bottom: 32px;
 
-        img {
+.fontblue {
-            margin-right: 8px;
+    font-family: Microsoft YaHei UI;
-        }
+    font-size: 14px;
+    font-weight: normal;
+    line-height: normal;
+    text-align: center;
+    letter-spacing: 0.08em;
+    color: #006AFF;
+}
 
-    }
+.divred {
+    background: #FFF1F0;
+    box-sizing: border-box;
+    border: 1px solid #FFA39E;
 }
 
-#siteMessage2 {
+.fontred {
-    margin: 12px 0;
+    font-family: Microsoft YaHei UI;
+    font-size: 14px;
+    font-weight: normal;
+    line-height: normal;
+    text-align: center;
+    letter-spacing: 0.08em;
+    color: #FF4D4F;
 }
 
-.domain-wrap {
+.divgray {
-    .domain-item {
+    background: #F6F7FA;
-        margin-bottom: 10px;
+    box-sizing: border-box;
-    }
+    border: 1px solid #DFE2E6;
+}
 
+.fontgray {
+    color: #626573;
+}
 
-    .domain-item p:last-child {
+.divorange {
-        padding-left: 23px;
+    background: #FFFBF2;
-        color: #8A9099;
+    box-sizing: border-box;
-    }
+    border: 1px solid rgba(251, 131, 45, 0.38);
+}
 
-    p {
+.fontorange {
-        text-align: left;
+    color: #FB832D;
-        line-height: 18px;
+}
-        margin-bottom: 8px;
-    }
 
-    .domain-box {
+.divpurple {
-        display: flex;
+    background: #F9F2FF;
-        flex-direction: column;
+    box-sizing: border-box;
-        justify-content: flex-start;
+    border: 1px solid rgba(126, 118, 253, 0.28);
-    }
+}
+
+.fontpurple {
+    color: #6258FF;
+}
+
+.mr-8 {
+    margin-right: 8px;
+}
+.mr-12 {
+    margin-right: 12px;
+}
+.mr-20 {
+    margin-right: 20px;
 }
 </style>