jiupeiyun_kaoshi/pages/login/login.vue

<template>
	<view class="login">
		<Headers></Headers>
		<image class="bg" src="/static/images/bg.png"></image>
		<view class="ddflex" style="flex-direction: column;">
			<view class="register ddflex">
				<view class="re-con-pic">
					<view class="re-con-pic-title">在线考试系统</view>
					<image src="/static/images/loginBg.png"></image>
				</view>
				<view class="re-con">
					<view class="re-tit">考生登录</view>
					<view class="re-li dflex">
						<!-- <image src="../../static/images/sjico.png" class="sjico"></image> -->
						<input v-model="testNumber" type="number" placeholder="准考证号" maxlength="11" placeholder-class="placeholder" class="re-ipt flex" />
					</view>
					<uni-data-select
					      v-model="password"
					      :localdata="range"
					      @change="changeTestPro"
						  placeholder="考试项目"
					    ></uni-data-select>
					<!-- <view class="re-li re-li-yzm dflex">
						<input v-model="code" maxlength="4" placeholder="请输入验证码" placeholder-class="placeholder" class="re-ipt" />
						<view class="yzm-box" @click="refresh()"><canvas :style="{ width: width + 'px', height: height + 'px' }" canvas-id="imgcanvas"></canvas></view>
					</view> -->
					<view class="re-btn" @click="okLogin()">登录</view>
					<view class="re-btn-text">考生成绩查询</view>
				</view>
			</view>
			<view class="bottom-content ddflex">
				<!-- 考试公告 -->
				<view class="note-box">
					<view class="note-title ddflex">
						<image class="note-title-icon" src="/static/images/ksgg.png"></image>
						<view>考试公告</view>
					</view>
					<view>
						<view class="note-item ddflex">
							<view class="note-item-content">2022年“技能+学历”双证教育班培训简章2022年“技能+学历”双证教育班培训简章2022年“技能+学历”双证教育班培训简章</view>
							<view class="note-item-date">2022-08-25</view>
						</view>
						<view class="note-item ddflex">
							<view class="note-item-content">2022年“技能+学历”双证教育班培训简章</view>
							<view class="note-item-date">2022-08-25</view>
						</view>
						<view class="note-item ddflex">
							<view class="note-item-content">2022年“技能+学历”双证教育班培训简章</view>
							<view class="note-item-date">2022-08-25</view>
						</view>
					</view>
				</view>
				<!-- 注意事项 -->
				<view class="note-box">
					<view class="note-title ddflex">
						<image class="note-title-icon" src="/static/images/zysx.png"></image>
						<view>注意事项</view>
					</view>
					<view>
						<view class="note-item ddflex">
							<view class="note-item-content">2022年“技能+学历”双证教育班培训简章2022年“技能+学历”双证教育班培训简章2022年“技能+学历”双证教育班培训简章</view>
							<view class="note-item-date">2022-08-25</view>
						</view>
						<view class="note-item ddflex">
							<view class="note-item-content">2022年“技能+学历”双证教育班培训简章</view>
							<view class="note-item-date">2022-08-25</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<Foot :havaBackground='false'></Foot>
	</view>
</template>

<script>
const app = getApp();
const req = require('../../utils/request.js');
const utils = require('../../utils/util.js');
export default {
	data() {
		return {
			title: 'Hello',
			width: 115,
			height: 36,
			testNumber: '',
			password: '',
			code: '',
			isCheckArg: true,
			range:[
				{ value: 0, text: "考试项目1" },
				{ value: 1, text: "考试项目2" },
				{ value: 2, text: "考试项目3" }
			]
		};
	},
	onLoad() {
		var tha = this;
		setTimeout(function() {
			tha.initCode();
		}, 200);
	},
	methods: {
		changeEnv() {
			// this.isCheckArg = !this.isCheckArg;
		},
		
		// 考试下拉框
		changeTestPro(e){
			console.log("e:", e);
		},

		okLogin() {
			uni.reLaunch({
				url: '/pages/test/test'
			});
			return false
			
			
			if (!this.testNumber) {
				return req.msg('请输入准考证号');
			}
			if (!this.password) {
				return req.msg('请输入密码');
			}
			if (!this.code) {
				return req.msg('请输入验证码');
			}
			var imgCode = uni.getStorageSync('imgcode');
			if (this.code.toUpperCase() != imgCode.toUpperCase()) {
				req.msg('请输入正确的验证码');
				this.initCode();
				return;
			}
			var formP = {
				account: this.mobile,
				password: this.password
			};
			req.postRequest('/api/v3/hy/account/pwdLogin', formP, data => {
				this.getUserInfo();
			});
		},

		getUserInfo() {
			req.getRequest(
				'/api/v3/hy/account/userInfo',
				{},
				data => {
					req.setStorage('userInfo', data);
					if(data.type==1||data.isStaff){
						uni.reLaunch({
							url: '/pages/learn/learn'
						});
					}else{
						uni.reLaunch({
							url: '/pages/index/index'
						});
					}
				},
				true
			);
		},

		initCode() {
			console.log('start');
			var context = uni.createCanvasContext('imgcanvas', this),
				w = this.width,
				h = this.height;
			context.setFillStyle('white');
			context.setLineWidth(5);
			context.fillRect(0, 0, w, h);
			var pool = [
					'A',
					'B',
					'C',
					'D',
					'E',
					'F',
					'G',
					'H',
					'I',
					'J',
					'K',
					'L',
					'I',
					'M',
					'N',
					'O',
					'P',
					'Q',
					'R',
					'S',
					'T',
					'U',
					'V',
					'W',
					'S',
					'Y',
					'Z',
					'1',
					'2',
					'3',
					'4',
					'5',
					'6',
					'7',
					'8',
					'9',
					'0'
				],
				str = '';
			for (var i = 0; i < 4; i++) {
				var c = pool[this.rn(0, pool.length - 1)]; //随机的字
				var deg = this.rn(-30, 30); //字体的旋转角度
				context.setFontSize(18);
				context.setTextBaseline('top');
				context.setFillStyle(this.rc(80, 150));
				context.save();
				context.translate(30 * i + 15, parseInt(h / 1.5));
				context.rotate((deg * Math.PI) / 180);
				context.fillText(c, -15 + 5, -15);
				context.restore();
				str += c;
			}
			uni.setStorage({
				key: 'imgcode',
				data: str
			});
			for (var i = 0; i < 40; i++) {
				context.beginPath();
				context.arc(this.rn(0, w), this.rn(0, h), 1, 0, 2 * Math.PI);
				context.closePath();
				context.setFillStyle(this.rc(150, 200));
				context.fill();
			}
			context.draw();
			console.log('end');
		},
		rc(min, max) {
			var r = this.rn(min, max);
			var g = this.rn(min, max);
			var b = this.rn(min, max);
			return 'rgb(' + r + ',' + g + ',' + b + ')';
		},
		rn(max, min) {
			return parseInt(Math.random() * (max - min)) + min;
		},
		refresh() {
			this.initCode();
		}
	}
};
</script>

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