pco/app/pages/login/login.vue

<template>
	<view>
		<view class="l-topbox">
			<text>欢迎登录场站管理系统</text>
		</view>
		<view class="box">
			
			<view class="item">
				<view class="l">登录名：</view>
				<view class="r">
					<u-input v-model="form.key" placeholder="登录名"/>
				</view>
			</view>
			<view class="item">
				<view class="l">密码：</view>
				<view class="r">
					<u-input v-model="form.password" placeholder="输入密码" type="password"/>
				</view>
			</view>
		</view>
		<view class="common-btn" @click="sliderVerifyFLag = true">确认登录</view>
		<slider-verify :isShow="sliderVerifyFLag" @touchSliderResult="verifyResult" ref="verifyElement"></slider-verify>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sliderVerifyFLag: false, //滑块验证
				form:{
					key:'',
					password:''
				}
			}
		},
		methods: {
			loginFn(){
				if(!this.form.key){
					this.$common.toast('请输入登录名');
					return;
				}
				if(!this.form.password){
					this.$common.toast('请输入密码');
					return;
				}
				this.form.openid=uni.getStorageSync('openid');
				this.$api.doLogin(this.form).then(resp=>{
					let data=resp.data;
					if(data.tokenInfo){
						uni.setStorageSync('token',data.tokenInfo.tokenValue);
						uni.setStorageSync('customerId',data.admin.customerId)
						uni.setStorageSync('info',data.admin)
						uni.setStorageSync('perList',data.per_list)
						this.$common.to('/pages/index/index')
					}else{
						this.$common.toast('登录失败');
					}
				})
			},
			verifyResult(res) {
				this.sliderVerifyFLag = false;
				
				if (res) {  //校验通过
					this.loginFn()
				}else{
					// 校验失败,点击关闭按钮
					console.log("验证失败，并点了关闭")
				}
			}
			
			
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #fff;
	}
	.l-topbox{
		//background-color: #0080ff;
		height: 400rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		//border-radius: 0 0 30rpx 30rpx;
		margin-bottom: 50rpx;
		background-image: url(../../static/login-bg.png);
		background-size: 100% 100%;
		text{
			font-size: 50rpx;
			font-weight: bold;
			color: #fff;
		}
	}
	@import '@/common/common.scss';
	.box{
		box-shadow: 0 10rpx 30rpx rgba(0,0,0,0.05);
		background-color: #fff;
		box-sizing: border-box;
		margin: 60rpx;
		margin-top: -150rpx;
		width: auto;
		border-radius: 10rpx;
	}
	.common-btn{
		margin: 100rpx 60rpx;
		width: auto;
		height: 98rpx;
		box-shadow: 0 30rpx 30rpx -15rpx rgba(0,128,255,0.2);
	}
</style>