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

<!-- 经销商维护 -->
<template>
  <div class="chainMaintain">
    <div class="navBarTOP">
      <van-nav-bar
        class="navBar"
        title="客户详情"
        left-arrow
        @click-left="onClickLeft"
        right-text="保存"
        @click-right="onSubmit">
      </van-nav-bar>
    </div>
    <div style="margin-top: 44px; padding-bottom: 50px" v-if="pageShow">
      <van-dialog title="门店位置">
        <mapmarker :info="list"></mapmarker>
      </van-dialog>
      <van-tabs class="myTab" v-model="tabVal" color="#0057ba" @change="tabChange">
        <van-tab title="基础信息" name="insidePlan" ref="dispsps">
          <van-field readonly v-model="list.storeCode" label="编号" />
          <van-field readonly v-if="DIYshow" v-model="list.attribute1" label="DIY编号" />
          <van-field readonly v-model="list.storeName" :label="storeName" />
          <van-field readonly v-model="list.storeCategoryName" label="类型" />
          <van-field
            readonly
            v-if="type != 'address'"
            rows="1"
            autosize
            type="textarea"
            v-model="list.addressLine"
            :label="address" />
          <van-field
            v-if="type == 'address'"
            rows="1"
            autosize
            type="textarea"
            v-model="list.addressLine"
            :label="address">
          </van-field>
          <van-field v-model="list.lat" readonly label="经度" placeholder="经度" />
          <van-field readonly v-model="list.lon" label="维度" />
          <van-field readonly v-model="list.orgName" label="销售部" />
          <van-field readonly v-model="list.provinceName" label="省(州)">
            <template #button>
              <van-icon name="arrow" v-if="type == 'address'" />
            </template>
          </van-field>
          <van-field readonly v-model="list.cityName" label="城市">
            <template #button>
              <van-icon name="arrow" v-if="type == 'address'" />
            </template>
          </van-field>
          <van-field readonly v-model="list.districtName" label="区(县)">
            <template #button>
              <van-icon name="arrow" v-if="type == 'address'" />
            </template>
          </van-field>
          <van-field readonly v-model="list.townName" label="街道">
            <template #button>
              <van-icon name="arrow" v-if="type == 'address'" />
            </template>
          </van-field>
          <van-field readonly v-model="list.cityLevel" label="城市等级" />
          <van-field
            readonly
            v-if="list.ifJzStoreType != 1 && list.storeCategory != 'C917'"
            v-model="list.contactName"
            label="联系人" />
          <van-field
            readonly
            v-if="list.ifJzStoreType == 1 && list.storeCategory != 'C917'"
            v-model="list.contactName"
            label="老板" />
          <van-field
            readonly
            v-model="list.telephone"
            label="联系电话"
            v-if="list.storeCategory != 'C917'" />
          <template v-if="list.storeCategory != 'C917'">
            <!-- 分销店 -->
            <template
              v-if="
                verifyStoreType(list.storeCategory) &&
                verifyStoreType(list.storeCategory).type == 'fxd'
              ">
              <van-row style="border-bottom: 1px solid #ebedf0">
                <van-col span="24">
                  <van-field label="经销商名称" @click="getStoreChainsContact" class="TCFXList">
                    <!-- <template #left-icon>
                      <span class="van-f-red">*</span>
                    </template> -->
                    <template #input>
                      <template
                        v-if="sfaStoreChainsContactList && sfaStoreChainsContactList.length">
                        <div
                          class="sfaStoreChainsContactList"
                          v-for="(item, index) in sfaStoreChainsContactList"
                          :key="index">
                          {{ item.categoryDescribe }}
                          {{ item.chainCode }}
                          {{ item.chainName }}
                        </div>
                      </template>
                      <template v-else>
                        <span style="color: rgb(150, 151, 153)"> 点击选择经销商名称 </span>
                      </template>
                    </template>
                  </van-field>
                </van-col>
              </van-row>
            </template>
            <template v-else>
              <van-field readonly v-model="list.chainCode" label="经销商编号" />
              <van-field readonly v-model="list.chainName" label="经销商名称" />
            </template>
          </template>
          <van-field readonly v-model="list.salesmanName" label="销售员" />
          <div v-if="list.storeCategory != 'C917'">
            <van-field
              readonly
              v-model="list.area"
              v-if="list.ifJzStoreType != 1"
              label="面积(m²)" />
            <van-field
              readonly
              v-model="list.area"
              v-if="list.ifJzStoreType == 1"
              label="家装展厅面积(m²)" />
          </div>
          <van-field
            readonly
            v-if="GZAttributeFormShow"
            label="潜在客户类型"
            v-model="list.potentialCustomerType" />
          <van-field readonly v-if="list.carShop" label="是否车铺开店">
            <template #input>
              <span v-if="list.carShop == 1">是</span>
              <span v-if="list.carShop == 0">否</span>
            </template>
          </van-field>
          <div v-if="list.carShopImgList != null && list.carShop == 1">
            <p style="padding: 0 16px">车铺照片(店招及车铺产品拍在一张照片里)</p>
            <viewUploadImg :imgs="list.carShopImgList"></viewUploadImg>
          </div>
          <template v-if="list.img != null && list.storeCategory != 'C917'">
            <div class="displayImg" style="padding: 16px">
              <div class="displayImgBox">
                <div v-if="storeTypePOP">
                  <van-image
                    width="100%"
                    height="160"
                    :src="setImgSrc(list.img)"
                    @click="deleteImgs(list.img)" />
                  <p style="text-align: center">
                    {{ list.ifJzStoreType != 1 ? '建店时门店照' : '家装前台照片' }}
                  </p>
                </div>
                <div v-else>
                  <van-image
                    width="100%"
                    height="160"
                    :src="setImgSrc(list.img)"
                    @click="deleteImgs(list.img)" />
                  <p style="text-align: center">
                    {{ list.storeCategory == 'C912' ? '工地铭牌照片' : '公司照片' }}
                  </p>
                </div>
              </div>
              <template v-if="list.ifJzStoreType != 1"></template>
              <template v-else>
                <div class="displayImgBox">
                  <div v-if="storeTypePOP">
                    <van-image
                      width="100%"
                      height="160"
                      :src="setImgSrc(list.imgSed)"
                      @click="deleteImgs(list.imgSed)" />
                    <p style="text-align: center">
                      {{ '立邦展厅照片' }}
                    </p>
                  </div>
                </div>
              </template>
              <template v-if="list.ifJzStoreType != 1 && storeTypePOP && displayImg.length">
                <div class="displayImgBox" v-for="(urls, index) in displayImg" :key="index">
                  <div>
                    <van-image width="100%" height="160" :src="urls" @click="previewsImg(index)" />
                    <p style="text-align: center">建店时陈列照</p>
                  </div>
                </div>
              </template>
            </div>
          </template>
          <van-row gutter="20" style="padding: 16px">
            <van-col span="12" v-if="list.newStoreSignPhoto">
              <div v-if="storeTypePOP">
                <van-image
                  width="100%"
                  height="160"
                  :src="setImgSrc(list.newStoreSignPhoto)"
                  @click="deleteImgs(list.newStoreSignPhoto)" />
                <p style="text-align: center">最近一次拜访店招</p>
              </div>
            </van-col>
            <van-col span="12" v-if="list.newStoreDisplayPhoto">
              <div v-if="storeTypePOP">
                <van-image
                  width="100%"
                  height="160"
                  :src="list.newStoreDisplayPhoto"
                  @click="deleteImgs(list.newStoreDisplayPhoto)" />
                <p style="text-align: center">最近一次陈列照</p>
              </div>
            </van-col>
          </van-row>
          <van-row gutter="20" style="padding: 16px" v-if="type == 'address'">
            <van-col
              span="12"
              v-if="
                list.storeCategory == '35' ||
                list.storeCategory == '36' ||
                list.storeCategory == '37' ||
                list.storeCategory == '38' ||
                list.storeCategory == '91'
              ">
              <upload-img
                :uploadid="uploadid2"
                :imgArr="img"
                @newimgarr="newimgarr1"
                imgText="店招照片"
                :type="1"></upload-img>
            </van-col>
          </van-row>
        </van-tab>
        <van-tab title="属性信息" name="outsidePlan">
          <template v-for="(item, index) in TCFXList" v-if="dictTypeFormShow">
            <van-field
              readonly
              label="属性"
              v-if="item.dictValue == list.tcfxName"
              v-model="item.text" />
          </template>
        </van-tab>
      </van-tabs>
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
    </div>
    <!--经销商-->
    <van-popup
      v-model="showPickerChainsList"
      position="bottom"
      class="agencyBox"
      :close-on-click-overlay="false">
      <!-- 分销店 -->
      <template
        v-if="
          verifyStoreType(list.storeCategory) && verifyStoreType(list.storeCategory).type == 'fxd'
        ">
        <div class="header_btn">
          <div class="cancel" @click="showPickerChainsList = false">取消</div>
          <div class="confirm" @click="treeSelectConfirm">确定</div>
        </div>
        <van-tree-select
          :items="treeSelect"
          :main-active-index.sync="activeIndex"
          @click-nav="clickNav">
          <template #content>
            <div
              class="treeSelectchildren"
              v-if="activeIndex == index"
              v-for="(item, index) in treeSelect"
              :key="index">
              <div
                class="item"
                v-for="(val, ind) in item.children"
                :key="ind"
                @click="treeSelectItemClick(item, index, val, ind)">
                <div
                  :class="{
                    'van-radio__icon': true,
                    'van-radio__icon--round': true,
                    'van-radio__icon--checked': val.Check,
                    'van-radio__icon--disabled': val.isCheck,
                  }">
                  <i class="van-icon van-icon-success"></i>
                </div>
                <div class="value">{{ val.chainCode }} {{ val.chainName }}</div>
              </div>
            </div>
          </template>
        </van-tree-select>
      </template>
    </van-popup>
  </div>
