diff --git a/components/process/process.vue b/components/process/process.vue
index 13a4439..d470fb8 100644
--- a/components/process/process.vue
+++ b/components/process/process.vue
@@ -1,28 +1,69 @@
 <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="processBox">
+			<!-- 背景 线 -->
+			<view class="flex mac processRc h0" :style="{ width: `calc(100% - ${100 / processList.length}%)` }">
+				<view v-for='index in processList.length-1' :key="index" class="flex1 processLine"
+					:class="processList[index+1] ? 'bg-m' : 'bg-mb'"></view>
+			</view>
+			<!-- 背景 点 -->
+			<view class="flex mac msb processRc h36" :style="{ width: `calc(100% - ${100 / processList.length}%)` }">
+				<view v-for="(item, index) in processList" :key="index" class="rad-c"
+					:class="[processList[index] ? 'bg-m' : 'bg-mb', index === lastNonEmptyIndex ? 'wh40' : 'wh20']">
+					<u-icon name="checkbox-mark" size="40rpx" color="#fff" v-if="lastNonEmptyIndex ===index"></u-icon>
+				</view>
+			</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 class="flex m-t-12">
+			<template v-if='processType ==="申请中" || processType ==="已同意"'>
+				<view class="flex1 flex mc mac column" :class="lastNonEmptyIndex===0?'':'fcb'">
+					<view class="fz28">申请退款</view>
+					<view class="fz20">{{ formatTime(processList[0]) }}</view>
+				</view>
+				<view class="flex1 flex mc mac column" :class="lastNonEmptyIndex===1?'':'fcb'">
+					<view class="fz28">{{ processList[1]?'卖家已同意':'等待卖家处理' }}</view>
+					<view class="fz20">{{ processList[1]?formatTime(processList[1]) : '&nbsp;' }}
+					</view>
+				</view>
+				<view class="flex1 flex mc mac column" :class="lastNonEmptyIndex===2?'':'fcb'">
+					<view class="fz28">退款成功</view>
+					<view class="fz20">{{ processList[2]?formatTime(processList[2]) : '&nbsp;' }}
+					</view>
+				</view>
+			</template>
+			<template v-if='processType ==="主动退"'>
+				<view class="flex1 flex mc mac column" :class="lastNonEmptyIndex===0?'':'fcb'">
+					<view class="fz28">卖家取消订单</view>
+					<view class="fz20">{{ formatTime(processList[0]) }}</view>
+				</view>
+				<view class="flex1 flex mc mac column" :class="lastNonEmptyIndex===1?'':'fcb'">
+					<view class="fz28">已退款</view>
+					<view class="fz20">{{ processList[1]?formatTime(processList[1]) : '&nbsp;' }}
+					</view>
+				</view>
+			</template>
+			<template v-if='processType ==="拒绝退"'>
+				<view class="flex1 flex mc mac column" :class="lastNonEmptyIndex===0?'':'fcb'">
+					<view class="fz28">申请退款</view>
+					<view class="fz20">{{ formatTime(processList[0]) }}</view>
+				</view>
+				<view class="flex1 flex mc mac column" :class="lastNonEmptyIndex===1?'':'fcb'">
+					<view class="fz28">卖家拒绝退款</view>
+					<view class="fz20">{{ processList[1]?formatTime(processList[1]) : '&nbsp;' }}
+					</view>
+				</view>
+			</template>
 		</view>
 	</view>
 </template>
 
 <script>
+	import {
+		parseTime,
+		formatPrice
+	} from '@/utils/index.js'
 	export default {
 		name: "process",
 		data() {
@@ -30,12 +71,36 @@
 
 			}
 		},
+		created() {
+			console.error(this.processList)
+		},
 		props: {
 			processList: {
 				type: Array,
 				deep: true
+			},
+			processType: {
+				type: String
 			}
 		},
+		computed: {
+			// 计算属性：查找最后一个非空值的下标
+			lastNonEmptyIndex() {
+				// 从数组末尾开始遍历
+				for (let i = this.processList.length - 1; i >= 0; i--) {
+					// 如果当前值不是空的，则返回其下标
+					if (this.processList[i] !== '' && this.processList[i] !== null) {
+						return i;
+					}
+				}
+				return -1; // 如果没有找到非空值，返回-1
+			}
+		},
+		methods: {
+			formatTime(time) {
+				return parseTime(time, '{m}-{d} {h}:{i}')
+			}
+		}
 	}
 </script>
 
@@ -47,4 +112,29 @@
 	.processLine {
 		height: 2rpx;
 	}
+
+	.processRc {
+		position: relative;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+	}
+
+	.h0 {
+		height: 0rpx;
+	}
+
+	.h30 {
+		height: 30rpx;
+	}
+
+	.wh20 {
+		width: 20rpx;
+		height: 20rpx;
+	}
+
+	.wh40 {
+		width: 40rpx;
+		height: 40rpx;
+	}
 </style>
\ No newline at end of file