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

<template>
  <div class="FSQStoreDetail">
    <div class="header">
      <van-nav-bar
        class="navBar"
        title="潜在店"
        left-arrow
        @click-left="onClickLeft"
        right-text="提交"
        @click-right="clickSubmit" />
    </div>
    <div class="content">
      <van-form ref="tabstoreVal" @submit="onSubmit" :scroll-to-error="true" :show-error="false">
        <!-- <van-field readonly :value="fromData.storeCode" label="编号">
          <template #left-icon>
            <span class="van-f-red"></span>
          </template>
        </van-field> -->
        <van-field
          v-model="fromData.storeName"
          label="客户名称"
          placeholder="请输入客户名称"
          :rules="[{ required: true, message: '请输入客户名称' }]">
          <template #left-icon>
            <span class="van-f-red">*</span>
          </template>
        </van-field>
        <van-field
          readonly
          clickable
          name="picker"
          :value="fromData.storeCategoryName"
          label="客户类型"
          placeholder="点击选择客户类型"
          @click="showPicker = true"
          :rules="[{ required: true, message: '请选择客户类型' }]">
          <template #left-icon>
            <span class="van-f-red">*</span>
          </template>
        </van-field>
        <van-field
          readonly
          clickable
          name="picker"
          :value="fromData.orgName"
          label="销售部"
          placeholder="点击选择销售部"
          @click="PickerDept"
          :rules="[{ required: true, message: '请选择销售部' }]">
          <template #left-icon>
            <span class="van-f-red">*</span>
          </template>
        </van-field>
        <!-- <van-row style="border-bottom: 1px solid #ebedf0">
          <van-field
            rows="1"
            autosize
            type="textarea"
            readonly
            clickable
            name="picker"
            :value="fromData.chainName"
            label="经销商名称"
            placeholder="点击选择经销商名称"
            :rules="[
              {
                required: true,
                message: '请选择经销商',
              },
            ]">
            <template #left-icon>
              <span class="van-f-red"></span>
            </template>
          </van-field>
        </van-row> -->
        <van-field
          readonly
          clickable
          name="picker"
          :value="fromData.provinceName"
          label="省(州)"
          placeholder="点击选择省(州)"
          @click="showProvincePicker = true"
          :rules="[{ required: true, message: '请选择省(州)' }]">
          <template #left-icon>
            <span class="van-f-red">*</span>
          </template>
        </van-field>
        <van-field
          readonly
          clickable
          name="picker"
          :value="fromData.cityName"
          label="城市"
          placeholder="点击选择城市"
          @click="showCityPicker = true"
          :rules="[{ required: true, message: '请选择城市' }]">
          <template #left-icon>
            <span class="van-f-red">*</span>
          </template>
        </van-field>
        <van-field
          readonly
          clickable
          name="picker"
          :value="fromData.districtName"
          label="区(县)"
          placeholder="点击选择区(县)"
          @click="showDistrictPicker = true"
          :rules="[{ required: true, message: '请选择区(县)' }]">
          <template #left-icon>
            <span class="van-f-red">*</span>
          </template>
        </van-field>
        <van-field readonly v-model="fromData.cityLevel" label="城市等级">
          <template #left-icon>
            <span class="van-f-red">*</span>
          </template>
        </van-field>
        <!-- <van-field
          readonly
          clickable
          name="picker"
          :value="fromData.townName"
          label="街道"
          placeholder="点击选择街道"
          @click="showTownPicker = true"
          :rules="[{ required: true, message: '请选择街道' }]">
          <template #left-icon>
            <span class="van-f-red">*</span>
          </template>
        </van-field> -->
        <van-field
          v-model="fromData.addressLine"
          label="地址"
          placeholder="地址"
          rows="1"
          autosize
          type="textarea"
          @blur="addressFn"
          :rules="[{ required: true, message: '请选择地址' }]">
          <template #left-icon>
            <span class="van-f-red">*</span>
          </template>
          <template #button>
            <van-button size="small" native-type="button" type="info" @click="fns">
              <van-icon name="location-o" />地图
            </van-button>
          </template>
        </van-field>
        <van-field
          type="tel"
          v-model="fromData.telephone"
          label="门店联系电话"
          placeholder="请输入门店联系电话"
          :rules="[
            {
              required: true,
              validator: FSQValidatePhone,
              message: '请输入门店联系电话',
            },
          ]">
          <template #left-icon>
            <span class="van-f-red">*</span>
          </template>
        </van-field>
        <van-field
          v-model="fromData.contactName"
          label="门店联系人"
          placeholder="请输入门店联系人"
          :rules="[{ required: true, message: '请输入门店联系人' }]">
          <template #left-icon>
            <span class="van-f-red">*</span>
          </template>
        </van-field>
      </van-form>
    </div>
    <!--客户类型-->
    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        show-toolbar
        value-key="dictLabel"
        :columns="storeCategoryList"
        @confirm="onConfirm"
        @cancel="showPicker = false" />
    </van-popup>
    <!--省、市、区、街道-->
    <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>
    <!-- <van-popup v-model="showTownPicker" position="bottom">
      <van-picker
        show-toolbar
        title="街道"
        :columns="townList"
        @confirm="onTownConfirm"
        @cancel="showTownPicker = false" />
    </van-popup> -->
    <!--    部门数据 -->
    <van-popup v-model="showPickerDept" position="bottom">
      <van-picker
        show-toolbar
        title="部门名称"
        :columns="deptList"
        @confirm="onDeptConfirm"
        @cancel="showPickerDept = false" />
    </van-popup>
    <div id="allmap"></div>
    <div style="position: fixed; top: 0; height: 100%; z-index: 3000; width: 100%" v-if="showmap">
      <div id="allmap1" style="height: 100%; width: 100%"></div>
      <div style="position: fixed; z-index: 99999; top: 0; width: 100%; background-color: white">
        <van-search
          v-model="search"
          shape="round"
          background="#0057ba"
          @input="searchFn"
          placeholder="请输入搜索关键词" />
        <div style="height: 200px; overflow: hidden" v-if="searchSHow">
          <div style="height: 100px; min-height: 200px; overflow-y: scroll; padding: 12px">
            <div
              v-for="(itme, index) in mapsearchlist"
              style="border-bottom: 1px solid #eee"
              @click="addressFns(itme)">
              <p>{{ itme.title }}</p>
              <p>{{ itme.address }}</p>
            </div>
          </div>
        </div>
      </div>
      <div class="mapaddress">
        <div class="title">
          <span @click="showmap = false" style="float: left"
            ><van-icon name="cross" size="16"
          /></span>
          <p class="titleText">附近地址信息</p>
          <span style="float: right" @click="confirmMap">确定</span>
        </div>
        <div class="listBox">
          <van-radio-group v-model="addresssb" @change="mapselect">
            <van-radio :name="index" v-for="(item, index) in maplist" :key="index">
              <p style="margin: 4px 0; font-weight: bold">{{ item.title }}</p>
              <p style="margin: 4px 0">{{ item.address }}</p>
            </van-radio>
          </van-radio-group>
          <br />
          <br />
          <br />
          <br />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { phoneCheck, streetQuery } from '@/api/index';
