ks-app-employment-service/packageB/login.vue

<template>
	<AppLayout title="" :use-scroll-view="false">
		<view class="wrap">
			<view class="login_index">
				<input class="input" placeholder="请输入账号" placeholder-class="inputplace" v-model="form.username" />
				<view class="login_yzm">
					<input class="input" type="password" placeholder="请输入密码" placeholder-class="inputplace"
						v-model="form.password" />
				</view>
				<view class="login_yzm">
					<input class="input" placeholder="请输入验证码" placeholder-class="inputplace" v-model="form.code" />
					<image class="yzm" :src="codeUrl" @click="getCodeImg"></image>
				</view>

				<button class="com-btn" @click="register">登 录</button>
			</view>
		</view>
	</AppLayout>
</template>

<script setup>
	import {
		reactive,
		inject,
		watch,
		ref,
		onMounted,
		onUnmounted
	} from 'vue'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	const {
		$api,
		navTo,
		vacanciesTo,
		navBack
	} = inject("globalFunction");
	const placeholderStyle = 'font-size:30rpx'
	const checked = ref(true)
	const codeUrl = ref('')
	const flag=ref('hlw')

	const form = reactive({
		username: 'langchaojituan',
		password: 'Aa123456?',
		rememberMe: false,
		code: '',
		uuid: ''
	})

	onLoad((option) => {
		if(option.flag){
			flag.value=option.flag
		}
	})

	onMounted(() => {
		getCodeImg()
	})

	function register() {
		if (!form.username) {
			uni.showToast({
				icon: 'none',
				title: '请输入用户名'
			})
			return
		}
		if (!form.password) {
			uni.showToast({
				icon: 'none',
				title: '请输入密码'
			})
			return
		}
		if (!form.uuid) {
			uni.showToast({
				icon: 'none',
				title: '请输入验证码'
			})
			return
		}
		uni.showLoading({
			title: '登录中...',
			mask: true
		})
		if(flag.value=='hlw'){
			$api.myRequest('/auth/login',form,'post',10100).then((res) => {
				uni.setStorageSync('Padmin-Token', res.data.access_token)
				uni.reLaunch({
					url: '/pages/index/index'
				})
				codeUrl.value = 'data:image/gif;base64,' + res.img
			}).catch(() => {
				uni.hideLoading()
				uni.showToast({
					icon: 'none',
					title: '登录失败，请重试'
				})
			})
		}else if(flag.value=='nw'){
			$api.myRequest('/auth/login',form,'post',9100).then((res) => {
				uni.setStorageSync('Padmin-Token', res.data.access_token)
				uni.reLaunch({
					url: '/packageB/priority/helpFilter'
				})
				codeUrl.value = 'data:image/gif;base64,' + res.img
			}).catch(() => {
				uni.hideLoading()
				uni.showToast({
					icon: 'none',
					title: '登录失败，请重试'
				})
			})
		}
		
	}

	function getCodeImg() {
		if(flag.value=='hlw'){
			$api.myRequest('/code',{},'get',10100).then((resData) => {
				codeUrl.value = 'data:image/gif;base64,' + resData.img
				form.uuid = resData.uuid
			});
		}else if(flag.value=='nw'){
			$api.myRequest('/code',{},'get',9100).then((resData) => {
				codeUrl.value = 'data:image/gif;base64,' + resData.img
				form.uuid = resData.uuid
			});
		}
		
	}
</script>

<style scoped lang="stylus">
	.wrap {
		background-color: #ffffff;
		height: 100vh;
		position: relative;

		.lg-head {
			height: 480rpx;
			background: #46ca98;
			position: relative;

			.view_logo {
				text-align: center;

				.login_logo {
					width: 300rpx;
					height: 300rpx;
					margin-top: 100rpx;
				}
			}

			.bg-cover {
				position: absolute;
				bottom: -4rpx;
				left: 0;
				right: 0;
				height: 30rpx;
				background-size: 100% 100%;
				z-index: 1;
			}
		}
	}

	.login_index {
		font-size: 36rpx;
		font-weight: 500;
		width: 596rpx;
		margin: 0 auto;

		::v-deep .is-input-border {
			border: 0;
			border-bottom: 1px solid #dcdfe6 !important;
			border-radius: 0;
		}

		::v-deep .uni-input-input {
			font-size: 32rpx;
			padding-left: 10rpx;
		}

		::v-deep .uniui-contact-filled:before {
			color: #46ca98;
			font-size: 50rpx;
		}

		::v-deep .uniui-locked-filled:before {
			color: #46ca98;
			font-size: 50rpx;
		}

		.login_yzm {
			margin-top: 40rpx;
			display: flex;
			align-items: center;

			.yzm {
				width: 200rpx;
				height: 80rpx;
			}
		}

		.com-btn {
			height: 100rpx;
			background: #46ca98;
			border-radius: 50rpx;
			color: #fff;
			margin-top: 100rpx;
		}

		.login_wt {
			margin: 0 auto;
			text-align: right;
			font-size: 24rpx;
			color: rgba(134, 134, 136, 1);
		}
	}

	.lg-bottom {
		position: absolute;
		bottom: -3px;
		left: 0;
		width: 100%;

		.bottom-svg {
			position: absolute;
			bottom: -3px;
			left: 0;
			width: 100%;
		}
	}

	.login_tongyi {

		font-size: 26rpx;
		color: rgba(196, 196, 196, 1);
		width: 620rpx;
		margin: 32rpx auto;
		text-align: center;

		text {
			color: rgba(86, 176, 236, 1);
		}
	}

	.input {
		padding: 0 30rpx 0 80rpx;
		height: 80rpx;
		background: #FFFFFF;
		border-radius: 75rpx 75rpx 75rpx 75rpx;
		font-size: 28rpx;
	}

	.inputplace {
		font-weight: 400;
		font-size: 28rpx;
		color: #B5B5B5;
	}
</style>