huitong/pages/users/refund/detail.vue

<template>
	<view class="refund-detail" :style="viewColor">
		<view class="topContent">
			<view class="sys-head skeleton-rect" :style="{ height: statusBarHeight }"></view>
			<view class="customTitle">
				退款详情
				<u-icon name="arrow-left" class="leftArrow" color="#FFFFFF" size="14" @click="rightClick"></u-icon>
			</view>
		</view>
		<view class="head">
			<block v-if="type == -1">
				<view class="txt">退款失败</view>
				<view class="time">申请时间：{{detail.status_time}}</view>
			</block>
			<block v-if="type == 0">
				<view class="txt">审核中</view>
				<view class="time">申请时间：{{detail.status_time}}</view>
			</block>
			<block v-if="type == 1">
				<view class="txt">请退货并填写物流信息</view>
				<view class="time">申请时间：{{detail.status_time}}</view>
			</block>
			<block v-if="type == 2">
				<view class="txt">请等待商家收货并退款</view>
				<view class="time">还剩：				
				<countDown :is-day="true" :tip-text="' '" :day-text="'天'" :hour-text="':'" :minute-text="':'" :second-text="' '"
				 :datatime="datatime"></countDown>
				</view>
			</block>
			<block v-if="type == 3">
				<view class="txt">退款成功，金额 ¥{{detail.refund_price}}</view>
				<view class="time">申请时间：{{detail.status_time}}</view>
			</block>
			<block v-if="type == -2">
				<view class="txt">已取消退货申请</view>
				<view class="time">申请时间：{{detail.status_time}}</view>
			</block>
		</view>
		<!-- 拒绝 -->
		<view class="box" v-if="type == -1">
			<view class="txt">拒绝退款原因</view>
			<view class="des">{{detail.fail_message}}</view>
		</view>
		<!-- 待退货 -->
		<view class="info-box" v-if="type == 1">
			<view class="title">商家已同意您的退货申请，请尽早退货</view>
			<view class="store-info">
				<view class="text">收货人姓名：<text class="info">{{detail.mer_delivery_user}}</text></view>
				<view class="text">收货人联系方式：<text class="info">{{detail.phone}}</text></view>
				<view class="text">收货人地址：<text class="des">{{detail.mer_delivery_address}}</text></view>
				<view class="red-txt">
					<text class="iconfont icon-zhuyi-copy"></text>请按以上收货信息将商品退回
				</view>
			</view>
		</view>
		<!-- 待收货 -->
		<view class="info-box" v-if="type == 2">
			<view class="title">商家收货并验货无误，将操作退款给您</view>
			<view class="store-info">
				<view class="text">收货人姓名：<text class="info">{{detail.mer_delivery_user}}</text></view>
				<view class="text">收货人联系方式：<text class="info">{{detail.phone}}</text></view>
				<view class="text">收货人地址：<text class="des">{{detail.mer_delivery_address}}</text></view>
			</view>
		</view>
		<view class="info-box">
			<view class="title">退款信息</view>
			<view class="product-box">
				<view class="product-item" v-for="(item,index) in detail.refundProduct" :key="index">
					<image class="img-box" :src="item.product.cart_info.productAttr.image" mode="" v-if="item.product.cart_info.productAttr.image"></image>
					<image class="img-box" :src="item.product.cart_info.product.image" mode="" v-else></image>
					<view class="msg">
						<view class="name line1"><text v-if="item.product.cart_info.product_type === 2" class="event_name event_bg">预售</text>{{item.product.cart_info.product.store_name}}</view>
						<view class="des">{{item.product.cart_info.productAttr.sku}}</view>
						<view class="price">￥{{item.product.product_type == 3 ? item.product.cart_info.productAssistAttr.assist_price : item.product.product_type == 4 ? item.product.cart_info.activeSku.active_price : item.product.cart_info.productAttr.price}}</view>
						<view class="num">x {{item.refund_num}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="item">
				<view class="label">订单编号：</view>
				<view class="txt flex">
					<text>{{detail.refund_order_sn}}</text>
					<!-- #ifdef H5 -->
						<text class='copy copy-data' :data-clipboard-text="detail.refund_order_sn">复制</text>
					<!-- #endif -->
					<!-- #ifdef MP -->
						<text class='copy' @tap='copy'>复制</text>
					<!-- #endif -->
				</view>
			</view>
			<view class="item">
				<view class="label">退款金额：</view>
				<view class="txt flex">
					<text>¥ {{detail.refund_price}}</text>
				</view>
			</view>
			<view class="item">
				<view class="label">申请件数：</view>
				<view class="txt flex">
					<text>{{detail.refund_num}}</text>
				</view>
			</view>
			<view class="item">
				<view class="label">申请时间：</view>
				<view class="txt flex">
					<text>{{detail.create_time}}</text>
				</view>
			</view>
			<view class="item">
				<view class="label">备注说明：</view>
				<view class="txt flex">
					<text>{{detail.mark ? detail.mark : ""}}</text>
				</view>
			</view>
			<view class="item" style="display: block;">
				<view class="label">退款凭证：</view>
				<view class="upload-img">
					<view class="img-item" v-for="(item,index) in detail.pics" :key="index">
						<image :src="item" mode="" @click="loookImg(item,index)"></image>
					</view>
				</view>
			</view>
			
		</view>
		<view class="btn-wrapper">
			<block v-if="type==-1">
				<view class="btn gray" @click="goService">联系商家</view>
				<view class="btn" @click="applyAgain(detail)">再次申请</view>
			</block>
			<block v-else-if="type==1">
				<view class="btn gray" @click="cancelSales">取消售后</view>
				<view class="btn gray" @click="goService">联系商家</view>
				<view class="btn" @click="goPage">退回商品</view>
			</block>
			<block v-else-if="type==2">
				<view class="btn gray" @click="goService">联系商家</view>
				<view class="btn" @click="go">查看物流</view>
			</block>
			<block v-else-if="type==0">
				<view class="btn gray" @click="cancelSales">取消售后</view>
				<view class="btn" @click="goService">联系商家</view>
			</block>
			<block v-else>
				<view class="btn" @click="goService">联系商家</view>
			</block>
		</view>
	</view>
</template>
<script>
	let statusBarHeight = uni.getSystemInfoSync().statusBarHeight*2 + 'rpx';
	let statusBarHeightNum = uni.getSystemInfoSync().statusBarHeight*2;
	// +----------------------------------------------------------------------
	// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
	// +----------------------------------------------------------------------
	// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
	// +----------------------------------------------------------------------
	// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
	// +----------------------------------------------------------------------
	// | Author: CRMEB Team <admin@crmeb.com>
	// +----------------------------------------------------------------------
	import { refundDetail, refundCancelApi } from '@/api/order.js'
	import ClipboardJS from "@/plugin/clipboard/clipboard.js";
	import countDown from '@/components/countDown'
	import { mapGetters } from "vuex";
	export default{
		components: {
			countDown,	
		},
		computed:{
			...mapGetters(['viewColor']),
		},
		data(){
			return{
				type:0,
				refund_order_id:0,
				detail:'',
				datatime: 0,
				statusBarHeight: statusBarHeight,
				statusBarHeightNum:statusBarHeightNum,
			}
		},
		onLoad(options) {
			uni.setNavigationBarTitle({
			　　title:'退款详情'
			})
			this.refund_order_id = options.id
			this.getDetail()
		},
		onReady: function() {
			// #ifdef H5
			this.$nextTick(function() {				
				const clipboard = new ClipboardJS(".copy-data");
				clipboard.on("success", () => {
					this.$util.Tips({
						title: '复制成功'
					});
				});
			});
			// #endif
		},
		methods:{
			rightClick() {
				uni.navigateBack({delta:-1})
			},
			//查看大图
			loookImg(item,index){
				uni.previewImage({
					urls: this.detail.pics,
					current: this.detail.pics[index]
				});
			},
			getDetail(){
				refundDetail(this.refund_order_id).then(res=>{
					// status 0审核中 1待发货 2待收货 3已退款 -1已拒绝 
					this.type = res.data.status
					this.detail = res.data
					this.datatime = res.data.auto_refund_time;
					
				})
			},
			goPage(){
				uni.navigateTo({
					url:'/pages/users/refund/goods/index?id='+this.detail.refund_order_id
				})
			},
			applyAgain(item){
				uni.navigateTo({
					url:`/pages/order_details/index?order_id=${item.refundProduct[0].product.order_id}`
				})
			},
			go(){
				uni.navigateTo({
					url:`/pages/users/refund/logistics?orderId=${this.detail.refund_order_id}`
				})
			},
			/**
			 * 
			 * 剪切订单号
			 */
			// #ifndef H5
			copy: function() {
				let that = this;
				uni.setClipboardData({
					data: this.detail.refund_order_sn
				});
			},
			// #endif
			// 客服
			goService(){
				uni.navigateTo({
					url:`/pages/chat/customer_list/chat?mer_id=${this.detail.mer_id}&uid=${this.detail.uid}&refund_order_id=${this.detail.refund_order_id}`
				})
			},
			// 取消售后
			cancelSales(){
				let that = this;
				uni.showModal({
				  content: '确定要取消售后？',
				  success: function(res) {
				    if(res.confirm) {
				      refundCancelApi(that.detail.refund_order_id).then(res => {
				      	if (res.status === 200) {
				      		that.$util.Tips({
				      			title: res.message
				      		});
									that.getDetail();
								}
				      })
				    } else if(res.cancel) {
				      console.log('用户点击取消');
				    }
				  }
				});
			},
		}
	}
</script>

<style lang="scss">
	.topContent{
		// position: fixed;
		top:0;
		width:100%;
		z-index: 10;
	}
	.sys-head{
		background: $btn-color;
	}
	.customTitle{
		height: 40px;
		background: $btn-color;
		text-align: center;
		font-weight: 400;
		font-size: 36rpx;
		color: #FFFFFF;
		line-height: 40px;
		display: inline-block;
		width: 100%;
		position: relative;
		margin:-1px 0;
		.u-icon{
			position: absolute;
			left: 24rpx;
			top: 25rpx;
		}
	}
.refund-detail{
	.head{
		display: flex;
		flex-direction: column;
		justify-content: center;
		// height: 150rpx;
		// padding: 0 30rpx;
		color: #fff;
		background:$btn-color;
		font-size: 36rpx;
		.txt{
			font-weight: bold;
			margin: 53rpx 0 20rpx 49rpx;
		}
		.time{
			font-size: 26rpx;
			margin-bottom: 39rpx;
			margin-left: 49rpx;
			// opacity: .8;
			.time{
				display: inline-block;
				width: 600rpx;
				/deep/ .red{
					color: #fff;
				}
			}
		}
	}

	.info-box{
		
		margin: 0 24rpx;
		margin-top: 20rpx;
		background-color: #fff;
		border-radius: 10px;
		.title{
			padding: 0 32rpx;
			line-height: 86rpx;
			border-bottom: 1px solid #F0F0F0;
			color: #282828;
		}
		.product-box{
			.product-item{
				display: flex;
				padding: 25rpx 30rpx;
				.img-box{
					width:130rpx;
					height:130rpx;
					border-radius:16rpx;
				}
				.msg{
					position: relative;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					width: 440rpx;
					margin-left: 26rpx;
					.name{
						font-size: 34rpx;
						color: #333333;
					}
					.des{
					
						font-size: 24rpx;
						color: #C0C5CA;
					}
					.price{
						font-size: 30rpx;
						color:#E53623;
					}
					.num{
						position: absolute;
						right: -50rpx;
						/* top: 4rpx; */
						color: #999999;
						font-size: 30rpx;
						bottom: 0rpx;
					}
				}
			}			
			.event_name{
				display: inline-block;
				margin-right: 9rpx;
				color: #fff;
				font-size: 20rpx;
				padding: 0 8rpx;
				line-height: 30rpx;	
				text-align: center;
				border-radius: 6rpx;						
			}
		}
		
		.event_bg{
			background: #FF7F00;
		}
		.store-info{
			padding: 30rpx;
			.des{
				margin-top: 10rpx;
				font-size: 26rpx;
				color: #868686;
			}
			.red-txt{
				display: flex;
				align-items: center;
				margin-top: 10rpx;
				color: $theme-color;
				font-size: 24rpx;
				.iconfont{
					font-size: 30rpx;
					margin-right: 5rpx;
					margin-top: 6rpx;
				}
			}
		}
	}
	.content{
		margin: 0 24rpx;
		margin-top: 20rpx;
		padding: 30rpx 30rpx 0;
		background-color: #FFFFFF;
		
		.item{
			display: flex;
			justify-content: space-between;
			margin-bottom: 30rpx;
			.label{
				font-size: 28rpx;
				color: #333333;
			}
			.txt{
				justify-content: flex-end;
				align-items: center;
				width: 450rpx;
				color: #999;
				font-size: 28rpx;
				text-align: right;
				.copy{
					display: flex;
					align-items: center;
					justify-content: center;
					width:89rpx;
					height:47rpx;
					margin-left: 20rpx;
					border:1px solid #666666;
					border-radius:23px;
					font-size: 24rpx;
					color: #333;
				}
			}
			&:last-child{
				margin-bottom: 0;
			}
			.upload-img{
				display: flex;
				flex-wrap: wrap;
				margin-top: 20rpx;
				.img-item{
					position: relative;
					width: 156rpx;
					height: 156rpx;
					margin-right: 23rpx;
					margin-top: 20rpx;
					&:nth-child(4n){
						margin-right: 0;
					}
					image{
						width: 156rpx;
						height: 156rpx;
						border-radius: 8rpx;
					}
				}
			}
		}	
		
	}
	.box{
		margin-top: 12rpx;
		padding:25rpx 30rpx;
		background-color: #fff;
		font-size: 30rpx;
		color: #282828;
		.des{
			margin-top: 5rpx;
			font-size: 26rpx;
			color: #868686;
		}
	}
}
/deep/.styleAll{
	color: #fff;
}
.btn-wrapper{
	position: fixed;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	height: 110rpx;
	background: #fff;
	bottom: 0;
	width: 100%;
	padding-right: 30rpx;
	button{
		font-size: 28rpx;
	}
	.btn{
		width: 201rpx;
		height: 71rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 20rpx;
		background:$btn-color;
		border-radius: 35px;
		color: #fff;
	}
	.gray{
		background: transparent;
		border: 1px solid #eee;
		color: #AAAAAA;
	}
	&:after{
		content:' ';
		position: absolute;
		top: 0;
		left: 50%;
		width: 690rpx;
		height:1px;
		margin-left: -345rpx;
		background-color: #f0f0f0;
	}
}
</style>