mall-web-ssr/components/mobile/base/BaseFilter.vue

<template>
  <div class="mobile-base-filter">
    <span class="title inline-block">{{title}}：</span>
    <div class="inline-block content">
        <span class="item inline-block" v-for="item in selectItems" @click.stop="setSelect(item)">
          <label class="mobile-cart-check" :class="{active: val === item.val}"></label>
          {{item.key}}
        </span>
    </div>
    <div class="date-wrap" v-if="selectOption === 'date' && val === 4">
      <label>
        <i class="iconfont icon-ico-date"></i>
        <input type="date" v-model="dateObj.fromDate" @change="setDate('fromDate')">
        <p v-if="dateObj.fromDate">{{dateObj.fromDate | date}}</p>
      </label>
      <span>—</span>
      <label>
        <i class="iconfont icon-ico-date"></i>
        <input type="date" v-model="dateObj.toDate" @change="setDate('toDate')">
        <p v-if="dateObj.toDate">{{dateObj.toDate | date}}</p>
      </label>
    </div>
    <remind-box :title="remindText" :timeoutCount="timeoutCount"></remind-box>
  </div>
</template>
<script>
  import { RemindBox } from '~components/mobile/common'
  export default {
    props: {
      // 筛选标题
      title: {
        type: String,
        default: '标题'
      },
      // 筛选条件
      selectItems: {
        type: Array,
        default: function () {
          return []
        }
      },
      // 默认选择
      defaultVal: {
        default: 0
      },
      // 选择属性值
      selectOption: {
        type: String,
        default: 'defaultKey'
      }
    },
    data () {
      return {
        val: 0,
        dateObj: {
          fromDate: null,
          toDate: null
        },
        remindText: '',
        timeoutCount: ''
      }
    },
    components: {
      RemindBox
    },
    watch: {
      val: {
        handler: function (val) {
          if (val) {
            this.val = val
          }
        },
        immediate: true
      }
    },
    methods: {
      setRemindText: function (str) {
        this.remindText = str
        this.timeoutCount++
      },
      setSelect (item) {
        this.val = item.val
        if (this.selectOption === 'date' && item.val === 4) {
          return
        }
        this.$emit('selectAction', {
          key: this.selectOption,
          value: this.selectOption === 'date' ? this.getDateObj(item.val) : item.val
        })
      },
      /*
      * 通过勾选获取时间
      * @val: 0 => 全部
      *       1 => 最近一个月
      *       2 => 最近三个月
      *       3 => 最近六个月
      * */
      getDateObj (val) {
        let dateObj = null
        // 当天0点时间戳
        let currentTime = this.baseUtils.getClearDay(new Date())
        if (val === 1) { // 一个月
          dateObj = {
            fromDate: currentTime - 30 * 24 * 60 * 60 * 1000,
            toDate: currentTime
          }
        } else if (val === 2) { // 三个月
          dateObj = {
            fromDate: currentTime - 3 * 30 * 24 * 60 * 60 * 1000,
            toDate: currentTime
          }
        } else if (val === 3) { // 六个月
          dateObj = {
            fromDate: currentTime - 6 * 30 * 24 * 60 * 60 * 1000,
            toDate: currentTime
          }
        }
        return dateObj
      },
      setDate (type) {
        if (this.dateObj[type]) {
          this.dateObj[type] = new Date(this.dateObj[type]).getTime() - 8 * 60 * 60 * 1000
          if (this.dateObj.fromDate && this.dateObj.toDate && this.dateObj.fromDate > this.dateObj.toDate) {
            if (type === 'fromDate') {
              this.setRemindText('起始时间不能大于结束时间')
            } else {
              this.setRemindText('结束时间不能小于起始时间')
            }
            this.dateObj[type] = null
          } else {
            if (this.dateObj.fromDate && this.dateObj.toDate && this.dateObj.fromDate === this.dateObj.toDate) {
              // 23:59:59
              this.dateObj.toDate += 23 * 60 * 60 * 1000 + 59 * 60 * 1000 + 59 * 1000
            }
          }
        } else {
          this.dateObj[type] = null
        }
        this.$emit('selectAction', {
          key: 'date',
          value: this.dateObj
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  $base-color: #3f84f6;
  .mobile-base-filter {
    line-height: .5rem;
    .title {
      vertical-align: top;
      width: 21%;
    }
    .content {
      width: 79%;
      .item {
        width: 33%;
        color: $base-color;
      }
    }
    .date-wrap {
      text-align: center;
      label {
        width: 2.6rem;
        height: .5rem;
        line-height: .5rem;
        border-radius: .04rem;
        border: 1px solid #bfbfbf;
        background: url(/images/mobile/select-arrow.png) no-repeat;
        background-size: .12rem .06rem;
        vertical-align: middle;
        background-color: #fff;
        background-position: 2.1rem .2rem;
        position: relative;
        margin: .2rem 0 0 0;
        input {
          opacity: 0;
          width: 2.22rem;
          height: .5rem;
          position: absolute;
          left: 0;
          z-index: 1;
        }
        i {
          font-size: .28rem;
          color: $base-color;
          margin-left: .2rem;
          float: left;
        }
      }
      p {
        font-weight: normal;
        font-size: .22rem;
        padding-right: .4rem;
      }
      span {
        color: #a0a0a0;
        margin: 0 .4rem;
        vertical-align: bottom;
        width: .5rem;
        display: inline-block;
        text-align: center;
      }
    }
  }
</style>