ydd_front/mer_uniapp/pages/admin/refundOrderDetail/index.vue

<template>
	<view>
		<!-- #ifdef MP || APP-PLUS -->
		<NavBar titleText="售后详情" :iconColor="iconColor" :textColor="iconColor" :isScrolling="isScrolling" showBack>
		</NavBar>
		<!-- #endif -->
		<view class="headerBg">
			<view :style="{ height: `${getHeight.barTop}px` }"></view>
			<view :style="{ height: `${getHeight.barHeight}px` }"></view>
			<view class="inner"></view>
		</view>
		<view class="order-details pos-order-details">
			<view class="header">
				<view class="state">{{statusArr[refundInfo.refundStatus]}}</view>
				<view class="data">
					<span v-if="refundInfo.refundStatus==0">用户提交退款申请，请您及时处理哦～</span>
					<span v-if="refundInfo.refundStatus==4">您已同意此退款申请，等待用户退货中～</span>
					<span v-if="refundInfo.refundStatus==5">用户已经填写退货信息，请您耐心等待～</span>
					<span v-if="refundInfo.refundStatus==2">退款金额原支付路径返回中！</span>
					<span v-if="refundInfo.refundStatus==3">退款金额已返还用户账户！</span>
					<span v-if="refundInfo.refundStatus==6">用户已经撤销此退款申请！</span>
					<span v-if="refundInfo.refundStatus==1">{{refundInfo.refundReason}}</span>
				</view>
			</view>
			<view class='wrapper'>
				<view class='item acea-row title'>
					<view>退款明细</view>
				</view>
				<view class='item acea-row row-between'>
					<view>退款金额</view>
					<view class='conter'>¥{{refundInfo.refundPrice}}</view>
				</view>
				<view class='item acea-row row-between'>
					<view>退回运费</view>
					<view class='conter'>¥{{refundInfo.refundFreightFee}}</view>
				</view>
				<view class='item acea-row row-between'>
					<view>退回抵扣积分</view>
					<view class='conter'>{{refundInfo.refundUseIntegral}}</view>
				</view>
				<view class='item acea-row row-between'>
					<view>收回赠送积分</view>
					<view class='conter'>{{refundInfo.refundGainIntegral}}</view>
				</view>
			</view>
			<!-- 商品信息 -->
			<view class='wrapper'>
				<view class="acea-row row-between productInfo-box">
					<image class="productImg" :src="refundInfo.image" mode=""></image>
					<view class="product-right">
						<view class="product-name prodyct-item">{{refundInfo.productName}}</view>
						<view class="product-sku prodyct-item">{{refundInfo.sku}}</view>
						<view class="product-price prodyct-item">￥{{refundInfo.price}}</view>
					</view>
				</view>
				<view class="item acea-row row-between">
					<view>退款件数</view>
					<view class="conter">{{ refundInfo.applyRefundNum }}</view>
				</view>
				<view class="item acea-row row-between">
					<view>售后类型</view>
					<view class="conter">{{ refundInfo.afterSalesType==1?'仅退款':'退货退款' }}</view>
				</view>
				<view class="item acea-row row-between">
					<view>退货方式</view>
					<view class="conter">{{ refundInfo.returnGoodsType==0?'不退货':refundInfo.returnGoodsType==1?'快递退回':'到店退货' }}</view>
				</view>
				<view class="item acea-row row-between">
					<view>退款原因</view>
					<view class="conter">{{ refundInfo.refundReasonWap }}</view>
				</view>
				<view class="item acea-row row-between">
					<view>备注说明</view>
					<view class="conter">{{ refundInfo.refundReasonWapExplain }}</view>
				</view>
				<view class="item acea-row row-between">
					<view>退款凭证</view>
					<view class="conter">
						<scroll-view class="picTxt scroll-view" scroll-x="true" v-if="refundInfo.refundReasonWapImg">
							<view class="pictrue" v-for="(val, key) in refundInfo.refundReasonWapImg.split(',')" :key="key">
								<image class="scroll-img" :src="val" />
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
			<view class="wrapper">
				<view class="item acea-row row-between">
					<view>订单编号</view>
					<view class="conter">
						{{ orderInfoVo.orderNo}}
						<!-- #ifdef H5 -->
						<text class="copy copy-data" :data-clipboard-text="orderInfoVo.orderNo">复制</text>
						<!-- #endif -->
						<!-- #ifdef MP -->
						<text class="copy copy-data" @click="copyNum(orderInfoVo.orderNo)">复制</text>
						<!-- #endif -->
					</view>
				</view>
				<view class="item acea-row row-between">
					<view>退款编号</view>
					<view class="conter">
						{{ refundInfo.refundOrderNo }}
						<!-- #ifdef H5 -->
						<text class="copy copy-data" :data-clipboard-text="refundInfo.refundOrderNo">复制</text>
						<!-- #endif -->
						<!-- #ifdef MP -->
						<text class="copy copy-data" @click="copyNum(refundInfo.refundOrderNo)">复制</text>
						<!-- #endif -->
					</view>
				</view>
				<view class="item acea-row row-between">
					<view>申请时间</view>
					<view class="conter">{{ orderInfoVo.createTime }}</view>
				</view>
				<view class="item acea-row row-between">
					<view>退款方式</view>
					<view class="conter">{{ payType[`${orderInfoVo.payType}`] }}</view>
				</view>
				<view class="item acea-row row-between">
					<view>退一级返佣</view>
					<view class="conter">{{ refundInfo.refundFirstBrokerageFee }}</view>
				</view>
				<view class="item acea-row row-between">
					<view>退二级返佣</view>
					<view class="conter">{{ refundInfo.refundSecondBrokerageFee }}</view>
				</view>
				<view class="item acea-row row-between">
					<view>平台备注</view>
					<view class="conter">{{ refundInfo.platformRemark||'' }}</view>
				</view>
				<view class="item acea-row row-between">
					<view>商家备注</view>
					<view class="conter">{{  refundInfo.merRemark||''}}</view>
				</view>
			</view>
			<view class="height-add"></view>
			<view class="footer acea-row row-right row-middle" v-if="goname != 'looks'">
				<view class="btn" @click="modify(refundInfo, 7)">退款单备注</view>
				<view class="btn on" v-if="(refundInfo.returnGoodsType==0||refundInfo.returnGoodsType==2)&&refundInfo.refundStatus==0"  @click="modify(refundInfo,'2',1,0)">
					退款审核
				</view>
				<view class="btn on" v-if="refundInfo.returnGoodsType==1&&refundInfo.refundStatus==0"  @click="modify(refundInfo,'2',0,1)">
					退款审核
				</view>
				<view class="btn on" v-if="refundInfo.refundStatus==5" @click="modify(refundInfo, 2, 1,2)">确认收货</view>
			</view>
			<PriceChange :change="change" :orderInfo="orderInfo" :isRefund="isRefund"
				v-on:statusChange="statusChange($event)" v-on:closechange="changeclose($event)" v-on:savePrice="savePrice"
				:status="status"></PriceChange>
		</view>
	</view>
