storevisit-ui-mobile/src/views/storeManagement/index.vue

<template>
  <div class="bgcolor storeManagement">
    <div class="navBarTOP" style="background-color: #fff">
      <van-nav-bar class="navBar" title="客户信息" left-arrow @click-left="onClickLeft" />
      <!-- <van-row gutter="20" style="padding:0 16px;" v-if="addShow">
        <van-col span="12" v-if="addShow1">
          <van-button  type="info" size="small" style="background: #0057ba;border-color: #0057ba;width: 100%;border-radius: 5px;
          margin-top: 10px;" @click="onSelect('A')"><van-icon name="guide-o" />&nbsp;新增专卖店/金牌店</van-button>
        </van-col>
        <van-col span="12" >
          <van-button type="info" size="small" style="margin-top: 10px;background: #0057ba;border-color: #0057ba;width: 100%;border-radius: 5px;" @click="onSelect('B')"><van-icon name="guide-o" />&nbsp;{{addBTN}}</van-button>
        </van-col>
      </van-row> -->
      <div class="searchDiv">
        <van-search
          v-model="fromValue.storeName"
          show-action
          left-icon="search"
          placeholder="搜索名称/编号/地址">
          <template #action>
            <div @click="onSearch">搜索</div>
          </template>
        </van-search>
        <div class="selectFilter" v-if="tabVal == 1">
          <van-dropdown-menu :close-on-click-overlay="false">
            <van-dropdown-item :title="dropdownTitle" ref="dropdownItem" @open="dropdownOpen">
              <van-cell
                center
                :title="item.text"
                v-for="item in statusOption"
                @click.stop="dropdownItemClick(item)">
                <template #right-icon v-if="item.selectFlag">
                  <van-icon name="success" color="red" />
                </template>
              </van-cell>
              <div style="padding: 5px 16px">
                <van-button type="danger" block round @click="onConfirm"> 确认 </van-button>
              </div>
            </van-dropdown-item>
          </van-dropdown-menu>
        </div>
      </div>
      <van-tabs class="myTab" type="card" v-model="tabVal" color="#0057ba" @change="tabChange">
        <van-tab title="销售部" name="0" :disabled="disabled"></van-tab>
        <van-tab :title="title" name="1" :disabled="disabled"></van-tab>
      </van-tabs>
      <div class="lineGrey"></div>
    </div>
    <!-- <div v-if="!addShow" style="padding-top: 154px"></div> -->
    <!-- <div v-if="addShow" style="padding-top: 160px"></div> -->
    <div style="padding-top: 160px"></div>
    <!--        主体内容-->
    <div class="container">
      <van-list
        class="myList"
        v-model="loading"
        :finished="finished"
        finished-text="--已经到底了--"
        :immediate-check="false"
        @load="onLoad">
        <div class="cellcontent srore" v-for="(item, index) in list" :key="index">
          <van-cell>
            <div class="card">
              <div></div>
              <div class="title" style="padding-right: 74px">
                <span class="btn" :data-clipboard-text="item.storeCode">
                  <span>{{ item.storeName }}</span>
                  (<span style="color: #0057ba">{{ item.storeCode }}</span
                  >)
                  <van-icon
                    :name="paste"
                    color="#ee0a24"
                    size="20"
                    style="top: 6px; margin-left: 4px" />
                </span>
                <!-- validFlag: 0正常门店，1无效门店，2临时门店 -->
                <span
                  v-if="item.validFlag == 2"
                  style="
                    display: inline-block;
                    border-radius: 100px;
                    width: 20px;
                    text-align: center;
                    color: orange;
                    font-weight: normal;
                  "
                  >临</span
                >
                <!-- "approvalStatus": 1:已结案;0:未结案， -->
                <!-- "processApprovalStatus": 审批状态（0=未提交，1=已提交待审核，2=审批通过，3=审批拒绝） -->
                <template v-if="item.approvalStatus == 0 && item.validFlag == 0">
                  <span class="statusIcon submit" v-if="item.processApprovalStatus == 1"
                    >已提交</span
                  >
                  <span class="statusIcon noSubmit" v-if="item.processApprovalStatus == 0"
                    >未提交</span
                  >
                </template>
              </div>
              <van-button
                type="info"
                size="small"
                plain
                class="centerBtn ctns"
                @click="storeDetailFn(item.storeId)"
                >客户信息<van-icon name="arrow"
              /></van-button>
              <div class="info" style="position: relative">
                联系人：{{ item.contactName }}
                <div style="position: absolute; bottom: 0px; right: 0px" v-if="item.storeLabels">
                  <el-popover popper-class="zpover zpover6" placement="bottom" trigger="click">
                    <div>
                      <p>
                        本店{{ timeData }}下单SKU数：<a
                          @click="linkList(item)"
                          style="text-decoration: underline"
                          >点击查看详情</a
                        >
                      </p>
                    </div>
                    <div
                      class="visitStoreIco"
                      v-if="item.storeLabels.zysslNums"
                      style="background-color: #fff; position: relative"
                      slot="reference">
                      <p
                        style="
                          width: 100%;
                          position: absolute;
                          z-index: 1;
                          top: 0.2px;
                          width: 22px;
                          margin: 0;
                          margin-left: 3.6px;
                          text-align: center;
                          font-size: 12px;
                        ">
                        {{ item.storeLabels.zysslNums }}
                      </p>
                      <van-icon :name="ord" size="26" />
                    </div>
                  </el-popover>
                  <el-popover
                    popper-class="zpover zpover5"
                    placement="bottom"
                    width="200"
                    trigger="click">
                    <div v-if="item.storeLabels">
                      <p>已参加:</p>
                      <p v-for="tt in (item.storeLabels.targetOne + '').split(';')">{{ tt }}</p>
                    </div>
                    <div
                      class="visitStoreIco"
                      v-if="item.storeLabels.targetOne"
                      style="background-color: #fff"
                      slot="reference">
                      <van-icon :name="targetOne" size="26" />
                    </div>
                  </el-popover>
                  <el-popover
                    popper-class="zpover"
                    placement="bottom"
                    width="200"
                    trigger="click"
                    content="同城店近60天未下单">
                    <div
                      v-if="item.storeLabels.fxNoOrder"
                      class="visitStoreIco"
                      style="background-color: #fff"
                      slot="reference">
                      <van-icon :name="order60" size="26" />
                    </div>
                  </el-popover>
                  <el-popover
                    popper-class="zpover"
                    placement="bottom"
                    width="200"
                    trigger="click"
                    content="金牌店近30天未下单">
                    <div
                      v-if="item.storeLabels.noOrder"
                      class="visitStoreIco"
                      style="background-color: #fff"
                      slot="reference">
                      <van-icon :name="order" size="26" />
                    </div>
                  </el-popover>
                  <el-popover
                    popper-class="zpover"
                    placement="bottom"
                    width="200"
                    trigger="click"
                    content="本店本月进过专业时时丽">
                    <div
                      v-if="item.storeLabels.zyssl"
                      class="visitStoreIco"
                      style="background-color: #ed5c68"
                      slot="reference">
                      专
                    </div>
                  </el-popover>
                  <el-popover
                    popper-class="zpover zpover1"
                    placement="bottom"
                    width="200"
                    trigger="click"
                    content="本店本月进过超好贴">
                    <div
                      v-if="item.storeLabels.chtczj"
                      class="visitStoreIco"
                      style="background-color: #0057ba"
                      slot="reference">
                      超
                    </div>
                  </el-popover>
                  <!--                <el-popover-->
                  <!--                    placement="bottom"-->
                  <!--                    width="200"-->
                  <!--                    popper-class="zpover zpover2"-->
                  <!--                    trigger="click"-->
                  <!--                    content="本月未被拜访的门店">-->
                  <!--                  <div v-if="item.storeLabels.noVisit" class="visitStoreIco" style="background-color: #fff" slot="reference">-->
                  <!--                    <van-icon :name="visitTimess" size="26" /></div>-->
                  <!--                </el-popover>-->
                  <el-popover
                    placement="bottom"
                    popper-class="zpover zpover1 zpover1sb"
                    trigger="click"
                    :content="'本店本月已拜访过' + item.storeLabels.visitTimes + '次'">
                    <div
                      v-if="item.storeLabels.visitTimes && item.storeLabels.visitTimes > 0"
                      class="visitStoreIco"
                      slot="reference"
                      style="background-color: #fff; position: relative">
                      <p
                        style="
                          width: 100%;
                          position: absolute;
                          z-index: 10;
                          top: -2px;
                          margin: 0;
                          text-align: center;
                          font-size: 12px;
                        ">
                        {{ item.storeLabels.visitTimes }}
                      </p>
                      <van-icon :name="ordernum" size="26" />
                    </div>
                    <el-table :data="item.userVisitTimesMap" border max-height="180px">
                      <el-table-column label="业务员" prop="userName" />
                      <el-table-column label="拜访次数" prop="visitTimes" />
                    </el-table>
                  </el-popover>
                </div>
              </div>
              <div class="info">
                类型：{{ item.storeCategoryName }}&nbsp;
                <el-popover popper-class="zpover zpover6" placement="bottom-start" trigger="click">
                  <div>
                    <p>
                      本店经营品项指导:
                      <a @click="linkimg(item)" style="text-decoration: underline">点击查看</a>
                    </p>
                  </div>
                  <van-icon name="question-o" size="18" slot="reference" />
                </el-popover>
              </div>
              <div class="info">联系电话：{{ item.telephone }}</div>
              <div class="info">地址：{{ item.addressLine }}</div>
              <div class="info" v-if="addShow1">经销商：{{ item.chainName }}</div>
            </div>
          </van-cell>
          <div class="lineGrey"></div>
        </div>
        <van-empty v-if="list.length == 0" />
      </van-list>
      <br />
      <br />
      <br />
      <br />
    </div>
    <van-popup v-model="showProvincePicker" position="bottom">
      <van-picker
        show-toolbar
        title="省(州)"
        :columns="provinceList"
        @confirm="onProvinceConfirm"
        @cancel="showProvincePicker = false" />
    </van-popup>
    <van-popup v-model="showCityPicker" position="bottom">
      <van-picker
        show-toolbar
        title="城市"
        :columns="cityList"
        @confirm="onCityConfirm"
        @cancel="showCityPicker = false" />
    </van-popup>
    <van-popup v-model="showDistrictPicker" position="bottom">
      <van-picker
        show-toolbar
        title="县区"
        :columns="districtList"
        @confirm="onDistrictConfirm"
        @cancel="showDistrictPicker = false" />
    </van-popup>
    <div class="positionContent" @click="rangeStoreFn()" v-if="mapShows">
      <van-icon class="img" :name="mpimg" size="50" />
    </div>
  </div>
