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

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

		<view class="shopInfo">
			<image :src="shopDetail.cover" mode=""></image>
			<text>{{shopDetail.name}}</text>
		</view>
		<view class="data">
			<text style="color: #000;">付款金额</text>
			<view class="price">
				<view class="input-bar center" @tap="show">
					<view class="icon center">￥</view>
					<view class="input" style="display: flex; align-items: center;">
						<view style="font-size: 80rpx;">{{filterMoney(orderAmount)}}</view>
						<view class="cusor"></view>
					</view>
				</view>
			</view>
		</view>
		<amountInput ref="amountInput" confirmText="付款" btnColor="#ff9900" placeholder="请输入交易金额" @change="change"
			@confirm="debouncePay"></amountInput>

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

<script>
	import amountInput from '@/components/amountInput/amountInput.vue';
	export default {
		components: {
			amountInput
		},
		data() {
			return {
				isFirstPay: true,
				orderAmount: '',
				payModalShow: false,
				modalShow: false,
				shopId: '',
				shopDetail: {}
			}
		},
		onLoad(options) {
			if (!this.$isEmpty(options.query)) {
				let params = options.query.split(";")
				this.shopId = params[0]
				this.orderAmount = params[1]
			} else {
				this.shopId = options.id
			}

			// #ifdef  MP-WEIXIN
			//如果是新用户通过微信支付扫码进入此页面，跳回首页
			if (this.$isEmpty(this.vuex_userId)) {
				uni.reLaunch({
					url: "/pages/mine/mine?query=" + this.shopId + ";" + this.orderAmount
				})
				return
			}
			// #endif



			if (this.$isEmpty(this.shopId)) {
				this.$dialog.showModal('商户id不能为空', false).then(() => {
					uni.navigateBack()
				})
				return
			}
			this.fetchShopDetail()
		},
		methods: {
			//防抖支付
			debouncePay() {
				if (this.isFirstPay) {
					this.pay()
					this.isFirstPay = false
				} else {
					this.$u.debounce(this.pay, 500)
				}
			},
			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
						})
					})
				})
			},
			show() {
				this.$refs.amountInput.show()
			},
			change(e) {
				if (!e) {
					this.orderAmount = 0
				} else {
					this.orderAmount = e
				}
			},
			filterMoney(value) {
				if (!value) {
					return ''
				} else {
					value = value.replace(/\$\s?|(,*)/g, '')
					return value.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
				}
			},
			async jumpLDT() {
				this.$dialog.showLoading('打开中..')
				let params = {
					path: "/pages/checkstand/index",
					query: "query=" + this.shopId + ";" + this.orderAmount
				}
				let res = await this.$api.wxApp.getGenerateScheme(params)
				if (res.data.openlink) {
					location.href = res.data.openlink
				} else {
					location.href = "weixin://dl/business/?t=X2CyIQDbgtm"
				}
				uni.hideLoading()
			},
			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
				} else {
					this.$u.toast('支付失败')
				}
			},
			isMoney(s) {
				 var reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
				    if (reg.test(s)) {
				       return true;
				    }else {
					return false;
				}
			},
			async pay() {
				if (this.$isEmpty(this.orderAmount) 
				|| !this.isMoney(this.orderAmount) 
				|| this.orderAmount == '0'
				|| this.orderAmount == '0.'
				|| this.orderAmount == '0.0'
				|| this.orderAmount == '0.00') {
					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)
				if (!resp.success) {
					this.$u.toast(resp.msg)
					return
				}
				if (resp.data.payAmount == 0) {
					this.$dialog.showModal('已使用积分抵扣成功', false).then(() => {
						uni.navigateBack({
							delta: 1
						})
					})
					return
				}
				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>
	page {
		background-color: #ffff;
	}
</style>

<style lang="scss" scoped>
	.shopInfo {
		margin: 60rpx 0 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		image {
			border-radius: 50%;
			width: 140rpx;
			height: 140rpx;
		}

		text {
			margin-top: 30rpx;
			font-size: 32rpx;
		}
	}

	.data {
		padding: 50rpx;
		display: flex;
		justify-content: flex-start;
		flex-direction: column;

		.price {

			&-icon {
				font-size: 40rpx;
				font-weight: 800;
			}
		}
	}

	.center {
		display: flex;
		justify-content: center;
		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 {
			margin-left: 10rpx;
			width: 6rpx;
			border-radius: 20rpx;
			height: 60%;
			background-color: #ff9900;
			animation: blink 1200ms infinite ease-in-out;
		}
	}

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