增加服务选择全选逻辑

src/views/agent/siteAddChooseService.vue

@@ -2,9 +2,12 @@
     <div class="">
         <div class="addService_wrap">
             <div class="addServicetop">
-                    <h3>添加查重服务</h3>
+                    <h3 class="classify-title">添加查重服务</h3>
+                    <b>选择品牌</b>
+                    <p class="ver-desc">{{  }}</p>
                     <!-- 分类导航 -->
-                    <el-scrollbar>
+                     <!-- 暂时注释 修改时放开即可 -->
+                    <!-- <el-scrollbar v-if="menuList">
                         <ul>
                             <li v-for="(item, index) in menuList" :key="item.name" @click="scrollToCategory(index)"
                                 :class="['normal_service', activeCategory == index ? 'active_service' : '']">
@@ -15,11 +18,19 @@
                                 <img class="activeImg" src="@/assets/serviceIcon/activeImg_choose.svg" alt="">
                             </li>
                         </ul>
-                    </el-scrollbar>
+                    </el-scrollbar> -->
             </div>
             <!-- 内容 -->
             <div class="addServicebot" ref="content">
-                <ul :key="datenow">
+                <b>选择服务</b>
+                <div class="flex operateCheck">
+                    <div class="checkboxAll">
+                        <el-checkbox @change="handleSelectAllChange" v-model="selectAll"
+                            :indeterminate="isIndeterminate">全选</el-checkbox>
+                    </div>
+                    <span class="totalCount">共{{ addlist.length }}条，已选{{ serviceTotal }}条</span>
+                </div>
+                <ul :key="datenow" v-if="addlist.length > 0">
                     <li v-for="item in addlist" :key="item.name"
                         :class="item.checked ? 'service-active' : ''">
                         <div class="service-name-item flex-between">
@@ -27,7 +38,7 @@
                             <input type="checkbox" :id="`item-${item.id}`" v-model="item.checked"
                                 @change="updateSelectedCount" />
                         </div>
-                        <p class="service-desc-item">看见啊还是看见阿水</p>
+                        <p class="service-desc-item">{{  }}</p>
                         <p class="service-price-item"><i>¥</i><span>{{ item.price }}</span> / {{ item.word }}</p>
                     </li>
                 </ul>
@@ -51,14 +62,18 @@ export default {
     },
     data() {
         return {
+            selectAll: false,
+            isIndeterminate: false,
             datenow:Date.now(),
             serviceTotal:0,
             activeCategory:0,
             uid: 0,
             type: 0,
             prodid: 0,
-            menuList:[],
+            menuList:null,
-            addlist:[],
+            addlist:[
+              
+            ],
             serviceAddUrl: '/agent/siteServiceAdd',
 
         }
@@ -83,14 +98,13 @@ export default {
       // 计算选中的总数
       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)
             }
         })
-        console.log(list, 'list----', this.addlist);
-        // store.commit('SET_ADDSERVICELIST', list);
         return list.length;
       },
     },
@@ -101,6 +115,10 @@ export default {
         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() {
@@ -116,11 +134,11 @@ export default {
                     };
                 }
             });
-            // console.log(this.menuList,result,'result===筛选出来的数据');
             store.commit('SET_SECOND_MENU', result);
             localStorage.setItem('selectedServices',JSON.stringify(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', {
@@ -128,10 +146,11 @@ export default {
                 prodid: that.prodid,
             }).then(response => {
                 that.$nextTick(() => {
-                    that.menuList = response.data
+                    console.log(response,'response===');
-                    that.activeCategory = Object.keys(response.data)[0];
+                    // 暂时注释 数据格式改变渲染报错
-                    // store.commit('SET_SECOND_MENU', response.data);
+                    // that.menuList = response.data
-                    that.setMenuList()
+                    // that.activeCategory = Object.keys(response.data)[0];
+                    // that.setMenuList()
                 })
             }).catch(error => {
                 console.error(error, 'error')
@@ -165,10 +184,44 @@ export default {
             // 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;
+        },
     }
 }
 </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;
@@ -185,11 +238,9 @@ export default {
         // width: 963.43px;
 
         b {
-            font-size: 20px;
+            font-size: 14px;
             font-weight: bold;
-            line-height: 26px;
             letter-spacing: 0.08em;
-            font-variation-settings: "opsz" auto;
             color: #1E2226;
         }
 
@@ -206,6 +257,7 @@ export default {
                 display: flex;
                 white-space: nowrap;
                 min-width: 181.71px;
+                height: 46px;
                 box-sizing: border-box;
             }