hotelHomestayWx/pages/house/payAdd.vue

<template>
	<view class="page" :style="{'height':(h-th)+'px','padding-top':mt+'px'}">
		<c-nav-bar title="添加收款" :showIcon="true"></c-nav-bar>
		<view class="content">
			<view class="box">
				<view class="item">
					<text>订单金额</text>
					<text style="color: #245BED;">{{money}}</text>
				</view>
				<view class="item">
					<text>已付金额</text>
					<text style="color: #FF9B17;">{{haspay}}</text>
				</view>
				<view class="item">
					<text>还需付款</text>
					<text style="color: #F14D4D;">{{money-haspay}}</text>
				</view>
			</view>
			<view style="background-color:#fff;padding:0 30rpx 20rpx;">
				<u-cell-group :border="false" customStyle="margin:0 -30rpx">
					<u-cell class="pd15">
						<text slot="icon" class="label">类型</text>
						<view slot="title" class="title">
							<u-radio-group v-model="dataForm.flowTypeName" iconPlacement="left" style="white">
								<u-radio :customStyle="{padding: '8rpx 0',margin:'0 0 0 30px'}"
									v-for="(item, index) in checkboxList" :key="index" :label="item.name" :name="item.name" shape="circle"
									size="30" labelSize="30" icon-size="22">
								</u-radio>
							</u-radio-group>
						</view>
					</u-cell>
					<u-cell class="pd15" :isLink="true" @click="showPay=true">
						<text slot="icon" class="label">支付方式</text>
						<view slot="title" class="title">
							{{dataForm.payTypeName}}
						</view>
					</u-cell>
					<u-cell class="pd15">
						<text slot="icon" class="label">金额</text>
						<view slot="title" class="title">
							<u--input border="none" class="input" inputAlign="right" placeholderStyle="font-size:26rpx"
								type="number" placeholder="请输入金额" v-model="dataForm.amount"></u--input>
						</view>
					</u-cell>
					<u-cell class="pd15" :border="false">
						<text slot="icon" class="label">备注</text>
						<view slot="title" class="title">
							<u--input border="none" class="input" inputAlign="right" placeholderStyle="font-size:26rpx"
								placeholder="请输入" v-model="dataForm.remark"></u--input>
						</view>
					</u-cell>
				</u-cell-group>
			</view>
		</view>
		<view class="btn">
			<text @click="conform()">确定</text>
		</view>
		<u-picker :itemHeight="88" :immediateChange="true" :show="showPay" :columns="payStyle" title="支付方式选择"
			keyName="label" :defaultIndex="passengerDefault" @cancel="showPay=false;"
			@confirm="passengerConfirm"></u-picker>
	</view>
</template>

<script>
import list from '../../uni_modules/uview-ui/libs/config/props/list';
	export default {
		data() {
			return {
				money: '',
				showPay: false,
				passengerDefault: [0],
				checkboxList:[{
					name:'收款'
				}],
				dataForm: {
					flowType: '1',
					flowTypeName:'收款',
					amount: '',
					remark: '',
					payType: '',
					payTypeName: ''
				},
				haspay:0,
				
				payStyle: [
					[{
							label: '微信',
							val: 1
						}, {
							label: '支付宝',
							val: 2
						},
						{
							label: '云闪付',
							val: 3
						}
					]
				],
			}
		},
		onLoad(opt) {
			//this.haspay=0;
			this.money = opt.money;
			this.list = JSON.parse(opt.list);
			for(let i=0;i<this.list.length;i++){
				if(this.list[i].flowType==1){ //收款
					this.haspay+=parseFloat(this.list[i].amount);
				}else{
					this.haspay-=parseFloat(this.list[i].amount);
				}
			}
		},
		methods: {
			//  支付方式
			passengerConfirm(e) {
				this.dataForm.payType = e.value[0].val;
				this.dataForm.payTypeName = e.value[0].label;
				this.showPay = false;
			},
			conform() {
				if(this.dataForm.payType==''){
					return this.$showToast('请选择支付方式');
				}
				
				if(this.dataForm.amount>(this.money-this.haspay)) return this.$showToast('支付金额不能大于剩余付款金额')
				
				if(this.dataForm.flowTypeName=='收款'){
					this.dataForm.flowType=1;
				}else{
					this.dataForm.flowType=2;
				}
				this.getOpenerEventChannel().emit('addSuccess', {
					'data': this.dataForm,
				});
				uni.navigateBack();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pd15{padding: 10rpx 0!important;}
	.btn {
		position: fixed;
		background-color: #fff;
		padding: 30rpx 0;
		z-index: 9;
		bottom: 0;
		width: 100%;
		left: 0;
		text-align: center;

		text {
			display: inline-block;
			width: 90%;
			height: 96rpx;
			line-height: 96rpx;
			background-color: #1372FF;
			color: #fff;
			font-size: 34rpx;
			border-radius: 48rpx;

		}
	}

	.page {
		background: #F3F4F4;
		box-sizing: border-box;
		overflow-y: auto;
		overflow-x: auto;
	}

	.content {
		
		width: 94%;
		margin: 20rpx auto 0;
		box-sizing: border-box;
		
		.title{
			text-align: right;
		}
		.box {
			padding: 28rpx 30rpx 0;
			border-radius: 10rpx;
			margin: 30rpx 0;
			background-color: #fff;

			.item {
				padding-bottom: 32rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				&:last-child {
					border: 0;
				}

				text {
					font-size: 30rpx;
				}
			}
		}
	}
</style>