选择范围

src/project/saas/AppCooperationPropaganda/sendScoped.vue

@@ -1,16 +1,22 @@
 <template>
   <div class="sendScoped">
-    <div class="item" v-for="(item,index) in checkList" :key="index" @click="checkBtn(item)">
-      <div>{{ item.name }}</div>
-      <div>
-        <icon type="success" size="16" v-if="item.checked"/>
-        <icon type="circle" size="18" v-else />
+    <div class="checkedBox">
+      <div class="item" v-for="(item,index) in checkList" :key="index" @click="checkBtn(item)">
+        <div class="left">
+          <icon type="success" size="18" v-if="item.checked"/>
+          <icon type="circle" size="18" v-else />
+          <div class="title">{{ item.name }}</div>
+        </div>
+        <div class="right" v-if="item.name != '全部居民群'">
+          <div v-if="item.name == '按部门选择' && deptSelect.length">已选择{{ 1 }}名成员</div>
+          <div v-if="item.name == '按网格选择' && girdSelect.length">已选择{{ 2 }}名成员</div>
+          <u-icon name="arrow-right" color="#CCD0D3"></u-icon>
+        </div>
       </div>
     </div>
 
     <div class="btn">
-      <div class="cancelBtn">取消</div>
-      <div class="submitBtn">确定</div>
+      <div class="submitBtn" @click="submit">确定</div>
     </div>
   </div>
 </template>
@@ -22,38 +28,59 @@ export default {
     return {
       value: '',
       checkList: [
-        { name: '全部居民群', checked: false },
+        { name: '全部居民群', checked: true },
         { name: '按部门选择', checked: false },
         { name: '按网格选择', checked: false }
       ],
-      checked: true
+      showContent: false,
+      type: '',
+      deptSelect: [],
+      girdSelect: [],
     }
   },
   methods: {
     checkBtn(e) {
-      // console.log(e);
       this.checkList.forEach(v=> v.checked = false)
       e.checked = true
+      if(e.name == '按部门选择' || e.name == '按网格选择') {
+        uni.navigateTo({url: `./scopedSelect?type=0`})
+      } else {
+        uni.navigateTo({url: `./scopedSelect?type=1`})
+      }
+    },
+    submit() {
+      uni.navigateBack()
     }
   },
   onLoad(o) {
-    console.log(o);
+    this.type = o.type;
     document.title = "选择发送范围"
   },
 }
 </script>
 <style lang="scss" scoped>
 .sendScoped {
-  background: #FFF;
-
-  .item {
-    display: flex;
-    justify-content: space-between;
-    border-bottom: 1px solid #DDD;
-    padding: 26px 32px;
+  .checkedBox {
+    background: #FFF;
+    padding: 0 32px;
     box-sizing: border-box;
-
+    .item {
+      display: flex;
+      justify-content: space-between;
+      border-bottom: 1px solid #DDD;
+      padding: 30px 0;
+      box-sizing: border-box;
+      .left,
+      .right {
+        display: flex;
+        align-items: center;
+        .title {
+          margin-left: 12px;
+        }
+      }
+    }
   }
+  
 
 
   .btn {
@@ -67,7 +94,6 @@ export default {
     padding: 24px 32px;
     box-sizing: border-box;
 
-    .cancelBtn,
     .submitBtn {
       flex: 1;
       height: 80px;
@@ -75,12 +101,8 @@ export default {
       text-align: center;
       border-radius: 8px;
       border: 2px solid #CCCCCC;
-    }
-    .submitBtn {
       background: #1365DD;
       color: #FFF;
-      margin-left: 16px;
-      border: none;
     }
   }
 }