cashier_weapp/pages/login/login.vue

<template>
	<view class="container">
		<view class="containerbox flex-colum">
			<view class="containerimage_logo">
				<image class="input_itemone" src="https://ointmentweapp.oss-cn-beijing.aliyuncs.com/manage/login2.png"
					mode=""></image>
			</view>
			<view class="containertext">
				微信昵称
			</view>
			<view class="containerbottom">
				<view class="containerbottom_text flex-colum-start">
					<text>该程序获得以下授权：</text>
					<text>获得您的手机号</text>
				</view>
				<view class="containerbottom_item flex-between">
					<navigator class="containerbottomone" open-type="exit" target="miniProgram"><button
							class="containerbottomone" open-type="launchApp" app-parameter="wechat"
							binderror="launchAppError">
							暂不授权
						</button></navigator>
					<button class="containerbottomtow" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
						确认授权
					</button>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: ''
			}
		},
		onLoad() {
			uni.cache.clear();

		},
		methods: {
			async userlogin() {
				// #ifdef MP-WEIXIN || MP-ALIPAY
				uni.login({ //alipay weixin
					// #ifdef MP-ALIPAY
					provider: 'alipay',
					// #endif
					// #ifdef MP-WEIXIN
					provider: 'weixin',
					// #endif
					success: async (data) => {
						try {
							uni.getUserInfo({
								provider: 'weixin',
								success: async (infoRes) => {
									console.log(infoRes, 81);
									uni.cache.set('weixincode', data.code);
									let res = await this.api.userwxlogin({
										code: uni.cache.get('weixincode'), //临时登录凭证
										encryptedData: infoRes
										.encryptedData, // 用户非敏感信息
										rawData: infoRes.rawData,
										signature: infoRes.signature,
										iv: infoRes.iv,
										phone: this.phone
									})
									if (res.code == 0) {
										console.log(res, 88)
										uni.cache.set('token', res.data.token);
										uni.cache.set('miniAppOpenId', res.data.userInfo
											.miniAppOpenId)
										uni.cache.set('userInfo', res.data.userInfo);
										uni.cache.set('shopUser', res.data.shopUser);
										uni.pro.switchTab('index/index')
									}
								},
								fail: (err) => {
									console.log(err)
								}
							});

							// uni.pro.navigateTo('pay_code/pay_code', {
							// 	nickName:userInfo.nickName,
							// 	nickName:userInfo.nickName
							// })
							// uni.getUserInfo({
							// 	provider: 'weixin',
							// 	success: async (infoRes) => {
							// 		console.log(infoRes, 81);
							// 		// let res = await this.api.userwxlogin({
							// 		// 	code: uni.cache.get('weixincode'), //临时登录凭证
							// 		// 	rawData: '', // 用户非敏感信息
							// 		// 	rawData: '' // 签名
							// 		// })
							// 		// if (res) {
							// 		// 	console.log(res, 88)
							// 		// }
							// 	},
							// 	fail: (err) => {
							// 		console.log(err)
							// 	}
							// });


						} catch (e) {
							console.log(e)
						}
					}
				});
				// #endif
			},
			async getPhoneNumber(res) { // 获取手机号
				var resdataa = res
				console.log(res)
				// #ifdef MP-WEIXIN
				uni.login({
					provider: 'weixin',
					success: async (data) => {
						let resdata = await this.api.logingetPhoneNumber({
							code: data.code,
							iv: resdataa.detail.iv,
							encryptedData: resdataa.detail.encryptedData
						})
						console.log(resdata)
						if (resdata.data) {
							this.phone = resdata.data
							this.userlogin()
						}
						// this.userlogin()
					}
				});
				// #endif
				// #ifdef MP-WEIXIN

				// #endif
			},
		},

	}
</script>
<style lang="scss">
	page {
		background: #F9F9F9;
	}

	button {}

	.container {
		position: relative;

		.containerbox {
			position: relative;
			width: 100%;

			.containerimage_logo {
				margin-top: 66rpx;
				border-radius: 50%;
				width: 120rpx;
				height: 120rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.containertext {
				margin-top: 32rpx;
				font-size: 28rpx;
			}


			.containerbottom {
				margin-top: 40rpx;
				border-top: 1px solid #ccc;
				width: 100%;
				padding: 0 28rpx;

				.containerbottom_text {
					margin-top: 32rpx;

					text:nth-child(1) {
						font-size: 28rpx;
					}

					text:nth-child(2) {
						font-size: 24rpx;
						color: #847f7f;
					}
				}

				.containerbottom_item {
					margin-top: 60rpx;

					.containerbottomone {
						padding: 10rpx 60rpx;
						font-size: 24rpx;
					}

					.containerbottomone::after {
						background: none;
						border: 1px solid #000;
					}

					.containerbottomtow {
						font-size: 24rpx;
						background: #baf505;
						border: none;
						padding: 10rpx 60rpx;
					}

					.containerbottomtow::after {
						background: none;
						border: none;
					}
				}
			}
		}

		.wrapper {
			position: relative;
			top: -118rpx;
			z-index: 90;
			padding: 0 28rpx;

			.wrapper_box {
				width: 100%;
				background: #FFFFFF;
				border-radius: 32rpx;
				padding: 16rpx 30rpx;

				.input_content {
					.input_item {
						margin-top: 32rpx;

						.input_itemone {
							width: 49.68rpx;
							height: 49.68rpx;
						}

						.input_itemtow {
							position: relative;
							flex: auto;
							margin-left: 16rpx;

							.input_itemtowicon {
								position: absolute;
								right: 0;
								bottom: 20rpx;
								z-index: 999;
							}

							.tit {
								font-size: 32rpx;
								font-family: Source Han Sans CN-Medium, Source Han Sans CN;
								font-weight: 500;
								color: #333333;
							}

							input {
								width: 100%;
								padding: 10rpx 0;
								border-bottom: 2rpx solid rgba(229, 229, 229, 0.7);
								font-size: 28rpx;
								font-family: Source Han Sans CN-Medium, Source Han Sans CN;
								font-weight: 500;
								color: #999999;
							}
						}

					}
				}

				.agreement {
					margin-top: 24rpx;
					font-size: 20rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #7c8e97;

					.agreement-Item {
						color: #4ca1fc;
					}
				}

				.confirm-button {
					margin: 40rpx auto 50rpx auto;
					width: 90%;
					background: #2F87FD;
					padding: 28rpx 0;
					border-radius: 50rpx;
					text-align: center;
					box-shadow: 0px 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
					font-size: 36rpx;
					font-family: Source Han Sans CN-Bold, Source Han Sans CN;
					font-weight: bold;
					color: #FFFFFF;
				}
			}

		}
	}
</style>