✨ 售后列表、详情：完成

pages/order/aftersale/detail.vue

@@ -3,26 +3,22 @@
 	<s-layout title="售后详情" :navbar="!isEmpty(state.info) && state.loading ? 'inner' : 'normal'">
 		<view class="content_box" v-if="!isEmpty(state.info) && state.loading">
 			<!-- 步骤条 -->
-			<!-- 这个没找到替换方案 -->
 			<view class="steps-box ss-flex" :style="[
           {
             marginTop: '-' + Number(statusBarHeight + 88) + 'rpx',
             paddingTop: Number(statusBarHeight + 88) + 'rpx',
           },
         ]">
-				<!-- <uni-steps :options="state.list" :active="state.active" active-color="#fff" /> -->
 				<view class="ss-flex">
 					<view class="steps-item" v-for="(item, index) in state.list" :key="index">
 						<view class="ss-flex">
-							<text class="sicon-circleclose" v-if="
-                  (state.list.length - 1 == index && state.info.aftersale_status === -2) ||
-                  (state.list.length - 1 == index && state.info.aftersale_status === -1)
-                "></text>
+							<text class="sicon-circleclose"
+                    v-if="state.list.length - 1 === index && [61, 62, 63].includes(state.info.status)" />
 							<text class="sicon-circlecheck" v-else
-								:class="state.active >= index ? 'activity-color' : 'info-color'"></text>
+                    :class="state.active >= index ? 'activity-color' : 'info-color'" />
 
-							<view v-if="state.list.length - 1 != index" class="line"
-								:class="state.active >= index ? 'activity-bg' : 'info-bg'"></view>
+							<view v-if="state.list.length - 1 !== index" class="line"
+                    :class="state.active >= index ? 'activity-bg' : 'info-bg'" />
 						</view>
 						<view class="steps-item-title" :class="state.active >= index ? 'activity-color' : 'info-color'">
 							{{ item.title }}
@@ -32,28 +28,33 @@
 			</view>
 
 			<!-- 服务状态 -->
-			<!-- 			<view class="status-box ss-flex ss-col-center ss-row-between ss-m-x-20"
-				@tap="sheep.$router.go('/pages/order/aftersale/log', { id: state.aftersaleId })">
+			<view class="status-box ss-flex ss-col-center ss-row-between ss-m-x-20"
+            @tap="sheep.$router.go('/pages/order/aftersale/log', { id: state.id })">
 				<view class="">
-					<view class="status-text">{{ state.info.aftersale_status_desc }}</view>
-					<view class="status-time">{{ state.info.update_time }}</view>
+					<view class="status-text">
+            {{ formatAfterSaleStatusDescription(state.info) }}
+          </view>
+					<view class="status-time">
+            {{ sheep.$helper.timeFormat(state.info.updateTime, 'yyyy-mm-dd hh:MM:ss') }}
+          </view>
 				</view>
-				<text class="ss-iconfont _icon-forward" style="color: #666"></text>
-			</view> -->
+				<text class="ss-iconfont _icon-forward" style="color: #666" />
+			</view>
 
 			<!-- 退款金额 -->
 			<view class="aftersale-money ss-flex ss-col-center ss-row-between">
 				<view class="aftersale-money--title">退款总额</view>
-				<view class="aftersale-money--num">￥{{ state.info.refundPrice/100 }}</view>
+				<view class="aftersale-money--num">￥{{ fen2yuan(state.info.refundPrice) }}</view>
 			</view>
 			<!-- 服务商品 -->
 			<view class="order-shop">
-				<!-- 		<s-goods-item :title="state.info.goods_title" :price="state.info.goods_price"
-					:img="state.info.goods_image" priceColor="#333333" :titleWidth="480"
-					:skuText="state.info.goods_sku_text" :num="state.info.goods_num"></s-goods-item> -->
-				<s-goods-item :img=" state.info.picUrl" :title=" state.info.spuName" priceColor="#333333"
-					:titleWidth="480" :skuText=" state.info.properties.reduce((a,b)=>a+b.valueName+' ','')"
-					:price=" state.info.refundPrice/100" :num=" state.info.count"></s-goods-item>
+				<s-goods-item
+          :img=" state.info.picUrl"
+          :title=" state.info.spuName"
+					:titleWidth="480"
+          :skuText="state.info.properties.map((property) => property.valueName).join(' ')"
+          :num=" state.info.count"
+        />
 			</view>
 
 			<!-- 服务内容 -->
@@ -71,7 +72,7 @@
 				</view>
 				<view class="aftersale-item ss-flex ss-col-center">
 					<view class="item-title">售后类型：</view>
-					<view class="item-content">{{ status2[state.info.way] }}</view>
+					<view class="item-content">{{ state.info.way === 10 ? '仅退款' : '退款退货' }}</view>
 				</view>
 				<view class="aftersale-item ss-flex ss-col-center">
 					<view class="item-title">申请原因：</view>
@@ -83,114 +84,97 @@
 				</view>
 			</view>
 		</view>
+
+    <!-- 操作区 -->
 		<s-empty v-if="isEmpty(state.info) && state.loading" icon="/static/order-empty.png" text="暂无该订单售后详情" />
-		<!-- 		<su-fixed bottom placeholder bg="bg-white" v-if="!isEmpty(state.info)">
+		<su-fixed bottom placeholder bg="bg-white" v-if="!isEmpty(state.info)">
 			<view class="foot_box">
-				<button class="ss-reset-button btn" v-if="state.info.btns?.includes('cancel')"
-					@tap="onApply(state.info.id)">取消申请</button>
-				<button class="ss-reset-button btn" v-if="state.info.btns?.includes('delete')"
-					@tap="onDelete(state.info.id)">删除</button>
-				<button class="ss-reset-button contcat-btn btn"
-					@tap="sheep.$router.go('/pages/chat/index')">联系客服</button>
+				<!-- TODO 功能缺失：填写退货信息 -->
+        <button class="ss-reset-button btn" v-if="state.info.buttons?.includes('cancel')"
+                @tap="onApply(state.info.id)">
+          取消申请
+        </button>
+				<button class="ss-reset-button contcat-btn btn" @tap="sheep.$router.go('/pages/chat/index')">
+          联系客服
+        </button>
 			</view>
-		</su-fixed> -->
+		</su-fixed>
 	</s-layout>
 </template>
 
 <script setup>
 	import sheep from '@/sheep';
-	import {
-		onLoad
-	} from '@dcloudio/uni-app';
-	import {
-		reactive
-	} from 'vue';
-	import {
-		isEmpty
-	} from 'lodash';
+	import { onLoad } from '@dcloudio/uni-app';
+	import { reactive } from 'vue';
+	import { isEmpty } from 'lodash';
+  import { fen2yuan, formatAfterSaleStatusDescription, handleAfterSaleButtons } from '@/sheep/hooks/useGoods';
+  import AfterSaleApi from '@/sheep/api/trade/afterSale';
 
 	const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
 	const headerBg = sheep.$url.css('/static/img/shop/order/order_bg.png');
 	const state = reactive({
-		active: 0,
-		aftersaleId: 0,
-		info: {},
-		list: [{
-				title: '提交申请',
-			},
-			{
-				title: '处理中',
-			},
-		],
+    id: 0, // 售后编号
+    info: {}, // 收货信息
 		loading: false,
+    active: 0, // 在 list 的激活位置
+    list: [{
+      title: '提交申请',
+    }, {
+      title: '处理中',
+    }, {
+      title: '完成'
+    }], // 时间轴
 	});
 
