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

<template>
  <div class="addDesignerPage">
    <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
          v-model="fromData.storeName"
          label="设计师名称"
          placeholder="请输入设计师名称"
          :rules="[{ required: true, message: '请输入设计师名称' }]">
          <template #left-icon>
            <span class="van-f-red">*</span>
          </template>
        </van-field>
        <van-field
          type="tel"
          v-model="fromData.telephone"
          label="手机号"
          placeholder="请输入手机号"
          :rules="[
            {
              required: true,
              validator: validatePhone,
              message: '请输入手机号',
            },
          ]">
          <template #left-icon>
            <span class="van-f-red">*</span>
          </template>
        </van-field>
        <van-row style="border-bottom: 1px solid #ebedf0">
          <van-col span="20">
            <van-field
              rows="1"
              autosize
              type="textarea"
              readonly
              clickable
              name="picker"
              :value="fromData.chainName"
              label="经销商名称"
              placeholder="点击选择经销商名称"
              @click="showPickerChainsList = true"
              :rules="[
                {
                  required: true,
                  message: '请选择经销商',
                },
              ]">
              <template #left-icon>
                <span class="van-f-red">*</span>
              </template>
            </van-field>
          </van-col>
          <van-col span="4">
            <van-button
              size="small"
              type="info"
              style="margin-top: 6px"
              native-type="button"
              @click="moreTypeShowfn">
              <van-icon name="list-switching" />更多
            </van-button>
          </van-col>
        </van-row>
        <van-field
          readonly
          clickable
          name="calendar"
          :value="fromData.enterTime"
          label="会员录入时间"
          placeholder="请选择日期"
          @click="showCalendar = 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.storeCategoryName"
          label="会员属性"
          placeholder="请选择会员属性"
          @click="showPicker = true"
          :rules="[
            {
              required: true,
              message: '请选择会员属性',
            },
          ]">
          <template #left-icon>
            <span class="van-f-red">*</span>
          </template>
        </van-field>
        <van-field
          v-model="fromData.designerCompanyName"
          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.provinceName"
          label="省(州)"
          placeholder="点击选择省(州)"
          @click="showProvincePicker = true">
          <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">
          <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">
          <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
          v-model="fromData.designerStoreRemark"
          rows="2"
          autosize
          type="textarea"
          label="备注"
          placeholder="请输入备注">
        </van-field>
      </van-form>
    </div>
    <!--经销商-->
    <van-popup
      v-model="showPickerChainsList"
      position="bottom"
      class="agencyBox"
      :close-on-click-overlay="false">
      <van-picker
        show-toolbar
        :columns="ChainsList"
        value-key="chainName"
        @confirm="onConfirmChainsList"
        @cancel="showPickerChainsList = false" />
    </van-popup>
    <!-- 搜索更多经销商 -->
    <van-popup v-model="moreTypeShow" position="bottom" style="height: 80%; font-size: 14px">
      <van-row style="background-color: #f5f5f5">
        <van-col span="20">
          <van-field
            left-icon="search"
            style="margin-top: 2px; border-radius: 6px; overflow: hidden"
            v-model="searchChainName"
            label=""
            placeholder="请输入关键词"
            clearable />
        </van-col>
        <van-col
          span="4"
          style="text-align: center; line-height: 48px"
          @click="getDesignerChainsInfo('search')">
          <div style="background-color: #0057ba; color: #fff">搜索</div></van-col
        >
      </van-row>
      <van-picker
        show-toolbar
        :columns="chainsData"
        value-key="chainName"
        @confirm="onConfirmChainsList"
        @cancel="moreTypeShow = false" />
    </van-popup>
    <!-- 时间选择 -->
    <van-calendar
      v-model="showCalendar"
      @confirm="onConfirmInputTime"
      color="#0057ba"
      :show-confirm="false" />
    <!--会员属性-->
    <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> -->
    <!-- 地图选址 -->
    <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 { streetQuery } from '@/api/index';
