pages/sub_medical/pay.vue

<template>
	<view class="pay">
		<u-cell-group>
			<u-cell-item :title="msg.mergingName" :title-style="tstyle" :arrow="false">
				<u-image slot="icon" src="./images/cush.png" width="60" height="60" mode="aspectFit"></u-image>
			</u-cell-item>
			<u-cell-item title="缴费金额" :arrow="false" :value="msg.mergingSubtotal+'元'" :value-style="vstyle"></u-cell-item>
		</u-cell-group>
		<u-cell-group>
			<u-cell-item title="医院名称" :arrow="false" :value="msg.hospitalName"></u-cell-item>
			<u-cell-item title="订单号" :arrow="false" :value="msg.billNo"></u-cell-item>
			<u-cell-item title="就诊日期" :arrow="false" :value="msg.date"></u-cell-item>
			<!-- <u-cell-item title="截止日期"  :arrow="false" value="2020/10/28 23:29:29"></u-cell-item> -->
			<u-cell-item title="交易状态" :arrow="false" :value="msg.status_ok" :value-style="msg.status=='wip'?status_style:vstyle"></u-cell-item>
		</u-cell-group>
		<u-button @click="msg.status=='wip'?query():open()" :custom-style="payBtn" v-if="kind =='unpay'">{{msg.status=='wip'?'查询订单状态':'立即支付'}}</u-button>
		<u-button @click="" :custom-style="payBtn" v-if="kind =='payed'&& msg.notifyStatus == false">通知医院</u-button>
		<!-- 支付密码弹框 -->
		<uni-popup ref="showPassword" class="pwd-wrapper">
			<view class="uni-tip uni-pwd">
				<text class="uni-tip-title">请输入支付密码</text>
				<view class="pwd-text-wrap">
					<password-input @tap="openKeyBoard('number')" :length="length" :gutter="0" :list="numberList"></password-input>
				</view>
			</view>
		</uni-popup>
		<keyboard-package ref="number" @onInput="onInput" @onDelete="onDelete" @onConfirm="onConfirm" :disableDot="true" />
	</view>
</template>

