storevisit-ui-mobile/src/components/filtrate.vue

<template>
  <div class="filtrate">
    <van-popup v-model="showFilter" position="bottom" class="textsize" @close="closePopup">
      <van-row
        style="
          width: 100%;
          z-index: 998;
          background-color: #fff;
          border-bottom: 1px solid #ccc;
          height: 50px;
        ">
        <van-col span="3" style="text-align: center; margin: 14px 0" @click="closePopup(false)">
          <van-icon name="cross" size="20" color="#909399" />
        </van-col>
        <van-col span="13"> </van-col>
        <van-col span="4" style="text-align: center; line-height: 36px" @click="onConfirm">
          <div style="color: #0057ba">
            <van-button type="info" size="small" color="#0057ba">筛选</van-button>
          </div></van-col
        >
        <van-col span="4" style="text-align: center; line-height: 36px" @click="onsets">
          <van-button type="default" size="small" style="height: 28px">重置</van-button>
        </van-col>
      </van-row>
      <div class="searchcheck" @touchmove="handleTouch">
        <p class="searchchecktitle">&nbsp;经销商</p>
        <van-row>
          <van-col span="24">
            <div @click="moreTypeShowFn">
              <van-field
                style="
                  margin-top: -6px;
                  border-radius: 6px;
                  border: 1px solid #ccc;
                  overflow: hidden;
                "
                readonly
                v-model="chainName"
                label=""
                placeholder="请选择经销商" />
            </div>
          </van-col>
        </van-row>
        <p class="searchchecktitle" @click="otherbqShow = !otherbqShow">
          &nbsp;门店标签<van-icon name="arrow-down" style="float: right" />
        </p>
        <van-checkbox-group v-model="storeLabelTypes" direction="horizontal">
          <div v-if="otherbqShow" style="width: 100%">
            <div class="checkbox" v-for="(item, index) in storeLabelsRegular" :key="index">
              <van-checkbox :name="item.dictValue">{{ item.dictLabel }}</van-checkbox>
            </div>
            <div style="height: 2px; background-color: #f5f5f5; width: 100%; clear: both"></div>
          </div>
        </van-checkbox-group>
        <p class="searchchecktitle" @click="otherjpdShow = !otherjpdShow">
          &nbsp;门店等级<van-icon name="arrow-down" style="float: right" />
        </p>
        <van-checkbox-group v-model="jpdStoreLevelTypes" direction="horizontal">
          <div v-if="otherjpdShow" style="width: 100%">
            <div class="checkbox" v-for="(item, index) in jpdStoreLevels" :key="'jpd' + index">
              <van-checkbox :name="item.dictValue">{{ item.dictLabel }}</van-checkbox>
            </div>
            <div style="height: 2px; background-color: #f5f5f5; width: 100%; clear: both"></div>
          </div>
        </van-checkbox-group>
        <van-checkbox-group v-model="result" direction="horizontal">
          <p class="searchchecktitle" @click="otherkkdShow = !otherkkdShow">
            &nbsp;可控店<van-icon name="arrow-down" style="float: right" />
          </p>
          <div v-if="otherkkdShow">
            <div v-for="(item, index) in storeTypeLists" :key="index" class="checkbox1">
              <div v-if="item.groupType == 'kkd'" class="child">
                <van-checkbox :name="item.dictValue">{{ item.dictLabel }}</van-checkbox>
              </div>
            </div>
          </div>
          <div style="height: 2px; background-color: #f5f5f5; width: 100%; clear: both"></div>
          <p class="searchchecktitle" @click="otherfxdShow = !otherfxdShow">
            &nbsp;分销店<van-icon name="arrow-down" style="float: right" />
          </p>
          <div v-if="otherfxdShow" style="margin: 0 14px; width: 100%">
            <div style="height: 2px; background-color: #f5f5f5; width: 100%; clear: both"></div>
            <p class="searchchecktitle1" @click="otherfxdShow1 = !otherfxdShow1">
              金牌店<van-icon name="arrow-down" style="float: right" />
            </p>
            <div v-if="otherfxdShow1">
              <div v-for="(item1, index1) in storeTypeLists" :key="200 + index1" class="checkbox1">
                <div v-if="item1.groupType == 'fxd' && item1.remark == 'jp'" class="child">
                  <van-checkbox :name="item1.dictValue">{{ item1.dictLabel }}</van-checkbox>
                </div>
              </div>
              <div style="height: 2px; background-color: #f5f5f5; width: 100%; clear: both"></div>
            </div>
            <p class="searchchecktitle1" @click="otherfxdShow2 = !otherfxdShow2">
              同城分销店<van-icon name="arrow-down" style="float: right" />
            </p>
            <div v-if="otherfxdShow2">
              <div
                v-for="(itemlj, indexlj) in storeTypeLists"
                :key="400 + indexlj"
                class="checkbox1">
                <div v-if="itemlj.groupType == 'fxd' && itemlj.remark == 'tcfx'" class="child">
                  <van-checkbox :name="itemlj.dictValue">{{ itemlj.dictLabel }}</van-checkbox>
                </div>
              </div>
              <div style="clear: both"></div>
            </div>
          </div>
          <div style="height: 2px; background-color: #f5f5f5; width: 100%; clear: both"></div>
          <template v-if="postType != 'GZ' && postType != 'JZ'">
            <p class="searchchecktitle" @click="isCompetingStores = !isCompetingStores">
              &nbsp;潜在客户<van-icon name="arrow-down" style="float: right" />
            </p>
            <div v-if="isCompetingStores" style="width: 100%">
              <div class="checkbox1" v-for="(item, index) in storeTypeLists" :key="index">
                <div v-if="item.groupType == 'qzd'" class="child">
                  <van-checkbox :name="item.dictValue">{{ item.dictLabel }}</van-checkbox>
                </div>
              </div>
              <div style="height: 2px; background-color: #f5f5f5; width: 100%; clear: both"></div>
            </div>
            <div style="height: 2px; background-color: #f5f5f5; width: 100%; clear: both"></div>
          </template>
          <p class="searchchecktitle" @click="otherShow = !otherShow">
            &nbsp;其他 <van-icon name="arrow-down" style="float: right" />
          </p>
          <div v-if="otherShow">
            <div v-for="(item2, index2) in storeTypeLists" :key="100 + index2" class="checkbox1">
              <div v-if="item2.groupType == 'other'" class="child">
                <van-checkbox :name="item2.dictValue">{{ item2.dictLabel }}</van-checkbox>
              </div>
            </div>
          </div>
        </van-checkbox-group>
      </div>
    </van-popup>
    <van-popup v-model="moreTypeShow" position="bottom" style="height: 80%">
      <van-row style="background-color: #f5f5f5">
        <van-col span="20">
          <van-field
            left-icon="search"
            style="margin-top: 2px; border-radius: 6px; overflow: hidden"
            v-model="CustomerName"
            label=""
            placeholder="请输入关键词"
            clearable />
        </van-col>
        <van-col span="4" style="text-align: center; line-height: 48px" @click="getCustomer">
          <div style="background-color: #0057ba; color: #fff">搜索</div></van-col
        >
      </van-row>
      <van-picker
        show-toolbar
        :columns="chainsData"
        value-key="chainName"
        @confirm="onConfirmChainsList"
        @cancel="moreTypeShow = false"
        visible-item-count="10" />
    </van-popup>
  </div>