import { updateStore } from '@/api/FSQStore';
import { getPosition, getTicketFun, getGeocoder } from '@/utils/TXApiFun';
import { jsonp } from 'vue-jsonp';
import { getstreetInfoList } from '@/api/addDesigner';
import { qzStoreCategory, getChildDeptList, addQzStore } from '@/api/store';
export default {
  data() {
    return {
      fromData: {
        storeName: '',
        telephone: '',
        storeCategoryName: '',
        provinceName: '',
        cityName: '',
        districtName: '',
        addressLine: '',
        orgName: '',
        contactName: '',
        lat: '',
        lon: '',
        cityNameOld: '',
        districtNameOld: '',
      },
      location: {
        lat1: '34.6174',
        lon1: '112.44039',
      },
      mlon: '',
      mlan: '',
      showProvincePicker: false,
      showCityPicker: false,
      showDistrictPicker: false,
      showTownPicker: false,
      provinceList: [],
      cityList: [],
      districtList: [],
      townList: [],
      provinceCode: '',
      deptShow: false,
      showPickerDept: false,
      deptList: [],
      showPicker: false,
      storeCategoryList: [],
      // 地图信息
      showmap: false,
      search: '',
      searchSHow: false,
      mapsearchlist: [],
      addresssb: -1,
      markers: undefined,
      maplist: [],
    };
  },
  activated() {
    this.fromData = {
      storeName: '',
      telephone: '',
      storeCategoryName: '',
      provinceName: '',
      cityName: '',
      districtName: '',
      addressLine: '',
      orgName: '',
      contactName: '',
      lat: '',
      lon: '',
      cityNameOld: '',
      districtNameOld: '',
    };
    this.showmap = false;
    this.getStoreCategoryList();
    this.getChildDeptListFun();
    // this.toastLoading(0, '加载中...', true);
    // 授权
    getTicketFun(['getLocation', 'chooseImage', 'uploadImage']).then(() => {
      this.$nextTick(() => {
        this.getLocation();
      });
    });
  },
  methods: {
    getLocation() {
      getPosition()
        .then((res) => {
          let { TXisBD, resData } = res;
          this.mlon = resData.longitude;
          this.mlan = resData.latitude;
          this.location = TXisBD;
          this.fromData.lat = TXisBD.lat;
          this.fromData.lon = TXisBD.lon;
          this.location.lat1 = resData.latitude;
          this.location.lon1 = resData.longitude;
          this.addVisits();
          this.initData();
        })
        .catch((error) => {
          // this.beforeAddFn();
          this.$dialog.alert({
            message: error,
          });
        });
    },
    initData() {
      getGeocoder({ latitude: this.location.lat1, longitude: this.location.lon1 })
        .then((res) => {
          if (res.status == 0 && res.result) {
            let result = res.result;
            this.fromData.cityNameOld = result.ad_info.city;
            this.fromData.districtNameOld = result.ad_info.district;
            let addresses = result.formatted_addresses; // 描述性地址
            getstreetInfoList({ districtName: result.ad_info.district }).then((response) => {
              if (response.code == 200 && response.data) {
                this.fromData.province = response.data.provinceCode;
                this.fromData.city = response.data.cityCode;
                this.fromData.district = response.data.countyCode;
                this.fromData.provinceName = response.data.provinceName;
                this.fromData.cityName = response.data.cityName;
                this.fromData.districtName = response.data.countyName;
                this.fromData.cityLevel = response.data.countyLevel;
                this.$nextTick(() => {
                  this.getStreetQuery();
                  this.getStreetQuery('1');
                  this.getStreetQuery('2');
                  // this.getStreetQuery('3');
                });
              }
            });
            if (addresses) {
              this.fromData.addressLine = addresses.recommend;
              localStorage.setItem('locationRemark', addresses.recommend);
            }
          } else {
            this.toastLoading().clear();
          }
        })
        .catch(() => {
          this.toastLoading().clear();
        });
    },
    addVisits() {
      var that = this;
      var map = new TMap.Map('allmap', {
        zoom: 15,
        center: new TMap.LatLng(39.986785, 116.301012),
      });
      var geocoder = new TMap.service.Geocoder(); // 新建一个正逆地址解析类
      var markers = new TMap.MultiMarker({
        map: map,
        geometries: [],
      });
      markers.setGeometries([]);
      var location = new TMap.LatLng(that.location.lat1, that.location.lon1);
      map.setCenter(location);
      markers.updateGeometries([{ id: 'marker', position: location }]);
      geocoder
        .getAddress({ location: location })
        .then(function (result) {
          var addresses = result.result.formatted_addresses;
          that.fromData.cityNameOld = result.result.ad_info.city;
          that.fromData.districtNameOld = result.result.ad_info.district;
          that.fromData.addressLine = addresses.recommend;
          localStorage.setItem('locationRemark', addresses.recommend);
        })
        .catch((error) => console.error('Geocoding error:', error));
    },
    clickSubmit(values) {
      this.$refs.tabstoreVal.submit();
    },
    onConfirm(value) {
      if (!value) return;
      this.fromData.storeCategoryName = value.dictLabel;
      this.fromData.storeCategory = value.dictValue;
      this.showPicker = false;
    },
    getStoreCategoryList() {
      qzStoreCategory().then((res) => {
        if (res.code == 200) {
          this.storeCategoryList = res.data;
          this.fromData.storeCategoryName = this.storeCategoryList[0].dictLabel;
          this.fromData.storeCategory = this.storeCategoryList[0].dictValue;
        }
      });
    },
    onSubmit(value) {
      this.toastLoading(0, '提交中...', true);
      console.log(this.fromData);
      addQzStore(this.fromData).then((res) => {
        this.toastLoading().clear();
        if (res.code == 200) {
          this.$dialog
            .confirm({
              title: '系统提示',
              message: '添加成功',
              showCancelButton: false,
            })
            .then(() => {
              this.onClickLeft();
            });
        }
      });
    },
    FSQValidatePhone(telephone) {
      return new Promise((resolve, reject) => {
        if (telephone == '') {
          resolve();
        }
        var telrg = /^1[123456789]\d{9}$/;
        if (telephone.trim() == '') {
          reject();
        } else if (!telrg.test(telephone)) {
          this.Toast('手机号格式错误');
          reject();
        } else {
          phoneCheck({ phoneNumber: telephone }).then((res) => {
            if (res.code == 200) {
              resolve();
            } else {
              this.Toast('手机号格式错误');
              reject();
            }
          });
        }
      });
    },
    addressFn() {
      localStorage.setItem('locationRemark', this.fromData.addressLine);
    },
    fns() {
      this.search = '';
      this.showmap = true;
      jsonp(
        'https://apis.map.qq.com/ws/place/v1/search?boundary=nearby(' +
          this.location.lat1 +
          ',' +
          this.location.lon1 +
          ',1000,0)&page_size=10&page_index=1&orderby=_distance&output=jsonp&key=WLCBZ-HRM6L-YOMPV-ME62B-AQOG6-JUBW6'
      ).then((res) => {
        this.maplist = res.data;
        setTimeout(() => {
          this.addVisits1();
        });
      });
      this.addresssb = -1;
    },
    confirmMap() {
      if (this.addresssb > -1) {
        this.fromData.addressLine = this.maplist[this.addresssb].address;
      }
      this.showmap = false;
    },
    addressFns(val) {
      var that = this;
      setTimeout(() => {
        that.searchSHow = false;
        that.map.setCenter(new TMap.LatLng(val.location.lat, val.location.lng));
        that.markers1.updateGeometries([
          {
            id: 'marker',
            styleId: 'marker',
            position: new TMap.LatLng(val.location.lat, val.location.lng),
          },
        ]);
        that.maplist = [];
        jsonp(
          'https://apis.map.qq.com/ws/place/v1/search?boundary=nearby(' +
            val.location.lat +
            ',' +
            val.location.lng +
            ',1000,0)&page_size=20&page_index=1&orderby=_distance&output=jsonp&key=WLCBZ-HRM6L-YOMPV-ME62B-AQOG6-JUBW6'
        ).then((res) => {
          that.maplist = res.data;
          that.marker.setGeometries([]);
          setTimeout(() => {
            for (let p = 0; p < res.data.length; p++) {
              that.marker.updateGeometries([
                {
                  id: res.data[p].id,
                  position: new TMap.LatLng(res.data[p].location.lat, res.data[p].location.lng),
                },
              ]);
            }
          });
        });
        that.addresssb = -1;
      });
    },
    searchFn(val) {
      this.searchSHow = false;
      var that = this;
      jsonp(
        'https://apis.map.qq.com/ws/place/v1/suggestion?keyword=' +
          val +
          '&location=' +
          this.location.lat1 +
          ',' +
          this.location.lon1 +
          '&output=jsonp&key=WLCBZ-HRM6L-YOMPV-ME62B-AQOG6-JUBW6&page_size=20&region_fix=1'
      ).then((res) => {
        this.searchSHow = true;
        that.mapsearchlist = res.data;
      });
    },
    mapselect(val) {
      if (val > -1) {
        this.markers.updateGeometries([
          {
            id: 'markers1',
            styleId: 'abc',
            position: new TMap.LatLng(
              this.maplist[val].location.lat,
              this.maplist[val].location.lng
            ),
          },
        ]);
      }
    },
    addVisits1() {
      var that = this;
      var map = new TMap.Map('allmap1', {
        zoom: 15,
        center: new TMap.LatLng(that.location.lat1, that.location.lon1),
      });
      var markers = new TMap.MultiMarker({
        id: 'markers',
        map: map,
        geometries: [],
        styles: {
          marker: new TMap.MarkerStyle({
            width: 32,
            height: 40,
            anchor: { x: 16, y: 32 },
            src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/marker-pink.png',
          }),
        },
      });
      markers.setGeometries([]);
      var location = new TMap.LatLng(that.location.lat1, that.location.lon1);
      map.setCenter(location);
      markers.updateGeometries([
        {
          id: 'marker',
          styleId: 'marker',
          position: location,
        },
      ]);
      var marker = new TMap.MultiMarker({
        map: map,
        styles: {
          default: new TMap.MarkerStyle({
            width: 32,
            height: 40,
            anchor: {
              x: 17,
              y: 21,
            },
            src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/marker_blue.png',
          }),
        },
        geometries: [],
      });
      for (let p = 0; p < this.maplist.length; p++) {
        marker.updateGeometries([
          {
            id: this.maplist[p].id,
            position: new TMap.LatLng(this.maplist[p].location.lat, this.maplist[p].location.lng),
          },
        ]);
      }

      var markers1 = new TMap.MultiMarker({
        map: map,
        mapgeometries: [
          {
            id: 'markers1',
            position: new TMap.LatLng(0, 0),
          },
        ],
        styles: {
          abc: new TMap.MarkerStyle({
            width: 32,
            height: 40,
            anchor: { x: 16, y: 32 },
            src: require('@/assets/marker_blue.png'),
          }),
        },
      });
      markers1.setGeometries([]);
      this.markers = markers1;
      this.map = map;
      this.markers1 = markers;
      this.marker = marker;
      map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.SCALE);
      map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ROTATION);
      map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ZOOM);
    },
    onProvinceConfirm(value) {
      this.fromData.provinceName = value.text;
      this.fromData.province = value.provinceCode;
      this.fromData.cityName = '';
      this.fromData.city = '';
      this.fromData.districtName = '';
      this.fromData.countyCode = '';
      // this.fromData.townName = '';
      // this.fromData.townCode = '';
      this.countyCode = '';
      this.cityCode = '';
      this.provinceCode = value.provinceCode;
      this.getStreetQuery('1');
      this.showProvincePicker = false;
    },
    onCityConfirm(value) {
      this.fromData.cityName = value.text;
      this.fromData.city = value.cityCode;
      this.fromData.districtName = '';
      this.fromData.district = '';
      // this.fromData.townName = '';
      // this.fromData.townCode = '';
      this.countyCode = '';
      this.cityCode = value.cityCode;
      this.getStreetQuery('2');
      this.showCityPicker = false;
    },
    onDistrictConfirm(value) {
      this.fromData.districtName = value.text;
      this.fromData.district = value.countyCode;
      // this.fromData.townName = '';
      // this.fromData.townCode = '';
      this.countyCode = value.countyCode;
      this.fromData.cityLevel = value.countyLevel;
      // this.getStreetQuery('3');
      this.showDistrictPicker = false;
    },
    onTownConfirm(value) {
      this.fromData.townName = value.text;
      this.fromData.townCode = value.townCode;
      this.showTownPicker = false;
    },
    getStreetQuery(type) {
      var provinceCode = this.fromData.province;
      var cityCode = this.fromData.city;
      var countyCode = this.fromData.district;
      if (type == '1') {
        cityCode = '';
        countyCode = '';
      } else if (type == '2') {
        countyCode = '';
      } else if (type == '3') {
        console.log('ok');
      } 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('请求超时');
          }
        }
      );
    },
    PickerDept() {
      this.showPickerDept = true;
    },
    onDeptConfirm(value) {
      this.fromData.orgName = value.text;
      localStorage.setItem('orgName', value.text);
      this.fromData.orgId = value.deptId;
      // this.fromData.chainCode = '';
      // this.fromData.chainName = '';
      this.showPickerDept = false;
    },
    getChildDeptListFun() {
      getChildDeptList({
        cityName: this.fromData.cityName,
        districtName: this.fromData.districtName,
      }).then((res) => {
        var deptList = [];
        for (var t1 = 0; t1 < res.data.length; t1++) {
          deptList.push({
            deptId: res.data[t1].deptId,
            text: res.data[t1].deptName,
          });
        }
        this.deptList = deptList;
      });
    },
    // getChainsByDeptCode(deptId, ifJzStoreType, type) {
    //   getChainsByDeptCode({
    //     cityName: this.fromData.cityNameOld,
    //     districtName: this.fromData.districtNameOld,
    //     deptId: deptId,
    //     ifJzStoreType: ifJzStoreType,
    //     storeCategory: this.fromData.storeCategory,
    //   }).then((res) => {
    //     // if (this.ChainsList.length == 1) {
    //     //   this.fromData.chainName = this.ChainsList[0].chainName;
    //     //   this.fromData.chainCode = this.ChainsList[0].chainCode;
    //     // }
    //     if (res.data.sfaOrderProducts != null) {
    //       res.data.sfaOrderProducts.forEach((item) => {
    //         item.orderNum = '';
    //         item.storeProductId = item.orderProductId;
    //       });
    //       this.sfaOrderProducts = res.data.sfaOrderProducts;
    //     }
    //     var deptList = [];
    //     for (var t1 = 0; t1 < res.data.deptList.length; t1++) {
    //       deptList.push({
    //         deptId: res.data.deptList[t1].deptId,
    //         text: res.data.deptList[t1].deptName,
    //       });
    //     }
    //     this.deptList = deptList;
    //     if (deptList.length == 1) {
    //       this.fromData.orgId = deptList[0].deptId;
    //       this.fromData.orgName = deptList[0].text;
    //       localStorage.setItem('orgName', deptList[0].text);
    //       this.deptShow = false;
    //       this.ChainsList = res.data.sfaChains;
    //     } else {
    //       this.ChainsList = [];
    //       this.deptShow = true;
    //     }
    //   });
    // },
    onClickLeft() {
      this.$router.go(-1);
    },
  },
};
</script>
<style lang="scss" scoped>
.FSQStoreDetail {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  .header {
    height: 46px;
  }
  .content {
    flex: 1;
    overflow-y: auto;
  }
}
</style>
<style lang="scss">
.van-dialog__confirm,
.van-dialog__confirm:active {
  color: #0057ba;
}

.navBarTOP {
  position: fixed;
  width: 100%;
  z-index: 2;
  top: 0;
}
#allmap {
  width: 100px;
  height: 100px;
  position: fixed;
  left: -2000px;
}
.typeRadioStore .van-radio {
  margin: 10px;
}
.typeRadioStore .van-radio__icon .van-icon {
  border: 0 !important;
}
.typeRadioStore .van-radio__icon--checked .van-icon {
  color: #1989fa;
  background-color: transparent;
  border-color: transparent;
}
.typeRadioStore .van-cell {
  padding: 0 16px;
  line-height: 40px;
}
.container .typeRadioStore .van-cell__title {
  height: 40px;
}
.typeRadioStore1 .van-radio__icon .van-icon {
  border-radius: 2px;
  border-color: #ccc !important;
}
.typeRadioStore1 .van-radio__icon--checked .van-icon {
  background-color: transparent;
  color: #1989fa;
  border-color: #1989fa !important;
}
.typeRadioStore1 .van-radio[aria-checked='true'] .van-radio__label {
  color: #1989fa;
}
.morelaji .van-cell {
  padding: 10px 0;
}
.storeAdd {
  .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;
      .sfaStoreChainsContactList {
        padding: 3px;
      }
    }
  }
}
</style>