dingzhou-app/pages/login/login.vue

<template>
	<view
		style="width: 100vw;height: 100vh;position: relative;background-image: url(/static/index_bg.png);background-size: 100% 100%;overflow: hidden;">
		<view style="display: flex;justify-content: center;position: absolute;top: 20%;width: 100%;">
			<image src="/static/logo.png" mode="widthFix" style="width: 40vw;"></image>
		</view>
		<view
			style="width: 100%;position: absolute;top: 56%;transform: translateY(-50%);display: flex;justify-content: center;">
			<view style="width: 60%;">
				<u--form labelPosition="left" :model="model" :rulse="rules" ref="uForm">
					<u-form-item label="" prop="username" borderBottom ref="item1">
						<u--input v-model="model.username" placeholder="请输入账号" border="none" prefixIcon="account-fill"
							prefixIconStyle="font-size: 54rpx;color: #409EFF"></u--input>
					</u-form-item>
					<u-form-item label="" prop="password" borderBottom ref="item1">
						<view v-if="type==false">
							<u--input v-model="model.password" placeholder="请输入密码" type="password" border="none" prefixIcon="lock-fill" prefixIconStyle="font-size: 54rpx;color: #409EFF"  @change="change"></u--input>
							
						</view>
						<view v-if="type == true" style="width: 84%;">
							<view style="display: flex;align-items: center;">
								<u-icon name="lock-fill" color="#409EFF" size="54rpx"></u-icon>
								<view style="">
									{{model.qwe}}
								</view>
							</view>
							<!-- <u--input v-model="model.qwe" placeholder="请输入密码" type="text" readonly border="none" prefixIcon="lock-fill" prefixIconStyle="font-size: 54rpx;color: #409EFF" ></u--input> -->
						</view>
						<view @longpress="longIn" @touchend="leave">
							<u-icon name="eye-off" color="#909399" size="54rpx" v-if="type == false"></u-icon>
							<u-icon name="eye-fill" color="#909399" size="54rpx" v-else></u-icon>
						</view>
					</u-form-item>
				</u--form>
			</view>
		</view>
		<view style="width: 100%;position: absolute;top: 70%;display: flex;justify-content: center;">
			<view style="width: 60%;">
				<u-button text="登录" type="primary" size="large" shape="circle" @click="logOn"></u-button>
			</view>
		</view>
		<view class="wave"></view>
		<view class="wave2"></view>
		<view class="wave3"></view>
		<view class="wave4"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				model: {
					username: "",
					password: "",
					qwe:""
				},
				//表单验证
				rules: {
					'username': {
						required: true,
						message: '请输入账号',
						trigger: ['blur', 'change']
					},
					'password': {
						required: true,
						message: '请输入密码',
						trigger: ['blur', 'change']
					},
				},
				//密码可见
				type: false
			}
		},
		onLoad() {
			if(uni.getStorageSync('token') != '' && uni.getStorageSync('userInfo') != ''){
				uni.reLaunch({
					url:"/pages/index/index"
				})
			}
		},
		methods: {
			//登陆按钮
			logOn() {
				let that = this
				// uni.switchTab({
				// 	url:"/pages/index/index"
				// })
				this.$refs.uForm.validate().then(res => {
					uni.showLoading({
						title: "登录中...",
						mask: true
					})
					uni.$u.http.post('/app/login', that.model).then(qwe => {
						// console.log(qwe)
						getApp().globalData.token = qwe.token
						uni.hideLoading()
						uni.setStorageSync('token', qwe.token)
						uni.setStorageSync('jtoken', qwe.jtoken)
						that.getUserInfo()
					}).catch(error => {
						uni.hideLoading()
						uni.showToast({
							title:error.msg,
							icon:'none'
						})
					})

				}).catch(errors => {

				})
			},
			//获取个人信息
			getUserInfo() {
				uni.$u.http.get('/getInfo').then(res => {
					uni.setStorageSync('userInfo', res.user)
					getApp().globalData.userInfo = res.user
					uni.switchTab({
						url: "/pages/index/index"
					})
				})
			},
			//长按
			longIn(){
				this.type = true
				this.$forceUpdate()
			},
			//离开长按
			leave(){
				if(this.type==true){
					this.type = false
					this.$forceUpdate()
				}
			},
			change(){
				this.model.qwe = this.model.password
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-line {
		border-bottom: 2px solid #409EFF !important
	}

	@keyframes run {
		to {
			transform: translateX(-100vw);
		}
	}

	.box {
		width: 200vw;
		list-style: none;
		animation: run 4s linear infinite;
	}

	.wave {
		position: fixed;
		bottom: -60px;
		left: 0;
		width: 100vw;
		height: 200px;
		// outline: 2px dashed gray;
		--c: #2196F3;
		--b: red;
		--w1: radial-gradient(100% 57% at top, #0000 100%, var(--c) 100.5%) no-repeat;
		--w2: radial-gradient(100% 57.5% at bottom, var(--c) 100%, #0000 100.5%) no-repeat;
		background: var(--w1), var(--w2), var(--w1), var(--w2);
		background-position-x: -200%, -100%, 0%, 100%;
		background-position-y: 100%;
		background-size: 50.5% 100%;
		animation: m 2s infinite linear;
		opacity: 0.4;
	}
	.wave2 {
		position: fixed;
		bottom: -60px;
		left: 0;
		width: 100vw;
		height: 200px;
		// outline: 2px dashed gray;
		--c: #2196F3;
		--b: red;
		--w1: radial-gradient(100% 57% at top, #0000 100%, var(--c) 100.5%) no-repeat;
		--w2: radial-gradient(100% 57.5% at bottom, var(--c) 100%, #0000 100.5%) no-repeat;
		background: var(--w1), var(--w2), var(--w1), var(--w2);
		background-position-x: -200%, -100%, 0%, 100%;
		background-position-y: 100%;
		background-size: 50.5% 100%;
		animation: m 3s infinite linear;
		opacity: 0.4;
		animation-direction:reverse
	}
	.wave3 {
		position: fixed;
		bottom: -60px;
		left: 0;
		width: 100vw;
		height: 200px;
		// outline: 2px dashed gray;
		--c: #2196F3;
		--b: red;
		--w1: radial-gradient(100% 57% at top, #0000 100%, var(--c) 100.5%) no-repeat;
		--w2: radial-gradient(100% 57.5% at bottom, var(--c) 100%, #0000 100.5%) no-repeat;
		background: var(--w1), var(--w2), var(--w1), var(--w2);
		background-position-x: -200%, -100%, 0%, 100%;
		background-position-y: 100%;
		background-size: 50.5% 100%;
		animation: m 5s infinite linear;
		opacity: 0.2;
	}
	.wave4 {
		position: fixed;
		bottom: -60px;
		left: 0;
		width: 100vw;
		height: 200px;
		// outline: 2px dashed gray;
		--c: #2196F3;
		--b: red;
		--w1: radial-gradient(100% 57% at top, #0000 100%, var(--c) 100.5%) no-repeat;
		--w2: radial-gradient(100% 57.5% at bottom, var(--c) 100%, #0000 100.5%) no-repeat;
		background: var(--w1), var(--w2), var(--w1), var(--w2);
		background-position-x: -200%, -100%, 0%, 100%;
		background-position-y: 100%;
		background-size: 50.5% 100%;
		animation: m 6s infinite linear;
		opacity: 0.2;
		animation-direction:reverse
	}
	@keyframes m {
		0% {
			background-position-x: -200%, -100%, 0%, 100%
		}

		100% {
			background-position-x: 0%, 100%, 200%, 300%
		}
	}
</style>