</template>
<script>
import { getCustomerList, getStoreLabels, getStoreTypeListlp, buryingPoint } from '@/api/index';
export default {
  name: 'filtrate',
  props: {
    showFilter: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    showFilter: {
      handler(val) {
        if (val) {
          this.storeName = localStorage.getItem('outvstoreName') || '';
          this.chainName = localStorage.getItem('outvchainName') || '';
          this.chainCode = localStorage.getItem('outvchainCode') || '';
          this.storeLabelTypes = (localStorage.getItem('outvstoreLabelTypes') || '')
            .split(',')
            .filter(Boolean);
          this.jpdStoreLevelTypes = (localStorage.getItem('outvjpdStoreLevelTypes') || '')
            .split(',')
            .filter(Boolean);
          this.result = (localStorage.getItem('outvstoreCategoryList') || '')
            .split(',')
            .filter(Boolean);
        }
      },
      deep: true,
      immediate: true,
    },
  },
  data() {
    return {
      CustomerName: '',
      storeCategoryList: '',
      storeLabelTypes: [],
      chainName: '',
      chainCode: '',
      chainsData: [],
      moreTypeShow: false,
      otherShow: false,
      otherbqShow: true,
      StoreLabels: [],
      storeLabelsRegular: [],
      jpdStoreLevels: [],
      jpdStoreLevelTypes: [],
      otherjpdShow: true,
      result: [],
      otherkkdShow: true,
      storeTypeLists: [],
      otherfxdShow: true,
      otherfxdShow1: true,
      otherfxdShow2: true,
      isCompetingStores: true,
      postType: '',
    };
  },
  activated() {
    this.postType = localStorage.getItem('postType');
    if (this.postType == 'GZ') {
      this.otherShow = true;
    } else {
      this.otherShow = false;
    }
  },
  created() {
    this.storeName = localStorage.getItem('outvstoreName') || '';
    this.chainName = localStorage.getItem('outvchainName') || '';
    this.chainCode = localStorage.getItem('outvchainCode') || '';
    this.storeLabelTypes = (localStorage.getItem('outvstoreLabelTypes') || '')
      .split(',')
      .filter(Boolean);
    this.jpdStoreLevelTypes = (localStorage.getItem('outvjpdStoreLevelTypes') || '')
      .split(',')
      .filter(Boolean);
    this.result = (localStorage.getItem('outvstoreCategoryList') || '').split(',').filter(Boolean);
  },
  mounted() {
    this.getStoreLabels();
    this.getStoreTypeList();
  },
  methods: {
    closePopup(flag = false) {
      // flag 是否筛选列表
      let params = {};
      if (flag) {
        var storeLabelTypes = this.storeLabelTypes.concat(this.jpdStoreLevelTypes);
        params = {
          chainCode: this.chainCode ? this.chainCode : '',
          storeLabelTypes: storeLabelTypes.join(','),
          storeCategoryList: this.storeCategoryList,
        };
      }
      this.$emit('closePopup', flag, params);
    },
    handleTouch(e) {
      e._isScroller = true;
    },
    onsets() {
      localStorage.setItem('outvstoreName', '');
      localStorage.setItem('outvchainName', '');
      localStorage.removeItem('outvstoreLabelTypes');
      localStorage.removeItem('outvjpdStoreLevelTypes');
      localStorage.removeItem('outvstoreCategoryList');
      localStorage.setItem('outvchainCode', '');
      localStorage.setItem('lat', '');
      localStorage.setItem('lon', '');
      this.result = [];
      this.storeLabelTypes = [];
      this.jpdStoreLevelTypes = [];
      this.storeCategoryList = this.result.join(',');
      this.chainName = '';
      this.chainCode = '';
      this.closePopup(true);
    },
    moreTypeShowFn() {
      this.moreTypeShow = true;
      this.getCustomer();
    },
    getCustomer() {
      getCustomerList({ name: this.CustomerName }).then((request) => {
        this.chainsData = request.data;
        this.chainsData.push({});
        this.chainsData.pop();
      });
    },
    onConfirm(value) {
      this.storeCategoryList = this.result.join(',');
      this.onSearchm();
    },
    onSearchm() {
      var StoreLabelsArr = [];
      for (var k = 0; k < this.storeLabelTypes.length; k++) {
        for (var k1 = 0; k1 < this.storeLabelsRegular.length; k1++) {
          if (this.storeLabelsRegular[k1].dictValue == this.storeLabelTypes[k]) {
            StoreLabelsArr.push(this.storeLabelsRegular[k1].dictLabel);
          }
        }
      }
      var jpdStoreLabelsArr = [];
      for (var k = 0; k < this.jpdStoreLevelTypes.length; k++) {
        for (var k1 = 0; k1 < this.jpdStoreLevels.length; k1++) {
          if (this.jpdStoreLevels[k1].dictValue == this.jpdStoreLevelTypes[k]) {
            jpdStoreLabelsArr.push(this.jpdStoreLevels[k1].dictLabel);
          }
        }
      }
      var storeCategoryList = [];
      for (var q = 0; q < this.result.length; q++) {
        for (var q1 = 0; q1 < this.storeTypeLists.length; q1++) {
          if (this.storeTypeLists[q1].dictValue == this.result[q]) {
            storeCategoryList.push(this.storeTypeLists[q1].dictLabel);
          }
        }
      }
      if (StoreLabelsArr.length > 0) {
        buryingPoint({
          systemModel: '计划内',
          buryingPointType: 1,
          buryingPointValue: StoreLabelsArr.join(','),
          buryingPointName: '标签',
          buryingPointPosition: '计划内',
        });
      }
      if (jpdStoreLabelsArr.length > 0) {
        buryingPoint({
          systemModel: '计划内',
          buryingPointType: 1,
          buryingPointValue: jpdStoreLabelsArr.join(','),
          buryingPointName: '金牌店等级',
          buryingPointPosition: '计划内',
        });
      }
      if (this.chainName != '' && this.chainName != 'null') {
        buryingPoint({
          systemModel: '计划内',
          buryingPointType: 1,
          buryingPointValue: this.chainName,
          buryingPointName: '经销商筛选',
          buryingPointPosition: '计划内',
        });
      }
      localStorage.setItem('outvstoreName', this.storeName);
      localStorage.setItem('outvchainName', this.chainName);
      localStorage.setItem('outvstoreLabelTypes', this.storeLabelTypes);
      localStorage.setItem('outvjpdStoreLevelTypes', this.jpdStoreLevelTypes);
      localStorage.setItem('outvstoreCategoryList', this.result);
      localStorage.setItem('outvchainCode', this.chainCode);
      this.closePopup(true);
    },
    onConfirmChainsList(value) {
      if (value.chainName != undefined) {
        this.chainName = value.chainName;
        this.chainCode = value.chainCode;
      }
      this.showPickerChainsList = false;
      this.moreTypeShow = false;
    },
    getStoreLabels() {
      getStoreLabels().then((res) => {
        this.StoreLabels = res.data || [];
        this.storeLabelsRegular = this.StoreLabels.filter((item) => item.ifJpdStoreLevel != '1');
        this.jpdStoreLevels = this.StoreLabels.filter((item) => item.ifJpdStoreLevel == '1');
      });
    },
    getStoreTypeList() {
      getStoreTypeListlp({}).then((res) => {
        this.storeTypeLists = res.data;
        this.storeTypeList = res.data;
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.filtrate {
  .textsize {
    font-size: 14px;
    /* overflow: hidden; */
    display: flex;
    flex-direction: column;
    .searchcheck {
      flex: 1;
      overflow-y: auto;
      margin-bottom: 50px;
    }
  }

  .searchcheck {
    padding: 0 10px 10px;
  }
  .searchcheck .van-checkbox {
    /*width: 44%;*/
    padding-bottom: 10px;
  }
  .searchcheck .checkbox {
    font-size: 14px;
    display: inline-block;
    width: 50%;
    line-height: 28px;
  }
  .searchcheck .checkbox .van-checkbox {
    margin-bottom: 2px;
  }
  .searchcheck .checkbox1 {
    font-size: 14px;
    float: left;
    line-height: 28px;
    width: 50%;
  }
  .searchcheck .checkbox1 .child {
    width: 100%;
  }
  .searchcheck {
    /* height: 93vh;
  overflow-y: auto; */
  }
  .searchchecktitle {
    width: 100%;
    margin: 20px 0;
    font-size: 16px;
    border-left: 3px solid #0057ba;
    line-height: 18px;
  }
}
</style>