</template>
<script>
	import {refundOrderDetail} from'@/api/work.js'
	import PriceChange from "../components/PriceChange/index.vue";
	// #ifdef MP || APP-PLUS
	import NavBar from "../components/NavBar.vue";
	// #endif
	// #ifdef H5
	import ClipboardJS from "@/plugin/clipboard/clipboard.js";
	// #endif

	import {
		isMoney
	} from '@/utils/validate.js'
import {refundOrderList,refundOrderMark,refundStatusNum,refundOrderAudit,refundReceiving,refundReceivingReject} from '@/api/work.js'
	export default {
		name: "AdminOrder",
		components: {
			PriceChange,
			// #ifdef MP || APP-PLUS
			NavBar,
			// #endif
		},
		props: {},
		data: function() {
			return {
				payType: {
					'public': '公众号支付',
					'mini': '小程序支付',
					'h5': '网页支付支付',
					'yue': '余额支付',
					'wechatIos': '微信Ios支付',
					'wechatAndroid': '微信Android支付',
					'alipay': '支付宝支付',
					'alipayApp': '支付宝App支付'
				},
				statusArr:['待审核','商家拒绝','退款中','已退款','用户退货','商家待收货','已撤销'],
				openErp: false,
				order: false,
				change: false,
				status: "",
				types: "",
				statusType: -3,
				clickNum: 1,
				goname: '',
				isRefund: 0, //1是仅退款;0是同意退货退款
				// #ifdef MP || APP-PLUS
				iconColor: '#FFFFFF',
				isScrolling: false,
				// #endif
				getHeight: this.$util.getWXStatusHeight(),
				refundInfo: '',
				refundOrderNo:'',
				apiModalType:'',
				orderInfo:{},
				orderInfoVo:''
			};
		},
		onLoad: function(option) {
			this.refundOrderNo=option.refundOrderNo
			this.getIndex();
			// #ifdef H5
			this.$nextTick(function() {
				var clipboard = new ClipboardJS('.copy-data');
				clipboard.on('success', function(e) {
					this.$util.Tips({
						title: '复制成功'
					})
				});
				clipboard.on('error', function(e) {
					this.$util.Tips({
						title: '复制失败'
					})
				});
			});
			// #endif

		},
		onShow() {
			this.getIndex();
		},
		onPageScroll(e) {
			// #ifdef MP || APP-PLUS
			if (e.scrollTop > 50) {
				this.iconColor = '#333333';
				this.isScrolling = true;
			} else {
				this.iconColor = '#FFFFFF';
				this.isScrolling = false;
			}
			// #endif
		},
		methods: {
			//0-仅退款 1-退货退款 2-确认收货
			modify: function(item, status, type,apiType) {
				this.apiModalType=apiType
				if (this.openErp && status != 1) return
				this.change = true;
				this.status = status.toString();
				this.orderInfo = item;
				if (status == 2) {
					this.isRefund = type
				}
			},
			changeclose: function(msg) {
				this.change = msg;
			},
			getIndex: function() {
				refundOrderDetail(this.refundOrderNo).then(res=>{
					this.refundInfo=res.data
					this.orderInfoVo=res.data.orderInfoVo
				})
			},
			async savePrice(opt) {
				let that = this,
					data = {};
				data.refundOrderNo = that.orderInfo.refundOrderNo;
				if (that.apiModalType == 0) {
					if(opt.type==2&&!opt.refuse_reason){
						return this.$util.Tips({
							title: '请输入拒绝理由'
						})
					}
					let requestObj = {
						refundOrderNo:that.orderInfo.refundOrderNo,
						auditType:opt.type==1?'success':'refuse',
						reason:opt.refuse_reason?opt.refuse_reason:''
					}
					refundOrderAudit(requestObj).then(res=>{
						if(res.code==200){
							this.$util.Tips({
								title: '审核成功'
							})
							this.init();
							this.change = false
						}else{
							this.$util.Tips({
								title:res.message
							})
						}
					})
				} else if (that.apiModalType == 1) {
					//退货退款审核
					if(opt.type==2&&!opt.refuse_reason){
						return this.$util.Tips({
							title: '请输入拒绝理由'
						})
					}
					if(opt.type==1&&!opt.merAddressId){
						return this.$util.Tips({
							title: '请选择退货地址'
						})
					}
					//退货退款拒绝
					if(opt.type==2){
						let requestObj = {
							refundOrderNo:that.orderInfo.refundOrderNo,
							auditType:opt.type==1?'success':'refuse',
							reason:opt.refuse_reason?opt.refuse_reason:''
						}
						refundOrderAudit(requestObj).then(res=>{
							if(res.code==200){
								this.$util.Tips({
									title: '操作成功'
								})
								this.init();
								this.change = false
							}else{
								this.$util.Tips({
									title:res.message
								})
							}
						})
					}
					//退货退款同意
					if(opt.type==1){
						let requestObj = {
							refundOrderNo:that.orderInfo.refundOrderNo,
							auditType:opt.type==1?'success':'refuse',
							merAddressId:opt.merAddressId
						}
						refundOrderAudit(requestObj).then(res=>{
							if(res.code==200){
								this.$util.Tips({
									title: '操作成功'
								})
								this.init();
								this.change = false
							}else{
								this.$util.Tips({
									title:res.message
								})
							}
						})
					}
				}else if(that.apiModalType == 2){
					//确认收货
					if(opt.type==2&&!opt.refuse_reason){
						return this.$util.Tips({
							title: '请输入拒绝理由'
						})
					}
					if(opt.type==1){
						// 同意
						refundReceiving(that.orderInfo.refundOrderNo).then(res=>{
							if(res.code==200){
								this.$util.Tips({
									title: '操作成功'
								})
								this.init();
								this.change = false
							}else{
								this.$util.Tips({
									title:res.message
								})
							}
						})
					}
					if(opt.type==2){
						let requestObj = {
							refundOrderNo:that.orderInfo.refundOrderNo,
							reason:opt.refuse_reason?opt.refuse_reason:''
						}
						// 拒绝
						refundReceivingReject(requestObj).then(res=>{
							if(res.code==200){
								this.$util.Tips({
									title: '操作成功'
								})
								this.init();
								this.change = false
							}else{
								this.$util.Tips({
									title:res.message
								})
							}
						})
					}
				}else{
					data.remark=opt.remark
					if (!data.remark) {
						return this.$util.Tips({
							title: '请输入备注'
						})
					}
					refundOrderMark(data).then(res=>{
						if(res.code==200){
							this.$util.Tips({
								title: '备注成功'
							})
							this.getIndex();
							this.change = false
						}else{
							this.$util.Tips({
								title:res.message
							})
						}
					})
				}
			},
			init(){
				uni.navigateBack()
			},
			// #ifdef MP
			copyNum(id) {
				uni.setClipboardData({
					data: id,
					success: function() {}
				});
			},
			// #endif
			// #ifdef H5
			webCopy(item, index) {
				let items = item
				let indexs = index
				let self = this
				if (self.clickNum == 1) {
					self.clickNum += 1
					self.webCopy(items, indexs)
				}
			},
			// #endif
		}
	};
