special/pages/subpack/pages/bindInfo/bindInfo.vue

<template>
	<view class="flex-column" style="height: 100vh;">
		<u-navbar title="特困户看护平台" bg-color="transparent" auto-back :title-style="{fontWeight:'bold'}"></u-navbar>
		<view class="w-750 position-relative" style="height: 472rpx;">
			<image src="@/pages/subpack/static/images/header-login-pwd.png" style="width: 100%;height: 100%;"
				mode="aspectFill"></image>
			<view class="position-absolute top-0 left-0 w-750" style="height: 472rpx;">
				<view class="flex-column" style="margin-top: 262rpx;padding-left: 58rpx;">
					<text class="font-xxl text-black2 font-weight-bolder">您好！</text>
					<text class="font-md text-black2 mt-16">欢迎登录特困户看护平台！</text>
				</view>
			</view>
		</view>
		<view class="flex-column flex-1 bg-white align-center"
			style="margin-top: -24rpx;border-top-left-radius: 48rpx;border-top-right-radius: 48rpx; z-index: 1;">

			<button style="margin-top: 40rpx;border: none;padding: 0;width: 120rpx;height: 120rpx;"
				open-type="chooseAvatar" :hairline="false" @chooseavatar="onChooseAvatar">
				<image style="width: 120rpx;height: 120rpx;border-radius: 20rpx;" :src="avatarImg" mode="aspectFill">
				</image>
			</button>

			<!-- <view class="flex-row align-center border-top border-bottom px-2"
				style="width: 710rpx; height: 88rpx;margin-top: 40rpx;">
				<view style="width: 150rpx;">
					<text class="font font-weight-bolder text-black2">昵称</text>
				</view>
				<view style="margin-left: 20rpx;">
					<input v-model.trim="nickName" type="nickname" :maxlength="20"></input>
				</view>
			</view> -->

			<view class="flex-row align-center border-top border-bottom px-2"
				style="width: 710rpx; height: 88rpx;margin-top: 40rpx;">
				<view style="width: 150rpx;">
					<text class="font font-weight-bolder text-black2">手机号码</text>
				</view>
				<view style="margin-left: 20rpx;">
					<input v-model.trim="phone" type="number" placeholder="请输入手机号码" :maxlength="11"></input>
				</view>
			</view>

			<view class="flex-row align-center justify-center"
				style="width: 638rpx;height: 96rpx;margin-top: 280rpx;background: linear-gradient( 90deg, #2086FF 0%, #305BFF 100%);border-radius: 50rpx;box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(48,91,255,0.32);border: 2rpx solid #FFFFFF;box-sizing: border-box;"
				@click="$u.throttle(handleLogin, 1000)">
				<text class="text-white font-md font-weight-500">立即进入</text>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		bindInfoUrl,
		getUserInfoUrl
	} from '@/common/config/api.js'
	export default {
		data() {
			return {
				openId: '',
				phone: '',
				// nickName: '',
				avatarImg: '/pages/subpack/static/images/avatar.png',
			}
		},
		onLoad(options) {
			console.log('options: ', options);
			this.openId = options.openId;
		},
		methods: {
			onChooseAvatar(e) {
				console.log('头像选择', e);
				this.avatarImg = e.detail.avatarUrl
			},
			getUserInfo() {
				getUserInfoUrl({
						custom: {
							catch: true
						}
					})
					.then(res => {
						uni.hideLoading();
						console.log('用户信息', res);
						let user = {
							id: res.data.user.userId,
							avatar: this.avatarImg,
							nickName: res.data.user.nickName,
							phonenumber: res.data.user.phonenumber,
							roles: res.data.roles
						}
						this.$u.vuex('vuex_user', user);
						uni.switchTab({
							url: '/pages/tabbar/application/application'
						})
					})
					.catch(err => {
						uni.hideLoading();
						console.log(err);
					})
			},
			handleLogin() {
				// if (!this.nickName) {
				// 	return uni.$u.toast('请输入昵称')
				// }
				if (!this.phone) {
					return uni.$u.toast('请输入手机号码')
				}
				if (!uni.$u.test.mobile(this.phone)) {
					return uni.$u.toast('请输入正确的手机号码')
				}

				let avatar = '';
				if (this.avatarImg.startsWith('/')) {
					avatar = '';
				} else {
					avatar = this.avatarImg
				}

				uni.showLoading({
					title: '用户认证中...'
				})

				bindInfoUrl({
						params: {
							openId: this.openId,
							phone: this.phone,
							avatar
						}
					})
					.then(res => {
						console.log('绑定用户信息', res);
						this.$u.vuex('vuex_token', res.token);
						// 获取用户信息
						this.getUserInfo();
					})
					.catch(err => {
						uni.hideLoading();
						console.log(err);
					})

				// 跳转

			},
		}
	}
</script>

<style>
</style>