选择范围

src/project/saas/AppCooperationPropaganda/addPropaganda.vue

@@ -101,7 +101,7 @@ export default {
 <style lang="scss" scoped>
 .addPropaganda {
   font-size: 32px !important;
-  padding-bottom: 120px;
+  padding-bottom: 140px;
   box-sizing: border-box;
   .task_name,
   .send_scope,

src/project/saas/AppCooperationPropaganda/scopedSelect.vue

@@ -0,0 +1,115 @@
+<template>
+  <div class="scopedSelect">
+    <div class="item">
+      <div>添加人</div>
+      <div @click="selectUser">
+        <span>请选择</span>
+        <u-icon name="arrow-right" color="#CCD0D3"></u-icon>
+      </div>
+    </div>
+    <div class="item">
+      <div>包含标签</div>
+      <div>
+        <span>请选择</span>
+        <u-icon name="arrow-right" color="#CCD0D3"></u-icon>
+      </div>
+    </div>
+    <div class="item">
+      <div>剔除标签</div>
+      <div>
+        <span>请选择</span>
+        <u-icon name="arrow-right" color="#CCD0D3"></u-icon>
+      </div>
+    </div>
+    <div class="item">
+      <div>添加时间</div>
+      <div @click="showCalendar = true">
+        <span v-if="!startTime.length && !endTime.length">请选择</span>
+        <span v-if="startTime.length && endTime.length">{{ startTime }} - {{ endTime }}</span>
+        <u-icon name="arrow-right" color="#CCD0D3"></u-icon>
+      </div>
+    </div>
+
+    <u-calendar v-model="showCalendar" mode="range" @change="selectDate"></u-calendar>
+
+
+    <div class="btn">
+      <div class="submitBtn" @click="submit">确定</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "scopedSelect",
+  data() {
+    return {
+      type: "",
+      showCalendar: false,
+      startTime: '',
+      endTime: ''
+    }
+  },
+  methods: {
+    // 选人
+    selectUser() {},
+
+    // 选包含标签
+    selectTags() {},
+
+    // 选剔除标签
+    deleteTags() {},
+
+    // 选时间范围
+    selectDate(e) {
+      console.log(e);
+      this.startTime = e.startDate
+      this.endTime = e.endDate
+    },
+    submit() {}
+  },
+  onLoad(o) {
+    this.type = o.type;
+    document.title = this.type == 0? '按部门选择':'按网格选择'
+  }
+
+}
+</script>
+
+<style lang="scss" scoped>
+.scopedSelect {
+  .item {
+    padding: 32px;
+    box-sizing: border-box;
+    background: #FFF;
+    display: flex;
+    justify-content: space-between;
+    box-shadow: inset 0px -1px 0px 0px #DDDDDD;
+    margin-bottom: 8px;
+  }
+
+
+  .btn {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    background: #FFF;
+    display: flex;
+    width: 100%;
+    height: 128px;
+    padding: 24px 32px;
+    box-sizing: border-box;
+
+    .submitBtn {
+      flex: 1;
+      height: 80px;
+      line-height: 80px;
+      text-align: center;
+      border-radius: 8px;
+      border: 2px solid #CCCCCC;
+      background: #1365DD;
+      color: #FFF;
+    }
+  }
+}
+</style>

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