guosen-ldt-client/pages/checkstand/index.vue

<template>
	<view class="check-panel flex-direction">
		<image :src="shopDetail.cover" class="buyer-logo"></image>
		<view class="title center">{{shopDetail.name}}</view>
		<view class="input-content">
			<view class="tips">交易金额</view>
			<view class="input-bar center" @tap="show=true">
				<view class="icon center">￥</view>
				<view class="input center">
					<view>{{orderAmount}}</view>
					<view class="cusor"></view>
				</view>
			</view>
			<view style="height: 50rpx;"></view>
			<u-button  class="button" type="warning" @click="pay">付款</u-button>
		</view>

		<view class="bottom-line center"> -- 联兑通提供技术支持 --</view>
		<u-keyboard ref="uKeyboard" :show-tips="false" :safe-area-inset-bottom="true" :mask="false" v-model="show"
			@change="handleInput" @backspace="handleDelete"></u-keyboard>
	</view>
</template>

<script>
	export default {
		onLoad(option) {},
		data() {
			return {
				show: true,
				logo: "/static/bank/CMBCHINA.png",
				buyer: "联兑通",
				orderAmount: '',
				shopId:'',
				shopDetail:{}
			}
		},
		onLoad(options) {
			this.shopId=options.shopId || '-1'
			this.fetchShopDetail()
		},
		methods: {
			fetchShopDetail(){
				this.$api.shop.detail({id:this.shopId}).then(res=>{
					if (this.$isEmpty(res.data)) {
						this.$dialog.showModal('获取不到商户信息',false).then(()=>{
							uni.navigateBack({
								delta:1
							})
						})
					}else{
						this.shopDetail=res.data
					}
				}).catch(err=>{
					this.$dialog.showModal('获取不到商户信息',false).then(()=>{
						uni.navigateBack({
							delta:1
						})
					})
				})
			},
			handleInput(num) {
				if (this.orderAmount.length > 12) {
					return
				}
				this.orderAmount = this.orderAmount + num
			},
			handleDelete() {
				if (this.$isEmpty(this.orderAmount)) {
					return
				}
				this.orderAmount = this.orderAmount.substr(0, this.orderAmount.length - 1)
			},
			async pay(){
				let expireTime= this.$dateTime.getExpireTime(5)
				
				let params={
					shopId:this.shopId,
					loginUserId:this.vuex_userId,
					money:this.orderAmount,
					billsTitle:'用户支付',
					expireTime,
					appId:this.$global.wxParams.APPID,
					openId:this.$cache.get('userInfo').openId,
					type:1 //type: 1-用户扫商户收款码支付 2-商户扫用户付款码支付
				}
				let resp=await this.$api.loginUser.payBefore(params)
				let obj={
					orderType:this.$global.orderType.USER_PAY,
					orderId:resp.data.id,
					payStatus:this.$global.payStatus.IS_WAIT
				}
				let res=await this.$api.pay.payOrder(obj)
				let prePayTn= JSON.parse(res.data.prePayTn)
				this.$mpi.requestPayment(prePayTn).then(()=>{
					uni.navigateTo({
						url:"/pages/checkstand/order-res?orderId="+resp.data.id
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.check-panel {
		.buyer-logo {
			width: 100rpx;
			height: 100rpx;
			margin-top: 50rpx;
			margin-left: calc(50% - 50rpx);
		}

		.title {
			height: 70rpx;
			letter-spacing: 3rpx;
			color: #5D5D5D;
		}

		.input-content {
			padding: 50rpx;
			position: absolute;
			top: 280rpx;
			bottom: 0;
			left: 0;
			right: 0;
			background-color: #FFFFFF;
			width: 100%;
			border-radius: 25rpx 25rpx 0 0;

			.tips {
				height: 100rpx;
				font-size: 30rpx;
				display: flex;
				justify-content: left;
				align-items: center;
			}

			.input-bar {
				height: 150rpx;
				border-bottom: 1rpx solid #DDDDDD;

				.icon {
					width: 15%;
					font-size: 70rpx;
					font-weight: 900;
					height: 100%;
				}

				.input {
					width: 85%;
					height: 100%;
					overflow: hidden;
					font-size: 70rpx;
				}

				.cusor {
					width: 2rpx;
					height: 80%;
					background-color: #FD711B;
					animation: blink 1500ms infinite ease-in-out;
				}
			}
		}
	}

	.bottom-line {
		position: absolute;
		bottom: 50rpx;
		left: 0;
		width: 100%;
		color: #dddddd;
	}

	@keyframes blink {
		from {
			opacity: 0;
		}
	}
</style>