设计师招募

src/views/storeManagement/addDesignerPage.vue

@@ -64,6 +64,116 @@
             </van-button>
           </van-col>
         </van-row>
+        <van-field
+          readonly
+          clickable
+          name="calendar"
+          :value="fromData.inputTime"
+          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.companyName"
+          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
+          readonly
+          clickable
+          name="picker"
+          :value="fromData.townName"
+          label="街道"
+          placeholder="点击选择街道"
+          @click="showTownPicker = 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">
+          <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-form>
     </div>
     <!--经销商-->
@@ -105,6 +215,98 @@
         @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
+        :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>
 
@@ -129,6 +331,8 @@ import {
   getpotentialCustomerTypeList,
 } from '@/api/index';
 import { validatePhone } from '@/utils';
+import { jsonp } from 'vue-jsonp';
+import { getPosition, getTicketFun } from '@/utils/TXApiFun';
 export default {
   data() {
     return {
@@ -136,15 +340,80 @@ export default {
         storeName: '',
         telephone: '',
         chainName: '',
+        inputTime: '',
+        storeCategoryName: '',
+        storeCategory: '',
+        companyName: '',
+        provinceName: '',
+        cityName: '',
+        districtName: '',
+        // townName: '',
+        addressLine: '',
+        lat: '',
+        lon: '',
       },
       showPickerChainsList: false, //经销商列表弹框
       ChainsList: [], //经销商列表
       chainsData: [],
       moreTypeShow: false,
       searchChainName: '',
+      showCalendar: false,
+      showPicker: false,
+      storeCategoryList: [],
+      showProvincePicker: false,
+      showCityPicker: false,
+      showDistrictPicker: false,
+      provinceCode: '',
+      cityCode: '',
+      countyCode: '',
+      provinceList: [],
+      cityList: [],
+      districtList: [],
+      townList: [],
+      maplist: [],
+      search: '',
+      showmap: false,
+      searchSHow: false,
+      mapsearchlist: [],
+      addresssb: -1,
+      mlon: '',
+      mlan: '',
+      location: {},
     };
   },
+  activated() {
+    // 授权
+    getTicketFun(['getLocation', 'chooseImage', 'uploadImage']).then(() => {
+      this.$nextTick(() => {
+        this.getLocation();
+      });
+    });
+    // 获取会员属性
+    this.getStoreCategoryList();
+    // 获取省市区
+    this.getStreetQuery();
+  },
   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();
+        })
+        .catch((error) => {
+          this.beforeAddFn();
+          this.$dialog.alert({
+            message: error,
+          });
+        });
+    },
     moreTypeShowfn() {
       this.chainsData = [];
       this.moreTypeShow = true;
@@ -165,11 +434,302 @@ export default {
       });
     },
     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.inputTime = this.parseTime(date, '{y}-{m}-{d}');
+    },
+    onConfirm(value) {
+      if (!value) return;
+      this.fromData.storeCategoryName = value.text;
+      this.fromData.storeCategory = value.dictValue;
+      this.showPicker = false;
+    },
+    getStoreCategoryList() {
+      this.storeCategoryList = [
+        {
+          dictValue: 1,
+          text: '设计师',
+        },
+        {
+          dictValue: 2,
+          text: '采购',
+        },
+        {
+          dictValue: 3,
+          text: '项目经理',
+        },
+      ];
+    },
+    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;
+    },
+    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 = '';
+      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;
+    },
+    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: txmapimg3,
+          }),
+        },
+      });
+      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;
+      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;
+        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);
+    },
     onSubmit() {},
     onClickLeft() {
       this.$router.go(-1);