kuailelunwen_new_houtai/src/views/agent/siteAddChooseService.vue

<template>
    <div class="">
        <div class="addService_wrap">
            <div class="addServicetop">
                    <h3 class="classify-title">添加查重服务</h3>
                    <b>选择品牌</b>
                    <p class="ver-desc">{{  }}</p>
                    <!-- 分类导航 -->
                    <el-scrollbar v-if="classifyId2Vers[prodid]">
                        <ul>
                            <li v-for="verid in classifyId2Vers[prodid]" :key="verid" @click="scrollToCategory(verid)"
                                :class="['normal_service', activeVerid == verid ? 'active_service' : '']">
                                <span class="flex">
                                    <img :src="require('@/assets/serviceIcon/ver_'+verid+'.svg')" alt="">
                                    {{ ver2info[verid].name }}
                                </span>
                                <img class="activeImg" src="@/assets/serviceIcon/activeImg_choose.svg" alt="">
                            </li>
                        </ul>
                    </el-scrollbar>
            </div>
            <!-- 内容 -->
            <div class="addServicebot" ref="content">
                <b>选择服务</b>
                <div class="flex operateCheck">
                    <div class="checkboxAll">
                        <el-checkbox :key="datenow" @change="handleSelectAllChange()"
                                     :checked="isAllSelected()"
                                     :indeterminate="isIndeterminate()">全选</el-checkbox>
                    </div>
                    <span class="totalCount">共{{ ver2types[activeVerid] ? ver2types[activeVerid].length : 0 }}条，已选{{ addlist[activeVerid] ? addlist[activeVerid].length : 0 }}条</span>
                </div>
                <ul :key="datenow" v-if="ver2types[activeVerid]">
                    <li v-for="type in ver2types[activeVerid]" :key="type"
                        :class="addlist[activeVerid].includes(type) ? 'service-active' : ''" @click="updateSelectedCount(type)" >
                        <div class="service-name-item flex-between">
                            <span>{{ type2name[type] }}</span>
                            <input type="checkbox" :id="`item-${type}`" :checked="addlist[activeVerid].includes(type)"/>
                        </div>
                        <p class="service-desc-item">{{ type2info[type].introduce }}</p>
                        <p class="service-price-item"><i>¥</i><span>{{ supplyPriceList[type].price }}</span> / {{ supplyPriceList[type].unit_format }}</p>
                    </li>
                </ul>
            </div>
        </div>
        <div class="bottom flex">
            <GuipButton type="system" size="page" @click="cancel">取消</GuipButton>
            <GuipButton type="primary" size="page" @click="nextGoSettingPrice">确定，去设置售价</GuipButton>
            <p>已选<b>{{ serviceTotal }}</b>项服务</p>
        </div>
    </div>
