qujiancesu/pages/signIn.vue

<template>
	<view class="page">
		<image class="left" src="/static/signIn/signIn.png" mode="aspectFit"></image>
		<view class="box">
			<image class="title" src="/static/signIn/title.png" mode="aspectFit"></image>
			<view class="desc">欢迎登录！很高兴再次见到你</view>
			<view class="from">
				<view class="input" :class="{on:isname}">
					<image src="/static/signIn/2.png"></image>
					<input cursor-spacing='15' v-model="name" @focus="isname=true" @blur="isname=false"
						placeholder="请填写账号" />
				</view>
				<view class="input" :class="{on:ispassword}">
					<image src="/static/signIn/1.png"></image>
					<input cursor-spacing='15' v-model="password" @focus="ispassword=true" @blur="ispassword=false"
						:type="!showpassword?'password':'text'" placeholder="请填密码" />
					<view @click="showpassword=!showpassword" v-if="password.length">
						<uni-icons type="eye-slash-filled" v-if="!showpassword" size="16rpx"></uni-icons>
						<uni-icons type="eye-filled" v-else size="16rpx"></uni-icons>
					</view>
				</view>
				<view class="checkbox" @click.stop="memory=!memory">
					<checkbox @click.stop="memory=!memory" activeBackgroundColor='#4D7BFF' :checked="memory"
						color="#ffffff" style="transform:scale(0.7)" />
					记住密码
				</view>
				<view class="submit" @click="submit">登录</view>
				
			</view>
		</view>
	</view>

</template>

<script setup>
	import {
		applogin
	} from "/appapi/index.js"
	import soket from "/utils/soket.js"
	import {
		onShow
	} from "@dcloudio/uni-app"
	// var hikVideoModule = uni.requireNativePlugin("AS-HikVideoModule");
	import {
		reactive,
		ref
	} from 'vue';
	
	
	
	const isname = ref(false);
	const ispassword = ref(false);
	const showpassword = ref(false)
	const name = ref(uni.getStorageSync('name'));
	const password = ref(uni.getStorageSync('password'))
	const memory = ref(true)
	onShow(() => {
		// 登录页面 关闭Socket
		uni.closeSocket()
	})

	function submit() {
		if (!name.value) {
			uni.showToast({
				title: "请填写账号",
				icon: "none"
			})
			return
		}
		if (!password.value) {
			uni.showToast({
				title: "请填写密码",
				icon: "none"
			})
			return
		}

		applogin({
			username: name.value,
			password: password.value,
			deviceType: " android"
		}).then(r => {
			// 创建soket连接
			uni.setStorageSync('USERID', r.data.user.userId)
			soket()
			uni.reLaunch({
				url: "/pages/index"
			})
			if (memory.value) {
				uni.setStorageSync('name', name.value);
				uni.setStorageSync('password', password.value);
			} else {
				uni.removeStorageSync('name')
				uni.removeStorageSync('password')
			}
		})
	}

	function ccc(e) {
		console.log(e)
	}
</script>

<style scoped lang="scss">
	.page {
		width: 100vw;
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0rpx 118rpx 0 32rpx;
		background: #f1f5fd;

		.left {
			width: 410rpx;
			height: 310rpx;
		}

		.box {


			.title {
				height: 40rpx;
				width: 230rpx;
			}

			.desc {
				text-align: center;
				color: #667085;
				font-size: 15rpx;
				margin: 0rpx 0 20rpx 0;
			}

			.from {
				margin-top: 34rpx;

				.input {
					display: flex;
					align-items: center;
					border: 1px solid #D0D5DD;
					padding: 7rpx 10rpx;
					border-radius: 5rpx;
					margin-bottom: 9rpx;
					background: #fff;

					&.on {
						border: 1px solid #4D7BFF;
					}

					input {
						font-size: 12rpx;
						margin-right: 7rpx;
					}

					image {
						width: 10rpx;
						height: 13rpx;
						margin-right: 10rpx;
					}
				}

			}

			.checkbox {
				display: flex;
				align-items: center;
				color: #667085;
				margin: 15rpx 0;
				font-size: 11rpx;
			}

			.submit {
				text-align: center;
				background: #4D7BFF;
				color: #fff;
				line-height: 33rpx;
				font-size: 13rpx;
				border-radius: 5rpx;
			}
		}
	}
</style>