pages/sub_medical/pay.vue - dali_platform/mobile - Gitiles

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