付费用户管理页面完成

src/pages/customerMan/index.vue

@@ -7,6 +7,30 @@
       <el-button type="primary" class="searchButton" @click="getUserList()"
         >搜索</el-button
       >
+      <div class="silenceUser">
+        <div class="title">显示沉默付费用户</div>
+        <el-switch
+          v-model="silence"
+          active-color="#fa7d22"
+          inactive-color="#e7e7e7"
+        >
+        </el-switch>
+      </div>
+      <div class="faceUser">
+        <div class="title">显示未面诊付费用户</div>
+        <el-switch
+          v-model="face"
+          active-color="#fa7d22"
+          inactive-color="#e7e7e7"
+        >
+        </el-switch>
+      </div>
+      <div class="filter">
+        <div class="title">筛选</div>
+        <i @click="openFilterPop" class="el-icon-s-operation"></i>
+      </div>
+      <!-- 筛选条件弹窗 -->
+      <select-pop :visible.sync='dialogVisible'></select-pop>
     </div>
 
     <div class="user-list">
@@ -55,8 +79,9 @@
 
 <script>
 import api from "../../server/home";
+import selectPop from './selectPop/index.vue'
 export default {
-  components: {},
+  components: {selectPop},
   data() {
     return {
       searchText: "",
@@ -76,12 +101,19 @@ export default {
       currentPage1: 1,
       multipleSelection: "",
       total: 0,
+      face: false, //未面诊用户开关
+      silence: false, //沉默用户开关
+      dialogVisible:false // 控制筛选弹框
     };
   },
   computed: {},
   watch: {},
 
   methods: {
+    // 打开筛选条件弹框
+    openFilterPop() {
+      this.dialogVisible = true;
+    },
     // 获取订单列表
     getUserList() {
       let params = {
@@ -146,6 +178,35 @@ export default {
       border-radius: 2px;
       border-color: #fa7d22;
     }
+    .silenceUser {
+      display: flex;
+      margin-left: 53px;
+      align-items: center;
+      .title {
+        line-height: 40px;
+        margin-right: 16px;
+      }
+    }
+    .faceUser {
+      display: flex;
+      margin-left: 53px;
+      align-items: center;
+      .title {
+        line-height: 40px;
+        margin-right: 16px;
+      }
+    }
+    .filter {
+      display: flex;
+      align-items: center;
+      margin-left: 53px;
+      .title {
+        margin-right: 17px;
+      }
+      i {
+        font-size: 17px;
+      }
+    }
   }
   .user-list {
     margin-top: 18px;

src/pages/customerMan/selectPop/index.vue

@@ -0,0 +1,412 @@
+<template>
+  <div>
+    <div class="filterPop">
+      <el-dialog
+        :visible.sync="visible"
+        width="48.5%"
+        :close-on-click-modal="false"
+      >
+        <span slot="title" class="slot-title">
+          <i @click="closeFilterPop" class="el-icon-arrow-left"></i>
+          筛选条件
+        </span>
+        <div class="customer-source">
+          <div class="center">
+            <div class="item-title">{{ customerSource.name }}</div>
+            <div class="content">
+              <div
+                class="content-item"
+                :class="{
+                  activeFilter: index == customerSelect,
+                }"
+                v-for="(item, index) in customerSource.title"
+                :key="index"
+                @click="customerFilter(item, index)"
+              >
+                {{ item }}
+              </div>
+            </div>
+          </div>
+          <div class="center">
+            <div class="item-title">{{ couponSource.name }}</div>
+            <div class="content">
+              <div
+                class="content-item"
+                :class="{
+                  activeFilter: index == couponSelect,
+                }"
+                v-for="(item, index) in couponSource.title"
+                :key="index"
+                @click="couponFilter(item, index)"
+              >
+                {{ item }}
+              </div>
+            </div>
+          </div>
+          <div class="center">
+            <div class="item-title">{{ cardSource.name }}</div>
+            <div class="content">
+              <div
+                class="content-item"
+                :class="{
+                  activeFilter: index == cardSelect,
+                }"
+                v-for="(item, index) in cardSource.title"
+                :key="index"
+                @click="cardFilter(item, index)"
+              >
+                {{ item }}
+              </div>
+            </div>
+          </div>
+          <div class="center">
+            <div class="item-title">{{ latelySource.name }}</div>
+            <div class="content">
+              <div
+                class="content-item"
+                :class="{
+                  activeFilter: index == latelySelect,
+                }"
+                v-for="(item, index) in latelySource.title"
+                :key="index"
+                @click="latelyFilter(item, index)"
+              >
+                {{ item }}
+              </div>
+            </div>
+          </div>
+          <div class="superposition">
+            <div class="superposition-title">项目叠加次数</div>
+            <el-input-number
+              v-model="superpositionNum"
+              :min="0"
+              size="mini"
+            ></el-input-number>
+          </div>
+          <div class="transition">
+            <div class="transition-title">转换次数</div>
+            <el-input-number
+              v-model="transitionNum"
+              :min="0"
+              size="mini"
+            ></el-input-number>
+          </div>
+          <div class="consumePrice">
+            <div class="consumePrice-title">总消费金额</div>
+            <div class="consumePrice-content">
+              <el-input v-model="minConsumePrice"></el-input>
+              <div>-</div>
+              <el-input v-model="maxConsumePrice"></el-input>
+            </div>
+          </div>
+          <div class="StoredPrice">
+            <div class="StoredPrice-title">总储值金额</div>
+            <div class="StoredPrice-content">
+              <el-input v-model="minStoredPricePrice"></el-input>
+              <div>-</div>
+              <el-input v-model="maxStoredPricePrice"></el-input>
+            </div>
+          </div>
+        </div>
+        <div class="slot-footer" slot="footer">
+          <div class="item-title">共有<i>50</i>位用户</div>
+          <div>
+            <button @click="reset">重置</button>
+            <button @click="save">保存</button>
+          </div>
+        </div>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["visible"],
+  data() {
+    return {
+      customerSource: {
+        name: "客户来源",
+        title: [
+          "线下进店",
+          "种子用户",
+          "美团/大众",
+          "抖音",
+          "达人探店",
+          "霸王餐",
+          "老带新/转介绍",
+        ],
+      },
+      couponSource: {
+        name: "优惠券快过期付费用户",
+        title: ["3天", "5天", "7天", "15天"],
+      },
+
+      cardSource: {
+        name: "次卡快过期付费用户",
+        title: ["3天", "5天", "7天", "15天", "30天"],
+      },
+
+      latelySource: {
+        name: "距离最近消费时间",
+        title: ["3天", "5天", "7天", "15天", "15天以上"],
+      },
+      customerSelect: 99,
+      couponSelect: 99,
+      cardSelect: 99,
+      latelySelect: 99,
+      superpositionNum: 0, //项目叠加次数
+      transitionNum: 0, //转换次数
+      minConsumePrice: "", //消费最小金额
+      maxConsumePrice: "", //消费最大金额
+      minStoredPricePrice: "", //储值最小金额
+      maxStoredPricePrice: "", //储值最大金额
+      conditionList: {
+        customerKey: "",
+        couponKey: "",
+        cardKey: "",
+        latelyKey: "",
+      },
+    };
+  },
+  methods: {
+    // 重置筛选条件
+    reset() {},
+    // 保存筛选条件
+    save() {
+      console.log(this.conditionList);
+    },
+    // 关闭弹窗
+    closeFilterPop() {
+      this.$emit("update:visible", false);
+    },
+    // 选择
+    customerFilter(item, index) {
+      this.customerSelect = index;
+      this.$set(this.conditionList, "customerKey", item);
+    },
+    couponFilter(item, index) {
+      this.couponSelect = index;
+      this.$set(this.conditionList, "couponKey", item);
+    },
+    cardFilter(item, index) {
+      this.cardSelect = index;
+      this.$set(this.conditionList, "cardKey", item);
+    },
+    latelyFilter(item, index) {
+      this.latelySelect = index;
+      this.$set(this.conditionList, "latelyKey", item);
+    },
+  },
+};
+</script>
+
+<style lang='less' scoped>
+// 筛选弹窗
+.filterPop {
+  .slot-title {
+    display: inline-block;
+    font-size: 14px;
+    margin-top: 24px;
+    font-weight: 600;
+    i {
+      font-size: 24px;
+      color: #666666;
+      margin-left: 22px;
+      margin-right: 165px;
+    }
+  }
+  // 筛选条件
+  .customer-source {
+    .item-title {
+      font-size: 14px;
+      color: #333;
+      margin-top: 10px;
+      font-weight: 600;
+    }
+    .content {
+      margin-top: 10px;
+      display: flex;
+      width: 442px;
+      flex-wrap: wrap;
+      box-sizing: border-box;
+    }
+    .content-item {
+      font-size: 12px;
+      height: 24px;
+      padding: 3px 12px;
+      background-color: #f5f5f5;
+      line-height: 18px;
+      border-radius: 2px;
+      margin-left: 20px;
+      box-sizing: border-box;
+    }
+    .activeFilter {
+      border: 1px solid #fa7d22;
+      color: #fa7d22;
+    }
+    .content-item:first-child,
+    .content-item:nth-child(6) {
+      margin-left: 0;
+    }
+    .content-item:nth-child(n + 6) {
+      margin-top: 10px;
+    }
+    .superposition {
+      display: flex;
+      .superposition-title {
+        font-size: 14px;
+        color: #333;
+        margin-top: 14px;
+        font-weight: 600;
+        margin-right: 20px;
+      }
+      /deep/.el-input-number {
+        margin-top: 10px;
+      }
+      /deep/input.el-input__inner,
+      /deep/span.el-input-number__decrease.is-disabled,
+      /deep/span.el-input-number__increase,
+      /deep/span.el-input-number__decrease {
+        border: none;
+      }
+    }
+    .transition {
+      display: flex;
+      .transition-title {
+        font-size: 14px;
+        color: #333;
+        margin-top: 14px;
+        font-weight: 600;
+        margin-right: 20px;
+      }
+      /deep/.el-input-number {
+        margin-top: 10px;
+      }
+      /deep/input.el-input__inner,
+      /deep/span.el-input-number__decrease.is-disabled,
+      /deep/span.el-input-number__increase,
+      /deep/span.el-input-number__decrease {
+        border: none;
+      }
+    }
+    .consumePrice {
+      display: flex;
+      .consumePrice-title {
+        font-size: 14px;
+        color: #333;
+        margin-top: 14px;
+        font-weight: 600;
+        margin-right: 20px;
+      }
+      .consumePrice-content {
+        width: 134px;
+        height: 24px;
+        border: 1px solid #f5f5f5;
+        border-radius: 2px;
+        margin-top: 10px;
+        display: flex;
+        align-items: center;
+        div {
+          color: #999999;
+        }
+        /deep/input.el-input__inner {
+          height: 21px;
+          width: 60px;
+          border: none;
+          text-align: center;
+          font-size: 12px;
+          padding: 0;
+        }
+      }
+    }
+    .StoredPrice {
+      display: flex;
+      .StoredPrice-title {
+        font-size: 14px;
+        color: #333;
+        margin-top: 14px;
+        font-weight: 600;
+        margin-right: 20px;
+      }
+      .StoredPrice-content {
+        width: 134px;
+        height: 24px;
+        border: 1px solid #f5f5f5;
+        border-radius: 2px;
+        margin-top: 10px;
+        display: flex;
+        align-items: center;
+        div {
+          color: #999999;
+        }
+        /deep/input.el-input__inner {
+          height: 21px;
+          width: 60px;
+          border: none;
+          text-align: center;
+          font-size: 12px;
+          padding: 0;
+        }
+      }
+    }
+  }
+  /deep/.el-dialog {
+    border-radius: 8px;
+    height: 400px;
+    position: relative;
+  }
+  /deep/.el-dialog__header {
+    padding: 0;
+    padding-bottom: 30px;
+  }
+  /deep/button.el-dialog__headerbtn {
+    display: none;
+  }
+  /deep/.el-dialog__body {
+    overflow: hidden;
+    height: 250px;
+    padding-left: 38px;
+    padding-top: 0;
+    color: #333;
+    overflow-y: auto; // 设置滚动条
+  }
+  .slot-footer {
+    padding: 0;
+    border-radius: 0 0 8px 8px;
+    border-top: solid 1px #f5f5f5;
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: 80px;
+    background-color: #ffffff;
+    text-align: center;
+    z-index: 999;
+    .item-title {
+      margin-top: 10px;
+      font-size: 14px;
+      color: #333;
+      i {
+        color: #ff3007;
+      }
+    }
+    button {
+      margin-top: 10px;
+      width: 176px;
+      height: 28px;
+      border: 1px solid #fa7d22;
+      border-radius: 14px;
+      color: #fa7d22;
+      background-color: #fff;
+    }
+    button:last-child {
+      background-color: #fa7d22;
+      margin-left: 14px;
+      color: #fff;
+    }
+  }
+  /deep/.el-dialog__footer {
+    padding: 0;
+  }
+}
+</style>