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 v-if="loginChannel === 'android' || loginChannel === 'ios'" class="app_login">
				<input class="input" type="number" maxlength="11" data-name="userId" @input='headerInputClick'
					:value="userId" placeholder="请输入手机号" />
				<input class="input" password data-name="passWord" @input='headerInputClick' :value="passWord"
					placeholder="请输入密码" />
				<view class="tips">未注册用户填写手机号后点击登录即可，无需输入密码</view>
				<button class="app_login_btn" @click="headerLoginClick">登录</button>
			</view>

			<view v-if="loginChannel === 'mp-weixin'" class="">
				<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>
			<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 { apiArr as apiArr2 } from '../../api/v2User';
import { request } from '../../utils';
export default {
	data() {
		return {
			isLogin: false,
			loginChannel: '', // 登录渠道
			userId: '',
			passWord: '',
		}
	},
	methods: {

		headerInputClick(e) {
			const { name } = e.currentTarget.dataset;
			const { value } = e.detail;
			this[name] = value
		},

		headerLoginClick() {
			let that = this
			uni.showLoading({
				title: '登录中...',
				mask: true
			});
			if (this.loginChannel === 'android' || this.loginChannel === 'ios') {
				this.appLogin();
				return;
			}

			uni.login({
				onlyAuthorize: true,
				success: (res) => {
					request(apiArr.login, 'POST', {
						code: res.code,
						phone: '',
						password: '',
					}, { silent: false }).then((loginRes) => {
						// 存储用户信息
						uni.setStorageSync('ctoken', loginRes.token);
						uni.setStorageSync('is_deal', loginRes.is_deal);
						uni.setStorageSync('is_dev', loginRes.is_dev);
						uni.setStorageSync('is_shop', loginRes.is_shop);


						// 获取用户信息
						request(apiArr.loginInfo, 'POST', {
							token: loginRes.token
						}, { silent: false }).then((res2) => {
							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;
							that.getUserInfo()
						})
					}, (err) => {
						uni.hideLoading();
						console.log('登录接口错误', err);
					})
				}
			})
		},

		// 小程序登录获取手机号接口
		getPhoneNumber(event) {
			console.log('小程序登录获取手机号', event);
			const { isLogin } = this;
			// uni.setStorageSync('phone', '18332119617');
			// this.tohome();
			//  return
			if (event.detail.errMsg === "getPhoneNumber:ok") {
				request(apiArr.loginGetUserPhone, 'POST', {
					code: event.detail.code
				}, { silent: false }).then((res) => {
					uni.hideLoading();
					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.hideLoading();
				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');
				uni.removeStorageSync('order_dispatch_permission');
				console.error('用户拒绝授权:', event.detail.errMsg);
			}
		},

		getUserInfo() {
			request(apiArr2.getUserInfo, "POST", {
				user_id: uni.getStorageSync('userId')
			}).then(res => {
				console.log('111111', res);
				const { community_worker } = res;
				uni.setStorageSync('order_dispatch_permission', community_worker && community_worker[0].order_dispatch_permission == 1 || false);
				uni.setStorageSync('nickName', res.nick_name);
				console.log(res)
			})
		},

		// app端登录
		async appLogin() {
			try {
				const loginRes = await request(apiArr.login, 'POST', {
					code: '',
					phone: this.userId,
					password: this.passWord
				}, { silent: false });
				uni.setStorageSync('ctoken', loginRes.token);
				uni.setStorageSync('is_deal', loginRes.is_deal);
				uni.setStorageSync('is_dev', loginRes.is_dev);
				uni.setStorageSync('is_shop', loginRes.is_shop);

				// 获取用户信息
				const loginInfoRes = await request(apiArr.loginInfo, 'POST', {
					token: loginRes.token
				}, { slient: false });
				uni.setStorageSync('userId', loginInfoRes.user_id);
				uni.setStorageSync('openId', loginInfoRes.open_id);
				uni.setStorageSync('shopId', loginInfoRes.wshop_id);
				uni.setStorageSync('phone', this.userId); // app端无获取手机号功能，登录成功则存储用户填写手机号
				this.isLogin = true;
				uni.hideLoading();

				if (loginRes.msg) {
					uni.showModal({
						title: '提示',
						content: loginRes.msg,
						showCancel: false,
						complete: (res) => {
							if (res.confirm) {
								this.tohome();
							}
						}
					})
				} else {
					this.tohome();
				}
			} catch (error) {
				uni.hideLoading();
				//TODO handle the exception
				console.log('app登录异常', error);
			}

		},


		// 返回主页
		tohome: function () {
			// console.log(123);
			uni.redirectTo({
				url: '/pages/index/index'
			});
		}
	},
	onLoad() {
		const systemInfo = uni.getSystemInfoSync();
		console.log('platformplatform', systemInfo)
		// this.loginChannel = systemInfo.osName;
		// return;
		if (systemInfo.uniPlatform === 'mp-weixin') {
			this.loginChannel = systemInfo.uniPlatform;
		} else {
			this.loginChannel = systemInfo.osName;
		}
	}
}
</script>

<style>
@import url("./login.css");
</style>