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

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

pages/mine/address/add.vue

@@ -1,7 +1,14 @@
 <template>
   <view class="add-address">
-    <u-form :model="form" ref="uForm" error-type="toast" :rules="rules">
-      <u-form-item label="收货人" label-width="130" prop="name" :border-bottom="true">
+    <up-form
+      :model="form"
+      ref="uForm"
+      error-type="toast"
+      :rules="rules"
+      label-position="left"
+      label-width="180rpx"
+    >
+      <up-form-item label="收货人" label-width="180rpx" prop="name" :border-bottom="true">
         <u-input
           v-model="form.name"
           border="none"
@@ -9,9 +16,9 @@
           clearable
           placeholder="请输入收货人姓名"
         />
-      </u-form-item>
+      </up-form-item>
 
-      <u-form-item label="手机号码" label-width="130" prop="mobile" :border-bottom="true">
+      <up-form-item label="手机号码" label-width="180rpx" prop="mobile" :border-bottom="true">
         <u-input
           v-model="form.mobile"
           type="number"
@@ -20,18 +27,18 @@
           input-align="right"
           placeholder="请输入收货人手机号码"
         />
-      </u-form-item>
+      </up-form-item>
 
-      <u-form-item label="所在区域" label-width="130" prop="___path" :border-bottom="true">
+      <up-form-item label="所在区域" label-width="180rpx" prop="___path" :border-bottom="true">
         <view class="form-value" @click="showPicker">
           {{ form.___path || '请选择所在地区' }}
         </view>
         <template #right>
           <u-icon name="arrow-right" color="#ccc" size="16"></u-icon>
         </template>
-      </u-form-item>
+      </up-form-item>
 
-      <u-form-item class="detailAddress" label="详细地址" label-width="130" prop="detail" :border-bottom="true">
+      <up-form-item class="detailAddress" label="详细地址" label-width="180rpx" prop="detail" :border-bottom="true">
         <u-input
           type="textarea"
           v-model="form.detail"
@@ -40,16 +47,16 @@
           border="none"
           placeholder="街道楼牌号等"
         />
-      </u-form-item>
+      </up-form-item>
 
-      <u-form-item label="地址别名" label-width="130" :border-bottom="false">
+      <up-form-item label="地址别名" label-width="180rpx" :border-bottom="false">
         <u-input
           v-model="form.alias"
           border="none"
           input-align="right"
           placeholder="请输入地址别名"
         />
-      </u-form-item>
+      </up-form-item>
 
       <view class="default-row">
         <u-checkbox
@@ -63,7 +70,7 @@
       </view>
 
       <view class="saveBtn" @click="save">保存</view>
-    </u-form>
+    </up-form>
 
     <m-city
       :provinceData="list"
@@ -76,266 +83,208 @@
     <uniMap v-if="mapFlag" @close="closeMap" @callback="callBackAddress" />
   </view>
 </template>
