byte-sailing-mobile/src/views/login.vue

<template>
	<div class="login">
		<div class="login-header">
			<img class="logo" src="../assets/logo.png" />
			<h2>{{ $t('login.title') }}</h2>
		</div> 
		<div class="login-form">
			<van-field
				v-model="loginForm.tenantId"
				name=""
				label=""
				placeholder="请输入租户ID"
				:rules="[{ required: true, message: '请填写租户id' }]"
			/>
			<van-field
				v-model="loginForm.username"
				name=""
				label=""
				placeholder="请输入账号"
				:rules="[{ required: true, message: '请填写用户名' }]"
			/>
			<van-field
				v-model="loginForm.password"
				type="password"
				name=""
				label=""
				placeholder="请输入密码"
				:rules="[{ required: true, message: '请填写密码' }]"
			/>

			<van-form @submit="onSubmit">
				<van-cell-group inset> </van-cell-group>
				<div style="margin: 16px">
					<van-button round block type="primary" native-type="submit">
						提交
					</van-button>
				</div>
				<div
					class="check-warp"
					style="text-align: left; justify-content: left"
				>
					<div class="check-icon-warp">
						<van-checkbox
							icon-size="16px"
							v-model="rememberMe"
						></van-checkbox>
					</div>
					记住密码
				</div>
			</van-form>
		</div>
		<div class="login-btn">
			<div class="check-warp">
				<div class="check-icon-warp">
					<van-checkbox
						icon-size="16px"
						v-model="clause"
					></van-checkbox>
				</div>
				{{ $t('login.agreement.text') }}
				<span>{{ $t('login.agreement.clause') }}</span>
				{{ $t('login.agreement.and') }}
				<span>{{ $t('login.agreement.agreement') }}</span>
			</div>

		</div>
	</div>
</template>
<style lang="scss" scoped>
.login {
	height: 100vh;
	width: 100%;
	background-size: 100% 100%;
	background: #fff;
	.check-warp {
		display: flex;
		align-items: center;
		justify-content: center;
		.check-icon-warp {
			margin-right: 5px;
		}
		span {
			color: #3370ff;
			margin: 0 4px;
		}
	}
	.login-form {
		padding: 5px 20px;
	}
	.login-btn {
		font-size: 12px;
		position: fixed;
		bottom: 50px;
		left: 0;
		right: 0;
	}
	.van-cell {
		border: 5px;
		background: #f1f1f1;
		margin-bottom: 12px;
		height: 50px;
		box-sizing: border-box;
		line-height: 44px;
		padding: 3px 12px;
		font-size: 16px;
	}
	.login-header {
		background: url(../assets/images/login-header.png) no-repeat;
		height: 200px;
		background-size: cover;
		padding: 44px 20px 17px;
		box-sizing: border-box;
		.logo {
			height: 45px;
		}
		h2 {
			margin-top: 40px;
		}
	}
}
</style>
<script setup>
import 'vant/lib/index.css'
import { ref, getCurrentInstance, onMounted } from 'vue'
import { setUserInfo, setToken, getUserInfo,getToken } from '@/utils/auth'
import { showSuccessToast, showFailToast,showConfirmDialog } from 'vant'
import * as dd from 'dingtalk-jsapi'
import axios from 'axios'
import { useRoute } from 'vue-router'
const route = useRoute()
const proxy = getCurrentInstance().proxy

const loginForm = ref({
	username: '',
	password: '',
	rememberMe: false,
	tenantId: '',
	code: '',
	uuid: '',
})
const rememberMe = ref(false)
const clause = ref(false)

const radioChange = () => {
	console.log(loginForm.rememberMe)
	// loginForm.value.rememberMe = loginForm.value.rememberMe ? false : false;
}

const onSubmit = () => {
	proxy
		.post('login', loginForm.value, 'post', {
			tenantId: loginForm.value.tenantId,
		})
		.then((res) => {
			console.log(res)
			if (res.code == 200) {
				setToken(res.token)
				getInfo()
			}
		})
}

const getInfo = () => {
	proxy.post('getInfo', {}, 'get').then((res) => {
		console.log(res)
		if (res.code == 200) {
			setUserInfo(res.user)
			window.localStorage.setItem('tenantId', loginForm.value.tenantId)
			if (rememberMe.value) {
				window.localStorage.setItem(
					'username',
					loginForm.value.username
				)
				window.localStorage.setItem(
					'password',
					loginForm.value.password
				)
				window.localStorage.setItem('rememberMe', rememberMe.value)
			} else {
				window.localStorage.setItem('username', '')
				window.localStorage.setItem('password', '')
				window.localStorage.setItem('tenantId', '')
				window.localStorage.setItem('rememberMe', false)
			}
			showSuccessToast('登录成功')
			proxy.$router.push('/main')
		}
	})
}
onMounted(() => {
	let username = window.localStorage.getItem('username')
	let password = window.localStorage.getItem('password')
	let tenantId = window.localStorage.getItem('tenantId')
	let rememberMeCopy = window.localStorage.getItem('rememberMe')
	if (rememberMeCopy == 'true') {
		loginForm.value.username = username
		loginForm.value.password = password
		rememberMe.value = true
		loginForm.value.tenantId = tenantId
	}
})
const loginData = ref({})
let code = ref('')
const ddLoginInit = () => {
	if(getToken()){
		proxy.$router.push('/main')
	}
	dd.ready(function () {
		dd.runtime.permission.requestAuthCode({
			corpId: route.query.id, // 企业id
			onSuccess: function (info) {
				code.value = info.code
				
				proxy
					.post('/open/dingApi/getUserToken', { code: code.value,corpId:route.query.id })
					.then((res) => {
						window.localStorage.setItem('corpId',route.query.id)
						setToken(res.data)
						getInfo()
					})
			},
			onFail: function (err) {
			
			},
		})
	})
}
ddLoginInit()

const a = {
	EventType: 'SYNC_HTTP_PUSH_HIGH',
	bizData: [
		{
			gmt_create: 1683253790000,
			biz_type: 2,
			open_cursor: 0,
			subscribe_id: '30319001_0',
			id: 19780,
			gmt_modified: 1683253790000,
			biz_id: '30319001',
			biz_data:
				'{"eventId":"443aea2dc1f740d4bb8b4f629a8141b7","syncAction":"suite_ticket","suiteTicket":"Kn3hJvJR34e8rUEob0W7nqxK2YHqobAyPsuIQXYR35SsJMp6rE5XQBz9nwXTrJRZaVmXc4z9KjYkzXdkUdS8O3","syncSeq":"8506A9FE673B908159397DC8"}',
			corp_id: 'ding53d823e205604918a39a90f97fcb1e09',
			status: 0,
		},
	],
}
</script>