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

<template>
	<view class="">
		<!-- #ifdef  MP-WEIXIN-->
		<view class="">
			<u-navbar title="收银台"></u-navbar>
		</view>
		<!-- #endif -->

		<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 :style="!$isEmpty(orderAmount)?'margin-left: -15%;':''">{{orderAmount}}</view>
						<view class="cusor" :style="$isEmpty(orderAmount)?'margin-left: -15%;':''"></view>
					</view>
				</view>
				<view style="height: 50rpx;"></view>
				<view class="" style="z-index: 99;">
					<u-button throttle-time="1200"  class="button" type="warning" @click="pay">付款</u-button>
				</view>
			</view>

			<view class="bottom-line center"> -- 联兑通提供技术支持 --</view>
			<u-keyboard z-index="9" ref="uKeyboard" :show-tips="false" :safe-area-inset-bottom="true" :mask="false"
				v-model="show" @change="handleInput" @confirm="pay" @backspace="handleDelete"></u-keyboard>
		</view>
		
		<u-modal v-model="payModalShow" :showCancelButton="true" confirm-color="#FF9447">
			<view class="center flex-direction text-df" style="padding: 30rpx 40rpx;">
				<view>您的积分可足额抵扣支付</view>
				<view class="padding-top-10">本次支付不会扣除您的现金</view>
			</view>
		</u-modal>

		<u-modal v-model="modalShow"  :showCancelButton="true" @cancel="payOfh5"  @confirm="jumpLDT" cancel-text="直接付款" confirm-color="#FF9447"
			confirmText="去联兑通支付" content="去联兑通小程序付款会有更多优惠哟~"></u-modal>
	</view>
</template>

<script>
	export default {
		onLoad(option) {},
		data() {
			return {
				payModalShow:false,
				modalShow: false,
				show: false,
				logo: "/static/bank/CMBCHINA.png",
				buyer: "联兑通",
				orderAmount: '',
				shopId: '',
				shopDetail: {}
			}
		},
		onLoad(options) {
			this.shopId = options.id
			if (this.$isEmpty(this.shopId)) {
				this.$dialog.showModal('商户id不能为空', false).then(() => {
					uni.navigateBack()
				})
				return
			}
			this.fetchShopDetail()
		},
		methods: {
			fetchShopDetail() {
				this.$api.shop.detail({
					id: this.shopId
				}).then(res => {
					if (this.$isEmpty(res.data)) {
						this.$dialog.showModal('获取不到商户信息', false).then(() => {
							this.show = false
							uni.navigateBack({
								delta: 1
							})
						})
					} else {
						this.show = true
						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)
			},
			jumpLDT() {
				location.href = "weixin://dl/business/?t=X2CyIQDbgtm"
			},
			async payOfh5() {
				let expireTime=this.$dateTime.getExpireTime(5)
				let params={
					money:this.orderAmount,
					shopId:this.shopId,
					billsTitle:'用户微信扫码支付',
					expireTime
				}
				let resp=await this.$api.loginUser.payBeforeForNormal(params)
				let payObj={
					orderType:this.$global.orderType.USER_PAY,
					orderId:resp.data.id
				}
				let res=await this.$api.pay.payOrderOfscanCode(payObj)
				if (!this.$isEmpty(res.data.qrCodeUrl)) {
					location.href=res.data.qrCodeUrl
				}
				this.$u.toast('支付失败')
			},
			async pay() {
				if (this.$isEmpty(this.orderAmount)) {
					this.$u.toast('请输入交易金额')
					return
				}
				// #ifdef  H5
				this.modalShow = true
				// #endif

				// #ifdef MP-WEIXIN
				let flag=false
				if (flag) {
					//可以足额支付
					this.payModalShow=true
				}else{
					//积分不足额支付，调易宝支付
					this.toWXPay()
				}
				// #endif
			},
			async toWXPay(){
				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)
				await this.$mpi.requestPayment(prePayTn)
				uni.navigateTo({
					url: "/pages/checkstand/order-res?orderId=" + resp.data.id
				})
			}
		}
	}
</script>

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

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

		.input-content {
			margin-top: 50rpx;
			padding: 50rpx;
			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>