guosen-ldt-shop/pages/pay/pay.vue

<template>
	<view>
		<!-- 扫一扫错误回调 -->
		<u-modal title="扫描异常"  confirm-color="#dc9b21"  v-model="scanNotify.scan" :content="scanNotify.scanMessage"></u-modal>
		<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;font-weight: 800;">{{filterMoney(money)}}</view>
						<view class="cusor"></view>
					</view>
				</view>
			</view>
		</view>
		<amountInput ref="amountInput"  confirmText="收款" btnColor="#ff9900"
			placeholder="请输入交易金额" @change="change"
			@confirm="scanCode"></amountInput>
	</view>
</template>

<script>
	import amountInput from '@/components/amountInput/amountInput.vue';
	export default {
		components: {
			amountInput
		},
		data() {
			return {
				scanNotify:{scan: false,scanMessage:'扫描错误，请稍后重试！' },
				money:'',
				//向哪个用户收款
				secret:'',
				userId:''
			}
		},
		onLoad(options) {
			this.show()
		},
		methods: {
			scanCode(){
				const _this = this;
				uni.scanCode({
					onlyFromCamera:true,
					scanType: ['barCode'],
				    success: function (res) {
						//用户id
						_this.secret=res.result
						_this.userId=_this.secret.substr(0,19)
						//处理支付
						_this.toPay()
				    },
					fail: (res) => {
						if(res.errMsg!='scanCode:fail cancel'){
							_this.scanNotify = {scan: true,scanMessage: res.errMsg};
						}
					}
				});
			},
			toPay(){
				let expireTime=this.$dateTime.getExpireTime(5)
				let params={
					mallId:this.vuex_mallId,
					shopId:this.vuex_shopId,
					money:this.money,
					billsTitle:'用户支付',
					expireTime,
					appId:this.$global.wxParams.clientAppId,
					secret:this.userId,
					authCode: this.secret
				}
				uni.navigateTo({
					url:"/pages/pay/pay-result?payParams="+JSON.stringify(params)
				})
			},
			show(){
				this.$refs.amountInput.show()
			},
			change(e){
				if (!e) {
					this.money=0
				}else{
					this.money=e
				}
			},
			filterMoney(value) {
				value=value.toString()
				if (!value) {
					return ''
				} else {
					value = value.replace(/\$\s?|(,*)/g, '')
					return value.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
				}
			},
		}
	}
</script>
<style>
	page{
		background-color: #FFFFFF;
	}
</style>

<style lang="scss" scoped>
	.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>