yijianbao_user_uniapp/pages_user/shopping/refundOrderDetail.vue

<template>
	<view>
		<view class="top-cont">
			<!-- 背景图片 -->
			<view class="bg-color"></view>
			<!-- <image class="bg" src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/images/order_top_bg.png" mode=""></image> -->
			<view class="top-inner">			
				<!-- 这里是状态栏 -->
				<view class="fixed-top-box">
					<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/images/back_white.png" mode=""></image>
						<text class="title">售后详情</text>
						<text></text>
					</view>
				</view>
				
				<!-- 顶部固定后站位元素 -->
				<view style="padding-bottom: 88upx;">
					<view :style="{height: statusBarHeight}"></view>
				</view>
				<!-- 订单状态 -->
				<view class="order-status" >
					<!-- 处理中 -->
					<view  v-if="sales.salesStatus == 0" class="inner">
						<view class="img-box">
							<image src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/images/deal96.png" mode=""></image>
						</view>
						<view class="status-box">
							<text class="status">售后中</text>
							<text class="desc">请等待客服处理...</text>
						</view>
					</view>
					<view  v-if="sales.salesStatus == 1" class="inner">
						<view class="img-box">
							<image src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/images/close_trade.png" mode=""></image>
						</view>
						<view class="status-box">
							<text class="status">售后取消</text>
							<text class="desc">用户已取消售后</text>
						</view>
					</view>
					<view  v-if="sales.salesStatus == 2" class="inner">
						<view class="img-box">
							<image src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/images/close_trade.png" mode=""></image>
						</view>
						<view class="status-box">
							<text class="status">售后取消</text>
							<text class="desc">商家已拒绝...</text>
						</view>
					</view>
					<!-- 退款成功 -->
					<view  v-if="sales.salesStatus == 3" class="inner">
						<view class="img-box">
							<image src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/images/compel96.png" mode=""></image>
						</view>
						<view class="status-box">
							<text class="status">退款成功</text>
							<text class="desc">已退款，退款金额将按原支付退回</text>
						</view>
					</view>
					
				</view>
				<!-- 退款信息 -->
				<view class="refund-info">
					<view class="inner">
						<view class="title-box">
							<view class="left">
								<text class="title">退款金额</text>
								<view class="price-box">
									<text class="unit">¥</text>
									<text class="num" v-if="sales.refundAmount!=null">{{sales.refundAmount.toFixed(2)}}</text>
								</view>
							</view>
							<view class="right">
								<text class="text" v-if="sales.salesStatus==0">
										<text  class="text success">{{$getDictLabelName("storeAfterSalesStatus",sales.status)}}</text>
								</text>
							</view>
						</view>
			 
						<view class="refund-item" v-if="sales.status>=1&&sales.serviceType==1">
							<view class="text">收件人:{{sales.consignee}} </view>
							<view class="text">电话:{{sales.address}} </view>
							<view class="text">收件地址:{{sales.phoneNumber}}</view>
						</view>
						<view class="btn-box"  v-if="sales.salesStatus==0" >
							<view  v-if="sales.status==1" class="btn cancel" @click="addDeliverySn()"  >填写物流</view>
							<view  v-if="sales.status==0||sales.status==1" class="btn cancel" @click="revoke()"  >撤销申请</view>
							<!-- <view  class="btn cancel" @click="showLogs()" >查看进度</view> -->
						</view>
						<view class="refund-item" v-if="sales.status==0">
							<view class="text">已提交等待平台审核 </view>
						</view>
						<view class="refund-item" v-if="sales.status==1">
							<view class="text">平台已审核,等待用户发货 </view>
						</view>
						 <view class="refund-item" v-if="sales.status==2">
						 	<view class="text">用户已发货,等待仓库审核 </view>
						 </view>
						 <view class="refund-item" v-if="sales.status==3">
						 	<view class="text">财务审核 </view>
						 </view>
						 <view class="refund-item" v-if="sales.status==4">
						 	<view class="text">已完成 </view>
						 </view>
					</view>
				</view>
				<view class="content">
					<!-- 退货信息 -->
					<view class="return-info">
						<!-- <view class="title-box">
							<text class="label">退货信息</text>
							<text class="ret-num">共2件</text>
						</view> -->
						<!-- 退货列表 -->
						<view class="goods-list">
							<view v-if="sales!=null&&sales.isPackage!=1"  v-for="(item,index) in items" :key="index" class="item">
								<view class="img-box">
									<image :src="JSON.parse(item.jsonInfo).image" mode="aspectFill"></image>
								</view>
								<view class="info-box">
									<view>
										<view class="title ellipsis2">{{JSON.parse(item.jsonInfo).commonName&&JSON.parse(item.jsonInfo).commonName!=='-'?JSON.parse(item.jsonInfo).commonName:JSON.parse(item.jsonInfo).productName}}</view>
										<view class="spec">规格：{{JSON.parse(item.jsonInfo).sku}}</view>
									</view>
									<view class="price-num">
										<view class="price">
											<text class="unit">¥</text>
											<text class="num">{{JSON.parse(item.jsonInfo).price.toFixed(2)}}</text>
										</view>
										<view class="num">x{{JSON.parse(item.jsonInfo).num}}</view>
									</view>
								</view>
							</view>
							<view v-if="sales!=null&&sales.isPackage==1"  class="item">
								<view class="img-box">
									<image :src="JSON.parse(sales.packageJson).imgUrl" mode="aspectFill"></image>
								</view>
								<view class="info-box">
									<view>
										<view class="title ellipsis2">
											<!-- <view class="tag">处方药</view> -->
											<view class="tag">套餐</view>{{JSON.parse(sales.packageJson).title}}
										</view>
										<view class="spec">{{JSON.parse(sales.packageJson).descs}}</view>
									</view>
								</view>
							</view>
							<!-- 详细信息 -->
							<view class="refund-det-info">
								<view class="det-item">
									<text class="label">退货原因</text>
									<text class="text">{{sales.reasons}}</text>
								</view>
								<view class="det-item">
									<text class="label">退货说明</text>
									<text class="text">{{sales.explains}}</text>
								</view>
								<view class="det-item">
									<text class="label">退款金额</text>
									<text class="text" v-if="sales.refundAmount!=null">¥{{sales.refundAmount.toFixed(2)}}</text>
								</view>
								 <view class="det-item">
								 	<text class="label">订单编号</text>
								 	<text class="text">{{sales.orderCode}}</text>
								 </view>
								<view class="det-item">
									<text class="label">申请时间</text>
									<text class="text">{{sales.createTime}}</text>
								</view>
								
							</view>
						</view>
					</view>
				</view>
			
			</view>
		</view>
		
	</view>
