fix: todo修复

apps/web-ele/src/views/mp/components/wx-location/wx-location.vue

@@ -2,6 +2,10 @@
   【微信消息 - 定位】TODO @Dhb52 目前未启用；；；；@hw：看看目前是不是没用起来哈？
 -->
 <script lang="ts" setup>
+import type { WxLocationProps } from './types';
+
+import { computed } from 'vue';
+
 import { IconifyIcon } from '@vben/icons';
 
 // TODO @dylan：@hw：apps/web-antd/src/views/mall/trade/delivery/pickUpStore/modules/form.vue 参考这个，从后端拿 key 哈
@@ -9,27 +13,16 @@ import { ElCol, ElLink, ElRow } from 'element-plus';
 
 defineOptions({ name: 'Location' });
 
-// TODO @hw：antd 和 ele 这里的风格，看看怎么统一！
-const props = defineProps({
-  locationX: {
-    required: true,
-    type: Number,
-  },
-  locationY: {
-    required: true,
-    type: Number,
-  },
-  label: {
-    // 地名
-    required: true,
-    type: String,
-  },
-  qqMapKey: {
-    // QQ 地图的密钥 https://lbs.qq.com/service/staticV2/staticGuide/staticDoc
-    required: false,
-    type: String,
-    default: 'TVDBZ-TDILD-4ON4B-PFDZA-RNLKH-VVF6E', // 需要自定义
-  },
+const props = withDefaults(defineProps<WxLocationProps>(), {
+  qqMapKey: 'TVDBZ-TDILD-4ON4B-PFDZA-RNLKH-VVF6E', // QQ 地图的密钥 https://lbs.qq.com/service/staticV2/staticGuide/staticDoc
+});
+
+const mapUrl = computed(() => {
+  return `https://map.qq.com/?type=marker&isopeninfowin=1&markertype=1&pointx=${props.locationY}&pointy=${props.locationX}&name=${props.label}&ref=yudao`;
+});
+
+const mapImageUrl = computed(() => {
+  return `https://apis.map.qq.com/ws/staticmap/v2/?zoom=10&markers=color:blue|label:A|${props.locationX},${props.locationY}&key=${props.qqMapKey}&size=250*180`;
 });
 
 defineExpose({
@@ -43,20 +36,10 @@ defineExpose({
 <template>
   <!-- 微信消息 - 定位 -->
   <div>
-    <ElLink
-      type="primary"
-      target="_blank"
-      :href="`https://map.qq.com/?type=marker&isopeninfowin=1&markertype=1&pointx=${
-        locationY
-      }&pointy=${locationX}&name=${label}&ref=yudao`"
-    >
+    <ElLink type="primary" target="_blank" :href="mapUrl">
       <ElCol>
         <ElRow>
-          <img
-            :src="`https://apis.map.qq.com/ws/staticmap/v2/?zoom=10&markers=color:blue|label:A|${
-              locationX
-            },${locationY}&key=${qqMapKey}&size=250*180`"
-          />
+          <img :src="mapImageUrl" alt="地图位置" />
         </ElRow>
         <ElRow>
           <IconifyIcon icon="ep:location" />