</template>

<script>
import {
  storeList,
  getStoreTypeList,
  storeMyList,
  getStoreyslTypeList,
  getstoreCoverPosition,
  streetQuery,
  buryingPoint,
  ProductItemImge,
} from '@/api/index';
import ord from '@/assets/ord.png';
import paste from '@/assets/paste.png';
import mpimg from '@/assets/mpimg.png';
import order from '@/assets/order.png';
import axios from 'axios';
import order60 from '@/assets/order60.png';
import targetOne from '@/assets/targetOne.png';
import visitTimes from '@/assets/visitTimes.png';
import ordernum from '@/assets/ordernum.png';
export default {
  data() {
    return {
      disabled: false,
      list: [],
      ord: ord,
      addShow: false,
      ordernum: ordernum,
      mapShows: false,
      visitTimess: visitTimes,
      paste: paste,
      storeTypeList: [],
      loading: false,
      finished: false,
      mpimg: mpimg,
      order: order,
      order60: order60,
      targetOne: targetOne,
      pageSize: 12,
      pageNum: 1,
      cont: 0,
      tabVal: '1',
      showProvincePicker: false,
      showCityPicker: false,
      showDistrictPicker: false,
      provinceList: [],
      cityList: [],
      districtList: [],
      validFlag: '',
      addShow1: false,
      addBTN: '新建工地',
      title: '我的',
      fromValue: {
        storeName: '',
        provinceName: '全部省',
        districtName: '全部县区',
        cityName: '全部市',
        province: '',
        city: '',
        pageSize: 12,
        pageNum: 1,
        district: '',
        timeData: '',
      },
      approvalStatus: '',
      processApprovalStatus: '',
      typeOption: [
        { text: '全部门店', value: '' },
        { text: '已结案', value: 1 },
        { text: '未结案', value: 0 },
      ],
      statusOption: [
        { text: '已结案', value: 1, selectFlag: false },
        { text: '已提交', value: 2, selectFlag: false },
        { text: '未提交', value: 3, selectFlag: false },
      ],
      storeTypeTitle: '门店类型',
      storeStatusTitle: '门店状态',
      activatedTitles: [],
      activatedValues: [],
      dropdownTitle: '门店状态',
    };
  },
  activated() {
    // 是否从下单成功页面跳转过来，下单成功后点击上传陈列照直接跳转到编辑页面
    let id = localStorage.getItem('successStoreId');
    if (this.$route.query.source == 'successPage' && id) {
      // 跳转到详情页
      this.storeDetailFn(id);
    } else {
      this.initSelect();
      this.tabVal = localStorage.getItem('tabVal') || '1';
      if (localStorage.getItem('postType') == 'JZ' || localStorage.getItem('postType') == 'GZ') {
        this.mapShows = false;
      } else {
        this.mapShows = true;
      }
      this.getStoreTypeList();
      this.getstoreCoverPosition();
      this.getStreetQuery();
      this.getMonth();
      this.onSearch();
      if (localStorage.getItem('postType') == 'JZ' || localStorage.getItem('postType') == 'GZ') {
        this.mapShows = false;
      } else {
        this.mapShows = true;
      }
    }
  },
  created() {
    this.initStoreStatus();
  },
  watch: {
    $route: {
      handler(to, from) {
        this.$nextTick(() => {
          console.log(from);
          if (to.path == '/storemanagement/index' && from.path == '/My/index') {
            this.tabVal = '1';
          }
          if (to.path == '/storemanagement/index' && from.path == '/home') {
            this.initStoreStatus();
          }
        });
      },
      // immediate: true,
    },
  },
  methods: {
    initStoreStatus() {
      this.storeStatus = this.$route.query.storeStatus; //首页-提示类-建店跳转过来的状态
      if (this.storeStatus != undefined) {
        // 1：未完工；2：未结案
        if (this.storeStatus == 2) {
          // 筛选项确认
          this.$nextTick(() => {
            this.statusOption = [
              { text: '已结案', value: 1, selectFlag: false },
              { text: '已提交', value: 2, selectFlag: true },
              { text: '未提交', value: 3, selectFlag: true },
            ];
            this.pageNum = 1;
            this.onConfirm();
          });
        }
      }
    },
    initSelect() {
      this.activatedTitles = [];
      this.activatedValues = [];
      this.dropdownTitle = '门店状态';
      this.dropdownOpen();
    },
    linkList(val) {
      localStorage.setItem('tabVal', this.tabVal);
      this.$router.push({
        path: '/pItem',
        query: { id: val.storeCode, detilId: 'a' },
      });
    },
    linkimg(val) {
      ProductItemImge({ storeId: val.storeId }).then((response) => {
        if (response.code == 200) {
          if (response.data != undefined) {
            window.open(response.data);
          } else {
            this.$toast(response.msg);
          }
        }
      });
    },
    getMonth() {
      // 获取当前日期
      var currentDate = new Date();

      // 获取当前月份
      var currentMonth = currentDate.getMonth();

      // 获取当前年份
      // var currentYear = currentDate.getFullYear();

      var previousMonthDate1 = new Date();
      if (currentDate.getDate() == 1) {
        previousMonthDate1.setMonth(currentMonth - 1);
      } else {
      }
      var previousMonth1 = previousMonthDate1.getMonth();
      var previousYear1 = previousMonthDate1.getFullYear();

      // 计算前三个月的年份和月份
      var previousMonthDate = new Date();
      if (currentDate.getDate() == 1) {
        previousMonthDate.setMonth(currentMonth - 3);
      } else {
        previousMonthDate.setMonth(currentMonth - 2);
      }
      1;
      var previousMonth = previousMonthDate.getMonth();
      var previousYear = previousMonthDate.getFullYear();

      //前三个月
      if (previousYear1 == previousYear) {
        var formattedPreviousMonth1 = previousYear1 + '-' + (previousMonth1 + 1);
        // 格式化年份和月份
        var formattedPreviousMonth = previousYear + '-' + (previousMonth + 1);
        this.timeData =
          formattedPreviousMonth.split('-')[1] + '-' + formattedPreviousMonth1.split('-')[1] + '月';
      } else {
        var formattedPreviousMonth1 = previousYear1 + '年' + (previousMonth1 + 1) + '月';
        // .toString().padStart(2, '0');
        // 格式化年份和月份
        var formattedPreviousMonth = previousYear + '年' + (previousMonth + 1) + '月';
        this.timeData = formattedPreviousMonth + '-' + formattedPreviousMonth1;
      }
    },
    rangeStoreFn() {
      let loading1 = this.$toast.loading({
        duration: 0,
        message: '加载中...',
        forbidClick: true,
      });
      let url = window.location.href;
      let wx = this.wx;
      var that = this;
      let qiyeData;
      const instance = axios.create();
      instance.defaults.headers.common['userId'] = localStorage.getItem('loginName');
      instance
        .get(process.env.VUE_APP_BASE_API + 'mobile/wx/ticket', {
          params: {
            url: url,
          },
        })
        .then((response) => {
          if (response.status == 200) {
            this.cont = 3;
            var flat = true;
            var times = setInterval(() => {
              this.cont--;
              if (this.cont == '0') {
                if (flat) {
                  loading1.clear();
                  clearInterval(times);
                  that.$dialog
                    .alert({
                      message: '定位失败，请开启企微定位权限',
                    })
                    .then(() => {});
                } else {
                  clearInterval(times);
                }
              }
            }, 1000);
            qiyeData = response.data.data;
            wx.config({
              beta: true, // 必须这么写，否则wx.invoke调用形式的jsapi会有问题
              debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
              appId: qiyeData.appId, // 必填，企业微信的corpID
              timestamp: qiyeData.timestamp, // 必填，生成签名的时间戳
              nonceStr: qiyeData.nonceStr, // 必填，生成签名的随机串
              signature: qiyeData.signature, // 必填，签名，见 附录-JS-SDK使用权限签名算法
              jsApiList: ['ready', 'getLocation'], // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来
            });
            wx.ready(function () {
              wx.getLocation({
                type: 'gcj02',
                success: function (res) {
                  flat = false;
                  loading1.clear();
                  var name = that.title;
                  if (that.tabVal != 1) {
                    name = '销售部';
                  }
                  buryingPoint({
                    systemModel: '客户信息',
                    buryingPointType: 3,
                    buryingPointValue: name,
                    buryingPointName: '地图',
                    buryingPointPosition: '进入地图',
                  });
                  if (that.tabVal == 1) {
                    localStorage.setItem('tabVal', this.tabVal);
                    that.$router.push({
                      path: '/rangeStore',
                      query: {
                        lat: '',
                        lon: '',
                        tabVal: 4,
                      },
                    });
                  } else {
                    localStorage.setItem('tabVal', this.tabVal);
                    that.$router.push({
                      path: '/rangeStore',
                      query: {
                        lat: '',
                        lon: '',
                        tabVal: 3,
                      },
                    });
                  }
                },
                fail: function () {
                  loading1.clear();
                  that.$dialog.alert({
                    message: 'GPS未开启',
                  });
                },
              });
            });
            wx.error(function (res) {
              loading1.clear();
              that.$dialog
                .alert({
                  message: '定位失败，请开启企微定位权限',
                })
                .then(() => {});
            });
          }
        });
    },
    onSelect(action) {
      if (action == 'B') {
        this.$router.push('/storeAdd');
      } else {
        window.location.href =
          'https://weboa.nipponpaint.com.cn/4825836600585B0C/68488309EEFAC9044825805F0059C65B/_fi12rtp156lortal9ue32ww78_r_t4r5rr_09tu0qq19k09_npchina_sfs2g_?open&portalunid=AFECD3A3682ED7494825886F00242F0C&mainid=63C98CD1C79B608C4825886F0007F001';
      }
    },
    onProvinceConfirm(value) {
      this.fromValue.provinceName = value.text;
      this.fromValue.province = value.provinceCode;
      this.fromValue.cityName = '全部市';
      this.fromValue.city = '';
      this.fromValue.districtName = '全部县区';
      this.fromValue.district = '';
      this.fromValue.townName = '';
      this.fromValue.townCode = '';
      this.countyCode = '';
      this.cityCode = '';
      this.provinceCode = value.provinceCode;
      this.getStreetQuery('1');
      this.showProvincePicker = false;
      this.onSearch();
    },
    onCityConfirm(value) {
      this.fromValue.cityName = value.text;
      this.fromValue.city = value.cityCode;
      this.fromValue.districtName = '全部县区';
      this.fromValue.district = '';
      this.fromValue.townName = '';
      this.fromValue.townCode = '';
      this.countyCode = '';
      this.cityCode = value.cityCode;
      this.getStreetQuery('2');
      this.showCityPicker = false;
      this.onSearch();
    },
    onDistrictConfirm(value) {
      this.fromValue.districtName = value.text;
      this.fromValue.district = value.countyCode;
      this.fromValue.townName = '';
      this.fromValue.townCode = '';
      this.countyCode = value.countyCode;
      this.fromValue.cityLevel = value.countyLevel;
      this.getStreetQuery('3');
      this.showDistrictPicker = false;
      this.onSearch();
    },
    getStreetQuery(type) {
      var provinceCode = '';
      var cityCode = '';
      var countyCode = '';
      if (type == '1') {
        provinceCode = this.fromValue.province;
        cityCode = '';
        countyCode = '';
      } else if (type == '2') {
        provinceCode = this.fromValue.province;
        cityCode = this.fromValue.city;
        countyCode = '';
      } else if (type == '3') {
        provinceCode = this.fromValue.province;
        cityCode = this.fromValue.city;
        countyCode = this.fromValue.district;
      } else {
        provinceCode = '';
        cityCode = '';
        countyCode = '';
      }
      streetQuery({ provinceCode: provinceCode, cityCode: cityCode, countyCode: countyCode }).then(
        (res) => {
          var provinceList = [{ provinceCode: '', text: '全部省' }];
          var cityList = [{ cityCode: '', text: '全部市' }];
          var districtList = [{ countyCode: '', text: '全部县区' }];
          var townList = [];
          if (type == '1') {
            for (var z1 = 0; z1 < res.data.length; z1++) {
              cityList.push({ cityCode: res.data[z1].cityCode, text: res.data[z1].cityName });
            }
            this.cityList = cityList;
          } else if (type == '2') {
            for (var z2 = 0; z2 < res.data.length; z2++) {
              districtList.push({
                countyCode: res.data[z2].countyCode,
                text: res.data[z2].countyName,
                countyLevel: res.data[z2].countyLevel,
              });
            }
            this.districtList = districtList;
          } else if (type == '3') {
            for (var z3 = 0; z3 < res.data.length; z3++) {
              townList.push({ townCode: res.data[z3].townCode, text: res.data[z3].townName });
            }
            this.townList = townList;
          } else {
            for (var z = 0; z < res.data.length; z++) {
              provinceList.push({
                provinceCode: res.data[z].provinceCode,
                text: res.data[z].provinceName,
              });
            }
            this.provinceList = provinceList;
          }
        }
      );
    },
    getstoreCoverPosition() {
      getstoreCoverPosition({}).then((res) => {
        var postName = localStorage.getItem('postName');
        var postType = localStorage.getItem('postType');
        if (postType == 'DIY') {
          this.addBTN = '新建同城分销店';
          this.title = '我的';
          this.addShow1 = true;
        } else if (postType == 'JZ') {
          this.addBTN = '新建家装店';
          this.addShow1 = true;
          this.title = '我的';
        } else if (postType == 'GZ') {
          this.addBTN = '新建工地/潜在客户/公装客户仓库';
          this.addShow1 = false;
          this.title = '我的';
        }
        postName = postName.split(',');
        for (let i = 0; i < res.data.length; i++) {
          for (let j = 0; j < postName.length; j++) {
            if (res.data[i].dictLabel == postName[j]) {
              this.addShow = true;
              return false;
            }
          }
        }
      });
    },
    tabChange(name) {
      window.scrollTo(0, 0);
      this.finished = true;
      this.disabled = true;
      this.pageNum = 1;
      this.list = [];
      this.tabVal = name;
      this.onLoad();
    },
    getStoreTypeList() {
      if (localStorage.getItem('storeType') == '2') {
        getStoreyslTypeList({}).then((res) => {
          this.storeTypeList = res.data;
        });
      } else {
        getStoreTypeList({}).then((res) => {
          this.storeTypeList = res.data;
        });
      }
    },
    onLoad() {
      if (this.tabVal == 1) {
        this.getUserMyStoreList();
      } else {
        this.getUserStoreList();
      }
    },
    getUserMyStoreList() {
      if (this.refreshing) {
        this.refreshing = false;
      }
      if (this.pageNum == 1) {
        this.list = [];
      }
      let loading1 = this.$toast.loading({
        duration: 0,
        message: '加载中...',
        forbidClick: true,
      });
      var fromValue = this.fromValue;
      fromValue.pageNum = this.pageNum;
      fromValue.pageSize = this.pageSize;
      fromValue.storeName = this.fromValue.storeName.trim();
      storeMyList({
        ...fromValue,
        storeQueryStatus: this.activatedValues.join(','),
      }).then((res) => {
        loading1.clear();
        this.disabled = false;
        if (res.code == 200) {
          this.loading = false;
          console.log(this.list);
          this.list = this.list.concat(res.rows);
          if (this.list.length >= res.total) {
            this.finished = true;
          } else {
            this.finished = false;
          }
          this.pageNum = this.pageNum + 1;
          // this.list = res.rows
        } else {
          this.$toast.fail(res.msg);
        }
      });
    },
    getUserStoreList() {
      if (this.refreshing) {
        this.list = [];
        this.refreshing = false;
      }
      let loading1 = this.$toast.loading({
        duration: 0,
        message: '加载中...',
        forbidClick: true,
      });
      var fromValue = this.fromValue;
      fromValue.pageNum = this.pageNum;
      fromValue.pageSize = this.pageSize;
      fromValue.storeName = this.fromValue.storeName.trim();
      storeList(fromValue).then((res) => {
        loading1.clear();
        this.disabled = false;
        if (res.code == 200) {
          this.loading = false;
          this.list = this.list.concat(res.rows);
          if (this.list.length >= res.total) {
            this.finished = true;
          } else {
            this.finished = false;
          }
          this.pageNum = this.pageNum + 1;
          // this.list = res.rows
        } else {
          this.$toast.fail(res.msg);
        }
      });
    },
    storeDetailFn(id) {
      localStorage.setItem('tabVal', this.tabVal);
      this.$router.push({
        path: '/storeDetail',
        query: { id: id },
      });
    },
    onClickRight() {
      this.$router.push('/storeAdd');
    },
    onClickLeft() {
      localStorage.setItem('tabVal', '1');
      this.$router.push('/My/index');
    },
    onSearch() {
      window.scrollTo(0, 0);
      this.pageNum = 1;
      this.list = [];
      this.finished = true;
      this.onLoad();
    },
    // 门店类型下拉选change
    storeTypeChange(value) {
      let storeTypeItem = this.typeOption.find((item) => item.value == value);
      this.storeTypeTitle = storeTypeItem ? storeTypeItem.title : '门店类型';
      // 门店每次切换 门店状态重置
      this.processApprovalStatus = '';
      this.storeStatusTitle = '门店状态';
      this.pageNum = 1;
      this.getUserMyStoreList();
    },
    // 门店状态下拉选change
    storeStatusChange(value) {
      let storeStatusItem = this.statusOption.find((item) => item.value == value);
      this.storeStatusTitle = storeStatusItem ? storeStatusItem.title : '门店状态';
      this.pageNum = 1;
      this.getUserMyStoreList();
    },
    // 打开筛选项
    dropdownOpen() {
      // 重置选中
      this.statusOption.forEach((val) => {
        this.$set(val, 'selectFlag', false);
      });
      if (this.activatedValues.length) {
        for (let i = 0; i < this.activatedValues.length; i++) {
          let item = this.statusOption[this.activatedValues[i] - 1];
          this.$set(item, 'selectFlag', true);
        }
      }
    },
    // 点击筛选项
    dropdownItemClick(item) {
      this.$set(item, 'selectFlag', !item.selectFlag);
    },
    // 筛选项确认
    onConfirm() {
      let titles = [];
      let values = [];
      this.statusOption.forEach((val) => {
        if (val.selectFlag) {
          titles.push(val.text);
          values.push(val.value);
        }
      });
      this.activatedTitles = titles;
      this.activatedValues = values;
      this.dropdownTitle = this.activatedTitles.length
        ? this.activatedTitles.join(',')
        : '门店状态';
      this.$refs.dropdownItem.toggle();
      this.pageNum = 1;
      this.getUserMyStoreList();
    },
  },
};
</script>
<style lang="scss">
.searchDiv {
  .van-search {
    background: #fff;
  }

  .van-search__action {
    font-size: 14px;
    color: #0057ba;
    font-weight: bold;
    background: #f1f1f1;
    border-bottom-right-radius: 60px;
    border-top-right-radius: 60px;
    border: 1px solid #c1c1c1;
    padding: 0 20px;
  }

  .van-search--show-action {
    padding-right: 12px;
  }

  .van-search__content {
    border: 1px solid #c1c1c1;
    border-bottom-left-radius: 60px;
    border-top-left-radius: 60px;
    background: #f1f1f1;
    border-right: 0;
  }
}

