RiyueGorge/pages/order/orderAfterSale.vue

<template>
	<view class="">
		<view class="applyAfterSale-top">
			<view class="l">
				<view class="" style="font-size: 36rpx;font-weight: 600;color: #333333;">
					夕阳红康养团7日游
				</view>
				<view class="" style="font-size: 22rpx;margin: 24rpx 0;">
					出行日期：2022-04-25
				</view>
				<view class=""  style="font-size: 22rpx;">
					数量  1
				</view>
			</view>
			<view class="r">
				<image src="https://t38.9026.com/uploads/golf/images/2022-05-31/20220531601652.png" mode="widthFix"></image>
				<view class="" style="margin-top: 20rpx;">
					
					<text style="font-size: 22rpx;">订单金额</text><text style="font-size: 32rpx;font-weight: 600;">￥12121</text>
				</view>
			</view>
		</view>
		
		<!-- 待退款 -->
		<view :class="state==0?'afterSale-center':'afterSale-center-success'">
			<view class="" style="font-size: 26rpx;">
				申请时间：2022-05-25
			</view>
				<view class="form-item">
					<view class="">
						退款原因
					</view>
					<view class="r">
						个人
					</view>
				</view>
				<view class="form-item">
					<view class="">
						退款金额
					</view>
					<view class="r">
						￥1690
					</view>
				</view>
				<view class="form-item">
					<view class="">
						联系方式
					</view>
					<view class="r">
						15286920927
					</view>
				</view>
			<view class="" style="margin: 32rpx 0;">
				备注信息
			</view>
			<view class="" style="color: #101010;">
				退款
			</view>
			<view class="image" style="margin: 40rpx 0;">
				<view class="">
					图片凭证
				</view>
				<image src="https:\/\/t38.9026.com\/uploads\/golf\/images\/2022-05-31\/20220531739250.png" mode=""></image>
			</view>
		</view>
		
		
		<!-- 成功退款 -->
		<view class="afterSale-center" v-if="state==1">
			<view class="" style="font-size: 26rpx;">
				申请时间：2022-05-25
			</view>
				<view class="form-item">
					<view class="">
						处理结果
					</view>
					<view class="r">
						通过
					</view>
				</view>
				<view class="form-item">
					<view class="">
						结果反馈
					</view>
					<view class="r">
						款项已原路返回
					</view>
				</view>
			<view class="image" style="margin: 40rpx 0;">
				<view class="">
					反馈截图
				</view>
				<image src="https:\/\/t38.9026.com\/uploads\/golf\/images\/2022-05-31\/20220531739250.png" mode=""></image>
			</view>
		</view>
		<view class="call" v-if="state==1">
			联系客服
		</view>
		
		<view class="navbar" v-if="state==0">
			待平台处理
		</view>
		
		
	</view>
</template>

<script>
	export default{
		data(){
			return{
				// 退款进度  0待退框   1已退框
				state:0
			}
		},
		onLoad(options) {
			if(options.id==0){
				this.state=0
			}else if(options.id==1){
				this.state=1
			}
		}
	}
</script>

<style lang="less">
	
	page{
		background-color: #F4F4F4;
		color: #666666 ;
		font-size: 30rpx;
	}
	.applyAfterSale-top{
		margin: 24rpx  0 0;
		padding:40rpx 30rpx;
		background: #FFFFFF;
		box-shadow: 0px 2rpx 4px 0px rgba(0, 0, 0, 0.02);
		border-radius: 16rpx 56rpx 8rpx 8rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.r{
			text-align: right;
		}
		image{
			width: 140rpx;
			border-radius: 6rpx;
		}
		
	}
	.afterSale-center{
		border-radius: 8rpx 8rpx 16rpx 56rpx;
		background-color: #FFFFFF;
		padding:30rpx;
		margin: 24rpx 0;
		.form-item{
			display:flex;
			justify-content: space-between;
			align-items: center;
			// margin: 20rpx 0;
			border-bottom:1rpx solid #E3E3E3;
			padding: 40rpx 0;
			.r{
				width: 50%;
				text-align: left;
				color: #101010;
			}
		}
		.image{
			image{
				width: 217rpx;
				height: 217rpx;
				border-radius: 8rpx 24rpx 8rpx 24rpx;
				margin-top: 20rpx;
			}
			
		}
	}
	.afterSale-center-success{
		border-radius: 8rpx;
		background-color: #FFFFFF;
		padding:30rpx;
		margin: 24rpx 0;
		.form-item{
			display:flex;
			justify-content: space-between;
			align-items: center;
			// margin: 20rpx 0;
			border-bottom:1rpx solid #E3E3E3;
			padding: 40rpx 0;
			.r{
				width: 50%;
				text-align: left;
				color: #101010;
			}
		}
		.image{
			image{
				width: 217rpx;
				height: 217rpx;
				border-radius: 8rpx 24rpx 8rpx 24rpx;
				margin-top: 20rpx;
			}
			
		}
	}
	.navbar{
		// margin-top: 104rpx;
		width: 100%;
		height: 104rpx;
		line-height: 104rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 0px 0px;
		position: fixed;
		left: 0;
		bottom: 0;
		text-align: center;
		// margin: 0 auto;
	}
	.call{
		width: 100%;
		height: 104rpx;
		line-height: 104rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 0px 0px;
		text-align: center;
		margin: 40rpx 0;
	}
</style>