import {
  designerStoreCategory,
  designerChainsInfo,
  addDesigner,
  getstreetInfoList,
} from '@/api/addDesigner';
import { validatePhone } from '@/utils';
import { jsonp } from 'vue-jsonp';
import { getPosition, getTicketFun, getMapPoi, getkeywordPoi, getGeocoder } from '@/utils/TXApiFun';
export default {
  data() {
    return {
      fromData: {
        storeName: '',
        telephone: '',
        chainName: '',
        enterTime: '',
        storeCategoryName: '',
        storeCategory: '',
        designerCompanyName: '',
        provinceName: '',
        cityName: '',
        districtName: '',
        addressLine: '',
        lat: '',
        lon: '',
        designerStoreRemark: '',
      },
      showPickerChainsList: false, //经销商列表弹框
      ChainsList: [], //经销商列表
      chainsData: [],
      moreTypeShow: false,
      searchChainName: '',
      showCalendar: false,
      showPicker: false,
      storeCategoryList: [],
      showProvincePicker: false,
      showCityPicker: false,
      showDistrictPicker: false,
      provinceCode: '',
      cityCode: '',
      provinceList: [],
      cityList: [],
      districtList: [],
      townList: [],
      maplist: [],
      search: '',
      showmap: false,
      searchSHow: false,
      mapsearchlist: [],
      addresssb: -1,
      mlon: '',
      mlan: '',
      location: {},
    };
  },
  activated() {
    this.toastLoading(0, '加载中...', true);
    // 授权
    getTicketFun(['getLocation', 'chooseImage', 'uploadImage']).then(() => {
      this.getLocation();
    });
    // 获取会员属性
    this.getStoreCategoryList();
    // 获取经销商
    this.getDesignerChainsInfo();
  },
  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.initData();
        })
        .catch((error) => {
          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.$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();
        });
    },
    moreTypeShowfn() {
      this.chainsData = [];
      this.moreTypeShow = true;
    },
    // // 搜索经销商列表
    // getChainsByDeptCodesearch(chainName) {
    //   this.chainsData = [];
    //   getChainsByDeptCode({
    //     chainName: this.searchChainName,
    //     cityName: this.fromData.cityNameOld,
    //     districtName: this.fromData.districtNameOld,
    //     // deptId: this.fromData.orgId,
    //     // ifJzStoreType: this.fromData.ifJzStoreType,
    //     // storeCategory: this.fromData.storeCategory,
    //   }).then((res) => {
    //     this.chainsData = res.data.sfaChains;
    //     this.chainsData.push({});
    //     this.chainsData.pop();
    //   });
    // },
    onConfirmChainsList(value) {
      if (!value) return false;
      this.fromData.chainName = value.chainName;
      this.fromData.chainCode = value.chainCode;
      this.showPickerChainsList = false;
      this.moreTypeShow = false;
    },
    onConfirmInputTime(date) {
      this.showCalendar = false;
      this.fromData.enterTime = this.parseTime(date, '{y}-{m}-{d}');
    },
    onConfirm(value) {
      if (!value) return;
      this.fromData.storeCategoryName = value.dictLabel;
      this.fromData.storeCategory = value.dictValue;
      this.showPicker = false;
    },
    getStoreCategoryList() {
      designerStoreCategory().then((res) => {
        if (res.code == 200) {
          this.storeCategoryList = res.data;
          this.fromData.storeCategoryName = this.storeCategoryList[0].dictLabel;
          this.fromData.storeCategory = this.storeCategoryList[0].dictValue;
        }
      });
    },
    getDesignerChainsInfo(type) {
      this.ChainsList = [];
      this.chainsData = [];
      let chainName = type == 'search' ? this.searchChainName : '';
      designerChainsInfo({ chainName: chainName }).then((res) => {
        if (res.code == 200) {
          if (type == 'search') {
            this.chainsData = res.data;
          } else {
            this.ChainsList = res.data;
          }
        }
      });
    },
    onProvinceConfirm(value) {
      this.fromData.provinceName = value.text;
      this.fromData.province = value.provinceCode;
      this.fromData.cityName = '';
      this.fromData.city = '';
      this.fromData.districtName = '';
      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.cityCode = value.cityCode;
      this.getStreetQuery('2');
      this.showCityPicker = false;
    },
    onDistrictConfirm(value) {
      this.fromData.districtName = value.text;
      this.fromData.district = value.countyCode;
      this.fromData.cityLevel = value.countyLevel;
      this.showDistrictPicker = 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('请求超时');
          }
        }
      );
    },
    fns() {
      this.search = '';
      getPosition()
        .then((res) => {
          let { TXisBD, resData } = res;
          this.pLat = resData.latitude;
          this.pLot = resData.longitude;
          if (this.fromData.lon == '') {
            this.fromData.lon = TXisBD.lon;
            this.fromData.lat = TXisBD.lat;
          }
          this.showmap = true;
          // 地点搜索 获取500米范围poi点
          getMapPoi({ latitude: this.pLat, longitude: this.pLot }).then((res) => {
            console.log(res);
            this.maplist = res.data;
            setTimeout(() => {
              this.addVisits1('1');
            });
          });
        })
        .catch((error) => {
          this.$dialog.alert({
            message: error,
          });
        });
      this.addresssb = -1;
    },
    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);
    },
    searchFn(val) {
      this.searchSHow = false;
      getkeywordPoi({ latitude: this.location.lat1, longitude: this.location.lon1 }, val).then(
        (res) => {
          // 不显示下拉选择
          if (!res.data.length && !val) {
            this.searchSHow = false;
          } else {
            this.searchSHow = true;
          }
          // 联想下拉选
          this.mapsearchlist = res.data;
        }
      );
    },
    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;
      });
    },
    confirmMap() {
      if (this.addresssb > -1) {
        this.fromData.addressLine = this.maplist[this.addresssb].address;
      }
      this.showmap = false;
    },
    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
            ),
          },
        ]);
      }
    },
    addressFn() {
      localStorage.setItem('locationRemark', this.fromData.addressLine);
    },
    clickSubmit(values) {
      this.$refs.tabstoreVal.submit();
    },
    onSubmit(value) {
      this.toastLoading(0, '提交中...', true);
      addDesigner(this.fromData).then((res) => {
        this.toastLoading().clear();
        if (res.code == 200) {
          this.$dialog
            .confirm({
              title: '系统提示',
              message: '添加成功',
              showCancelButton: false,
            })
            .then(() => {
              this.onClickLeft();
            });
        }
      });
    },
    onClickLeft() {
      this.$router.go(-1);
    },
  },
};
</script>
<style lang="scss" scoped>
.addDesignerPage {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  .header {
    height: 46px;
  }
  .content {
    flex: 1;
    overflow-y: auto;
  }
}
</style>