服务选择页优化

src/views/agent/siteAddChooseService.vue

@@ -6,40 +6,39 @@
                     <b>选择品牌</b>
                     <p class="ver-desc">{{  }}</p>
                     <!-- 分类导航 -->
-                     <!-- 暂时注释 修改时放开即可 -->
+                    <el-scrollbar v-if="classifyId2Vers[prodid]">
-                    <!-- <el-scrollbar v-if="menuList">
                         <ul>
-                            <li v-for="(item, index) in menuList" :key="item.name" @click="scrollToCategory(index)"
+                            <li v-for="verid in classifyId2Vers[prodid]" :key="verid" @click="scrollToCategory(verid)"
-                                :class="['normal_service', activeCategory == index ? 'active_service' : '']">
+                                :class="['normal_service', activeVerid == verid ? 'active_service' : '']">
                                 <span class="flex">
-                                    <img :src="require('@/assets/serviceIcon/ver_'+item.type+'.svg')" alt="">
+                                    <img :src="require('@/assets/serviceIcon/ver_'+verid+'.svg')" alt="">
-                                    {{ item.name }}
+                                    {{ ver2info[verid].name }}
                                 </span>
                                 <img class="activeImg" src="@/assets/serviceIcon/activeImg_choose.svg" alt="">
                             </li>
                         </ul>
-                    </el-scrollbar> -->
+                    </el-scrollbar>
             </div>
             <!-- 内容 -->
             <div class="addServicebot" ref="content">
                 <b>选择服务</b>
                 <div class="flex operateCheck">
                     <div class="checkboxAll">
-                        <el-checkbox @change="handleSelectAllChange" v-model="selectAll"
+                        <el-checkbox :key="datenow" @change="handleSelectAllChange()"
-                            :indeterminate="isIndeterminate">全选</el-checkbox>
+                                     :checked="isAllSelected()"
+                                     :indeterminate="isIndeterminate()">全选</el-checkbox>
                     </div>
-                    <span class="totalCount">共{{ addlist.length }}条，已选{{ serviceTotal }}条</span>
+                    <span class="totalCount">共{{ ver2types[activeVerid] ? ver2types[activeVerid].length : 0 }}条，已选{{ addlist[activeVerid] ? addlist[activeVerid].length : 0 }}条</span>
                 </div>
-                <ul :key="datenow" v-if="addlist.length > 0">
+                <ul :key="datenow" v-if="ver2types[activeVerid]">
-                    <li v-for="item in addlist" :key="item.name"
+                    <li v-for="type in ver2types[activeVerid]" :key="type"
-                        :class="item.checked ? 'service-active' : ''">
+                        :class="addlist[activeVerid].includes(type) ? 'service-active' : ''" @click="updateSelectedCount(type)" >
                         <div class="service-name-item flex-between">
-                            <span>{{ item.name }}</span>
+                            <span>{{ type2name[type] }}</span>
-                            <input type="checkbox" :id="`item-${item.id}`" v-model="item.checked"
+                            <input type="checkbox" :id="`item-${type}`" :checked="addlist[activeVerid].includes(type)"/>
-                                @change="updateSelectedCount" />
                         </div>
-                        <p class="service-desc-item">{{  }}</p>
+                        <p class="service-desc-item">{{ supplyPriceList[type].introduce }}</p>
-                        <p class="service-price-item"><i>¥</i><span>{{ item.price }}</span> / {{ item.word }}</p>
+                        <p class="service-price-item"><i>¥</i><span>{{ supplyPriceList[type].price }}</span> / {{ supplyPriceList[type].unit_format }}</p>
                     </li>
                 </ul>
             </div>
@@ -62,18 +61,29 @@ export default {
     },
     data() {
         return {
-            selectAll: false,
-            isIndeterminate: false,
-            datenow:Date.now(),
-            serviceTotal:0,
-            activeCategory:0,
             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,
-            addlist:[
 
-            ],
             serviceAddUrl: '/agent/siteServiceAdd',
 
         }
@@ -84,53 +94,35 @@ export default {
     created() {
         if (!this.$route.query.uid && !this.$route.query.prodid) {
             this.$message.error('非法请求');
-            this.$router.push('/agent/siteAdd')
+            this.$router.go(-1)
         }
         this.uid = this.$route.query.uid
         this.prodid = this.$route.query.prodid
-        // this.loadPddSDK()
     },
     mounted() {
         store.commit('SET_PAGETITLE', '站点信息');
         this.getAddServiceList();
     },
-    computed: {
-      // 计算选中的总数
-      selectedCount() {
-        const newaddlist = JSON.parse(JSON.stringify(this.addlist))
-        if(!newaddlist.length)return 0
-        let list = []
-        newaddlist.forEach(item => {
-            if (item.checked) {
-              list.push(item)
-            }
-        })
-        return list.length;
-      },
-    },
     methods: {
         cancel(){
             this.$router.go(-1)
         },
-        updateSelectedCount() {
-            this.serviceTotal = this.addlist.filter(item => item.checked).length;
-            this.$set(this.menuList[this.activeCategory],'list',this.addlist)
-            const allSelected = this.serviceTotal === this.addlist.length;
-            const noneSelected = this.serviceTotal === 0;
-            this.selectAll = allSelected;
-            this.isIndeterminate = !noneSelected && !allSelected;
-            this.datenow = Date.now()
-        },
         nextGoSettingPrice() {
             const result = {};
-            Object.entries(this.menuList).forEach(([key, category]) => {
+            Object.entries(this.addlist).forEach(([key, category]) => {
-                // 筛选出选中的子项
+                if(category.length>0){
-                const selectedList = category.list.filter(item => item.checked);
+                    let list = []
-                // 只有当分类被选中或有选中的子项时才添加到结果中
+                    category.forEach(type=>{
-                if (category.checked || selectedList.length > 0) {
+                        list.push({
+                            type: type,
+                            name: this.type2name[type],
+                        })
+                    })
+
                     result[key] = {
-                        ...category,
+                        type: key,
-                        list: selectedList
+                        name: this.ver2info[key].name,
+                        list: list
                     };
                 }
             });
@@ -146,16 +138,68 @@ export default {
                 prodid: that.prodid,
             }).then(response => {
                 that.$nextTick(() => {
-                    console.log(response,'response===');
+                    that.classifyId2Name = response.data.classifyid2name;
-                    // 暂时注释 数据格式改变渲染报错
+                    that.classifyId2Vers = response.data.classifyid2vers;
-                    // that.menuList = response.data
+                    that.ver2types = response.data.ver2types;
-                    // that.activeCategory = Object.keys(response.data)[0];
+                    that.ver2info = response.data.ver2info;
-                    // that.setMenuList()
+                    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) => {
@@ -174,23 +218,7 @@ export default {
                 if (ver_select) item.is_select = true
             })
             this.serviceTotal = 0;
-           this.scrollToCategory(this.activeCategory)
+            this.scrollToCategory(this.activeVerid)
-        },
-        scrollToCategory(index) {
-            this.activeCategory = index;
-            this.addlist = this.menuList[index]['list']
-            this.serviceTotal = this.addlist.filter(item => item.checked).length;
-            console.log(this.addlist,'addlist===');
-            // const element = this.$refs[`category-${index}`][0];
-            // element.scrollIntoView({ behavior: 'smooth' });
-        },
-        handleSelectAllChange(){
-            this.addlist.forEach(item =>{
-                if(item.checked == !this.selectAll){
-                    item.checked = !item.checked;
-                }
-            })
-            this.serviceTotal = this.addlist.filter(item => item.checked).length;
         },
     }
 }