【类 型】：feat

【原  因】：
【过  程】：详情框 退款cell 退款说明cell 联系客服按钮
【影  响】：

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

App.vue

@@ -55,11 +55,11 @@
 		float: right;
 	}
 
-	.pr{
+	.pr {
 		position: relative;
 	}
 
-	.pa{
+	.pa {
 		position: absolute;
 	}
 
@@ -72,16 +72,19 @@
 	}
 
 	.animation {
-	  transition: all 0.2s ease;
+		transition: all 0.2s ease;
 	}
+
 	//占位 空符
 	.extra-space {
 		height: 156rpx;
 	}
+
 	//占位 空符
 	.extra-space1 {
 		height: 400rpx;
 	}
+
 	//占位 空符
 	.extra-space2 {
 		height: 200rpx;
@@ -91,6 +94,7 @@
 		weight: 40rpx;
 		height: 40rpx;
 	}
+
 	//按钮
 	.numberBut {
 		width: 130rpx;
@@ -126,6 +130,10 @@
 		background-color: #888;
 	}
 
+	.bg-mb {
+		background-color: $uni-text-color-disable;
+	}
+
 	.bg-b {
 		background-color: #383838;
 	}
@@ -299,7 +307,8 @@
 	.fb {
 		font-weight: bold;
 	}
-	.fn{
+
+	.fn {
 		font-weight: normal;
 	}
 
@@ -311,6 +320,10 @@
 		line-height: 1.2em;
 	}
 
+	.fz20 {
+		font-size: 20rpx;
+	}
+
 	.fz24 {
 		font-size: 24rpx;
 	}
@@ -336,11 +349,11 @@
 	}
 
 	.fcb {
-		color: $uni-text-color-disable
+		color: $uni-text-color-disable;
 	}
 
 	.fcm {
-		color: $uni-color-error
+		color: $uni-color-error;
 	}
 
 	.z-top {

components/cell/cell.vue

@@ -6,7 +6,7 @@
 		</view>
 		<view class="fcb fz28 flex mac">
 			<view class="fz28" :class="conClass">{{cellCon}}</view>
-			<u-icon name="arrow-right" size="28rpx"></u-icon>
+			<u-icon name="arrow-right" size="28rpx" v-if='isRightIcon'></u-icon>
 		</view>
 	</view>
 </template>
@@ -36,6 +36,11 @@
 			required: {
 				type: Boolean,
 				default: false
+			},
+			//是否显示 向右的箭头
+			isRightIcon: {
+				type: Boolean,
+				default: true
 			}
 		},
 		methods: {

components/orderCon/orderCon.vue

@@ -0,0 +1,82 @@
+<template>
+	<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">{{tit}}</view>
+			<view class="fcb fz24 l-h-12">订单号：{{order.order_sn}}</view>
+		</view>
+		<view class="m-t-24 flex msb">
+			<view class="flex3 ofh">
+				<scroll-view class="scroll-view_H" scroll-x="true">
+					<view class="scroll-view-item_H m-r-12" v-for="(ps,index) in order.product_snapshot" :key="index">
+						<u--image :src="ps.spu_photo[0]" width="147rpx" height="110rpx" radius="4rpx" />
+					</view>
+				</scroll-view>
+			</view>
+			<view class="flex1 fcb fz24 flex mr md">
+				共{{order.total_num}}件
+			</view>
+		</view>
+		<view class="fz28 borderBDas p-b-12 p-t-12" v-if="order!==null">
+			<view class="flex msb l-h-18">
+				<view>商品小计</view>
+				<view>¥{{order.total_price | formatPrice}}</view>
+			</view>
+			<view class="flex msb l-h-18">
+				<view>外送费</view>
+				<view>¥{{order.transport_price | formatPrice}}</view>
+			</view>
+			<view class="flex msb l-h-18">
+				<view>打包服务费</view>
+				<view>¥{{order.pack_price | formatPrice}}</view>
+			</view>
+		</view>
+		<view class="flex mr mac l-h-18 m-t-24">
+			<view class="fcb fz24">合计</view>
+			<view class="m-l-12 fz36 fb" v-if="fullPrice!==null">¥{{fullPrice | formatPrice}}</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import {
+		formatPrice
+	} from '@/utils/index.js'
+	export default {
+		name: "orderCon",
+		data() {
+			return {
+
+			}
+		},
+		props: {
+			tit: {
+				type: String
+			},
+			order: {
+				type: Object
+			}
+		},
+		filters: {
+			formatPrice, //价格 格式化
+		},
+		methods: {
+			formatPrice, //格式化价格
+		},
+		computed: {
+			//订单总价格
+			fullPrice() {
+				if (this.order) {
+					return this.formatPrice(Number(this.order.transport_price) + Number(this.order.pack_price) + Number(
+						this.order.total_price))
+				} else {
+					return 0
+				}
+
+			}
+		}
+	}
+</script>
+
+<style>
+
+</style>

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,138 @@
+<template>
+	<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 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() {
+			return {
+
+			}
+		},
+		created() {},
+		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>
+
+<style lang="scss" scoped>
+	.processBox {
+		height: 60rpx;
+	}
+
+	.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>

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,21 +45,26 @@
 			}
 		},
 		{
-			"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",
+			"style": {
 				"navigationStyle": "custom"
 			}
 		}

pages/order/refProcess.vue

