技術標籤：uni-app

<template>
	<view>
		<view class="login" v-if="show">
			<image src='../../static/login-bg(1).png'></image>
			<view class='content'>
				<view class="text">尊貴的會員，請您先登入</view>
				<button open-type="getUserInfo" lang="zh_CN" @getuserinfo="appLoginWx"  class="button font-36 font-blod">微信授權登入</button>
			</view>
		</view>
		<view class="login" v-else>
			<image src='../../static/login-bg(1).png'></image>
			<text class="font-40 font-bold">請授權手機號碼</text>
			<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" lang="zh_CN" class="button"
			 withCredentials="true">
				獲取手機號
			</button>
		</view> 
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				mid: '',
				show: true,
			};
		},
		onLoad(options) {
			const that = this
			if (uni.getStorageSync('token') && uni.getStorageSync('authtoken')) {   //這個是判斷token和authkoen是否存在，token是微信的，authtoken是用來使用者授權登入獲取的，兩者都同時存在才算登入成功
				uni.switchTab({
					url: '../index/index'
				})
			}
			// 設定上級 ，建議如果通過微信直接分享，傳遞的時候引數不要用scene，二維碼掃進來的用scene，方便判斷
			uni.setStorageSync('father', options.scene)
			// 生成二維碼的時候由於長度限制要對openid 用encode轉碼，所以此處對scene解碼
			var scene = decodeURIComponent(options.scene);
			//處理scene 得到陣列 
			var arrPara = scene.split("&");
			var arr = [];
			for (var i in arrPara) {
				// 得到的arr[0] 是key  arr[1] 是value
				arr = arrPara[i].split("=");
				if (arr[0] == 'mid') {
					// 獲取mid 後面傳遞給後端用 如果有其他引數，也可以通過判斷arr[0]來獲取
					that.mid = arr[1];
				}
			}
			uni.checkSession({
				success: function(res) {
					// console.log("處於登入態", res);
				},
				fail: function(res) {
				}
			})
		},
		methods: {
			appLoginWx() {
				const that = this;
				let mid = this.mid;
				uni.getProvider({
					// 授權 
					service: 'oauth', //服務商 微信qq等預設的是oauth
					success: function(res) {
						if (~res.provider.indexOf('weixin')) { // 判斷是否微信授權 
							uni.login({
								provider: 'weixin',
								success: res => {
									const code = res.code;
									// data要是傳遞給後端的資料，做處理
									const data = mid ? {
										code: code,
										mid: mid
									} : {
										code: code,
										father: uni.getStorageSync('father')
									};

									// 獲取個人資訊 主要是頭像手機號等
									uni.getUserInfo({
										provider: 'weixin',
										success: info => {
											that.$myRequest({
												method: 'POST',
												url: '/auth/wx-codes',
												data: data
											}).then(res => {
												// 設定openid和userInfo 首頁重新整理以及後面請求都會用到
												uni.setStorageSync('openid', res.data.data);
												uni.removeStorageSync('father');
												uni.setStorageSync('userInfo', info.userInfo)
												uni.setStorageSync('token', res.data.token)
												that.show = false;
												if(!res.data.is_authorized && res.statusCode<400){   //後給給的需要，如果is_authorized這個欄位值為true就不需要走下面介面了
													that.authCheck();
												}else{
													uni.setStorageSync('authtoken', res.data.auth_token)
													uni.switchTab({
														url: '../index/index'
													})
												}
											});

										},
										fail: () => {
											uni.showToast({
												title: '微信登入授權失敗',
												icon: 'none'
											});
										}
									});
								},
								fail: () => {
									uni.showToast({
										title: '微信登入授權失敗',
										icon: 'none'
									});
								}
							});
						} else {
							uni.showToast({
								title: '請先安裝微信或升級版本1',
								icon: 'none'
							});
						}
					}
				});
			},
			// 檢查登入 上傳給後端個人資訊 前提要獲取手機號 看後端需求
			authCheck(e) {
				const that = this;
				uni.login({
					provider: 'weixin',
					success: res => {
						const code = res.code;
						uni.getUserInfo({
							provider: 'weixin', //服務商
							success: info => {
								var data = {
									token: uni.getStorageSync('token'),
									user_info: {
										encrypted_data: info.encryptedData,
										iv: info.iv,
										cloud_id: ""
									},
									 "phone_number": {   //這個是獲取手機號需要的引數
									 	"encrypted_data": "e",
									 	"iv": "string",
									 	"cloud_id": "string"
								   }
								};
								// 傳送請求更新個人資訊 
								that.$myRequest({
									method: 'POST',
									url: '/auth/wx-authentications',
									data: data
								}).then(res => {
									uni.setStorageSync('authtoken', res.data.auth_token)
									uni.switchTab({
										url: '../index/index'
									})

								});
							},
							fail: () => {
								uni.showToast({
									title: '微信登入授權失敗',
									icon: 'none'
								});
							}
						});
					},
					fail: () => {
						uni.showToast({
							title: '微信登入授權失敗',
							icon: 'none'
						});
					}
				});
			},
			// 獲取手機號 把encryptedData 和iv 存入storage  之後判斷使用者登入狀態要用
			getPhoneNumber(e) {
				if (e.detail.errMsg == 'getPhoneNumber:ok') {
					uni.setStorageSync('encryptedData', e.detail.encryptedData);
					uni.setStorageSync('iv', e.detail.iv);
					this.authCheck(e);
				} else {
					console.log('使用者點選了拒絕');
				}
			},
		}
	}
</script>

<style lang="scss">
	.login {
		height: 100vh;

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

		.content {
			position: absolute;
			bottom: 0;
			z-index: 999;
			background: #ECECEC;
			height: 490rpx;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			
		}
	}
	
	.text{
		margin-top: 100rpx;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #000000;
	}
	button {
		width: 414rpx;
		height: 88rpx;
		background: linear-gradient(180deg, #EACDA3 0%, #E6B980 100%);
		border-radius: 66rpx;
		margin-top: 100rpx;
	}
	button::after{
		border: none;
	}
</style>