hire-wx-houxuanren/pagesD/dakuan.vue

<template>
	<view class="dakuan-pages">
		<view class="dakuan-header u-flex-col u-col-center u-row-center">
			<text class="text1">{{detail.time || ''}}日应支付金额</text>
			<view class="text2 u-flex">
				<text :style="{color: detail.status == 'overdue' ? '#F2413A' : '#000'}">¥{{detail.amount || '0'}}</text>
				<text v-if="detail.status == 'overdue'">已逾期</text>
			</view>
		</view>
		<view class="dakuan-body">
			<view class="body-top u-flex">
				<text class="text1">抵扣金余额：</text>
				<view class="text2 u-flex">
					<text>¥{{detail.deduction_balance || 0}}</text>
				</view>
			</view>
			<view class="body-input u-flex">
				<text class="text1">¥</text>
				<input class="input" type="digit" placeholder="请输入抵扣金额" v-model="allprice" @blur="changeprice">
				<text class="text2" @click="setall">全部抵扣</text>
			</view>
			<view class="body-item u-flex u-row-between">
				<text class="text1">抵扣金抵扣</text>
				<text class="text2 u-flex-1">-¥{{price || '0'}}</text>
			</view>
			<view class="body-item u-flex u-row-between">
				<text class="text1">提前还款优惠</text>
				<text class="text2 u-flex-1">-¥{{detail.discount_amount || '0'}}</text>
			</view>
			<view class="body-item u-flex u-row-between">
				<text class="text1">实付佣金</text>
				<text class="text2 u-flex-1" style="color: #000;">¥{{(detail.amount - price) || '0'}}</text>
			</view>
			<view class="body-beizhu u-flex u-row-between">
				<text>转账备注</text>
				<input type="text" placeholder="请填写转账成功后的交易流水号" v-model="beizhu">
			</view>
		</view>
		<view class="dakuan-down">
			<view class="dakuan-btn u-flex u-row-center">
				<text @click="tijiao">提交</text>
			</view>
			<view class="safe-area-inset-bottom"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				detail: {},
				price: '',
				beizhu: '',
				money: '',
				allprice: ''
			}
		},
		onLoad(option) {
			this.id = option.id
			this.getdata()
			this.getuser()
		},
		methods: {
			setall() {
				if (Number(this.detail.deduction_balance) > 0) {
					if (Number(this.detail.deduction_balance) < Number(this.detail.amount)) {
						this.price = Number(this.detail.deduction_balance)
						this.allprice = Number(this.detail.deduction_balance)
					} else {
						this.price = Number(this.detail.amount)
						this.allprice = Number(this.detail.amount)
					}
				}
			},
			tijiao() {
				uni.showLoading({
					mask: true,
					title: "请稍后"
				})
				this.$u.post('/api/hr.order/pay', {
					period_id: this.id,
					deduction: this.price,
					transaction_no: this.beizhu
				}).then(res => {
					this.$u.toast(res.msg)
					if (res.code == 1) {
						setTimeout(() => {
							uni.navigateBack()
						}, 800)
					}
				})
			},
			getuser() {
				this.$u.post('/api/hr.user/index').then(res => {
					this.money = res.data.money
				})
			},
			changeprice(e) {
				if (e.detail.value > 0) {
					var price = Number(Number(e.detail.value).toFixed(2))
					if (price > Number(this.detail.amount)) {
						price = Number(this.detail.amount)
					}
					if (price > this.detail.deduction_balance) {
						this.$u.toast("抵扣金不足")
						price = this.detail.deduction_balance > 0 ? this.detail.deduction_balance : ''
					}
					this.price = price
					this.allprice = price
				} else {
					this.price = ''
					this.allprice = ''
				}
			},
			getdata() {
				this.$u.post('/api/hr.order/pay_pre', {
					period_id: this.id
				}).then(res => {
					if (res.code == 1) {

						// status.状态:unpaid=未支付,paying=支付中,paid=已支付,refunding=退款中,refunded=已退款,overdue.已逾期, discount_amount.折扣金额

						this.detail = res.data
					} else {
						this.$u.toast(res.msg)
						setTimeout(() => {
							uni.navigateBack()
						}, 800)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.dakuan-pages {
		.dakuan-down {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 750rpx;
			background: #FDFDFD;
			box-shadow: 0rpx 0rpx 0rpx 0rpx rgba(0, 0, 0, 0.2);
			z-index: 99;

			.dakuan-btn {
				padding: 12rpx 0;

				text {
					width: 686rpx;
					line-height: 88rpx;
					background: #0C66C2;
					border-radius: 12rpx;
					text-align: center;
					font-size: 32rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
				}
			}
		}

		.dakuan-body {
			width: 686rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin: 0 auto;
			padding: 0 20rpx;

			.body-beizhu {
				height: 96rpx;
				border-top: 2rpx solid #F4F4F4;
				margin-top: 14rpx;

				text {
					font-size: 26rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #1A1C24;
				}

				input {
					font-size: 26rpx;
					flex: 1;
					text-align: right;
				}
			}

			.body-item {
				padding: 14rpx 0;

				.text1 {
					font-size: 26rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #1A1C24;
				}

				.text2 {
					font-size: 26rpx;
					font-family: JDZhengHT-Regular, JDZhengHT;
					font-weight: 400;
					color: #F2413A;
					text-align: right;
				}
			}

			.body-input {
				height: 110rpx;
				border-bottom: 2rpx solid #F4F4F4;
				margin-bottom: 14rpx;

				.text1 {
					font-size: 52rpx;
					font-family: JDZhengHT-Regular, JDZhengHT;
					font-weight: 400;
					color: #222222;
				}

				.input {
					flex: 1;
					margin: 0 12rpx;
					font-size: 32rpx;
					height: 110rpx;
				}

				.text2 {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #0C66C2;
				}
			}

			.body-top {
				padding: 30rpx 0;

				.text1 {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #777777;
				}

				.text2 {
					font-size: 24rpx;
					font-family: JDZhengHT-Light, JDZhengHT;
					font-weight: 300;
					color: #222222;
				}
			}
		}

		.dakuan-header {
			height: 218rpx;

			.text1 {
				font-size: 28rpx;
				font-family: SFPro-Regular, SFPro;
				font-weight: 400;
				color: #777777;
				margin-bottom: 20rpx;
			}

			.text2 {
				font-size: 52rpx;
				font-family: JDZhengHT-Regular, JDZhengHT;
				font-weight: 400;
				color: #141414;

				text:nth-child(2) {
					width: 68rpx;
					line-height: 32rpx;
					background: #F3E2E0;
					border-radius: 6rpx;
					text-align: center;
					font-size: 20rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #F2413A;
					margin-left: 12rpx;
				}
			}
		}
	}

	page {
		background-color: #F4F4F4;
	}
</style>