pad_spa/src/pages/customerMan/selectPop/index.vue

<template>
  <div>
    <div class="filterPop">
      <el-dialog
      top="130px"
        :visible.sync="visible"
        width="52.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() {
      // 重置data里的值
      Object.assign(this.$data, this.$options.data.call(this))
    },
    // 保存筛选条件
    save() {
      let selectList = []
      selectList.push(this.conditionList.customerKey)
      selectList.push(this.conditionList.couponKey)
      selectList.push(this.conditionList.cardKey)
      selectList.push(this.conditionList.latelyKey)
      console.log(selectList);
      this.$emit("update:visible", false);
    },
    // 关闭弹窗
    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);
    },
  },
  watch:{
    visible(newValue,oldValue){
      // 关闭打开弹框重置数据
      this.reset()
    }
  }
};
</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: 175px;
    }
  }
  // 筛选条件
  .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: 500px;
    margin-left: 300px;
    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: 350px;
    padding-left: 38px;
    padding-top: 0;
    color: #333;
    overflow-y: auto; // 设置滚动条
    padding-bottom: 60px;
  }
  .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>