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

<template>
	<view class="billall">

		<view class="u-listdata">

			<view class="Orderstatus">
				<view class="Orderstatus1">
					订单状态：{{alldata.status}}
				</view>
				<view class="Orderstatus1">
					支付金额：{{alldata.payAmount}}
				</view>
				<view class="Orderstatus1">
					支付时间：{{alldata.payAt}}
				</view>


			</view>

			<u-list :pagingEnabled='true'>
				<u-list-item v-for="(item, index) in indexList" :key="index">

					<view class="companylist">
						<view class="outstanding" v-if='item.status==2'>
							未支付
						</view>
						<view class="settled" v-if='item.status==1'>
							已支付
						</view>
						<view class="guanbi" v-if="item.status=='3'">
							支付失败
						</view>

						<view class="Currentamount" style="margin-top: 20rpx;">
							金额: <span>￥{{item.amount}}</span>
						</view>
						<view class="Currentamount">
							账单类型: {{item.billType}}
						</view>
						<view class="Currentamount">
							计费周期: {{item.costCycle}}
						</view>
						<view class="Currentamount">
							创建时间: {{item.createDate}}
						</view>
						

					</view>

				</u-list-item>
			</u-list>

		</view>

		<view class="dibu" v-show="dibucaidan">
			<!-- <view class="yucun">
		<u-button type="success" text="预存" @click="prestore('预存')"></u-button>
	</view>
	<view class="yucun">
		<u-button type="primary" text="补助" @click="prestore('补助')"></u-button>
	</view> -->
			<view class="yucun">
				<u-button type="error" text="退费" @click="prestore('退费')"></u-button>
			</view>
		</view>

		<!-- 	<u-modal :show="showtype" @cancel='showtype=false' @confirm="confirmtf" :showCancelButton=true title="提示"
			content='请确定是否退费？'></u-modal> -->
		<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>
	//import { isEmpty, getDictDataList } from "@/utils/index";
	export default {
		components: {

		},
		
		data() {

			return {
				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,
				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
			    }  
			}
			
			
		},
		//监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
		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 = '已关闭'
						} else if (res.data.data.status == '0') {
							res.data.data.status = '待支付'
						} else if (res.data.data.status == '1') {
							res.data.data.status = '已支付'
						}

						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;
							}							
							this.indexList=transform(res.data.data.billLists, this.billstype)											
						}
						//  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 {}

	.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>