@@ -0,0 +1,118 @@
+<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 v-if="processList" :processList="processList" :processType='processType'></process>
+		</view>
+		<!-- 退款金额cell -->
+		<cell :cellTit='order.refund_status ==="主动退" ? "退款金额":"申请退款金额"' conClass="fcm" :cellCon="refundPrice"
+			:isRightIcon='false'></cell>
+		<!-- 退款说明cell -->
+		<cell cellTit="退款说明" :cellCon="refundRemark | truncate(8)" :isRightIcon='false'>
+		</cell>
+		<!-- 订单详情 -->
+		<orderCon tit='订单详情' :order='order'></orderCon>
+		<!-- 按钮 -->
+		<view class="m-l-24 m-r-24 m-t-24 flex mr">
+			<view class="nullBut border fcb rad8 fz28 flex mac mc" @click="callPhone(shopCon.tel)">
+				联系客服
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import {
+		formatPrice,
+		truncate,
+		callPhone
+	} from '@/utils/index.js'
+	export default {
+		data() {
+			return {
+				order_sn: '', //订单号]
+			}
+		},
+		onLoad(options) {
+			this.order_sn = options.order_sn // 从提交订单页面传递过来的订单号	
+		},
+		methods: {
+			callPhone
+		},
+		filters: {
+			formatPrice, //价格 格式化
+			truncate
+		},
+		computed: {
+			//退款说明
+			refundRemark() {
+				if (this.order) {
+					return this.order.refund_remark
+				} else {
+					return null
+				}
+			},
+			//退款额 ps:有确切退款额 显示确切退款额 没有显示申请退款额
+			refundPrice() {
+				if (this.order) {
+					if (this.order.refund_price) {
+						return '¥' + String(this.order.refund_price)
+					} else {
+						return '¥' + String(this.order.apply_price)
+					}
+				} else {
+					return null
+				}
+			},
+			//订单
+			order() {
+				if (this.order_sn) {
+					return this.$store.state.orderList.find(item => item.order_sn === this.order_sn)
+				} else {
+					return null
+				}
+			},
+			//退款时间线组件 各时间指定
+			processList() {
+				if (this.order) {
+					if (this.order.refund_status === '主动退') {
+						return [this.order.refundagree_time, this.order.refunded_time]
+					} else if (this.order.refund_status === '申请中' || this.order.refund_status === '已同意') {
+						return [this.order.refundapply_time, this.order.refundagree_time, this.order.refunded_time]
+					} else if (this.order.refund_status === '拒绝退') {
+						return [this.order.refundapply_time, this.order.rejected_time]
+					} else {
+						return null
+					}
+				} else {
+					return null
+				}
+			},
+			//时间线组件类型指定
+			processType() {
+				if (this.order) {
+					return this.order.refund_status
+				} else {
+					return null
+				}
+			},
+			//商铺信息
+			shopCon() {
+				return this.$store.state.shopCon
+			},
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

pages/order/refund.vue

@@ -7,43 +7,7 @@
 			</view>
 		</u-navbar>
 		<!-- 申请订单 -->
-		<view class="m-l-24 m-r-24 m-t-24 p-24 bg-w rad8 boxshadow">
+		<orderCon tit='申请订单' :order='order'></orderCon>
-			<view class="m-b-24 borderBDas flex msb mub">
-				<view class="fb fz36 l-h-18">申请订单</view>
-				<view class="fcb fz24 l-h-12">订单号：{{order_sn}}</view>
-			</view>
-			<view class="m-t-24 flex msb">
-				<view class="flex3 ofh">
-					<scroll-view class="scroll-view_H" scroll-x="true">
-						<view class="scroll-view-item_H m-r-12" v-for="(ps,index) in order.product_snapshot"
-							:key="index">
-							<u--image :src="ps.spu_photo[0]" width="147rpx" height="110rpx" radius="4rpx" />
-						</view>
-					</scroll-view>
-				</view>
-				<view class="flex1 fcb fz24 flex mr md">
-					共{{order.total_num}}件
-				</view>
-			</view>
-			<view class="fz28 borderBDas p-b-12 p-t-12" v-if="order!==null">
-				<view class="flex msb l-h-18">
-					<view>商品小计</view>
-					<view>¥{{order.total_price | formatPrice}}</view>
-				</view>
-				<view class="flex msb l-h-18">
-					<view>外送费</view>
-					<view>¥{{order.transport_price | formatPrice}}</view>
-				</view>
-				<view class="flex msb l-h-18">
-					<view>打包服务费</view>
-					<view>¥{{order.pack_price | formatPrice}}</view>
-				</view>
-			</view>
-			<view class="flex mr mac l-h-18 m-t-24">
-				<view class="fcb fz24">合计</view>
-				<view class="m-l-12 fz36 fb" v-if="fullPrice!==null">¥{{fullPrice | formatPrice}}</view>
-			</view>
-		</view>
 		<!-- 退款金额cell -->
 		<cell cellTit="申请退款金额" :required="true" @click="handledrRefund_priceShow" conClass="fcm"
 			:cellCon="requestRefund_price?'¥'+ requestRefund_price:''"></cell>
@@ -124,7 +88,6 @@
 
 <script>
 	import {
-		parseTime,
 		formatPrice,
 		truncate,
 		callPhone
@@ -243,13 +206,12 @@
 			}
 		},
 		filters: {
-			parseTime, //日期 格式化
 			formatPrice, //价格 格式化
 			truncate
 		},
 		watch: {},
 		computed: {
-			//未付款订单
+			//订单
 			order() {
 				if (this.order_sn) {
 					return this.$store.state.orderList.find(item => item.order_sn === this.order_sn)

utils/index.js

@@ -9,8 +9,8 @@ import store from '../store/index.js'
  * @returns {string} 截取完的内容最后加省略号
  */
 export function truncate(value, length = 5) {
-	if (!value) return '';
+	if (!value) return ''
-	return value.length > length ? value.slice(0, length) + '...' : value;
+	return value.length > length ? value.slice(0, length) + '...' : value
 }
 /**
  * Parse the time to string