add
This commit is contained in:
parent
5e2a76a98a
commit
1361b6e11e
|
|
@ -63,3 +63,4 @@
|
|||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=V4LBZ-UKCHA-EUNK7-CUH4F-HOXVO-YTF56"></script>
|
||||
|
|
|
|||
|
|
@ -17,12 +17,14 @@
|
|||
"css-color-function": "^1.3.3",
|
||||
"echarts": "^5.3.3",
|
||||
"element-plus": "2.2.27",
|
||||
"fetch-jsonp": "^1.3.0",
|
||||
"highlight.js": "^11.6.0",
|
||||
"nprogress": "^0.2.0",
|
||||
"pinia": "^2.0.14",
|
||||
"vue": "^3.2.37",
|
||||
"vue-clipboard3": "^2.0.0",
|
||||
"vue-echarts": "^6.2.3",
|
||||
"vue-jsonp": "^2.0.0",
|
||||
"vue-router": "^4.0.16",
|
||||
"vue3-video-play": "1.3.1-beta.6",
|
||||
"vuedraggable": "^4.1.0"
|
||||
|
|
@ -4070,6 +4072,11 @@
|
|||
"reusify": "^1.0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/fetch-jsonp": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/fetch-jsonp/-/fetch-jsonp-1.3.0.tgz",
|
||||
"integrity": "sha512-hxCYGvmANEmpkHpeWY8Kawfa5Z1t2csTpIClIDG/0S92eALWHRU1RnGaj86Tf5Cc0QF+afSa4SQ4pFB2rFM5QA=="
|
||||
},
|
||||
"node_modules/file-entry-cache": {
|
||||
"version": "6.0.1",
|
||||
"resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
|
||||
|
|
@ -8486,6 +8493,11 @@
|
|||
"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/vue-jsonp": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/vue-jsonp/-/vue-jsonp-2.0.0.tgz",
|
||||
"integrity": "sha512-Mzd9GNeuKP5hHFDWZNMWOsCuMILSkA6jo2l4A02wheFz3qqBzH7aSEFTey1BRCZCLizlaf1EqJ5YUtF392KspA=="
|
||||
},
|
||||
"node_modules/vue-router": {
|
||||
"version": "4.3.0",
|
||||
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.3.0.tgz",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,20 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
export function apigetProvinceLists() {
|
||||
return request.get({ url: '/geo/province' })
|
||||
}
|
||||
export function apicityLists(params: any) {
|
||||
return request.get({ url: '/geo/city', params })
|
||||
}
|
||||
|
||||
export function apiAreaLists(params: any) {
|
||||
return request.get({ url: '/geo/area', params })
|
||||
}
|
||||
|
||||
export function apiStreetLists(params: any) {
|
||||
return request.get({ url: '/geo/street', params })
|
||||
}
|
||||
|
||||
export function apiVillageLists(params: any) {
|
||||
return request.get({ url: '/geo/village', params })
|
||||
}
|
||||
|
|
@ -0,0 +1,226 @@
|
|||
<template>
|
||||
<el-card>
|
||||
<div class="w-[600px]">
|
||||
<el-form ref="formRef" :model="formData" label-width="120px" :rules="formRules">
|
||||
|
||||
<el-tabs v-model="activeName" class="demo-tabs">
|
||||
<el-tab-pane label="基础设置" name="first">
|
||||
<el-form-item label="门店名称" prop="title">
|
||||
<el-input v-model="formData.title" clearable placeholder="请输入店员名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="门店手机号" prop="title">
|
||||
<el-input v-model="formData.title" clearable placeholder="请输入店员名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="营业状态" prop="title">
|
||||
<el-switch v-model="formData.status" :active-value="1" :inactive-value="0"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="营业时间" prop="title">
|
||||
<el-time-picker v-model="formData.times" is-range range-separator="-"
|
||||
start-placeholder="开始时间" end-placeholder="结束时间" value-format="HH:mm:ss" />
|
||||
</el-form-item>
|
||||
<el-form-item label="门店地址" prop="title">
|
||||
<el-row>
|
||||
<el-col :span="6">
|
||||
<el-select class="flex-1" v-model="formData.city_id" clearable placeholder="请选择"
|
||||
@change="getCityList(formData.province_id, false)">
|
||||
<el-option v-for="(item, index) in address.provinceList" :key="index"
|
||||
:label="item.province_name" :value="parseInt(item.province_code)" />
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-select class="flex-1" v-model="formData.city_id" clearable placeholder="请选择"
|
||||
@change="getAreaList(formData.city_id, false)">
|
||||
<el-option v-for="(item, index) in address.cityList" :key="index"
|
||||
:label="item.city_name" :value="parseInt(item.city_code)" />
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-select class="flex-1" v-model="formData.area_id" clearable placeholder="请选择"
|
||||
@change="getTownList(formData.area_id, false)">
|
||||
<el-option v-for="(item, index) in address.areaList" :key="index"
|
||||
:label="item.area_name" :value="parseInt(item.area_code)" />
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-select class="flex-1" v-model="formData.street_id" clearable placeholder="请选择"
|
||||
@change="getVilllageList(formData.street_id, false)">
|
||||
<el-option v-for="(item, index) in address.townList" :key="index"
|
||||
:label="item.street_name" :value="parseInt(item.street_code)" />
|
||||
</el-select>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
<el-form-item label="配送范围(km)" prop="title">
|
||||
<el-input-number v-model="formData.num" :step="1" />
|
||||
</el-form-item>
|
||||
<el-form-item label="门店详细地址" prop="title">
|
||||
<!-- <el-input v-model="formData.title" clearable placeholder="请输入手机号码" /> -->
|
||||
<!-- <myMap></myMap> -->
|
||||
|
||||
</el-form-item>
|
||||
</el-tab-pane>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<el-tab-pane label="配送设置" name="second">
|
||||
<el-form-item label="同城配送" prop="title">
|
||||
<el-switch v-model="formData.status" :active-value="1" :inactive-value="0"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="到店自提" prop="title">
|
||||
<el-switch v-model="formData.status" :active-value="1" :inactive-value="0"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="默认配送方式" prop="title">
|
||||
<el-radio-group v-model="formData.types" class="ml-4">
|
||||
<el-radio label="1" size="large">配送</el-radio>
|
||||
<el-radio label="2" size="large">自提</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-form>
|
||||
|
||||
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="oaPlanEdit">
|
||||
import type { FormInstance } from 'element-plus'
|
||||
import { timeFormat } from '@/utils/util'
|
||||
import { apicityLists, apiAreaLists, apiStreetLists, apigetProvinceLists } from "@/api/address"
|
||||
import myMap from "./myMap/index.vue"
|
||||
import axios from 'axios';
|
||||
|
||||
axios.get(`https://apis.map.qq.com/ws/place/v1/search?boundary=nearby(40.040589,116.273543,1000)&keyword=公园&page_size=10&page_index=1&key=SMJBZ-WCHK4-ZPZUA-DSIXI-XDDVQ-XWFX7`)
|
||||
.then(function (response) {
|
||||
console.log(54545)
|
||||
})
|
||||
.catch(function (error) {
|
||||
// 处理错误情况
|
||||
})
|
||||
.finally(function () {
|
||||
// 总是会执行
|
||||
});
|
||||
|
||||
const formRef = shallowRef<FormInstance>()
|
||||
const activeName = ref('first')
|
||||
// 地址
|
||||
const address = reactive({
|
||||
provinceList: [],
|
||||
cityList: [],
|
||||
areaList: [],
|
||||
townList: [],
|
||||
})
|
||||
// 表单数据
|
||||
const formData = reactive({
|
||||
id: '',
|
||||
status: 0,
|
||||
title: '',
|
||||
province_id: '510000',
|
||||
city_id: '',
|
||||
area_id: '',
|
||||
street_id: '',
|
||||
types: '1',
|
||||
times: '',
|
||||
num: "",
|
||||
start_time: '',
|
||||
end_time: '',
|
||||
remind_type: '',
|
||||
remark: '',
|
||||
})
|
||||
|
||||
const chekcDate = (rule: any, value: any, callback: any) => {
|
||||
if (new Date(formData.end_time) < new Date(formData.start_time)) {
|
||||
callback(new Error('结束时间不能早于开始时间'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
|
||||
// 表单验证
|
||||
const formRules = reactive<any>({
|
||||
end_time: [{
|
||||
required: true,
|
||||
message: '请输入结束时间',
|
||||
trigger: ['blur']
|
||||
},
|
||||
{
|
||||
validator: chekcDate,
|
||||
trigger: ['blur']
|
||||
}],
|
||||
remind_type: [{
|
||||
required: true,
|
||||
message: '请输入提醒类型',
|
||||
trigger: ['blur']
|
||||
}],
|
||||
})
|
||||
|
||||
|
||||
// 获取详情
|
||||
const setFormData = async (data: Record<any, any>) => {
|
||||
for (const key in formData) {
|
||||
if (data[key] != null && data[key] != undefined) {
|
||||
//@ts-ignore
|
||||
formData[key] = data[key]
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// 提交按钮
|
||||
const handleSubmit = async () => {
|
||||
await formRef.value?.validate()
|
||||
const data = { ...formData, }
|
||||
// mode.value == 'edit'
|
||||
// ? await apiOaPlanEdit(data)
|
||||
// : await apiOaPlanAdd(data)
|
||||
}
|
||||
|
||||
const getProvinceList = async (isAsync: Boolean) => {
|
||||
let res = await apigetProvinceLists()
|
||||
address.provinceList = res
|
||||
if (isAsync) {
|
||||
return Promise.resolve({
|
||||
msg: '获取成功'
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const getCityList = async (province_code: number | String, isAsync: Boolean) => {
|
||||
let res = await apicityLists({ province_code })
|
||||
address.cityList = res
|
||||
if (isAsync) {
|
||||
return Promise.resolve({
|
||||
msg: '获取成功'
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const getAreaList = async (city_code: number | String, isAsync: Boolean) => {
|
||||
let res = await apiAreaLists({ city_code })
|
||||
address.areaList = res
|
||||
if (isAsync) {
|
||||
return Promise.resolve({
|
||||
msg: '获取成功'
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const getTownList = async (area_code: number | String, isAsync: Boolean) => {
|
||||
let res = await apiStreetLists({ area_code })
|
||||
address.townList = res
|
||||
if (isAsync) {
|
||||
return Promise.resolve({
|
||||
msg: '获取成功'
|
||||
});
|
||||
}
|
||||
}
|
||||
// getProvinceList(false)
|
||||
</script>
|
||||
|
|
@ -0,0 +1,141 @@
|
|||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<el-autocomplete v-model="address" :fetch-suggestions="querySearch" placeholder="请输入详细地址"
|
||||
:trigger-on-focus="false" />
|
||||
<el-button type="primary" @click="getLocations">
|
||||
搜索
|
||||
</el-button>
|
||||
</div>
|
||||
<div id="amp-container" />
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { defineComponent, onMounted, reactive, ref, toRefs, inject } from 'vue';
|
||||
import axios from 'axios';
|
||||
|
||||
const $api: any = inject("$api");
|
||||
const dataMap = reactive({
|
||||
map: '',
|
||||
markerLayer: '',
|
||||
latitude: '', //纬度
|
||||
lngitude: '', //经度
|
||||
});
|
||||
const TMap = (window as any).TMap;
|
||||
onMounted(() => {
|
||||
init();
|
||||
getLocation();
|
||||
});
|
||||
const init = () => {
|
||||
let center = new TMap.LatLng(dataMap.latitude, dataMap.lngitude);
|
||||
dataMap.map = new TMap.Map(document.getElementById('amp-container'), {
|
||||
center: center,//设置地图中心点坐标
|
||||
zoom: 11, //设置地图缩放级别
|
||||
viewMode: '2D'
|
||||
});
|
||||
(dataMap.map as any).on('click', clickHandler); // 绑定点击地图获取地理位置的事件
|
||||
markerLayer(); // 标记地图
|
||||
};
|
||||
// 重载地图
|
||||
const reloadMap = () => {
|
||||
(document.getElementById('amp-container') as any).innerHTML = '';
|
||||
dataMap.markerLayer = '';
|
||||
let center = new TMap.LatLng(dataMap.latitude, dataMap.lngitude);
|
||||
dataMap.map = new TMap.Map(document.getElementById('amp-container'), {
|
||||
center: center,//设置地图中心点坐标
|
||||
viewMode: '2D'
|
||||
});
|
||||
markerLayer();
|
||||
};
|
||||
const getLocation = async () => {
|
||||
try {
|
||||
let params = {
|
||||
// ip:(window as any ).returnCitySN['cip'],
|
||||
key: "V4LBZ-UKCHA-EUNK7-CUH4F-HOXVO-YTF56",
|
||||
};
|
||||
let { result } = await $api.cerStores.getLoaction(params);
|
||||
// 发起一个post请求
|
||||
|
||||
|
||||
if (result) {
|
||||
dataMap.latitude = result.location.lat;
|
||||
dataMap.lngitude = result.location.lng;
|
||||
(dataMap.map as any).setCenter(new TMap.LatLng(dataMap.latitude, dataMap.lngitude));
|
||||
reloadMap();
|
||||
}
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
}
|
||||
};
|
||||
// 点击获取经纬度
|
||||
const clickHandler = (evt: any) => {
|
||||
dataMap.latitude = evt.latLng.getLat().toFixed(6);
|
||||
dataMap.lngitude = evt.latLng.getLng().toFixed(6);
|
||||
(dataMap.map as any).setCenter(new TMap.LatLng(dataMap.latitude, dataMap.lngitude));
|
||||
reloadMap();
|
||||
};
|
||||
//标记地图
|
||||
const markerLayer = () => {
|
||||
dataMap.markerLayer = new TMap.MultiMarker({
|
||||
map: dataMap.map, //指定地图容器
|
||||
//样式定义
|
||||
styles: {
|
||||
//创建一个styleId为"myStyle"的样式（styles的子属性名即为styleId）
|
||||
"myStyle": new TMap.MarkerStyle({
|
||||
"width": 25, // 点标记样式宽度（像素）
|
||||
"height": 35, // 点标记样式高度（像素）
|
||||
// "src": '../../assets/logo.png', //图片路径
|
||||
'background': 'pink',
|
||||
//焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点
|
||||
"anchor": { x: 16, y: 32 }
|
||||
})
|
||||
},
|
||||
//点标记数据数组
|
||||
geometries: [
|
||||
{
|
||||
"id": "1", //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
|
||||
"styleId": 'myStyle', //指定样式id
|
||||
"position": new TMap.LatLng(dataMap.latitude, dataMap.lngitude), //点标记坐标位置
|
||||
},
|
||||
]
|
||||
});
|
||||
};
|
||||
const address = ref('');
|
||||
// 获取搜索经纬度
|
||||
const getLocations = async () => {
|
||||
try {
|
||||
let params = {
|
||||
key: "V4LBZ-UKCHA-EUNK7-CUH4F-HOXVO-YTF56", // 填申请到的腾讯key
|
||||
address: address.value, //具体的地址
|
||||
};
|
||||
let { result } = await $api.cerStores.getGeocoder(params);
|
||||
dataMap.latitude = result.location.lat;
|
||||
dataMap.lngitude = result.location.lng;
|
||||
(dataMap.map as any).setCenter(new TMap.LatLng(dataMap.latitude, dataMap.lngitude));
|
||||
reloadMap();
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
};
|
||||
const querySearch = async (queryString: string, cb: any) => {
|
||||
try {
|
||||
let params = {
|
||||
keyword: queryString,
|
||||
key: "V4LBZ-UKCHA-EUNK7-CUH4F-HOXVO-YTF56", // 填申请到的腾讯key
|
||||
};
|
||||
let { data } = await $api.cerStores.getSuggestion(params);
|
||||
const results = data.map((item: any) => {
|
||||
let obj = {
|
||||
value: item.address,
|
||||
address: item.address
|
||||
};
|
||||
return obj;
|
||||
});
|
||||
cb(results);
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
</script>
|
||||
|
|
@ -17,6 +17,11 @@ export default defineConfig({
|
|||
host: '0.0.0.0',
|
||||
open: true,
|
||||
port: 8787,
|
||||
proxy: {
|
||||
'/ws': {
|
||||
target: 'https://apis.map.qq.com/',
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: [
|
||||
vue(),
|
||||
|
|
|
|||
Loading…
Reference in New Issue