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

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

pages/order/afterSales/afterSales.vue

@@ -6,8 +6,8 @@
         :scrollable="false"
         v-model:current="current"
         @change="change"
-        :lineColor="$lightColor"
-        :activeStyle="{ color: $lightColor }"
+        :lineColor="lightColor"
+        :activeStyle="{ color: lightColor }"
       ></u-tabs>
     </view>
     <div class="u-tabs-search">
@@ -194,279 +194,199 @@
   </view>
 </template>
 
-<script>
-import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue";
-import { getAfterSaleList, cancelAfterSale } from "@/api/after-sale.js";
-import { getOrderList } from "@/api/order.js";
-import storage from "@/utils/storage";
+<script setup lang="ts">
+import { ref, reactive, computed } from 'vue'
+import { onLoad, onPullDownRefresh } from '@dcloudio/uni-app'
+import { useStore } from '@/store'
+import { unitPrice, serviceStatusList, parseGoodsImageUrl } from '@/utils/filters.js'
+import { getAfterSaleList, cancelAfterSale } from '@/api/after-sale.js'
+import { getOrderList } from '@/api/order.js'
+import storage from '@/utils/storage'
 
-export default {
-  components: {
-    uniLoadMore,
-  },
-  data() {
-    return {
-      list: [
-        //tab表头
+const store = useStore()
+const lightColor = computed(() => store.getters.lightColor)
+
+const list = [
+  { name: '售后申请' },
+  { name: '申请中' },
+  { name: '申请记录' },
+]
+
+const current = ref(0)
+const tipsShow = ref(false)
+const cancelShow = ref(false)
+const selectedOrder = ref<any>(null)
+const orderList = ref<any[]>([])
+const params = reactive<Record<string, any>>({
+  pageNumber: 1,
+  pageSize: 10,
+  sort: 'createTime',
+  flowPrice: 0,
+  order: 'desc',
+})
+const logParams = reactive<Record<string, any>>({
+  pageNumber: 1,
+  pageSize: 10,
+})
+const status = ref('loadmore')
+const keywords = ref('')
+
+onLoad((options) => {
+  orderList.value = []
+  params.pageNumber = 1
+  if (options?.orderSn) params.keywords = options.orderSn
+  searchOrderList(current.value)
+})
+
+onPullDownRefresh(() => {
+  change(current.value)
+})
+
+function hideLoadingIfNeeded() {
+  if (store.state.isShowToast) uni.hideLoading()
+}
+
+function getGoodsName(sku: any) {
+  return sku.goodsName || sku.name || ''
+}
+
+function getGoodsImage(goods: any, order: any, index: number) {
+  let image = goods.image || goods.goodsImage || goods.thumbnail
+  if (!image && order.groupImages) {
+    const images = String(order.groupImages).split(',')
+    image = images[index] || images[0]
+  }
+  return parseGoodsImageUrl(image)
+}
+
+function submitSearchOrderList(tabIndex: number) {
+  params.pageNumber = 1
+  logParams.pageNumber = 1
+  orderList.value = []
+  searchOrderList(tabIndex)
+}
+
+function clear(tabIndex: number) {
+  params.pageNumber = 1
+  logParams.pageNumber = 1
+  params.keywords = ''
+  orderList.value = []
+  searchOrderList(tabIndex)
+}
+
+function change(e: number | { index: number }) {
+  const index = typeof e === 'object' && e != null ? e.index : e
+  current.value = index
+  Object.assign(params, { pageNumber: 1, pageSize: 10 })
+  orderList.value = []
+  searchOrderList(index)
+  uni.stopPullDownRefresh()
+}
+
+function searchOrderList(index: number) {
+  if (index == 0) {
+    if (keywords.value) params.keywords = keywords.value
+    fetchOrderList()
+  } else {
+    Object.assign(logParams, {
+      pageNumber: 1,
+      pageSize: 10,
+      sort: 'createTime',
+      order: 'desc',
+    })
+    if (index === 1) {
+      logParams.serviceStatus = 'APPLY'
+    }
+    if (keywords.value) logParams.keywords = keywords.value
+    orderList.value = []
+    fetchAfterSaleLogList()
+  }
+}
+
+function fetchOrderList() {
+  uni.showLoading({ title: '加载中', mask: true })
+  getOrderList(params).then((res) => {
+    hideLoadingIfNeeded()
+    const records = res.data.result.records
+    if (records.length > 0) {
+      orderList.value = orderList.value.concat(records)
+      params.pageNumber += 1
+    }
+    status.value = records.length < 10 ? 'nomore' : 'loading'
+  })
+}
+
+function close(order: any, _sku: any) {
+  selectedOrder.value = order
+  cancelShow.value = true
+}
+
+async function closeService() {
+  uni.showLoading({ title: '加载中' })
+  const res = await cancelAfterSale(selectedOrder.value.sn)
+  if (res.data.success) {
+    uni.showToast({ title: '取消成功!', duration: 2000, icon: 'none' })
+  }
+  orderList.value = []
+  searchOrderList(current.value)
+  hideLoadingIfNeeded()
+}
+
+function afterDetails(order: any, _sku?: any) {
+  uni.navigateTo({ url: './applyDetail?sn=' + order.sn })
+}
+
+function fetchAfterSaleLogList() {
+  getAfterSaleList(logParams).then((res) => {
+    const afterSaleLogList = res.data.result.records
+    afterSaleLogList.forEach((item: any) => {
+      item.orderItems = [
         {
-          name: "售后申请",
+          image: item.goodsImage,
+          skuId: item.skuId,
+          name: item.goodsName,
+          num: item.num,
+          price: item.flowPrice,
         },
-        {
-          name: "申请中",
-        },
-        {
-          name: "申请记录",
-        },
-      ],
-      current: 0, //当前表头索引
-      tipsShow: false, //提示开关
-      cancelShow: false, //取消显示开关
-      selectedOrder: "", //选中的order
-      orderList: [], //订单集合
-      params: {
-        pageNumber: 1,
-        pageSize: 10,
-        sort: "createTime",
-        flowPrice: 0,
-        order: "desc",
-      },
+      ]
+    })
+    orderList.value = orderList.value.concat(afterSaleLogList)
+    status.value = afterSaleLogList.length < 10 ? 'nomore' : 'loading'
+  })
+}
 
-      logParams: {
-        pageNumber: 1,
-        pageSize: 10,
-      },
-      status: "loadmore",
-      keywords: "", // 搜索订单sn
-    };
-  },
-  onLoad(options) {
-    this.orderList = [];
-    this.params.pageNumber = 1;
-    if (options.orderSn) this.params.keywords = options.orderSn;
-    this.searchOrderList(this.current);
-  },
-  onPullDownRefresh() {
-    this.change(this.current);
-  },
-  methods: {
-    getGoodsName(sku) {
-      return sku.goodsName || sku.name || "";
-    },
-    getGoodsImage(goods, order, index) {
-      let image = goods.image || goods.goodsImage || goods.thumbnail;
-      if (!image && order.groupImages) {
-        const images = String(order.groupImages).split(",");
-        image = images[index] || images[0];
-      }
-      return this.parseGoodsImageUrl(image);
-    },
-    /**
-     * 点击搜索执行搜索
-     */
-    submitSearchOrderList(current) {
-      this.params.pageNumber = 1;
-      this.logParams.pageNumber = 1;
-      this.orderList = [];
-      this.searchOrderList(current);
-    },
-    // 清空
-    clear(current){
-      this.params.pageNumber = 1;
-      this.logParams.pageNumber = 1;
-      this.params.keywords = ''
-      this.orderList = [];
-      this.searchOrderList(current);
-    },
-    /**
-     * 切换tab页时，初始化数据
-     */
-    change(e) {
-      const index = typeof e === 'object' && e != null ? e.index : e;
-      this.current = index;
-      this.params = {
-        pageNumber: 1,
-        pageSize: 10,
-      };
-      this.orderList = [];
-      //如果是2 则读取售后申请记录列表
-      this.searchOrderList(index);
-      uni.stopPullDownRefresh();
-    },
+function applyService(sn: string, order: any, sku: any) {
+  storage.setAfterSaleData({ ...order, ...sku })
+  uni.navigateTo({ url: `/pages/order/afterSales/afterSalesSelect?sn=${sn}` })
+}
 
-    /**
-     * 搜索初始化
-     * 根据当前tab传值的索引进行更改
-     */
-    searchOrderList(index) {
-      if (index == 0) {
-        this.keywords ? (this.params.keywords = this.keywords) : "";
-        this.getOrderList();
-      } else {
-        this.logParams = {
-          pageNumber: 1,
-          pageSize: 10,
-          sort: "createTime",
-          order: "desc",
-        };
-        if (index === 1) {
-          this.logParams.serviceStatus = "APPLY";
-        }
-        this.keywords ? (this.logParams.keywords = this.keywords) : "";
-        this.orderList = [];
-        this.getAfterSaleLogList();
-      }
-    },
+function onExpress(order: any, sku: any) {
+  sku.storeName = order.storeName
+  storage.setAfterSaleData({ ...order, ...sku })
+  uni.navigateTo({ url: `./afterSalesDetailExpress?serviceSn=${order.sn}` })
+}
 
-    /**
-     * 获取订单列表
-     */
-    getOrderList() {
-      uni.showLoading({
-        title: "加载中",
-        mask: true,
-      });
-      getOrderList(this.params).then((res) => {
-         if (this.$store.state.isShowToast){ uni.hideLoading() };
-        const orderList = res.data.result.records;
-        if (orderList.length > 0) {
-          this.orderList = this.orderList.concat(orderList);
-          this.params.pageNumber += 1;
-        }
-        if (orderList.length < 10) {
-          this.status = "nomore";
-        } else {
-          this.status = "loading";
-        }
-      });
-    },
+function onDetail(goods: any, sku: any) {
+  if (current.value == 0) {
+    uni.navigateTo({
+      url: `/pages/product/goods?id=${sku.skuId}&goodsId=${sku.goodsId || sku.goodsId}`,
+    })
+  } else {
+    uni.navigateTo({
+      url: `/pages/product/goods?id=${goods.skuId}&goodsId=${goods.goodsId || goods.goodsId}`,
+    })
+  }
+}
 
-    close(order, sku) {
-      console.log(order, sku);
-      this.selectedOrder = order;
-      this.cancelShow = true;
-    },
-
-    async closeService() {
-      uni.showLoading({
-        title: "加载中",
-      });
-      console.log(this.selectedOrder);
-      let res = await cancelAfterSale(this.selectedOrder.sn);
-      if (res.data.success) {
-        uni.showToast({
-          title: "取消成功!",
-          duration: 2000,
-          icon: "none",
-        });
-      }
-      this.orderList = [];
-      this.searchOrderList(this.current);
-
-       if (this.$store.state.isShowToast){ uni.hideLoading() };
-    },
-
-    /**
-     * 售后详情
-     */
-    afterDetails(order) {
-      uni.navigateTo({
-        url: "./applyDetail?sn=" + order.sn,
-      });
-    },
-
-    /**
-     * 申请记录列表
-     */
-    getAfterSaleLogList() {
-      getAfterSaleList(this.logParams).then((res) => {
-        let afterSaleLogList = res.data.result.records;
-
-        afterSaleLogList.forEach((item) => {
-          item.orderItems = [
-            {
-              image: item.goodsImage,
-              skuId: item.skuId,
-              name: item.goodsName,
-              num: item.num,
-              price: item.flowPrice,
-            },
-          ];
-        });
-
-        this.orderList = this.orderList.concat(afterSaleLogList);
-
-        if (afterSaleLogList.length < 10) {
-          this.status = "nomore";
-        } else {
-          this.status = "loading";
-        }
-      });
-    },
-
-    /**
-     * 申请售后
-     */
-    applyService(sn, order, sku) {
-      let data = {
-        ...order,
-        ...sku,
-      };
-      storage.setAfterSaleData(data);
-      uni.navigateTo({
-        url: `/pages/order/afterSales/afterSalesSelect?sn=${sn}`,
-      });
-    },
-
-    /**
-     * 提交物流信息
-     */
-    onExpress(order, sku) {
-      sku.storeName = order.storeName;
-      let data = {
-        ...order,
-        ...sku,
-      };
-
-      storage.setAfterSaleData(data);
-      uni.navigateTo({
-        url: `./afterSalesDetailExpress?serviceSn=${order.sn}`,
-      });
-    },
-
-    /**
-     * 查看详情
-     */
-    onDetail(goods, sku) {
-      // 售后申请
-      if (this.current == 0) {
-        uni.navigateTo({
-          url: `/pages/product/goods?id=${sku.skuId}&goodsId=${
-            sku.goodsId || sku.goodsId
-          }`,
-        });
-      } else {
-        uni.navigateTo({
-          url: `/pages/product/goods?id=${goods.skuId}&goodsId=${
-            goods.goodsId || goods.goodsId
-          }`,
-        });
-      }
-    },
-
-    /**
-     * 底部加载数据
-     */
-    renderDate() {
-      if (this.current === 0) {
-        this.params.pageNumber += 1;
-        this.getOrderList();
-      } else {
-        this.logParams.pageNumber += 1;
-        this.getAfterSaleLogList();
-      }
-    },
-  },
-};
+function renderDate() {
+  if (current.value === 0) {
+    params.pageNumber += 1
+    fetchOrderList()
+  } else {
+    logParams.pageNumber += 1
+    fetchAfterSaleLogList()
+  }
+}
 </script>
 
 <style lang="scss">

pages/order/afterSales/afterSalesDetail.vue

@@ -1,7 +1,12 @@
 <template>
   <view class="page-wrap">
     <scroll-view scroll-y class="page-scroll">
-      <u-form :model="form" ref="uForm">
+      <up-form
+        :model="form"
+        ref="uForm"
+        label-position="left"
+        label-width="180rpx"
+      >
         <view class="after-sales-goods-detail-view">
         <view class="header">
           <view>
@@ -58,7 +63,7 @@
               <u-icon name="arrow-right" color="#ccc" size="16"></u-icon>
             </view>
           </view>
-          <u-form-item label="申请说明" label-width="150" :border-bottom="false" class="desc-item">
+          <up-form-item label="申请说明" label-width="180rpx" :border-bottom="false" class="desc-item">
             <u-input
               v-model="form.problemDesc"
               type="textarea"
@@ -67,54 +72,54 @@
               height="120"
               placeholder="请描述申请售后的说明"
             />
-          </u-form-item>
+          </up-form-item>
         </view>
 
         <!-- 退款方式 / 银行信息 -->
         <view class="opt-view form-block">
-          <u-form-item label="退款方式" label-width="150" :border-bottom="true">
+          <up-form-item label="退款方式" label-width="180rpx" :border-bottom="true">
             <view class="form-value">{{
               applyInfo.refundWay == 'ORIGINAL' ? '原路退回' : '账号退款'
             }}</view>
-          </u-form-item>
+          </up-form-item>
           <template v-if="
               applyInfo.accountType === 'BANK_TRANSFER' &&
               applyInfo.applyRefundPrice != 0
             ">
-            <u-form-item label="银行开户行" label-width="150" :border-bottom="true">
+            <up-form-item label="银行开户行" label-width="180rpx" :border-bottom="true">
               <u-input
                 v-model="form.bankDepositName"
                 border="none"
                 input-align="right"
                 placeholder="请输入银行开户行"
               />
-            </u-form-item>
-            <u-form-item label="银行开户名" label-width="150" :border-bottom="true">
+            </up-form-item>
+            <up-form-item label="银行开户名" label-width="180rpx" :border-bottom="true">
               <u-input
                 v-model="form.bankAccountName"
                 border="none"
                 input-align="right"
                 placeholder="请输入银行开户名"
               />
-            </u-form-item>
-            <u-form-item label="银行账号" label-width="150" :border-bottom="true" class="bank-account-item">
+            </up-form-item>
+            <up-form-item label="银行账号" label-width="180rpx" :border-bottom="true" class="bank-account-item">
               <u-input
                 v-model="form.bankAccountNumber"
                 border="none"
                 input-align="right"
                 placeholder="请输入银行账号"
               />
-            </u-form-item>
+            </up-form-item>
           </template>
 
-          <u-form-item
+          <up-form-item
             v-if="form.serviceType !== 'RETURN_MONEY'"
             label="返回方式"
-            label-width="150"
+            label-width="180rpx"
             :border-bottom="false"
           >
             <view class="form-value">快递至第三方卖家</view>
-          </u-form-item>
+          </up-form-item>
         </view>
 
         <!-- 上传凭证 -->
@@ -133,7 +138,7 @@
 
         <view class="opt-tip">提交服务单后，售后专员可能与您电话沟通，请保持手机畅通</view>
       </view>
-      </u-form>
+      </up-form>
     </scroll-view>
 
     <view class="submit-view">
@@ -142,7 +147,7 @@
         ripple
         shape="circle"
         v-if="applyInfo.refundWay"
-        :custom-style="{ backgroundColor: $lightColor, width: '100%' }"
+        :custom-style="{ backgroundColor: lightColor, width: '100%' }"
         @click="onSubmit"
       >提交申请</u-button>
     </view>
@@ -158,246 +163,214 @@
   </view>
 </template>
 
-<script>
-import {
-  getAfterSaleReason,
-  applyReturn,
-  getAfterSaleInfo,
-} from "@/api/after-sale";
+<script setup lang="ts">
+import { ref, reactive, computed, getCurrentInstance } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import { useStore } from '@/store'
+import { unitPrice, parseGoodsImageUrl } from '@/utils/filters.js'
+import { getAfterSaleReason, applyReturn, getAfterSaleInfo } from '@/api/after-sale'
+import { handleUploadAfterRead } from '@/utils/uploadHelper.js'
+import storage from '@/utils/storage.js'
 
