ledehui-c/src/packages/authorization/authorization.vue

<template>
	<view class="authorization-box">
		<Navbar title="微信授权" background-color="#fff" color="#333"></Navbar>
		<image class="pic" :src="pic" mode="aspectFill"></image>
		<view class="title">
			{{ type === 'info' ? '伊兰迪' : (user.nickname ||'微信昵称') }}
		</view>
		<view class="tip">
			{{ type === 'info' ? '申请获得你的公开信息（头像、昵称）' : '绑定手机号可以获取更多服务' }}
		</view>
		<view class="btn" @click="bindUserInfo" v-if="type === 'info'">微信用户授权</view>
		<button @getphonenumber="getPhone" open-type="getPhoneNumber" class="btn" v-else>
			微信手机号快速登录
		</button>
		<view class="agree">
			注册登录即表示接受<text @click="handleAgree"> 《用户协议》</text>
		</view>
		<uni-popup ref="agreement" :safe-area="false">
			<scroll-view class="agreement-box" :scroll-y="true">
				<view class="title">{{ agreement.title }}</view>
				<view class="content-styl" v-html="agreement.content"></view>
			</scroll-view>
		</uni-popup>
	</view>
</template>

<script lang="ts">
	import {
		Component,
		Prop,
		Vue,
		Mixins,
		Watch
	} from 'vue-property-decorator';
	import loginMixin from '@/common/mixins/loginMixin';
	import {
		namespace
	} from 'vuex-class';
	import agreement from './agreement';
	const baseModule = namespace('base');
	@Component({})
	export default class authorization extends Mixins(loginMixin) {
		@baseModule.Getter('_userInfo') _userInfo: any;
		oss_url: any = this.$oss_url; //oss地址
		pic: any = this.$oss_url + 'logo.jpg';
		type: string = 'info';
		agreement: {
			title: string;content: string
		} = agreement;
		phone: string = '';
		user = {
			nickname: '',
			avatar: ''
		};

		bindUserInfo(): void {
			uni.getUserProfile({
				desc: '获取你的昵称、头像、地区及性别',
				success: (res: any) => {
					this.user.avatar = res.userInfo.avatarUrl;
					this.user.nickname = res.userInfo.nickName;
					uni.showLoading({
						title: '加载中',
					});
					this.$http
						.put({
							url: this.$api.updateUserInfo,
							data: this.user
						})
						.then((res: any) => {
							uni.hideLoading();
							this.type = 'phone';
							this.pic = this.user.avatar;
						});
				}
			});
		}
		getPhone({
			detail
		}: any) {
			if (detail.errMsg !== 'getPhoneNumber:ok') return;
			this.phone = detail.code;
			uni.showLoading({
				title: '加载中',
			});
			this.$http
				.post({
					url: this.$api.updatePhone,
					data: {
						auth: {
							agent: 1,
							way: 2,
						},
						third: {
							way: 1,
							phoneCode: this.phone
						}
					}
				})
				.then((res: any) => {
					uni.hideLoading();
					uni.showToast({
						title: '授权成功',
						icon: 'none'
					});
					this.getUserInfo().then((res: any) => {
						let query = this.$Route.query;
						if (query.to) {
							if (query.navType === 'pushTab') {
								this.$Router.pushTab({
									path: query.to,
									query: query.data
								});
							} else {
								this.$Router.replace({
									path: query.to,
									query: query.data
								});
							}
						} else {
							this.$Router.back(1);
						}
					});
				});
			// console.log(detail)
			// this.getUserInfo().then((res: any) => {
			// 	let query = this.$Route.query;
			// 	if (query.to) {
			// 		this.$Router.replace({
			// 			path: query.to,
			// 			query: query.data
			// 		});
			// 	} else {
			// 		this.$Router.back(1);
			// 	}
			// });
		}
		handleAgree() {
			(this.$refs.agreement as any).open('bottom');
		}
	}
</script>

<style lang="scss" scoped>
	.authorization-box {
		width: 100%;
		background: #fff;
		@include flex-y();
		min-height: 100vh;
		box-sizing: border-box;

		.pic {
			width: vw(100);
			height: vw(100);
			border-radius: vw(50);
			margin-top: 30%;
			background: #D8D8D8;
		}

		.name {
			@include word-vw(24, #333);
			font-weight: bold;
			margin-top: vw(15);
		}

		.title {
			@include word-vw(16, #333);
			margin-top: vw(6);
			line-height: vw(22);
		}

		.tip {
			@include word-vw(16, #999);
			line-height: vw(22);
			margin-top: vw(12);
		}

		.btn {
			width: vw(345);
			height: vw(44);
			border-radius: vw(4);
			@include flex-x(center);
			@include word-vw(16, #333);
			margin-top: vw(25);
			background: $bk-color;
		}

		.agree {
			@include word-vw(14, #666);
			margin-top: vw(25);

			text {
				color: #E6644E;
			}
		}

		//用户协议
		.agreement-box {
			overflow: hidden;
			// overflow-y: auto;
			height: vw(480);
			background: #fff;
			border-top-left-radius: vw(5);
			border-top-right-radius: vw(5);
			padding-bottom: vw(30);
			box-sizing: border-box;

			.title {
				margin: vw(24) 0 vw(30);
				text-align: center;
				@include word-vw(16, $gray3);
			}

			.content-styl {
				@include word-vw(14, $gray6);
				line-height: vw(24);
				padding: 0 vw(15);
			}
		}
	}
</style>