-	const status2 = {
-		10: '仅退款',
-		20: '退货退款'
-	}
-
-	function onApply(orderId) {
+	function onApply(id) {
 		uni.showModal({
 			title: '提示',
 			content: '确定要取消此申请吗？',
 			success: async function(res) {
-				if (res.confirm) {
-					const {
-						error
-					} = await sheep.$api.order.aftersale.cancel(orderId);
-					if (error === 0) {
-						getDetail(state.aftersaleId);
-					}
+				if (!res.confirm) {
+					return;
 				}
+        const { code } = await AfterSaleApi.cancelAfterSale(id);
+        if (code === 0) {
+          await getDetail(id);
+        }
 			},
 		});
 	}
 
-	function onDelete(orderId) {
-		uni.showModal({
-			title: '提示',
-			content: '确定要删除吗？',
-			success: async function(res) {
-				if (res.confirm) {
-					const {
-						error
-					} = await sheep.$api.order.aftersale.delete(orderId);
-					if (error === 0) {
-						sheep.$router.back();
-					}
-				}
-			},
-		});
-	}
-	const onCopy = () => {
-		sheep.$helper.copyText(state.info.aftersale_sn);
+  // 复制
+  const onCopy = () => {
+		sheep.$helper.copyText(state.info.no);
 	};
+
 	async function getDetail(id) {
-		const {
-			code,
-			data
-		} = await sheep.$api.order.aftersale.detail(id);
-		state.loading = true;
-		if (code === 0) {
-			state.info = data;
-			if (state.info.aftersale_status === -2 || state.info.aftersale_status === -1) {
-				state.list.push({
-					title: state.info.aftersale_status_text
-				});
-				state.active = 2;
-			} else {
-				state.list.push({
-					title: '完成'
-				});
-				state.active = state.info.aftersale_status;
-			}
-		} else {
-			state.info = null;
-		}
+    state.loading = true;
+    const { code, data } = await AfterSaleApi.getAfterSale(id);
+    if (code !== 0) {
+      state.info = null;
+      return;
+    }
+    state.info = data;
+    handleAfterSaleButtons(state.info);
+
+    // 处理时间轴
+    if ([10].includes(state.info.status)) {
+      state.active = 0;
+    } else if ([20, 30].includes(state.info.status)) {
+      state.active = 1;
+    } else if ([40, 50].includes(state.info.status)) {
+      state.active = 2;
+    } else if ([61, 62, 63].includes(state.info.status)) {
+      state.active = 2;
+    }
 	}
+
 	onLoad((options) => {
-		state.aftersaleId = options.id;
+    if (!options.id) {
+      sheep.$helper.toast(`缺少订单信息，请检查`);
+      return
+    }
+		state.id = options.id;
 		getDetail(options.id);
 	});
 </script>

pages/order/aftersale/list.vue

@@ -3,92 +3,73 @@
 	<s-layout title="售后列表">
 		<!-- tab -->
 		<su-sticky bgColor="#fff">
-			<su-tabs :list="tabMaps" :scrollable="false" @change="onTabsChange" :current="state.currentTab"></su-tabs>
+			<su-tabs :list="tabMaps" :scrollable="false" @change="onTabsChange" :current="state.currentTab" />
 		</su-sticky>
-		<s-empty v-if="state.pagination.total === 0" icon="/static/data-empty.png" text="暂无数据">
-		</s-empty>
+		<s-empty v-if="state.pagination.total === 0" icon="/static/data-empty.png" text="暂无数据" />
 		<!-- 列表 -->
 		<view v-if="state.pagination.total > 0">
-			<view class="list-box ss-m-y-20" v-for="order in state.pagination.data" :key="order.id"
+			<view class="list-box ss-m-y-20" v-for="order in state.pagination.list" :key="order.id"
 				@tap="sheep.$router.go('/pages/order/aftersale/detail', { id: order.id })">
 				<view class="order-head ss-flex ss-col-center ss-row-between">
 					<text class="no">服务单号：{{ order.no }}</text>
-					<text class="state">{{ status[order.status] }}</text>
+					<text class="state">{{ formatAfterSaleStatus(order) }}</text>
 				</view>
-				<s-goods-item :img="order.picUrl" :title="order.spuName"
-					:skuText="order.properties.reduce((a,b)=>a+b.valueName+' ','')" :price="order.refundPrice/100"
-					:num="order.count"></s-goods-item>
+				<s-goods-item
+          :img="order.picUrl"
+          :title="order.spuName"
+					:skuText="order.properties.map((property) => property.valueName).join(' ')"
+          :price="order.refundPrice"
+        />
 				<view class="apply-box ss-flex ss-col-center ss-row-between border-bottom ss-p-x-20">
 					<view class="ss-flex ss-col-center">
-						<!-- 此处需修改 -->
-						<view class="title ss-m-r-20">{{ status2[order.way] }}</view>
-						<!-- <view class="value">{{ order.aftersale_status_desc }}</view> -->
-						<view class="value">{{ order.applyReason }}</view>
+						<view class="title ss-m-r-20">{{ order.way === 10 ? '仅退款' : '退款退货' }}</view>
+						 <view class="value">{{ formatAfterSaleStatusDescription(order) }}</view>
 					</view>
 					<text class="_icon-forward"></text>
 				</view>
-				<!-- 				<view class="tool-btn-box ss-flex ss-col-center ss-row-right ss-p-r-20">
+				<view class="tool-btn-box ss-flex ss-col-center ss-row-right ss-p-r-20">
+          <!-- TODO 功能缺失：填写退货信息 -->
 					<view>
 						<button class="ss-reset-button tool-btn" @tap.stop="onApply(order.id)"
-							v-if="order.btns.includes('cancel')">取消申请</button>
+							v-if="order?.buttons.includes('cancel')">取消申请</button>
 					</view>
-					<view>
-						<button class="ss-reset-button tool-btn" @tap.stop="onDelete(order.id)"
-							v-if="order.btns.includes('delete')">删除</button>
-					</view>
-				</view> -->
+				</view>
 			</view>
 		</view>
 		<uni-load-more v-if="state.pagination.total > 0" :status="state.loadStatus" :content-text="{
         contentdown: '上拉加载更多',
-      }" @tap="loadmore" />
+      }" @tap="loadMore" />
 	</s-layout>
 </template>
 
 <script setup>
 	import sheep from '@/sheep';
-	import {
-		onLoad,
-		onReachBottom
-	} from '@dcloudio/uni-app';
-	import {
-		computed,
-		reactive
-	} from 'vue';
+	import { onLoad, onReachBottom } from '@dcloudio/uni-app';
+	import { reactive } from 'vue';
 	import _ from 'lodash';
-
-	const pagination = {
-		data: [],
-		current_page: 1,
-		total: 1,
-		last_page: 1,
+  import { formatAfterSaleStatus, formatAfterSaleStatusDescription, handleAfterSaleButtons } from '@/sheep/hooks/useGoods';
+  import AfterSaleApi from '@/sheep/api/trade/afterSale';
+
+	const paginationNull = {
+		list: [],
+    total: 0,
+    pageNo: 1,
+    pageSize: 10
 	};
+
 	const state = reactive({
 		currentTab: 0,
 		showApply: false,
 		pagination: {
-			data: [],
-			current_page: 1,
-			total: 1,
-			last_page: 1,
+      list: [],
+      total: 0,
+      pageNo: 1,
+      pageSize: 10
 		},
 		loadStatus: '',
 	});
-	// 字典需要登录 尚未接入 先用固定值代替
-	const status = {
-		10: '申请售后',
-		20: '商品待退货',
-		30: '商家待收货',
-		40: '等待退款',
-		50: '退款成功',
-		61: '买家取消',
-		62: '商家拒绝',
-		63: '商家拒收货'
-	}
-	const status2 = {
-		10: '仅退款',
-		20: '退货退款'
-	}
+
+  // TODO 芋艿：优化点，增加筛选
 	const tabMaps = [{
 			name: '全部',
 			value: 'all',
@@ -110,38 +91,29 @@
 		//   value: 'refuse',
 		// },
 	];
+
 	// 切换选项卡
 	function onTabsChange(e) {
-		state.pagination = pagination
+		state.pagination = paginationNull
 		state.currentTab = e.index;
 		getOrderList();
 	}
 
 	// 获取售后列表
-	async function getOrderList(page = 1, list_rows = 5) {
-		pagination.current_page = page;
+	async function getOrderList() {
 		state.loadStatus = 'loading';
-		let res = await sheep.$api.order.aftersale.list({
+		let { data, code } = await sheep.$api.order.aftersale.list({
 			// type: tabMaps[state.currentTab].value,
-			pageSize: list_rows,
-			pageNo: page,
+      pageNo: state.pagination.pageNo,
+      pageSize: state.pagination.pageSize,
 		});
-		console.log(res, '未处理前售后列表数据')
-		if (res.code === 0) {
-			let orderList = _.concat(state.pagination.data, res.data.list);
-
-			state.pagination = {
-				total: res.data.total,
-				...res.data,
-				data: orderList,
-			};
-			console.log(state.pagination, '售后订单数据')
-			// if (state.pagination.current_page < state.pagination.last_page) {
-			state.loadStatus = 'more';
-			// } else {
-			// state.loadStatus = 'noMore';
-			// }
+		if (code !== 0) {
+      return;
 		}
+    data.list.forEach(order => handleAfterSaleButtons(order));
+    state.pagination.list = _.concat(state.pagination.list, data.list);
+    state.pagination.total = data.total;
+    state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
 	}
 
 	function onApply(orderId) {
@@ -149,33 +121,14 @@
 			title: '提示',
 			content: '确定要取消此申请吗？',
 			success: async function(res) {
-				if (res.confirm) {
-					const {
-						error
-					} = await sheep.$api.order.aftersale.cancel(orderId);
-					if (error === 0) {
-						state.pagination = pagination
-						getOrderList();
-					}
-				}
-			},
-		});
-	}
-
-	function onDelete(orderId) {
-		uni.showModal({
-			title: '提示',
-			content: '确定要删除吗？',
-			success: async function(res) {
-				if (res.confirm) {
-					const {
-						error
-					} = await sheep.$api.order.aftersale.delete(orderId);
-					if (error === 0) {
-						state.pagination = pagination
-						getOrderList();
-					}
+				if (!res.confirm) {
+          return;
 				}
+        const { code } = await AfterSaleApi.cancelAfterSale(orderId);
+        if (code === 0) {
+          state.pagination = paginationNull
+          await getOrderList();
+        }
 			},
 		});
 	}
@@ -184,19 +137,21 @@
 		if (options.type) {
 			state.currentTab = options.type;
 		}
-		getOrderList();
+		await getOrderList();
 	});
 
 	// 加载更多
-	function loadmore() {
-		// if (state.loadStatus !== 'noMore') {
-		getOrderList(pagination.current_page + 1);
-		// }
+	function loadMore() {
+    if (state.loadStatus === 'noMore') {
+      return
+    }
+    state.pagination.pageNo++;
+    getOrderList();
 	}
 
 	// 上拉加载更多
 	onReachBottom(() => {
-		loadmore();
+		loadMore();
 	});
 </script>
 

pages/order/detail.vue

@@ -1,568 +1,626 @@
 <!-- 订单详情 -->
 <template>
-	<s-layout title="订单详情" class="index-wrap" navbar="inner">
-		<!-- 订单状态 TODO -->
-		<view class="state-box ss-flex-col ss-col-center ss-row-right" :style="[
+  <s-layout title="订单详情" class="index-wrap" navbar="inner">
+    <!-- 订单状态 TODO -->
+    <view
+      class="state-box ss-flex-col ss-col-center ss-row-right"
+      :style="[
         {
           marginTop: '-' + Number(statusBarHeight + 88) + 'rpx',
           paddingTop: Number(statusBarHeight + 88) + 'rpx',
         },
-      ]">
-			<view class="ss-flex ss-m-t-32 ss-m-b-20">
-				<image v-if="
+      ]"
+    >
+      <view class="ss-flex ss-m-t-32 ss-m-b-20">
+        <image
+          v-if="
             state.orderInfo.status_code == 'unpaid' ||
             state.orderInfo.status === 10 || // 待发货
             state.orderInfo.status_code == 'nocomment'
-          " class="state-img" :src="sheep.$url.static('/static/img/shop/order/order_loading.png')">
-				</image>
-				<image v-if="
+          "
+          class="state-img"
+          :src="sheep.$url.static('/static/img/shop/order/order_loading.png')"
+        >
+        </image>
+        <image
+          v-if="
             state.orderInfo.status_code == 'completed' ||
             state.orderInfo.status_code == 'refund_agree'
-          " class="state-img" :src="sheep.$url.static('/static/img/shop/order/order_success.png')">
-				</image>
-				<image v-if="state.orderInfo.status_code == 'cancel' || state.orderInfo.status_code == 'closed'"
-					class="state-img" :src="sheep.$url.static('/static/img/shop/order/order_close.png')">
-				</image>
-				<image v-if="state.orderInfo.status_code == 'noget'" class="state-img"
-					:src="sheep.$url.static('/static/img/shop/order/order_express.png')">
-				</image>
-				<view class="ss-font-30">{{ formatOrderStatus(state.orderInfo) }}</view>
-			</view>
-			<view class="ss-font-26 ss-m-x-20 ss-m-b-70">{{ formatOrderStatusDescription(state.orderInfo) }}</view>
-		</view>
-
-		<!-- 收货地址 -->
-		<view class="order-address-box" v-if="state.orderInfo.receiverAreaId > 0">
-			<view class="ss-flex ss-col-center">
-				<text class="address-username">
-					{{ state.orderInfo.receiverName }}
-				</text>
-				<text class="address-phone">{{ state.orderInfo.receiverMobile }}</text>
-			</view>
-			<view class="address-detail">
+          "
+          class="state-img"
+          :src="sheep.$url.static('/static/img/shop/order/order_success.png')"
+        >
+        </image>
+        <image
+          v-if="state.orderInfo.status_code == 'cancel' || state.orderInfo.status_code == 'closed'"
+          class="state-img"
+          :src="sheep.$url.static('/static/img/shop/order/order_close.png')"
+        >
+        </image>
+        <image
+          v-if="state.orderInfo.status_code == 'noget'"
+          class="state-img"
+          :src="sheep.$url.static('/static/img/shop/order/order_express.png')"
+        >
+        </image>
+        <view class="ss-font-30">{{ formatOrderStatus(state.orderInfo) }}</view>
+      </view>
+      <view class="ss-font-26 ss-m-x-20 ss-m-b-70">{{
+        formatOrderStatusDescription(state.orderInfo)
+      }}</view>
+    </view>
+
+    <!-- 收货地址 -->
+    <view class="order-address-box" v-if="state.orderInfo.receiverAreaId > 0">
+      <view class="ss-flex ss-col-center">
+        <text class="address-username">
+          {{ state.orderInfo.receiverName }}
+        </text>
+        <text class="address-phone">{{ state.orderInfo.receiverMobile }}</text>
+      </view>
+      <view class="address-detail">
         {{ state.orderInfo.receiverAreaName }} {{ state.orderInfo.receiverDetailAddress }}
       </view>
-		</view>
-
-		<view class="detail-goods" :style="[{ marginTop: state.orderInfo.receiverAreaId > 0 ? '0' : '-40rpx' }]">
-			<!-- 订单信息 TODO 芋艿： -->
-			<view class="order-list" v-for="item in state.orderInfo.items" :key="item.goods_id">
-				<view class="order-card">
-					<s-goods-item
+    </view>
+
+    <view
+      class="detail-goods"
+      :style="[{ marginTop: state.orderInfo.receiverAreaId > 0 ? '0' : '-40rpx' }]"
+    >
+      <!-- 订单信息 TODO 芋艿： -->
+      <view class="order-list" v-for="item in state.orderInfo.items" :key="item.goods_id">
+        <view class="order-card">
+          <s-goods-item
             @tap="onGoodsDetail(item.skuId)"
             :img="item.picUrl"
             :title="item.spuName"
-						:skuText="item.properties.map((property) => property.valueName).join(' ')"
+            :skuText="item.properties.map((property) => property.valueName).join(' ')"
             :price="item.price"
-						:num="item.count"
+            :num="item.count"
           >
-						<template #tool>
-							<view class="ss-flex">
-								<button class="ss-reset-button apply-btn" v-if="[10, 20, 30].includes(state.orderInfo.status) && item.afterSaleStatus === 0"
-									@tap.stop="
+            <template #tool>
+              <view class="ss-flex">
+                <button
+                  class="ss-reset-button apply-btn"
+                  v-if="[10, 20, 30].includes(state.orderInfo.status) && item.afterSaleStatus === 0"
+                  @tap.stop="
                     sheep.$router.go('/pages/order/aftersale/apply', {
                       orderId: state.orderInfo.id,
-                      itemId: item.id
+                      itemId: item.id,
                     })
-                  ">
-									申请售后
-								</button>
-								<button class="ss-reset-button apply-btn" v-if="item.afterSaleStatus === 10"
-									@tap.stop="
+                  "
+                >
+                  申请售后
+                </button>
+                <button
+                  class="ss-reset-button apply-btn"
+                  v-if="item.afterSaleStatus === 10"
+                  @tap.stop="
                     sheep.$router.go('/pages/order/aftersale/detail', {
-                      item: JSON.stringify(item),
+                      id: item.afterSaleId,
                     })
-                  ">
-									退款中
-								</button>
-								<button class="ss-reset-button apply-btn" v-if="item.afterSaleStatus === 20"
-									@tap.stop="
+                  "
+                >
+                  退款中
+                </button>
+                <button
+                  class="ss-reset-button apply-btn"
+                  v-if="item.afterSaleStatus === 20"
+                  @tap.stop="
                     sheep.$router.go('/pages/order/aftersale/detail', {
-                      id: item.ext.aftersale_id,
+                      id: item.afterSaleId,
                     })
-                  ">
-									退款成功
-								</button>
-							</view>
-						</template>
-						<template #priceSuffix>
-							<button class="ss-reset-button tag-btn" v-if="item.status_text">
-								{{ item.status_text }}
-							</button>
-						</template>
-					</s-goods-item>
-				</view>
-			</view>
-		</view>
-
-		<!-- 订单信息 -->
-		<view class="notice-box">
-			<view class="notice-box__content">
-				<view class="notice-item--center">
-					<view class="ss-flex ss-flex-1">
-						<text class="title">订单编号：</text>
-						<text class="detail">{{ state.orderInfo.no }}</text>
-					</view>
-					<button class="ss-reset-button copy-btn" @tap="onCopy">复制</button>
-				</view>
-				<view class="notice-item">
-					<text class="title">下单时间：</text>
-					<text class="detail">
+                  "
+                >
+                  退款成功
+                </button>
+              </view>
+            </template>
+            <template #priceSuffix>
+              <button class="ss-reset-button tag-btn" v-if="item.status_text">
+                {{ item.status_text }}
+              </button>
+            </template>
+          </s-goods-item>
+        </view>
+      </view>
+    </view>
+
+    <!-- 订单信息 -->
+    <view class="notice-box">
+      <view class="notice-box__content">
+        <view class="notice-item--center">
+          <view class="ss-flex ss-flex-1">
+            <text class="title">订单编号：</text>
+            <text class="detail">{{ state.orderInfo.no }}</text>
+          </view>
+          <button class="ss-reset-button copy-btn" @tap="onCopy">复制</button>
+        </view>
+        <view class="notice-item">
+          <text class="title">下单时间：</text>
+          <text class="detail">
             {{ sheep.$helper.timeFormat(state.orderInfo.createTime, 'yyyy-mm-dd hh:MM:ss') }}
           </text>
-				</view>
-				<view class="notice-item" v-if="state.orderInfo.payTime">
-					<text class="title">支付时间：</text>
-					<text class="detail">
+        </view>
+        <view class="notice-item" v-if="state.orderInfo.payTime">
+          <text class="title">支付时间：</text>
+          <text class="detail">
             {{ sheep.$helper.timeFormat(state.orderInfo.payTime, 'yyyy-mm-dd hh:MM:ss') }}
           </text>
-				</view>
-				<view class="notice-item">
-					<text class="title">支付方式：</text>
-					<text class="detail">{{ state.orderInfo.payChannelName || '-' }}</text>
-				</view>
-			</view>
-		</view>
-
-		<!-- 价格信息 -->
-		<view class="order-price-box">
-			<view class="notice-item ss-flex ss-row-between">
-				<text class="title">商品总额</text>
-				<view class="ss-flex">
-					<text class="detail">￥{{ fen2yuan(state.orderInfo.totalPrice) }}</text>
-				</view>
-			</view>
-			<view class="notice-item ss-flex ss-row-between">
-				<text class="title">运费</text>
-				<text class="detail">￥{{ fen2yuan(state.orderInfo.deliveryPrice) }}</text>
-			</view>
+        </view>
+        <view class="notice-item">
+          <text class="title">支付方式：</text>
+          <text class="detail">{{ state.orderInfo.payChannelName || '-' }}</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- 价格信息 -->
+    <view class="order-price-box">
+      <view class="notice-item ss-flex ss-row-between">
+        <text class="title">商品总额</text>
+        <view class="ss-flex">
+          <text class="detail">￥{{ fen2yuan(state.orderInfo.totalPrice) }}</text>
+        </view>
+      </view>
+      <view class="notice-item ss-flex ss-row-between">
+        <text class="title">运费</text>
+        <text class="detail">￥{{ fen2yuan(state.orderInfo.deliveryPrice) }}</text>
+      </view>
       <!-- TODO 芋艿：优惠劵抵扣、积分抵扣 -->
-			<view class="notice-item ss-flex ss-row-between" v-if="state.orderInfo.discountPrice > 0">
-				<text class="title">优惠金额</text>
-				<text class="detail">¥{{ fen2yuan(state.orderInfo.discountPrice) }}</text>
-			</view>
-			<view class="notice-item all-rpice-item ss-flex ss-m-t-20">
-				<text class="title">{{ state.orderInfo.payStatus ? '已付款' : '需付款' }}</text>
-				<text class="detail all-price">￥{{ fen2yuan(state.orderInfo.payPrice) }}</text>
-			</view>
-			<view class="notice-item all-rpice-item ss-flex ss-m-t-20" v-if="state.orderInfo.refundPrice > 0">
-				<text class="title">已退款</text>
-				<text class="detail all-price">￥{{ fen2yuan(state.orderInfo.refundPrice) }}</text>
-			</view>
-		</view>
-
-		<!-- 底部按钮 -->
-		<!-- TODO: 查看物流、等待成团、评价完后返回页面没刷新页面 -->
-		<su-fixed bottom placeholder bg="bg-white" v-if="state.orderInfo.buttons?.length">
-			<view class="footer-box ss-flex ss-col-center ss-row-right">
-				<button class="ss-reset-button cancel-btn" v-if="state.orderInfo.buttons?.includes('cancel')"
-                @tap="onCancel(state.orderInfo.id)">
+      <view class="notice-item ss-flex ss-row-between" v-if="state.orderInfo.discountPrice > 0">
+        <text class="title">优惠金额</text>
+        <text class="detail">¥{{ fen2yuan(state.orderInfo.discountPrice) }}</text>
+      </view>
+      <view class="notice-item all-rpice-item ss-flex ss-m-t-20">
+        <text class="title">{{ state.orderInfo.payStatus ? '已付款' : '需付款' }}</text>
+        <text class="detail all-price">￥{{ fen2yuan(state.orderInfo.payPrice) }}</text>
+      </view>
+      <view
+        class="notice-item all-rpice-item ss-flex ss-m-t-20"
+        v-if="state.orderInfo.refundPrice > 0"
+      >
+        <text class="title">已退款</text>
+        <text class="detail all-price">￥{{ fen2yuan(state.orderInfo.refundPrice) }}</text>
+      </view>
+    </view>
+
+    <!-- 底部按钮 -->
+    <!-- TODO: 查看物流、等待成团、评价完后返回页面没刷新页面 -->
+    <su-fixed bottom placeholder bg="bg-white" v-if="state.orderInfo.buttons?.length">
+      <view class="footer-box ss-flex ss-col-center ss-row-right">
+        <button
+          class="ss-reset-button cancel-btn"
+          v-if="state.orderInfo.buttons?.includes('cancel')"
+          @tap="onCancel(state.orderInfo.id)"
+        >
           取消订单
         </button>
-				<button class="ss-reset-button pay-btn ui-BG-Main-Gradient" v-if="state.orderInfo.buttons?.includes('pay')"
-                @tap="onPay(state.orderInfo.payOrderId)">
+        <button
+          class="ss-reset-button pay-btn ui-BG-Main-Gradient"
+          v-if="state.orderInfo.buttons?.includes('pay')"
+          @tap="onPay(state.orderInfo.payOrderId)"
+        >
           继续支付
         </button>
         <!-- TODO 芋艿：拼团接入 -->
-				<button class="ss-reset-button cancel-btn" v-if="state.orderInfo.buttons?.includes('combination')" @tap="
+        <button
+          class="ss-reset-button cancel-btn"
+          v-if="state.orderInfo.buttons?.includes('combination')"
+          @tap="
             sheep.$router.go('/pages/activity/groupon/detail', {
               id: state.orderInfo.ext.groupon_id,
             })
-          ">
+          "
+        >
           拼团详情
-				</button>
-				<button class="ss-reset-button cancel-btn" v-if="state.orderInfo.buttons?.includes('express')"
-                @tap="onExpress(state.orderInfo.id)">
+        </button>
+        <button
+          class="ss-reset-button cancel-btn"
+          v-if="state.orderInfo.buttons?.includes('express')"
+          @tap="onExpress(state.orderInfo.id)"
+        >
           查看物流
         </button>
-				<button class="ss-reset-button cancel-btn" v-if="state.orderInfo.buttons?.includes('confirm')"
-                @tap="onConfirm(state.orderInfo.id)">
+        <button
+          class="ss-reset-button cancel-btn"
+          v-if="state.orderInfo.buttons?.includes('confirm')"
+          @tap="onConfirm(state.orderInfo.id)"
+        >
           确认收货
         </button>
-				<button class="ss-reset-button cancel-btn" v-if="state.orderInfo.buttons?.includes('comment')"
-                @tap="onComment(state.orderInfo.id, state.orderInfo)">
+        <button
+          class="ss-reset-button cancel-btn"
+          v-if="state.orderInfo.buttons?.includes('comment')"
+          @tap="onComment(state.orderInfo.id, state.orderInfo)"
+        >
           评价
         </button>
-			</view>
-		</su-fixed>
-	</s-layout>
+      </view>
+    </su-fixed>
+  </s-layout>
 </template>
 
 <script setup>
-	import sheep from '@/sheep';
-	import { onLoad } from '@dcloudio/uni-app';
-	import { reactive } from 'vue';
-	import { isEmpty } from 'lodash';
-  import { fen2yuan, formatOrderStatus, formatOrderStatusDescription, handleOrderButtons } from '@/sheep/hooks/useGoods';
+  import sheep from '@/sheep';
+  import { onLoad } from '@dcloudio/uni-app';
+  import { reactive } from 'vue';
+  import { isEmpty } from 'lodash';
+  import {
+    fen2yuan,
+    formatOrderStatus,
+    formatOrderStatusDescription,
+    handleOrderButtons,
+  } from '@/sheep/hooks/useGoods';
   import OrderApi from '@/sheep/api/trade/order';
 
-	const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
-	const headerBg = sheep.$url.css('/static/img/shop/order/order_bg.png');
+  const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
+  const headerBg = sheep.$url.css('/static/img/shop/order/order_bg.png');
 
-	const state = reactive({
-		orderInfo: {},
-		merchantTradeNo: '', // 商户订单号
-		comeinType: '', // 进入订单详情的来源类型
-	});
+  const state = reactive({
+    orderInfo: {},
+    merchantTradeNo: '', // 商户订单号
+    comeinType: '', // 进入订单详情的来源类型
+  });
 
-	// 复制
-	const onCopy = () => {
-		sheep.$helper.copyText(state.orderInfo.sn);
-	};
+  // 复制
+  const onCopy = () => {
+    sheep.$helper.copyText(state.orderInfo.sn);
+  };
 
-	// 去支付
-	function onPay(payOrderId) {
-		sheep.$router.go('/pages/pay/index', {
-			id: payOrderId,
-		});
-	}
+  // 去支付
+  function onPay(payOrderId) {
+    sheep.$router.go('/pages/pay/index', {
+      id: payOrderId,
+    });
+  }
 
   // 查看商品
-	function onGoodsDetail(id) {
-		sheep.$router.go('/pages/goods/index', {
-			id
-		});
-	}
-
-	// 取消订单
-	async function onCancel(orderId) {
-		uni.showModal({
-			title: '提示',
-			content: '确定要取消订单吗?',
-			success: async function(res) {
-				if (!res.confirm) {
-					return;
-				}
+  function onGoodsDetail(id) {
+    sheep.$router.go('/pages/goods/index', {
+      id,
+    });
+  }
+
+  // 取消订单
+  async function onCancel(orderId) {
+    uni.showModal({
+      title: '提示',
+      content: '确定要取消订单吗?',
+      success: async function (res) {
+        if (!res.confirm) {
+          return;
+        }
         const { code } = await OrderApi.cancelOrder(orderId);
         if (code === 0) {
           await getOrderDetail(orderId);
         }
-			},
-		});
-	}
-
-	// 查看物流 TODO 芋艿：待测试
-	async function onExpress(orderId) {
-		sheep.$router.go('/pages/order/express/list', {
-			orderId,
-		});
-	}
-
-	// 确认收货 TODO 芋艿：待测试
-	async function onConfirm(orderId, ignore = false) {
-		// 需开启确认收货组件
-		// todo: 芋艿：待接入微信
-		// 1.怎么检测是否开启了发货组件功能？如果没有开启的话就不能在这里return出去
-		// 2.如果开启了走mpConfirm方法,需要在App.vue的show方法中拿到确认收货结果
-		let isOpenBusinessView = true;
-		if (
-			sheep.$platform.name === 'WechatMiniProgram' &&
-			!isEmpty(state.orderInfo.wechat_extra_data) &&
-			isOpenBusinessView &&
-			!ignore
-		) {
-			mpConfirm(orderId);
-			return;
-		}
-
-		// 正常的确认收货流程
-		const { code } = await OrderApi.receiveOrder(orderId);
-		if (code === 0) {
-			await getOrderDetail(orderId);
-		}
-	}
-
-	// #ifdef MP-WEIXIN
-	// 小程序确认收货组件
-	function mpConfirm(orderId) {
-		if (!wx.openBusinessView) {
-			sheep.$helper.toast(`请升级微信版本`);
-			return;
-		}
-		wx.openBusinessView({
-			businessType: 'weappOrderConfirm',
-			extraData: {
-				merchant_trade_no: state.orderInfo.wechat_extra_data.merchant_trade_no,
-				transaction_id: state.orderInfo.wechat_extra_data.transaction_id,
-			},
-			success(response) {
-				console.log('success:', response);
-				if (response.errMsg === 'openBusinessView:ok') {
-					if (response.extraData.status === 'success') {
-						onConfirm(orderId, true);
-					}
-				}
-			},
-			fail(error) {
-				console.log('error:', error);
-			},
-			complete(result) {
-				console.log('result:', result);
-			},
-		});
-	}
-	// #endif
-
-	// 评价
-	function onComment(orderSN, orderId) {
-		sheep.$router.go('/pages/goods/comment/add', {
-			orderSN,
-			orderId
-		});
-	}
-
-	async function getOrderDetail(id) {
-		// 对详情数据进行适配
-		let res;
-		if (state.comeinType === 'wechat') {
-			res = await sheep.$api.order.detail(id, {
-				merchant_trade_no: state.merchantTradeNo,
-			});
-		} else {
-			res = await sheep.$api.order.detail(id);
-		}
-		if (res.code === 0) {
-			state.orderInfo = res.data;
-      handleOrderButtons(state.orderInfo)
-		} else {
-			sheep.$router.back();
-		}
-	}
-
-	onLoad(async (options) => {
-		let id = 0;
-		if (options.id) {
-			id = options.id;
-		}
+      },
+    });
+  }
+
+  // 查看物流 TODO 芋艿：待测试
+  async function onExpress(orderId) {
+    sheep.$router.go('/pages/order/express/list', {
+      orderId,
+    });
+  }
+
+  // 确认收货 TODO 芋艿：待测试
+  async function onConfirm(orderId, ignore = false) {
+    // 需开启确认收货组件
+    // todo: 芋艿：待接入微信
+    // 1.怎么检测是否开启了发货组件功能？如果没有开启的话就不能在这里return出去
+    // 2.如果开启了走mpConfirm方法,需要在App.vue的show方法中拿到确认收货结果
+    let isOpenBusinessView = true;
+    if (
+      sheep.$platform.name === 'WechatMiniProgram' &&
+      !isEmpty(state.orderInfo.wechat_extra_data) &&
+      isOpenBusinessView &&
+      !ignore
+    ) {
+      mpConfirm(orderId);
+      return;
+    }
+
+    // 正常的确认收货流程
+    const { code } = await OrderApi.receiveOrder(orderId);
+    if (code === 0) {
+      await getOrderDetail(orderId);
+    }
+  }
+
+  // #ifdef MP-WEIXIN
+  // 小程序确认收货组件
+  function mpConfirm(orderId) {
+    if (!wx.openBusinessView) {
+      sheep.$helper.toast(`请升级微信版本`);
+      return;
+    }
+    wx.openBusinessView({
+      businessType: 'weappOrderConfirm',
+      extraData: {
+        merchant_trade_no: state.orderInfo.wechat_extra_data.merchant_trade_no,
+        transaction_id: state.orderInfo.wechat_extra_data.transaction_id,
+      },
+      success(response) {
+        console.log('success:', response);
+        if (response.errMsg === 'openBusinessView:ok') {
+          if (response.extraData.status === 'success') {
+            onConfirm(orderId, true);
+          }
+        }
+      },
+      fail(error) {
+        console.log('error:', error);
+      },
+      complete(result) {
+        console.log('result:', result);
+      },
+    });
+  }
+  // #endif
+
+  // 评价
+  function onComment(orderSN, orderId) {
+    sheep.$router.go('/pages/goods/comment/add', {
+      orderSN,
+      orderId,
+    });
+  }
+
+  async function getOrderDetail(id) {
+    // 对详情数据进行适配
+    let res;
+    if (state.comeinType === 'wechat') {
+      res = await sheep.$api.order.detail(id, {
+        merchant_trade_no: state.merchantTradeNo,
+      });
+    } else {
+      res = await sheep.$api.order.detail(id);
+    }
+    if (res.code === 0) {
+      state.orderInfo = res.data;
+      handleOrderButtons(state.orderInfo);
+    } else {
+      sheep.$router.back();
+    }
+  }
+
+  onLoad(async (options) => {
+    let id = 0;
+    if (options.id) {
+      id = options.id;
+    }
     // TODO 芋艿：下面两个变量，后续接入
-		state.comeinType = options.comein_type;
-		if (state.comeinType === 'wechat') {
-			state.merchantTradeNo = options.merchant_trade_no;
-		}
-		await getOrderDetail(id);
-	});
+    state.comeinType = options.comein_type;
+    if (state.comeinType === 'wechat') {
+      state.merchantTradeNo = options.merchant_trade_no;
+    }
+    await getOrderDetail(id);
+  });
 </script>
 
 <style lang="scss" scoped>
-	.score-img {
-		width: 36rpx;
-		height: 36rpx;
-		margin: 0 4rpx;
-	}
-
-	.apply-btn {
-		width: 140rpx;
-		height: 50rpx;
-		border-radius: 25rpx;
-		font-size: 24rpx;
-		border: 2rpx solid #dcdcdc;
-		line-height: normal;
-		margin-left: 16rpx;
-	}
-
-	.state-box {
-		color: rgba(#fff, 0.9);
-		width: 100%;
-		background: v-bind(headerBg) no-repeat,
-			linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
-		background-size: 750rpx 100%;
-		box-sizing: border-box;
-
-		.state-img {
-			width: 60rpx;
-			height: 60rpx;
-			margin-right: 20rpx;
-		}
-	}
-
-	.order-address-box {
-		background-color: #fff;
-		border-radius: 10rpx;
-		margin: -50rpx 20rpx 16rpx 20rpx;
-		padding: 44rpx 34rpx 42rpx 20rpx;
-		font-size: 30rpx;
-		box-sizing: border-box;
-		font-weight: 500;
-		color: rgba(51, 51, 51, 1);
-
-		.address-username {
-			margin-right: 20rpx;
-		}
-
-		.address-detail {
-			font-size: 26rpx;
-			font-weight: 500;
-			color: rgba(153, 153, 153, 1);
-			margin-top: 20rpx;
-		}
-	}
-
-	.detail-goods {
-		border-radius: 10rpx;
-		margin: 0 20rpx 20rpx 20rpx;
-
-		.order-list {
-			margin-bottom: 20rpx;
-			background-color: #fff;
-
-			.order-card {
-				padding: 20rpx 0;
-
-				.order-sku {
-					font-size: 24rpx;
-
-					font-weight: 400;
-					color: rgba(153, 153, 153, 1);
-					width: 450rpx;
-					margin-bottom: 20rpx;
-
-					.order-num {
-						margin-right: 10rpx;
-					}
-				}
-
-				.tag-btn {
-					margin-left: 16rpx;
-					font-size: 24rpx;
-					height: 36rpx;
-					color: var(--ui-BG-Main);
-					border: 2rpx solid var(--ui-BG-Main);
-					border-radius: 14rpx;
-					padding: 0 4rpx;
-				}
-			}
-		}
-	}
-
-	// 订单信息。
-	.notice-box {
-		background: #fff;
-		border-radius: 10rpx;
-		margin: 0 20rpx 20rpx 20rpx;
-
-		.notice-box__head {
-			font-size: 30rpx;
-
-			font-weight: 500;
-			color: rgba(51, 51, 51, 1);
-			line-height: 80rpx;
-			border-bottom: 1rpx solid #dfdfdf;
-			padding: 0 25rpx;
-		}
-
-		.notice-box__content {
-			padding: 20rpx;
-
-			.self-pickup-box {
-				width: 100%;
-
-				.self-pickup--img {
-					width: 200rpx;
-					height: 200rpx;
-					margin: 40rpx 0;
-				}
-			}
-		}
-
-		.notice-item,
-		.notice-item--center {
-			display: flex;
-			align-items: center;
-			line-height: normal;
-			margin-bottom: 24rpx;
-
-			.title {
-				font-size: 28rpx;
-				color: #999;
-			}
-
-			.detail {
-				font-size: 28rpx;
-				color: #333;
-				flex: 1;
-			}
-		}
-	}
-
-	.copy-btn {
-		width: 100rpx;
-		line-height: 50rpx;
-		border-radius: 25rpx;
-		padding: 0;
-		background: rgba(238, 238, 238, 1);
-		font-size: 22rpx;
-		font-weight: 400;
-		color: rgba(51, 51, 51, 1);
-	}
-
-	// 订单价格信息
-	.order-price-box {
-		background-color: #fff;
-		border-radius: 10rpx;
-		padding: 20rpx;
-		margin: 0 20rpx 20rpx 20rpx;
-
-		.notice-item {
-			line-height: 70rpx;
-
-			.title {
-				font-size: 28rpx;
-				color: #999;
-			}
-
-			.detail {
-				font-size: 28rpx;
-				color: #333;
-				font-family: OPPOSANS;
-			}
-		}
-
-		.all-rpice-item {
-			justify-content: flex-end;
-			align-items: center;
-
-			.title {
-				font-size: 26rpx;
-				font-weight: 500;
-				color: #333333;
-				line-height: normal;
-			}
-
-			.all-price {
-				font-size: 26rpx;
-				font-family: OPPOSANS;
-				line-height: normal;
-				color: $red;
-			}
-		}
-	}
-
-	// 底部
-	.footer-box {
-		height: 100rpx;
-		width: 100%;
-		box-sizing: border-box;
-		border-radius: 10rpx;
-		padding-right: 20rpx;
-
-		.cancel-btn {
-			width: 160rpx;
-			height: 60rpx;
-			background: #eeeeee;
-			border-radius: 30rpx;
-			margin-right: 20rpx;
-			font-size: 26rpx;
-			font-weight: 400;
-			color: #333333;
-		}
-
-		.pay-btn {
-			width: 160rpx;
-			height: 60rpx;
-			font-size: 26rpx;
-			border-radius: 30rpx;
-			font-weight: 500;
-			color: #fff;
-		}
-	}
-</style>
+  .score-img {
+    width: 36rpx;
+    height: 36rpx;
+    margin: 0 4rpx;
+  }
+
+  .apply-btn {
+    width: 140rpx;
+    height: 50rpx;
+    border-radius: 25rpx;
+    font-size: 24rpx;
+    border: 2rpx solid #dcdcdc;
+    line-height: normal;
+    margin-left: 16rpx;
+  }
+
+  .state-box {
+    color: rgba(#fff, 0.9);
+    width: 100%;
+    background: v-bind(headerBg) no-repeat,
+      linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
+    background-size: 750rpx 100%;
+    box-sizing: border-box;
+
+    .state-img {
+      width: 60rpx;
+      height: 60rpx;
+      margin-right: 20rpx;
+    }
+  }
+
+  .order-address-box {
+    background-color: #fff;
+    border-radius: 10rpx;
+    margin: -50rpx 20rpx 16rpx 20rpx;
+    padding: 44rpx 34rpx 42rpx 20rpx;
+    font-size: 30rpx;
+    box-sizing: border-box;
+    font-weight: 500;
+    color: rgba(51, 51, 51, 1);
+
+    .address-username {
+      margin-right: 20rpx;
+    }
+
+    .address-detail {
+      font-size: 26rpx;
+      font-weight: 500;
+      color: rgba(153, 153, 153, 1);
+      margin-top: 20rpx;
+    }
+  }
+
+  .detail-goods {
+    border-radius: 10rpx;
+    margin: 0 20rpx 20rpx 20rpx;
+
+    .order-list {
+      margin-bottom: 20rpx;
+      background-color: #fff;
+
+      .order-card {
+        padding: 20rpx 0;
+
+        .order-sku {
+          font-size: 24rpx;
+
+          font-weight: 400;
+          color: rgba(153, 153, 153, 1);
+          width: 450rpx;
+          margin-bottom: 20rpx;
+
+          .order-num {
+            margin-right: 10rpx;
+          }
+        }
+
+        .tag-btn {
+          margin-left: 16rpx;
+          font-size: 24rpx;
+          height: 36rpx;
+          color: var(--ui-BG-Main);
+          border: 2rpx solid var(--ui-BG-Main);
+          border-radius: 14rpx;
+          padding: 0 4rpx;
+        }
+      }
+    }
+  }
+
+  // 订单信息。
+  .notice-box {
+    background: #fff;
+    border-radius: 10rpx;
+    margin: 0 20rpx 20rpx 20rpx;
+
+    .notice-box__head {
+      font-size: 30rpx;
+
+      font-weight: 500;
+      color: rgba(51, 51, 51, 1);
+      line-height: 80rpx;
+      border-bottom: 1rpx solid #dfdfdf;
+      padding: 0 25rpx;
+    }
+
+    .notice-box__content {
+      padding: 20rpx;
+
+      .self-pickup-box {
+        width: 100%;
+
+        .self-pickup--img {
+          width: 200rpx;
+          height: 200rpx;
+          margin: 40rpx 0;
+        }
+      }
+    }
+
+    .notice-item,
+    .notice-item--center {
+      display: flex;
+      align-items: center;
+      line-height: normal;
+      margin-bottom: 24rpx;
+
+      .title {
+        font-size: 28rpx;
+        color: #999;
+      }
+
+      .detail {
+        font-size: 28rpx;
+        color: #333;
+        flex: 1;
+      }
+    }
+  }
+
+  .copy-btn {
+    width: 100rpx;
+    line-height: 50rpx;
+    border-radius: 25rpx;
+    padding: 0;
+    background: rgba(238, 238, 238, 1);
+    font-size: 22rpx;
+    font-weight: 400;
+    color: rgba(51, 51, 51, 1);
+  }
+
+  // 订单价格信息
+  .order-price-box {
+    background-color: #fff;
+    border-radius: 10rpx;
+    padding: 20rpx;
+    margin: 0 20rpx 20rpx 20rpx;
+
+    .notice-item {
+      line-height: 70rpx;
+
+      .title {
+        font-size: 28rpx;
+        color: #999;
+      }
+
+      .detail {
+        font-size: 28rpx;
+        color: #333;
+        font-family: OPPOSANS;
+      }
+    }
+
+    .all-rpice-item {
+      justify-content: flex-end;
+      align-items: center;
+
+      .title {
+        font-size: 26rpx;
+        font-weight: 500;
+        color: #333333;
+        line-height: normal;
+      }
+
+      .all-price {
+        font-size: 26rpx;
+        font-family: OPPOSANS;
+        line-height: normal;
+        color: $red;
+      }
+    }
+  }
+
+  // 底部
+  .footer-box {
+    height: 100rpx;
+    width: 100%;
+    box-sizing: border-box;
+    border-radius: 10rpx;
+    padding-right: 20rpx;
+
+    .cancel-btn {
+      width: 160rpx;
+      height: 60rpx;
+      background: #eeeeee;
+      border-radius: 30rpx;
+      margin-right: 20rpx;
+      font-size: 26rpx;
+      font-weight: 400;
+      color: #333333;
+    }
+
+    .pay-btn {
+      width: 160rpx;
+      height: 60rpx;
+      font-size: 26rpx;
+      border-radius: 30rpx;
+      font-weight: 500;
+      color: #fff;
+    }
+  }
+</style>

sheep/api/order.js

@@ -129,13 +129,6 @@ export default {
 		}),
 	// 售后
 	aftersale: {
-		// 申请售后
-		apply: (data) =>
-			request({
-				url: 'order/aftersale',
-				method: 'POST',
-				data,
-			}),
 		list: (params) =>
 			request({
 				url: '/app-api/trade/after-sale/page',
@@ -145,15 +138,6 @@ export default {
 					showLoading: false,
 				},
 			}),
-		// list: (params) =>
-		// 	request({
-		// 		url: 'order/aftersale',
-		// 		method: 'GET',
-		// 		params,
-		// 		custom: {
-		// 			showLoading: false,
-		// 		},
-		// 	}),
 		//取消售后
 		cancel: (id) =>
 			request({
@@ -166,7 +150,7 @@ export default {
 				url: 'order/aftersale/' + id,
 				method: 'DELETE',
 			}),
-		// 售后详情
+		// 售后详情 DONE
 		detail: (id) =>
 			request({
 				url: '/app-api/trade/after-sale/get?id=' + id,

sheep/api/trade/afterSale.js

@@ -10,6 +10,26 @@ const AfterSaleApi = {
       data,
     });
   },
+  // 获得售后
+  getAfterSale: (id) => {
+    return request2({
+      url: `/app-api/trade/after-sale/get`,
+      method: 'GET',
+      params: {
+        id,
+      },
+    });
+  },
+  // 取消售后
+  cancelAfterSale: (id) => {
+    return request2({
+      url: `/app-api/trade/after-sale/cancel`,
+      method: 'DELETE',
+      params: {
+        id,
+      },
+    });
+  }
 };
 
 export default AfterSaleApi;

sheep/hooks/useGoods.js

@@ -182,6 +182,87 @@ export function handleOrderButtons(order) {
   }
 }
 
+/**
+ * 格式化售后状态
+ *
+ * @param afterSale 售后
+ */
+export function formatAfterSaleStatus(afterSale) {
+  if (afterSale.status === 10) {
+    return '申请售后';
+  }
+  if (afterSale.status === 20) {
+    return '商品待退货';
+  }
+  if (afterSale.status === 30) {
+    return '商家待收货';
+  }
+  if (afterSale.status === 40) {
+    return '等待退款';
+  }
+  if (afterSale.status === 50) {
+    return '退款成功';
+  }
+  if (afterSale.status === 61) {
+    return '买家取消';
+  }
+  if (afterSale.status === 62) {
+    return '商家拒绝';
+  }
+  if (afterSale.status === 63) {
+    return '商家拒收货';
+  }
+  return '未知状态';
+}
+
+/**
+ * 格式化售后状态的描述
+ *
+ * @param afterSale 售后
+ */
+export function formatAfterSaleStatusDescription(afterSale) {
+  if (afterSale.status === 10) {
+    return '退款申请待商家处理';
+  }
+  if (afterSale.status === 20) {
+    return '请退货并填写物流信息';
+  }
+  if (afterSale.status === 30) {
+    return '退货退款申请待商家处理';
+  }
+  if (afterSale.status === 40) {
+    return '等待退款';
+  }
+  if (afterSale.status === 50) {
+    return '退款成功';
+  }
+  if (afterSale.status === 61) {
+    return '退款关闭';
+  }
+  if (afterSale.status === 62) {
+    return `商家不同意退款申请，拒绝原因：${afterSale.auditReason}`;
+  }
+  if (afterSale.status === 63) {
+    return `商家拒绝收货，不同意退款，拒绝原因：${afterSale.auditReason}`;
+  }
+  return '未知状态';
+}
+
+/**
+ * 处理售后的 button 操作按钮数组
+ *
+ * @param afterSale 售后
+ */
+export function handleAfterSaleButtons(afterSale) {
+  afterSale.buttons = [];
+  if ([10, 20, 30].includes(afterSale.status)) { // 取消订单
+    afterSale.buttons.push('cancel');
+  }
+  if (afterSale.status === 20) { // 退货信息
+    afterSale.buttons.push('delivery');
+  }
+}
+
 /**
  * 倒计时
  * @param toTime   截止时间