kuailelunwen_new_houtai/src/views/agent/supplyList.vue

<template>
    <div class="page-container">

        <PromptText text='平台针对不同品牌产品，已做了风险提醒义务，请安全规避销售。平台仅保障货品正版，针对有风险的产品，请具备安全销售方案后再开展销售。' :type="3" />

        <div class="supply-list" v-for="(vers, classify_id) in classifyId2Vers" :key="classify_id">
            <div class="classify">
                <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>

            <div class="ver-wrap" v-for="verid in vers" :key="verid" :id="'ver_'+verid">
                <div class="ver">
                    <div class="ver-title-wrap">
                        <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>
                                    <GuipToolTip :content="type2info[type].introduce">
                                    <span>{{ type2info[type].introduce }}</span>
                                    </GuipToolTip>
                                </el-form>
                            </div>
                            <div class="service-price">￥<span class="price">{{ supplyPriceList[type].price }}</span><span class="unit"> / {{ supplyPriceList[type].unit_format }}</span></div>
                        </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>
<script>
// import GuipInput from '@/components/GuipInput.vue';
import store from '@/store';
import { mapState } from 'vuex';
import PromptText from '@/components/PromptText.vue';
import GuipToolTip from '@/components/GuipToolTip.vue';

export default {
    // 站点设置
    name: '',
    props: [''],
    components: {
        PromptText,
        GuipToolTip,
    },
    data() {
        return {
            type2name:[],
            classifyId2Name: [],
            classifyId2Vers: [],
            ver2types: [],
            ver2info: [],
            type2info: [],
            supplyPriceList: [],
            salePolicy: [],
        }
    },
    computed: {
        ...mapState(['pageTitle']) // 从Vuex映射showSidebar状态到组件的计算属性中
    },
    created() {
        store.commit('SET_CUSTOMIZE', true);
        store.commit('SET_SLIDER_MENU', 'siteSettingData');
    },
    mounted() {
        store.commit('SET_PAGETITLE', '基本设置');

        this.getSupplyServiceList();
    },
    methods: {
        scrollToAnchor(ver) {
            this.$nextTick(() => {
            const element = document.getElementById('ver_'+ver);
            if (element) {
                element.scrollIntoView({ behavior: 'smooth' });
            }
            });
        },
        getSupplyServiceList() {
        this.$http('POST', '/agentnew/ajax_get_supply_services', {

        }).then(response => {
            this.$nextTick(() => {
                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.type2info = response.data.type2info;
                this.supplyPriceList = response.data.supply_price;
                this.salePolicy = response.data.sale_policy;
            })
        }).catch(error => {
            console.error(error, 'error')
        })
    },
    }    
}
</script>
<style lang="scss" scoped>
.page-container {
    padding: 20px 48px;
}

.classify {
    display: flex;
    margin-bottom: 20px;
    margin-top: 20px;
}

.classify-title {
    font-family: Microsoft YaHei UI;
    font-size: 20px;
    font-weight: bold;
    line-height: 26px;
    letter-spacing: 0.08em;
    color: #1E2226;
}

.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;
}

.ver-icon {
    height: 30px;
    width: 30px;
}

.ver-anchor-point {
    /* 自动布局子元素 */
    height: 28px;
    /* 自动布局 */
    display: flex;
    align-items: center;
    padding: 4px 10px;
    gap: 4px;
    z-index: 0;
    border-radius: 100px;
    /* text/text_white_1 */
    background: #FFFFFF;
    box-sizing: border-box;
    /* main/main_stardard */
}
.ver-anchor-point:hover {
    border: 1px solid #006AFF;
}
.anchor {
    text-decoration: none;
    /* 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_4 */
    color: #8A9099;
}

.ver-desc {
    /* 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;
}

.ver-services-wrap {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    justify-items: flex-start;
    gap: 14px 14px;

    padding: 0px;
}

.ver-service {
    width: 270px;
    border-radius: 4px;
    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;
    box-sizing: border-box;
    border: 1px solid #BFDAFF;
}

.fontblue {
    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;
}

.fontred {
    font-family: Microsoft YaHei UI;
    font-size: 14px;
    font-weight: normal;
    line-height: normal;
    text-align: center;
    letter-spacing: 0.08em;
    color: #FF4D4F;
}

.divgray {
    background: #F6F7FA;
    box-sizing: border-box;
    border: 1px solid #DFE2E6;
}

.fontgray {
    color: #626573;
}

.divorange {
    background: #FFFBF2;
    box-sizing: border-box;
    border: 1px solid rgba(251, 131, 45, 0.38);
}

.fontorange {
    color: #FB832D;
}

.divpurple {
    background: #F9F2FF;
    box-sizing: border-box;
    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>