cunzaicourseMall_user_app/pages_user/user/pay.vue

<template>
	<view class="content">
		<view class="header-nav"
			:style="{height: `calc(88rpx + ${statusBarHeight}px)`,paddingTop: statusBarHeight + 'px'}">
			<u-icon name="arrow-left" size="24" @click="tosales" v-if="appToken"></u-icon>
			<view class="header-title"
				:style="{width:menuButtonLeft + 'px',height:menuButtonH+'px',lineHeight:menuButtonH+'px'}">
				收款</view>
		</view>
		<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"  /> -->
						<input type="nickname" class="desc" @blur="onNickNameInput" @input="onNickNameInput" 
						 placeholder="请填写备注说明" v-model="desc" />
						<view class="justify-start align-center ml20" 
						v-if="scanCodeDiscountAmount!==null && scanCodeDiscountAmount!=0">
							<view class="fs24 base-color-6">支付立减：</view>
							<view class="base-price">￥{{scanCodeDiscountAmount }}</view>
						</view>
					</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,paymentDirect} from '@/api/payment'
	import { loginByMiniApp} from '@/api/user'
	export default {
		data() {
			return {
				companyUserId:null,
				companyId:null,
				desc:"",
				money:null,
				wxPay: true,
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				menuButtonLeft: 281,
				menuButtonH: 45,
				scanCodeDiscountAmount:'',
				appToken:''
			}
		},
		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.appToken=uni.getStorageSync('CompanyUserToken')
			this.companyId=options.companyId;		
			this.companyUserId=options.companyUserId;
			if(!uni.getStorageSync('AppToken')||uni.getStorageSync('AppToken')==null){
				this.gologin()
			}else{
				this.paymentDirects()
			}
		},
		onShareAppMessage(res) {
			return {
				title: '食养生活-收款',
				path: `/pages_user/user/pay?companyId=`+this.companyId+"&companyUserId="+this.companyUserId
			}
		},
		methods: {
			tosales() {
				uni.navigateTo({
					url: "/pages_company/index"
				})
			},
			onNickNameInput(e){
				console.log(e)
			},
			paymentDirects(){
				paymentDirect().then(res=>{
					if(res.code==200){
						this.scanCodeDiscountAmount=res.data.scanCodeDiscountAmount
					}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) {
										 this.paymentDirects()
										 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.utils.isLogin().then(res => {
				// 	if(res){
						this.payment();
				// 	}
				// })
				// uni.login({
				// 	success: res => {
				// 		console.log(res)
				// 	}
				// });
			},
			payment(){
				var data = {payMoney:this.money,remark:this.desc,companyId:this.companyId,companyUserId:this.companyUserId};
				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">
	.header-nav {
		height: 88rpx;
		// @include u-flex(row, center, flex-start);
		display: flex;
		justify-content: start;
		overflow: hidden;
		background-color: #fff;
		box-sizing: border-box;
	
		.header-title {
			text-align: center;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			padding: 0 10rpx 0 100rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 15px;
			color: #000;
			box-sizing: border-box;
		}
	}
	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>