FE_occupationlab_miniProgram/user/reg/reg.vue

<template>
	<view class="page">
		<view class="wrap">
			<image class="logo" src="https://eduvessel.com/images/occupationlab/hjyz-logo.png" mode="widthFix"></image>
			<uni-forms>
				<input type="text" v-model.trim="form.account" placeholder="请输入账号" />
				<input type="password" v-model.trim="form.password" placeholder="请输入密码" />
			</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: '',
					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('请输入密码！')
				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 {
	padding-top: 170rpx;
	min-height: 100%;
	text-align: center;
	background: url(https://eduvessel.com/images/occupationlab/login1.png) 0 0/175rpx auto no-repeat,
		url(https://eduvessel.com/images/occupationlab/login2.png) bottom right/123rpx auto no-repeat;
	box-sizing: border-box;
	.logo {
		width: 500rpx;
		margin-bottom: 80rpx;
	}
}
.wrap {
	position: relative;
	height: 60vh;
	padding: 214rpx 74rpx 28rpx;
	margin: 0 61rpx;
	text-align: center;
	border-radius: 20rpx;
	background-color: #fff;
	input {
		padding: 10rpx 16rpx;
		margin-bottom: 40rpx;
		font-size: 28rpx;
		text-align: left;
		color: #333;
		border-bottom: 1px solid #f3f3f3;
	}
	.btn {
		width: 100%;
		height: 80rpx;
		margin-top: 50rpx;
		font-size: 32rpx;
		line-height: 80rpx;
	}
}
</style>