kytcourseMall_user_app/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> -->
		<ykscreenRecord></ykscreenRecord>
	</view>
</template>

<script>
	import {payment} from '@/api/payment'
	import { loginByMiniApp,getConfigByKey} from '@/api/user'
	import ykscreenRecord from "@/components/yk-screenRecord/yk-screenRecord.vue"
	export default {
		components:{
			ykscreenRecord
		},
		data() {
			return {
				companyUserId:null,
				companyId:null,
				desc:"",
				money:null,
				wxPay: true,
				urlOption:{}
			}
		},
		onLoad: function(options) {
			this.getWebviewUrl()
		 //   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;
			this.urlOption.companyId=options.companyId
			this.urlOption.companyUserId=options.companyUserId
			uni.setStorageSync('H5course',this.urlOption)
			uni.$on('usercode',(data)=>{
				console.log('huoqu ',data)
				this.goLogin(data)
			})
		},
		onShow() {
			const AppToken=uni.getStorageSync('AppToken')
			console.log(AppToken)
			if(!AppToken||AppToken==''){
				console.log(AppToken)
				this.goLogin()
			}
		},
		onShareAppMessage(res) {
			return {
				title: '宽益堂九-收款',
				path: `/pages_user/user/pay?companyId=`+this.companyId+"&companyUserId="+this.companyUserId
			}
		},
		onUnload() {
			uni.$off('usercode')
		},
		methods: {
			getWebviewUrl() {
				var data = {
					key: 'course.config'
				}
				getConfigByKey(data).then(res => {
					if (res.code == 200) {
						console.log("getConfigByKey====", JSON.parse(res.data))
						let data = JSON.parse(res.data,)
						uni.setStorageSync('setWebviewUrl',data.userCourseAuthDomain)
					}else{
						uni.showToast({
							icon:'none',
							title: res.msg,
						});
					}
				})
			},
			goLogin(){
				let provider = 'weixin'
				uni.login({
					provider: provider,
					success: async loginRes => {
						console.log(loginRes)
						uni.getUserInfo({
						   provider: provider,
						   success: (infoRes)=> {
							    uni.showToast({
									title: '处理中...',
									icon: 'loading'
							    });
								loginByMiniApp({
									code: loginRes.code,
									encryptedData:infoRes.encryptedData,
									iv:infoRes.iv,
									appId:wx.getAccountInfoSync().miniProgram.appId,
								}).then(res=>{
									 uni.hideLoading();
									 if (res.code == 200) {
										 uni.setStorageSync('AppToken',res.token);
										 uni.setStorageSync('userInfo',JSON.stringify(res.user));
									 } else {
										uni.showToast({
											title: res.msg,
											icon: 'none'
										});
									 }
								 }).catch(err=>{
									uni.hideLoading();
									uni.showToast({
										icon:'none',
										title: "登录失败,请重新登录",
									});
								});
						   }
						});
					}
				})
			},
			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;
				}
				this.payment();
				// this.utils.isLogin().then(res => {
				// 	if(res){
				// 		uni.navigateTo({
				// 			url: url
				// 		})
				// 	}
				// })
				// uni.login({
				// 	success: res => {
				// 		console.log(res)
				// 	}
				// });
			},
			payment(){
				var data = {payMoney:this.money,remark:this.desc,companyId:this.companyId,companyUserId:this.companyUserId,
				appId: wx.getAccountInfoSync().miniProgram.appId};
				var that=this;
				uni.showLoading();
				payment(data).then(
					res => {
						if(res.code==200){
							 console.log(res);
							 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: #C39A58;
					border-radius: 44upx;
				}
			}
		}
		.ad{
			margin: 0rpx 0rpx 60rpx;
		}
	}
	
</style>