refactor(after-sales): 删除独立售后页面并整合至订单列表

- 删除 afterSales.vue 独立页面，将售后入口统一至 myOrder 页面
- 修改售后相关页面跳转路径为 /pages/order/myOrder?status=5
- 重构 applySuccess 页面，增加微信订阅消息授权与视觉优化
- 重构预存款明细页面，增加收支筛选与日志解析功能
- 新增 store 端 API 基础地址配置

pages/order/afterSales/afterSales.vue

@@ -1,585 +0,0 @@
-<template>
-  <view :style="themeStyle" class="content">
-    <view class="u-tabs-box">
-      <u-tabs
-        :list="list"
-        :scrollable="false"
-        v-model:current="current"
-        @change="change"
-        :lineColor="lightColor"
-        :activeStyle="{ color: lightColor }"
-      ></u-tabs>
-    </view>
-    <div class="u-tabs-search">
-      <u-search
-        placeholder="请输入订单编号/商品名称/售后单号"
-        @search="submitSearchOrderList(current)"
-        @clear="clear(current)"
-        @custom="submitSearchOrderList(current)"
-        v-model="keywords"
-      >
-      </u-search>
-    </div>
-    <scroll-view class="body-view" scroll-y @scrolltolower="renderDate">
-      <view
-        class="seller-view"
-        v-for="(order, orderIndex) in orderList"
-        :key="orderIndex"
-      >
-        <!-- 店铺名称 -->
-        <view class="seller-info" v-if="current == 0">
-          <view class="seller-name wes">{{ order.storeName }}</view>
-          <view class="order-sn wes">订单编号:{{ order.sn }}</view>
-        </view>
-        <!-- 申请记录 选项卡 -->
-        <view class="seller-info" v-if="current != 0">
-          <view class="order-sn wes">售后单号：{{ order.service_sn || order.sn }}</view>
-          <view class="order-sn service-type">{{ order.serviceType_text }}</view>
-        </view>
-        <view v-for="(sku, goodsIndex) in order.orderItems" :key="goodsIndex">
-          <view class="goods-item-view" @click="onDetail(order, sku)">
-            <view class="goods-img">
-              <u-image
-                border-radius="6"
-                width="131rpx"
-                height="131rpx"
-                mode="aspectFill"
-                :src="getGoodsImage(sku, order, goodsIndex)"
-              ></u-image>
-            </view>
-            <view class="goods-info">
-              <view class="goods-title">{{ getGoodsName(sku) }}</view>
-              <!-- 如果商品多个则不显示每个商品价格-->
-              <view class="goods-price" v-if="order.orderItems.length <= 1">
-                ￥{{ unitPrice(order.flowPrice) }}
-              </view>
-            </view>
-            <view class="goods-num">
-              <view>x{{ sku.num }}</view>
-            </view>
-          </view>
-          <view class="description">
-            <!-- 售后申请  -->
-            <view v-if="current === 0 && sku.afterSaleStatus">
-              <view
-                v-if="sku.afterSaleStatus.includes('ALREADY_APPLIED')"
-                class="cannot_apply not_center"
-              >
-                <u-icon class="icon" name="info-circle-fill"></u-icon>
-                该商品已申请售后服务
-              </view>
-            </view>
-            <view v-if="current === 0 && sku.afterSaleStatus">
-              <view
-                v-if="sku.afterSaleStatus.includes('EXPIRED')"
-                class="cannot_apply not_center"
-                @click="tipsShow = true"
-              >
-                <u-icon class="icon" name="info-circle-fill"></u-icon>
-                该商品无法申请售后
-              </view>
-            </view>
-
-            <div v-if="current === 1 || current === 2">
-              <!-- 申请中 -->
-              <view
-                class="cannot_apply not_center"
-                v-if="order.serviceType == 'RETURN_GOODS'"
-              >
-                退货处理-{{serviceStatusList(order.serviceStatus) }}</view
-              >
-              <view
-                class="cannot_apply not_center"
-                v-if="order.serviceType == 'SUPPLY_AGAIN_GOODS'"
-              >
-                补发商品-{{serviceStatusList(order.serviceStatus) }}</view
-              >
-              <view
-                class="cannot_apply not_center"
-                v-if="order.serviceType == 'RETURN_MONEY'"
-              >
-                退款-{{serviceStatusList(order.serviceStatus) }}</view
-              >
-              <view
-                class="cannot_apply not_center"
-                v-if="order.serviceType == 'EXCHANGE_GOODS'"
-              >
-                换货-{{serviceStatusList(order.serviceStatus) }}</view
-              >
-              <view
-                class="cannot_apply not_center"
-                v-if="order.serviceType == 'CANCEL'"
-              >
-                取消订单-{{serviceStatusList(order.serviceStatus) }}</view
-              >
-            </div>
-
-            <!-- 申请记录 -->
-          </view>
-          <view class="btn-view">
-            <!-- 售后申请  -->
-
-            <div class="sale" v-if="current === 0 && sku.afterSaleStatus && !isECouponOrder(order.orderType)">
-              <div
-                v-if="
-									order.flowPrice != 0 &&
-                  sku.afterSaleStatus.includes('NOT_APPLIED') ||
-                  sku.afterSaleStatus.includes('PART_AFTER_SALE')
-                "
-                @click="applyService(sku.sn, order, sku)"
-              >
-                <view class="default-btn border"> 申请售后 </view>
-              </div>
-            </div>
-            <view class="after-line">
-              <!-- 申请中 -->
-              <view
-                class="default-btn border"
-                v-if="
-                  current === 2 &&
-                  order.serviceStatus &&
-                  order.serviceStatus == 'PASS' &&
-                  order.serviceType != 'RETURN_MONEY'
-                "
-                @click="onExpress(order, sku)"
-              >
-                提交物流
-              </view>
-              <view
-                @click="close(order, sku)"
-                v-if="current === 1"
-                class="default-btn close"
-              >
-                取消售后
-              </view>
-              <view
-                @click="afterDetails(order, sku)"
-                v-if="current === 1 || current === 2"
-                class="default-btn border"
-              >
-                售后详情
-              </view>
-            </view>
-          </view>
-        </view>
-        <view
-          v-if="
-            current === 0 &&
-            order.groupAfterSaleStatus &&
-            order.groupAfterSaleStatus != 'ALREADY_APPLIED' &&
-            order.orderItems.length >= 1
-          "
-          class="btn-view order-total"
-        >
-          <!-- 多个商品显示订单总价格 -->
-          <view class="cannot_apply">
-            订单总金额:<span class="countMoney"
-              >￥{{unitPrice(order.flowPrice) }}</span
-            >
-          </view>
-        </view>
-      </view>
-      <u-loadmore bg-color="#f8f8f8" :status="status" />
-    </scroll-view>
-    <u-modal
-      show-cancel-button
-      @confirm="closeService"
-      v-model:show="cancelShow"
-      content="确认取消售后"
-    ></u-modal>
-    <u-modal
-      v-model:show="tipsShow"
-      content="当订单未确认收货|已过售后服务有效期|已申请售后服务时，不能申请售后"
-    ></u-modal>
-  </view>
-</template>
-
-<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'
-// E_COUPON 订单列表不展示「申请售后」入口（FR-B-04）
-import { isECouponOrder } from '@/utils/goodsType.js'
-import { getAfterSaleList, cancelAfterSale } from '@/api/after-sale.js'
-import { getOrderList } from '@/api/order.js'
-import storage from '@/utils/storage'
-import { getThemeStyle } from '@/utils/theme'
-
-const store = useStore()
-const themeStyle = computed(() => getThemeStyle(store.state.theme))
-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 = [
-        {
-          image: item.goodsImage,
-          skuId: item.skuId,
-          name: item.goodsName,
-          num: item.num,
-          price: item.flowPrice,
-        },
-      ]
-    })
-    orderList.value = orderList.value.concat(afterSaleLogList)
-    status.value = afterSaleLogList.length < 10 ? 'nomore' : 'loading'
-  })
-}
-
-function applyService(sn: string, order: any, sku: any) {
-  storage.setAfterSaleData({ ...order, ...sku })
-  uni.navigateTo({ url: `/pages/order/afterSales/afterSalesSelect?sn=${sn}` })
-}
-
-function onExpress(order: any, sku: any) {
-  sku.storeName = order.storeName
-  storage.setAfterSaleData({ ...order, ...sku })
-  uni.navigateTo({ url: `./afterSalesDetailExpress?serviceSn=${order.sn}` })
-}
-
-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}`,
-    })
-  }
-}
-
-function renderDate() {
-  if (current.value === 0) {
-    params.pageNumber += 1
-    fetchOrderList()
-  } else {
-    logParams.pageNumber += 1
-    fetchAfterSaleLogList()
-  }
-}
-</script>
-
-<style lang="scss">
-page,
-.content {
-  background: $page-color-base;
-  height: 100%;
-}
-
-.body-view {
-  overflow-y: auto;
-  height: calc(100vh - 44px - 80rpx - 104rpx);
-  padding: 0 20rpx;
-  box-sizing: border-box;
-}
-
-.u-tabs-search {
-  padding: 20rpx;
-  background: #fff;
-}
-
-.countMoney {
-  margin-left: 7rpx;
-  color: $main-color;
-  font-size: 28rpx;
-}
-
-.seller-view {
-  background-color: #fff;
-  margin: 20rpx 0;
-  padding: 0 20rpx 24rpx;
-  border-radius: 20rpx;
-
-  .seller-info {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    min-height: 70rpx;
-    padding: 20rpx 0 16rpx;
-    gap: 20rpx;
-
-    .seller-name {
-      flex-shrink: 0;
-      max-width: 40%;
-      font-size: 28rpx;
-      font-weight: 600;
-      color: #333;
-    }
-
-    .order-sn {
-      flex: 1;
-      min-width: 0;
-      font-size: 22rpx;
-      color: #909399;
-      text-align: right;
-    }
-
-    .service-type {
-      flex-shrink: 0;
-      text-align: right;
-    }
-  }
-
-  .goods-item-view {
-    display: flex;
-    flex-direction: row;
-    align-items: flex-start;
-    padding: 16rpx 0;
-
-    .goods-img {
-      flex-shrink: 0;
-      width: 131rpx;
-      height: 131rpx;
-      border-radius: 6rpx;
-      overflow: hidden;
-    }
-
-    .goods-info {
-      flex: 1;
-      min-width: 0;
-      padding: 0 20rpx;
-
-      .goods-title {
-        margin-bottom: 10rpx;
-        color: #333333;
-        font-size: 26rpx;
-        line-height: 1.4;
-        display: -webkit-box;
-        -webkit-box-orient: vertical;
-        -webkit-line-clamp: 2;
-        overflow: hidden;
-        word-break: break-all;
-      }
-
-      .goods-specs {
-        font-size: 24rpx;
-        margin-bottom: 10rpx;
-        color: #cccccc;
-      }
-
-      .goods-price {
-        font-size: 28rpx;
-        color: #ff5a10;
-      }
-    }
-
-    .goods-num {
-      flex-shrink: 0;
-      min-width: 60rpx;
-      text-align: right;
-      color: $main-color;
-      font-size: 26rpx;
-      line-height: 1.4;
-    }
-  }
-
-  .btn-view {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: flex-end;
-    padding: 16rpx 0 0;
-
-    .after-line {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      gap: 15rpx;
-    }
-  }
-
-  .order-total {
-    justify-content: flex-start;
-    padding-top: 8rpx;
-    padding-bottom: 4rpx;
-
-    .cannot_apply {
-      text-align: left;
-      height: auto;
-      line-height: 1.5;
-    }
-  }
-}
-
-.description {
-  color: #909399;
-  size: 25rpx;
-}
-
-.cannot_apply {
-  text-align: center;
-  font-size: 22rpx;
-
-  color: #999999;
-  height: 70rpx;
-  line-height: 70rpx;
-}
-.not_center {
-  text-align: left;
-}
-
-.icon {
-  margin-right: 10rpx;
-}
-
-.sale {
-  width: 100%;
-  display: flex;
-  justify-content: flex-end;
-}
-
-.default-btn {
-  background-color: #ffffff;
-  margin-left: 15rpx;
-  height: 60rpx;
-  line-height: 60rpx;
-  text-align: center;
-  font-size: 24rpx;
-  padding: 0 24rpx;
-  border-radius: 200px;
-}
-
-.close {
-  color: $light-color;
-}
-
-.border {
-  border: 2rpx solid $light-color;
-  color: $light-color;
-}
-</style>

pages/order/afterSales/afterSalesDetailExpress.vue

@@ -158,7 +158,7 @@ function onSubmit() {
         title: '提交成功',
         type: 'success',
         back: true,
-        url: '/pages/order/afterSales/afterSales',
+        url: '/pages/order/myOrder?status=5',
       })
     }
   })

pages/order/afterSales/applySuccess.vue

@@ -1,80 +1,275 @@
 <template>
-  <view :style="themeStyle">
-    <view class="header">
-      <u-icon name='checkmark' size="150" color="#ff6b35"></u-icon>
-      <view class="success-text">售后申请提交成功</view>
-      <view class="btn-view">
-        <view class="btn-item">
-          <u-button ripple class="btn1" shape="circle" @click="navigateToAfterSales()">查看记录</u-button>
+  <view :style="themeStyle" class="apply-success-page">
+    <u-navbar
+      title="提交成功"
+      :border="false"
+      :fixed="true"
+      :placeholder="true"
+      :auto-back="false"
+      @leftClick="handleBack"
+    ></u-navbar>
+
+    <view class="page-body">
+      <!-- 核心状态卡片 -->
+      <view class="result-card">
+        <view class="icon-halo">
+          <view class="icon-circle">
+            <u-icon name="checkmark" size="52rpx" color="#ffffff"></u-icon>
+          </view>
         </view>
-        <view class="btn-item">
-          <u-button ripple class="btn2" shape="circle" @click="navigateToHome()">回到主页</u-button>
+
+        <view class="success-title">售后申请提交成功</view>
+        <view class="success-sub">商家将尽快为您审核处理，请留意消息通知</view>
+
+        <view class="btn-group">
+          <view class="action-btn btn-outline" @click="navigateToHome()">
+            回到主页
+          </view>
+          <view class="action-btn btn-primary" @click="navigateToAfterSales()">
+            查看记录
+          </view>
+        </view>
+      </view>
+
+      <!-- 温馨提示卡片 -->
+      <view class="tips-card">
+        <view class="tips-header">
+          <view class="tips-bar"></view>
+          <text class="tips-title">温馨提示</text>
+        </view>
+        <view class="tips-list">
+          <view class="tip-item">
+            <view class="tip-dot"></view>
+            <text class="tip-text">商品寄回地址将在商家审核通过后，在「我的订单 - 售后」详情中展示。</text>
+          </view>
+          <view class="tip-item">
+            <view class="tip-dot"></view>
+            <text class="tip-text">提交服务单后，售后专员可能与您电话沟通，请保持手机畅通。</text>
+          </view>
+          <view class="tip-item">
+            <view class="tip-dot"></view>
+            <text class="tip-text">售后处理完成后，退款金额将原路退回至您的原支付账户中。</text>
+          </view>
         </view>
       </view>
-    </view>
-    <view class="text-view">
-      <view style="display: flex; margin-bottom: 20rpx; align-items: center">温馨提示：</view>
-      <view>• 商品寄回地址将在审核通过后在申请记录中查询。</view>
-      <view>• 提交服务单后，售后专员可能与您电话沟通，请保持手机畅通。</view>
-      <view>• 退货处理成功后退款金额将原路返回到您的支持账户中；</view>
     </view>
   </view>
 </template>
 
-<script setup lang="ts">import { computed } from 'vue'
+<script setup lang="ts">
+import { computed } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
 import { useStore } from '@/store'
 import { getThemeStyle } from '@/utils/theme'
+import {
+  prefetchMpMessageTemplates,
+  subscribeMpMessageByScenes,
+} from '@/js_sdk/lili-pay/wx-pay.js'
+
 const store = useStore()
 const themeStyle = computed(() => getThemeStyle(store.state.theme))
 
+onLoad(() => {
+  // #ifdef MP-WEIXIN
+  prefetchMpMessageTemplates()
+  // #endif
+})
+
+function handleBack() {
+  const doBack = () => {
+    uni.navigateBack({
+      fail: () => {
+        uni.redirectTo({
+          url: '/pages/order/myOrder?status=5',
+        })
+      },
+    })
+  }
+  // #ifdef MP-WEIXIN
+  subscribeMpMessageByScenes(['AFTER_SALE_AUDIT'], doBack)
+  // #endif
+  // #ifndef MP-WEIXIN
+  doBack()
+  // #endif
+}
+
 function navigateToAfterSales() {
-  uni.redirectTo({
-    url: '/pages/order/afterSales/afterSales',
-  })
+  const goAfterSales = () => {
+    uni.redirectTo({
+      url: '/pages/order/myOrder?status=5',
+    })
+  }
+  // #ifdef MP-WEIXIN
+  subscribeMpMessageByScenes(['AFTER_SALE_AUDIT'], goAfterSales)
+  // #endif
+  // #ifndef MP-WEIXIN
+  goAfterSales()
+  // #endif
 }
 
 function navigateToHome() {
-  uni.switchTab({
-    url: '/pages/tabbar/home/index',
-  })
+  const goHome = () => {
+    uni.switchTab({
+      url: '/pages/tabbar/home/index',
+    })
+  }
+  // #ifdef MP-WEIXIN
+  subscribeMpMessageByScenes(['AFTER_SALE_AUDIT'], goHome)
+  // #endif
+  // #ifndef MP-WEIXIN
+  goHome()
+  // #endif
 }
 </script>
 
 <style lang="scss" scoped>
-page {
-  background: $page-color-base;
-  padding-bottom: 100rpx;
+.apply-success-page {
+  min-height: 100vh;
+  background: #f5f6fa;
+  box-sizing: border-box;
 }
-.btn1 {
-  background: $light-color;
-  color: #fff;
+
+.page-body {
+  padding: 28rpx 24rpx 60rpx;
 }
-.btn2 {
-  color: $light-color;
-}
-.header {
-  background-color: #fff;
-  height: 500rpx;
+
+.result-card {
+  background: #ffffff;
+  border-radius: 24rpx;
+  padding: 64rpx 40rpx 52rpx;
   display: flex;
   flex-direction: column;
   align-items: center;
+  box-shadow: 0 4rpx 20rpx rgba(17, 30, 79, 0.04);
+}
+
+.icon-halo {
+  width: 140rpx;
+  height: 140rpx;
+  border-radius: 50%;
+  background: rgba(255, 107, 53, 0.12);
+  display: flex;
+  align-items: center;
   justify-content: center;
-  .success-text {
-    font-size: 40rpx;
-    font-weight: 400;
-    margin: 20rpx 0;
-  }
-  .btn-view {
-    display: flex;
-    flex-direction: row;
-    margin: 40rpx 0rpx;
-    .btn-item {
-      margin: 0rpx 20rpx;
-    }
+}
+
+.icon-circle {
+  width: 104rpx;
+  height: 104rpx;
+  border-radius: 50%;
+  background: linear-gradient(135deg, $main-color 0%, $light-color 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 8rpx 20rpx rgba(229, 50, 56, 0.25);
+}
+
+.success-title {
+  margin-top: 32rpx;
+  font-size: 36rpx;
+  font-weight: 700;
+  color: #1d2129;
+  letter-spacing: 0.5rpx;
+}
+
+.success-sub {
+  margin-top: 12rpx;
+  font-size: 25rpx;
+  color: #86909c;
+  text-align: center;
+}
+
+.btn-group {
+  margin-top: 48rpx;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: 24rpx;
+}
+
+.action-btn {
+  flex: 1;
+  height: 82rpx;
+  line-height: 82rpx;
+  border-radius: 999rpx;
+  font-size: 28rpx;
+  font-weight: 600;
+  text-align: center;
+  box-sizing: border-box;
+  transition: opacity 0.15s;
+
+  &:active {
+    opacity: 0.85;
   }
 }
-.text-view {
-  margin: 40rpx;
-  color: #909399;
+
+.btn-primary {
+  background: linear-gradient(135deg, $main-color 0%, $light-color 100%);
+  color: #ffffff;
+  box-shadow: 0 6rpx 16rpx rgba(229, 50, 56, 0.22);
+}
+
+.btn-outline {
+  background: #fff6f3;
+  color: $main-color;
+  border: 2rpx solid rgba(229, 50, 56, 0.28);
+}
+
+.tips-card {
+  margin-top: 24rpx;
+  background: #ffffff;
+  border-radius: 24rpx;
+  padding: 32rpx 32rpx 36rpx;
+  box-shadow: 0 4rpx 20rpx rgba(17, 30, 79, 0.03);
+}
+
+.tips-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20rpx;
+}
+
+.tips-bar {
+  width: 6rpx;
+  height: 26rpx;
+  border-radius: 4rpx;
+  background: linear-gradient(180deg, $main-color 0%, $light-color 100%);
+  margin-right: 14rpx;
+}
+
+.tips-title {
+  font-size: 28rpx;
+  font-weight: 600;
+  color: #1d2129;
+}
+
+.tips-list {
+  display: flex;
+  flex-direction: column;
+  gap: 16rpx;
+}
+
+.tip-item {
+  display: flex;
+  align-items: flex-start;
+}
+
+.tip-dot {
+  flex-shrink: 0;
+  width: 10rpx;
+  height: 10rpx;
+  border-radius: 50%;
+  background: #c9cdd4;
+  margin-top: 14rpx;
+  margin-right: 16rpx;
+}
+
+.tip-text {
+  flex: 1;
+  font-size: 25rpx;
+  line-height: 1.65;
+  color: #4e5969;
 }
 </style>

pages/order/myOrder.vue

@@ -38,6 +38,8 @@
 							<view class="btn-view u-flex u-row-between">
 								<view class="description">{{ afterSaleTypeText(order.serviceType) }}</view>
 								<view class="goods-btn flex flex-a-c">
+									<view class="cancel-btn" v-if="order.serviceStatus === 'APPLY'" @click="onCancelAfterSale(order)">取消售后</view>
+									<view class="pay-btn" v-if="order.serviceStatus === 'PASS' && order.serviceType !== 'RETURN_MONEY'" @click="onAfterSaleExpress(order)">提交物流</view>
 									<view class="pay-btn" @click="openOrder(order)">售后详情</view>
 								</view>
 							</view>
@@ -131,6 +133,8 @@
 		<u-toast ref="uToast" />
 		<u-modal :confirm-color="lightColor" v-model:show="rogShow" :show-cancel-button="true" :content="'是否确认收货?'"
 			@confirm="confirmRog"></u-modal>
+		<u-modal :confirm-color="lightColor" v-model:show="cancelAfterSaleShow" :show-cancel-button="true" content="确认取消售后?"
+			@confirm="confirmCancelAfterSale"></u-modal>
 	</view>
 </template>
 
@@ -141,7 +145,8 @@ import { useStore } from '@/store'
 import { getThemeStyle } from '@/utils/theme'
 import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
 import { getOrderList, cancelOrder, confirmReceipt } from '@/api/order.js'
-import { getClearReason, getAfterSaleList } from '@/api/after-sale.js'
+import { getClearReason, getAfterSaleList, cancelAfterSale } from '@/api/after-sale.js'
+import storage from '@/utils/storage'
 import LiLiWXPay from '@/js_sdk/lili-pay/wx-pay.js'
 import {
 	unitPrice,
@@ -200,6 +205,8 @@ const orderSn = ref('')
 const reason = ref('')
 const cancelList = ref<any[]>([])
 const rogShow = ref(false)
+const cancelAfterSaleShow = ref(false)
+const pendingAfterSaleSn = ref('')
 
 function hideLoadingIfNeeded() {
 	if (store.state.isShowToast) uni.hideLoading()
@@ -418,6 +425,30 @@ function openOrder(order: any) {
 	navigateToOrderDetail(order.sn)
 }
 
+function onCancelAfterSale(order: any) {
+	pendingAfterSaleSn.value = order?.serviceSn || order?.sn || ''
+	cancelAfterSaleShow.value = true
+}
+
+async function confirmCancelAfterSale() {
+	if (!pendingAfterSaleSn.value) return
+	uni.showLoading({ title: '加载中' })
+	const res = await cancelAfterSale(pendingAfterSaleSn.value)
+	hideLoadingIfNeeded()
+	if (res?.data?.success) {
+		uni.showToast({ title: '取消成功!', duration: 2000, icon: 'none' })
+		initData(tabCurrentIndex.value)
+	}
+}
+
+function onAfterSaleExpress(order: any) {
+	const sku = (order?.orderItems && order.orderItems[0]) || {}
+	storage.setAfterSaleData({ ...order, ...sku, storeName: order.storeName })
+	uni.navigateTo({
+		url: `./afterSales/afterSalesDetailExpress?serviceSn=${order.serviceSn || order.sn}`,
+	})
+}
+
 function changeTab(e: any) {
 	// H5 的 swiper change 把下标放在 detail.current。
 	// 读 target.current 会得到 undefined，选中态被清掉，列表就停在「全部」。