微信公众号授权登录调起支付

张先森-Gemini

于 2024-07-26 18:01:53 发布

阅读量185

点赞数 3

文章标签：微信

本文链接：https://blog.csdn.net/weixin_61006919/article/details/140721573

版权

1.微信公众号授权登录


<template>
	<view class="page">
		<view class="head">
			头部logo
		</view>
		<view class="footer">
			<view class="ysxy">
				<view @click="flag=!flag" style="margin-right: 8rpx;">
					<template v-if="flag">
						<u-image width="30rpx" height="30rpx" :src="checked1">
						</u-image>
					</template>
					<template v-else>
						<u-image width="30rpx" height="30rpx" :src="unchecked1">
						</u-image>
					</template>
				</view>
				同意<text @click.stop="jump('/pages/subPack/userAgreement')">
					《用户协议》
				</text> 和
				<text @click.stop="jump('/pages/subPack/privacyPolicy')">
					《隐私协议》
				</text>
			</view>
			<view class="publicButton" @click="tickProtocol">授权登录</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				flag: false, //是否勾选隐私协议
				checked1: require('static/checked1.png'),
				unchecked1: require('static/unchecked1.png'),
			};
		},
		onLoad(options) {
			this.acquireCode()
		},
		methods: {
			// 获取code
			acquireCode() {
				// 获取当前页面的url
				let link = window.location.href;
				console.log(link, '获取的获取当前页面的url');
				let code = null;
				// 判断link中有没有code=字符串，  
				if (link.indexOf('code=') == -1) {
					//没有code= 发请求
					let appid = 'wx111111111111';
					let uri = encodeURIComponent(link);
                    snsapi_base // 静默授权
                    snsapi_userinfo // 发起的网页授权，是用来获取用户的基本信息
					let authURL =
						`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${uri}&response_type=code&scope=snsapi_base&state=123#wechat_redirect`;
					window.location.href = authURL;
				} else {
					//回调函数已经执行 返回的链接存在code=地址解析
					let temp = link.split("code=")[1];
					code = temp.split("&")[0];
					//存储code
					console.log(code, "获取到的code");
					uni.setStorageSync('code', code);
				}
			},
			// 勾选用户协议
			tickProtocol() {
				if (!this.flag) {
					this.toast("请勾选用户协议和隐私协议")
					return
				}
				// 登录
				this.$api.request('v1/5d7660a421e69', 'POST', {
					code: uni.getStorageSync('code')
				}, res => {
					if (res.code == 1) {
						this.toast("登录成功")
						let token = res.data.userinfo.user_token
						uni.setStorageSync('token', token)
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/index/index'
							})
						}, 1500)
					} else {
						this.toast(res.msg)
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.footer {
		margin-top: 160rpx;
		position: fixed;
		bottom: calc(30rpx + env(safe-area-inset-bottom));
		left: 0;
		right: 0;
	}

	.page {
		width: 750rpx;
		height: calc(100vh);
		overflow: auto;
		background-image: url('@/static/bj.png');
		background-repeat: no-repeat;
		background-position: 0 0 0 0;
		background-size: 100% 100%;

		.head {
			margin-top: 70rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.heads {
			margin-top: 30rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.ysxy {
			font-size: 20rpx;
			margin-top: 40rpx;
			display: flex;
			color: #747082;
			align-items: center;
			justify-content: center;
			margin-bottom: 20rpx;

			text {
				color: #3AB8FF;
			}
		}
	}
</style>

2.调起微信支付

1.安装 npm install jweixin-module

2.代码

<template>
	<view class="page">
		<!-- 订单信息 -->
		<view class="orderInformation">
			<view class="id">
				订单编号：{{form.order_sn}}
			</view>
			<view class="price">
				<text>￥</text>{{form.goods_price}}
			</view>
			<view class="time">
				支付剩余时间：{{ minutes }} 分 {{ seconds }} 秒
			</view>
		</view>
		<!-- 支付方式 -->
		<view class="paymentMethod">
			<view class="title">支付方式</view>
			<view class="payment">
				<view style="display: flex;">
					<u-image width="48rpx" height="42rpx" :src="WeChat" style="margin-right: 16rpx;">
					</u-image>
					微信支付
				</view>
				<view @click="flag=!flag">
					<u-image v-if="flag" width="48rpx" height="48rpx" :src="checked2">
					</u-image>
					<u-image v-else width="48rpx" height="48rpx" :src="unchecked2">
					</u-image>
				</view>
			</view>
		</view>
		<view class="publicButton footer" @click="payment">
			确认支付 ￥{{form.goods_price}}
		</view>
	</view>
</template>

<script>
	var wx = require('jweixin-module');
	export default {
		data() {
			return {
				flag: true, //是否勾选
				WeChat: require('static/WeChat.png'),
				checked2: require('static/checked2.png'),
				unchecked2: require('static/unchecked2.png'),
				countdown: 1799000,
				minutes: 0,
				seconds: 0,
				form: {}
			}
		},
		onLoad(opt) {
			this.startCountdown();
			if (opt.form) {
				let obj = JSON.parse(opt.form);
				this.form = obj
			}
		},
		onUnload() {
			clearInterval(this.timer);
		},
		methods: {
			// 支付
			payment() {
				if (!this.flag) {
					this.toast("请勾选支付方式")
					return
				}
				let thit = this
				thit.$api.request('v1/5d7868c138418', 'POST', {
					order_sn: thit.form.order_sn,
					ish5: 1,
				}, res => {
					let format
					if (res.code == 1) {
						console.log(res.data);
						format = JSON.parse(res.data);
						// console.log(format, "转json format");
						wx.config({
							debug: false, // 开启调试模式，仅在pc端时才会打印。
							appId: 'wx3b2554a2273cab99', // 必填，公众号的唯一标识
							timestamp: format.timeStamp, // 必填，生成签名的时间戳
							nonceStr: format.nonceStr, // 必填，生成签名的随机串
							signature: format.paySign, // 必填，签名
							jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表
						})
						// 调用支付
						wx.ready(function() {
							wx.chooseWXPay({
								timestamp: format.timeStamp, // 时间戳
								nonceStr: format.nonceStr, // 随机数
								package: format.package, //订单详情扩展字符串
								signType: 'MD5',
								paySign: format.paySign, // 签名
								success: function() {
									thit.toast("支付成功")
									setTimeout(() => {
										uni.reLaunch({
											url: '/pages/subPack/successful'
										})
									}, 1500);
								},
								cancel: function() {
									thit.toast("取消支付")
								},
								fail: function() {
									thit.toast("支付失败")
								}
							})
						})
					} else {
						thit.toast(res.msg)
					}
				});
			},
			startCountdown() {
				this.updateCountdown();
				this.timer = setInterval(() => {
					this.updateCountdown();
					if (this.countdown <= 0) {
						clearInterval(this.timer);
						// 倒计时结束的处理逻辑
						uni.reLaunch({
							url: '/pages/index/index'
						})
					}
				}, 1000);
			},
			updateCountdown() {
				this.minutes = Math.floor(this.countdown / 60000);
				this.seconds = Math.floor((this.countdown % 60000) / 1000);
				this.countdown -= 1000;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background: #F2F2F2;
		width: 750rpx;
		height: calc(100vh);
	}

	// 订单信息
	.orderInformation {
		width: 694rpx;
		padding: 52rpx 0;
		margin: 0 auto 20rpx;
		text-align: center;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;

		.id {
			font-size: 28rpx;
			color: #777777;
		}

		.price {
			margin-top: 34rpx;
			margin-bottom: 68rpx;

			text {
				font-size: 28rpx;
			}

			font-size: 48rpx;
			color: #333333;
		}

		.time {
			font-weight: 400;
			font-size: 24rpx;
			color: #777777;
		}
	}

	// 支付方式
	.paymentMethod {
		width: 694rpx;
		margin: 0 auto;
		padding: 24rpx 24rpx 38rpx;
		background: #FFFFFF;
		border-radius: 16rpx;

		.payment {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-weight: 600;
			font-size: 32rpx;
			color: #333333;
			margin-top: 38rpx;
		}

		.title {
			font-size: 28rpx;
			color: #333333;
		}
	}
</style>