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

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

pages/product/askList.vue

@@ -25,7 +25,7 @@
         <u-col span="12">
           <u-row :gutter="12">
             <u-col :offset="1" span="4">
-              <u-button class="btns" @click="askValue=''">清空</u-button>
+              <u-button class="btns" @click="params.askValue=''">清空</u-button>
             </u-col>
             <u-col :offset="2" span="4">
               <u-button class="btns" @click="getAskMessage()" type="success">提交</u-button>
@@ -36,75 +36,83 @@
     </div>
   </div>
 </template>
-<script>
-import * as API_GOODS from "../../api/goods";
-import * as API_MEM from "../../api/members";
-export default {
-  data() {
-    return {
-      askGoods: "",
-      queryGoodsDetail: "",
-      border: true,
-      params: {
-        askValue: "",
-        anonymous: "YES",
-      },
-    };
-  },
-  onLoad(options) {
-    this.askGoods = options;
-    this.getGoodsData();
-  },
-  methods: {
-    getGoodsData() {
-      if (this.askGoods.goods_id) {
-        API_GOODS.getGoods(this.askGoods.goods_id).then((result) => {
-          this.queryGoodsDetail = result.data;
-        });
-      }
-    },
-    getAskMessage() {
-      uni.showLoading();
-      if (this.params.askValue == "") {
+<script setup lang="ts">
+import { reactive, ref } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import * as API_GOODS from '../../api/goods'
+import * as API_MEM from '../../api/members'
+import { useStore } from '@/store'
+
+const store = useStore()
+
+const askGoods = ref<any>('')
+const queryGoodsDetail = ref<any>('')
+const border = ref(true)
+const params = reactive({
+  askValue: '',
+  anonymous: 'YES',
+})
+
+function getGoodsData() {
+  if (askGoods.value.goods_id) {
+    API_GOODS.getGoods(askGoods.value.goods_id).then((result) => {
+      queryGoodsDetail.value = result.data
+    })
+  }
+}
+
+function getAskMessage() {
+  uni.showLoading()
+  if (params.askValue == '') {
+    uni.showToast({
+      title: '请填写内容!',
+      icon: 'none',
+    })
+    if (store.state.isShowToast) {
+      uni.hideLoading()
+    }
+    return false
+  }
+  API_MEM.consultating(
+    askGoods.value.goods_id,
+    params.askValue,
+    params.anonymous
+  )
+    .then((res) => {
+      if (res.statusCode == 200) {
         uni.showToast({
-          title: "请填写内容!",
-          icon: "none",
-        });
-         if (this.$store.state.isShowToast){ uni.hideLoading() };
-        return false;
-      }
-      API_MEM.consultating(
-        this.askGoods.goods_id,
-        this.params.askValue,
-        this.params.anonymous
-      )
-        .then((res) => {
-          if (res.statusCode == 200) {
-            uni.showToast({
-              title: "提交成功!",
-              icon: "none",
-            });
-            this.askValue = "";
-          }
-           if (this.$store.state.isShowToast){ uni.hideLoading() };
+          title: '提交成功!',
+          icon: 'none',
         })
-        .catch((err) => {
-        
-           if (this.$store.state.isShowToast){ uni.hideLoading() };
-        });
-    },
-    radioGroupChange(e) {
-     
-    },
-    radioChange(e) {
-      if (this.anonymous == "YES") {
-        this.anonymous = "NO";
-      } else {
-        this.anonymous = "YES";
+        params.askValue = ''
       }
-    },
-  },
-};
+      if (store.state.isShowToast) {
+        uni.hideLoading()
+      }
+    })
+    .catch(() => {
+      if (store.state.isShowToast) {
+        uni.hideLoading()
+      }
+    })
+}
+
+function radioGroupChange(_e: any) {}
+
+function radioChange(_e: any) {
+  if (params.anonymous == 'YES') {
+    params.anonymous = 'NO'
+  } else {
+    params.anonymous = 'YES'
+  }
+}
+
+function goodsDetail() {}
+
+onLoad((options: any) => {
+  askGoods.value = options
+  getGoodsData()
+})
 </script>
 <style scoped lang="scss">
 .img {