cunzaicourseMall_user_app/pages_company/order/lineDetails.vue

<template>
	<view class="column hb bgf">
		<view class="column align-center pt50 mlr50 pb40" style="border-bottom: 2rpx solid #f5f5f5;">
			<view class="base-success fs52 bold">
				<text>+</text>
				<text>{{countDeatil.payMoney?countDeatil.payMoney.toFixed(2):'0.00'}}</text>
			</view>
			<view class="mt8 base-color-3" v-if="countDeatil.remark">备注:{{countDeatil.remark}}</view>
		</view>
		<view class="m40 fs24">
			<view class="justify-start align-center ptb4">
				<text style="width: 20%;" class="base-color-6">付款时间</text>
				<text>{{countDeatil.payTime}}</text>
			</view>
			<view class="justify-start align-center ptb4">
				<text style="width: 20%;" class="base-color-6">付款单号</text>
				<text>{{countDeatil.payCode}}</text>
			</view>
			<view class="justify-start align-center ptb4">
				<text style="width: 20%;" class="base-color-6">商户单号</text>
				<text>{{countDeatil.tradeNo}}</text>
			</view>
		</view>
		<view class="ptb40 fs24 mlr40" style="border-top: 2rpx solid #f5f5f5;border-bottom: 2rpx solid #f5f5f5;"
		v-if="countDeatil.refundAuditStatus!==null">
			<view class="justify-start align-center ptb4">
				<text style="width: 20%;" class="base-color-6">退款记录</text>
				<view>
					<view class="base-color-red mb8" v-if="countDeatil.refundAuditStatus==2">
						已退款￥{{countDeatil.refundMoney?countDeatil.refundMoney.toFixed(2):'0.00'}}</view>
					<view class="orangecol" v-if="countDeatil.refundAuditStatus==1">
						退款中￥{{countDeatil.refundMoney?countDeatil.refundMoney.toFixed(2):'0.00'}}</view>
					<view class="orangecol" v-if="countDeatil.refundAuditStatus==0">
						待退款￥{{countDeatil.refundMoney?countDeatil.refundMoney.toFixed(2):'0.00'}}</view>
					<text>{{countDeatil.refundTime}}</text>
				</view>
			</view>
		</view>
		<view class="justify-start align-center p20 box mt20">
			<view class="fs28 mr20" v-if="countDeatil.refundAuditStatus">当前状态</view>
			<view class="refund" @click="showRefund=true" v-if="countDeatil.refundAuditStatus==null">退款</view>
			<view class="review" @click="showReview=true" v-if="countDeatil.refundAuditStatus==0">退款审核</view>
			<view class="refunding" v-if="countDeatil.refundAuditStatus==1">退款中</view>
			<view class="refuned" v-if="countDeatil.refundAuditStatus==2">已退款</view>
		</view>
		<view>
			<u-modal :show="showRefund" :title="title" :content='content'
			:showCancelButton="true" @cancel='showRefund=false' @confirm='toRefund'></u-modal>
		</view>
		<view>
			<u-modal :show="showReview" :title="titleReview" :content='contentReview'
			 :showCancelButton='true' @cancel='showReview=false' @confirm='toReview'></u-modal>
		</view>
	</view>
</template>

<script>
	import {getPaymentDetail,toReviewRefund,refundStorePayment} from '@/api/payment'
	export default {
		data() {
			return {
				paymentId:null,
				showRefund:false,
				showReview:false,
				title:'退款',
				content:'确认退款金额并退款！',
				titleReview:'审核',
				contentReview:'确认退款金额并同意当前订单退款！',
				countDeatil:[]
			}
		},
		onLoad(option) {
			this.paymentId=option.paymentId
			this.getPaymentDetails()
			console.log(this.paymentId)
		},
		methods: {
			toReview(){
				const data={
					paymentId:this.paymentId
				}
				toReviewRefund(data).then(res=>{
					if(res.code==200){
						uni.showToast({
							icon:'none',
							title: '操作成功！',
						});
						this.showReview=false
						this.getPaymentDetails()
					}else{
						uni.showToast({
							icon:'none',
							title: res.msg,
						});
					}
				})
			},
			toRefund(){
				const data={
					paymentId:this.paymentId,
					refundMoney:this.countDeatil.payMoney
				}
				refundStorePayment(data).then(res=>{
					if(res.code==200){
						uni.showToast({
							icon:'none',
							title: '操作成功！',
						});
						this.showRefund=false
						this.getPaymentDetails()
					}else{
						uni.showToast({
							icon:'none',
							title: res.msg,
						});
					}
				})
			},
			getPaymentDetails(){
				getPaymentDetail({paymentId:this.paymentId}).then(res=>{
					console.log(res)
					if(res.code==200){
						console.log(res)
						this.countDeatil=res.data
					}else{
						uni.showToast({
							icon:'none',
							title: res.msg,
						});
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.box{
	view{
		padding: 10rpx 28rpx;
		border-radius: 40rpx;
		font-size: 28rpx;
	}
}
.review{
	background-color: #ff8b06;
	color: #fff;
}
.refund{
	background-color: #ff1201;
	color: #fff;
}
.refunding{
	color: #ff8b06;
}
.refuned{
	color: #ff1201;
}
.orangecol{
	color: #ffa006;
}
</style>