.myList {
  .van-cell {
    padding: 0;
    &:after {
      border-bottom: none;
    }
  }
}
.myTab {
  .van-tabs__nav--card {
    margin: 0 !important;
    border-left: 0;
    border-right: 0;
  }
  .van-tabs__wrap,
  .van-tabs__nav--card {
    height: 39px;
  }
  .van-tab {
    line-height: 40px;
  }
}
.van-tabs__nav--card .van-tab.van-tab--active {
  background-color: #0057ba !important;
}
.storeManagement {
  .van-search {
    flex: 1;
  }
  .searchDiv {
    display: flex;
    background: #fff;
    align-items: center;
    .selectFilter {
      width: 30%;
      .van-dropdown-menu__bar {
        height: 40px !important;
        box-shadow: none;
      }
    }
  }
}
</style>
<style lang="scss" scoped>
.container {
  padding-bottom: 50px;
}

.card {
  padding: 10px 16px;
  box-sizing: border-box;

  .title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    line-height: 30px;
  }

  .info {
    font-size: 14px;
    color: #909090;
    line-height: 26px;
  }
}
.cellcontent .van-cell__right-icon {
  height: 144px;
  line-height: 144px;
  margin-right: 10px;
}

.srore .van-cell {
  padding: 0;
}

.contentpd16 .van-cell {
  background-color: #ebf4ff;
  margin: 8px 0;
  border-radius: 5px;
  padding: 4px 16px;
}
.visitStoreIco {
  float: left;
  float: left;
  width: 26px;
  text-align: center;
  background-color: #ffba13;
  color: #fff;
  border-radius: 100%;
  margin-left: 14px;
  line-height: 26px;
  height: 26px;
}
.centerBtn {
  margin: 0 auto 10px;
  display: block;
  width: 92%;
  color: #0057ba;
  border-radius: 5px;
  padding: 0 6px;
  height: 28px;
}
.ctns {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 74px;
}
.positionContent {
  position: fixed;
  color: #666;
  display: inline-block;
  box-shadow: 0px 2px 7px -5px #000;
  border-radius: 100px;
  overflow: hidden;
  right: 14px;
  cursor: pointer;
  bottom: 60px;
  background-color: white;
}
.positionContent .img {
  border-radius: 100px;
  float: left;
}
.positionContent .img .van-icon__image {
  border-radius: 100px;
}
.statusIcon {
  padding: 3px;
  font-size: 12px;
  margin: 0 3px;
  color: #fff;
  display: inline-block;
  height: 20px;
  line-height: 16px;
  vertical-align: -1px;
}
.submit {
  background: #ffba13;
}
.noSubmit {
  background: #f11818;
}
</style>