Mini program authorization login + mobile phone login

HTML:

<view class="situation">
		<image class="title_image" src="" mode=""></image>
		<view class="xian"></view>
		<view class="text">申请获取一下权限</view>
		<view class="text_text">获得你的公开信息(昵称、手机号、头像等)</view>
		<button v-show="!typ" type="default" @click="login" class="register">微信号登录</button>
		<button v-show="typ" open-type="getPhoneNumber" class="register" @getphonenumber="getPhoneNumber">绑定手机号</button>
		<button type="default" class="register_no" @click="withhold">暂不登录</button>
	</view>

js:

<script>
	import baseurl from '@/utils/config.js'//封装的请求地址
	export default {
    
    
		data() {
    
    
			return {
    
    
				typ: false,
				information: {
    
    },
				aid: ""
			}
		},
		onLoad(option) {
    
    
			if (option.id!="undefined") {
    
    
				this.aid = option.id
				this.information.invitationId = this.aid
			} else {
    
    
				this.information.invitationId = ""
			}
		},
		methods: {
    
    
			login() {
    
    
				const thle = this
				uni.getUserProfile({
    
    
					desc: "weixin",
					success(resss) {
    
    
						uni.login({
    
    
							success: (res) => {
    
    
								thle.information = {
    
    
									avatarPath: resss.userInfo.avatarUrl,
									code: res.code,
									nickname: resss.userInfo.nickName,
								}
								thle.typ = true
							}
						})
					}
				})
			},
			// 获取手机号
			getPhoneNumber(e) {
    
    
				this.information.encryptedData = e.detail.encryptedData
				this.information.iv = e.detail.iv
				if (!this.aid) {
    
    
					uni.request({
    
    
						method: 'get',
						url: baseurl + '-----------------',
						data: {
    
    
							avatarPath: this.information.avatarPath,
							code: this.information.code,
							encryptedData: this.information.encryptedData,
							iv: this.information.iv,
							nickname: this.information.nickname,
						},
						success: (ress) => {
    
    
							const thle = this
							uni.setStorageSync("token", ress.data.data.wechatToken)
							setTimeout(() => {
    
    
								getApp().chatRegister({
    
    user_id:ress.data.data.hxId,password:ress.data.data.hxPassword,nickname:thle.information.nickname,avatarPath:ress.data.data.avatarPath})
								this.$request({
    
    
									url: "-------------------",
									method: "get",
									success: (resa) => {
    
    
										uni.setStorageSync('userInfo', resa.data.data)
										this.$request({
    
    
											url: "-------------------",
											method: "post",
											data: {
    
    
												type: 1
											},
											success: (res) => {
    
    
												this.$request({
    
    
													url: "-----------",
													method: "get",
													success: (resa) => {
    
    
												
													}
												})
												setTimeout(() => {
    
    
													uni.reLaunch({
    
    
														url: './index'
													})
												}, 500)
											}
										})
									}
								})
							}, 500)
						}
					})
				} else {
    
    
					uni.request({
    
    
						method: 'get',
						url: baseurl + '-------------',
						data: {
    
    
							avatarPath: this.information.avatarPath,
							code: this.information.code,
							encryptedData: this.information.encryptedData,
							iv: this.information.iv,
							nickname: this.information.nickname,
							invitationId: this.information.invitationId
						},
						success: (ress) => {
    
    
							const thle = this
							uni.setStorageSync("token", ress.data.data.wechatToken)
							setTimeout(() => {
    
    
								getApp().chatRegister({
    
    user_id:ress.data.data.hxId,password:ress.data.data.hxPassword,nickname:thle.information.nickname,avatarPath:ress.data.data.avatarPath})
								this.$request({
    
    
									url: "--------------",
									method: "get",
									success: (resa) => {
    
    
										uni.setStorageSync('userInfo', resa.data.data)
										this.$request({
    
    
											url: "---------------",
											method: "post",
											data: {
    
    
												type: 1
											},
											success: (res) => {
    
    
												this.$request({
    
    
													url: "-----------------------",
													method: "get",
													success: (resa) => {
    
    
												
													}
												})
												setTimeout(() => {
    
    
													uni.reLaunch({
    
    
														url: './index'
													})
												}, 500)
											}
										})
									}
								})
							}, 500)
						}
					})
				}
			},
			// 暂不登录
			withhold() {
    
    
				uni.navigateBack({
    
    
					delta: 1
				})
			}
		}
	}
</script>

CSS:

<style lang="scss" scoped>
	.situation {
    
    
		background-color: #FFFFFF;
		width: 100%;
		min-height: 100vh;
		height: 100%;
	}

	.title_image {
    
    
		width: 192rpx;
		height: 192rpx;
		border-radius: 10rpx;
		background-color: #CCCCCC;
		margin: 112rpx 0 48rpx 278rpx;
	}

	.title_text {
    
    
		width: 100%;
		text-align: center;
		font-size: 30rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #000000;
		margin-bottom: 92rpx;
	}

	.xian {
    
    
		width: 590rpx;
		margin-left: 80rpx;
		border-bottom: 1px solid rgba(51, 51, 51, 0.30000001192092896);
	}

	.text {
    
    
		margin: 72rpx 0 30rpx 80rpx;
		font-size: 30rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #000000;
	}

	.text_text {
    
    
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
		margin: 0 0 128rpx 80rpx;
	}

	.register {
    
    
		margin: 0 0 48rpx 80rpx;
		width: 590rpx;
		height: 80rpx;
		background: #07C160;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		opacity: 1;
		font-size: 34rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
	}

	.register_no {
    
    
		margin: 0 0 48rpx 80rpx;
		width: 590rpx;
		height: 80rpx;
		background: rgba(247, 247, 247, 0.8999999761581421);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		opacity: 1;
		font-size: 34rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #07C160;
	}

Guess you like

Origin blog.csdn.net/qq_49552046/article/details/122577078