uniapp-ZHSQ/pages/login/login.vue

<template>
<view class="login" style="background-image: url(https://wechat-img-file.oss-cn-beijing.aliyuncs.com/login/Group_491.png);">
  <view class="login-title">
    <view class="login-tip" style="font-size: 40rpx; color: #000000;">欢迎来到【榴园社区】</view>
    <view class="login-tip" style="font-size: 28rpx; color: #555555; margin-top: 30rpx;">为了更好的体验，申请获取您的公开信息</view>
    <view class="login-tip" style="font-size: 28rpx; color: #555555; margin-top: 14rpx;">（头像、昵称等）</view>
    <view class="login-button">
      <button
        class="login-btn"
        open-type="getPhoneNumber"
        @click="headerLoginClick"
        getPhoneNumber="getPhoneNumber"
      >
        授权登录
      </button>
    </view>
    <view class="login-to-home" >
      <text class="login-to-home-text" @click='tohome'>
        返回首页>>
      </text>
    </view>
  </view>
</view>
</template>

<script>
	import { apiArr } from '../../api/login';
	import { request } from '../../utils';
	export default {
		data() {
			return {
				isLogin: false,
			}
		},
		methods: {
			headerLoginClick() {
				let _this = this;
				const systemInfo = uni.getSystemInfoSync();
				const platform = systemInfo.platform;
	// 			if (platform === 'android' || platform === 'ios') {
	// 				console.log('当前登录不是微信小程序登录', platform);
	// 				var weixinOauth = null;
	// 				plus.oauth.getServices(function(services) {
	// 					for (var i in services) {
	// 						var service = services[i];
	// 						// 获取微信登录对象
	// 						if (service.id == 'weixin') {
	// 							weixinOauth = service;
	// 							break;
	// 						}
	// 					}
	// 					weixinOauth.authorize( function(event){
	// 						const {code} = event;
	// 						console.log('weixinOauth.authorize', event)
	// 						//客户端成功获取授权临时票据（code）,向业务服务器发起登录请求。
	// 						_this.appLogin(code);
	
	// 					}, function(err) {
	// 				    // 登录授权失败
	// 				    // err.code是错误码
	// 						console.log('登录授权失败', err)
	// 					})
	// 				}, function(err) {
	// 					// 获取 services 失败
	// 					console.log(' 获取 services 失败', err)
	// 				})
	// 				return;
	// 			}
				
				uni.login({
					onlyAuthorize: true,
					success: (res) => {
						console.log('res',res);
						request(apiArr.login, 'POST', {
							code: res.code
						}).then((res1) => {
							console.log('11231231', res1);
							if(res1.error) return;
							request(apiArr.loginInfo, 'POST', {}, {token: res1.token}).then((res2) => {
								console.log('11231231', res1);
								if(res2.error) return;
								// 保存userId 后续接口使用
								uni.setStorageSync('userId', res2.user_id);
								uni.setStorageSync('openId', res2.open_id);
								uni.setStorageSync('shopId', res2.wshop_id);
								this.isLogin = true;
							})
						})
					}
				})
			},
			getPhoneNumber(event) {
				let that = this
				console.log('thias', that);
				const { isLogin } = this;
				console.log('获取信息', event);
				if (event.detail.errMsg === "getPhoneNumber:ok") {
					request(apiArr.loginGetPhone, 'POST', {
						code: event.detail.code
					}).then((res) => {
						if (isLogin) {
								uni.setStorageSync('phone', res.phone);
								uni.showToast({
									title: '登录成功',
									icon: 'success',
									mask: true,
									duration: 2000,
									success: () => {
										// setTimeout(() => {
										//   this.tohome();
										// }, 2000)
									}
								});
							} else {
								uni.showToast({
									title: '登录失败',
									icon: 'error',
									mask: true,
									duration: 2000,
								})
							}
					})
				} else {
		//       uni.removeStorageSync('ctoken');
		//       uni.removeStorageSync('userId');
		//       uni.removeStorageSync('openId');
		//       uni.removeStorageSync('phone');
		//       uni.removeStorageSync('is_deal');
		//       uni.removeStorageSync('is_dev');
		//       uni.removeStorageSync('is_shop');
		//       uni.removeStorageSync('shopId');
					console.error('用户拒绝授权:', event.detail.errMsg);
				}
			},

			async appLogin (code) {
				console.log('appLogin', code)
				try {
					const res = await request(apiArr.login, 'POST', {code});
					if(res.error) return;
					wx.setStorageSync('ctoken', res.token);
					wx.setStorageSync('is_deal', res.is_deal);
					wx.setStorageSync('is_dev', res.is_dev);
					wx.setStorageSync('is_shop', res.is_shop); // 当前用户是否商家
					
					const res1 = request(apiArr.loginInfo, 'POST', {}, {token: res.token});
					if(res1.error) return
					uni.setStorageSync('userId', res2.user_id);
					uni.setStorageSync('openId', res2.open_id);
					uni.setStorageSync('shopId', res2.wshop_id);
					this.isLogin = true;
				} catch (error) {
					//TODO handle the exception
					console.log('业务登录异常', error);
				}
				
			},
			

			// 返回主页
			tohome: function () {
				// console.log(123);
				uni.redirectTo({
					url: '/pages/index/index'
				});
			}
		}
	}
</script>

<style>

	.login {
	  background-size: 100%;
	  width: 100%;
	  height: 1334rpx;
	  position: fixed;
	}
	
	.login-title {
	  margin-top: 655rpx;
	}
	
	.login-tip {
	  display: flex;
	  justify-content: center;
	}
	
	.login-button {
	  margin: 61rpx 52rpx 0 48rpx;
	}
	
	.login-btn {
	  font-weight: 400;
	  font-size: 36rpx;
	  color: #FFFFFF;
	  background: #FF512A;
	  border-radius: 100rpx 100rpx 100rpx 100rpx;
	}
	
	.van-button__text {
	  font-size: 36rpx;
	  margin: 19rpx 253rpx;
	}
	
	.login-to-home {
	  margin-top: 61rpx;
	  display: flex;
	  justify-content: center;
	}
	
	.login-to-home-text {
	  color: #FF512A;
	  font-size: 26rpx;
	  text-decoration: underline;
	}

</style>