</template>
<script>
import store from '@/store';
import GuipButton from '@/components/GuipButton.vue';
export default {
    name: 'siteServiceAdd',
    props: [''],
    components: {
        GuipButton,
    },
    data() {
        return {
            uid: 0,
            type: 0,
            prodid: 0,

            activeVerid:0,
            addlist:[],
            selectAll: [],

            type2name:[],
            classifyId2Name: [],
            classifyId2Vers: [],
            ver2types: [],
            ver2info: [],
            type2info: [],
            supplyPriceList: [],
            salePolicy: [],

            // isIndeterminate: true,
            datenow:Date.now(),
            serviceTotal:0,

            menuList:null,

            serviceAddUrl: '/agent/siteServiceAdd',

        }
    },
    watch: {

    },
    created() {
        if (!this.$route.query.uid && !this.$route.query.prodid) {
            this.$message.error('非法请求');
            this.$router.go(-1)
        }
        this.uid = this.$route.query.uid
        this.prodid = this.$route.query.prodid
    },
    mounted() {
        store.commit('SET_PAGETITLE', '站点信息');
        this.getAddServiceList();
    },
    methods: {
        cancel(){
            this.$router.go(-1)
        },
        nextGoSettingPrice() {
            const result = {};
            Object.entries(this.addlist).forEach(([key, category]) => {
                if(category.length>0){
                    let list = []
                    category.forEach(type=>{
                        list.push({
                            type: type,
                            name: this.type2name[type],
                            parentType:key
                        })
                    })

                    result[key] = {
                        type: key,
                        name: this.ver2info[key].name,
                        list: list
                    };
                }
            });
            store.commit('SET_SECOND_MENU', result);
            this.$router.push(this.serviceAddUrl + '?uid=' + this.uid + '&prodid=' + this.prodid)
        },
        // 初始化请求
        getAddServiceList() {
            const that = this
            that.$http('POST', '/agentnew/ajax_get_service_add_list', {
                uid: that.uid,
                prodid: that.prodid,
            }).then(response => {
                that.$nextTick(() => {
                    that.classifyId2Name = response.data.classifyid2name;
                    that.classifyId2Vers = response.data.classifyid2vers;
                    that.ver2types = response.data.ver2types;
                    that.ver2info = response.data.ver2info;
                    that.type2name = response.data.type2name;
                    that.type2info = response.data.type2info;
                    that.supplyPriceList = response.data.supply_price;
                    that.salePolicy = response.data.sale_policy;

                    if(!that.classifyId2Vers[that.prodid]){
                        that.$message.error('非法请求');
                        that.$router.go(-1)
                    }

                    that.classifyId2Vers[that.prodid].forEach(verid => {
                        that.activeVerid = that.activeVerid ? that.activeVerid : verid;
                        that.addlist[verid] = [];
                    })
                })
            }).catch(error => {
                console.error(error, 'error')
            })
        },
        scrollToCategory(index) {
            this.activeVerid = index;
            this.datenow = Date.now()
        },
        updateSelectedCount(type) {
            if (this.addlist[this.activeVerid] && this.addlist[this.activeVerid].includes(type)) {
                this.addlist[this.activeVerid] = this.addlist[this.activeVerid].filter(item => item !== type);
                this.serviceTotal--
            } else {
                this.addlist[this.activeVerid].push(type);
                this.serviceTotal++
            }
            this.datenow = Date.now()
        },
        isAllSelected() {
            const selected = this.addlist[this.activeVerid] || [];
            const total = this.ver2types[this.activeVerid] || [];
            return selected.length > 0 && selected.length === total.length;
        },
        isIndeterminate() {
            const selected = this.addlist[this.activeVerid] || [];
            const total = this.ver2types[this.activeVerid] || [];
            return selected.length > 0 && selected.length < total.length;
        },
        handleSelectAllChange(){
            if (this.isAllSelected(this.activeVerid)) {
                // 全选 → 全不选
                this.$set(this.addlist, this.activeVerid, []);
            } else {
                // 全不选 → 全选
                const total = this.ver2types[this.activeVerid] || [];
                this.$set(this.addlist, this.activeVerid, [...total]);
            }

            this.serviceTotal = 0
            this.addlist.forEach(types=>{
                this.serviceTotal += types.length
            })
        },
        setMenuList(type, status) {
            this.addNum = 0
            Object.values(this.menuList).forEach((item) => {
                let ver_select = false
                item.list.forEach((item1) => {
                    item1.checked = false
                    if (item1.type === type) {
                        item1.is_select = status
                    }
                    if (item1.is_select === true) {
                        ver_select = true
                        this.addNum++
                    }
                })

                if (ver_select) item.is_select = true
            })
            this.serviceTotal = 0;
            this.scrollToCategory(this.activeVerid)
        },
    }
}
</script>
<style lang="scss">
.ver-desc{
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
    letter-spacing: .08em;
    color: #8a8c99;
    margin: 12px 0;
}
.operateCheck{
    margin: 24px 0 12px 0;
}
.totalCount {
    font-size: 12px;
    font-weight: normal;
    line-height: 13px;
    letter-spacing: 0.08em;
    color: #8A9099;
    margin-left: 12px;
}
.classify-title{
    font-size: 20px;
    font-weight: bold;
    line-height: 26px;
    letter-spacing: 0.08em;
    color: #1E2226;
}
.addService_wrap {
    text-align: left;
    background-color: #fff;
    padding: 36px;
    margin: 12px;

    .addServicetop {
        // display: flex;
        // justify-content: space-between;
        // align-items: center;
        // position: absolute;
        // top: 12px;
        // left: 24px;
        // width: 963.43px;

        b {
            font-size: 14px;
            font-weight: bold;
            letter-spacing: 0.08em;
            color: #1E2226;
        }

        ul {
            display: flex;
            padding-left: 0px;
            gap: 8px;

            li {
                cursor: pointer;
                list-style-type: none;
                display: flex;
                align-items: center;
                display: flex;
                white-space: nowrap;
                min-width: 181.71px;
                height: 46px;
                box-sizing: border-box;
            }

            .normal_service {
                letter-spacing: 0.08em;
                color: #23242B;
                border-radius: 6px;
                background: #F2F7FF;
                justify-content: space-between;
                padding: 14px 10px;
                img {
                    width: 30px;
                    height: 30px;
                    margin-right: 8px;
                }
                .activeImg{
                    width: 14px;
                    height: 14px;
                    display: none;
                }
            }

            .active_service {
                transition: all .3s;
                color: #fff;
                font-weight: bold;
                box-sizing: border-box;
                background: linear-gradient(285deg, #006AFF 4%, #4D97FF 92%);
                box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.16);
                .activeImg{
                    display: block;
                }
            }
        }
    }

    .addServicebot {
        overflow-y: auto;
        max-height: 380px;
        margin-top: 24px;

        ul {
            display: grid;
            grid-gap: 14px;
            grid-template-columns: repeat(auto-fit, 260px);
            padding-left: 0;
            margin: 20px 0 0;

            li {
                list-style-type: none;
                width: 260px;
                height: 126px;
                border-radius: 4px;
                opacity: 1;
                padding: 14px 10px;
                background: #FFFFFF;
                box-sizing: border-box;
                border: 1px solid #DFE2E6;
                cursor: pointer;
                transition: all .3s;
            }

            li:hover {
                background: #F6F7FA;
                transition: all .3s;
            }
        }

        .service-active {
            border: 1px solid #006AFF;
        }

        .service-desc {
            font-size: 14px;
            font-weight: normal;
            letter-spacing: 0.08em;
            font-variation-settings: "opsz" auto;
            color: #8A8C99;
            margin: 6px 0 8px;
        }

        .service-name-item {
            font-size: 14px;
            letter-spacing: 0.08em;
            color: #1E2226;
        }

        .service-desc-item {
            font-size: 12px;
            font-weight: normal;
            line-height: 17px;
            letter-spacing: 0.03em;
            font-variation-settings: "opsz" auto;
            color: #8A9099;
            margin: 14px 0 12px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            /* 注意：这不是一个标准的CSS属性，仅在WebKit浏览器中有效 */
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            height: 34px;
        }

        .service-price-item {
            font-size: 12px;
            line-height: 16px;
            letter-spacing: 0.08em;
            font-variation-settings: "opsz" auto;
            color: #8A9099;

            i {
                font-style: normal;
                color: #1E2226;

            }

            span {
                color: #1E2226;
                font-size: 20px;
                font-weight: normal;
                line-height: 20px;
            }
        }

        .category-section {
            padding: 20px;

            h3 {
                margin: 0;
                font-size: 16px;
                font-weight: normal;
                letter-spacing: 0.08em;
                color: #1E2226;

                img {
                    width: 30px;
                    height: 30px;
                    margin-right: 8px;
                }
            }
        }

    }
}

.bottom {
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 0;
    width: 100%;
    background: #fff;
    padding: 16px 44px;
    box-sizing: border-box;
    p {
        font-size: 14px;
        font-weight: normal;
        line-height: normal;
        text-align: center;
        letter-spacing: 0.08em;
        font-variation-settings: "opsz" auto;
        display: inline-block;
        margin-left: 24px;
    }
}
</style>