mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git
synced 2026-11-08 01:48:56 +08:00
refactor: 四端完成 Options API → script setup + vuex → pinia 迁移
- buyer(95) / seller(169) / im(53) / manager(280) 共 597 个组件全部从 Options API 转换为 <script setup> - 四端 vuex 全部移除，状态管理统一迁移至 pinia 4（stores/ 目录） - util.js 等基础设施去除 vm 首参依赖；全局属性（$Message/$filters 等）在 script 内改为具名导入 - 被外部 ref 访问的公共组件均已补齐 defineExpose（清单见各端 MIGRATION-VUE3.md） - 各端 eslint 启用 vue/component-api-style 防止新代码回退 Options API - 四端 yarn build 全部通过；迁移约定与注意事项已更新至各端 MIGRATION-VUE3.md
This commit is contained in:
lifenlong
@@ -19,132 +19,129 @@
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
<script setup>
|
||||
import { onMounted, ref, watch } from "vue";
|
||||
import AMapLoader from "@amap/amap-jsapi-loader";
|
||||
import { getRegion } from "@/api/common.js";
|
||||
import config from "@/config/index";
|
||||
import { Message } from "@/utils/message";
|
||||
|
||||
export default {
|
||||
name: "map",
|
||||
data() {
|
||||
return {
|
||||
config,
|
||||
showMap: false, // 地图显隐
|
||||
mapSearch: "", // 地图搜索
|
||||
map: null, // 初始化地图
|
||||
autoComplete: null, // 初始化搜索方法
|
||||
geocoder: null, // 初始化地理、坐标转化
|
||||
positionPicker: null, // 地图拖拽选点
|
||||
tips: [], //搜索关键字列表
|
||||
addrContent: {}, // 回显地址信息
|
||||
loading: false, // 加载状态
|
||||
defineOptions({ name: "map" });
|
||||
|
||||
const emit = defineEmits(["getAddress"]);
|
||||
|
||||
const showMap = ref(false); // 地图显隐
|
||||
const mapSearch = ref(""); // 地图搜索
|
||||
const map = ref(null); // 初始化地图
|
||||
const autoComplete = ref(null); // 初始化搜索方法
|
||||
const geocoder = ref(null); // 初始化地理、坐标转化
|
||||
const positionPicker = ref(null); // 地图拖拽选点
|
||||
const tips = ref([]); //搜索关键字列表
|
||||
const addrContent = ref({}); // 回显地址信息
|
||||
const loading = ref(false); // 加载状态
|
||||
|
||||
watch(mapSearch, (val) => {
|
||||
searchOfMap(val);
|
||||
});
|
||||
|
||||
function ok() {
|
||||
|
||||
if (addrContent.value && addrContent.value.regeocode) {
|
||||
const params = {
|
||||
cityCode: addrContent.value.regeocode.addressComponent.citycode,
|
||||
townName: addrContent.value.regeocode.addressComponent.township,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
mapSearch: function (val) {
|
||||
this.searchOfMap(val);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
ok() {
|
||||
getRegion(params).then((res) => {
|
||||
if (res.success) {
|
||||
addrContent.value.addr = res.result.name.replace(/,/g, " ");
|
||||
addrContent.value.addrId = res.result.id;
|
||||
loading.value = false;
|
||||
|
||||
if (this.addrContent && this.addrContent.regeocode) {
|
||||
const params = {
|
||||
cityCode: this.addrContent.regeocode.addressComponent.citycode,
|
||||
townName: this.addrContent.regeocode.addressComponent.township,
|
||||
};
|
||||
getRegion(params).then((res) => {
|
||||
if (res.success) {
|
||||
this.addrContent.addr = res.result.name.replace(/,/g, " ");
|
||||
this.addrContent.addrId = res.result.id;
|
||||
this.loading = false;
|
||||
|
||||
this.$emit("getAddress", this.addrContent);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.$Message.error('未获取到坐标信息！请查看高德API配置是否正确')
|
||||
emit("getAddress", addrContent.value);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
Message.error('未获取到坐标信息！请查看高德API配置是否正确')
|
||||
}
|
||||
|
||||
}
|
||||
function init() {
|
||||
AMapLoader.load({
|
||||
key: config.aMapKey, // 申请好的Web端开发者Key，首次调用 load 时必填
|
||||
version: "", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
||||
plugins: [
|
||||
"AMap.ToolBar",
|
||||
"AMap.Autocomplete",
|
||||
"AMap.PlaceSearch",
|
||||
"AMap.Geolocation",
|
||||
"AMap.Geocoder",
|
||||
], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
|
||||
AMapUI: {
|
||||
// 是否加载 AMapUI，缺省不加载
|
||||
version: "1.1", // AMapUI 缺省 1.1
|
||||
plugins: ["misc/PositionPicker"], // 需要加载的 AMapUI ui插件
|
||||
},
|
||||
init() {
|
||||
AMapLoader.load({
|
||||
key: this.config.aMapKey, // 申请好的Web端开发者Key，首次调用 load 时必填
|
||||
version: "", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
||||
plugins: [
|
||||
"AMap.ToolBar",
|
||||
"AMap.Autocomplete",
|
||||
"AMap.PlaceSearch",
|
||||
"AMap.Geolocation",
|
||||
"AMap.Geocoder",
|
||||
], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
|
||||
AMapUI: {
|
||||
// 是否加载 AMapUI，缺省不加载
|
||||
version: "1.1", // AMapUI 缺省 1.1
|
||||
plugins: ["misc/PositionPicker"], // 需要加载的 AMapUI ui插件
|
||||
},
|
||||
})
|
||||
.then((AMap) => {
|
||||
let that = this;
|
||||
this.map = new AMap.Map("map-container", {
|
||||
zoom: 12,
|
||||
});
|
||||
that.map.addControl(new AMap.ToolBar());
|
||||
that.map.addControl(new AMap.Autocomplete());
|
||||
that.map.addControl(new AMap.PlaceSearch());
|
||||
that.map.addControl(new AMap.Geocoder());
|
||||
|
||||
// 实例化Autocomplete
|
||||
let autoOptions = {
|
||||
city: "全国",
|
||||
};
|
||||
that.autoComplete = new AMap.Autocomplete(autoOptions); // 搜索
|
||||
that.geocoder = new AMap.Geocoder(autoOptions);
|
||||
|
||||
that.positionPicker = new AMapUI.PositionPicker({
|
||||
// 拖拽选点
|
||||
mode: "dragMap",
|
||||
map: that.map,
|
||||
});
|
||||
that.positionPicker.start();
|
||||
/**
|
||||
*
|
||||
* 所有回显数据，都在positionResult里面
|
||||
* 需要字段可以查找
|
||||
*
|
||||
*/
|
||||
that.positionPicker.on("success", function (positionResult) {
|
||||
that.addrContent = positionResult;
|
||||
});
|
||||
})
|
||||
.catch((e) => { });
|
||||
},
|
||||
searchOfMap(val) {
|
||||
// 地图搜索
|
||||
let that = this;
|
||||
this.autoComplete.search(val, function (status, result) {
|
||||
// 搜索成功时，result即是对应的匹配数据
|
||||
if (status == "complete" && result.info == "OK") {
|
||||
that.tips = result.tips;
|
||||
} else {
|
||||
that.tips = [];
|
||||
}
|
||||
})
|
||||
.then((AMap) => {
|
||||
map.value = new AMap.Map("map-container", {
|
||||
zoom: 12,
|
||||
});
|
||||
},
|
||||
selectAddr(location) {
|
||||
// 选择坐标
|
||||
if (!location) {
|
||||
this.$Message.warning("请选择正确点位");
|
||||
return false;
|
||||
}
|
||||
const lnglat = [location.lng, location.lat];
|
||||
this.positionPicker.start(lnglat);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
};
|
||||
map.value.addControl(new AMap.ToolBar());
|
||||
map.value.addControl(new AMap.Autocomplete());
|
||||
map.value.addControl(new AMap.PlaceSearch());
|
||||
map.value.addControl(new AMap.Geocoder());
|
||||
|
||||
// 实例化Autocomplete
|
||||
let autoOptions = {
|
||||
city: "全国",
|
||||
};
|
||||
autoComplete.value = new AMap.Autocomplete(autoOptions); // 搜索
|
||||
geocoder.value = new AMap.Geocoder(autoOptions);
|
||||
|
||||
positionPicker.value = new AMapUI.PositionPicker({
|
||||
// 拖拽选点
|
||||
mode: "dragMap",
|
||||
map: map.value,
|
||||
});
|
||||
positionPicker.value.start();
|
||||
/**
|
||||
*
|
||||
* 所有回显数据，都在positionResult里面
|
||||
* 需要字段可以查找
|
||||
*
|
||||
*/
|
||||
positionPicker.value.on("success", function (positionResult) {
|
||||
addrContent.value = positionResult;
|
||||
});
|
||||
})
|
||||
.catch((e) => { });
|
||||
}
|
||||
function searchOfMap(val) {
|
||||
// 地图搜索
|
||||
autoComplete.value.search(val, function (status, result) {
|
||||
// 搜索成功时，result即是对应的匹配数据
|
||||
if (status == "complete" && result.info == "OK") {
|
||||
tips.value = result.tips;
|
||||
} else {
|
||||
tips.value = [];
|
||||
}
|
||||
});
|
||||
}
|
||||
function selectAddr(location) {
|
||||
// 选择坐标
|
||||
if (!location) {
|
||||
Message.warning("请选择正确点位");
|
||||
return false;
|
||||
}
|
||||
const lnglat = [location.lng, location.lat];
|
||||
positionPicker.value.start(lnglat);
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
init();
|
||||
});
|
||||
|
||||
// 唯一引用方 multiple-map.vue 通过 ref 引用本组件但从不访问任何成员（仅监听 getAddress 事件），无需暴露成员
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
#map-container {
|
||||
|
||||
Reference in New Issue
Block a user