front-end/jdApp/src/pagesOrder/refundDetail.vue

<template>
	<view class="app-content">
		<view class="flex refund-item">
			<view class="refund-label">退款方式：</view>
			<view class="flex list">
				<view class="flex" >{{refundType==1?'退货并退款':'仅退款'}}</view>
			</view>
		</view>
		<view class="refund-item-list" v-if="refundType==1">
			<view class="refund-label">退货商品：</view>
			<view>
				<view class="list" v-for="(res,i) in product" :key="i">
				<view class="flex list-title" >
					{{res.name}} ￥{{parseFloat(res.xhUnitPrice)}} x {{res.xhNum}}{{res.xhUnitName}} = ￥{{parseFloat(res.xhPrice)}}
				</view>
			</view>
			</view>
		</view>
		<view class="flex refund-item">
			<view class="refund-label"><text></text>退款金额：</view>
			<view class="list">¥{{refundPrice}}</view>
		</view>
		<view class=" refund-item">
			<view class="refund-label">备注信息：</view>
			<view class="list">{{remark}}</view>
		</view>
		<view style="text-align:center;">
			<button class="admin-button-com big blue" style="margin:30upx auto 10upx auto;width:50%;" @click="goBack()">返回</button>
		</view>
		<view style="text-align:center;">
			<button class="admin-button-com big blue" style="margin:20upx auto 10upx auto;width:50%;" @click="goWaste()">去报损</button>
		</view>
	</view>
</template>
<script>
import { refundDetail } from "@/api/refund";
export default {
	data() {
		return {
			product:'',
			refundPrice:0,
			refundType:1,
			remark:''
		};
	},
	onShow() {
	},
	methods: {
		goBack(){
			uni.navigateBack()
		},
		goWaste(){
			this.$util.pageTo({ url: '/pagesOrder/refundSuccess?id='+this.option.id})
		},
		init() {
			refundDetail({ id: this.option.id }).then(res=>{
				this.product = res.data.itemList||[];
				this.refundType = res.data.info.refundType||0;
				this.refundPrice = res.data.info.refundPrice ? parseFloat(res.data.info.refundPrice) : 0
				this.remark = res.data.info.remark;
			})
		}
	}
};
</script>
<style lang="scss" scoped>
	.app-content{
		height: calc(100vh - 30upx * 2);
		padding: 30upx;
		background: #FFFFFF;
		.radioBtn{
			width: 30upx;
			height: 30upx;
			margin-right: 10upx;
			border: 1upx solid #ddd;
			border-radius: 50%;
			&.active{
				position: relative;
				border: 1upx solid #3385ff;
				&:after{
					content: '';
					position: absolute;
					width: 18upx;
					height: 18upx;
					background: #3385ff;
					border-radius: 50%;
				}
			}
		}
		.refund-item-list{
			display: flex;
			padding-bottom: 30upx;
			border-bottom: 1upx solid #dddddd;
			.refund-label{
				width: 200upx;
				text{color: red;}
			}
			.list{
				margin-bottom: 10upx;
				.list-title{
					height: 60upx;
					padding-bottom: 20upx;

				}
				.list-val{
					input{
						width: 150upx;
						border: 1upx solid #ddd;
					}
					text{
						padding: 0 30upx;
					}
				}
			}
		}
		.refund-item{
			display: flex;
			padding: 20upx 0;
			.refund-label{width: 200upx;text{color: red;}}
			input{
				border: 1upx solid #ddd;
			}
			textarea{
				width: calc(100% - 210upx);
				border: 1upx solid #ddd;
				height:150upx;
			}
		}
		.btn-box{
			.btn{
				width: 200upx;
				height: 60upx;
				border: 1upx solid #666666;
				border-radius: 10upx;
				&.active{
					background: #3385ff;
					color: #fff;
					border: 1upx solid #3385ff;
				}
			}
		}
	}
</style>