zhibo/pages_user/user/pay.vue

<template>
	<view class="content">
		<view class="top">
			<view class="inner">
				<view class="pay">
					<view class="title">
						<text class="name">付款给 御君方</text>
						<text class="desc">微信收款</text>
					</view>
					<view class="pay-money">
					 	<view class="pay-money-title">支付金额</view>
					 	<view class="money">
					 		<text class="fh">¥</text>
					 		<input v-model="money"  class="uni-input"  @input="testMoney" type="digit" focus   />
					 	</view>
						<textarea class="desc" placeholder="请填写备注说明" maxlength="20" v-model="desc" />
					</view>
				</view>
			</view>
			<view class="btn-box">
				<view class="btn" @click="pay()">确认支付</view>
			</view>
		</view>
		<view class="ad">
			<ad unit-id="adunit-a018415a6deb69e8"></ad>
		</view>
		
	</view>
</template>

<script>
	import {payment} from '@/api/payment'
	export default {
		data() {
			return {
				companyUserId:null,
				companyId:null,
				desc:"",
				money:null,
				wxPay: true,
			}
		},
		onLoad: function(options) {
		 //   if (options.hasOwnProperty('q') && options.q) {
		 //   	// 通过下面这步解码，可以拿到url的值
		 //   	const url = decodeURIComponent(options.q)
		 //   	this.url=url;
		 //   	// // 对url中携带的参数提取处理
		 //   	const obj = this.utils.urlToObj(url)
			// console.log(obj)
		 //   	this.companyId=obj.companyId;
			// this.companyUserId=obj.companyUserId;
		 //   }
			this.companyId=options.companyId;
		 	this.companyUserId=options.companyUserId;
		},
		onShareAppMessage(res) {
			return {
				title: '御君方-收款',
				path: `/pages_user/user/pay?companyId=`+this.companyId+"&companyUserId="+this.companyUserId
			}
		},
		methods: {
			testMoney(e){
				let that = this;
				let price = e.detail.value
				if (price.indexOf(".") == 0) {
					//'首位小数点情况'
					price = price.replace(/[^$#$]/g, "0.");
					price = price.replace(/\.{2,}/g, ".");
				} 
				price = price.match(/^\d*(\.?\d{0,2})/g)[0] || null;
				  //重新赋值给input
				this.$nextTick(() => {
					this.money = price;
				});
			 
			},
			pay(){
				if(this.money==null){
					uni.showToast({
						icon:'none',
						title: "请输入支付金额"
					});
					return;
				}
				uni.login({
					success: res => {
						console.log(res)
						this.payment(res.code);
					}
				});
			},
			payment(code){
				var data = {payMoney:this.money,remark:this.desc,code:code,companyId:this.companyId,companyUserId:this.companyUserId};
				var that=this;
				uni.showLoading();
				payment(data).then(
					res => {
						if(res.code==200){
							 console.log(res);
							 var result=JSON.parse(res.result);
							 uni.requestPayment({
							 	provider: 'wxpay',
							 	timeStamp: result.timeStamp,
							 	nonceStr: result.nonceStr,
							 	package: result.package,
							 	signType: result.signType,
							 	paySign: result.paySign,
							 	success: function(res) {
							 			uni.hideLoading();
							 			uni.redirectTo({
							 				url:"./success"
							 			})
							 	},
							 	fail: function(err) {
							 		uni.showToast({
							 			icon:'none',
							 			title:'fail:' + JSON.stringify(err),
							 		});
							 		console.log('fail:' + JSON.stringify(err));
							 		uni.hideLoading();
							 	}
							 });
							 // uni.requestPayment({
							 // 	provider: 'wxpay',
							 // 	timeStamp: res.result.timeStamp,
							 // 	nonceStr: res.result.nonceStr,
							 // 	package: res.result.packageValue,
							 // 	signType: res.result.signType,
							 // 	paySign: res.result.paySign,
							 // 	success: function(res) {
							 // 		uni.hideLoading();
								// 	uni.showToast({
								// 		icon:'success',
								// 		title: "支付成功",
								// 	});
								// 	uni.navigateTo({
								// 		url:'./success'
								// 	})
							 // 	},
							 // 	fail: function(err) {
							 // 		console.log('fail:' + JSON.stringify(err));
							 // 		uni.hideLoading();
							 // 	}
							 // });
						}else{
							uni.showToast({
								icon:'none',
								title: res.msg,
							});
						}
					},
					rej => {}
				);
				
			}
		}
	}
</script>

<style lang="scss">
	page{
		height: 100%;
		background-color: #f0eff4;
	}
	.content{
		height: 100%;
		display: flex;
		flex-direction: column;
		.top{
			flex:1;
			padding: 20rpx;
			.inner{
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: center;
				.pay{
					width: 100%;
					box-shadow: 1px 1px 5px #e6e6e6;
					background: #FFFFFF;
					border-radius: 5upx;
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					.title{
						display: flex;
						flex-direction: column;
						align-items: flex-start;
						width: 100%;
						background-color: #f7f7f7;
						padding: 30rpx 0rpx;
						.name{
							padding: 15rpx 30rpx;
							font-size: 32rpx;
						}
						.desc{
							color: #989898;
							padding: 15rpx 30rpx;
							font-size: 25rpx;
						}
					}
					.pay-money
					{
						padding: 30rpx 0rpx;
						 width: 100%;
						 background: #FFFFFF;
						 border-radius: 5upx;
						 display: flex;
						 flex-direction: column;
						 align-items: flex-start;
						 .pay-money-title{
						 	padding: 15rpx 30rpx;
						 	font-size: 32rpx;
						 }
						 .money{
							 font-size: 42rpx;
							 padding: 15rpx 30rpx;
							 display: flex;
							 flex-direction: row;
							 align-items: flex-start;
							 input{
								 margin-left: 15rpx;
							 }
						 }
						 .desc{
							 width: 100%;
							 padding: 30rpx 30rpx;
							 border-top: 1rpx solid #e6e6e6;
						 }
						 textarea {
							 height:50rpx;
							 line-height: 50rpx;
						 }
					}
				}
				
				 
			}
			.btn-box{
				padding: 30rpx 0rpx;
				height: 121upx;
				display: flex;
				align-items: center;
				justify-content: center;
				.btn{
					width: 91.73%;
					height: 88upx;
					line-height: 88upx;
					font-size: 30upx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #FFFFFF;
					text-align: center;
					background: #2BC7B9;
					border-radius: 44upx;
				}
			}
		}
		.ad{
			margin: 0rpx 0rpx 60rpx;
		}
	}
	
</style>