FE_occupationlab_miniProgram/user/reg/reg.vue

<template>
	<view class="page">
		<view class="logo">
			<image class="icon" src="https://izhixinyun.com/images/hjyz-logo.png" mode="widthFix"></image>
			<view class="texts">
				<view class="cn">慧教云舟</view>
				<view class="en">EduVessel</view>
			</view>
		</view>
		<view class="wrap">
			<view>
				<uni-forms>
					<uni-forms-item>
						<uni-easyinput type="text" v-model="form.userName" placeholder="请输入账号" />
					</uni-forms-item>
					<uni-forms-item>
						<uni-easyinput type="password" v-model.trim="form.password" placeholder="请输入密码"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item class="ver-code">
						<uni-easyinput type="text" v-model="form.userName" placeholder="请输入验证码" />
						<image class="ver-img" src="verImg" mode="widthFix" @clilck="getVerImg"></image>
					</uni-forms-item>
				</uni-forms>
				<button type="primary" @click="submit">登录</button>
			</view>
		</view>
	</view>
</template>

<script>
	import { captcha, weChatToken } from '@/apis/modules/user.js'
	export default {
		data() {
			return {
				openid: '',
				phone: '',
				form: {
					userName: '',
					provinceId: '',
					cityId: '',
				},
				verImg: '',
			}
		},
		onShow() {
			const pages = getCurrentPages()
			const { options } = pages[pages.length - 1]
			this.openid = options.openid
			this.phone = options.phone
			this.getVerImg()
		},
		methods: {
			getVerImg () { // 获取验证码图片
			    this.form.random = Math.floor(Math.random() * 999999999);
			    this.verImg = captcha + "?random=" + `${this.form.random}`;
			},
			// 提交
			async submit() {
				const { form } = this
				if (!form.userName) return this.$util.errMsg('请输入姓名！')
				if (!form.provinceId) return this.$util.errMsg('请选择意向省份！')
				if (!form.cityId) return this.$util.errMsg('请选择意向城市！')
				form.phone = this.phone
					const { token, teamId } = await weChatToken(form)
					this.$util.sucMsg(form.isTeam === 0 ? '创建成功' : '注册成功')
					// 如果返回了token，直接登录，并且把teamId存在缓存里，到了首页后直接选中该团队
					// if (token) {
					// 	teamId && uni.setStorageSync('teamId', teamId)
					// 	uni.setStorageSync('toke', token)
					// 	setTimeout(() => {
					// 		this.toIndex()
					// 	}, 1500)
					// } else {
					// 	setTimeout(() => {
					// 		uni.redirectTo({
					// 			url: '../login/login'
					// 		})
					// 	}, 1500)
					// }
				}
			},
			// 跳转到首页
			toIndex() {
				uni.reLaunch({
					url: this.my ? '../person/person' : '../home/home'
				})
			},
			// 返回
			back() {
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped lang="scss">
.page {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 100%;
	text-align: center;
	background: url(@/static/image/login1.png) 0 0/175rpx auto no-repeat,
		url(@/static/image/login2.png) bottom right/123rpx auto no-repeat;
	.logo {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 40rpx;
		color: #333;
		.icon {
			width: 150rpx;
			margin-right: 20rpx;
		}
		.cn {
			margin-bottom: 10rpx;
			font-size: 40rpx;
			font-weight: 600;
		}
		.en {
			font-size: 28rpx;
		}
	}
}
.wrap {
	position: relative;
	padding: 60rpx;
	margin: 0 61rpx;
	text-align: center;
	border-radius: 8rpx;
	background-color: #fff;
	
	.ver-code {
	    display: flex;
		.ver-img {
			width: 100rpx;
		}
	}
}
</style>