宣发

src/project/saas/AppPropagandaStatistics/groupSendResident.vue

@@ -5,7 +5,7 @@
         <div class="searchBox">
           <u-search placeholder="请输入任务名称" v-model="name" :show-action="false"></u-search>
         </div>
-        <div class="filterBtn"><img src="./images/shaixuan.png" alt="">筛选</div>
+        <div class="filterBtn" @click="filterShow = true"><img src="./images/shaixuan.png" alt="">筛选</div>
       </div>
     </AiTopFixed>
     <div class="resident_list">
@@ -19,6 +19,57 @@
         <div>创建部门：<span>{{ item.createUserDept }}</span></div>
       </div>
     </div>
+    <u-popup v-model="filterShow" mode="bottom" border-radius="14">
+      <div class="popup">
+        <div class="tips"></div>
+        <div class="title">
+          <div
+            class="cancel"
+            @click.stop="(filterShow = false), (timeSelect = 0)"
+          >
+            取消
+          </div>
+          <p>筛选条件</p>
+          <div class="confirm" @click.stop="selectConfirm">确定</div>
+        </div>
+        <scroll-view class="select-content" scroll-y="true">
+          <div class="type-list">
+            <div class="type-title">创建人</div>
+            <!-- <div
+              class="item"
+              v-for="(item, index) in timeList"
+              :key="index"
+              :class="index == timeSelect ? 'active' : ''"
+              @click.stop="checkTime(index)">
+              {{ item }}
+            </div> -->
+          </div>
+          <div class="type-list">
+            <div class="type-title">群发时间</div>
+            <div class="item">
+              <div>开始时间</div>
+              <div style="display: flex;">
+                <u-input v-model="startTime" disabled placeholder="请选择开始时间" @click="showStart = true" />
+                <u-icon name="arrow-right"></u-icon>
+              </div>
+            </div>
+            <div class="item">
+              <div>结束时间</div>
+              <div style="display: flex;">
+                <u-input v-model="endTime" disabled placeholder="请选择开始时间" @click="showEnd = true" />
+                <u-icon name="arrow-right"></u-icon>
+              </div>
+            </div>
+          </div>
+        </scroll-view>
+        <u-picker mode="time" v-model="showStart" @confirm="confirmStart"></u-picker>
+        <u-picker mode="time" v-model="showEnd" @confirm="confirmEnd"></u-picker>
+        <div class="popBtn">
+          <div @click="reset">重置</div>
+          <div @click="selectConfirm">确认</div>
+        </div>
+      </div>
+    </u-popup>
   </div>
 </template>
 
@@ -29,6 +80,11 @@ export default {
       current: 1,
       name: '',
       list: [],
+      filterShow: false,
+      startTime: '',
+      endTime: '',
+      showStart: false,
+      showEnd: false,
     }
   },
   methods: {
@@ -39,7 +95,6 @@ export default {
       this.$http.post(`/app/appmasssendingtask/list`, null, {
         params: {
           current: this.current,
-
         }
       }).then(res=> {
         if(res?.data) {
@@ -47,14 +102,28 @@ export default {
         }
         console.log(res);
       })
-    }
+    },
+    filterBtn() {},
+    reset() {
+      this.startTime = '',
+      this.endTime = ''
+    },
+    selectConfirm() {},
+    confirmStart(val) {
+      this.startTime = val.year + '-' + val.month + '-' + val.day
+    },
+    confirmEnd(val) {
+      this.endTime = val.year + '-' + val.month + '-' + val.day
+    },
   },
   onShow() {
     document.title = '群发居民群'
+    this.current = 1
     this.getList()
   },
   onReachBottom() {
     this.current ++
+    this.getList()
   },
 }
 </script>
@@ -112,5 +181,94 @@ export default {
       }
     }
   }
+  .popup {
+    box-sizing: border-box;
+    // height: 800px;
+    .tips {
+      width: 80px;
+      height: 6px;
+      background: #dddddd;
+      border-radius: 4px;
+      padding: 0 32px;
+      box-sizing: border-box;
+      margin: 32px auto 8px auto;
+    }
+    .title {
+      height: 48px;
+      line-height: 48px;
+      font-size: 34px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #222;
+      padding: 0 32px;
+      box-sizing: border-box;
+      padding-bottom: 32px;
+      .cancel {
+        display: inline-block;
+        width: 200px;
+        color: #aaa;
+      }
+      .confirm {
+        display: inline-block;
+        width: 200px;
+        text-align: right;
+        color: #333;
+      }
+      p {
+        display: inline-block;
+        width: calc(100% - 400px);
+        text-align: center;
+        font-size: 28px;
+      }
+    }
+    .select-content {
+      height: calc(100% - 100px);
+      overflow-y: scroll;
+    }
+    .type-list {
+      padding: 0 32px;
+      box-sizing: border-box;
+      margin-bottom: 32px;
+      .type-title {
+        line-height: 108px;
+        font-size: 32px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #333;
+      }
+      .item {
+        display: flex;
+        justify-content: space-between;
+        & > div:last-child {
+          ::v-deep .uni-input-input,
+          ::v-deep .uni-input-placeholder {
+            text-align: right;
+          }
+        }
+      }
+      .active {
+        background: #1365dd;
+        color: #fff;
+      }
+    }
+    .popBtn {
+      display: flex;
+      height: 98px;
+      line-height: 98px;
+      div {
+        width: 50%;
+        border: 2px solid #3399ff;
+        text-align: center;
+      }
+      div:first-child {
+        color: #3399ff;
+      }
+      div:last-child {
+        color: #fff;
+        background: #3399ff;
+      }
+    }
+  }
+
 }
 </style>