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

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

pages/product/shopPageGoods.vue

@@ -16,54 +16,47 @@
 
 </template>
 
-<script>
-	import {
-		getGoodsList
-	} from "@/api/goods.js";
-	import goodsTemplate from '@/components/m-goods-list/list'
-	export default {
-		data() {
-			return {
-				title: "",
-				routerVal: "",
-				goodsList: [],
-				params: {
-					pageNumber: 1,
-					pageSize: 10,
-					keyword: "",
-					storeCatId: "",
-					storeId: "",
-				},
-			};
-		},
-		components: {
-			goodsTemplate
-		},
-		onLoad(options) {
-			this.routerVal = options;
-			this.params.storeId = options.storeId;
-			this.params.storeCatId = options.id;
-			this.title = options.title;
-		},
-		onShow() {
-			this.goodsList = []
-			this.params.pageNumber = 1;
-			this.getGoodsData();
-		},
-		onReachBottom() {
-			this.params.pageNumber++;
-			this.getGoodsData();
-		},
-		methods: {
-			async getGoodsData() {
-				// #TODO
-				let goodsList = await getGoodsList(this.params);
-				if (goodsList.data.success) {
-					this.goodsList.push(...goodsList.data.result.records);
-				}
-			},
-		},
-	};
+<script setup lang="ts">
+import { reactive, ref } from 'vue'
+import { onLoad, onReachBottom, onShow } from '@dcloudio/uni-app'
+import { getGoodsList } from '@/api/goods.js'
+import goodsTemplate from '@/components/m-goods-list/list'
+
+const title = ref('')
+const routerVal = ref<any>('')
+const goodsList = ref<any[]>([])
+const params = reactive({
+  pageNumber: 1,
+  pageSize: 10,
+  keyword: '',
+  storeCatId: '',
+  storeId: '',
+})
+
+async function getGoodsData() {
+  const res = await getGoodsList(params)
+  if (res.data.success) {
+    goodsList.value.push(...res.data.result.records)
+  }
+}
+
+onLoad((options: any) => {
+  routerVal.value = options
+  params.storeId = options.storeId
+  params.storeCatId = options.id
+  title.value = options.title
+})
+
+onShow(() => {
+  goodsList.value = []
+  params.pageNumber = 1
+  getGoodsData()
+})
+
+onReachBottom(() => {
+  params.pageNumber++
+  getGoodsData()
+})
 </script>
 
 <style lang="scss" scoped>