-import city from "@/components/m-city/m-city";
-import { handleUploadAfterRead } from "@/utils/uploadHelper.js";
-import storage from "@/utils/storage.js";
-export default {
-  component: {
-    city,
-  },
-  data() {
-    return {
-      storage,
-      list: [{ id: "", localName: "请选择", children: [] }],
-      fileList: [],
-      sn: "",
-      sku: {},
-      typeValue: 0,
-      value: "",
-      type: "textarea",
-      border: true,
-      //退款原因 弹出框
-      reasonSelectShow: false,
-      reasonList: [],
-      applyInfo: {},
-      form: {
-        orderItemSn: "", // 订单sn
-        skuId: "",
-        reason: "", //退款原因
-        problemDesc: "", //退款说明
-        images: [], //图片凭证
-        num: 1, //退货数量
-        goodsId: "", //商品id
-        accountType: "",
-        applyRefundPrice: "",
-        refundWay: "",
-        serviceType: "", //申请类型
-      },
-    };
-  },
+const store = useStore()
+const { proxy } = getCurrentInstance()!
+const $u = proxy!.$u
 
-  /**
-   * 判断当前内容并生成数据
-   */
-  onLoad(options) {
-    let navTitle = "申请售后";
-    this.form.serviceType = "RETURN_GOODS";
-    if (options.value == 1) {
-      navTitle = "申请退货";
-      this.form.serviceType = "RETURN_GOODS";
+const lightColor = computed(() => store.getters.lightColor)
+
+const fileList = ref<any[]>([])
+const sn = ref('')
+const sku = ref<any>({})
+const reasonSelectShow = ref(false)
+const reasonList = ref<any[]>([])
+const applyInfo = ref<any>({})
+const uToast = ref<any>(null)
+
+const form = reactive({
+  orderItemSn: '',
+  skuId: '',
+  reason: '',
+  problemDesc: '',
+  images: [] as string[],
+  num: 1,
+  goodsId: '',
+  accountType: '',
+  applyRefundPrice: '',
+  refundWay: '',
+  serviceType: 'RETURN_GOODS',
+  bankDepositName: '',
+  bankAccountName: '',
+  bankAccountNumber: '',
+})
+
+onLoad((options) => {
+  let navTitle = '申请售后'
+  form.serviceType = 'RETURN_GOODS'
+  if (options?.value == '1') {
+    navTitle = '申请退货'
+    form.serviceType = 'RETURN_GOODS'
+  }
+  if (options?.value == '2') {
+    navTitle = '申请换货'
+    form.serviceType = 'EXCHANGE_GOODS'
+  }
+  if (options?.value == '3') {
+    navTitle = '申请退款'
+    form.serviceType = 'RETURN_MONEY'
+  }
+  uni.setNavigationBarTitle({ title: navTitle })
+  sn.value = options?.sn || ''
+  sku.value = storage.getAfterSaleData()
+  form.orderItemSn = options?.sn || ''
+  form.skuId = sku.value.skuId
+  form.num = sku.value.num
+  form.goodsId = sku.value.goodsId
+  fetchReasonActions(form.serviceType)
+  init(options?.sn || '')
+})
+
+function hideLoadingIfNeeded() {
+  if (store.state.isShowToast) uni.hideLoading()
+}
+
+function getGoodsName(item: any) {
+  return item.goodsName || item.name || ''
+}
+
+function getGoodsImage(item: any) {
+  const image = item.image || item.goodsImage || item.thumbnail
+  return parseGoodsImageUrl(image)
+}
+
+function gotoGoodsDetail(goodsId: string) {
+  if (!goodsId) return
+  uni.navigateTo({
+    url: `/pages/product/goods?id=${form.skuId}&goodsId=${goodsId}`,
+  })
+}
+
+async function fetchReasonActions(serviceType: string) {
+  uni.showLoading({ title: '加载中' })
+  await getAfterSaleReason(serviceType).then((res) => {
+    if (res.data.success) {
+      reasonList.value = res.data.result.map((item: any) => ({
+        value: item.id,
+        label: item.reason,
+      }))
     }
-    if (options.value == 2) {
-      navTitle = "申请换货";
-      this.form.serviceType = "EXCHANGE_GOODS";
-    }
-    if (options.value == 3) {
-      navTitle = "申请退款";
-      this.form.serviceType = "RETURN_MONEY";
-    }
-    this.typeValue = options.value;
-    uni.setNavigationBarTitle({
-      title: navTitle, //此处写页面的title
-    });
-    this.sn = options.sn;
-    this.sku = storage.getAfterSaleData();;
+  })
+  hideLoadingIfNeeded()
+}
 
-    this.form.orderItemSn = options.sn;
-    this.form.skuId = this.sku.skuId;
-    this.form.num = this.sku.num;
-    this.form.goodsId = this.sku.goodsId;
-    this.getReasonActions(this.form.serviceType);
-
-    this.init(options.sn);
-  },
-  methods: {
-    getGoodsName(item) {
-      return item.goodsName || item.name || "";
-    },
-    getGoodsImage(item) {
-      const image = item.image || item.goodsImage || item.thumbnail;
-      return this.parseGoodsImageUrl(image);
-    },
-    gotoGoodsDetail(goodsId) {
-      if (!goodsId) return;
-      uni.navigateTo({
-        url: `/pages/product/goods?id=${this.form.skuId}&goodsId=${goodsId}`,
-      });
-    },
-    /** 获取申请原因下拉框数据 */
-    async getReasonActions(serviceType) {
-      uni.showLoading({
-        title: "加载中",
-      });
-      await getAfterSaleReason(serviceType).then((res) => {
-        if (res.data.success) {
-          let action = [];
-          res.data.result.forEach((item) => {
-            action.push({
-              value: item.id,
-              label: item.reason,
-            });
-          });
-
-          this.reasonList = action;
-        }
-      });
-       if (this.$store.state.isShowToast){ uni.hideLoading() };
-    },
-    //打开地区选择器
-    showCitySelect() {
-      this.$refs.cityPicker.show();
-    },
-
-    // 初始化数据
-    init(sn) {
-      getAfterSaleInfo(sn).then((response) => {
-        if (response.data.code == 400) {
-          uni.showToast({
-            title: response.data.message,
-            duration: 2000,
-            icon: "none",
-          });
-        } else {
-          this.applyInfo = response.data.result;
-
-          this.form.accountType = response.data.result.accountType;
-        }
-      });
-    },
-
-    openReasonPicker() {
-      if (!this.reasonList.length) {
-        uni.showToast({
-          title: "暂无可选原因",
-          icon: "none",
-        });
-        return;
-      }
-      this.reasonSelectShow = true;
-    },
-
-    //退款原因
-    reasonSelectConfirm(val) {
-      const selected = val?.value?.[0] || val?.[0];
-      if (selected) {
-        this.form.reason = selected.label || selected.text || "";
-      }
-    },
-
-    //修改申请数量
-    valChange(e) {
-      this.form.num = e.value;
-    },
-    onUploadAfterRead(event) {
-      handleUploadAfterRead(event, this.fileList, (urls) => {
-        this.form.images = urls;
-      });
-    },
-    showToast(message, type = "error") {
-      const text = message || (type === "success" ? "操作成功" : "操作失败");
-      if (this.$refs.uToast) {
-        this.$refs.uToast.show({ message: text, type });
-        return;
-      }
+function init(orderItemSn: string) {
+  getAfterSaleInfo(orderItemSn).then((response) => {
+    if (response.data.code == 400) {
       uni.showToast({
-        title: text,
-        icon: type === "success" ? "success" : "none",
-      });
-    },
-    //提交申请
-    onSubmit() {
-      //提交申请前检测参数
-      if (!this.handleCheckParams()) {
-        return;
-      }
+        title: response.data.message,
+        duration: 2000,
+        icon: 'none',
+      })
+    } else {
+      applyInfo.value = response.data.result
+      form.accountType = response.data.result.accountType
+    }
+  })
+}
 
-      uni.showLoading({
-        title: "加载中",
-      });
-      this.form.accountType = this.applyInfo.accountType;
-      this.form.refundWay = this.applyInfo.refundWay;
-      this.form.applyRefundPrice = this.applyInfo.applyRefundPrice;
+function openReasonPicker() {
+  if (!reasonList.value.length) {
+    uni.showToast({ title: '暂无可选原因', icon: 'none' })
+    return
+  }
+  reasonSelectShow.value = true
+}
 
-      applyReturn(this.sn, this.form).then((resp) => {
-         if (this.$store.state.isShowToast){ uni.hideLoading() };
-        if (resp.data.success) {
-          this.showToast("提交成功", "success");
-          uni.redirectTo({
-            url: "/pages/order/afterSales/applySuccess",
-          });
-        } else {
-          this.showToast(resp.data.message || "提交失败", "error");
-        }
-      });
-    },
-    //检测提交参数
-    handleCheckParams() {
-      if (this.$u.test.isEmpty(this.form.reason)) {
-        this.showToast("请选择退款原因");
-        return false;
-      }
-      if (this.$u.test.isEmpty(this.form.problemDesc)) {
-        this.showToast("请输入退款说明");
-        return false;
-      }
+function reasonSelectConfirm(val: any) {
+  const selected = val?.value?.[0] || val?.[0]
+  if (selected) {
+    form.reason = selected.label || selected.text || ''
+  }
+}
 
-      if (
-        this.applyInfo.accountType === "BANK_TRANSFER" &&
-        this.applyInfo.applyRefundPrice != 0
-      ) {
-        if (this.$u.test.isEmpty(this.form.bankDepositName)) {
-          this.showToast("请输入银行开户行");
-          return false;
-        }
-        if (this.$u.test.isEmpty(this.form.bankAccountName)) {
-          this.showToast("请输入银行开户名");
-          return false;
-        }
-        if (this.$u.test.isEmpty(this.form.bankAccountNumber)) {
-          this.showToast("请输入银行账号");
-          return false;
-        }
-        if (this.$u.test.chinese(this.form.bankAccountName) === false) {
-          this.showToast("银行开户名需为中文");
-          return false;
-        }
-        if (this.$u.test.chinese(this.form.bankDepositName) === false) {
-          this.showToast("银行开户行需为中文");
-          return false;
-        }
-      }
+function valChange(e: { value: number }) {
+  form.num = e.value
+}
 
-      return true;
-    },
-  },
-};
+function onUploadAfterRead(event: any) {
+  handleUploadAfterRead(event, fileList.value, (urls) => {
+    form.images = urls
+  })
+}
+
+function showToast(message: string, type = 'error') {
+  const text = message || (type === 'success' ? '操作成功' : '操作失败')
+  if (uToast.value) {
+    uToast.value.show({ message: text, type })
+    return
+  }
+  uni.showToast({
+    title: text,
+    icon: type === 'success' ? 'success' : 'none',
+  })
+}
+
+function onSubmit() {
+  if (!validateFormParams()) return
+
+  uni.showLoading({ title: '加载中' })
+  form.accountType = applyInfo.value.accountType
+  form.refundWay = applyInfo.value.refundWay
+  form.applyRefundPrice = applyInfo.value.applyRefundPrice
+
+  applyReturn(sn.value, form).then((resp) => {
+    hideLoadingIfNeeded()
+    if (resp.data.success) {
+      showToast('提交成功', 'success')
+      uni.redirectTo({ url: '/pages/order/afterSales/applySuccess' })
+    } else {
+      showToast(resp.data.message || '提交失败', 'error')
+    }
+  })
+}
+
+function validateFormParams() {
+  if ($u.test.isEmpty(form.reason)) {
+    showToast('请选择退款原因')
+    return false
+  }
+  if ($u.test.isEmpty(form.problemDesc)) {
+    showToast('请输入退款说明')
+    return false
+  }
+
+  if (
+    applyInfo.value.accountType === 'BANK_TRANSFER' &&
+    applyInfo.value.applyRefundPrice != 0
+  ) {
+    if ($u.test.isEmpty(form.bankDepositName)) {
+      showToast('请输入银行开户行')
+      return false
+    }
+    if ($u.test.isEmpty(form.bankAccountName)) {
+      showToast('请输入银行开户名')
+      return false
+    }
+    if ($u.test.isEmpty(form.bankAccountNumber)) {
+      showToast('请输入银行账号')
+      return false
+    }
+    if ($u.test.chinese(form.bankAccountName) === false) {
+      showToast('银行开户名需为中文')
+      return false
+    }
+    if ($u.test.chinese(form.bankDepositName) === false) {
+      showToast('银行开户行需为中文')
+      return false
+    }
+  }
+
+  return true
+}
 </script>
 
 <style lang="scss" scoped>

pages/order/afterSales/afterSalesDetailExpress.vue

@@ -1,6 +1,11 @@
 <template>
   <view class="mp-iphonex-bottom content">
-    <u-form :model="form" ref="uForm">
+    <up-form
+      :model="form"
+      ref="uForm"
+      label-position="left"
+      label-width="180rpx"
+    >
       <view class="after-sales-goods-detail-view">
         <view class="header">
           <view>
@@ -29,32 +34,32 @@
         <!-- 上传凭证 -->
         <view class="opt-view">
           <view class="img-title" style="font-size: 30rpx">填写物流信息</view>
-          <u-form-item label="返回方式" :label-width="150">
+          <up-form-item label="返回方式" label-width="180rpx">
             <div style="width: 100%; text-align: right;">快递至第三方卖家</div>
-          </u-form-item>
-          <u-form-item label="快递公司" :label-width="150">
+          </up-form-item>
+          <up-form-item label="快递公司" label-width="180rpx">
             <div style="width: 100%; text-align: right;" @click="companySelectShow = true">
               {{ form.courierCompany || '请选择快递公司' }}
             </div>
-          </u-form-item>
-          <u-form-item label="快递单号" :label-width="150">
+          </up-form-item>
+          <up-form-item label="快递单号" label-width="180rpx">
             <u-input input-align="right" v-model="form.logisticsNo" placeholder="请输入快递单号"/>
-          </u-form-item>
-          <u-form-item label="发货时间" :label-width="150">
+          </up-form-item>
+          <up-form-item label="发货时间" label-width="180rpx">
             <div style="width: 100%; text-align: right;" @click="timeshow = true">{{
                 form.mDeliverTime || '请选择发货时间'
               }}
             </div>
-          </u-form-item>
+          </up-form-item>
         </view>
       </scroll-view>
 
       <view class="submit-view">
-        <u-button ripple :customStyle="{'background':$lightColor,'color':'#fff' }" shape="circle" @click="onSubmit">
+        <u-button ripple :customStyle="{ background: lightColor, color: '#fff' }" shape="circle" @click="onSubmit">
           提交申请
         </u-button>
       </view>
-    </u-form>
+    </up-form>
     <u-select mode="single-column" :list="companyList" v-model:show="companySelectShow"
               @confirm="companySelectConfirm"></u-select>
     <u-calendar v-model:show="timeshow" :mode="'date'" @change="onTimeChange"></u-calendar>
@@ -62,124 +67,98 @@
   </view>
 </template>
 
-<script>
-import {getLogistics} from "@/api/address.js";
-import {fillShipInfo} from "@/api/after-sale.js";
-import storage from "@/utils/storage";
+<script setup lang="ts">
+import { ref, reactive, computed } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import { useStore } from '@/store'
+import { unitPrice } from '@/utils/filters.js'
+import { getLogistics } from '@/api/address.js'
+import { fillShipInfo } from '@/api/after-sale.js'
+import storage from '@/utils/storage'
 
-export default {
-  data() {
-    return {
-      //快递公司 弹出框
-      companySelectShow: false,
-      companyList: [], //快递公司集合
-      timeshow: false, //发货时间
-      form: {
-        courierCompany: "", //快递公司
-        logisticsId: "", //快递公司ID
-        logisticsNo: "", //快递单号
-        mDeliverTime: "", //发货时间
-      },
-      serviceDetail: {}, //服务详情
-      sku: {}, //sku信息
-    };
-  },
-  onLoad(options) {
+const store = useStore()
+const lightColor = computed(() => store.getters.lightColor)
 
-    this.sku = storage.getAfterSaleData();
-    let navTitle = "服务单详情";
-    uni.setNavigationBarTitle({
-      title: navTitle, //此处写页面的title
-    });
-    this.serviceDetail.sn = options.serviceSn;
-    this.Logistics();
-  },
-  methods: {
-    /**
-     * 确认快递公司
-     */
-    companySelectConfirm(e) {
-      this.form.logisticsId = e[0].value;
-      this.form.courierCompany = e[0].label;
-    },
+const companySelectShow = ref(false)
+const companyList = ref<any[]>([])
+const timeshow = ref(false)
+const form = reactive({
+  courierCompany: '',
+  logisticsId: '',
+  logisticsNo: '',
+  mDeliverTime: '',
+})
+const serviceDetail = reactive<{ sn: string }>({ sn: '' })
+const sku = ref<any>({})
+const uToast = ref<any>(null)
 
-    /**
-     * 获取快递公司
-     */
-    Logistics() {
-      getLogistics().then((res) => {
-        if (res.data.success) {
-          res.data.result.forEach((item, index) => {
-            this.companyList[index] = {
-              value: item.id,
-              label: item.name,
-            };
-          });
-        }
-      });
-    },
+onLoad((options) => {
+  sku.value = storage.getAfterSaleData()
+  uni.setNavigationBarTitle({ title: '服务单详情' })
+  serviceDetail.sn = options?.serviceSn || ''
+  fetchLogisticsList()
+})
 
-    /**
-     * 更改时间
-     */
-    onTimeChange(e) {
-      this.form.mDeliverTime = e.result;
-    },
+function hideLoadingIfNeeded() {
+  if (store.state.isShowToast) uni.hideLoading()
+}
 
-    /**
-     * 点击提交
-     */
-    onSubmit() {
-      delete this.form.courierCompany;
+function companySelectConfirm(e: any[]) {
+  form.logisticsId = e[0].value
+  form.courierCompany = e[0].label
+}
 
-      if (this.form.logisticsId == "") {
-        this.$refs.uToast.show({
-          title: "请选择快递公司",
-          type: "error",
-        });
-        return;
-      }
-      if (this.form.logisticsNo == "") {
-        this.$refs.uToast.show({
-          title: "请填写快递单号",
-          type: "error",
-        });
-        return;
-      }
-      if (this.form.mDeliverTime == "") {
-        this.$refs.uToast.show({
-          title: "请选择发货时间",
-          type: "error",
-        });
-        return;
-      }
+function fetchLogisticsList() {
+  getLogistics().then((res) => {
+    if (res.data.success) {
+      companyList.value = res.data.result.map((item: any) => ({
+        value: item.id,
+        label: item.name,
+      }))
+    }
+  })
+}
 
-      uni.showLoading({
-        title: "加载中",
-        mask: true,
-      });
-      fillShipInfo(this.serviceDetail.sn, this.form).then((res) => {
-        if (this.$store.state.isShowToast) {
-          uni.hideLoading()
-        }
-        ;
-        if (res.statusCode === 200) {
-          this.$refs.uToast.show({
-            title: "提交成功",
-            type: "success",
-            back: true,
-            url: "/pages/order/afterSales/afterSales",
-          });
-        }
-      });
-    },
-    gotoGoodsDetail(sku) {
-      uni.navigateTo({
-        url: `/pages/product/goods?id=${sku.skuId}&goodsId=${sku.goodsId}`,
-      });
-    },
-  },
-};
+function onTimeChange(e: { result: string }) {
+  form.mDeliverTime = e.result
+}
+
+function onSubmit() {
+  const submitForm = { ...form }
+  delete submitForm.courierCompany
+
+  if (form.logisticsId == '') {
+    uToast.value?.show({ title: '请选择快递公司', type: 'error' })
+    return
+  }
+  if (form.logisticsNo == '') {
+    uToast.value?.show({ title: '请填写快递单号', type: 'error' })
+    return
+  }
+  if (form.mDeliverTime == '') {
+    uToast.value?.show({ title: '请选择发货时间', type: 'error' })
+    return
+  }
+
+  uni.showLoading({ title: '加载中', mask: true })
+  fillShipInfo(serviceDetail.sn, submitForm).then((res) => {
+    hideLoadingIfNeeded()
+    if (res.statusCode === 200) {
+      uToast.value?.show({
+        title: '提交成功',
+        type: 'success',
+        back: true,
+        url: '/pages/order/afterSales/afterSales',
+      })
+    }
+  })
+}
+
+function gotoGoodsDetail(item: any) {
+  uni.navigateTo({
+    url: `/pages/product/goods?id=${item.skuId}&goodsId=${item.goodsId}`,
+  })
+}
 </script>
 
 <style lang="scss" scoped>

pages/order/afterSales/afterSalesSelect.vue

@@ -57,59 +57,51 @@
   </view>
 </template>
 
-<script>
-import { getAfterSaleInfo } from "@/api/after-sale";
-import storage from "@/utils/storage";
-export default {
-  data() {
-    return {
-      sn: "",
-      sku: {}, //sku
-      applyInfo:""
-    };
-  },
-  onLoad(options) {
-    this.sn = options.sn;
-    this.sku = storage.getAfterSaleData();
-    // 查看当前商品是否支持退款退货
-    this.init()
-  },
-  methods: {
-    getGoodsName(item) {
-      return item.goodsName || item.name || "";
-    },
-    getGoodsImage(item) {
-      const image = item.image || item.goodsImage || item.thumbnail;
-      return this.parseGoodsImageUrl(image);
-    },
-    // 初始化数据
-    init() {
-      getAfterSaleInfo(this.sn).then((response) => {
-        if (response.data.success) {
-          this.applyInfo = response.data.result;
-        }
-      });
-    },
+<script setup lang="ts">
+import { ref } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import { unitPrice, parseGoodsImageUrl } from '@/utils/filters.js'
+import { getAfterSaleInfo } from '@/api/after-sale'
+import storage from '@/utils/storage'
 
-    /**
-     * 选择退货流程
-     */
-    onSelect(value) {
-      uni.redirectTo({
-        url: `./afterSalesDetail?sn=${this.sn}&value=${value}`,
-      });
-    },
+const sn = ref('')
+const sku = ref<any>({})
+const applyInfo = ref<any>({})
 
-    /**
-     * 跳转到商品信息
-     */
-    navigateToGoodsDetail(id) {
-      uni.navigateTo({
-        url: `/pages/product/goods?id=${id}&goodsId=${goodsId}`,
-      });
-    },
-  },
-};
+onLoad((options) => {
+  sn.value = options?.sn || ''
+  sku.value = storage.getAfterSaleData()
+  init()
+})
+
+function getGoodsName(item: any) {
+  return item.goodsName || item.name || ''
+}
+
+function getGoodsImage(item: any) {
+  const image = item.image || item.goodsImage || item.thumbnail
+  return parseGoodsImageUrl(image)
+}
+
+function init() {
+  getAfterSaleInfo(sn.value).then((response) => {
+    if (response.data.success) {
+      applyInfo.value = response.data.result
+    }
+  })
+}
+
+function onSelect(value: number) {
+  uni.redirectTo({
+    url: `./afterSalesDetail?sn=${sn.value}&value=${value}`,
+  })
+}
+
+function navigateToGoodsDetail(skuId: string) {
+  uni.navigateTo({
+    url: `/pages/product/goods?id=${skuId}&goodsId=${sku.value.goodsId}`,
+  })
+}
 </script>
 
 <style lang="scss">

