yijianbao_user_uniapp/pages_order/storeOrderRefundLogs.vue

<template>
	<view>
		<view class="top-cont">
			<!-- 背景图片 -->
			<image class="bg" src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/image/order_top_bg.png" mode=""></image>
			<view class="top-inner">			
				<!-- 这里是状态栏 -->
				<view class="status_bar" :style="{height: statusBarHeight}"></view>
				<view class="back-box" @click="back">
					<image src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/image/back_white.png" mode=""></image>
					<text class="title">退款详情</text>
					<text></text>
				</view>
				<!-- 订单状态 -->
				<view class="order-status">
					<view class="inner">
						<view class="img-box">
							<image src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/image/pag96.png" mode=""></image>
						</view>
						<view class="status-box">
							<text class="status">退款总额</text>
						</view>
					</view>
					<!-- 退款状态：退款总额 -->
					<view class="refund-money">
						<text class="unit">¥</text>
						<text class="num">29.4</text>
					</view>
				</view>
				<!-- 订单退款 -->
				<view class="order-refund">
					<view class="inner">
						<view class="title-box">
							<text class="title">订单退款</text>
							<view class="price-box">
								<text class="unit">¥</text>
								<text class="num">29.4</text>
							</view>
						</view>
						<view class="text-box">
							系统已提交微信支付处理，微信审核完成后1-3个工作日
							自动原路退款至您的支付账户，若超时未收到退款，请联
							系客服核实
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="content">
			<!-- 退款步骤 -->
			<view class="refund-steps">
				<view v-for="(item,index) in 3" :key="index" class="steps">
					<view class="title">
						<text :class="index == 0?'text black-text':'text'">已原路退款至您的微信支付账户</text>
						<!-- 左侧灰色圆点 -->
						<view :class="index == 1?'dot active':'dot'"></view>
						<!-- 对号 -->
						<image v-if="index == 0" class="img" src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/image/complete.png" mode=""></image>
					</view>
					<view class="time">2019-9-16 10:00</view>
					<view v-if="index == 0" class="context">
						微信支付将把钱退至原支付账户，若逾期未受到退款，请致电微信支付客服
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 状态栏的高度
				statusBarHeight: uni.getStorageSync('menuInfo').statusBarHeight,
			};
		},
		onLoad(option) {
			
		},
		methods: {
			// 返回上一页
			back() {
				uni.navigateBack()
			},
			
		}
	}
</script>

<style lang="scss">
 
	.top-cont{
		width: 100%;
		height: 476upx;
		position: relative;
		.bg{
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
		}
		.top-inner{
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 2;
			.back-box{
				height: 88upx;
				padding-left: 22upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 20upx;
				image{
					width: 40upx;
					height: 40upx;
				}
				.title{
					font-size: 36upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
				}
			}
			.order-status{
				margin-top: 60upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 30upx;
				.inner{
					display: flex;
					align-items: center;
					.img-box{
						width: 96upx;
						height: 96upx;
						margin-right: 30upx;
						image{
							width: 100%;
							height: 100%;
						}
					}
					.status-box{
						height: 96upx;
						display: flex;
						flex-direction: column;
						justify-content: center;
						.status{
							font-size: 40upx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #FFFFFF;
							line-height: 1;
						}
						.desc{
							font-size: 26upx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #FFFFFF;
							line-height: 1;
							margin-top: 30upx;
						}
					}
				}
				// 退款状态：退款总额
				.refund-money{
					display: flex;
					align-items: flex-end;
					.unit{
						font-size: 32upx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #FFFFFF;
						line-height: 1.2;
						margin-right: 10upx;
					}
					.num{
						font-size: 50upx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #FFFFFF;
						line-height: 1;
					}
				}
			}
			.order-refund{
				margin-top: 50upx;
				padding: 0 20upx;
				.inner{
					box-sizing: border-box;
					height: 268upx;
					background: #FFFFFF;
					border-radius: 16upx;
					padding: 0 30upx;
					.title-box{
						height: 88upx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						border-bottom: 1px solid #F0F0F0;
						.title{
							font-size: 30upx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #333333;
						}
						.price-box{
							display: flex;
							align-items: flex-end;
							.unit{
								font-size: 24upx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #FF6633;
								line-height: 1.2;
								margin-right: 4upx;
							}
							.num{
								font-size: 32upx;
								font-family: PingFang SC;
								font-weight: bold;
								color: #FF6633;
								line-height: 1;
							}
						}
					}
					.text-box{
						font-size: 26upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #666666;
						line-height: 42upx;
						margin-top: 22upx;
					}
				}
			}
		}
	}
	.content{
		padding: 0 20upx;
		.refund-steps{
			margin-top: 188upx;
			background: #FFFFFF;
			border-radius: 16upx;
			padding: 40upx 44upx;
			.steps{
				padding-left: 40upx;
				padding-bottom: 56upx;
				position: relative;
				&::after{
					content: "";
					width: 4upx;
					height: 100%;
					background: #F1F1F1;
					position: absolute;
					left: 0;
					top: 20upx;
				}
				&:last-child{
					padding-bottom: 0;
					&::after{
						display: none;
					}
				}
				.title{
					position: relative;
					.text{
						font-size: 28upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #666666;
						line-height: 38upx;
						&.black-text{
							color: #111111;
						}
					}
					.dot{
						width: 16upx;
						height: 16upx;
						background: #EBEBEB;
						border-radius: 50%;
						position: absolute;
						left: -46upx;
						top: 16upx;
						z-index: 10;
						&.active{
							background-color: #2583EB;
						}
					}
					.img{
						width: 40upx;
						height: 40upx;
						position: absolute;
						left: -57upx;
						top: 6upx;
						z-index: 10;
					}
				}
				.time{
					font-size: 24upx;
					font-family: Gilroy;
					font-weight: 500;
					color: #999999;
					margin-top: 5upx;
				}
				.context{
					font-size: 26upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;
					line-height: 40upx;
					margin-top: 22upx;
				}
			}
		}
		
	}
	
</style>