</template>

<script>
	import {getAfterSalesDetails,revoke} from '../api/storeAfterSales.js'
	export default {
		data() {
			return {
				modalTitle:"请输入快递单号",
				sales:{},
				items:[],
				salesId:null,
				// 状态栏的高度
				statusBarHeight: uni.getStorageSync('menuInfo').statusBarHeight,
 
			};
		},
		onLoad(option) {
			this.salesId = option.salesId

		},
		onShow() {
			this.getAfterSalesDetails()
		},
		methods: {
			addDeliverySn(){
				uni.navigateTo({
					url: './refundOrderDelivery?salesId=' + this.salesId
				}) 
			},
			revoke(){
				var data={salesId:this.salesId};
				revoke(data).then(res => {
					if(res.code==200){
						 uni.showToast({
						 	icon:'success',
						 	title:'操作成功'
						 });
						 setTimeout(function() {
							 uni.$emit('refreshAfterSales');
							 uni.navigateBack({
								 delta: 1
							 })
						 }, 500);
						 
					}else{
						uni.showToast({
							icon:'none',
							title: res.msg
						});
						 
					}
				});
			},
			getAfterSalesDetails() {
				//联网加载数据
				var that = this;
				var data = {
					salesId:this.salesId,

				};
				getAfterSalesDetails(data).then(res => {
					if(res.code==200){
						//设置列表数据
						 this.sales=res.sales;
						 this.items=res.items;
						
					}else{
						uni.showToast({
							icon:'none',
							title: res.msg
						});
						 
					}
				});
			},
			// 返回上一页
			back() {
				uni.navigateBack()
			},
			showLogs(status) {
				uni.navigateTo({
					url: './refundOrderLogs?orderStatus=' + status
				})
			},
			
		}
	}
</script>

