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

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

pages/tabbar/home/template/fetch_coupon.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <view>
     <u-popup v-model:show="enableShowCoupon" mode="center" width="550rpx" height="400px">
       <view style="height: 130rpx">
         <view
@@ -80,72 +80,70 @@
         </view>
       </scroll-view>
     </u-popup>
-  </div>
+  </view>
 </template>
 
-<script>
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
 import { getAutoCoup } from "@/api/login";
 import storage from "@/utils/storage.js";
-export default {
-  data() {
-    return {
-      storage,
-      enableShowCoupon: false,
-      coupList:[]
-    };
-  },
-  mounted() {
-    this.firstGetAuto();
-  },
-  methods: {
-    firstGetAuto() {
-      if(!this.isLogin('auth')) return false
-      let data = new Date();
-      let now = data.getDate();
-      let hours = data.getHours();
-      let flagCoup = storage.getAutoCp();
-      if (
-        storage.getAutoCp() &&
-        storage.getAutoCp() != "" &&
-        storage.getAutoCp() != undefined &&
-        storage.getAutoCp() != null
-      ) {
-        if (Number(now) > Number(flagCoup)) {
-          if (Number(hours) >= 6) {
-            storage.setAutoCp(now);
-            this.getAutoCp();
-          }
-        }
-      } else {
-        this.getAutoCp();
+import { isLogin, unitPrice } from "@/utils/filters.js";
+
+const enableShowCoupon = ref(false);
+const coupList = ref<any[]>([]);
+
+onMounted(() => {
+  firstGetAuto();
+});
+
+function firstGetAuto() {
+  if (!isLogin("auth")) return false;
+  const data = new Date();
+  const now = data.getDate();
+  const hours = data.getHours();
+  const flagCoup = storage.getAutoCp();
+  if (
+    storage.getAutoCp() &&
+    storage.getAutoCp() != "" &&
+    storage.getAutoCp() != undefined &&
+    storage.getAutoCp() != null
+  ) {
+    if (Number(now) > Number(flagCoup)) {
+      if (Number(hours) >= 6) {
+        storage.setAutoCp(now);
+        getAutoCp();
       }
-    },
-    getAutoCp() {
-      let data = new Date();
-      let now = data.getDate();
-      getAutoCoup().then((res) => {
-        console.log(res);
-        if (res.data.success) {
-          this.coupList.push(...res.data.result);
-          if (this.coupList != "") {
-            this.enableShowCoupon = true;
-          } else {
-            this.enableShowCoupon = false;
-          }
-          storage.setAutoCp(now);
-          let objs = {};
-          this.coupList = this.coupList.reduce((cur, next) => {
-            //对象去重
-            if (next.id != undefined) {
-              objs[next.id] ? "" : (objs[next.id] = true && cur.push(next));
-            }
-            return cur;
-          }, []);
+    }
+  } else {
+    getAutoCp();
+  }
+}
+
+function getAutoCp() {
+  const data = new Date();
+  const now = data.getDate();
+  getAutoCoup().then((res) => {
+    console.log(res);
+    if (res.data.success) {
+      coupList.value.push(...res.data.result);
+      if (coupList.value != "") {
+        enableShowCoupon.value = true;
+      } else {
+        enableShowCoupon.value = false;
+      }
+      storage.setAutoCp(now);
+      const objs: Record<string, boolean> = {};
+      coupList.value = coupList.value.reduce((cur, next) => {
+        if (next.id != undefined) {
+          objs[next.id] ? "" : (objs[next.id] = true && cur.push(next));
         }
-      });
-    },
-  },
-};
+        return cur;
+      }, [] as any[]);
+    }
+  });
+}
+
+defineExpose({ firstGetAuto });
 </script>
 
 <style lang="scss" scoped>