his_user_miniapp/pages_order/storeOrderRefundDetails.vue

<template>
	<view>
		<view class="top-cont">
			<view class="bg"></view>
			<view class="top-inner">			
				<!-- 订单状态 -->
				<view class="order-status" >
					<!-- 处理中 -->
					<view  v-if="sales.salesStatus == 0" class="inner">
						<view class="img-box">
							<image src="https://fs-1319721001.cos.ap-chongqing.myqcloud.com/fs/20240229/a4bf17c7fb7342118f5ba52911fbcd84.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://fs-1319721001.cos.ap-chongqing.myqcloud.com/fs/20240229/5be93a404ff148c99ff41b39a3b23665.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://fs-1319721001.cos.ap-chongqing.myqcloud.com/fs/20240229/5be93a404ff148c99ff41b39a3b23665.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://fs-1319721001.cos.ap-chongqing.myqcloud.com/fs/20240229/09e5cf7de97d4ee6aa9f0c778599d760.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" >
										<text  class="text success">
											{{$getDictLabelName(statusOptions,sales.salesStatus)}}
										</text>
								</text>
							</view>
						</view>
			 
						<view class="refund-item" v-if="sales.status>=1&&sales.refundType==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">共{{items.length}}件</text>
						</view> -->
						<!-- 退货列表 -->
						<view class="goods-list">
							<view v-if="sales!=null"  v-for="(item,index) in items" :key="index" class="item">
								<view class="img-box">
									<image :src="JSON.parse(item.jsonInfo).image==''?'/static/images/drug.svg':JSON.parse(item.jsonInfo).image" mode="aspectFill"></image>
								</view>
								<view class="info-box">
									<view>
										<view class="title ellipsis2">{{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 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">{{order.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 {getDictByKey} from '@/api/common.js'
	
	import {getStoreAfterSalesById,revoke} from '@/api/storeAfterSales.js'
	export default {
		data() {
			return {
				statusOptions:[],
				sales:{},
				items:[],
				order:null,
				salesId:null,
				// 状态栏的高度
				statusBarHeight: uni.getStorageSync('menuInfo').statusBarHeight,
 
			};
		},
		onLoad(option) {
			this.id = option.id

		},
		onShow() {
			this.getStoreAfterSalesById()
			this.getDictByKey("sys_after_sales_status")
		},
		methods: {
			getDictByKey(key){
				var data={key:key}
				getDictByKey(data).then(
					res => {
						if(res.code==200){
							if(key=="sys_after_sales_status"){
								this.statusOptions=res.data;
							}
						}
					},
					err => {
					}
				);
				
			},
			addDeliverySn(){
				uni.navigateTo({
					url: './storeOrderRefundAddDelivery?id=' + this.id
				}) 
			},
			revoke(){
				var data={id:this.id};
				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
						});
						 
					}
				});
			},
			getStoreAfterSalesById() {
				//联网加载数据
				var that = this;
				var data = {
					id:this.id,

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

<style lang="scss">
	.fixed-top-box{
		width: 100%;
		background: linear-gradient(135deg, #2BC7B9 0%, #60CDC3 100%);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1000;
	}
	.top-cont{
		width: 100%;
		height: 500upx;
		position: relative;
		.bg{
			width: 100%;
			height: 350upx;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
			background-color: #C39A58;
			background: linear-gradient(#C39A58, #E2C99E);
			border-radius: 0rpx 0rpx 100rpx 100rpx;
		}
		.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, #2BC7B9 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>