<style lang="scss">
	.bg-color {
		width: 100%;
		background: linear-gradient(to right, #2583EB 0%, #60CDC3 100%);
		height: 450rpx;
	}
	.fixed-top-box{
		width: 100%;
		background: linear-gradient(to right, #2583EB 0%, #60CDC3 100%);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1000;
	}
	.top-cont{
		width: 100%;
		height: 500upx;
		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;
						}
						.det-box{
							display: flex;
							align-items: center;
							image{
								width: 14upx;
								height: 24upx;
								margin-left: 12upx;
								margin-top: 30upx;
							}
						}
					}
				}
			}
			.refund-info{
				margin-top: 50upx;
				padding: 0 20upx;
				.inner{
					
					background: #FFFFFF;
					border-radius: 16upx;
					padding: 0 30upx 15upx 30upx;
					.title-box{
						height: 88upx;
						border-bottom: 1px solid #F0F0F0;
						display: flex;
						align-items: center;
						justify-content: space-between;
						.left{
							display: flex;
							align-items: center;
							.title{
								font-size: 30upx;
								font-family: PingFang SC;
								font-weight: bold;
								color: #333333;
								line-height: 1;
								margin-right: 20upx;
							}
							.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;
								}
							}
						}
						.right{
							display: flex;
							align-items: center;
							.text{
								font-size: 24upx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #999999;
								line-height: 1;
								margin-right: 10upx;
							}
							image{
								width: 12upx;
								height: 22upx;
							}
						}
					}
					.refund-item{
						margin-top: 40upx;
						.text{
							margin-bottom: 10upx;
							font-size: 26upx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #666666;
							line-height: 1;
						}
					}
				}
			}
		}
	}
	.content{
		padding: 0 20upx 20upx;
		.return-info{
			margin-top: 30upx;
			background: #FFFFFF;
			border-radius: 16upx;
			.title-box{
				height: 88upx;
				padding: 0 30upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.label{
					font-size: 30upx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
				}
				.ret-num{
					font-size: 26upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;
				}
			}
			.goods-list{
				padding: 0 30upx;
				background-color: #FFFFFF;
				border-radius: 16upx;
				.item{
					padding: 30upx 0;
					border-bottom: 1px solid #EDEEEF;
					display: flex;
					align-items: center;
					.img-box{
						width: 160upx;
						height: 160upx;
						margin-right: 30upx;
						image{
							width: 100%;
							height: 100%;
						}
					}
					.info-box{
						width: calc(100% - 190upx);
						height: 160upx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						.title{
							font-size: 28upx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #333333;
							line-height: 36upx;
							.tag{
								display: inline-block;
								padding: 0 6upx;
								height: 30upx;
								background: linear-gradient(90deg, #2583EB 0%, #2BC7A4 100%);
								border-radius: 4upx;
								margin-right: 10upx;
								font-size: 22upx;
								font-family: PingFang SC;
								font-weight: bold;
								color: #FFFFFF;
								line-height: 30upx;
								float: left;
								margin-top: 7upx;
							}
						}
						.spec{
							margin-top: 18upx;
							font-size: 24upx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #999999;
							line-height: 1;
						}
						.price-num{
							display: flex;
							align-items: center;
							justify-content: space-between;
							.price{
								display: flex;
								align-items: flex-end;
								.unit{
									font-size: 24upx;
									font-family: PingFang SC;
									font-weight: 500;
									color: #111111;
									line-height: 1.2;
									margin-right: 4upx;
								}
								.num{
									font-size: 32upx;
									font-family: PingFang SC;
									font-weight: 500;
									color: #111111;
									line-height: 1;
								}
							}
							.num{
								font-size: 24upx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #999999;
								line-height: 1;
							}
						}
					}
				}
				.refund-det-info{
					padding-bottom: 30upx;
					.det-item{
						margin-top: 40upx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						.label{
							font-size: 26upx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #666666;
							line-height: 1;
						}
						.text{
							font-size: 26upx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #222222;
							line-height: 1;
						}
					}
				}
			}
		}
		
	}
	.btn-box{
		margin-top: 15upx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		.btn{
			width: 155upx;
			height: 64upx;
			line-height: 64upx;
			font-size: 26upx;
			font-family: PingFang SC;
			font-weight: 500;
			text-align: center;
			border-radius: 32upx;
			margin-left: 15upx;
			&:first-child{
				margin-left: 0;
			}
			&.cancel{
				border: 1px solid #DDDDDD;
				color: #666666;
			}
			 
		}
	}
	
</style>