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">
			<uni-forms>
				<uni-forms-item>
					<uni-easyinput type="text" v-model.trim="form.account" placeholder="请输入账号" />
				</uni-forms-item>
				<uni-forms-item>
					<uni-easyinput type="password" v-model.trim="form.password" placeholder="请输入密码" />
				</uni-forms-item>
				<uni-forms-item>
					<view class="ver-code">
						<uni-easyinput type="text" v-model.trim="form.code" placeholder="请输入验证码" />
						<image class="ver-img" :src="verImg" mode="widthFix" @click="getVerImg"></image>
					</view>
				</uni-forms-item>
			</uni-forms>
			<button class="btn" type="primary" @click="submit">登录</button>
		</view>
	</view>
</template>

<script>
	import { captcha, weChatToken } from '@/apis/modules/user.js'
	export default {
		data() {
			return {
				openid: '',
				phone: '',
				form: {
					account: '',
					password: '',
					code: '',
					random: '',
				},
				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.account) return this.$util.errMsg('请输入账号！')
				if (!form.password) return this.$util.errMsg('请输入密码！')
				if (!form.code) return this.$util.errMsg('请输入验证码！')
				const { data } = await weChatToken({
					...form,
					openid: this.openid,
					phone: this.phone,
					platformId: 1,
				})
				uni.setStorageSync('token', data.token)
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
		}
	}
</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: 200rpx;
			height: 80rpx;
			margin-left: 20rpx;
		}
	}
	.btn {
		width: 100%;
	}
}
</style>