|
|
@@ -0,0 +1,960 @@
|
|
|
+<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="getStoreCategoryListFun"
|
|
|
+ :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
|
|
|
+ v-model="fromData.contactName"
|
|
|
+ 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: FSQValidatePhone,
|
|
|
+ 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, getById } from '@/api/index';
|
|
|
+import { getPosition, getTicketFun, getGeocoder } from '@/utils/TXApiFun';
|
|
|
+import { jsonp } from 'vue-jsonp';
|
|
|
+import { getstreetInfoList } from '@/api/addDesigner';
|
|
|
+import { qzStoreCategory, getChildDeptList, addQzStore, updateQzStore } 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.toastLoading(0, '加载中...', true);
|
|
|
+ // 授权
|
|
|
+ getTicketFun(['getLocation', 'chooseImage', 'uploadImage']).then(() => {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.getLocation();
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getDetail() {
|
|
|
+ getById({ storeId: this.$route.query.id }).then((res) => {
|
|
|
+ this.toastLoading().clear();
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.fromData = res.data;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ 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();
|
|
|
+ // 获取详情
|
|
|
+ this.getDetail();
|
|
|
+ })
|
|
|
+ .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();
|
|
|
+ },
|
|
|
+ getStoreCategoryListFun() {
|
|
|
+ this.getStoreCategoryList();
|
|
|
+ this.showPicker = true;
|
|
|
+ },
|
|
|
+ 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);
|
|
|
+ updateQzStore(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®ion_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.getChildDeptListFun();
|
|
|
+ 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>
|
