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

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

pages/order/complain/complain.vue

@@ -57,137 +57,112 @@
   </view>
 </template>
 
-<script>
-import storage from "@/utils/storage.js";
-import { getOrderDetail } from "@/api/order.js";
-import { getComplainReason, addComplain } from "@/api/after-sale.js";
-import { handleUploadAfterRead } from "@/utils/uploadHelper.js";
-export default {
-  data() {
-    return {
-      storage,
-      uploadFileList: [],
-      orderStatusMap: {
-        //订单状态列表
-        UNDELIVERED: "待发货",
-        PARTS_DELIVERED: "部分发货",
-        UNPAID: "未付款",
-        PAID: "已付款",
-        DELIVERED: "已发货",
-        CANCELLED: "已取消",
-        COMPLETE: "已完成",
-        TAKE: "已完成",
-      },
-      complainValue: "", //投诉内容
-      complainShow: false, //投诉主题开关
-      complainTopic: "", //投诉抱怨话题
-      complainList: [], // 投诉列表
-      images: [], //投诉内容图片
-      order: "", //订单
-      orderGoodsList: "", //订单商品
-      orderDetail: "", //订单详情
-      sn: "",
-      skuId: "", //商品skuid
-    };
-  },
+<script setup lang="ts">
+import { ref } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import { useStore } from '@/store'
+import { getOrderDetail } from '@/api/order.js'
+import { getComplainReason, addComplain } from '@/api/after-sale.js'
+import { handleUploadAfterRead } from '@/utils/uploadHelper.js'
+import { unitPrice } from '@/utils/filters.js'
 
-  onLoad(option) {
-    this.loadData(option.sn);
-    this.sn = option.sn;
-    this.skuId = option.skuId;
-    this.getReasion();
-  },
+const store = useStore()
 
-  methods: {
-    onUploadAfterRead(event) {
-      handleUploadAfterRead(event, this.uploadFileList, (urls) => {
-        this.images = urls;
-      });
-    },
-    /**
-     * 提交
-     */
-    handleSubmit() {
-      if(!this.images.length && !this.complainValue){
-        uni.showToast({
-          title:'请上传图片凭证和投诉内容',
-          icon:'none'
+const orderStatusMap: Record<string, string> = {
+  UNDELIVERED: '待发货',
+  PARTS_DELIVERED: '部分发货',
+  UNPAID: '未付款',
+  PAID: '已付款',
+  DELIVERED: '已发货',
+  CANCELLED: '已取消',
+  COMPLETE: '已完成',
+  TAKE: '已完成',
+}
+
+const uploadFileList = ref<any[]>([])
+const complainValue = ref('')
+const complainShow = ref(false)
+const complainTopic = ref('')
+const complainList = ref<any[]>([])
+const images = ref<string[]>([])
+const order = ref<Record<string, any>>({})
+const orderGoodsList = ref<any[]>([])
+const sn = ref('')
+const skuId = ref('')
+
+onLoad((option) => {
+  loadData(option.sn)
+  sn.value = option.sn
+  skuId.value = option.skuId
+  getReasion()
+})
+
+function onUploadAfterRead(event: any) {
+  handleUploadAfterRead(event, uploadFileList.value, (urls) => {
+    images.value = urls
+  })
+}
+
+function handleSubmit() {
+  if (!images.value.length && !complainValue.value) {
+    uni.showToast({
+      title: '请上传图片凭证和投诉内容',
+      icon: 'none',
+    })
+    return
+  }
+  const goods = orderGoodsList.value.filter((item) => item.skuId == skuId.value)
+  const data = {
+    complainTopic: complainTopic.value,
+    content: complainValue.value,
+    goodsId: goods[0].goodsId,
+    images: images.value,
+    orderSn: sn.value,
+    skuId: skuId.value,
+  }
+  addComplain(data).then((res) => {
+    if (res.data.success) {
+      uni.showToast({
+        title: '提交成功!',
+        duration: 2000,
+        icon: 'none',
+      })
+      setTimeout(() => {
+        uni.redirectTo({
+          url: '/pages/order/complain/complainList',
         })
-        return
+      }, 1000)
+    }
+  })
+}
 
-      }
-      // 循环出商品
-      let goods = this.orderGoodsList.filter((item) => {
-        return item.skuId == this.skuId;
-      });
-      //数据赋值
-      let data = {
-        complainTopic: this.complainTopic, //投诉主题,
-        content: this.complainValue, //投诉内容
-        goodsId: goods[0].goodsId, //商品id
-        images: this.images, //图片
-        orderSn: this.sn, //订单号
-        skuId: this.skuId, //skuid
-      };
-      addComplain(data).then((res) => {
-        if (res.data.success) {
-          uni.showToast({
-            title: "提交成功!",
-            duration: 2000,
-            icon: "none",
-          });
+function getReasion() {
+  getComplainReason().then((res) => {
+    if (res.data.result.length >= 1) {
+      res.data.result.forEach((item: any) => {
+        complainList.value.push({
+          value: item.reason,
+          label: item.reason,
+        })
+      })
+      complainTopic.value = res.data.result[0].reason
+    }
+  })
+}
 
-          setTimeout(() => {
-            uni.redirectTo({
-              url: "/pages/order/complain/complainList",
-            });
-          }, 1000);
-        }
-      });
-    },
+function loadData(orderSn: string) {
+  uni.showLoading({ title: '加载中' })
+  getOrderDetail(orderSn).then((res) => {
+    const result = res.data.result
+    order.value = result.order
+    orderGoodsList.value = result.orderItems
+    if (store.state.isShowToast) uni.hideLoading()
+  })
+}
 
-    /**
-     * 获取投诉原因
-     */
-    getReasion() {
-      getComplainReason().then((res) => {
-        if (res.data.result.length >= 1) {
-          res.data.result.forEach((item) => {
-            let way = {
-              value: item.reason,
-              label: item.reason,
-            };
-            this.complainList.push(way);
-          });
-          this.complainTopic = res.data.result[0].reason;
-        }
-      });
-    },
-
-    /**
-     * 加载订单详情
-     */
-    loadData(sn) {
-      uni.showLoading({
-        title: "加载中",
-      });
-      getOrderDetail(sn).then((res) => {
-        const order = res.data.result;
-        this.order = order.order;
-        this.orderGoodsList = order.orderItems;
-        this.orderDetail = res.data.result;
-         if (this.$store.state.isShowToast){ uni.hideLoading() };
-      });
-    },
-
-    /**
-     * 确认投诉
-     */
-    confirmComplain(e) {
-      this.complainTopic = e[0].label;
-    },
-  },
-};
+function confirmComplain(e: any[]) {
+  complainTopic.value = e[0].label
+}
 </script>
 
 <style lang="scss" scoped>

pages/order/complain/complainInfo.vue

@@ -34,7 +34,7 @@
         <span>{{ complaint.content }}</span>
       </view>
     </view>
-    <view class="speak-way" v-else>暂无对话</view>
+    <view class="speak-way" v-else>暂无对话</view>
 	<div v-if="complainDetail.complainStatus!='COMPLETE'">
 		<view class="tips">回复对话</view>
 		<view class="cell-item complain-content">
@@ -42,7 +42,7 @@
 			<u-input type="textarea" height="70rpx" auto-height v-model="complainValue" />
 		  </view>
 		</view>
-		<view class="submit-btn" @click="handleSubmit">回复</view>
+		<view class="submit-btn" @click="handleSubmit">回复</view>
 	</div>
     <view class="tips">平台仲裁</view>
     <u-cell-group>
@@ -51,99 +51,91 @@
   </view>
 </template>
 
-<script>
-import { getComplainDetail, communication } from "@/api/after-sale";
-export default {
-  data() {
-    return {
-      complainId: "",
-      complainValue: "", //回复内容
-      complainDetail: "", //投诉详情
-      statusData: {
-        NEW: "新投诉",
-        NO_APPLY: "未申请",
-        APPLYING: "申请中",
-        COMPLETE: "已完成",
-        EXPIRED: "已失效",
-        CANCEL: "已取消",
-        WAIT_ARBITRATION:"等待仲裁"
-      },
-    };
-  },
+<script setup lang="ts">
+import { ref } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import { useStore } from '@/store'
+import { getComplainDetail, communication } from '@/api/after-sale'
 
-  onLoad(option) {
-    this.complainId = option.id;
-    this.init(option.id);
-  },
-  methods: {
-    /**
-     * 点击图片放大或保存
-     */
-    preview(urls, index) {
-      uni.previewImage({
-        current: index,
-        urls: urls,
-        longPressActions: {
-          itemList: ["保存图片"],
-          success: function (data) {},
-          fail: function (err) {},
-        },
-      });
-    },
-    handleSubmit() {
-      if (!this.complainValue) {
-        uni.showToast({
-          title: "请输入回复内容",
-          duration: 2000,
-          icon: "none",
-        });
-        return;
-      }
-      let params = {
-        content: this.complainValue,
-        complainId: this.complainId,
-      };
-      communication(params).then((res) => {
-        if (res.data.success) {
-          uni.showToast({
-            title: "回复成功",
-            duration: 2000,
-            icon: "none",
-          });
-          this.complainValue = '';
-          this.init(this.complainId);
-        } else {
-          uni.showToast({
-            title: res.data.message,
-            duration: 2000,
-            icon: "none",
-          });
-        }
-      });
+const store = useStore()
 
+const complainId = ref('')
+const complainValue = ref('')
+const complainDetail = ref<Record<string, any>>({})
+const statusData: Record<string, string> = {
+  NEW: '新投诉',
+  NO_APPLY: '未申请',
+  APPLYING: '申请中',
+  COMPLETE: '已完成',
+  EXPIRED: '已失效',
+  CANCEL: '已取消',
+  WAIT_ARBITRATION: '等待仲裁',
+}
+
+onLoad((option) => {
+  complainId.value = option.id
+  init(option.id)
+})
+
+function preview(urls: string[], index: number) {
+  uni.previewImage({
+    current: index,
+    urls,
+    longPressActions: {
+      itemList: ['保存图片'],
+      success: () => {},
+      fail: () => {},
     },
-    /**
-     * 初始化投诉详情
-     */
-    init(id) {
-      uni.showLoading({
-        title: "加载中",
-      });
-      getComplainDetail(id).then((res) => {
-        if (res.data.success) {
-          this.complainDetail = res.data.result;
-        } else {
-          uni.showToast({
-            title: res.data.message,
-            duration: 2000,
-            icon: "none",
-          });
-        }
-         if (this.$store.state.isShowToast){ uni.hideLoading() };
-      });
-    },
-  },
-};
+  })
+}
+
+function handleSubmit() {
+  if (!complainValue.value) {
+    uni.showToast({
+      title: '请输入回复内容',
+      duration: 2000,
+      icon: 'none',
+    })
+    return
+  }
+  const params = {
+    content: complainValue.value,
+    complainId: complainId.value,
+  }
+  communication(params).then((res) => {
+    if (res.data.success) {
+      uni.showToast({
+        title: '回复成功',
+        duration: 2000,
+        icon: 'none',
+      })
+      complainValue.value = ''
+      init(complainId.value)
+    } else {
+      uni.showToast({
+        title: res.data.message,
+        duration: 2000,
+        icon: 'none',
+      })
+    }
+  })
+}
+
+function init(id: string) {
+  uni.showLoading({ title: '加载中' })
+  getComplainDetail(id).then((res) => {
+    if (res.data.success) {
+      complainDetail.value = res.data.result
+    } else {
+      uni.showToast({
+        title: res.data.message,
+        duration: 2000,
+        icon: 'none',
+      })
+    }
+    if (store.state.isShowToast) uni.hideLoading()
+  })
+}
 </script>
 <style lang="scss" scoped>
 .row {

pages/order/complain/complainList.vue

@@ -1,181 +1,239 @@
-<template>
-  <view>
-    <view class="seller-view" v-for="(item, index) in complaionData" :key="index">
-      <view class="seller-info u-flex u-row-between">
-        <view class="seller-name">
-          <view class="name">{{ item.storeName }}</view>
-        </view>
-        <view class="order-sn">{{ statusData[item.complainStatus] }}</view>
-      </view>
-      <u-line color="#DCDFE6"></u-line>
-      <view class="goods-item-view">
-        <view class="goods-img" @click="handleToGoods(item)">
-          <u-image border-radius="6" width="131rpx" height="131rpx" :src="item.goodsImage"></u-image>
-        </view>
-        <view class="goods-info" @click="handleToGoods(item)">
-          <view class="goods-title u-line-2">{{ item.goodsName }}</view>
-          <view class="goods-price">
-            ￥{{unitPrice(item.goodsPrice) }}
-            <!-- <span>+{{ '1' }}积分</span> -->
-          </view>
-        </view>
-        <view class="goods-num">
-          <view>x{{ item.num }}</view>
-        </view>
-      </view>
-      <view class="complain-item-view">
-        <view class="complain-time"> {{ item.createTime }} </view>
-        <view class="complain-speak"> {{ item.complainTopic }} </view>
-      </view>
-      <view class="complain-btn">
-        <u-tag mode="plain" @click="handleClear(item)" class="complain-tag" text="撤销投诉" type="info"
-		 v-if="item.complainStatus === 'APPLYING' || item.complainStatus === 'NEW'" />
-        <u-tag mode="plain" @click="handleInfo(item)" class="complain-tag" text="投诉详情" type="info" />
-      </view>
-    </view>
-
-    <u-empty v-if="empty" :style="{'marginTop':complaionDetail.total == 0 ? '200rpx':'0rpx'}" class="empty" style="" text="暂无投诉列表" mode="list"></u-empty>
-
-    <u-modal show-cancel-button @confirm="handleClearConfirm" v-model:show="show" :content="content"></u-modal>
-  </view>
-</template>
-
-<script>
-import { getComplain, clearComplain } from "@/api/after-sale";
-
-export default {
-  data() {
-    return {
-      statusData: {
-        NEW: "新投诉",
-        NO_APPLY: "未申请",
-        APPLYING: "申请中",
-        COMPLETE: "已完成",
-        EXPIRED: "已失效",
-        CANCEL: "已取消",
-        WAIT_ARBITRATION:"等待仲裁"
-      },
-      show: false,
-      content: "是否撤销投诉？",
-      params: {
-        pageNumber: 1,
-        pageSize: 20,
-      },
-      complaionDetail: "", //返回的整个response
-      complaionData: [], //投诉列表
-      empty: false,
-      checkComplainData: "", //存储投诉信息
-    };
-  },
-  mounted() {
-    this.init();
-  },
-  /**
-   * 触底加载
-   */
-  onReachBottom() {
-    if (
-      this.complaionDetail &&
-      this.complaionDetail.total < this.params.pageNumber * this.params.pageSize
-    ) {
-      this.params.pageNumber++;
-      this.init();
-    }
-  },
-
-  methods: {
-    // 点击跳转到商品
-    handleToGoods(val) {
-      uni.navigateTo({
-        url: "/pages/product/goods?id=" + val.skuId + "&goodsId=" + val.goodsId,
-      });
-    },
-
-    /**
-     * 点击撤销投诉
-     */
-    handleClear(val) {
-      this.show = true;
-      this.checkComplainData = val;
-    },
-    /**
-     * 执行撤销
-     */
-    handleClearConfirm() {
-      clearComplain(this.checkComplainData.id).then((res) => {
-        if (res.data.success) {
-          uni.showToast({
-            title: "撤销成功",
-            duration: 2000,
-            icon: "none",
-          });
-          this.complaionData = [];
-          this.params.pageNumber = 1;
-          this.init();
-        }
-      });
-    },
-
-    /**
-     * 查看详情
-     */
-    handleInfo(val) {
-      uni.navigateTo({
-        url: "./complainInfo?id=" + val.id,
-      });
-    },
-
-    /**
-     * 初始化投诉列表
-     */
-    init() {
-      uni.showLoading({
-        title: "加载中",
-      });
-      getComplain(this.params).then((res) => {
-        this.complaionDetail = res.data.result;
-        if (res.data.result.records.length >= 1) {
-          this.complaionData.push(...res.data.result.records);
-        } else {
-          this.empty = true;
-        }
-         if (this.$store.state.isShowToast){ uni.hideLoading() };
-      });
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-@import "../goods.scss";
-
-.complain-item-view {
-  border-bottom: 2rpx solid #f5f7fa;
-  border-top: 2rpx solid #f5f7fa;
-  padding: 20rpx 30rpx;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.complain-time {
-  font-size: 24rpx;
-  color: #999;
-}
-::v-deep .seller-name {
-  width: auto !important;
-}
-.complain-btn {
-  padding: 20rpx 0;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  margin-right: 30rpx;
-}
-.complain-tag {
-  margin-left: 10rpx;
-}
-.empty {
-  margin-top: 40rpx;
-}
-</style>
+<template>
+  <view>
+    <view class="seller-view" v-for="(item, index) in complaionData" :key="index">
+      <view class="seller-info u-flex u-row-between">
+        <view class="seller-name">
+          <view class="name">{{ item.storeName }}</view>
+        </view>
+        <view class="order-sn">{{ statusData[item.complainStatus] }}</view>
+      </view>
+      <u-line color="#DCDFE6"></u-line>
+      <view class="goods-item-view">
+        <view class="goods-img" @click="handleToGoods(item)">
+          <u-image radius="6rpx" width="131rpx" height="131rpx" :src="item.goodsImage"></u-image>
+        </view>
+        <view class="goods-info" @click="handleToGoods(item)">
+          <view class="goods-title u-line-2">{{ item.goodsName }}</view>
+          <view class="goods-price">
+            ￥{{unitPrice(item.goodsPrice) }}
+            <!-- <span>+{{ '1' }}积分</span> -->
+          </view>
+        </view>
+        <view class="goods-num">
+          <view>x{{ item.num }}</view>
+        </view>
+      </view>
+      <view class="complain-item-view">
+        <view class="complain-time"> {{ item.createTime }} </view>
+        <view class="complain-speak"> {{ item.complainTopic }} </view>
+      </view>
+      <view class="complain-btn">
+        <u-tag plain @click="handleClear(item)" class="complain-tag" text="撤销投诉" type="info"
+		 v-if="item.complainStatus === 'APPLYING' || item.complainStatus === 'NEW'" />
+        <u-tag plain @click="handleInfo(item)" class="complain-tag" text="投诉详情" type="info" />
+      </view>
+    </view>
+
+    <u-empty v-if="empty" :style="{'marginTop':complaionDetail.total == 0 ? '200rpx':'0rpx'}" class="empty" style="" text="暂无投诉列表" mode="list"></u-empty>
+
+    <u-modal show-cancel-button @confirm="handleClearConfirm" v-model:show="show" :content="content"></u-modal>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { onLoad, onReachBottom } from '@dcloudio/uni-app'
+import { useStore } from '@/store'
+import { unitPrice } from '@/utils/filters.js'
+import { getComplain, clearComplain } from '@/api/after-sale'
+
+const store = useStore()
+
+const statusData: Record<string, string> = {
+  NEW: '新投诉',
+  NO_APPLY: '未申请',
+  APPLYING: '申请中',
+  COMPLETE: '已完成',
+  EXPIRED: '已失效',
+  CANCEL: '已取消',
+  WAIT_ARBITRATION: '等待仲裁',
+}
+
+const show = ref(false)
+const content = ref('是否撤销投诉？')
+const params = ref({ pageNumber: 1, pageSize: 20 })
+const complaionDetail = ref<any>(null)
+const complaionData = ref<any[]>([])
+const empty = ref(false)
+const checkComplainData = ref<any>(null)
+
+onLoad(() => {
+  init()
+})
+
+onReachBottom(() => {
+  if (
+    complaionDetail.value &&
+    complaionDetail.value.total > params.value.pageNumber * params.value.pageSize
+  ) {
+    params.value.pageNumber++
+    init()
+  }
+})
+
+function handleToGoods(val: any) {
+  uni.navigateTo({
+    url: '/pages/product/goods?id=' + val.skuId + '&goodsId=' + val.goodsId,
+  })
+}
+
+function handleClear(val: any) {
+  show.value = true
+  checkComplainData.value = val
+}
+
+function handleClearConfirm() {
+  clearComplain(checkComplainData.value.id).then((res) => {
+    if (res.data.success) {
+      uni.showToast({
+        title: '撤销成功',
+        duration: 2000,
+        icon: 'none',
+      })
+      complaionData.value = []
+      params.value.pageNumber = 1
+      init()
+    }
+  })
+}
+
+function handleInfo(val: any) {
+  uni.navigateTo({
+    url: './complainInfo?id=' + val.id,
+  })
+}
+
+function hideLoadingIfNeeded() {
+  if (store.state.isShowToast) uni.hideLoading()
+}
+
+function init() {
+  uni.showLoading({
+    title: '加载中',
+  })
+  getComplain(params.value).then((res) => {
+    complaionDetail.value = res.data.result
+    if (res.data.result.records.length >= 1) {
+      complaionData.value.push(...res.data.result.records)
+    } else {
+      empty.value = true
+    }
+    hideLoadingIfNeeded()
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+.seller-view {
+  background-color: #fff;
+  margin: 20rpx 0;
+}
+
+.seller-info {
+  height: 70rpx;
+  padding: 0 20rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.seller-name {
+  width: auto;
+  min-width: 0;
+  font-size: 33rpx;
+  font-weight: 600;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  height: 90rpx;
+}
+
+.name {
+  margin-left: 15rpx;
+  margin-top: -2rpx;
+  font-size: 28rpx;
+  flex: 1;
+}
+
+.order-sn {
+  color: #ff0000;
+  font-size: 26rpx;
+  flex-shrink: 0;
+  margin-left: 20rpx;
+}
+
+.goods-item-view {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10rpx 30rpx;
+}
+
+.goods-img {
+  width: 131rpx;
+  height: 131rpx;
+  flex: 0 0 131rpx;
+}
+
+.goods-info {
+  padding-left: 30rpx;
+  min-width: 0;
+  flex: 1;
+}
+
+.goods-title {
+  margin-bottom: 10rpx;
+  color: $font-color-dark;
+}
+
+.goods-price {
+  font-size: 28rpx;
+  margin-bottom: 10rpx;
+  color: #ff5a10;
+}
+
+.goods-num {
+  text-align: center;
+  flex: 0 0 60rpx;
+  width: 60rpx;
+  color: $main-color;
+}
+
+.complain-item-view {
+  border-bottom: 2rpx solid #f5f7fa;
+  border-top: 2rpx solid #f5f7fa;
+  padding: 20rpx 30rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.complain-time {
+  font-size: 24rpx;
+  color: #999;
+}
+.complain-btn {
+  padding: 20rpx 0;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  margin-right: 30rpx;
+}
+.complain-tag {
+  margin-left: 10rpx;
+}
+.empty {
+  margin-top: 40rpx;
+}
+</style>