</script>

<style lang="scss" scoped>
	.headerBg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		background-image: linear-gradient(360deg, #F5F5F5 0%, rgba(245, 245, 245, 0) 100%),
			linear-gradient(270deg, #01ABF8 0%, #2A7EFB 100%);
		background-position: left bottom, left top;
		background-repeat: no-repeat;
		background-size: 100% 120rpx, 100% 100%;

		.inner {
			height: 356rpx;
		}
	}

	.order-details {
		position: absolute;
		width: 100%;
		padding: 0 20rpx;
	}

	.height-add {
		height: calc(120rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		height: calc(120rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
	}

	.pos-order-details .footer .more {
		font-size: 27upx;
		color: #aaa;
		width: 100upx;
		height: 64upx;
		text-align: center;
		line-height: 64upx;
		margin-right: 25upx;
		position: relative;
	}

	.pos-order-details .footer .delivery {
		border-color: #2A7EFB !important;
		background: #2A7EFB;
		color: #FFFFFF !important;
	}

	.pos-order-details .footer .more .order .arrow {
		width: 0;
		height: 0;
		border-left: 11upx solid transparent;
		border-right: 11upx solid transparent;
		border-top: 20upx solid #e5e5e5;
		position: absolute;
		left: 15upx;
		bottom: -18upx;
	}

	.pos-order-details .footer .more .order .arrow:before {
		content: '';
		width: 0;
		height: 0;
		border-left: 9upx solid transparent;
		border-right: 9upx solid transparent;
		border-top: 19upx solid #fff;
		position: absolute;
		left: -10upx;
		bottom: 0;
	}

	.pos-order-details .footer .more .order {
		width: 200upx;
		background-color: #fff;
		border: 1px solid #eee;
		border-radius: 10upx;
		position: absolute;
		top: -200upx;
		z-index: 9;
	}

	.pos-order-details .footer .more .order .item {
		height: 77upx;
		line-height: 77upx;
	}

	.pos-order-details .footer .more .order .item~.item {
		border-top: 1px solid #f5f5f5;
	}


	/*订单详情*/
	.order-details .header {
		padding: 48rpx 0 30rpx 12rpx;
	}

	.order-details .header.on {
		background-color: #666 !important;
	}
	.order-details .header .state {
		font-weight: 500;
		font-size: 36rpx;
		line-height: 50rpx;
		color: #FFFFFF;
	}

	.order-details .header .data {
		margin-top: 8rpx;
		font-size: 26rpx;
		line-height: 36rpx;
		color: #FFFFFF;
	}

	.order-details .header.on .data {
		margin-left: 0;
	}

	.order-details .header .data .state {
		font-size: 30upx;
		font-weight: bold;
		color: #fff;
		margin-bottom: 7upx;
	}

	/* .order-details .header .data .time{margin-left:20upx;} */
	.order-details .nav {
		background-color: #fff;
		font-size: 26upx;
		color: #282828;
		padding: 25upx 0;
	}

	.order-details .nav .navCon {
		padding: 0 40upx;
	}

	.order-details .nav .navCon .on {
		font-weight: bold;
		color: #e93323;
	}

	.order-details .nav .progress {
		padding: 0 65upx;
		margin-top: 10upx;
	}

	.order-details .nav .progress .line {
		width: 100upx;
		height: 2upx;
		background-color: #939390;
	}

	.order-details .nav .progress .iconfont {
		font-size: 25upx;
		color: #939390;
		margin-top: -2upx;
		width: 30upx;
		height: 30upx;
		line-height: 33upx;
		text-align: center;
		margin-right: 0 !important;
	}


	.order-details .line {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 4rpx;
	}

	.order-details .line image {
		width: 100%;
		height: 100%;
		display: block;
	}

	.order-details .wrapper {
		padding: 32rpx 24rpx;
		border-radius: 24rpx;
		margin-top: 20rpx;
		background: #FFFFFF;
		.title{
			font-weight: 600;
			font-size: 28rpx;
			color: #333333;
			border-bottom: 1px solid #EEEEEE;
			padding-bottom: 30rpx;
		}
	}

	.order-details .wrapper .item {
		font-size: 28rpx;
		line-height: 40rpx;
		color: #333333;
	}

	.order-details .wrapper .item~.item {
		margin-top: 24rpx;
	}

	.order-details .wrapper .item .conter .copy {
		height: 36rpx;
		padding: 0 12rpx;
		border: 0;
		border-radius: 18rpx;
		margin-left: 8rpx;
		background: #F5F5F5;
		font-size: 22rpx;
		line-height: 36rpx;
		color: #333333;
	}

	.order-details .wrapper .actualPay {
		margin-top: 26rpx;
	}

	.order-details .wrapper .actualPay .money {
		font-weight: bold;
		font-size: 30upx;
		color: #e93323;
	}

	.order-details .footer {
		width: 100%;
		height: 100upx;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #fff;
		padding: 0 30upx;
		border-top: 1px solid #eee;
		height: calc(100rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		height: calc(100rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
		padding-bottom: calc(0rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		padding-bottom: calc(0rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
	}

	.order-details .footer .wait {
		color: #2a7efb;
		margin-right: 30rpx;
	}

	.order-details .footer .btn {
		width: 144rpx;
		height: 56rpx;
		border: 1rpx solid #CCCCCC;
		line-height: 54rpx;
		text-align: center;
		border-radius: 28rpx;
		font-size: 24rpx;
		color: #333333;
		transform: rotateZ(360deg);

		
	}

	.order-details .footer .btn.default {
		color: #444;
		border: 1px solid #444;
	}

	.order-details .footer .btn~.btn {
		margin-left: 16rpx;
	}

	.copy-data {
		font-size: 10px;
		color: #333;
		-webkit-border-radius: 1px;
		border-radius: 1px;
		border: 1px solid #666;
		padding: 0px 7px;
		margin-left: 12px;
		height: 20px;
	}
	.productImg{
		width: 140rpx;
		height: 140rpx;
		border-radius: 16rpx;
	}
	.productInfo-box{
		padding-bottom: 32rpx;
		margin-bottom: 24rpx;
		border-bottom: 1px solid #eee;
		.product-right{
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}
		.prodyct-item{
			width: 500rpx;
			overflow: hidden;//（文字长度超出限定宽度，则隐藏超出的内容）
			white-space: nowrap;//（设置文字在一行显示，不能换行）
			text-overflow: ellipsis;//（规定当文本溢出时，显示省略符号来代表被修剪的文本
		}
		.product-name{
			font-size: 28rpx;
			color: #333333;
		}
		.product-sku{
			font-size: 22rpx;
			color: #999999;
		}
		.product-price{
			font-size: 22rpx;
			color: #333333;
		}
	}
	.scroll-view {
		box-sizing: border-box;
		white-space: nowrap;
	
		.pictrue {
			display: inline-block;
	
			+.pictrue {
				margin-left: 16rpx;
			}
		}
	}
	.on {
		border-color: #2A7EFB !important;
		background: #2A7EFB !important;
		color: #fff !important;
	}
	.scroll-img{
		width: 88rpx;
		height: 88rpx;
		margin-left: 12rpx;
	}
</style>