【类 型】：feat

【原  因】：订单详情里面的 时间线组件
【过  程】：
【影  响】：

# 类型 包含:
# feat：新功能（feature）
# fix：修补bug
# docs：文档（documentation）
# style： 格式（不影响代码运行的变动）
# refactor：重构（即不是新增功能，也不是修改bug的代码变动）
# test：增加测试
# chore：构建过程或辅助工具的变动

App.vue

@@ -336,11 +336,11 @@
 	}
 
 	.fcb {
-		color: $uni-text-color-disable
+		color: $uni-text-color-disable;
 	}
 
 	.fcm {
-		color: $uni-color-error
+		color: $uni-color-error;
 	}
 
 	.z-top {

components/orderItem/orderItem.vue

@@ -23,7 +23,8 @@
 			</view>
 		</view>
 		<view class="m-t-24 flex mr">
-			<navigator v-if="showPayButton" :url="`/pages/shop/pay?order_sn=${order.order_sn}&fullPrice=${fullPrice}`" hover-class="navigator-hover">
+			<navigator v-if="showPayButton" :url="`/pages/shop/pay?order_sn=${order.order_sn}&fullPrice=${fullPrice}`"
+				hover-class="navigator-hover">
 				<view class="nullBut bg-m fci rad8 fz28 flex mac mc">
 					立即支付
 				</view>
@@ -31,14 +32,18 @@
 			<view v-if="showPickupNumber" class="numberBut bg-m fci rad8 fz28 fb flex mac mc m-l-24">
 				{{ foodSn }}
 			</view>
-			<navigator v-if="showAfterSaleButton" class="m-l-24" :url="`/pages/order/refund?order_sn=${order.order_sn}`" hover-class="navigator-hover">
+			<navigator v-if="showAfterSaleButton" class="m-l-24" :url="`/pages/order/refund?order_sn=${order.order_sn}`"
+				hover-class="navigator-hover">
 				<view class="nullBut border fcb rad8 fz28 flex mac mc">
 					申请售后
 				</view>
 			</navigator>
-			<view v-if="showRefundDetailsButton" class="nullBut border fcb rad8 fz28 flex mac mc m-l-24">
+			<navigator v-if="showRefundDetailsButton" class="m-l-24"
-				退款详情
+				:url="`/pages/order/refProcess?order_sn=${order.order_sn}`" hover-class="navigator-hover">
-			</view>
+				<view class="nullBut border fcb rad8 fz28 flex mac mc">
+					退款详情
+				</view>
+			</navigator>
 		</view>
 	</view>
 </template>
@@ -67,8 +72,9 @@
 		},
 		computed: {
 			//订单总价格
-			fullPrice(){
+			fullPrice() {
-				return this.formatPrice(Number(this.order.transport_price) + Number(this.order.pack_price) + Number(this.order.total_price))
+				return this.formatPrice(Number(this.order.transport_price) + Number(this.order.pack_price) + Number(this
+					.order.total_price))
 			},
 			// 是否显示 "立即支付" 按钮
 			showPayButton() {
@@ -94,36 +100,37 @@
 				if (this.order.main_status === '已付款' && this.order.refund_status === '未申请') {
 					return this.order.shipment_status;
 				}
-				switch (this.order.refund_status) {
+				// 如果订单的主状态是已退款，直接返回已退款
-					case '申请中':
+				if (this.order.main_status === '已退款') {
-						return '申请中';
+					return '已退款';
-					case '已同意':
-						return '商家同意退款';
-					case '主动退':
-						return '商家退单';
-					case '拒绝退':
-						return '商家拒绝退款';
-					default:
-						return '';
 				}
-			},
+
-			// 显示退款状态
+				// 如果订单的主状态是已付款，并且退款状态为已同意，返回商家同意退款
-			refundStatusDisplay() {
+				if (this.order.main_status === '已付款') {
-				switch (this.order.refund_status) {
+					if (this.order.refund_status === '已同意') {
-					case '申请中':
-						return '申请中';
-					case '已同意':
 						return '商家同意退款';
-					case '主动退':
+					}
+
+					// 如果退款状态为主动退，返回商家退单
+					if (this.order.refund_status === '主动退') {
 						return '商家退单';
-					case '拒绝退':
+					}
-						return '商家拒绝退款';
-					default:
-						return '';
 				}
+
+				// 根据退款状态显示其他状态
+				if (this.order.refund_status === '申请中') {
+					return '申请中';
+				}
+
+				if (this.order.refund_status === '拒绝退') {
+					return '商家拒绝退款';
+				}
+
+				// 默认返回空
+				return '';
 			},
 		},
-		methods:{
+		methods: {
 			formatPrice //价格格式化
 		},
 		props: {

components/process/process.vue

@@ -0,0 +1,50 @@
+<template>
+	<view class="processBox">
+		<!-- 背景 线 -->
+		<view class="flex mac"
+			style="height:0rpx; position: relative;top:50%;left:50%;transform: translate(-50%, -50%);width:66%">
+			<view class="bg-m flex1 processLine"></view>
+			<view class="bg-mg flex1 processLine"></view>
+		</view>
+		<!-- 背景 点 -->
+		<view class="flex mac"
+			style="height:36rpx; position: relative;top:50%;left:50%;transform: translate(-50%, -50%);width:66%">
+			<view class="flex1">
+				<view class="bg-m rad-c" style="width:18rpx;height:18rpx;"></view>
+			</view>
+			<view class="flex1 flex mse">
+				<view class="bg-m rad-c" style="width:18rpx;height:18rpx;"></view>
+			</view>
+			<view class="flex1 flex mr">
+				<view class="bg-m rad-c" style="width:38rpx;height:38rpx;"></view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "process",
+		data() {
+			return {
+
+			}
+		},
+		props: {
+			processList: {
+				type: Array,
+				deep: true
+			}
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+	.processBox {
+		height: 60rpx;
+	}
+
+	.processLine {
+		height: 2rpx;
+	}
+</style>

pages.json

@@ -2,8 +2,7 @@
 	"easycom": {
 		"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
 	},
-	"pages": [
+	"pages": [{
-		{
 			"path": "pages/index/index",
 			"style": {
 				"navigationStyle": "custom"
@@ -46,29 +45,27 @@
 			}
 		},
 		{
-			"path" : "pages/main/login",
+			"path": "pages/main/login",
 			"style": {
 				"navigationStyle": "custom"
 			}
 		},
 		{
-			"path" : "pages/order/index",
+			"path": "pages/order/index",
 			"style": {
 				"navigationStyle": "custom"
 			}
 		},
 		{
-			"path" : "pages/order/refund",
+			"path": "pages/order/refund",
-			"style" : 
+			"style": {
-			{
 				"navigationStyle": "custom"
 			}
 		},
 		{
-			"path" : "pages/order/refProcess",
+			"path": "pages/order/refProcess",
-			"style" : 
+			"style": {
-			{
+				"navigationStyle": "custom"
-				"navigationBarTitleText" : ""
 			}
 		}
 	],

pages/order/refProcess.vue

@@ -1,6 +1,18 @@
 <template>
 	<view>
-		
+		<!-- topbar -->
+		<u-navbar title="退款详情" bgColor="#d43030" :titleStyle="{ color: '#FFF'}" :autoBack="true" placeholder>
+			<view class="u-nav-slot" slot="left">
+				<u-icon name="arrow-left" color="#fff" size="19"></u-icon>
+			</view>
+		</u-navbar>
+		<!-- 进度box -->
+		<view class="m-l-24 m-r-24 m-t-24 p-24 bg-w rad8 boxshadow">
+			<view class="m-b-24 borderBDas flex msb mub">
+				<view class="fb fz36 l-h-18">{{ order.refund_status !== "主动退"?"买家申请":"卖家取消订单" }}</view>
+			</view>
+			<!-- <process :processList="processList"></process> -->
+		</view>
 	</view>
 </template>
 
@@ -8,15 +20,28 @@
 	export default {
 		data() {
 			return {
-				
+				order_sn: '', //订单号
 			}
 		},
+		onLoad(options) {
+			this.order_sn = options.order_sn // 从提交订单页面传递过来的订单号	
+		},
 		methods: {
-			
+
+		},
+		computed: {
+			//订单
+			order() {
+				if (this.order_sn) {
+					return this.$store.state.orderList.find(item => item.order_sn === this.order_sn)
+				} else {
+					return null
+				}
+			},
 		}
 	}
 </script>
 
-<style>
+<style lang="scss" scoped>
 
-</style>
+</style>

pages/order/refund.vue

@@ -249,7 +249,7 @@
 		},
 		watch: {},
 		computed: {
-			//未付款订单
+			//订单
 			order() {
 				if (this.order_sn) {
 					return this.$store.state.orderList.find(item => item.order_sn === this.order_sn)