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.handelPay()
				    },
					fail: (res) => {
						if(res.errMsg!='scanCode:fail cancel'){
							_this.scanNotify = {scan: true,scanMessage: res.errMsg};
						}
					}
				});
			},
			async handelPay(){
				let res=await this.getPointPayType()
				this.payBefore(res.data)
			},
			//获取积分策略
			async getPointPayType(){
				let params={
					shopId: this.vuex_shopId,
					loginUserId: this.userId,
					money: this.money
				}
				let res=await this.$api.shop.getPointPayType(params)
				return res
			},
			async payBefore(pointPayType){
				let expireTime=this.$dateTime.getExpireTime(5)
				let params={
					shopId:this.vuex_shopId,
					money:this.money,
					billsTitle:'用户支付',
					expireTime,
					appId:this.$global.wxParams.clientAppId,
					secret:this.userId,
					type:2,
					pointPayType
				}
				let resp=await this.$api.shop.payBefore(params)
				if (!resp.success) {
					this.$u.toast(resp.msg)
					return
				}
				//发送通讯
				this.sendInfo()
				
				this.$dialog.showModal('扫描成功，等待用户付款',false).then(()=>{
					this.backToIndex()
				})
			},
			//通知c端去支付
			sendInfo(){
				let msg={
					sid:this.userId,
					content:this.$global.socketMessage.payForPaymentCode,
				}
				this.$api.webSocket.sendInfo(msg)
			},
			backToIndex(){
				let prePage=this.$util.getPageCtx(1)
				prePage.setData({
					"isOpenSocket":true
				})
				uni.navigateBack({
					delta:1
				})
			},
			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>