pages/order/afterSales/applyDetail.vue

@@ -25,7 +25,7 @@
       </view>
       <view class="goods-info">
         <view class="info-box">
-          <view class="goods-item-view" @click="navgiateToGoodsDetail(serviceDetail)">
+          <view class="goods-item-view" @click="navigateToGoodsDetail(serviceDetail)">
             <view class="goods-img">
               <u-image
                 border-radius="6"
@@ -184,198 +184,184 @@
   </view>
 </template>
 
-<script>
+<script setup lang="ts">
+import { ref } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import { useStore } from '@/store'
+import {
+  unitPrice,
+  parseGoodsImageUrl,
+  serviceStatusList,
+  secrecyMobile,
+  unixToDate,
+} from '@/utils/filters.js'
 import {
   getServiceDetail,
   getStoreAfterSaleAddress,
   getAfterSaleLog,
   getAfterSaleReason,
-} from "@/api/after-sale.js";
-export default {
-  data() {
-    return {
-      reason: "", //申请原因
-      serviceTypeList: {
-        // 售后类型
-        CANCEL: "取消",
-        RETURN_GOODS: "退货",
-        EXCHANGE_GOODS: "换货",
-        RETURN_MONEY: "退款",
-      },
-      serviceDetail: {}, // 售后详情
-      logs: [], //日志
-      goodsList: [], //商品列表
-      storeAfterSaleAddress: {}, //售后地址
-      refundShow: false, //退款开关
-      accountShow: false, //账户显示
-      bankShow: false, //银行显示
-      sn: "", //订单sn
-    };
-  },
-  onLoad(options) {
-    uni.setNavigationBarTitle({
-      title: "服务单详情",
-    });
-    this.sn = options.sn;
-    this.loadDetail();
-    this.getAddress();
-    this.getLog(options.sn);
-  },
-  methods: {
-    statusFilter(val) {
-      switch (val) {
-        case "APPLY":
-          return "售后服务申请成功，等待商家审核";
-        case "PASS":
-          return "售后服务申请审核通过";
-        case "REFUSE":
-          return "售后服务申请已被商家拒绝，如有疑问请及时联系商家";
-        case "FULL_COURIER":
-          return "申请售后的商品已经寄出，等待商家收货";
-        case "STOCK_IN":
-          return "商家已将售后商品入库";
-        case "WAIT_FOR_MANUAL":
-          return "等待平台进行人工退款";
-        case "REFUNDING":
-          return "商家退款中，请您耐心等待";
-        case "COMPLETED":
-          return "售后服务已完成，感谢您的支持";
-        case "ERROR_EXCEPTION":
-          return "系统生成新订单异常，等待商家手动创建新订单";
-        case "CLOSED":
-          return "售后服务已关闭";
-        case "WAIT_REFUND":
-          return "等待平台进行退款";
-        default:
-          return "";
-      }
-    },
-    refundWayFilter(val) {
-      switch (val) {
-        case "OFFLINE":
-          return "账户退款";
-        case "ORIGINAL":
-          return "原路退回";
-        default:
-          return "";
-      }
-    },
-    accountTypeFilter(val) {
-      switch (val) {
-        case "WEIXINPAY":
-          return "微信";
-        case "ALIPAY":
-          return "支付宝";
-        case "BANK_TRANSFER":
-          return "银行卡";
-        default:
-          return "";
-      }
-    },
-    /**
-     * 点击图片放大或保存
-     */
-    preview(urls, index) {
-      uni.previewImage({
-        current: index,
-        urls: urls,
-        longPressActions: {
-          itemList: ["保存图片"],
-          success: function (data) {},
-          fail: function (err) {},
-        },
-      });
-    },
+} from '@/api/after-sale.js'
 
-    /**
-     * 获取地址信息
-     */
-    getAddress() {
-      getStoreAfterSaleAddress(this.sn).then((res) => {
-        if (res.data.success) {
-          this.storeAfterSaleAddress = res.data.result;
-        }
-      });
+const store = useStore()
+
+const reason = ref('')
+const serviceTypeList: Record<string, string> = {
+  CANCEL: '取消',
+  RETURN_GOODS: '退货',
+  EXCHANGE_GOODS: '换货',
+  RETURN_MONEY: '退款',
+}
+const serviceDetail = ref<any>(null)
+const logs = ref<any[]>([])
+const storeAfterSaleAddress = ref<any>({})
+const refundShow = ref(false)
+const accountShow = ref(false)
+const bankShow = ref(false)
+const sn = ref('')
+
+onLoad((options) => {
+  uni.setNavigationBarTitle({ title: '服务单详情' })
+  sn.value = options?.sn || ''
+  loadDetail()
+  fetchAddress()
+  fetchLog(sn.value)
+})
+
+function hideLoadingIfNeeded() {
+  if (store.state.isShowToast) uni.hideLoading()
+}
+
+function statusFilter(val: string) {
+  switch (val) {
+    case 'APPLY':
+      return '售后服务申请成功，等待商家审核'
+    case 'PASS':
+      return '售后服务申请审核通过'
+    case 'REFUSE':
+      return '售后服务申请已被商家拒绝，如有疑问请及时联系商家'
+    case 'FULL_COURIER':
+      return '申请售后的商品已经寄出，等待商家收货'
+    case 'STOCK_IN':
+      return '商家已将售后商品入库'
+    case 'WAIT_FOR_MANUAL':
+      return '等待平台进行人工退款'
+    case 'REFUNDING':
+      return '商家退款中，请您耐心等待'
+    case 'COMPLETED':
+      return '售后服务已完成，感谢您的支持'
+    case 'ERROR_EXCEPTION':
+      return '系统生成新订单异常，等待商家手动创建新订单'
+    case 'CLOSED':
+      return '售后服务已关闭'
+    case 'WAIT_REFUND':
+      return '等待平台进行退款'
+    default:
+      return ''
+  }
+}
+
+function refundWayFilter(val: string) {
+  switch (val) {
+    case 'OFFLINE':
+      return '账户退款'
+    case 'ORIGINAL':
+      return '原路退回'
+    default:
+      return ''
+  }
+}
+
+function accountTypeFilter(val: string) {
+  switch (val) {
+    case 'WEIXINPAY':
+      return '微信'
+    case 'ALIPAY':
+      return '支付宝'
+    case 'BANK_TRANSFER':
+      return '银行卡'
+    default:
+      return ''
+  }
+}
+
+function preview(urls: string[], index: number) {
+  uni.previewImage({
+    current: index,
+    urls,
+    longPressActions: {
+      itemList: ['保存图片'],
+      success: () => {},
+      fail: () => {},
     },
+  })
+}
 
-    /**
-     * 获取日志
-     */
-    getLog(sn) {
-      getAfterSaleLog(sn).then((res) => {
-        this.logs = res.data.result;
-      });
-    },
+function fetchAddress() {
+  getStoreAfterSaleAddress(sn.value).then((res) => {
+    if (res.data.success) {
+      storeAfterSaleAddress.value = res.data.result
+    }
+  })
+}
 
-    /**
-     * 获取申请原因
-     */
-    getReasonList(serviceType) {
-      getAfterSaleReason(serviceType).then((res) => {
-        if (res.data.success) {
-          // 1357583466371219456
-          this.reason = this.serviceDetail.reason;
-        }
-      });
-    },
+function fetchLog(serviceSn: string) {
+  getAfterSaleLog(serviceSn).then((res) => {
+    logs.value = res.data.result
+  })
+}
 
-    /**
-     * 初始化详情
-     */
-    loadDetail() {
-      uni.showLoading({
-        title: "加载中",
-      });
-      getServiceDetail(this.sn).then((res) => {
-         if (this.$store.state.isShowToast){ uni.hideLoading() };
-        this.serviceDetail = res.data.result;
-        if (
-          this.serviceDetail.serviceType == "RETURN_GOODS" ||
-          this.serviceDetail.serviceType === "RETURN_MONEY"
-        ) {
-          this.refundShow = true;
-        }
+function fetchReasonList(serviceType: string) {
+  getAfterSaleReason(serviceType).then((res) => {
+    if (res.data.success) {
+      reason.value = serviceDetail.value.reason
+    }
+  })
+}
 
-        this.accountShow =
-          (this.serviceDetail.serviceType === "RETURN_GOODS" ||
-            this.serviceDetail.serviceType === "ORDER_CANCEL") &&
-          this.serviceDetail.refundWay === "OFFLINE";
+function loadDetail() {
+  uni.showLoading({ title: '加载中' })
+  getServiceDetail(sn.value).then((res) => {
+    hideLoadingIfNeeded()
+    serviceDetail.value = res.data.result
+    if (
+      serviceDetail.value.serviceType == 'RETURN_GOODS' ||
+      serviceDetail.value.serviceType === 'RETURN_MONEY'
+    ) {
+      refundShow.value = true
+    }
 
-        this.bankShow =
-          this.serviceDetail.accountType === "BANK_TRANSFER" &&
-          this.serviceDetail.refundWay === "OFFLINE" &&
-          ((this.serviceDetail.serviceType === "RETURN_GOODS") |
-            (this.serviceDetail.serviceType === "ORDER_CANCEL") ||
-            this.serviceDetail.serviceType === "RETURN_MONEY");
+    accountShow.value =
+      (serviceDetail.value.serviceType === 'RETURN_GOODS' ||
+        serviceDetail.value.serviceType === 'ORDER_CANCEL') &&
+      serviceDetail.value.refundWay === 'OFFLINE'
 
-        this.getReasonList(this.serviceDetail.serviceType);
-      });
-    },
+    bankShow.value =
+      serviceDetail.value.accountType === 'BANK_TRANSFER' &&
+      serviceDetail.value.refundWay === 'OFFLINE' &&
+      ((serviceDetail.value.serviceType === 'RETURN_GOODS') |
+        (serviceDetail.value.serviceType === 'ORDER_CANCEL') ||
+        serviceDetail.value.serviceType === 'RETURN_MONEY')
 
-    /**
-     * 访问商品详情
-     */
-    navgiateToGoodsDetail(item) {
-      uni.navigateTo({
-        url: `/pages/product/goods?id=${item.id}&goodsId=${item.goodsId}`,
-      });
-    },
+    fetchReasonList(serviceDetail.value.serviceType)
+  })
+}
 
-    /**
-     * 进度
-     */
-    onProgress() {
-      uni.navigateTo({
-        url: `./applyProgress?sn=${
-          this.serviceDetail.sn
-        }&createTime=${encodeURIComponent(this.serviceDetail.createTime)}
-         &logs=${encodeURIComponent(JSON.stringify(this.logs))}&serviceStatus=${
-          this.serviceDetail.serviceStatus
-        }`,
-      });
-    },
-  },
-};
+function navigateToGoodsDetail(item: any) {
+  uni.navigateTo({
+    url: `/pages/product/goods?id=${item.id}&goodsId=${item.goodsId}`,
+  })
+}
+
+function onProgress() {
+  uni.navigateTo({
+    url: `./applyProgress?sn=${
+      serviceDetail.value.sn
+    }&createTime=${encodeURIComponent(serviceDetail.value.createTime)}
+         &logs=${encodeURIComponent(JSON.stringify(logs.value))}&serviceStatus=${
+      serviceDetail.value.serviceStatus
+    }`,
+  })
+}
 </script>
 
 <style lang="scss" scoped>

pages/order/afterSales/applyProgress.vue

@@ -35,54 +35,50 @@
   </view>
 </template>
 
-<script>
-export default {
-  data() {
-    return {
-      sn: "", //sn
-      createTime: "", //创建时间
-      logList: [], //日志集合
-      serviceStatus: "", //订单状态
-    };
-  },
-  onLoad(options) {
-    this.sn = options.sn;
-    this.createTime = decodeURIComponent(options.createTime);
-    this.serviceStatus = this.statusFilter(options.serviceStatus);
-    this.logList = JSON.parse(decodeURIComponent(options.logs));
+<script setup lang="ts">
+import { ref } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
 
-  },
-  methods: {
-    statusFilter(val) {
-      switch (val) {
-        case "APPLY":
-          return "售后服务申请成功，等待商家审核";
-        case "PASS":
-          return "售后服务申请审核通过";
-        case "REFUSE":
-          return "售后服务申请已被商家拒绝，如有疑问请及时联系商家";
-        case "FULL_COURIER":
-          return "申请售后的商品已经寄出，等待商家收货";
-        case "STOCK_IN":
-          return "商家已将售后商品入库";
-        case "WAIT_FOR_MANUAL":
-          return "等待平台进行人工退款";
-        case "REFUNDING":
-          return "商家退款中，请您耐心等待";
-        case "COMPLETED":
-          return "售后服务已完成，感谢您的支持";
-        case "ERROR_EXCEPTION":
-          return "系统生成新订单异常，等待商家手动创建新订单";
-        case "CLOSED":
-          return "售后服务已关闭";
-        case "WAIT_REFUND":
-          return "等待平台进行退款";
-        default:
-          return "";
-      }
-    },
-  },
-};
+const sn = ref('')
+const createTime = ref('')
+const logList = ref<any[]>([])
+const serviceStatus = ref('')
+
+function statusFilter(val: string) {
+  switch (val) {
+    case 'APPLY':
+      return '售后服务申请成功，等待商家审核'
+    case 'PASS':
+      return '售后服务申请审核通过'
+    case 'REFUSE':
+      return '售后服务申请已被商家拒绝，如有疑问请及时联系商家'
+    case 'FULL_COURIER':
+      return '申请售后的商品已经寄出，等待商家收货'
+    case 'STOCK_IN':
+      return '商家已将售后商品入库'
+    case 'WAIT_FOR_MANUAL':
+      return '等待平台进行人工退款'
+    case 'REFUNDING':
+      return '商家退款中，请您耐心等待'
+    case 'COMPLETED':
+      return '售后服务已完成，感谢您的支持'
+    case 'ERROR_EXCEPTION':
+      return '系统生成新订单异常，等待商家手动创建新订单'
+    case 'CLOSED':
+      return '售后服务已关闭'
+    case 'WAIT_REFUND':
+      return '等待平台进行退款'
+    default:
+      return ''
+  }
+}
+
+onLoad((options) => {
+  sn.value = options.sn || ''
+  createTime.value = decodeURIComponent(options.createTime || '')
+  serviceStatus.value = statusFilter(options.serviceStatus || '')
+  logList.value = JSON.parse(decodeURIComponent(options.logs || '[]'))
+})
 </script>
 
 <style lang="scss" scoped>

pages/order/afterSales/applySuccess.vue

@@ -21,31 +21,18 @@
   </view>
 </template>
 
-<script>
-export default {
-  data() {
-    return {};
-  },
-  methods: {
-    /**
-     * 跳转到售后服务
-     */
-    navigateToAfterSales() {
-      uni.redirectTo({
-        url: "/pages/order/afterSales/afterSales",
-      });
-    },
+<script setup lang="ts">
+function navigateToAfterSales() {
+  uni.redirectTo({
+    url: '/pages/order/afterSales/afterSales',
+  })
+}
 
-    /**
-     * 跳转到首页
-     */
-    navigateToHome() {
-      uni.switchTab({
-        url: "/pages/tabbar/home/index",
-      });
-    },
-  },
-};
+function navigateToHome() {
+  uni.switchTab({
+    url: '/pages/tabbar/home/index',
+  })
+}
 </script>
 
 <style lang="scss" scoped>

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>

pages/order/deliverDetail.vue

@@ -45,34 +45,24 @@
 	</div>
 </template>
 