-<script>
-import { addAddress, editAddress, getAddressDetail } from "@/api/address.js";
-import city from "@/components/m-city/m-city.vue";
-import uniMap from "@/components/uniMap";
-import permision from "@/js_sdk/wa-permission/permission.js";
-export default {
-  components: {
-    "m-city": city,
-    uniMap,
+<script setup lang="ts">
+import { ref, reactive, computed, getCurrentInstance } from 'vue'
+import { onLoad, onShow, onReady } from '@dcloudio/uni-app'
+import { useStore } from '@/store'
+import { addAddress as addAddressApi, editAddress, getAddressDetail } from '@/api/address.js'
+import MCity from '@/components/m-city/m-city.vue'
+import uniMap from '@/components/uniMap'
+import permision from '@/js_sdk/wa-permission/permission.js'
+
+const store = useStore()
+const { proxy } = getCurrentInstance()!
+
+const lightColor = computed(() => store.getters.lightColor)
+const mapFlag = ref(false)
+const routerVal = ref<Record<string, string>>({})
+const uForm = ref<any>(null)
+const cityPicker = ref<any>(null)
+
+const form = reactive<Record<string, any>>({
+  detail: '',
+  name: '',
+  mobile: '',
+  consigneeAddressIdPath: [],
+  consigneeAddressPath: [],
+  ___path: '',
+  isDefault: false,
+})
+
+const list = ref([
+  {
+    id: '',
+    localName: '请选择',
+    children: [],
   },
-  onShow() {
-    // 判断当前系统权限定位是否开启
-  },
-  methods: {
-    // 关闭地图
-    closeMap() {
-      this.mapFlag = false;
+])
+
+const rules = {
+  name: [
+    {
+      required: true,
+      message: '收货人姓名不能为空',
+      trigger: ['blur', 'change'],
     },
-    // 打开地图并访问权限
-    clickUniMap() {
-      // #ifdef APP-PLUS
-      if (plus.os.name == "iOS") {
-        // ios系统
-        permision.judgeIosPermission("location")
-          ? (this.mapFlag = true)
-          : this.refuseMap();
-      } else {
-        // 安卓
-        this.requestAndroidPermission(
-          "android.permission.ACCESS_FINE_LOCATION"
-        );
-      }
-      // #endif
-
-      // #ifndef APP-PLUS
-      this.mapFlag = true;
-      // #endif
+  ],
+  mobile: [
+    {
+      required: true,
+      message: '手机号码不能为空',
+      trigger: ['blur', 'change'],
     },
-
-    // 如果拒绝权限 提示区设置
-    refuseMap() {
-      uni.showModal({
-        title: "温馨提示",
-        content: "您已拒绝定位,请开启",
-        confirmText: "去设置",
-        success(res) {
-          if (res.confirm) {
-            //打开授权设置
-            // #ifndef MP-WEIXIN
-            uni.getSystemInfo({
-              success(res) {
-                if (res.platform == "ios") {
-                  //IOS
-                  plus.runtime.openURL("app-settings://");
-                } else if (res.platform == "android") {
-                  //安卓
-                  let main = plus.android.runtimeMainActivity();
-                  let Intent = plus.android.importClass(
-                    "android.content.Intent"
-                  );
-                  let mIntent = new Intent("android.settings.ACTION_SETTINGS");
-                  main.startActivity(mIntent);
-                }
-              },
-            });
-            // #endif
-          }
-        },
-      });
+    {
+      validator: (_rule: unknown, value: string) => proxy.$u.test.mobile(value),
+      message: '手机号码不正确',
+      trigger: ['change', 'blur'],
     },
-
-    // 获取安卓是否拥有地址权限
-    async requestAndroidPermission(permisionID) {
-      var result = await permision.requestAndroidPermission(permisionID);
-
-      if (result == 1) {
-        this.mapFlag = true;
-      } else {
-        this.refuseMap();
-      }
+  ],
+  ___path: [
+    {
+      required: true,
+      message: '请选择所在区域',
+      trigger: ['change'],
     },
-
-    // 选择地址后数据的回调
-    callBackAddress(val) {
-      console.log(val)
-      uni.showLoading({
-        title: "加载中",
-      });
-
-      if (val.regeocode && val) {
-        let address = val.regeocode;
-        this.form.detail = address.formatted_address; //地址详情
-        this.form.___path = val.data.result.name;
-        this.form.consigneeAddressIdPath = val.data.result.id; // 地址id分割
-        this.form.consigneeAddressPath = val.data.result.name; //地址名称， '，'分割
-        this.form.lat = val.latitude; //纬度
-        this.form.lon = val.longitude; //经度
-         uni.hideLoading();
-      }
-
-      this.mapFlag = !this.mapFlag; //关闭地图
+  ],
+  detail: [
+    {
+      required: true,
+      message: '请填写详细地址',
+      trigger: ['blur', 'change'],
     },
+  ],
+}
 
-    // 保存当前 地址
-    save() {
-      this.$refs.uForm.validate().then(() => {
-        const params = { ...this.form };
-        delete params.___path;
+onShow(() => {})
 
-        if (Array.isArray(params.consigneeAddressIdPath)) {
-          params.consigneeAddressIdPath = params.consigneeAddressIdPath.join(",");
-        }
-        if (Array.isArray(params.consigneeAddressPath)) {
-          params.consigneeAddressPath = params.consigneeAddressPath.join(",");
-        }
+onLoad((option) => {
+  uni.showLoading({ title: '加载中' })
+  routerVal.value = option || {}
+  if (option.id) {
+    getAddressDetail(option.id).then((res) => {
+      const params = res.data.result
+      params.___path = params.consigneeAddressPath
+      Object.assign(form, params)
+      if (store.state.isShowToast) uni.hideLoading()
+    })
+  }
+  uni.hideLoading()
+})
 
-        if (!params.id) {
-          addAddress(params).then((res) => {
-            if (res.data.success) {
-              uni.navigateBack();
-            } else {
-              uni.showToast({
-                title: res.data.message || "保存失败",
-                icon: "none",
-              });
+onReady(() => {
+  uForm.value?.setRules(rules)
+})
+
+function closeMap() {
+  mapFlag.value = false
+}
+
+function refuseMap() {
+  uni.showModal({
+    title: '温馨提示',
+    content: '您已拒绝定位,请开启',
+    confirmText: '去设置',
+    success(res) {
+      if (res.confirm) {
+        // #ifndef MP-WEIXIN
+        uni.getSystemInfo({
+          success(sysRes) {
+            if (sysRes.platform == 'ios') {
+              plus.runtime.openURL('app-settings://')
+            } else if (sysRes.platform == 'android') {
+              const main = plus.android.runtimeMainActivity()
+              const Intent = plus.android.importClass('android.content.Intent')
+              const mIntent = new Intent('android.settings.ACTION_SETTINGS')
+              main.startActivity(mIntent)
             }
-          });
-        } else {
-          delete params.updateBy;
-          delete params.updateTime;
-          editAddress(params).then((res) => {
-            if (res.data.success) {
-              uni.navigateBack();
-            } else {
-              uni.showToast({
-                title: res.data.message || "保存失败",
-                icon: "none",
-              });
-            }
-          });
-        }
-      }).catch(() => {});
+          },
+        })
+        // #endif
+      }
     },
+  })
+}
 
-    // 三级地址联动回调
-    getpickerParentValue(e) {
-      // 将需要绑定的地址设置为空，并赋值
-      this.form.consigneeAddressIdPath = [];
-      this.form.consigneeAddressPath = [];
-      let name = "";
+async function requestAndroidPermission(permisionID: string) {
+  const result = await permision.requestAndroidPermission(permisionID)
+  if (result == 1) {
+    mapFlag.value = true
+  } else {
+    refuseMap()
+  }
+}
 
-      e.forEach((item, index) => {
-        if (item.id) {
-          // 遍历数据
-          this.form.consigneeAddressIdPath.push(item.id);
-          this.form.consigneeAddressPath.push(item.localName);
-          name += item.localName;
-          this.form.___path = name;
-        }
-        if (index == e.length - 1) {
-          //如果是最后一个
-          let _town = item.children.filter((_child) => {
-            return _child.id == item.id;
-          });
+function callBackAddress(val: any) {
+  uni.showLoading({ title: '加载中' })
+  if (val.regeocode && val) {
+    const address = val.regeocode
+    form.detail = address.formatted_address
+    form.___path = val.data.result.name
+    form.consigneeAddressIdPath = val.data.result.id
+    form.consigneeAddressPath = val.data.result.name
+    form.lat = val.latitude
+    form.lon = val.longitude
+    uni.hideLoading()
+  }
+  mapFlag.value = !mapFlag.value
+}
 
-          this.form.lat = _town[0].center.split(",")[1];
-          this.form.lon = _town[0].center.split(",")[0];
-        }
-      });
-    },
+function save() {
+  uForm.value?.validate().then(() => {
+    const params = { ...form }
+    delete params.___path
 
-    // 显示三级地址联动
-    showPicker() {
-      this.$refs.cityPicker.show();
-    },
-  },
-  mounted() {},
-  data() {
-    return {
-      lightColor: this.$lightColor, //高亮颜色
-      mapFlag: false, // 地图选择开
-      routerVal: "",
-      form: {
-        detail: "", //地址详情
-        name: "", //收货人姓名
-        mobile: "", //手机号码
-        consigneeAddressIdPath: [], //地址id
-        consigneeAddressPath: [], //地址名字
-        ___path: "", //所在区域
-        isDefault: false, //是否默认地址
-      },
-      // 表单提交校验规则
-      rules: {
-        name: [
-          {
-            required: true,
-            message: "收货人姓名不能为空",
-            trigger: ["blur", "change"],
-          },
-        ],
-        mobile: [
-          {
-            required: true,
-            message: "手机号码不能为空",
-            trigger: ["blur", "change"],
-          },
-          {
-            validator: (rule, value, callback) => {
-              return this.$u.test.mobile(value);
-            },
-            message: "手机号码不正确",
-            trigger: ["change", "blur"],
-          },
-        ],
-        ___path: [
-          {
-            required: true,
-            message: "请选择所在区域",
-            trigger: ["change"],
-          },
-        ],
-        detail: [
-          {
-            required: true,
-            message: "请填写详细地址",
-            trigger: ["blur", "change"],
-          },
-        ],
-      },
-      list: [
-        {
-          id: "",
-          localName: "请选择",
-          children: [],
-        },
-      ],
-    };
-  },
-  onLoad(option) {
-    uni.showLoading({
-      title: "加载中",
-    });
-    this.routerVal = option;
-    // 如果当前是编辑地址,则需要查询出地址详情信息
-    if (option.id) {
-      getAddressDetail(option.id).then((res) => {
-        const params = res.data.result;
-        params.___path = params.consigneeAddressPath;
-        this["form"] = params;
-
-         if (this.$store.state.isShowToast){ uni.hideLoading() };
-      });
+    if (Array.isArray(params.consigneeAddressIdPath)) {
+      params.consigneeAddressIdPath = params.consigneeAddressIdPath.join(',')
     }
-     uni.hideLoading();
-  },
-  // 初始化rules必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
-  onReady() {
-    this.$refs.uForm.setRules(this.rules);
-  },
-};
+    if (Array.isArray(params.consigneeAddressPath)) {
+      params.consigneeAddressPath = params.consigneeAddressPath.join(',')
+    }
+
+    if (!params.id) {
+      addAddressApi(params).then((res) => {
+        if (res.data.success) {
+          uni.navigateBack()
+        } else {
+          uni.showToast({ title: res.data.message || '保存失败', icon: 'none' })
+        }
+      })
+    } else {
+      delete params.updateBy
+      delete params.updateTime
+      editAddress(params).then((res) => {
+        if (res.data.success) {
+          uni.navigateBack()
+        } else {
+          uni.showToast({ title: res.data.message || '保存失败', icon: 'none' })
+        }
+      })
+    }
+  }).catch(() => {})
+}
+
+function getpickerParentValue(e: any[]) {
+  form.consigneeAddressIdPath = []
+  form.consigneeAddressPath = []
+  let name = ''
+  e.forEach((item, index) => {
+    if (item.id) {
+      form.consigneeAddressIdPath.push(item.id)
+      form.consigneeAddressPath.push(item.localName)
+      name += item.localName
+      form.___path = name
+    }
+    if (index == e.length - 1) {
+      const _town = item.children.filter((_child: any) => _child.id == item.id)
+      form.lat = _town[0].center.split(',')[1]
+      form.lon = _town[0].center.split(',')[0]
+    }
+  })
+}
+
+function showPicker() {
+  cityPicker.value?.show()
+}
 </script>
 <style scoped lang="scss">
 page {