</template>

<script>
import { ImagePreview } from 'vant';
import {
  getById,
  getStoreTypeList,
  getStoreyslTypeList,
  getTCFXList,
  getSJSList,
  getQGJZist,
  getCustomerInfoList,
  getCustomerNatureList,
  getMainProjectList,
  getMainRelationList,
  getManagementModelList,
  getpotentialCustomerTypeList,
  streetQuery,
} from '@/api/index';
import mapmarker from '@/components/mapMarker';
import viewUploadImg from '@/components/viewUploadImg';
import txmapimg1 from '@/assets/txmap1.svg';
import txmapimg2 from '@/assets/txmap2.svg';
import txmapimg3 from '@/assets/marker_blue.png';
import uploadImg from '@/components/viewaddreddUploadImg.vue';
import { getPosition, getMapPoi, getkeywordPoi, getTicketFun } from '@/utils/TXApiFun';
import { listChainsByCategory, addStoreChainContact } from '@/api/store';
export default {
  components: { uploadImg, mapmarker, viewUploadImg },
  data() {
    return {
      addresssb: '',
      searchSHow: false,
      uploadid2: 'uploadid2',
      shows: true,
      searchValue: '',
      tabVal: 'insidePlan',
      showDialog: false,
      msgList: '',
      list: [],
      provinceList: [],
      txmapimg1: txmapimg1,
      txmapimg2: txmapimg2,
      txmapimg3: txmapimg3,
      cityList: [],
      districtList: [],
      maplist: [],
      townList: [],
      storeId: '',
      vaue: '',
      show: false,
      storeTypeList: [],
      ManagementModelList: [],
      MainRelationList: [],
      MainProjectList: [],
      CustomerNatureList: [],
      CustomerInfoList: [],
      potentialCustomerTypeList: [],
      typeABshow: false,
      dictTypeFormShow: false,
      detilId: '',
      DIYshow: false,
      visitListList: [],
      TCFXList: [],
      QGJZist: [],
      SJSList: [],
      storeName: '名称',
      address: '地址',
      storeTypePOP: false,
      GZAttributeFormShow: false,
      type: '',
      towntShow: false,
      districtShow: false,
      cityShow: false,
      provinceShow: false,
      showmap: false,
      markers: undefined,
      markers1: undefined,
      marker: undefined,
      pageShow: false,
      mapsearchlist: [],
      map: '',
      img: '',
      lat: '',
      lon: '',
      poiAddress: '',
      myLat: '',
      poiLat: '',
      poiLon: '',
      poiId: '',
      myLon: '',
      pLat: '',
      pLot: '',
      poiName: '',
      activeNames: [],
      cityABStore: false, //同城分销A/B店
      displayImg: [],
      treeSelect: [],
      sfaStoreChainsContactList: [], //选中确定的经销商
      activatedTCFXList: [], //选中的经销商
      showPickerChainsList: false,
      activeIndex: 0,
      treeSelectItemInd: 0,
    };
  },
  created() {
    this.tabVal = 'insidePlan';
    this.showmap = false;
    this.img = '';
    this.detilId = this.$route.query.detilId;
    this.type = this.$route.query.type; // type:address 拜访时位置偏差过大，可以修改地址（只能修改地址）
    this.getCustomerInfoList();
    this.getManagementModelList();
    this.getMainRelationList();
    this.getMainProjectList();
    this.getCustomerNatureList();
    this.getTCFXList();
    this.getSJSList();
    this.getQGJZist();
    this.getStoreType();
    this.getpotentialCustomerTypeList();
    this.visitListList = [];
    this.getStreetQuery('');
    window.scrollTo(0, 0);
    this.poiAddress = '';
    this.myLat = '';
    this.poiLat = '';
    this.poiLon = '';
    this.poiId = '';
    this.myLon = '';
    this.poiName = '';
  },
  methods: {
    newimgarr1(val) {
      this.img = val.fileUrl;
    },
    onSubmit() {
      addStoreChainContact({
        storeId: this.$route.query.id, //long	门店id
        sfaStoreChainsContactList: this.sfaStoreChainsContactList.filter((item) => !item.isCheck), //对象数组	门店选择的品类经销商列表（只传新增的）
      }).then((res) => {
        if (res.code == 200) {
          this.$toast('保存成功');
          this.$router.replace({ path: '/My' });
        } else {
          this.$dialog.alert({
            title: '系统提示',
            message: res.msg,
            messageAlign: 'left',
          });
        }
      });
    },
    getStreetQuery(type) {
      var provinceCode = this.list.province;
      var cityCode = this.list.city;
      var countyCode = this.list.district;
      if (type == '1') {
        cityCode = '';
        countyCode = '';
      } else if (type == '2') {
        countyCode = '';
      } else if (type == '3') {
      } else {
        provinceCode = '';
        cityCode = '';
        countyCode = '';
      }
      streetQuery({
        provinceCode: provinceCode,
        cityCode: cityCode,
        countyCode: countyCode,
      }).then((res) => {
        if (res.code == 200) {
          var provinceList = [];
          var cityList = [];
          var districtList = [];
          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;
          }
        } else {
          this.$toast.fail('请求超时');
        }
      });
    },
    getCustomerInfoList() {
      getCustomerInfoList().then((res) => {
        var CustomerInfoList = [];
        for (var t = 0; t < res.data.length; t++) {
          CustomerInfoList.push({
            text: res.data[t].dictLabel,
            dictCode: res.data[t].dictValue,
          });
        }
        this.CustomerInfoList = CustomerInfoList;
      });
    },
    getCustomerNatureList() {
      getCustomerNatureList().then((res) => {
        var CustomerNatureList = [];
        for (var t = 0; t < res.data.length; t++) {
          CustomerNatureList.push({
            text: res.data[t].dictLabel,
            dictCode: res.data[t].dictValue,
          });
        }
        this.CustomerNatureList = CustomerNatureList;
      });
    },
    getpotentialCustomerTypeList() {
      getpotentialCustomerTypeList().then((res) => {
        var potentialCustomerTypeList = [];
        for (var t = 0; t < res.data.length; t++) {
          potentialCustomerTypeList.push({
            text: res.data[t].dictLabel,
            dictCode: res.data[t].dictValue,
          });
        }
        this.potentialCustomerTypeList = potentialCustomerTypeList;
      });
    },
    getMainProjectList() {
      getMainProjectList().then((res) => {
        var MainProjectList = [];
        for (var t = 0; t < res.data.length; t++) {
          MainProjectList.push({
            text: res.data[t].dictLabel,
            dictCode: res.data[t].dictValue,
          });
        }
        this.MainProjectList = MainProjectList;
      });
    },
    getMainRelationList() {
      getMainRelationList().then((res) => {
        var MainRelationList = [];
        for (var t = 0; t < res.data.length; t++) {
          MainRelationList.push({
            text: res.data[t].dictLabel,
            dictCode: res.data[t].dictValue,
          });
        }
        this.MainRelationList = MainRelationList;
      });
    },
    getManagementModelList() {
      getManagementModelList().then((res) => {
        var ManagementModelList = [];
        for (var t = 0; t < res.data.length; t++) {
          ManagementModelList.push({
            text: res.data[t].dictLabel,
            dictCode: res.data[t].dictValue,
          });
        }
        this.ManagementModelList = ManagementModelList;
      });
    },
    getSJSList() {
      getSJSList({}).then((res) => {
        var SJSList = [];
        for (var t = 0; t < res.data.length; t++) {
          SJSList.push({
            text: res.data[t].dictLabel,
            dictCode: res.data[t].dictValue,
          });
        }
        this.SJSList = SJSList;
      });
    },
    getQGJZist() {
      getQGJZist({}).then((res) => {
        var QGJZist = [];
        for (var t = 0; t < res.data.length; t++) {
          QGJZist.push({
            text: res.data[t].dictLabel,
            dictCode: res.data[t].dictValue,
          });
        }
        this.QGJZist = QGJZist;
      });
    },
    getTCFXList() {
      getTCFXList({}).then((res) => {
        var TCFXList = [];
        for (var t = 0; t < res.data.length; t++) {
          TCFXList.push({
            text: res.data[t].dictLabel,
            dictCode: res.data[t].dictCode,
            dictValue: res.data[t].dictValue,
            remark: res.data[t].remark,
          });
        }
        this.TCFXList = TCFXList;
      });
    },
    visitsFn(row) {
      this.$router.push({
        path: '/historicalDetails',
        query: {
          visitId: row.id,
          storeCode: row.storeCode,
          storeId: row.storeId,
        },
      });
    },
    setImgSrc(imgUrl) {
      let imgArr = imgUrl.split(',');
      return imgArr[0];
    },
    deleteImgs(val) {
      ImagePreview(val.split(','));
    },
    getStoreType() {
      // 先授权
      getTicketFun().then(() => {
        if (localStorage.getItem('storeType') == '2') {
          this.DIYshow = true;
          getStoreyslTypeList({}).then((res) => {
            this.storeTypeList = res.data;
            this.getDetail();
          });
        } else {
          this.DIYshow = false;
          getStoreTypeList({}).then((res) => {
            this.storeTypeList = res.data;
            this.getDetail();
          });
        }
      });
    },
    getDetail() {
      this.pageShow = false;
      this.lat = '';
      this.lon = '';
      let loading1 = this.$toast.loading({
        duration: 0,
        message: '加载中...',
        forbidClick: true,
      });
      getById({ storeId: this.$route.query.id }).then((res) => {
        loading1.clear();
        localStorage.setItem('locationRemark', res.data.addressLine);
        localStorage.setItem('orgName', res.data.orgName);
        localStorage.setItem('chainName', res.data.storeName);
        if (res.code == 200) {
          if (res.data.lat != null) {
            this.lat = res.data.lat;
            this.lon = res.data.lon;
          }
          this.list = res.data;
          this.sfaStoreChainsContactList = this.list.sfaStoreChainsContactList;
          if (this.list.imgSed && this.list.imgSed != '') {
            this.displayImg = this.list.imgSed.split(',');
          } else {
            this.displayImg = [];
          }
          if (
            this.verifyStoreType(this.list.storeCategory) &&
            this.verifyStoreType(this.list.storeCategory).type == 'fxd'
          ) {
            this.cityABStore = true;
          } else {
            this.cityABStore = false;
          }
          if (
            res.data.province != null &&
            res.data.province != undefined &&
            res.data.province != ''
          ) {
            this.getStreetQuery('1');
          }
          if (res.data.city != null && res.data.city != undefined && res.data.city != '') {
            this.getStreetQuery('2');
          }
          if (
            res.data.district != null &&
            res.data.district != undefined &&
            res.data.district != ''
          ) {
            this.getStreetQuery('3');
          }
          if (this.list.carShopImgList != null) {
          } else {
            this.list.carShopImgList = [];
          }
          if (
            this.verifyStoreType(this.list.storeCategory) &&
            this.verifyStoreType(this.list.storeCategory).type == 'fxd'
          ) {
            this.typeABshow = true;
          } else {
            this.typeABshow = false;
          }
          if (this.list.storeCategory == 'C917') {
            this.GZAttributeFormShow = true;
            this.dictTypeSJSFormShow = false;
            this.dictTypeQGJZFormShow = false;
            this.dictTypeFormShow = false;
            this.dictTypeAFormShow = false;
            this.typeABshow = false;
            for (let k = 0; k < this.potentialCustomerTypeList.length; k++) {
              if (this.potentialCustomerTypeList[k].dictCode == this.list.potentialCustomerType) {
                this.list.potentialCustomerType = this.potentialCustomerTypeList[k].text;
              }
            }
          } else {
            this.GZAttributeFormShow = false;
          }
          if (
            this.verifyStoreType(this.list.storeCategory) &&
            this.verifyStoreType(this.list.storeCategory).type == 'fxd'
          ) {
            this.dictTypeFormShow = true;
            for (var k = 0; k < this.TCFXList.length; k++) {
              if (this.TCFXList[k].dictCode == this.list.tcfxName) {
                this.list.tcfxName = this.TCFXList[k].text;
              }
            }
          }

          if (this.list.storeCategory == 'sjs61') {
            this.dictTypeFormShow = true;
            for (var k = 0; k < this.SJSList.length; k++) {
              if (this.SJSList[k].dictCode == this.list.tcfxName) {
                this.list.tcfxName = this.SJSList[k].text;
              }
            }
          }
          if (this.list.storeCategory == 'zyjz63') {
            this.dictTypeFormShow = true;
            for (var k = 0; k < this.QGJZist.length; k++) {
              if (this.QGJZist[k].dictCode == this.list.tcfxName) {
                this.list.tcfxName = this.QGJZist[k].text;
              }
            }
          }
          if (this.list.storeCategory == 'C912') {
            this.storeTypePOP = false;
            this.storeName = '铭牌上项目名称';
            this.address = '地址';
          } else if (this.list.storeCategory == 'C917') {
            this.storeTypePOP = false;
            this.storeName = '名称';
            this.address = '地址';
          } else {
            this.storeTypePOP = true;
            this.storeName = '名称';
            this.address = '地址';
          }
          // 获取定位
          getPosition()
            .then((res) => {
              let { TXisBD, resData } = res;
              this.lat = TXisBD.lat;
              this.lon = TXisBD.lon;
              this.myLat = TXisBD.lat;
              this.myLon = TXisBD.lon;
              this.list.lon = TXisBD.lon;
              this.list.lat = TXisBD.lat;
            })
            .catch((err) => {
              console.log(err);
            });
          this.pageShow = true;
        } else {
          this.$toast.fail(res.msg);
        }
      });
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    tabChange(name, title) {
      console.log(name, title);
    },
    // 预览
    previewsImg(index) {
      var arrimg = [];
      for (var imgi = 0; imgi < this.displayImg.length; imgi++) {
        arrimg.push(this.displayImg[imgi]);
      }
      ImagePreview({
        images: arrimg,
        startPosition: index,
      });
    },
    //获取经销商
    async getStoreChainsContact() {
      // 打开select，上次选中确认数据赋值给选中待确认，回显使用
      this.activatedTCFXList = JSON.parse(JSON.stringify(this.sfaStoreChainsContactList));
      if (!this.treeSelect.length) {
        this.toastLoading(0, '加载中...', true);
        listChainsByCategory({ orgId: this.list.orgId }).then((res) => {
          this.toastLoading().clear();
          // 初始化数据
          res.data.forEach((val) => {
            val.dot = false;
          });
          this.showPickerChainsList = true;
          this.treeSelect = res.data;
          this.sfaStoreChainsContactList.forEach((val) => {
            this.treeSelect.find((item) => {
              if (item.code == val.categoryCode) {
                item.isCheck = true;
                item.children.push({
                  isCheck: true,
                  categoryCode: val.categoryCode,
                  categoryDescribe: val.categoryDescribe,
                  chainCode: val.chainCode,
                  chainName: val.chainName,
                });
              }
            });
          });
          this.setCheckData();
        });
      } else {
        this.showPickerChainsList = true;
        this.setCheckData();
      }
    },
    setCheckData() {
      for (let x = 0; x < this.treeSelect.length; x++) {
        // 设置左侧选中图标
        let activate = this.activatedTCFXList.find((item) => {
          return item.categoryCode == this.treeSelect[x].code;
        });
        this.treeSelect[x].dot = activate ? true : false;
        // 右侧选中返现
        let children = this.treeSelect[x].children;
        if (children && this.treeSelect[x].dot) {
          for (let y = 0; y < children.length; y++) {
            let activate = this.activatedTCFXList.find((item) => {
              return (
                children[y].categoryCode == item.categoryCode &&
                children[y].chainCode == item.chainCode
              );
            });
            if (activate) {
              children[y].Check = true;
            } else {
              children[y].Check = false;
            }
          }
        }
      }
      this.$forceUpdate();
      this.activeIndex = 0;
    },
    // 左侧数据点击
    clickNav(index) {},
    // 右侧数据点击
    treeSelectItemClick(itemData, index, val, ind) {
      if (itemData.isCheck) return;
      itemData.children.forEach((item) => {
        if (val.chainCode == item.chainCode) {
          item.Check = !item.Check;
          // 设置左侧选中图标
          itemData.dot = item.Check;
        } else {
          item.Check = false;
        }
      });
      this.$forceUpdate();
    },
    // 分销店 确认
    treeSelectConfirm() {
      let treeSelectArr = [];
      this.treeSelect.forEach((item) => {
        if (item.dot) {
          item.children.forEach((val) => {
            if (val.Check || val.isCheck) {
              treeSelectArr.push(val);
            }
          });
        }
      });
      if (!treeSelectArr.length) {
        this.$toast('请选择至少选择一个经销商');
        return false;
      }
      console.log(treeSelectArr);
      this.sfaStoreChainsContactList = treeSelectArr;
      this.showPickerChainsList = false;
    },
  },
};
</script>
<style scoped lang="scss">
.container {
  padding-bottom: 50px;
}
.myTab .van-tabs__nav--card {
  margin: 0 !important;
  border-left: 0;
  border-right: 0;
}
.myTab .van-tabs__wrap,
.van-tabs__nav--card {
  height: 40px;
}
.myTab .van-tab {
  line-height: 40px;
}
.helpPageMask {
  width: 100%;
  height: 100%;
  background: rgba(116, 116, 116, 0.8);
  position: fixed;
  z-index: 100000;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bottomBtn {
  position: fixed;
  bottom: 0;
  height: 50px;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  .van-button {
    /* flex: 1; */
    width: 40%;
  }
}
.rejectMsg {
  position: sticky;
  top: 46px;
  z-index: 10;
  display: flex;
  box-sizing: border-box;
  width: 100%;
  padding: 10px 16px;
  overflow: hidden;
  color: #323233;
  font-size: 14px;
  line-height: 24px;
  background-color: #f5daac;
  font-weight: 600;
  .label {
    width: 6.2em;
    margin-right: 12px;
  }
  .value {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    padding-right: 20px;
  }
  .examineDetail {
    width: 70px;
    color: #0057ba;
  }
}
.rejectMsgBox {
  min-height: 30%;
  max-height: 50%;
  padding: 10px 20px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .title {
    padding: 10px 0;
    text-align: center;
    font-size: 16px;
    font-weight: 600px;
  }
  .content {
    flex: 1;
    overflow-y: auto;
    .rejectMsgItem {
      margin-bottom: 20px;
      .item {
        padding: 5px 0;
        span {
          display: inline-block;
        }
      }
      .label {
        width: 80px;
        font-size: 14px;
        font-weight: 600;
      }
      .value {
        font-size: 14px;
      }
    }
  }
}
.orderList {
  .orderItem {
    .orderTitle {
      padding: 5px 0;
      font-size: 16px;
      font-weight: 600;
      color: #000;
      display: flex;
      align-items: center;
      &::before {
        content: '';
        width: 8px;
        height: 8px;
        background: red;
        border-radius: 50%;
        display: inline-block;
        margin-right: 5px;
      }
    }
  }
}
.displayImg {
  .displayImgBox {
    position: relative;
    width: 48%;
    padding: 20px 0;
    height: 210px;
    float: left;
    margin-right: 4%;
    .title {
      text-align: center;
      padding: 5px 0;
    }
  }
  .displayImgBox:nth-child(even) {
    margin-right: 0;
  }
  i {
    position: absolute;
    right: 4px;
    color: white;
    background: red;
    overflow: hidden;
    border-radius: 50%;
  }
}
.approvalBtnBox {
  display: flex;
  .approvalBtn {
    flex: 1;
    margin: 0 3px;
    .van-button--danger {
      background-color: #ee0a24 !important;
      border: 1px solid #ee0a24 !important;
    }
  }
}
</style>
<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 #ccc;
    padding: 0 20px;
  }
  .van-search--show-action {
    padding-right: 12px;
  }
  .van-search__content {
    border: 1px solid #ccc;
    border-bottom-left-radius: 60px;
    border-top-left-radius: 60px;
    background: #f1f1f1;
    border-right: 0;
  }
}
.helpAlert {
  .van-dialog__cancel {
    .van-button__text {
      &::before {
        content: '?';
        background: #f79200;
        width: 20px;
        display: inline-block;
        border-radius: 50%;
        color: #fff;
      }
    }
  }
}
.chainMaintain {
  .agencyBox {
    .header_btn {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px;
      font-size: 16px;
      border-bottom: 1px solid #ccc;
      div {
        padding: 3px;
      }
    }
    .van-sidebar {
      width: 100px;
      text-align: center;
      flex: none;
    }
    .treeSelectchildren {
      .item {
        display: flex;
        align-items: center;
        padding: 5px;
        .value {
          margin-left: 15px;
        }
      }
    }
  }
  .TCFXList {
    .van-field__control--custom {
      flex-direction: column;
      align-items: self-start;
      .TCFXListTreeSelec {
        padding: 3px;
      }
    }
  }
}
</style>