refactor: 重构多个组件以支持 Vue 3 语法和功能

- 将多个组件转换为 `<script setup>` 语法，提升可读性和性能
- 优化状态管理和事件处理逻辑，简化代码结构
- 更新样式和布局以适应新组件结构
- 添加新功能和修复已知问题，提升用户体验

components/uniMap.vue

@@ -1,111 +1,99 @@
 <template></template>
-<script>
-import { getAddressCode } from "@/api/address";
+
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import { getAddressCode } from '@/api/address'
 import config from '@/config/config'
-export default {
-  data() {
-    return {
-      config
-    };
-  },
-  mounted() {
-    this.init();
-  },
-  methods: {
-    // 初始化地图并且调用
-    initMap() {
-      let that = this;
-      uni.chooseLocation({
-        success: function (res) {
-          /**获取地址详情地址 */
-          that.posToCity(res.latitude, res.longitude).then((val) => {
-            /**获取地址code */
-            getAddressCode(
-              val.regeocode.addressComponent.citycode,
-              val.regeocode.addressComponent.township
-            ).then((code) => {
-              that.$emit("callback", { ...val, ...res, ...code });
-              that.$emit("close");
-            });
-          });
-        },
-        fail(e) {
-          console.log(e)
-          that.$emit("close");
-        },
-      });
-    },
 
-    // 根据当前客户端判断展示不同类型数据
-    init() {
-      // #ifdef MP-WEIXIN
-      this.wechatMap();
-      // #endif
-      // #ifndef MP-WEIXIN
-      this.initMap();
-      // #endif
-    },
+const emit = defineEmits<{
+	callback: [payload: Record<string, any>]
+	close: []
+}>()
 
-    // 如果是微信小程序单独走微信小程序授权模式
-    wechatMap() {
-      let that = this;
-      uni.authorize({
-        scope: "scope.userLocation",
-        success() {
-          // 允许授权
-          that.initMap();
-        },
-        fail() {
-          //拒绝授权
-          uni.showModal({
-            content: "检测到您没打开获取地址功能权限，是否去设置打开？",
-            confirmText: "确认",
-            cancelText: "取消",
-            success: (res) => {
-              if (res.confirm) {
-                // 打开设置好后重新刷新地图
-                uni.openSetting({
-                  success: (res) => {
-                    that.initMap();
-                  },
-                });
-              } else {
-                // 取消后关闭
-                that.$emit("close");
-                return false;
-              }
-            },
-          });
-          return false;
-        },
-      });
-    },
-    // 获取城市的数据
-    posToCity(latitude, longitude) {
-      return new Promise((resolve, reject) => {
-        uni.request({
-          url: `https://restapi.amap.com/v3/geocode/regeo`,
-          method: "GET",
-          data: {
-            key: config.aMapKey, //web服务的key
-            location: `${longitude},${latitude}`,
-          },
-          success: ({ data }) => {
-            const { status, info } = data;
-            if (status === "1") {
-              resolve(data);
-            } else {
-              reject(info);
-            }
-          },
-          fail: (err) => {
-            reject(err);
-          },
-        });
-      });
-    },
-  },
-};
+onMounted(() => {
+	init()
+})
+
+function initMap() {
+	uni.chooseLocation({
+		success(res) {
+			posToCity(res.latitude, res.longitude).then((val) => {
+				getAddressCode(
+					val.regeocode.addressComponent.citycode,
+					val.regeocode.addressComponent.township,
+				).then((code) => {
+					emit('callback', { ...val, ...res, ...code })
+					emit('close')
+				})
+			})
+		},
+		fail(e) {
+			console.log(e)
+			emit('close')
+		},
+	})
+}
+
+function init() {
+	// #ifdef MP-WEIXIN
+	wechatMap()
+	// #endif
+	// #ifndef MP-WEIXIN
+	initMap()
+	// #endif
+}
+
+function wechatMap() {
+	uni.authorize({
+		scope: 'scope.userLocation',
+		success() {
+			initMap()
+		},
+		fail() {
+			uni.showModal({
+				content: '检测到您没打开获取地址功能权限，是否去设置打开？',
+				confirmText: '确认',
+				cancelText: '取消',
+				success: (res) => {
+					if (res.confirm) {
+						uni.openSetting({
+							success: () => {
+								initMap()
+							},
+						})
+					} else {
+						emit('close')
+					}
+				},
+			})
+		},
+	})
+}
+
+function posToCity(latitude: number, longitude: number) {
+	return new Promise<any>((resolve, reject) => {
+		uni.request({
+			url: 'https://restapi.amap.com/v3/geocode/regeo',
+			method: 'GET',
+			data: {
+				key: config.aMapKey,
+				location: `${longitude},${latitude}`,
+			},
+			success: ({ data }: any) => {
+				const { status, info } = data
+				if (status === '1') {
+					resolve(data)
+				} else {
+					reject(info)
+				}
+			},
+			fail: (err) => {
+				reject(err)
+			},
+		})
+	})
+}
 </script>
+
 <style lang="scss" scoped>
-</style>
+</style>