-<script>
-import { getPackage } from "@/api/trade.js";
-export default {
-    data() {
-        return {
-            order: {},
-            logisticsList: [],
-        }
-    },
-    components: {
-    },
-    computed: {
-    },
-	onLoad(option) {
-	  let sn = option.order_sn;
-	  this.tracesList(sn);
-	},
-    mounted() {
-    },
-    methods: {
-        tracesList(sn) {
-            getPackage(sn).then((res) => {
-                if(res.data.success){
-                    this.logisticsList = res.data.result;
-                }
-            });
-        },
-    },
+<script setup lang="ts">
+import { ref } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import { getPackage } from '@/api/trade.js'
+
+const logisticsList = ref<any[]>([])
+
+onLoad((option) => {
+  const sn = option.order_sn
+  if (sn) fetchLogistics(sn)
+})
+
+function fetchLogistics(sn: string) {
+  getPackage(sn).then((res) => {
+    if (res.data.success) {
+      logisticsList.value = res.data.result
+    }
+  })
 }
 </script>
 <style >

pages/order/evaluate/evaluateDetail.vue

@@ -31,7 +31,7 @@
           <view class="img">
             <!-- 循环出商家回复评价的图片 -->
             <u-image width="140rpx" height="140rpx" v-if="comment.replyImage" v-for="(replyImg, replyIndex) in splitImg(comment.replyImage)" :src="replyImg" :key="replyIndex"
-              @click="preview(splitImg( comment.replyImage), index)">
+              @click="preview(splitImg(comment.replyImage), replyIndex)">
             </u-image>
           </view>
         </view>
@@ -40,56 +40,46 @@
   </view>
 </template>
 
-<script>
+<script setup lang="ts">
+import { ref } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
 import configs from '@/config/config'
-export default {
-  data() {
-    return {
-      configs,
-      userImage:configs.defaultUserPhoto,
 
-      comment: {}, //评论信息
-      gradeList: {
-        //评价grade
-        GOOD: "好评",
-        MODERATE: "中评",
-        WORSE: "差评",
-        haveImage: "有图",
-      },
-    };
-  },
-  onLoad(options) {
-    this.comment = JSON.parse(decodeURIComponent(options.comment));
-  },
-  methods: {
-    /**
-     * 切割图像
-     */
-    splitImg(val) {
-      if (val && val.split(",")) {
-        return val.split(",");
-      } else if (val) {
-        return val;
-      } else {
-        return false;
-      }
+const userImage = configs.defaultUserPhoto
+
+const comment = ref<Record<string, any>>({})
+const gradeList: Record<string, string> = {
+  GOOD: '好评',
+  MODERATE: '中评',
+  WORSE: '差评',
+  haveImage: '有图',
+}
+
+onLoad((options) => {
+  comment.value = JSON.parse(decodeURIComponent(options.comment))
+})
+
+function splitImg(val: string) {
+  if (val && val.split(',')) {
+    return val.split(',')
+  } else if (val) {
+    return val
+  }
+  return false
+}
+
+function preview(urls: string[] | false, index: number) {
+  if (!urls) return
+  uni.previewImage({
+    current: index,
+    urls: Array.isArray(urls) ? urls : [urls],
+    longPressActions: {
+      itemList: ['保存图片'],
+      success: () => {},
+      fail: () => {},
     },
-    /**
-     * 点击图片放大或保存
-     */
-    preview(urls, index) {
-      uni.previewImage({
-        current: index,
-        urls: urls,
-        longPressActions: {
-          itemList: ["保存图片"],
-          success: function (data) {},
-          fail: function (err) {},
-        },
-      });
-    },
-  },
-};
+  })
+}
 </script>
 
 <style lang="scss" scoped>

pages/order/evaluate/myEvaluate.vue

@@ -8,8 +8,9 @@
           :inactiveStyle="{ color: '#333' }"
           v-model:current="current"
           class="utabs"
-          :lineColor="$lightColor"
-          :activeStyle="{ color: $lightColor }"
+          :lineColor="lightColor"
+          :activeStyle="{ color: lightColor }"
+          :bg-color="'#ffffff'"
         ></u-tabs>
       </view>
       <swiper class="swiper-box" :current="current" @change="changeSwiper" duration="500">
@@ -38,7 +39,7 @@
                 <view class="btn-view u-row-between" v-if="current == 2">
                   <view class="description">
                     <view class="text title">
-                      <u-read-more ref="uReadMore" :color="$lightColor" text-indent="0">
+                      <u-read-more ref="uReadMore" :color="lightColor" text-indent="0">
                         <rich-text :nodes="'评论内容：' + order.content || ''"></rich-text>
                       </u-read-more>
                     </view>
@@ -78,209 +79,144 @@
   </view>
 </template>
 
-<script>
-import { getOrderList } from "@/api/order.js";
-import { getComments } from "@/api/members.js";
+<script setup lang="ts">
+import { ref, reactive, computed, watch } from 'vue'
+import { onShow } from '@dcloudio/uni-app'
+import { useStore } from '@/store'
+import { getOrderList } from '@/api/order.js'
+import { getComments } from '@/api/members.js'
 
-export default {
-  data() {
-    return {
-      list: [
-        //顶部tab
+const store = useStore()
+const lightColor = computed(() => store.getters.lightColor)
 
+const list = [
+  { name: '全部订单' },
+  { name: '待评价' },
+  { name: '已评价' },
+]
+
+const gradeList: Record<string, string> = {
+  GOOD: '好评',
+  MODERATE: '中评',
+  WORSE: '差评',
+  haveImage: '有图',
+}
+
+const groupCommentStatusWay: Record<string, string> = {
+  NEW: '新订单，不能进行评论',
+  UNFINISHED: '未完成评论',
+  WAIT_CHASE: '待追评的评论信息',
+  FINISHED: '已经完成评论',
+}
+
+const current = ref(0)
+const orderList = ref<any[]>([])
+const params = reactive<Record<string, any>>({
+  pageNumber: 1,
+  pageSize: 10,
+  loadStatus: 'more',
+})
+
+onShow(() => {
+  orderList.value = []
+  params.pageNumber = 1
+  current.value = 0
+  loadData()
+})
+
+watch(current, (val) => {
+  params.pageNumber = 1
+  params.loadStatus = 'more'
+  orderList.value = []
+
+  if (val == 0) {
+    delete params.commentStatus
+    loadData()
+  } else if (val == 1) {
+    params.commentStatus = 'UNFINISHED'
+    orderList.value = []
+    loadData()
+  } else {
+    params.commentStatus = 'FINISHED'
+    orderList.value = []
+    loadComments()
+  }
+})
+
+function preview(urls: string[], index: number) {
+  uni.previewImage({
+    current: index,
+    urls,
+    longPressActions: {
+      itemList: ['保存图片'],
+      success: () => {},
+      fail: () => {},
+    },
+  })
+}
+
+function changeSwiper(e: any) {
+  current.value = e.target.current
+}
+
+function loadData() {
+  uni.showLoading({ title: '加载中' })
+  getOrderList(params).then((res) => {
+    if (store.state.isShowToast) uni.hideLoading()
+    const records = res.data.result.records
+    if (records.length < 10) {
+      params.loadStatus = 'noMore'
+    }
+    if (records.length > 0) {
+      orderList.value = orderList.value.concat(records)
+      params.pageNumber += 1
+    }
+  })
+}
+
+function talkCommont(sku: any) {
+  uni.navigateTo({
+    url: `./releaseEvaluate?sn=${sku.sn}&sku=${encodeURIComponent(JSON.stringify(sku))}`,
+  })
+}
+
+function loadComments() {
+  uni.showLoading({ title: '加载中' })
+  getComments(params).then((res) => {
+    if (store.state.isShowToast) uni.hideLoading()
+    const records = res.data.result.records
+    if (records.length < 10) {
+      params.loadStatus = 'noMore'
+    }
+    records.forEach((item: any) => {
+      item.orderItems = [
         {
-          name: "全部订单",
+          image: item.goodsImage,
+          name: item.goodsName,
+          goodsId: item.goodsId,
+          skuId: item.skuId,
         },
-        {
-          name: "待评价",
-        },
-        {
-          name: "已评价",
-        },
-      ],
-      gradeList: {
-        //评论表
-        GOOD: "好评",
-        MODERATE: "中评",
-        WORSE: "差评",
-        haveImage: "有图",
-      },
-      groupCommentStatusWay: {
-        NEW: "新订单，不能进行评论",
-        UNFINISHED: "未完成评论",
-        WAIT_CHASE: "待追评的评论信息",
-        FINISHED: "已经完成评论",
-      },
-      current: 0, //当前tabIndex
-      orderList: [], //商品集合
-      params: {
-        pageNumber: 1,
-        pageSize: 10,
-        loadStatus: "more",
-      },
-    };
-  },
+      ]
+    })
+    orderList.value = orderList.value.concat(records)
+    params.pageNumber += 1
+  })
+}
 
-  onShow() {
-    this.orderList = [];
-    this.params.pageNumber = 1;
-    this.current = 0
-    this.loadData()
-  },
-  watch: {
-    /**
-     * 切换current
-     * 更改页面并重新加载数据
-     */
-    current(val) {
-      this.params.pageNumber = 1;
-      this.params.loadStatus = "more";
-      this.orderList = [];
-      //重新读取数据
+function renderData(index: number) {
+  if (params.loadStatus == 'noMore') return
+  if (index == 0) {
+    loadData()
+  } else {
+    loadComments()
+  }
+}
 
-      if (val == 0) {
-        delete  this.params.commentStatus 
-        this.loadData();
-      } else if (val == 1) {
-        this.params.commentStatus = "UNFINISHED";
-        this.orderList = [];
-        this.loadData();
-      } else {
-        this.params.commentStatus = "FINISHED";
-        this.orderList = [];
-        return this.loadComments();
-      }
-    },
-  },
-
-  methods: {
-    /**
-     * 判断当前店铺是否有可评价的商品
-     */
-    commentStatus(val) {
-      if (this.current == 2) {
-        return true;
-      } else {
-        let show;
-        val.orderItems &&
-          val.orderItems.forEach((item) => {
-            if (item.commentStatus == "UNFINISHED") {
-              show = true;
-            } else {
-              show = false;
-            }
-          });
-
-        return show;
-      }
-    },
-
-    /**
-     * 点击图片放大或保存
-     */
-    preview(urls, index) {
-      uni.previewImage({
-        current: index,
-        urls: urls,
-        longPressActions: {
-          itemList: ["保存图片"],
-          success: function (data) {},
-          fail: function (err) {},
-        },
-      });
-    },
-
-    /**
-     * 点击swiper
-     */
-    changeSwiper(e) {
-      this.current = e.target.current;
-    },
-
-    /**
-     * 获取订单数据
-     */
-    loadData() {
-      uni.showLoading({
-        title: "加载中",
-      });
-      getOrderList(this.params).then((res) => {
-         if (this.$store.state.isShowToast){ uni.hideLoading() };
-        const orderList = res.data.result.records;
-        if (orderList.length < 10) {
-          this.params.loadStatus = "noMore";
-        }
-        if (orderList.length > 0) {
-          this.orderList = this.orderList.concat(orderList);
-          this.params.pageNumber += 1;
-        }
-      });
-    },
-
-    /**
-     * 发表评价
-     */
-    talkCommont(sku) {
-      console.log(sku);
-      uni.navigateTo({
-        url: `./releaseEvaluate?sn=${sku.sn}&sku=${encodeURIComponent(
-          JSON.stringify(sku)
-        )}`,
-      });
-    },
-
-    /**
-     * 加载已评价数据
-     */
-    loadComments() {
-      uni.showLoading({
-        title: "加载中",
-      });
-      getComments(this.params).then((res) => {
-         if (this.$store.state.isShowToast){ uni.hideLoading() };
-        let orderList = res.data.result.records;
-        if (orderList.length < 10) {
-          this.params.loadStatus = "noMore";
-        }
-        orderList.forEach((item) => {
-          item.orderItems = [
-            {
-              image: item.goodsImage,
-              name: item.goodsName,
-              goodsId: item.goodsId,
-              skuId: item.skuId,
-            },
-          ];
-        });
-        this.orderList = this.orderList.concat(orderList);
-        this.params.pageNumber += 1;
-      });
-    },
-
-    /**
-     * 滑到底部加载数据
-     */
-    renderData(index) {
-      if (this.params.loadStatus == "noMore") return;
-      if (index == 0) {
-        this.loadData();
-      } else {
-        this.loadComments();
-      }
-    },
-
-    /**
-     * 评价详情
-     */
-    onDetail(comment) {
-      uni.navigateTo({
-        url:
-          "./evaluateDetail?comment=" +
-          encodeURIComponent(JSON.stringify(comment)),
-      });
-    },
-  },
-};
+function onDetail(comment: any) {
+  uni.navigateTo({
+    url: './evaluateDetail?comment=' + encodeURIComponent(JSON.stringify(comment)),
+  })
+}
 </script>
 <style lang="scss" scoped>
 page {
@@ -310,6 +246,7 @@ page {
 .u-tabs-box {
   position: relative;
   z-index: 10;
+  background: #ffffff;
 }
 .box-content {
   margin: 20rpx 0;

pages/order/evaluate/releaseEvaluate.vue

@@ -86,80 +86,69 @@
   </view>
 </template>
 
-<script>
-import storage from "@/utils/storage.js";
-import { commentsMemberOrder } from "@/api/members.js";
-import { handleUploadAfterRead } from "@/utils/uploadHelper.js";
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import { useStore } from '@/store'
+import { commentsMemberOrder } from '@/api/members.js'
+import { handleUploadAfterRead } from '@/utils/uploadHelper.js'
 
-export default {
-  data() {
-    return {
-      storage,
-      type: "textarea", //输入框状态为 textarea
-      border: false, //没有border
-      maxlength: 500, //评价最大字数为500字
-      placeholder:
-        "宝贝满足您的期待吗？说说它的优点和美中不足的地方吧。您的评价会帮助更多的人",
-      sku: {}, //订单信息
-      form: {
-        content: "", //评价详情
-        goodsId: "", //商品id
-        grade: "GOOD", //默认为好评
-        orderItemSn: "", //商品的sn
-        skuId: "", //商品skuId
-        descriptionScore: 5, //默认描述得分为5分
-        serviceScore: 5, //默认服务得分为5分
-        deliveryScore: 5, //默认物流得分为5分
-      },
-      uploadFileList: [],
-    };
-  },
-  onLoad(options) {
-    // 获取上一级传过来的数据进行解析
-    this.form.orderItemSn = options.sn;
-    this.sku = JSON.parse(decodeURIComponent(options.sku));
-    this.form.goodsId = this.sku.goodsId;
-    this.form.skuId = this.sku.skuId;
-  },
-  methods: {
-    /**
-     * 点击评价
-     */
-    onGrade(grade) {
-      this.form.grade = grade;
-    },
+const store = useStore()
 
-    /**
-     * 提交评价
-     */
-    onSubmit() {
-      uni.showLoading({
-        title: "加载中",
-      });
-      commentsMemberOrder(this.form).then((res) => {
-         if (this.$store.state.isShowToast){ uni.hideLoading() };
-        if (res.data.success) {
-          uni.showToast({
-            title: "发布评价成功",
-            duration: 2000,
-            icon: "none",
-            success: () => {
-              setTimeout(() => {
-                uni.navigateBack();
-              }, 500);
-            },
-          });
-        }
-      });
-    },
+const type = 'textarea'
+const border = false
+const maxlength = 500
+const placeholder =
+  '宝贝满足您的期待吗？说说它的优点和美中不足的地方吧。您的评价会帮助更多的人'
 
-    onUploadAfterRead(event) {
-      handleUploadAfterRead(event, this.uploadFileList, (urls) => {
-        this.form.images = urls;
-      });
-    },
-  },
-};
+const sku = ref<Record<string, any>>({})
+const form = reactive<Record<string, any>>({
+  content: '',
+  goodsId: '',
+  grade: 'GOOD',
+  orderItemSn: '',
+  skuId: '',
+  descriptionScore: 5,
+  serviceScore: 5,
+  deliveryScore: 5,
+})
+const uploadFileList = ref<any[]>([])
+
+onLoad((options) => {
+  form.orderItemSn = options.sn
+  sku.value = JSON.parse(decodeURIComponent(options.sku))
+  form.goodsId = sku.value.goodsId
+  form.skuId = sku.value.skuId
+})
+
+function onGrade(grade: string) {
+  form.grade = grade
+}
+
+function onSubmit() {
+  uni.showLoading({ title: '加载中' })
+  commentsMemberOrder(form).then((res) => {
+    if (store.state.isShowToast) uni.hideLoading()
+    if (res.data.success) {
+      uni.showToast({
+        title: '发布评价成功',
+        duration: 2000,
+        icon: 'none',
+        success: () => {
+          setTimeout(() => {
+            uni.navigateBack()
+          }, 500)
+        },
+      })
+    }
+  })
+}
+
+function onUploadAfterRead(event: any) {
+  handleUploadAfterRead(event, uploadFileList.value, (urls) => {
+    form.images = urls
+  })
+}
 </script>
 
 <style lang="scss" scoped>

pages/order/fillorder.vue

@@ -384,471 +384,426 @@
     </div>
   </div>
 </template>
-<script>
-import * as API_Address from "@/api/address";
-import * as API_Order from "@/api/order";
-import * as API_Trade from "@/api/trade";
-import configs from "@/config/config";
-import LiLiWXPay from "@/js_sdk/lili-pay/wx-pay.js";
-import invoices from "@/pages/order/invoice/setInvoice";
-import { mapState } from "vuex";
-export default {
-  onLoad: function (val) {
-    this.routerVal = val;
-  },
-  components: {
-    invoices,
-  },
+<script setup lang="ts">
+import { ref, computed, watch, getCurrentInstance } from 'vue'
+import { onLoad, onShow, onBackPress } from '@dcloudio/uni-app'
+import { useStore } from '@/store'
+import * as API_Address from '@/api/address'
+import * as API_Order from '@/api/order'
+import * as API_Trade from '@/api/trade'
+import configs from '@/config/config'
+import LiLiWXPay from '@/js_sdk/lili-pay/wx-pay.js'
+import invoices from '@/pages/order/invoice/setInvoice'
+import {
+  unitPrice,
+  goodsFormatPrice,
+  secrecyMobile,
+  isLogin,
+} from '@/utils/filters.js'
 
-  data() {
-    return {
-      configs,
-      userImage: configs.defaultUserPhoto,
-      invoiceFlag: false, //开票开关
-      shippingText: "LOGISTICS",
-      shippingFlag: false,
-      shippingMethod: [],
-      shippingWay: [
-        {
-          value: "LOGISTICS",
-          label: "物流",
-        },
-        {
-          value: "SELF_PICK_UP",
-          label: "自提",
-        },
-      ],
-      isAssemble: false, //是否拼团
-      // 判断是否填写过备注
-      remarkFlag: false,
-      selectAddressId: "",
-      routerVal: "",
-      params: {},
-      // 优惠劵
-      couponList: "",
-      // 已选地址
-      address: "",
-      shopAddress: "",
-      // 发票信息
-      receiptList: "",
-      // 店铺信息
-      orderMessage: "",
-      data: "",
-      // 存储备注
-      remarkVal: [],
-      remarkVal1: "",
-      detail: "", //返回的所有数据
-      endWay: "", //最后一个参团人
-      masterWay: "", //团长信息
-      pintuanFlage: true, //是开团还是拼团
-      notSupportFreight: [], //不支持运费
-      notSupportFreightNoticeText: "",
-      storeAddress: "",
+const store = useStore()
+const { proxy } = getCurrentInstance()!
+const lightColor = computed(() => store.getters.lightColor)
+const mainColor = computed(() => store.getters.mainColor)
+const aiderLightColor = computed(() => store.getters.aiderLightColor)
+const remark = computed(() => store.state.remark)
 
-      originOrderData:"", // 原始订单数据
-    };
+interface ShippingOption {
+  value: string
+  label: string
+}
+
+const shippingWay: ShippingOption[] = [
+  { value: 'LOGISTICS', label: '物流' },
+  { value: 'SELF_PICK_UP', label: '自提' },
+]
+
+const userImage = configs.defaultUserPhoto
+const invoiceFlag = ref(false)
+const shippingText = ref('LOGISTICS')
+const shippingFlag = ref(false)
+const shippingMethod = ref<ShippingOption[]>([])
+const isAssemble = ref(false)
+const remarkFlag = ref(false)
+const selectAddressId = ref('')
+const routerVal = ref<Record<string, any>>({})
+const params = ref<Record<string, any>>({})
+const couponList = ref('')
+const address = ref<any>('')
+const shopAddress = ref('')
+const receiptList = ref<any>('')
+const orderMessage = ref<any>('')
+const data = ref('')
+const remarkVal = ref<any[]>([])
+const remarkVal1 = ref('')
+const detail = ref('')
+const endWay = ref<any>('')
+const masterWay = ref<any>('')
+const pintuanFlage = ref(true)
+const notSupportFreight = ref<any[]>([])
+const notSupportFreightNoticeText = ref('')
+const storeAddress = ref<any>('')
+const originOrderData = ref<any>('')
+
+watch(
+  remarkVal,
+  (val) => {
+    store.commit('setRemark', val)
   },
-  watch: {
-    // 监听备注 并在 vuex 中存储
-    remarkVal: {
-      handler(val) {
-        this.$store.commit("setRemark", val);
-      },
-      immediate: true,
-      deep: true,
-    },
-  },
-  computed: {
-    ...mapState(["remark"]),
-  },
-  /**
-   * 监听返回
-   */
-  onBackPress(e) {
-    if (e.from == "backbutton") {
-      const curRoute = getCurrentPages().slice(-1)[0]?.options || {};
-      if (curRoute.addId) {
-        uni.reLaunch({
-          url: "/pages/tabbar/cart/cartList",
-        });
-      } else if (this.routerVal?.way === "CART") {
-        uni.switchTab({
-          url: "/pages/tabbar/cart/cartList",
-        });
-      } else {
-        uni.navigateBack();
-      }
-      return true;
+  { immediate: true, deep: true }
+)
+
+onLoad((val) => {
+  routerVal.value = val || {}
+})
+
+onBackPress((e) => {
+  if (e.from == 'backbutton') {
+    const curRoute = getCurrentPages().slice(-1)[0]?.options || {}
+    if (curRoute.addId) {
+      uni.reLaunch({
+        url: '/pages/tabbar/cart/cartList',
+      })
+    } else if (routerVal.value?.way === 'CART') {
+      uni.switchTab({
+        url: '/pages/tabbar/cart/cartList',
+      })
+    } else {
+      uni.navigateBack()
     }
-  },
+    return true
+  }
+  return false
+})
 
-  async onShow() {
-    // 判断是否存在写过备注信息的商品
-    if (this.remark && this.remark.length > 0) {
-      this.remarkFlag = true;
+onShow(async () => {
+  if (remark.value && remark.value.length > 0) {
+    remarkFlag.value = true
+  }
+  uni.showLoading({
+    mask: true,
+  })
+  try {
+    await getOrderList()
+    await getDistribution()
+    if (routerVal.value.way == 'PINTUAN') {
+      isAssemble.value = true
+      routerVal.value.parentOrder = JSON.parse(
+        decodeURIComponent(routerVal.value.parentOrder)
+      )
+      pintuanWay()
     }
-    uni.showLoading({
-      mask: true,
-    });
-    try {
-      await this.getOrderList();
-      await this.getDistribution();
-      if (this.routerVal.way == "PINTUAN") {
-        this.isAssemble = true;
-        this.routerVal.parentOrder = JSON.parse(
-          decodeURIComponent(this.routerVal.parentOrder)
-        );
-        this.pintuanWay();
-      }
-    } finally {
-      uni.hideLoading();
+  } finally {
+    uni.hideLoading()
+  }
+})
+
+function getShippingLabel() {
+  const item =
+    shippingMethod.value.find((e) => e.value === shippingText.value) ||
+    shippingWay.find((e) => e.value === shippingText.value)
+  return item ? item.label : ''
+}
+
+async function callbackInvoice(val: any) {
+  invoiceFlag.value = false
+  receiptList.value = val
+  if (val) {
+    const submit = {
+      way: routerVal.value.way,
+      ...receiptList.value,
     }
-  },
-  mounted() {},
+    const receipt = await API_Order.getReceipt(submit)
+    if (receipt.data.success) {
+      shippingFlag.value = false
+      getOrderList()
+    }
+  }
+}
 
-  methods: {
-    getShippingLabel() {
-      const item =
-        this.shippingMethod.find((e) => e.value === this.shippingText) ||
-        this.shippingWay.find((e) => e.value === this.shippingText);
-      return item ? item.label : "";
-    },
+function navigateToStore(val: any) {
+  uni.navigateTo({
+    url: '/pages/product/shopPage?id=' + val.storeId,
+  })
+}
 
-    //发票回调 选择发票之后刷新购物车
-    async callbackInvoice(val) {
-      this.invoiceFlag = false;
-      this.receiptList = val;
-      if (val) {
-        let submit = {
-          way: this.routerVal.way,
-          ...this.receiptList,
-        };
-        let receipt = await API_Order.getReceipt(submit);
-        if (receipt.data.success) {
-          this.shippingFlag = false;
-          this.getOrderList();
-        }
+function clickToAddress() {
+  navigateTo(
+    `/pages/mine/address/address?from=cart&way=${
+      routerVal.value.way
+    }&parentOrder=${encodeURIComponent(
+      JSON.stringify(routerVal.value.parentOrder)
+    )}`
+  )
+}
+
+function clickToStoreAddress() {
+  navigateTo(
+    `/pages/mine/address/storeAddress?from=cart&way=${routerVal.value.way}&storeId=${remarkVal.value[0].storeId}`
+  )
+}
+
+function pintuanWay() {
+  const { memberId } = routerVal.value.parentOrder
+  const userInfo = isLogin()
+  if (memberId) {
+    endWay.value = userInfo
+    masterWay.value = routerVal.value.parentOrder
+    pintuanFlage.value = false
+  } else {
+    pintuanFlage.value = true
+    masterWay.value = userInfo
+  }
+}
+
+function invoice() {
+  invoiceFlag.value = true
+}
+
+function GET_Discount() {
+  let storeIds: any[] = []
+  let skus: any[] = []
+  const selectedCoupon: any[] = []
+  if (orderMessage.value.platformCoupon) {
+    selectedCoupon.push(orderMessage.value.platformCoupon.memberCoupon.id)
+  }
+  if (
+    orderMessage.value.storeCoupons &&
+    Object.keys(orderMessage.value.storeCoupons)[0]
+  ) {
+    const storeMemberCouponsId = Object.keys(
+      orderMessage.value.storeCoupons
+    )[0]
+    const storeCouponId =
+      orderMessage.value.storeCoupons[storeMemberCouponsId].memberCoupon.id
+    selectedCoupon.push(storeCouponId)
+  }
+  orderMessage.value.cartList.forEach((item: any) => {
+    item.skuList.forEach((sku: any) => {
+      storeIds.push(sku.storeId)
+      skus.push(sku.goodsSku.id)
+    })
+  })
+  storeIds = Array.from(new Set(storeIds))
+  skus = Array.from(new Set(skus))
+  uni.setStorage({
+    key: 'totalPrice',
+    data: orderMessage.value.priceDetailDTO.goodsPrice,
+  })
+  navigateTo(
+    `/pages/cart/coupon/index?way=${routerVal.value.way}&storeId=${storeIds}&skuId=${skus}&selectedCoupon=${selectedCoupon}`
+  )
+}
+
+function navigateTo(url: string) {
+  uni.navigateTo({
+    url,
+  })
+}
+
+function createTradeFun() {
+  proxy!.$u.throttle(() => {
+    if (shippingText.value === 'SELF_PICK_UP') {
+      if (!storeAddress.value.id) {
+        uni.showToast({
+          title: '请选择提货点',
+          duration: 2000,
+          icon: 'none',
+        })
+        return false
       }
-    },
-
-    // 跳转到店铺
-    navigateToStore(val) {
-      uni.navigateTo({
-        url: "/pages/product/shopPage?id=" + val.storeId,
-      });
-    },
-    // 点击跳转地址
-    clickToAddress() {
-      this.navigateTo(
-        `/pages/mine/address/address?from=cart&way=${
-          this.routerVal.way
-        }&parentOrder=${encodeURIComponent(
-          JSON.stringify(this.routerVal.parentOrder)
-        )}`
-      );
-    },
-    clickToStoreAddress() {
-      this.navigateTo(
-        `/pages/mine/address/storeAddress?from=cart&way=${this.routerVal.way}&storeId=${this.remarkVal[0].storeId}`
-      );
-    },
-
-    // 判断团长以及团员信息
-    pintuanWay() {
-      const { memberId } = this.routerVal.parentOrder;
-
-      const userInfo = this.isLogin();
-      if (memberId) {
-        this.endWay = userInfo;
-        this.masterWay = this.routerVal.parentOrder;
-        this.pintuanFlage = false;
-      } else {
-        this.pintuanFlage = true;
-        this.masterWay = userInfo;
+    } else if (
+      shippingText.value === 'LOGISTICS' &&
+      orderMessage.value.cartTypeEnum !== 'VIRTUAL'
+    ) {
+      if (!address.value.id) {
+        uni.showToast({
+          title: '请选择地址',
+          duration: 2000,
+          icon: 'none',
+        })
+        return false
       }
-    },
-    // 判断发票
-    invoice() {
-      this.invoiceFlag = true;
-    },
+    }
 
-    // 领取优惠券
-    GET_Discount() {
-      // 循环店铺id,商品id获取优惠券
-      let store = [];
-      let skus = [];
-      let selectedCoupon = [];
-      if (this.orderMessage.platformCoupon)
-        selectedCoupon.push(this.orderMessage.platformCoupon.memberCoupon.id);
-      if (
-        this.orderMessage.storeCoupons &&
-        Object.keys(this.orderMessage.storeCoupons)[0]
-      ) {
-        let storeMemberCouponsId = Object.keys(
-          this.orderMessage.storeCoupons
-        )[0];
-        let storeCouponId =
-          this.orderMessage.storeCoupons[storeMemberCouponsId].memberCoupon.id;
-        selectedCoupon.push(storeCouponId);
-      }
-      this.orderMessage.cartList.forEach((item) => {
-        item.skuList.forEach((sku) => {
-          store.push(sku.storeId);
-          skus.push(sku.goodsSku.id);
-        });
-      });
-      store = Array.from(new Set(store));
-      skus = Array.from(new Set(skus));
-      uni.setStorage({
-        key: "totalPrice",
-        data: this.orderMessage.priceDetailDTO.goodsPrice,
-      });
-      this.navigateTo(
-        `/pages/cart/coupon/index?way=${this.routerVal.way}&storeId=${store}&skuId=${skus}&selectedCoupon=${selectedCoupon}`
-      );
-    },
+    let client
+    // #ifdef H5
+    client = 'H5'
+    // #endif
+    // #ifdef MP-WEIXIN
+    client = 'WECHAT_MP'
+    // #endif
+    // #ifdef APP-PLUS
+    client = 'APP'
+    // #endif
 
-    /**
-     * 跳转
-     */
-    navigateTo(url) {
-      uni.navigateTo({
-        url,
-      });
-    },
+    const submit: Record<string, any> = {
+      client,
+      way: routerVal.value.way,
+      remark: remarkVal.value,
+      parentOrderSn: '',
+    }
+    if (routerVal.value.parentOrder && routerVal.value.parentOrder.orderSn) {
+      submit.parentOrderSn = routerVal.value.parentOrder.orderSn
+    } else {
+      delete submit.parentOrderSn
+    }
 
-    /**
-     * 提交订单准备支付
-     */
-
-    // 创建订单
-    createTradeFun() {
-      // 防抖
-      this.$u.throttle(() => {
-        if (this.shippingText === "SELF_PICK_UP") {
-          if (!this.storeAddress.id) {
-            uni.showToast({
-              title: "请选择提货点",
-              duration: 2000,
-              icon: "none",
-            });
-            return false;
-          }
-        } else if (this.shippingText === "LOGISTICS" && this.orderMessage.cartTypeEnum !== 'VIRTUAL') {
-          if (!this.address.id) {
-            uni.showToast({
-              title: "请选择地址",
-              duration: 2000,
-              icon: "none",
-            });
-            return false;
-          }
-        }
-
-        //  创建订单
-        let client;
-        // #ifdef H5
-        client = "H5";
-        // #endif
-        // #ifdef MP-WEIXIN
-        client = "WECHAT_MP";
-        // #endif
-        // #ifdef APP-PLUS
-        client = "APP";
-        // #endif
-
-        let submit = {
-          client,
-          way: this.routerVal.way,
-          remark: this.remarkVal,
-          parentOrderSn: "",
-        };
-        // 如果是拼团并且当前用户不是团长
-        this.routerVal.parentOrder && this.routerVal.parentOrder.orderSn
-          ? (submit.parentOrderSn = this.routerVal.parentOrder.orderSn)
-          : delete submit.parentOrderSn;
-
-        /**
-         * 创建订单
-         */
-        API_Trade.createTrade(submit).then((res) => {
-          if (res.data.success) {
-            uni.showToast({
-              title: "创建订单成功!",
-              duration: 2000,
-              icon: "none",
-            });
-            // 如果当前价格为0跳转到订单列表
-            if (this.orderMessage.priceDetailDTO.billPrice == 0) {
-              uni.navigateTo({
-                url: "/pages/order/myOrder?status=0",
-              });
-            } else {
-              // #ifdef MP-WEIXIN
-              // 微信小程序中点击创建订单直接开始支付
-              this.pay(res.data.result.sn);
-              // #endif
-
-              // #ifndef MP-WEIXIN
-              this.navigateTo(
-                `/pages/cart/payment/payOrder?trade_sn=${res.data.result.sn}`
-              );
-              // #endif
-            }
-          } else {
-            uni.showToast({
-              title: res.data.message,
-              duration: 2000,
-              icon: "none",
-            });
-          }
-        });
-      }, 3000);
-    },
-
-    /**
-     * 微信小程序中直接支付
-     */
-    async pay(sn) {
-      new LiLiWXPay({
-        sn: sn,
-        price: this.orderMessage.priceDetailDTO.billPrice,
-      }).pay();
-    },
-
-    /**
-     * 获取用户地址
-     */
-    getUserAddress() {
-      // 如果没有商品选择地址的话 则选择 默认地址
-      API_Address.getAddressDefault().then((res) => {
-        if (res.data.result) {
-          res.data.result.consigneeAddressPath =
-            res.data.result.consigneeAddressPath.split(",");
-          this.address = res.data.result;
-        }
-      });
-    },
-    // 获取配送列表
-    async getDistribution() {
-      let shopRes = await API_Trade.shippingMethodList({
-        way: this.routerVal.way,
-      });
-      let shopList;
-      if (shopRes.data.success) {
-        shopList = shopRes.data.result;
-        let way = [];
-        console.log(shopList);
-        this.shippingWay.forEach((item) => {
-          shopList.forEach((child) => {
-            if (item.value == child) {
-              way.push(item);
-            }
-          });
-        });
-        this.shippingMethod = way;
-        if (way.length && !way.some((item) => item.value === this.shippingText)) {
-          this.shippingText = way[0].value;
-        }
-      }
-    },
-
-    // 选择配送
-    async confirmDistribution(val) {
-      const selected = val?.value?.[0] || val?.[0];
-      if (!selected?.value) {
-        return;
-      }
-      let res = await API_Trade.setShipMethod({
-        shippingMethod: selected.value,
-        way: this.routerVal.way,
-      });
-
-      this.shippingText = selected.value;
+    API_Trade.createTrade(submit).then((res) => {
       if (res.data.success) {
-        this.getOrderList();
-      }
-    },
-
-    // 获取结算参数
-    getOrderList() {
-      this.notSupportFreight = [];
-      this.notSupportFreightNoticeText = "";
-      return API_Trade.getCheckoutParams(this.routerVal.way).then((res) => {
-        // 获取结算参数 进行首次判断
-        this.originOrderData = this.orderMessage
-          ? JSON.parse(JSON.stringify(this.orderMessage))
-          : null;
-
-        if (
-          !res.data.result.checkedSkuList ||
-          res.data.result.checkedSkuList.length === 0
-        ) {
-          if (!this.originOrderData?.checkedSkuList?.length) {
-            uni.switchTab({
-              url: "/pages/tabbar/cart/cartList",
-            });
-          }
-        }
-        if (res.data.result.skuList.length <= 0) {
-          if (!this.originOrderData?.skuList?.length) {
-            uni.navigateTo({
-              url: "/pages/order/myOrder?status=0",
-            });
-          }
-        }
-
-        let repeatData;
-        res.data.result.cartList.forEach((item, index) => {
-          // 如果已经写过备注信息的话赋值
-          repeatData = {
-            remark: this.remarkFlag
-              ? this.remark[index].storeId == item.storeId
-                ? this.remark[index].remark
-                : item.remark
-              : item.remark,
-            storeId: item.storeId,
-          };
-
-          this.remarkVal[index] = repeatData;
-        });
-
-        this.orderMessage = res.data.result;
-        /**
-         * 为了避免路径传值在h5中超出限制问题
-         * 这块将可用的优惠券以及不可用的优惠券放入到vuex里面进行存储
-         */
-        this.$store.state.canUseCoupons = res.data.result.canUseCoupons;
-        this.$store.state.cantUseCoupons = res.data.result.cantUseCoupons;
-
-        if (!res.data.result.memberAddress) {
-          // 获取会员默认地址
-          this.getUserAddress();
+        uni.showToast({
+          title: '创建订单成功!',
+          duration: 2000,
+          icon: 'none',
+        })
+        if (orderMessage.value.priceDetailDTO.billPrice == 0) {
+          uni.navigateTo({
+            url: '/pages/order/myOrder?status=0',
+          })
         } else {
-          this.address = res.data.result.memberAddress;
-          res.data.result.memberAddress.consigneeAddressPath =
-            res.data.result.memberAddress.consigneeAddressPath.split(",");
-        }
-        if (res.data.result.storeAddress) {
-          this.storeAddress = res.data.result.storeAddress;
-          console.log("storeAddress", this.storeAddress);
-        }
-        if (
-          res.data.result.notSupportFreight &&
-          res.data.result.notSupportFreight.length != 0
-        ) {
-          this.notSupportFreight = res.data.result.notSupportFreight;
-          this.notSupportFreightNoticeText = "以下商品超出配送范围：";
-          res.data.result.notSupportFreight.forEach((item) => {
-            this.notSupportFreightNoticeText += item.goodsSku.goodsName;
-          });
-        }
-      });
-    },
+          // #ifdef MP-WEIXIN
+          pay(res.data.result.sn)
+          // #endif
 
-    //
-  },
-};
+          // #ifndef MP-WEIXIN
+          navigateTo(
+            `/pages/cart/payment/payOrder?trade_sn=${res.data.result.sn}`
+          )
+          // #endif
+        }
+      } else {
+        uni.showToast({
+          title: res.data.message,
+          duration: 2000,
+          icon: 'none',
+        })
+      }
+    })
+  }, 3000)
+}
+
+async function pay(sn: string) {
+  new LiLiWXPay({
+    sn,
+    price: orderMessage.value.priceDetailDTO.billPrice,
+  }).pay()
+}
+
+function getUserAddress() {
+  API_Address.getAddressDefault().then((res) => {
+    if (res.data.result) {
+      res.data.result.consigneeAddressPath =
+        res.data.result.consigneeAddressPath.split(',')
+      address.value = res.data.result
+    }
+  })
+}
+
+async function getDistribution() {
+  const shopRes = await API_Trade.shippingMethodList({
+    way: routerVal.value.way,
+  })
+  if (shopRes.data.success) {
+    const shopList = shopRes.data.result
+    const way: ShippingOption[] = []
+    console.log(shopList)
+    shippingWay.forEach((item) => {
+      shopList.forEach((child: string) => {
+        if (item.value == child) {
+          way.push(item)
+        }
+      })
+    })
+    shippingMethod.value = way
+    if (way.length && !way.some((item) => item.value === shippingText.value)) {
+      shippingText.value = way[0].value
+    }
+  }
+}
+
+async function confirmDistribution(val: any) {
+  const selected = val?.value?.[0] || val?.[0]
+  if (!selected?.value) {
+    return
+  }
+  const res = await API_Trade.setShipMethod({
+    shippingMethod: selected.value,
+    way: routerVal.value.way,
+  })
+
+  shippingText.value = selected.value
+  if (res.data.success) {
+    getOrderList()
+  }
+}
+
+function getOrderList() {
+  notSupportFreight.value = []
+  notSupportFreightNoticeText.value = ''
+  return API_Trade.getCheckoutParams(routerVal.value.way).then((res) => {
+    originOrderData.value = orderMessage.value
+      ? JSON.parse(JSON.stringify(orderMessage.value))
+      : null
+
+    if (
+      !res.data.result.checkedSkuList ||
+      res.data.result.checkedSkuList.length === 0
+    ) {
+      if (!originOrderData.value?.checkedSkuList?.length) {
+        uni.switchTab({
+          url: '/pages/tabbar/cart/cartList',
+        })
+      }
+    }
+    if (res.data.result.skuList.length <= 0) {
+      if (!originOrderData.value?.skuList?.length) {
+        uni.navigateTo({
+          url: '/pages/order/myOrder?status=0',
+        })
+      }
+    }
+
+    let repeatData
+    res.data.result.cartList.forEach((item: any, index: number) => {
+      repeatData = {
+        remark: remarkFlag.value
+          ? remark.value[index].storeId == item.storeId
+            ? remark.value[index].remark
+            : item.remark
+          : item.remark,
+        storeId: item.storeId,
+      }
+
+      remarkVal.value[index] = repeatData
+    })
+
+    orderMessage.value = res.data.result
+    ;(store.state as any).canUseCoupons = res.data.result.canUseCoupons
+    ;(store.state as any).cantUseCoupons = res.data.result.cantUseCoupons
+
+    if (!res.data.result.memberAddress) {
+      getUserAddress()
+    } else {
+      address.value = res.data.result.memberAddress
+      res.data.result.memberAddress.consigneeAddressPath =
+        res.data.result.memberAddress.consigneeAddressPath.split(',')
+    }
+    if (res.data.result.storeAddress) {
+      storeAddress.value = res.data.result.storeAddress
+      console.log('storeAddress', storeAddress.value)
+    }
+    if (
+      res.data.result.notSupportFreight &&
+      res.data.result.notSupportFreight.length != 0
+    ) {
+      notSupportFreight.value = res.data.result.notSupportFreight
+      notSupportFreightNoticeText.value = '以下商品超出配送范围：'
+      res.data.result.notSupportFreight.forEach((item: any) => {
+        notSupportFreightNoticeText.value += item.goodsSku.goodsName
+      })
+    }
+  })
+}
 </script>
 <style scoped>
 page {

pages/order/invoice/invoiceDetail.vue

@@ -74,185 +74,128 @@
   </view>
 </template>
 
-<script>
-import { getReceiptDetail } from "@/api/order.js";
+<script setup lang="ts">
+import { ref } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import { getReceiptDetail } from '@/api/order.js'
+import { unitPrice } from '@/utils/filters.js'
 
-export default {
-  data() {
-    return {
-      order: {},
-      title_type: "",
-      showInvoicePopup: false,
-    };
-  },
-  onLoad(options) {
-    this.loadData(options.id);
-  },
-  methods: {
-    loadData(id) {
-      getReceiptDetail(id).then((res) => {
-        let order = res.data.result;
-        this.order = order;
-        this.title_type = order.companyName || order.taxpayerId ? "单位" : "个人";
-      });
-    },
-    getTitleNameValue() {
-      return this.title_type === "单位"
-        ? this.order.companyName || "-"
-        : this.order.personalName || "-";
-    },
-    viewInvoice() {
-      if (!this.order.invoiceAddress) {
+const order = ref<Record<string, any>>({})
+const title_type = ref('')
+const showInvoicePopup = ref(false)
+
+onLoad((options) => {
+  loadData(options.id)
+})
+
+function loadData(id: string) {
+  getReceiptDetail(id).then((res) => {
+    const result = res.data.result
+    order.value = result
+    title_type.value = result.companyName || result.taxpayerId ? '单位' : '个人'
+  })
+}
+
+function getTitleNameValue() {
+  return title_type.value === '单位'
+    ? order.value.companyName || '-'
+    : order.value.personalName || '-'
+}
+
+function viewInvoice() {
+  if (!order.value.invoiceAddress) {
+    uni.showToast({
+      title: '暂无发票地址',
+      duration: 2000,
+      icon: 'none',
+    })
+    return
+  }
+  if (isImageInvoice()) {
+    showInvoicePopup.value = true
+    return
+  }
+  // #ifdef APP-PLUS
+  plus.runtime.openURL(order.value.invoiceAddress)
+  // #endif
+  // #ifndef APP-PLUS
+  uni.navigateTo({
+    url: '/pages/tabbar/home/web-view?src=' + encodeURIComponent(order.value.invoiceAddress),
+  })
+  // #endif
+}
+
+function isImageInvoice() {
+  const url = (order.value.invoiceAddress || '').split('?')[0].toLowerCase()
+  return /\.(png|jpe?g|gif|bmp|webp)$/.test(url)
+}
+
+function previewImageInvoice() {
+  if (!order.value.invoiceAddress) return
+  uni.previewImage({
+    current: 0,
+    urls: [order.value.invoiceAddress],
+  })
+}
+
+function downloadImageInvoice() {
+  if (!order.value.invoiceAddress) {
+    uni.showToast({
+      title: '暂无发票可下载',
+      duration: 2000,
+      icon: 'none',
+    })
+    return
+  }
+  uni.downloadFile({
+    url: order.value.invoiceAddress,
+    success: (res) => {
+      if (res.statusCode !== 200) {
         uni.showToast({
-          title: "暂无发票地址",
+          title: '下载失败',
           duration: 2000,
-          icon: "none",
-        });
-        return;
+          icon: 'none',
+        })
+        return
       }
-      if (this.isImageInvoice()) {
-        this.showInvoicePopup = true;
-        return;
-      }
-      // #ifdef APP-PLUS
-      plus.runtime.openURL(this.order.invoiceAddress);
+      const tempFilePath = res.tempFilePath
+      // #ifdef H5
+      const link = document.createElement('a')
+      link.href = tempFilePath || order.value.invoiceAddress
+      link.download = 'invoice'
+      document.body.appendChild(link)
+      link.click()
+      document.body.removeChild(link)
       // #endif
-      // #ifndef APP-PLUS
-      uni.navigateTo({
-        url:
-          "/pages/tabbar/home/web-view?src=" +
-          encodeURIComponent(this.order.invoiceAddress),
-      });
-      // #endif
-    },
-    isImageInvoice() {
-      const url = (this.order.invoiceAddress || "").split("?")[0].toLowerCase();
-      return /\.(png|jpe?g|gif|bmp|webp)$/.test(url);
-    },
-    previewImageInvoice() {
-      if (!this.order.invoiceAddress) {
-        return;
-      }
-      uni.previewImage({
-        current: 0,
-        urls: [this.order.invoiceAddress],
-      });
-    },
-    downloadImageInvoice() {
-      if (!this.order.invoiceAddress) {
-        uni.showToast({
-          title: "暂无发票可下载",
-          duration: 2000,
-          icon: "none",
-        });
-        return;
-      }
-      uni.downloadFile({
-        url: this.order.invoiceAddress,
-        success: (res) => {
-          if (res.statusCode !== 200) {
-            uni.showToast({
-              title: "下载失败",
-              duration: 2000,
-              icon: "none",
-            });
-            return;
-          }
-          const tempFilePath = res.tempFilePath;
-          // #ifdef H5
-          const link = document.createElement("a");
-          link.href = tempFilePath || this.order.invoiceAddress;
-          link.download = "invoice";
-          document.body.appendChild(link);
-          link.click();
-          document.body.removeChild(link);
-          // #endif
-          // #ifndef H5
-          uni.saveImageToPhotosAlbum({
-            filePath: tempFilePath,
-            success: () => {
-              uni.showToast({
-                title: "发票已保存到相册",
-                duration: 2000,
-                icon: "none",
-              });
-            },
-            fail: () => {
-              uni.showToast({
-                title: "保存失败",
-                duration: 2000,
-                icon: "none",
-              });
-            },
-          });
-          // #endif
+      // #ifndef H5
+      uni.saveImageToPhotosAlbum({
+        filePath: tempFilePath,
+        success: () => {
+          uni.showToast({
+            title: '发票已保存到相册',
+            duration: 2000,
+            icon: 'none',
+          })
         },
         fail: () => {
           uni.showToast({
-            title: "下载失败",
+            title: '保存失败',
             duration: 2000,
-            icon: "none",
-          });
+            icon: 'none',
+          })
         },
-      });
+      })
+      // #endif
     },
-    /**
-     * 点击图片放大或保存
-     */
-    preview() {
-      //预览发票
-      if (this.order.elec_file_list.length) {
-        uni.previewImage({
-          current: 0,
-          urls: this.order.elec_file_list,
-          longPressActions: {
-            itemList: ["发送给朋友", "保存图片", "收藏"],
-            success: function (data) {},
-            fail: function (err) {},
-          },
-        });
-      } else {
-        uni.showToast({
-          title: "暂无发票可预览",
-          duration: 2000,
-          icon: "none",
-        });
-      }
+    fail: () => {
+      uni.showToast({
+        title: '下载失败',
+        duration: 2000,
+        icon: 'none',
+      })
     },
-    download() {
-      //下载发票
-      let _this = this;
-      if (this.order.elec_file_list.length) {
-        this.order.elec_file_list.forEach((item) => {
-          uni.downloadFile({
-            url: item,
-            success: (res) => {
-              if (res.statusCode === 200) {
-                let tempFilePath = res.tempFilePath;
-                uni.saveFile({
-                  tempFilePath: tempFilePath,
-                  success: function (res) {
-                    uni.showToast({
-                      title: "发票已下载到" + res.savedFilePath,
-                      duration: 2000,
-                      icon: "none",
-                    });
-                  },
-                });
-              }
-            },
-          });
-        });
-      } else {
-        uni.showToast({
-          title: "暂无发票可下载",
-          duration: 2000,
-          icon: "none",
-        });
-      }
-    },
-  },
-};
+  })
+}
 </script>
 
 <style lang="scss" scoped>

pages/order/invoice/setInvoice.vue

@@ -92,340 +92,355 @@
     </div>
   </u-popup>
 </template>
-<script>
-export default {
-  props: ["res"],
-  computed: {
-    isSpecialInvoice() {
-      return this.getActiveTitle(this.invoiceType) === "增值税专用发票";
-    },
-    titleName: {
-      get() {
-        return this.isUnitTitle()
-          ? this.submitData.companyName
-          : this.submitData.personalName;
-      },
-      set(value) {
-        if (this.isUnitTitle()) {
-          this.submitData.companyName = value;
-        } else {
-          this.submitData.personalName = value;
-        }
-        this.syncReceiptTitle();
-      },
-    },
+<script setup lang="ts">
+import { ref, reactive, computed, watch, onMounted, getCurrentInstance } from 'vue'
+
+interface InvoiceOption {
+  title: string
+  active: boolean
+  disabled?: boolean
+}
+
+interface SubmitData {
+  receiptTitle: string
+  receiptType: string
+  personalName: string
+  companyName: string
+  taxpayerId: string
+  receiptContent: string
+  companyAddress: string
+  companyPhone: string
+  bankName: string
+  bankAccount: string
+  receiptPhone: string
+  receiptEmail: string
+}
+
+const props = defineProps<{
+  res?: Record<string, any>
+}>()
+
+const emit = defineEmits<{
+  callbackInvoice: [val: SubmitData | boolean]
+}>()
+
+const { proxy } = getCurrentInstance()!
+
+const shouldClearOnTypeChange = ref(false)
+const taxpayerFlag = ref(false)
+const submitData = reactive<SubmitData>({
+  receiptTitle: '',
+  receiptType: '1',
+  personalName: '',
+  companyName: '',
+  taxpayerId: '',
+  receiptContent: '',
+  companyAddress: '',
+  companyPhone: '',
+  bankName: '',
+  bankAccount: '',
+  receiptPhone: '',
+  receiptEmail: '',
+})
+const show = ref(true)
+const title = ref('')
+const tips =
+  '电子发票即电子增值税发票，是税局认可的有效凭证，其法律效力、基本用途及使用规定同纸质发票。'
+
+const invoiceType = reactive<InvoiceOption[]>([
+  { title: '电子普通发票', active: true },
+  { title: '增值税专用发票', active: false },
+])
+
+const invoiceHeader = reactive<InvoiceOption[]>([
+  { title: '个人', active: false },
+  { title: '单位', active: false },
+])
+
+const goodsType = reactive<InvoiceOption[]>([
+  { title: '商品明细', active: false },
+  { title: '商品类别', active: false },
+])
+
+const isSpecialInvoice = computed(
+  () => getActiveTitle(invoiceType) === '增值税专用发票'
+)
+
+const titleName = computed({
+  get() {
+    return isUnitTitle() ? submitData.companyName : submitData.personalName
   },
-  watch: {
-    invoiceType: {
-      handler(val) {
-        const currentType = this.getActiveTitle(val);
-        const nextReceiptType =
-          currentType === "增值税专用发票" ? "2" : "1";
-        const previousReceiptType = this.submitData.receiptType;
-        this.submitData.receiptType = nextReceiptType;
-
-        if (
-          this.shouldClearOnTypeChange &&
-          previousReceiptType &&
-          previousReceiptType !== nextReceiptType
-        ) {
-          this.clearInvoiceInfo();
-        }
-
-        if (currentType === "增值税专用发票") {
-          this.setActiveByTitle(this.invoiceHeader, "单位");
-          this.setActiveByTitle(this.goodsType, "商品明细");
-          this.title = "单位";
-          this.taxpayerFlag = true;
-          this.submitData.receiptContent = "商品明细";
-          this.syncReceiptTitle();
-        } else {
-          this.setActiveByTitle(this.invoiceHeader, "个人");
-          this.setActiveByTitle(this.goodsType, "商品明细");
-          this.title = "个人";
-          this.taxpayerFlag = false;
-          this.submitData.receiptContent = "商品明细";
-          this.syncReceiptTitle();
-        }
-        this.shouldClearOnTypeChange = false;
-      },
-      deep: true,
-    },
-    invoiceHeader: {
-      handler(val) {
-        if (this.isSpecialInvoice) {
-          this.title = "单位";
-          this.taxpayerFlag = true;
-          return;
-        }
-
-        this.title = this.getActiveTitle(val) || "个人";
-        this.taxpayerFlag = this.title == "单位";
-        if (!this.taxpayerFlag) {
-          this.submitData.taxpayerId = "";
-        }
-        this.syncReceiptTitle();
-      },
-      deep: true,
-    },
-    goodsType: {
-      handler(val) {
-        this.submitData.receiptContent = val.filter((item) => {
-          return item.active == true;
-        })[0].title;
-      },
-      deep: true,
-    },
-  },
-
-  data() {
-    return {
-      shouldClearOnTypeChange: false,
-      taxpayerFlag: false,
-      submitData: {
-        receiptTitle: "", //发票抬头
-        receiptType: "1", // 发票类型
-        personalName: "",
-        companyName: "",
-        taxpayerId: "", //纳税人
-        receiptContent: "",
-        companyAddress: "", //单位地址
-        companyPhone: "", //单位电话
-        bankName: "", //开户银行
-        bankAccount: "", //银行账号
-        receiptPhone: "", //收票人手机
-        receiptEmail: "", //收票人邮箱
-      },
-      show: true,
-      title: "",
-      tips:
-        "电子发票即电子增值税发票，是税局认可的有效凭证，其法律效力、基本用途及使用规定同纸质发票。",
-      //   发票类型
-      invoiceType: [
-        {
-          title: "电子普通发票",
-          active: true,
-        },
-        {
-          title: "增值税专用发票",
-          active: false,
-        },
-      ],
-      //   发票抬头
-      invoiceHeader: [
-        {
-          title: "个人",
-          active: false,
-        },
-        {
-          title: "单位",
-          active: false,
-        },
-      ],
-      //   商品类型
-      goodsType: [
-        {
-          title: "商品明细",
-          active: false,
-        },
-        {
-          title: "商品类别",
-          active: false,
-        },
-      ],
-    };
-  },
-  mounted() {
-    if (this.res) {
-      this.submitData.receiptType = this.normalizeReceiptType(this.res.receiptType);
-      this.submitData.personalName =
-        this.res.personalName ||
-        (!this.res.companyName && !this.res.taxpayerId ? this.res.receiptTitle || "" : "");
-      this.submitData.companyName =
-        this.res.companyName ||
-        (this.res.taxpayerId ? this.res.receiptTitle || "" : "");
-      this.submitData.taxpayerId = this.res.taxpayerId; //纳税人
-      this.submitData.receiptContent = this.res.receiptContent;
-      this.submitData.companyAddress = this.res.companyAddress || "";
-      this.submitData.companyPhone = this.res.companyPhone || "";
-      this.submitData.bankName = this.res.bankName || "";
-      this.submitData.bankAccount = this.res.bankAccount || "";
-      this.submitData.receiptPhone = this.res.receiptPhone || "";
-      this.submitData.receiptEmail = this.res.receiptEmail || "";
-      if (this.submitData.receiptType === "2") {
-        this.setActiveByTitle(this.invoiceType, "增值税专用发票");
-        this.setActiveByTitle(this.invoiceHeader, "单位");
-        this.setActiveByTitle(this.goodsType, "商品明细");
-      } else {
-        this.setActiveByTitle(this.invoiceType, "电子普通发票");
-        this.res.receiptContent == "商品类别"
-          ? this.setActiveByTitle(this.goodsType, "商品类别")
-          : this.setActiveByTitle(this.goodsType, "商品明细");
-        this.res.taxpayerId
-          ? this.setActiveByTitle(this.invoiceHeader, "单位")
-          : this.setActiveByTitle(this.invoiceHeader, "个人");
-      }
-      this.syncReceiptTitle();
+  set(value: string) {
+    if (isUnitTitle()) {
+      submitData.companyName = value
     } else {
-      this.setActiveByTitle(this.invoiceType, "电子普通发票");
-      this.setActiveByTitle(this.invoiceHeader, "个人");
-      this.setActiveByTitle(this.goodsType, "商品明细");
-      this.syncReceiptTitle();
+      submitData.personalName = value
+    }
+    syncReceiptTitle()
+  },
+})
+
+watch(
+  invoiceType,
+  (val) => {
+    const currentType = getActiveTitle(val)
+    const nextReceiptType = currentType === '增值税专用发票' ? '2' : '1'
+    const previousReceiptType = submitData.receiptType
+    submitData.receiptType = nextReceiptType
+
+    if (
+      shouldClearOnTypeChange.value &&
+      previousReceiptType &&
+      previousReceiptType !== nextReceiptType
+    ) {
+      clearInvoiceInfo()
     }
 
+    if (currentType === '增值税专用发票') {
+      setActiveByTitle(invoiceHeader, '单位')
+      setActiveByTitle(goodsType, '商品明细')
+      title.value = '单位'
+      taxpayerFlag.value = true
+      submitData.receiptContent = '商品明细'
+      syncReceiptTitle()
+    } else {
+      setActiveByTitle(invoiceHeader, '个人')
+      setActiveByTitle(goodsType, '商品明细')
+      title.value = '个人'
+      taxpayerFlag.value = false
+      submitData.receiptContent = '商品明细'
+      syncReceiptTitle()
+    }
+    shouldClearOnTypeChange.value = false
   },
-  methods: {
-    normalizeReceiptType(type) {
-      return type === "2" || type === "VATOSPECIAL" ? "2" : "1";
-    },
-    getActiveTitle(list) {
-      const current = list.find((item) => item.active);
-      return current ? current.title : "";
-    },
-    setActiveByTitle(list, title) {
-      list.forEach((item) => {
-        item.active = item.title === title;
-      });
-    },
-    isUnitTitle() {
-      return this.isSpecialInvoice || this.title === "单位";
-    },
-    syncReceiptTitle() {
-      this.submitData.receiptTitle = this.isUnitTitle()
-        ? this.submitData.companyName
-        : this.submitData.personalName;
-    },
-    clearInvoiceInfo() {
-      this.submitData.receiptTitle = "";
-      this.submitData.personalName = "";
-      this.submitData.companyName = "";
-      this.submitData.taxpayerId = "";
-      this.submitData.receiptContent = "";
-      this.submitData.companyAddress = "";
-      this.submitData.companyPhone = "";
-      this.submitData.bankName = "";
-      this.submitData.bankAccount = "";
-      this.submitData.receiptPhone = "";
-      this.submitData.receiptEmail = "";
-    },
-    handleClickHeader(val, index, arr) {
-      if (val.disabled) {
-        return;
-      }
-      const previousTitle = this.getActiveTitle(arr);
-      if (arr === this.invoiceType && previousTitle !== val.title) {
-        this.shouldClearOnTypeChange = true;
-      }
-      arr.forEach((item) => {
-        item.active = false;
-      });
-      val.active = true;
-    },
-    /**
-     * 监听关闭
-     */
-    close(val) {
-      this.$emit("callbackInvoice", val);
-    },
-    submitInvoice() {
-      /**
-       * 验证
-       */
-      const {
-        receiptTitle,
-        taxpayerId,
-        companyAddress,
-        companyPhone,
-        bankName,
-        bankAccount,
-        receiptPhone,
-        receiptEmail,
-      } = this.submitData;
-      this.syncReceiptTitle();
+  { deep: true }
+)
 
-      if (this.$u.test.isEmpty(receiptTitle)) {
-        uni.showToast({
-          title: "请您填写发票抬头!",
-          duration: 2000,
-          icon: "none",
-        });
-        return false;
-      }
-      if (
-        !this.$u.test.isEmpty(receiptTitle) &&
-        this.$u.test.isEmpty(taxpayerId) &&
-        this.invoiceHeader[1].active == true
-      ) {
-        uni.showToast({
-          title: "请您填写纳税人识别号!",
-          duration: 2000,
-          icon: "none",
-        });
+watch(
+  invoiceHeader,
+  (val) => {
+    if (isSpecialInvoice.value) {
+      title.value = '单位'
+      taxpayerFlag.value = true
+      return
+    }
 
-        return false;
-      }
-      if (this.isSpecialInvoice && this.$u.test.isEmpty(companyAddress)) {
-        uni.showToast({
-          title: "请您填写单位地址!",
-          duration: 2000,
-          icon: "none",
-        });
-        return false;
-      }
-      if (this.isSpecialInvoice && this.$u.test.isEmpty(companyPhone)) {
-        uni.showToast({
-          title: "请您填写单位电话!",
-          duration: 2000,
-          icon: "none",
-        });
-        return false;
-      }
-      if (this.isSpecialInvoice && this.$u.test.isEmpty(bankName)) {
-        uni.showToast({
-          title: "请您填写开户银行!",
-          duration: 2000,
-          icon: "none",
-        });
-        return false;
-      }
-      if (this.isSpecialInvoice && this.$u.test.isEmpty(bankAccount)) {
-        uni.showToast({
-          title: "请您填写银行账号!",
-          duration: 2000,
-          icon: "none",
-        });
-        return false;
-      }
-      if (this.$u.test.isEmpty(receiptPhone)) {
-        uni.showToast({
-          title: "请您填写收票人手机!",
-          duration: 2000,
-          icon: "none",
-        });
-        return false;
-      }
-      if (!this.$u.test.mobile(receiptPhone)) {
-        uni.showToast({
-          title: "请输入正确的收票人手机号!",
-          duration: 2000,
-          icon: "none",
-        });
-        return false;
-      }
-      if (!this.$u.test.isEmpty(receiptEmail) && !this.$u.test.email(receiptEmail)) {
-        uni.showToast({
-          title: "请输入正确的收票人邮箱!",
-          duration: 2000,
-          icon: "none",
-        });
-        return false;
-      }
-
-      this.show = false;
-      this.close(this.submitData);
-    },
+    title.value = getActiveTitle(val) || '个人'
+    taxpayerFlag.value = title.value == '单位'
+    if (!taxpayerFlag.value) {
+      submitData.taxpayerId = ''
+    }
+    syncReceiptTitle()
   },
-};
+  { deep: true }
+)
+
+watch(
+  goodsType,
+  (val) => {
+    submitData.receiptContent = val.filter((item) => item.active == true)[0].title
+  },
+  { deep: true }
+)
+
+onMounted(() => {
+  if (props.res) {
+    submitData.receiptType = normalizeReceiptType(props.res.receiptType)
+    submitData.personalName =
+      props.res.personalName ||
+      (!props.res.companyName && !props.res.taxpayerId
+        ? props.res.receiptTitle || ''
+        : '')
+    submitData.companyName =
+      props.res.companyName ||
+      (props.res.taxpayerId ? props.res.receiptTitle || '' : '')
+    submitData.taxpayerId = props.res.taxpayerId
+    submitData.receiptContent = props.res.receiptContent
+    submitData.companyAddress = props.res.companyAddress || ''
+    submitData.companyPhone = props.res.companyPhone || ''
+    submitData.bankName = props.res.bankName || ''
+    submitData.bankAccount = props.res.bankAccount || ''
+    submitData.receiptPhone = props.res.receiptPhone || ''
+    submitData.receiptEmail = props.res.receiptEmail || ''
+    if (submitData.receiptType === '2') {
+      setActiveByTitle(invoiceType, '增值税专用发票')
+      setActiveByTitle(invoiceHeader, '单位')
+      setActiveByTitle(goodsType, '商品明细')
+    } else {
+      setActiveByTitle(invoiceType, '电子普通发票')
+      props.res.receiptContent == '商品类别'
+        ? setActiveByTitle(goodsType, '商品类别')
+        : setActiveByTitle(goodsType, '商品明细')
+      props.res.taxpayerId
+        ? setActiveByTitle(invoiceHeader, '单位')
+        : setActiveByTitle(invoiceHeader, '个人')
+    }
+    syncReceiptTitle()
+  } else {
+    setActiveByTitle(invoiceType, '电子普通发票')
+    setActiveByTitle(invoiceHeader, '个人')
+    setActiveByTitle(goodsType, '商品明细')
+    syncReceiptTitle()
+  }
+})
+
+function normalizeReceiptType(type: string) {
+  return type === '2' || type === 'VATOSPECIAL' ? '2' : '1'
+}
+
+function getActiveTitle(list: InvoiceOption[]) {
+  const current = list.find((item) => item.active)
+  return current ? current.title : ''
+}
+
+function setActiveByTitle(list: InvoiceOption[], activeTitle: string) {
+  list.forEach((item) => {
+    item.active = item.title === activeTitle
+  })
+}
+
+function isUnitTitle() {
+  return isSpecialInvoice.value || title.value === '单位'
+}
+
+function syncReceiptTitle() {
+  submitData.receiptTitle = isUnitTitle()
+    ? submitData.companyName
+    : submitData.personalName
+}
+
+function clearInvoiceInfo() {
+  submitData.receiptTitle = ''
+  submitData.personalName = ''
+  submitData.companyName = ''
+  submitData.taxpayerId = ''
+  submitData.receiptContent = ''
+  submitData.companyAddress = ''
+  submitData.companyPhone = ''
+  submitData.bankName = ''
+  submitData.bankAccount = ''
+  submitData.receiptPhone = ''
+  submitData.receiptEmail = ''
+}
+
+function handleClickHeader(
+  val: InvoiceOption,
+  _index: number,
+  arr: InvoiceOption[]
+) {
+  if (val.disabled) {
+    return
+  }
+  const previousTitle = getActiveTitle(arr)
+  if (arr === invoiceType && previousTitle !== val.title) {
+    shouldClearOnTypeChange.value = true
+  }
+  arr.forEach((item) => {
+    item.active = false
+  })
+  val.active = true
+}
+
+function close(val: SubmitData | boolean) {
+  emit('callbackInvoice', val)
+}
+
+function submitInvoice() {
+  const {
+    receiptTitle,
+    taxpayerId,
+    companyAddress,
+    companyPhone,
+    bankName,
+    bankAccount,
+    receiptPhone,
+    receiptEmail,
+  } = submitData
+  syncReceiptTitle()
+
+  if (proxy.$u.test.isEmpty(receiptTitle)) {
+    uni.showToast({
+      title: '请您填写发票抬头!',
+      duration: 2000,
+      icon: 'none',
+    })
+    return false
+  }
+  if (
+    !proxy.$u.test.isEmpty(receiptTitle) &&
+    proxy.$u.test.isEmpty(taxpayerId) &&
+    invoiceHeader[1].active == true
+  ) {
+    uni.showToast({
+      title: '请您填写纳税人识别号!',
+      duration: 2000,
+      icon: 'none',
+    })
+    return false
+  }
+  if (isSpecialInvoice.value && proxy.$u.test.isEmpty(companyAddress)) {
+    uni.showToast({
+      title: '请您填写单位地址!',
+      duration: 2000,
+      icon: 'none',
+    })
+    return false
+  }
+  if (isSpecialInvoice.value && proxy.$u.test.isEmpty(companyPhone)) {
+    uni.showToast({
+      title: '请您填写单位电话!',
+      duration: 2000,
+      icon: 'none',
+    })
+    return false
+  }
+  if (isSpecialInvoice.value && proxy.$u.test.isEmpty(bankName)) {
+    uni.showToast({
+      title: '请您填写开户银行!',
+      duration: 2000,
+      icon: 'none',
+    })
+    return false
+  }
+  if (isSpecialInvoice.value && proxy.$u.test.isEmpty(bankAccount)) {
+    uni.showToast({
+      title: '请您填写银行账号!',
+      duration: 2000,
+      icon: 'none',
+    })
+    return false
+  }
+  if (proxy.$u.test.isEmpty(receiptPhone)) {
+    uni.showToast({
+      title: '请您填写收票人手机!',
+      duration: 2000,
+      icon: 'none',
+    })
+    return false
+  }
+  if (!proxy.$u.test.mobile(receiptPhone)) {
+    uni.showToast({
+      title: '请输入正确的收票人手机号!',
+      duration: 2000,
+      icon: 'none',
+    })
+    return false
+  }
+  if (
+    !proxy.$u.test.isEmpty(receiptEmail) &&
+    !proxy.$u.test.email(receiptEmail)
+  ) {
+    uni.showToast({
+      title: '请输入正确的收票人邮箱!',
+      duration: 2000,
+      icon: 'none',
+    })
+    return false
+  }
+
+  show.value = false
+  close(submitData)
+}
 </script>
 <style scoped lang="scss">
 .form-item {

pages/order/myOrder.vue

@@ -11,7 +11,7 @@
 					<u-empty text="暂无订单" mode="list"
 						v-if="tabItem.loaded === true && tabItem.orderList.length === 0"></u-empty>
 					<!-- 订单列表 -->
-					<view class="seller-view" :key="oderIndex" v-for="(order, oderIndex) in tabItem.orderList">
+					<view class="seller-view" :key="orderIndex" v-for="(order, orderIndex) in tabItem.orderList">
 						<!-- 店铺名称 -->
 						<view class="seller-info u-flex u-row-between">
 							<view class="seller-name wes" @click="navigateToStore(order)">
@@ -108,458 +108,339 @@
 	</view>
 </template>
 
-<script>
-	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue";
-	import {
-		getOrderList,
-		cancelOrder,
-		confirmReceipt
-	} from "@/api/order.js";
-	import {
-		getClearReason
-	} from "@/api/after-sale.js";
-	import LiLiWXPay from "@/js_sdk/lili-pay/wx-pay.js";
-	export default {
-		components: {
-			uniLoadMore,
-		},
-		data() {
-			return {
-				lightColor: this.$lightColor,
-				tabCurrentIndex: 0, //导航栏索引
-				navList: [
-					//导航栏list
-					{
-						state: 0,
-						text: "全部",
-						loadStatus: "more",
-						orderList: [],
-						pageNumber: 1,
-					},
-					{
-						state: 1,
-						text: "待付款",
-						loadStatus: "more",
-						orderList: [],
-						pageNumber: 1,
-					},
-					{
-						state: 2,
-						text: "待发货",
-						loadStatus: "more",
-						orderList: [],
-						pageNumber: 1,
-					},
-					{
-						state: 3,
-						text: "待收货",
-						loadStatus: "more",
-						orderList: [],
-						pageNumber: 1,
-					},
-					{
-						state: 4,
-						text: "已完成",
-						loadStatus: "more",
-						orderList: [],
-						pageNumber: 1,
-					},
-					{
-						state: 5,
-						text: "已取消",
-						loadStatus: "more",
-						orderList: [],
-						pageNumber: 1,
-					},
-				],
-				status: "", //接收导航栏状态
-				params: {
-					pageNumber: 1,
-					pageSize: 10,
-					tag: "ALL",
-				},
-				orderStatus: [
-					//订单状态
-					{
-						orderStatus: "ALL", //全部
-					},
-					{
-						orderStatus: "WAIT_PAY", //代付款
-					},
-					{
-						orderStatus: "WAIT_SHIP",
-					},
-					{
-						orderStatus: "WAIT_ROG", //待收货
-					},
-					{
-						orderStatus: "COMPLETE", //已完成
-					},
-					{
-						orderStatus: "CANCELLED", //已取消
-					},
-					{
-						orderStatus: "STAY_PICKED_UP", //待自提
-					},
-				],
-				cancelShow: false, //是否显示取消
-				orderSn: "", //ordersn
-				reason: "", //取消原因
-				cancelList: [], //取消列表
-				rogShow: false, //显示是否收货
-			};
-		},
+<script setup lang="ts">
+import { ref, reactive, computed, watch, getCurrentInstance } from 'vue'
+import { onLoad, onShow, onPullDownRefresh, onBackPress } from '@dcloudio/uni-app'
+import { useStore } from '@/store'
+import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
+import { getOrderList, cancelOrder, confirmReceipt } from '@/api/order.js'
+import { getClearReason } from '@/api/after-sale.js'
+import LiLiWXPay from '@/js_sdk/lili-pay/wx-pay.js'
+import {
+	unitPrice,
+	parseGoodsImageUrl,
+	tipsToLogin,
+	orderStatusList,
+} from '@/utils/filters.js'
 
-		/**
-		 * 跳转到个人中心
-		 */
-		onBackPress(e) {
-			if (e.from == "backbutton") {
-				uni.switchTab({
-					url: "/pages/tabbar/user/my",
-				});
-				return true; //阻止默认返回行为
-			}
-		},
-		onPullDownRefresh() {
-			if (this.tabCurrentIndex) {
-				this.initData(this.tabCurrentIndex);
-			} else {
-				this.initData(0);
-			}
-			// this.loadData(this.status);
-		},
-		onShow() {
-			if (this.tipsToLogin()) {
-				if (!this.tabCurrentIndex) {
-					this.initData(0);
-				}
-			}
-			// this.loadData(this.status);
-		},
+const store = useStore()
+const { proxy } = getCurrentInstance()!
+const lightColor = computed(() => store.getters.lightColor)
+const mainColor = computed(() => store.getters.mainColor)
 
-		onLoad(options) {
-			/**
-			 * 修复app端点击除全部订单外的按钮进入时不加载数据的问题
-			 * 替换onLoad下代码即可
-			 */
-			let status = Number(options.status);
-			this.status = status;
+interface NavTabItem {
+	state: number
+	text: string
+	loadStatus: string
+	orderList: any[]
+	pageNumber: number
+	loaded?: boolean
+}
 
-			this.tabCurrentIndex = status;
-			// if (status == 0) {
-			//   this.loadData(status);
-			// }
-		},
+const tabCurrentIndex = ref(0)
+const navList = reactive<NavTabItem[]>([
+	{ state: 0, text: '全部', loadStatus: 'more', orderList: [], pageNumber: 1 },
+	{ state: 1, text: '待付款', loadStatus: 'more', orderList: [], pageNumber: 1 },
+	{ state: 2, text: '待发货', loadStatus: 'more', orderList: [], pageNumber: 1 },
+	{ state: 3, text: '待收货', loadStatus: 'more', orderList: [], pageNumber: 1 },
+	{ state: 4, text: '已完成', loadStatus: 'more', orderList: [], pageNumber: 1 },
+	{ state: 5, text: '已取消', loadStatus: 'more', orderList: [], pageNumber: 1 },
+])
 
-		watch: {
-			/**监听更改请求数据 */
-			tabCurrentIndex(val) {
-				this.params.tag = this.orderStatus[val].orderStatus;
-				//切换标签页将所有的页数都重置为1
-				this.navList.forEach((res) => {
-					res.pageNumber = 1;
-					res.loadStatus = "more";
-					res.orderList = [];
-				});
-				this.loadData(val);
-			},
-		},
-		methods: {
-			// 售后
-			applyService(order) {
-				uni.navigateTo({
-					url: `/pages/order/afterSales/afterSales?orderSn=${order.sn}`,
-				});
-			},
+const status = ref<number>(0)
+const params = reactive({
+	pageNumber: 1,
+	pageSize: 10,
+	tag: 'ALL',
+})
 
-			// 店铺详情
-			navigateToStore(val) {
-				uni.navigateTo({
-					url: "/pages/product/shopPage?id=" + val.storeId,
-				});
-			},
-			renderOrderTag(orderPromotionType) {
-				switch (orderPromotionType) {
-					case "NORMAL":
-						return "";
-					case "PINTUAN":
-						return "拼团订单";
-						break;
-					case "GIFT":
-						return "赠品订单";
-						break;
-					case "POINTS":
-						return "积分订单";
-						break;
-					case "KANJIA":
-						return "砍价订单";
-					default:
-						return "";
-				}
-			},
-			renderOrderTagType(orderPromotionType) {
-				switch (orderPromotionType) {
-					case "PINTUAN":
-						return "error";
-					case "GIFT":
-						return "primary";
-					case "POINTS":
-						return "info";
-					case "KANJIA":
-						return "warning";
-					default:
-						return "info";
-				}
-			},
-			getOrderItemImage(goods, order, index) {
-				let image = goods.image;
-				if (!image && order.groupImages) {
-					const images = String(order.groupImages).split(",");
-					image = images[index] || images[0];
-				}
-				return this.parseGoodsImageUrl(image);
-			},
-			/**
-			 * 取消订单
-			 */
-			onCancel(sn) {
-				this.orderSn = sn;
-				this.cancelShow = true;
-				uni.showLoading({
-					title: "加载中",
-				});
-				getClearReason().then((res) => {
-					if (res.data.result.length >= 1) {
-						this.cancelList = res.data.result;
-					}
-					if (this.$store.state.isShowToast) {
-						uni.hideLoading()
-					};
-				});
-			},
+const orderStatus = [
+	{ orderStatus: 'ALL' },
+	{ orderStatus: 'WAIT_PAY' },
+	{ orderStatus: 'WAIT_SHIP' },
+	{ orderStatus: 'WAIT_ROG' },
+	{ orderStatus: 'COMPLETE' },
+	{ orderStatus: 'CANCELLED' },
+	{ orderStatus: 'STAY_PICKED_UP' },
+]
 
-			/**
-			 * 初始化数据
-			 */
-			initData(index) {
-				this.navList[index].pageNumber = 1;
-				this.navList[index].loadStatus = "more";
-				this.navList[index].orderList = [];
-				this.loadData(index);
-			},
+const cancelShow = ref(false)
+const orderSn = ref('')
+const reason = ref('')
+const cancelList = ref<any[]>([])
+const rogShow = ref(false)
 
-			/**
-			 * 等待支付
-			 */
-			waitPay(val) {
-				this.$u.debounce(this.pay(val), 3000);
-			},
+function hideLoadingIfNeeded() {
+	if (store.state.isShowToast) uni.hideLoading()
+}
 
-			/**
-			 * 支付
-			 */
-			pay(val) {
-				if (val.sn) {
-					// #ifdef MP-WEIXIN
-					new LiLiWXPay({
-						sn: val.sn,
-						price: val.flowPrice,
-						orderType: "ORDER",
-					}).pay();
-					// #endif
-					// #ifndef MP-WEIXIN
-					uni.navigateTo({
-						url: "/pages/cart/payment/payOrder?order_sn=" + val.sn,
-					});
-					// #endif
-				}
-			},
+onBackPress((e) => {
+	if (e.from == 'backbutton') {
+		uni.switchTab({ url: '/pages/tabbar/user/my' })
+		return true
+	}
+	return false
+})
 
-			/**
-			 * 获取订单列表
-			 */
-			loadData(index) {
-				this.params.pageNumber = this.navList[index].pageNumber;
-				// this.params.tag = this.orderStatus[index].orderStatus;
-				getOrderList(this.params).then((res) => {
-					uni.stopPullDownRefresh();
-					if (!res.data.success) {
-						this.navList[index].loadStatus = "noMore";
-						return false;
-					}
-					let orderList = res.data.result.records;
-					if (orderList.length == 0) {
-						this.navList[index].loadStatus = "noMore";
-					} else if (orderList.length < 10) {
-						this.navList[index].loadStatus = "noMore";
-					}
-					if (orderList.length > 0) {
-						this.navList[index].orderList =
-							this.navList[index].orderList.concat(orderList);
-						this.navList[index].pageNumber += 1;
-					}
-				});
-			},
-			//swiper 切换监听
-			changeTab(e) {
-				this.tabCurrentIndex = e.target.current;
-			},
-			//顶部tab点击
-			tabClick(index) {
-				this.tabCurrentIndex = index;
-			},
-			//删除订单
-			deleteOrder(index) {
-				uni.showLoading({
-					title: "请稍后",
-				});
-				setTimeout(() => {
-					this.navList[this.tabCurrentIndex].orderList.splice(index, 1);
-					if (this.$store.state.isShowToast) {
-						uni.hideLoading()
-					};
-				}, 600);
-			},
-			//取消订单
-			cancelOrder(item) {
-				uni.showLoading({
-					title: "请稍后",
-				});
-				setTimeout(() => {
-					let {
-						stateTip,
-						stateTipColor
-					} = this.orderStateExp(9);
-					item = Object.assign(item, {
-						state: 9,
-						stateTip,
-						stateTipColor,
-					});
+onPullDownRefresh(() => {
+	if (tabCurrentIndex.value) {
+		initData(tabCurrentIndex.value)
+	} else {
+		initData(0)
+	}
+})
 
-					//取消订单后删除待付款中该项
-					let list = this.navList[1].orderList;
-					let index = list.findIndex((val) => val.id === item.id);
-					index !== -1 && list.splice(index, 1);
-					if (this.$store.state.isShowToast) {
-						uni.hideLoading()
-					};
-				}, 600);
-			},
+onShow(() => {
+	if (tipsToLogin()) {
+		if (!tabCurrentIndex.value) {
+			initData(0)
+		}
+	}
+})
 
-			//订单状态文字和颜色
-			orderStateExp(state) {
-				let stateTip = "",
-					stateTipColor = this.$lightColor;
-				switch (+state) {
-					case 1:
-						stateTip = "待付款";
-						break;
-					case 2:
-						stateTip = "待发货";
-						break;
-					case 9:
-						stateTip = "订单已关闭";
-						stateTipColor = "#909399";
-						break;
+onLoad((options) => {
+	const statusNum = Number(options?.status)
+	status.value = statusNum
+	tabCurrentIndex.value = statusNum
+})
 
-						//更多自定义
-				}
-				return {
-					stateTip,
-					stateTipColor,
-				};
-			},
+watch(tabCurrentIndex, (val) => {
+	params.tag = orderStatus[val].orderStatus
+	navList.forEach((res) => {
+		res.pageNumber = 1
+		res.loadStatus = 'more'
+		res.orderList = []
+	})
+	loadData(val)
+})
 
-			/**
-			 * 跳转到订单详情
-			 */
-			navigateToOrderDetail(sn) {
-				uni.navigateTo({
-					url: "./orderDetail?sn=" + sn,
-				});
-			},
+function applyService(order: any) {
+	uni.navigateTo({
+		url: `/pages/order/afterSales/afterSales?orderSn=${order.sn}`,
+	})
+}
 
-			/**
-			 * 选择取消原因
-			 */
-			reasonChange(reason) {
-				this.reason = reason;
-			},
+function navigateToStore(val: any) {
+	uni.navigateTo({
+		url: '/pages/product/shopPage?id=' + val.storeId,
+	})
+}
 
-			/**
-			 * 提交取消订单（未付款）
-			 */
-			submitCancel() {
-				cancelOrder(this.orderSn, {
-					reason: this.reason
-				}).then((res) => {
-					if (res.data.success) {
-						uni.showToast({
-							title: "订单已取消",
-							duration: 2000,
-							icon: "none",
-						});
-						this.initData(this.tabCurrentIndex);
+function renderOrderTag(orderPromotionType: string) {
+	switch (orderPromotionType) {
+		case 'NORMAL':
+			return ''
+		case 'PINTUAN':
+			return '拼团订单'
+		case 'GIFT':
+			return '赠品订单'
+		case 'POINTS':
+			return '积分订单'
+		case 'KANJIA':
+			return '砍价订单'
+		default:
+			return ''
+	}
+}
 
-						this.cancelShow = false;
-					} else {
-						uni.showToast({
-							title: res.data.message,
-							duration: 2000,
-							icon: "none",
-						});
-						this.cancelShow = false;
-					}
-				});
-			},
+function renderOrderTagType(orderPromotionType: string) {
+	switch (orderPromotionType) {
+		case 'PINTUAN':
+			return 'error'
+		case 'GIFT':
+			return 'primary'
+		case 'POINTS':
+			return 'info'
+		case 'KANJIA':
+			return 'warning'
+		default:
+			return 'info'
+	}
+}
 
-			/**
-			 * 确认收货显示
-			 */
-			onRog(sn) {
-				this.orderSn = sn;
-				this.rogShow = true;
-			},
+function getOrderItemImage(goods: any, order: any, index: number) {
+	let image = goods.image
+	if (!image && order.groupImages) {
+		const images = String(order.groupImages).split(',')
+		image = images[index] || images[0]
+	}
+	return parseGoodsImageUrl(image)
+}
 
-			/**
-			 * 点击确认收货
-			 */
-			confirmRog() {
-				confirmReceipt(this.orderSn).then((res) => {
-					if (res.data.code == 200) {
-						uni.showToast({
-							title: "已确认收货",
-							duration: 2000,
-							icon: "none",
-						});
-						this.initData(this.tabCurrentIndex);
-						this.rogShow = false;
-					}
-				});
-			},
+function onCancel(sn: string) {
+	orderSn.value = sn
+	cancelShow.value = true
+	uni.showLoading({ title: '加载中' })
+	getClearReason().then((res) => {
+		if (res.data.result.length >= 1) {
+			cancelList.value = res.data.result
+		}
+		hideLoadingIfNeeded()
+	})
+}
 
-			/**
-			 * 评价商品
-			 */
-			onComment(sn) {
-				uni.navigateTo({
-					url: "./evaluate/myEvaluate",
-				});
-			},
+function initData(index: number) {
+	navList[index].pageNumber = 1
+	navList[index].loadStatus = 'more'
+	navList[index].orderList = []
+	loadData(index)
+}
 
-			/**
-			 * 重新购买
-			 */
-			reBuy(order) {
-				console.log(order);
-				return;
-				uni.navigateTo({
-					url: "/pages/product/goods?id=" + order.id + "&goodsId=" + order.goodsId,
-				});
-			},
-		},
-	};
+function waitPay(val: any) {
+	proxy?.$u?.debounce?.(() => pay(val), 3000, true)?.()
+}
+
+function pay(val: any) {
+	if (val.sn) {
+		// #ifdef MP-WEIXIN
+		new LiLiWXPay({
+			sn: val.sn,
+			price: val.flowPrice,
+			orderType: 'ORDER',
+		}).pay()
+		// #endif
+		// #ifndef MP-WEIXIN
+		uni.navigateTo({
+			url: '/pages/cart/payment/payOrder?order_sn=' + val.sn,
+		})
+		// #endif
+	}
+}
+
+function loadData(index: number) {
+	params.pageNumber = navList[index].pageNumber
+	getOrderList(params).then((res) => {
+		uni.stopPullDownRefresh()
+		if (!res.data.success) {
+			navList[index].loadStatus = 'noMore'
+			return false
+		}
+		const records = res.data.result.records
+		if (records.length == 0) {
+			navList[index].loadStatus = 'noMore'
+		} else if (records.length < 10) {
+			navList[index].loadStatus = 'noMore'
+		}
+		if (records.length > 0) {
+			navList[index].orderList = navList[index].orderList.concat(records)
+			navList[index].pageNumber += 1
+		}
+	})
+}
+
+function changeTab(e: any) {
+	tabCurrentIndex.value = e.target.current
+}
+
+function tabClick(index: number) {
+	tabCurrentIndex.value = index
+}
+
+function deleteOrder(index: number) {
+	uni.showLoading({ title: '请稍后' })
+	setTimeout(() => {
+		navList[tabCurrentIndex.value].orderList.splice(index, 1)
+		hideLoadingIfNeeded()
+	}, 600)
+}
+
+function cancelOrderLocal(item: any) {
+	uni.showLoading({ title: '请稍后' })
+	setTimeout(() => {
+		const { stateTip, stateTipColor } = orderStateExp(9)
+		Object.assign(item, {
+			state: 9,
+			stateTip,
+			stateTipColor,
+		})
+		const list = navList[1].orderList
+		const idx = list.findIndex((val) => val.id === item.id)
+		if (idx !== -1) list.splice(idx, 1)
+		hideLoadingIfNeeded()
+	}, 600)
+}
+
+function orderStateExp(state: number) {
+	let stateTip = ''
+	let stateTipColor = lightColor.value
+	switch (+state) {
+		case 1:
+			stateTip = '待付款'
+			break
+		case 2:
+			stateTip = '待发货'
+			break
+		case 9:
+			stateTip = '订单已关闭'
+			stateTipColor = '#909399'
+			break
+	}
+	return { stateTip, stateTipColor }
+}
+
+function navigateToOrderDetail(sn: string) {
+	uni.navigateTo({
+		url: './orderDetail?sn=' + sn,
+	})
+}
+
+function reasonChange(val: string) {
+	reason.value = val
+}
+
+function submitCancel() {
+	cancelOrder(orderSn.value, { reason: reason.value }).then((res) => {
+		if (res.data.success) {
+			uni.showToast({
+				title: '订单已取消',
+				duration: 2000,
+				icon: 'none',
+			})
+			initData(tabCurrentIndex.value)
+			cancelShow.value = false
+		} else {
+			uni.showToast({
+				title: res.data.message,
+				duration: 2000,
+				icon: 'none',
+			})
+			cancelShow.value = false
+		}
+	})
+}
+
+function onRog(sn: string) {
+	orderSn.value = sn
+	rogShow.value = true
+}
+
+function confirmRog() {
+	confirmReceipt(orderSn.value).then((res) => {
+		if (res.data.code == 200) {
+			uni.showToast({
+				title: '已确认收货',
+				duration: 2000,
+				icon: 'none',
+			})
+			initData(tabCurrentIndex.value)
+			rogShow.value = false
+		}
+	})
+}
+
+function onComment(_sn: string) {
+	uni.navigateTo({
+		url: './evaluate/myEvaluate',
+	})
+}
+
+function reBuy(order: any) {
+	const goods = order.orderItems?.[0]
+	if (!goods) return
+	uni.navigateTo({
+		url: '/pages/product/goods?id=' + goods.id + '&goodsId=' + goods.goodsId,
+	})
+}
 </script>
 
 <style lang="scss" scoped>

pages/order/orderDetail.vue

@@ -51,7 +51,7 @@
             <view class="title">自提点地址:</view>
             <view class="value address-line-height">{{ order.storeAddressPath }}</view>
           </view>
-          <view class="order-info-view" @click="callPhone" >
+          <view class="order-info-view" @click="handleCallPhone" >
             <view class="title">联系方式:</view>
             <view class="value">{{ order.storeAddressMobile }}<u-icon name='phone-fill' ></u-icon></view>
           </view>
@@ -245,287 +245,258 @@
   </view>
 </template>
 
-<script>
-import { getExpress, getPackage } from "@/api/trade.js";
-import { cancelOrder, confirmReceipt, getOrderDetail } from "@/api/order.js";
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import { useStore } from '@/store'
+import { getExpress, getPackage } from '@/api/trade.js'
+import { cancelOrder, confirmReceipt, getOrderDetail } from '@/api/order.js'
+import shares from '@/components/m-share/index'
+import { getClearReason } from '@/api/after-sale.js'
+import {
+	unitPrice,
+	secrecyMobile,
+	setClipboard,
+	talkIm,
+	callPhone,
+} from '@/utils/filters.js'
 
-import shares from "@/components/m-share/index"; //分享
+const store = useStore()
+const lightColor = computed(() => store.getters.lightColor)
+const mainColor = computed(() => store.getters.mainColor)
 
-import { getClearReason } from "@/api/after-sale.js";
+const orderStatusMap: Record<string, { title: string; value?: string }> = {
+	UNPAID: { title: '未付款', value: '商品暂未付款' },
+	PAID: { title: '已付款', value: '买家已付款' },
+	UNDELIVERED: { title: '待发货', value: '商品等待发货中' },
+	PARTS_DELIVERED: { title: '部分发货', value: '商品已部分发货。' },
+	DELIVERED: { title: '已发货', value: '商品已发货,请您耐心等待' },
+	CANCELLED: { title: '已取消', value: '订单已取消' },
+	COMPLETED: { title: '已完成', value: '订单已完成,祝您生活愉快' },
+	STAY_PICKED_UP: { title: '待自提', value: '商品正在等待提取' },
+	TAKE: { title: '待核验' },
+}
 
-export default {
-  components: {
-    shares,
-  },
-  data() {
-    return {
-      lightColor: this.$lightColor,
-      logisticsList: "", //物流信息
-      shareFlag: false, //拼团分享开关
-      orderStatusMap: {
-        UNPAID: {
-          title: "未付款",
-          value: "商品暂未付款",
-        },
-        PAID: {
-          title: "已付款",
-          value: "买家已付款",
-        },
-        UNDELIVERED: {
-          title: "待发货",
-          value: "商品等待发货中",
-        },
-        PARTS_DELIVERED: {
-          title: "部分发货",
-          value: "商品已部分发货。",
-        },
-        DELIVERED: {
-          title: "已发货",
-          value: "商品已发货,请您耐心等待",
-        },
-        CANCELLED: {
-          title: "已取消",
-          value: "订单已取消",
-        },
-        COMPLETED: {
-          title: "已完成",
-          value: "订单已完成,祝您生活愉快",
-        },
-        STAY_PICKED_UP: {
-          title: "待自提",
-          value: "商品正在等待提取",
-        },
-        TAKE: {
-          title: "待核验",
-        },
-      },
-      order: {},
-      cancelShow: false, //取消订单
-      orderSn: "",
-      orderGoodsList: "", //订单中商品集合
-      orderDetail: "", //订单详情信息
-      sn: "",
-      cancelList: "",
-      rogShow: false,
-      reason: "",
-	  orderPackage:"",
-    };
-  },
-  onLoad(options) {
-    this.loadData(options.sn);
-    this.sn = options.sn;
-  },
-  methods: {
-	//获取包裹
-	async getOrderPackage() {
-		getPackage(this.order.sn).then(res => {
-			if (res.data.success) {
-				this.orderPackage = res.data.result
-			}
-		})
-	},
-	handleClickDeliver(){
-		uni.navigateTo({
-			url: `/pages/order/deliverDetail?order_sn=${this.order.sn}`,
-		});
-	},
-	// 退款状态枚举
-	refundPriceList(status) {
-		switch (status) {
-		case 'ALL_REFUND':
-		  return "全部退款";
-		case 'PART_REFUND':
-		  return "部分退款";
-		case 'NO_REFUND':
-		  return "未退款";
-		case 'REFUNDING':
-		  return "退款中";
-		default:
-			return "";
+const logisticsList = ref<any>('')
+const shareFlag = ref(false)
+const order = ref<Record<string, any>>({})
+const cancelShow = ref(false)
+const orderSn = ref('')
+const orderGoodsList = ref<any[]>([])
+const orderDetail = ref<Record<string, any>>({})
+const sn = ref('')
+const cancelList = ref<any[]>([])
+const rogShow = ref(false)
+const reason = ref('')
+const orderPackage = ref<any>('')
+
+function hideLoadingIfNeeded() {
+	if (store.state.isShowToast) uni.hideLoading()
+}
+
+onLoad((options) => {
+	const orderSnParam = options?.sn || ''
+	sn.value = orderSnParam
+	loadData(orderSnParam)
+})
+
+function getOrderPackage() {
+	getPackage(order.value.sn).then((res) => {
+		if (res.data.success) {
+			orderPackage.value = res.data.result
 		}
-	},
-    callPhone(){
-      this.callPhone(this.order.storeAddressMobile )
-    },
-    //联系客服
-    contact(storeId){
-      this.talkIm(storeId)
-    },
-    goToShopPage(val) {
-      uni.navigateTo({
-        url: "/pages/product/shopPage?id=" + val.storeId,
-      });
-    },
-    // 获取物流信息
-    loadLogistics(sn) {
-      getExpress(sn).then((res) => {
-        this.logisticsList = res.data.result;
-      });
-    },
+	})
+}
 
-    // 分享当前拼团信息
-    inviteGroup() {
-      this.shareFlag = true;
-    },
-    // #TODO 这块需要写一下 目前没有拼团的详细信息
-    ByUserMessage(order) {
-      uni.navigateTo({
-        url:
-          "/pages/cart/payment/shareOrderGoods?sn=" +
-          order.sn +
-          "&sku=" +
-          this.orderGoodsList[0].skuId +
-          "&goodsId=" +
-          this.orderGoodsList[0].goodsId,
-      });
-    },
-    async 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.order.deliveryMethod === 'LOGISTICS') {
-          this.loadLogistics(sn);
-		  this.getOrderPackage();
-        }
-         if (this.$store.state.isShowToast){ uni.hideLoading() };
-      });
+function handleClickDeliver() {
+	uni.navigateTo({
+		url: `/pages/order/deliverDetail?order_sn=${order.value.sn}`,
+	})
+}
 
-    },
-    onReceipt(val) {
-      uni.navigateTo({
-        url: "/pages/order/invoice/invoiceDetail?id=" + val.id,
-      });
-    },
-    gotoGoodsDetail(sku) {
-      uni.navigateTo({
-        url: `/pages/product/goods?id=${sku.skuId}&goodsId=${sku.goodsId}`,
-      });
-    },
-    onCopy(sn) {
-      setClipboard(sn)
-    },
+function refundPriceList(status: string) {
+	switch (status) {
+		case 'ALL_REFUND':
+			return '全部退款'
+		case 'PART_REFUND':
+			return '部分退款'
+		case 'NO_REFUND':
+			return '未退款'
+		case 'REFUNDING':
+			return '退款中'
+		default:
+			return ''
+	}
+}
 
-    //售后按钮
-    onAfterSales(sn, sku) {
-      uni.navigateTo({
-        url: `./afterSales/afterSalesSelect?sn=${sn}&sku=${encodeURIComponent(
-          JSON.stringify(sku)
-        )}`,
-      });
-    },
-    // 去支付
-    toPay(val) {
-      val.sn
-        ? uni.navigateTo({
-          url: "/pages/cart/payment/payOrder?order_sn=" + val.sn,
-        })
-        : false;
-    }, //删除订单
-    deleteOrder(index) {
-      uni.showLoading({
-        title: "请稍后",
-      });
-      setTimeout(() => {
-        this.navList[this.tabCurrentIndex].orderList.splice(index, 1);
-         if (this.$store.state.isShowToast){ uni.hideLoading() };
-      }, 600);
-    },
-    //取消订单
-    onCancel(sn) {
-      this.orderSn = sn;
+function handleCallPhone() {
+	if (order.value.storeAddressMobile) {
+		callPhone(order.value.storeAddressMobile)
+	}
+}
 
-      uni.showLoading({
-        title: "加载中",
-      });
-      getClearReason().then((res) => {
-        if (res.data.result.length >= 1) {
-          this.cancelList = res.data.result;
-        }
-         if (this.$store.state.isShowToast){ uni.hideLoading() };
-      });
+function contact(storeId: string) {
+	talkIm(storeId)
+}
 
-      this.cancelShow = true;
-    },
+function goToShopPage(val: any) {
+	uni.navigateTo({
+		url: '/pages/product/shopPage?id=' + val.storeId,
+	})
+}
 
-    //提交取消订单（未付款）
-    submitCancel() {
-      cancelOrder(this.orderSn, { reason: this.reason }).then((res) => {
-        if (res.data.success) {
-          uni.showToast({
-            title: "已取消",
-            duration: 2000,
-            icon: "none",
-          });
-          this.cancelShow = false;
-          setTimeout(() => {
-            uni.reLaunch({
-              url: "/pages/order/myOrder?status=0",
-            });
-          }, 500);
-        } else {
-          uni.showToast({
-            title: res.data.message,
-            duration: 2000,
-            icon: "none",
-          });
-          this.cancelShow = false;
-        }
-      });
-    },
+function loadLogistics(orderSnParam: string) {
+	getExpress(orderSnParam).then((res) => {
+		logisticsList.value = res.data.result
+	})
+}
 
-    //确认收货
-    onRog(sn) {
-      this.orderSn = sn;
-      this.rogShow = true;
-    },
-    confirmRog() {
-      confirmReceipt(this.orderSn).then((res) => {
-        if (res.data.success) {
-          uni.showToast({
-            title: "已确认收货",
-            duration: 2000,
-            icon: "none",
-          });
-          this.rogShow = false;
-          this.loadData(this.sn);
-        }
-      });
-    },
-    //评价商品
-    onComment(sn) {
-      uni.navigateTo({
-        url: "./evaluate/myEvaluate",
-      });
-    }, //查看物流
-    onLogistics(order) {
-      uni.navigateTo({
-        url:
-          "/pages/mine/msgTips/packageMsg/logisticsDetail?logi_id=" +
-          order.logi_id +
-          "&ship_no=" +
-          order.ship_no +
-          "&order_sn=" +
-          order.sn,
-      });
-    },
+function inviteGroup() {
+	shareFlag.value = true
+}
 
-    //选择取消原因
-    reasonChange(reason) {
-      this.reason = reason;
-    },
-    reBuy(order) {
-      uni.navigateTo({
-        url:
-          "/pages/product/goods?id=" + order.id + "&goodsId=" + order.goodsId,
-      });
-    },
-  },
-};
+function ByUserMessage(orderItem: any) {
+	uni.navigateTo({
+		url:
+			'/pages/cart/payment/shareOrderGoods?sn=' +
+			orderItem.sn +
+			'&sku=' +
+			orderGoodsList.value[0].skuId +
+			'&goodsId=' +
+			orderGoodsList.value[0].goodsId,
+	})
+}
+
+function loadData(orderSnParam: string) {
+	uni.showLoading({ title: '加载中' })
+	getOrderDetail(orderSnParam).then((res) => {
+		const result = res.data.result
+		order.value = result.order
+		orderGoodsList.value = result.orderItems
+		orderDetail.value = result
+		if (order.value.deliveryMethod === 'LOGISTICS') {
+			loadLogistics(orderSnParam)
+			getOrderPackage()
+		}
+		hideLoadingIfNeeded()
+	})
+}
+
+function onReceipt(val: any) {
+	uni.navigateTo({
+		url: '/pages/order/invoice/invoiceDetail?id=' + val.id,
+	})
+}
+
+function gotoGoodsDetail(sku: any) {
+	uni.navigateTo({
+		url: `/pages/product/goods?id=${sku.skuId}&goodsId=${sku.goodsId}`,
+	})
+}
+
+function onCopy(orderSnText: string) {
+	setClipboard(orderSnText)
+}
+
+function onAfterSales(orderSnText: string, sku: any) {
+	uni.navigateTo({
+		url: `./afterSales/afterSalesSelect?sn=${orderSnText}&sku=${encodeURIComponent(
+			JSON.stringify(sku)
+		)}`,
+	})
+}
+
+function toPay(val: any) {
+	if (val.sn) {
+		uni.navigateTo({
+			url: '/pages/cart/payment/payOrder?order_sn=' + val.sn,
+		})
+	}
+}
+
+function onCancel(orderSnText: string) {
+	orderSn.value = orderSnText
+	uni.showLoading({ title: '加载中' })
+	getClearReason().then((res) => {
+		if (res.data.result.length >= 1) {
+			cancelList.value = res.data.result
+		}
+		hideLoadingIfNeeded()
+	})
+	cancelShow.value = true
+}
+
+function submitCancel() {
+	cancelOrder(orderSn.value, { reason: reason.value }).then((res) => {
+		if (res.data.success) {
+			uni.showToast({
+				title: '已取消',
+				duration: 2000,
+				icon: 'none',
+			})
+			cancelShow.value = false
+			setTimeout(() => {
+				uni.reLaunch({
+					url: '/pages/order/myOrder?status=0',
+				})
+			}, 500)
+		} else {
+			uni.showToast({
+				title: res.data.message,
+				duration: 2000,
+				icon: 'none',
+			})
+			cancelShow.value = false
+		}
+	})
+}
+
+function onRog(orderSnText: string) {
+	orderSn.value = orderSnText
+	rogShow.value = true
+}
+
+function confirmRog() {
+	confirmReceipt(orderSn.value).then((res) => {
+		if (res.data.success) {
+			uni.showToast({
+				title: '已确认收货',
+				duration: 2000,
+				icon: 'none',
+			})
+			rogShow.value = false
+			loadData(sn.value)
+		}
+	})
+}
+
+function onComment(_orderSnText: string) {
+	uni.navigateTo({
+		url: './evaluate/myEvaluate',
+	})
+}
+
+function onLogistics(orderItem: any) {
+	uni.navigateTo({
+		url:
+			'/pages/mine/msgTips/packageMsg/logisticsDetail?logi_id=' +
+			orderItem.logi_id +
+			'&ship_no=' +
+			orderItem.ship_no +
+			'&order_sn=' +
+			orderItem.sn,
+	})
+}
+
+function reasonChange(val: string) {
+	reason.value = val
+}
+
+function reBuy(orderItem: any) {
+	uni.navigateTo({
+		url: '/pages/product/goods?id=' + orderItem.id + '&goodsId=' + orderItem.goodsId,
+	})
+}
 </script>
 
 <style lang="scss">