选择范围

2022-08-31 17:05:17 +08:00
parent 5d4c349863
commit 0e1533ffb0
4 changed files with 162 additions and 25 deletions
--- a/src/project/saas/AppCooperationPropaganda/scopedSelect.vue
+++ b/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>