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

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

pages/tabbar/home/template/tpl_spike.vue

@@ -31,41 +31,38 @@
     </div>
   </div>
 </template>
-<script>
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
 import * as API_Promotions from "@/api/promotions";
-export default {
-  props: ["res"],
-  title: "秒杀",
-  data() {
-    return {
-      goodsList: [],
-    };
-  },
-  mounted() {
-    API_Promotions.getSeckillTimeLine().then((res) => {
-      if (res.data.success && res.data.result && res.data.result.length) {
-        const sorted = res.data.result.sort(
-          (x, y) => Number(x.timeLine) - Number(y.timeLine)
-        );
-        const first = sorted[0] || {};
-        this.goodsList = (first.seckillGoodsList || []).slice(
-          0,
-          this.res.list[0].count || 3
-        );
-      }
-    });
-  },
-  methods: {
-    goMore() {
-      uni.navigateTo({ url: "/pages/promotion/seckill" });
-    },
-    goDetail(item) {
-      uni.navigateTo({
-        url: `/pages/product/goods?id=${item.skuId}&goodsId=${item.goodsId}`,
-      });
-    },
-  },
-};
+
+const props = defineProps<{ res: any }>();
+
+const goodsList = ref<any[]>([]);
+
+onMounted(() => {
+  API_Promotions.getSeckillTimeLine().then((res) => {
+    if (res.data.success && res.data.result && res.data.result.length) {
+      const sorted = res.data.result.sort(
+        (x: any, y: any) => Number(x.timeLine) - Number(y.timeLine)
+      );
+      const first = sorted[0] || {};
+      goodsList.value = (first.seckillGoodsList || []).slice(
+        0,
+        props.res.list[0].count || 3
+      );
+    }
+  });
+});
+
+function goMore() {
+  uni.navigateTo({ url: "/pages/promotion/seckill" });
+}
+
+function goDetail(item: any) {
+  uni.navigateTo({
+    url: `/pages/product/goods?id=${item.skuId}&goodsId=${item.goodsId}`,
+  });
+}
 </script>
 <style lang="scss" scoped>
 @import "./tpl.scss";