wit-uniapp/pages/my/Myorder/Orderdetails/Orderdetails.vue

<template>
	<view class="billall">
		<view class="top">
			<view class="title">总费用</view>
			<view class="money">{{alldata.payAmount}}</view>
		</view>
		<view class="detailContent">
			<view class="mb8">当前状态：{{alldata.status}}</view>
			<view class="mb8">账单时间：{{alldata.createDate}}</view>
			<view class="mingxi">
				<text>账单明细：</text>
				<view>
					<view v-for="(item, index) in indexList" :key="index" class="mb4">
						{{item.costType}}:￥{{item.amount}}
					</view>
				</view>
			</view>
		</view>
		<view class="dibu" v-show="dibucaidan">
		
			<view class="yucun" v-if='tk'>
				<u-button type="error" text="退费" @click="prestore('退费')"></u-button>
			</view>
		</view>
		<u-popup :show="showpayjine" @close="closepay1" @open="openpay1" mode="bottom" :round="10" :closeable='true' :closeOnClickOverlay='false'>
			<view class="paytall1">
				<!-- <text>请选择支付方式</text> -->
				<view class="hejitop">
					退费
				</view>
				<view class="zhifufs">
			 	<u--form labelWidth="130" labelPosition="left" :model="model1"  ref="uForm">
						<u-form-item label="退费金额:" prop="userInfo.amount" borderBottom ref="item1">
							<u--input v-model="model1.userInfo.amount" border="none"></u--input>
						</u-form-item>
						<u-form-item label="退费原因:" prop="userInfo.refundReason" borderBottom ref="item1">
							<u--input v-model="model1.userInfo.refundReason" border="none"></u--input>
						</u-form-item>
					</u--form>
				</view>
				<view class="dcc">
					<view class="">
						<u-button type="primary" :plain="true" text="取消" @click="closepay1"></u-button>
					</view>
					<view class="">
						<u-button type="primary" text="确定" @click="confirmtf"></u-button>
					</view>
				</view>
			</view>
		</u-popup>
		<u-notify ref="uNotify" message=""></u-notify>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tk:false,
				zhifucanvas: false,
				dibucaidan: true,
				prestorename: '',
				totalnumber: 0,
				setyesno: true,
				indexList: [],
				dataList: [],
				showtype: false,
				showdct: false,
				myid: '',
				alldata: {},
				showfloor: false,
				loading: false,
				columns: [],
				columnData: [],
				myday: '',
				mytype: '全部',
				showPicker: false,
				//myday: currentDate,
				showpayjine: false,
				PropertyTypedata:[],
				model1: {
					userInfo: {
						amount: '',
						refundReason:'',
					},
				},
				billstype:[],
				// rules: {
				// 	'userInfo.amount': {
				// 		type: 'string',
				// 		required: true,
				// 		message: '请填写退费金额',
				// 		trigger: [ '']
				// 	},
				// 	'userInfo.refundReason': {
				// 		type: 'string',
				// 		required: true,
				// 		message: '请填写退费原因',
				// 		trigger: ['blur', 'change']
				// 	},
				// },

			}
		},
		//监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参
		onLoad(options) {
		//	console.log(options.companyOrgId);
			this.myid = options.companyOrgId;
			this.getalldata(this.myid)
			
			let getDictDataList = uni.getStorageSync('getDictDataList');
			console.log('111111111111111111', getDictDataList)
			for (let i = 0; i < getDictDataList.length; i++) {
			    if (getDictDataList[i].dictType == 'PayType') {
			        this.billstype = getDictDataList[i].dataList
			    }  
				if (getDictDataList[i].dictType == 'PropertyType') {
				    this.PropertyTypedata = getDictDataList[i].dataList
				}  
				
				
			}
			
			
		},
		//监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady() {
			// 微信小程序需要用此写法

		},

		//监听页面隐藏
		onHide() {},
		//监听窗口尺寸变化
		onResize() {},
		//监听页面卸载
		onUnload() {},
		//监听用户下拉动作，一般用于下拉刷新
		onPullDownRefresh() {},


		methods: {
			prestore() {
				this.showpayjine = true;
			},

			confirmtf() {
				 
				if(this.model1.userInfo.amount==''){
					this.$refs.uNotify.error('退款金额不能为空')	
				}else if(this.model1.userInfo.refundReason==''){
					this.$refs.uNotify.error('退款原因不能为空')	
				}else{
					 if(this.model1.userInfo.amount>this.alldata.payAmount){
					 	this.$refs.uNotify.error('您输入的退款金额不能大于支付金额')	
					 }else{
					 	
					 	let postdata = {
					 		amount: this.model1.userInfo.amount,
					 		id: '',
					 		orderId:this.alldata.id,
					 		refundReason: this.model1.userInfo.refundReason
					 	}
					 	
					 	this.$api.post('/refundinfo', postdata)
					 		.then(res => {
					 			if (res.data.code == 0) {
					 				this.$refs.uNotify.success('退费申请成功')
					 			} else {
					 				this.$refs.uNotify.error(res.data.msg)
					 			}
					 	 this.showpayjine = false;
					 		})
					 }	
				}																			
			},


			getalldata(e) {
				this.indexList=[];
				this.$api.get('/order/' + e, {})
					.then(res => {
					console.log('111111111111111111', res.data.data)
						if (res.data.data.status == '-1') {
							res.data.data.status = '已关闭';
							this.tk=false;
						} else if (res.data.data.status == '0') {
							res.data.data.status = '待支付';
							this.tk=false;
						} else if (res.data.data.status == '1') {
							res.data.data.status = '已支付';
							this.tk=true;
						}

						this.alldata = res.data.data;
						
						this.model1.userInfo.amount=this.alldata.payAmount;
						//this.$refs.uForm.validateField('userInfo.amount')
						//this.indexList = res.data.data.billLists;
						
						if(res.data.data.billLists.length==0){
							this.indexList=[];
						}else{
							function transform(a, b) {
							    loop: for (let i = 0; i < a.length; i++) {
							        for (let j = 0; j < b.length; j++) {
							            if (a[i].billType == b[j].dictValue) {
							                a[i].billType = b[j].dictLabel;
							                continue loop;
							            }
							        }
							        a[i].billType =  a[i].billType;
							    }
							    return a;
							}	
							function transform1(a, b) {
							    loop: for (let i = 0; i < a.length; i++) {
							        for (let j = 0; j < b.length; j++) {
							            if (a[i].costType == b[j].dictValue) {
							                a[i].costType = b[j].dictLabel;
							                continue loop;
							            }
							        }
							        a[i].costType =  a[i].costType;
							    }
							    return a;
							}							
													
									
							this.indexList=transform(res.data.data.billLists, this.billstype)	;
							this.indexList=transform1(res.data.data.billLists, this.PropertyTypedata)	;										
						}
						  console.log('111111111111111111',this.indexList)																			
					})
			},

			closepay1() {
				 this.showpayjine = false;
			},
			openpay1() {
				console.log('open');
			},




		}
	}