<script>
	import keyboardPackage from "./z_components/keyboard-package/keyboard-package.vue"
	import passwordInput from "./z_components/password-input/password-input.vue"
	import uniPopup from './z_components/uni-popup/uni-popup.vue'
	export default {
		components: {
			uniPopup,
			keyboardPackage,
			passwordInput
		},
		data() {
			return {
				numberList: [],
				length: 6,
				type: 'number',
				tstyle: {
					marginLeft: '10rpx',
					fontWeight: 'bold'
				},
				vstyle: {
					color: '#FF6F6F',
					fontSize:'30rpx'
				},
				status_style: {
					color: '#18B566',
					fontSize:'30rpx'
				},
				payBtn: {
					backgroundColor: ' #2FA8E1',
					padding: '50rpx 0',
					color: '#FFFFFF',
					width: ' 600rpx',
					fontSize: '30rpx',
					border: '1px solid #2FA8E1',
					marginTop: '50rpx'
				},
				msg: {},
				kind:''
			}
		},
		methods: {
			// 呼起键盘
			openKeyBoard(key) {
				this.type = key;
				this.$refs[key].open();
			},
			// 输入密码
			onInput(val) {
				this.numberList.push(val)
				if (this.numberList.length == this.length) {
					this.$refs.showPassword.close()
					this.$refs[this.type].close()
					this.pay()
				}
			},
			//完成输入点击完成
			onConfirm() {
				let length = this.numberList.length
				if (length == this.length) {
					this.$refs.showPassword.close()
					this.$refs[this.type].close()
				} else {
					this.numberList = []
					uni.showToast({
						title: '密码错误',
						icon: 'none'
					})
				}
			},
			//删除密码
			onDelete(val) {
				this.numberList.pop(val)
			},
			//打开密码输入框
			open() {
				this.numberList = []
				this.$refs.showPassword.open()
				this.openKeyBoard('number')
			},
			pay() {
				let that = this
				let pwd = ''
				let billno = that.msg.billNo
				that.numberList.forEach(item => {
					pwd += item + ''
				})
				let param = {
					paypwd: pwd,
					billno
				}
				that.$u.post('/medicalapi/pay', param).then(res => {
					let status = res.status
					let obj = that.msg
					let date = res.transdate.substr(0, 4) +
						"-" + res.transdate.substr(4, 2) + "-" + res.transdate.substr(6, 2) + " " + res.transtime.substr(0, 2) + ":" +
						res.transtime.substr(2, 2) + ":" + res.transtime.substr(4, 2) 
						setTimeout(()=>{
							uni.navigateTo({
								url: `/pages/sub_medical/payResult?status=${status}&msg=${JSON.stringify(obj)}&date=${date}`
							})
						},1500)
				})
			},
			query() {
				let that = this
				let billno = that.msg.billNo
				that.$u.post('/medicalapi/pay/query/' + billno, {}).then(res => {
					let status = res.status
					if(status == 'wip'){
						uni.showToast({
							icon:'none',
							title:'订单正在支付中，请稍等...'
						})
					}else{
						let status = res.status
						let obj = that.msg
						let date = res.transdate.substr(0, 4) +
							"-" + res.transdate.substr(4, 2) + "-" + res.transdate.substr(6, 2) + " " + res.transtime.substr(0, 2) + ":" +
							res.transtime.substr(2, 2) + ":" + res.transtime.substr(4, 2) 
							setTimeout(()=>{
								uni.navigateTo({
									url: `/pages/sub_medical/payResult?status=${status}&msg=${JSON.stringify(obj)}&date=${date}`
								})
							},1500)
					}
				})
			}
		},
		onLoad(options) {
			let msg = JSON.parse(options.msg)
			let id = options.id
			this.kind = id
			if(id == 'unpay'){
				msg.date = msg.medicalDate.substr(0, 4) + '-' + msg.medicalDate.substr(4, 2) + '-' + msg.medicalDate.substr(6, 2) +
					' ' + msg.medicalDate.substr(8, 2) + ':' + msg.medicalDate.substr(10, 2) + ':' + msg.medicalDate.substr(12, 2)
				switch (msg.status) {
					case 'init':
						msg.status_ok = '未支付';
						break
					case 'wip':
						msg.status_ok = '订单正在支付中...'
						break
				}
				this.msg = msg
			}else if(id == 'payed'){
				msg.date = msg.medicaldate.substr(0, 4) + '-' + msg.medicaldate.substr(4, 2) + '-' + msg.medicaldate.substr(6, 2) +
					' ' + msg.medicaldate.substr(8, 2) + ':' + msg.medicaldate.substr(10, 2) + ':' + msg.medicaldate.substr(12, 2)
					msg.billNo = msg.billno
					msg.mergingSubtotal = msg.mergingsubtotal
					msg.mergingName = msg.mergingname
					msg.status_ok = '已完成'
					msg.hospitalName = msg.hospitalname
				this.msg = msg
			}
		}
	}
</script>

<style lang="scss" scoped>
	.u-cell-box {
		margin-bottom: 30rpx;
	}

	.pay {
		font-family: "PingFang-SC-Medium";
	}

	.pwd-wrapper {
		background: rgba(0, 0, 0, .4);
		z-index: 1;

		/deep/.uni-popup__wrapper.uni-custom.center {
			.uni-popup__wrapper-box {
				position: unset;
				max-width: none;
				max-height: none;
				overflow-y: hidden;
				background: none;
				margin-top: -70rpx;
				padding: 60rpx 30rpx 30rpx;
			}

			.pwd-text-wrap {
				width: 100%;
				padding: 50rpx 43rpx 60rpx;
				box-sizing: border-box;
			}
		}

		.uni-tip {
			/* #ifndef APP-NVUE */
			display: flex;
			flex-direction: column;
			/* #endif */
			margin-top: -60rpx;
			width: 570rpx;
			background-color: #fff;
			border-radius: 12rpx;
			position: relative;
		}

		.uni-pwd {
			width: 630rpx;
		}

		.uni-tip-icon-wrap {
			text-align: center;
		}

		.uni-tip-content {
			padding: 31rpx 40rpx 60rpx;
			font-size: 30rpx;
			color: #6F737A;
		}
	}

	.uni-tip-title {
		margin-top: 30rpx;
		text-align: center;
		font-weight: 500;
		font-size: 34rpx;
		color: $uni-text-color;
	}
</style>