首页供货列表滚动条

src/router/index.js

@@ -9,7 +9,7 @@ const whiteSecondSider = [
   '/agent/siteServiceAdd'
 ];
 const blackSliderList = [
-  '/register', '/agent/siteAdd', '/franchise','/agent/siteServiceList', '/agent/siteTemplate','/agent/siteServiceAdd'
+  '/register', '/agent/siteAdd', '/franchise','/agent/siteServiceList', '/agent/siteTemplate','/agent/siteServiceAdd', '/agent/supplyList'
 ];
 // 一级路由
 let first_child_router = []
@@ -52,6 +52,15 @@ const routes = [{
     }
   },
   {
+    path: '/agent/supplyList',
+    name: '供货列表',
+    component: () => import( /* webpackChunkName: "siteList" */ '../views/agent/supplyList.vue'),
+    // meta: {
+    //   title: '站点设置',
+    //   breadcrumbParent: '站点列表' // 手动指定父级
+    // }
+  },
+  {
     path: '/register',
     name: 'register',
     // this generates a separate chunk (about.[hash].js) for this route

src/views/agent/home.vue

@@ -36,15 +36,15 @@
         <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="['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>
-                <a href="/supplyList" target="_blank"><span>详情</span></a>
+                <a href="/agent/supplyList" target="_blank"><span>详情</span></a>
               </div>
-              <div class="list-wrap">
+              <div class="list-wrap" style="overflow: auto;height:410px" v-infinite-scroll="load">
                 <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">

src/views/agent/supplyList.vue

@@ -0,0 +1,228 @@
+<template>
+    <div class="page-container">
+
+        <PromptText text='平台针对不同品牌产品，已做了风险提醒义务，请安全规避销售。平台仅保障货品正版，针对有风险的产品，请具备安全销售方案后再开展销售。' :type="3" />
+
+        <!-- page header -->
+        <div class="pageheader">
+            <span class="pagetitle">基本设置</span>
+        </div>
+
+        <!-- page content -->
+        <div class="site-setting-wrap min-flex-right">
+            <div class="siteMessage flex-common" id="siteMessage1">
+                <h3>站点信息</h3>
+                <el-form>
+                    <div class="flex-wrap">
+                        <div class="flex-left">
+                        </div>
+                        <div class="flex-line"></div>
+                        <div class="flex-right">
+                        </div>
+                    </div>
+                </el-form>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+// import GuipInput from '@/components/GuipInput.vue';
+import store from '@/store';
+import { mapState } from 'vuex';
+import PromptText from '@/components/PromptText.vue';
+
+export default {
+    // 站点设置
+    name: '',
+    props: [''],
+    components: {
+        PromptText,
+    },
+    data() {
+        return {
+            // AUTH
+            token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3NTAwNTM3MjQsIm5iZiI6MTc1MDA1MzcyNCwiZXhwIjoxNzUyNjQ1NzI0LCJ1c2VyIjoic3VidXNlciIsImxvZ2luX3R5cGUiOjAsImFpZCI6IjEifQ.xyIqBLelB-k6jCifgRevBJTyg_Qrm6m1e4OcHhOpepU',
+            // 表格加载
+            tableLoading: true,
+            type2name:[],
+            serviceClassifications: [],
+            serviceClassificationServices: [],
+            supplyPriceList: [],
+        }
+    },
+    computed: {
+        ...mapState(['pageTitle']) // 从Vuex映射showSidebar状态到组件的计算属性中
+    },
+    created() {
+        store.commit('SET_CUSTOMIZE', true);
+        store.commit('SET_SLIDER_MENU', 'siteSettingData');
+    },
+    mounted() {
+        store.commit('SET_PAGETITLE', '基本设置');
+
+        this.getSiteInfo();
+        this.getPayList();
+        this.getAddablePays();
+    },
+    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')
+            })
+        },
+    }    
+}
+</script>
+<style lang="scss" scoped>
+.page-container {
+    padding: 20px 48px;
+}
+
+.pageheader {
+    display: flex;
+    justify-content: space-between;
+    /* 关键属性 */
+    align-items: center;
+    margin: 16px 0px 16px 0px;
+}
+
+.pagetitle {
+    font-size: 16px;
+    font-weight: bold;
+    line-height: normal;
+    letter-spacing: 0.08em;
+    color: #1E2226;
+    margin-top: 8px;
+}
+
+.siteMessage {
+    border-radius: 4px;
+    transition: all .5s;
+    border: 1px solid transparent;
+}
+.combo-formItem {
+    ::v-deep {
+        .form-item-bottom {
+            position: relative;
+        }
+
+        .select-trigger {
+            background: #F6F7FA;
+            border-color: transparent;
+        }
+
+        .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;
+        border: 1px solid #DFE2E6;
+        border-left-color: transparent;
+        justify-content: center;
+        box-sizing: border-box;
+        padding: 0 30px 0 12px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+        &:hover {
+            border: 1px solid #006AFF;
+        }
+    }
+}
+.addStore {
+    margin-top: 12px;
+    // border-radius: 4px;
+    // opacity: 1;
+    // /* text/text_white_2 */
+    // border: 1px dashed #BABDC2;
+    // padding: 15px 20px;
+    // color: #626573;
+    // justify-content: center;
+
+    // img {
+    //     margin-right: 12px;
+    // }
+}
+
+
+.site-setting-wrap {
+    width: 100%;
+
+    .siteMessage5_desc {
+        border-radius: 4px;
+        /* middle/middle_blue_1 */
+        background: #F2F7FF;
+        /* middle/middle_blue_3 */
+        border: 1px solid #BFDAFF;
+        padding: 8px 13px;
+        margin-bottom: 32px;
+
+        img {
+            margin-right: 8px;
+        }
+
+    }
+}
+
+#siteMessage2 {
+    margin: 12px 0;
+}
+
+.domain-wrap {
+    .domain-item {
+        margin-bottom: 10px;
+    }
+
+
+    .domain-item p:last-child {
+        padding-left: 23px;
+        color: #8A9099;
+    }
+
+    p {
+        text-align: left;
+        line-height: 18px;
+        margin-bottom: 8px;
+    }
+
+    .domain-box {
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+    }
+}
+</style>