</script>

<style lang="scss">
	.Currentamount {
		padding-left: 30rpx;
		height: 50rpx;
		line-height: 50rpx;
		color: #BCB3A7;

		span {
			color: #FA5555;
			padding-left: 9rpx;
		}
	}

	.hejitop {
		width: 750rpx;
		text-align: center;
		font-weight: bold;
		font-size: 40rpx;
		margin-bottom: 30rpx;
	}

	.zhifufs {
		width: 750rpx;
		height: 250rpx;
	}

	.paytall1 {
		width: 750rpx;
		height: 450rpx;
		background-color: #fff;
	}

	.dcc {
		margin: 0 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;

		view {
			width: 200rpx;
		}
	}

	.tuifeiyy {
		height: 400rpx;
		background-color: #fff;
		width: 750rpx;
	}

	.Orderstatus {
		padding: 30rpx;
	}

	.Orderstatus1 {
		height: 50rpx;
		line-height: 50rpx;
	}

	.Callfee {
		width: 100rpx;
		height: 45rpx;
		text-align: center;
		line-height: 45rpx;
		color: #5C8FFF;
		border: 1px solid #5C8FFF;
		font-size: 22rpx;
		position: absolute;
		bottom: 10rpx;
		right: 10px;
		font-weight: bold;
	}

	.companylist {
		margin: 20rpx 30rpx;
		background: #fff;
		height: 230rpx;
		border-radius: 10px;
		position: relative;

		h3 {
			height: 70rpx;
			line-height: 70rpx;
			padding-left: 30rpx;
		}
	}

	.settled {
		background-color: #09C700;
		width: 100rpx;
		height: 40rpx;
		text-align: center;
		line-height: 40rpx;
		color: #fff;
		font-size: 14rpx;
		position: absolute;
		top: 0px;
		right: 0px;
		border-top-right-radius: 10rpx;
		border-bottom-left-radius: 10rpx;
	}

	.outstanding {
		background-color: #30D3A2;
		width: 100rpx;
		height: 40rpx;
		text-align: center;
		line-height: 40rpx;
		color: #fff;
		font-size: 14rpx;
		position: absolute;
		top: 0px;
		right: 0px;
		border-top-right-radius: 10rpx;
		border-bottom-left-radius: 10rpx;
	}

	.guanbi {
		background-color: red;
		width: 100rpx;
		height: 40rpx;
		text-align: center;
		line-height: 40rpx;
		color: #fff;
		font-size: 14rpx;
		position: absolute;
		top: 0px;
		right: 0px;
		border-top-right-radius: 10rpx;
		border-bottom-left-radius: 10rpx;
	}

	.dibu {
		position: fixed;
		right: 0;
		left: 0;
		bottom: 0;
		width: 750rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		background-color: #fff;
	}

	.yucun {
		width: 200rpx;

	}

	.billall {
		padding: 40rpx 80rpx;
		background-color: #fff;
		.top{
			text-align: center;
			border-bottom: 1px solid #eee;
			color: #0C1935;
			.title{
				font-size: 32rpx;
			}
			.money{
				font-size: 48rpx;
				margin: 24rpx 0 40rpx;
				font-weight: 600;
			}
		}
		.detailContent{
			color: #9DA0AC;
			padding-top: 16rpx;
			.mingxi{
				display: flex;
			}
			.mb8{margin-bottom: 16rpx;}
			.mb4{margin-bottom: 8rpx;}
		}
	}

	.topbill {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100rpx;
		background-color: #e6e6e6;
	}

	.topbilledit {
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.changetime1 {
		padding-right: 10rpx;
	}
</style>