contract-front/pages/index/login.uvue

<template>
  <view class="login-container">
    <!-- 顶部欢迎语 -->
	<view class="login_image">
		<image class="login_image_img" src="/static/image/组件 3 – 1.png" ></image>
	</view>
    <view class="welcome">
      <text class="welcome-text">欢迎登陆车辆合同生成</text>
    </view>

    <!-- 账号输入框 -->
    <view class="input-container"> 
      <uni-easyinput prefixIcon="person" class="input"  placeholder="请输入您的账号"  v-model="username" :inputBorder='false'  :clearable='false' >
	  </uni-easyinput>
      <view class="underline"></view>
    </view>

    <!-- 密码输入框 -->
    <view class="input-container">
      <uni-easyinput prefixIcon="locked" class="input" type="password" placeholder="请输入您的密码" v-model="password"  :inputBorder='false' :passwordIcon="false"   :clearable='false'></uni-easyinput>
      <view class="underline"></view>
    </view>

    <!-- 协议提示 -->
    <view class="agreement">
       <radio class = "login-agree" value="r1" :checked="checked"  @click="changeCK">登录即代表同意
        </radio>
      <text class="link" @click="showModals">《用户协议》</text>
      <text class="login-agree">与</text>
      <text class="link" @click="showModal">《隐私政策》</text>
    </view>
	
	<view class = 'button_container'>
    <!-- 登录按钮 -->
	<view class="login-button" @click="handleLogin">
		<button class="login-buttons" >登陆</button>
	</view>
	</view>
    
  <mosowe-confirm-popup
    v-model="popupNoCancelShow"
	title="服务协议和隐私政策"
	confirmText
	cancelText
	>
    <text v-html="privacy"></text>
	<template v-slot:footer>
	<view class="mini_container">
		<button class="mini-btn" type="primary" size="mini" @click="closeModal">取消</button>
		<button class="mini-btn" type="primary" size="mini" @click="getConfirm">确认</button>
	</view>
	</template>
  </mosowe-confirm-popup>	
  
  
  <mosowe-confirm-popup
    v-model="popupNoCancelShow1"
  	title="用户协议"
  	confirmText
  	cancelText
  	>
    <text v-html="agreement"></text>
  	<template v-slot:footer>
  	<view class="mini_container">
  		<button class="mini-btn" type="primary" size="mini" @click="closeModals">取消</button>
  		<button class="mini-btn" type="primary" size="mini" @click="getConfirms">确认</button>
  	</view>
  	</template>
  </mosowe-confirm-popup>	
  </view>
</template>

<script>
	import {login,getInfoList,getList} from '@/api.uts';
export default {
  data() {
    return {
      username: '', // 账号
      password: '', // 密码
      isModalVisible: false, // 控制弹窗显示
      modalTitle: '', // 弹窗标题
      modalContent: '' ,// 弹窗内容
	  popupNoCancelShow: false,
	  popupNoCancelShow1:false,
	  checked:false,
	  agreement:'',
	  privacy:''
    };
  },
mounted() {
getInfoList().then((res)=>{
	getApp().aboutUs = res.result[0].aboutUs;
	this.privacy = res.result[0].privacy;
	this.agreement = res.result[0].agreement;
})

},
  methods: {
    // 处理登录逻辑
    handleLogin() {
      if (!this.username || !this.password) {
        uni.showToast({ title: '请输入账号和密码', icon: 'none' });
        return;
      }else{
		  if(this.checked){
			  let usr = {
			  			  'username' : this.username,
			  			  'password' :this.password
			  }
			  login(usr).then((res)=>{
			  			  uni.setStorageSync('token',res.result.token);
						  console.log(res.result.token);
						   getApp().usrInfo = res.result.userInfo;
						   if(res.success){
										  uni.showToast({
											  title: '登录成功', 
											  icon: 'success',
										            success: (res) => {
										             uni.switchTab({ url: '/pages/home/home' });
										            }
										          })
						   				  
						   }
			  }).catch(
			  (err)=>{
				  uni.showToast({ title: '账号或密码错误,请重新输入！', icon: 'none' });
			  }
			  )
		  }else{
		  		  uni.showToast({ title: '请勾选服务协议', icon: 'none' });
		  }
	  }
    },
    // 显示弹窗
    showModal() {
	this.popupNoCancelShow = true ;
    },
	showModals(){
    this.popupNoCancelShow1 = true ;
	},
    // 关闭弹窗
    closeModal() {
      this.popupNoCancelShow = false ;
    },
	closeModals() {
	  this.popupNoCancelShow1 = false ;
	},
	change(e) {
	},
	changeCK(){
		if(this.checked){
			this.checked = false;
		}else{
			this.checked = true;
		}
	},
	// 处理选中事件
	getConfirm(){
		if(this.checked){
			this.checked = this.checked;
		}else{
			this.checked = true;
		}
		this.popupNoCancelShow = false;
	},
	getConfirms(){
		if(this.checked){
			this.checked = this.checked;
		}else{
			this.checked = true;
		}
		this.popupNoCancelShow1 = false;
	}
  }
};
</script>

<style>


/* 页面容器 */
.login-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #ffffff;
  height: 100vh;
  width: 100%;
}
	.button-text {
		color: #fff;
		font-size: 12rem;
	}
/* 登录图片 */
.login_image{
	width: 100%;
	height: 40%;	
}	
.login_image_img{
	width: 100%;
	height: 100%;
}
/* 欢迎语 */
.welcome {
	height: 15%;
  margin-bottom: 10%;
  display: flex;
  justify-content: end;
  align-items: center;
}

.welcome-text {
  font-size: 1.3rem;
  font-weight: bold;
  color: #044f7a;
}

/* 输入框容器 */
.input-container {
  width: 70%;
  height: 7%;
  /* background-color: #007aff; */
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 输入框样式 */
.input {
  width: 100%;
  height: 99%;
  font-size: 1rem;
  border: none;
  outline: none;
  background-color: transparent;
  /* z-index: 99; */
}

/* 下划线样式 */
.underline {
  width: 100%;
  height: 0.1%;
  background-color: #f2f2f2;
}

/* 协议提示 */
.agreement {
  font-size: 1rem;
  color: #666;
  margin-bottom: 1.2rem;
  width: 90%;
  left:10%;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.login-agree{
	  font-size: 0.6rem;
	  transform: scale(0.9);
  }
  
.link {
  color: #007aff;
  text-decoration: underline;
  font-size: 0.6rem;
}

.button_container{
	width: 100%;
	height: 40%;
	display: flex;
	align-items: center;
	/* background-color: #007aff; */
}
/* 登录按钮 */
.login-button {
width: 70%;
height: 10%;
line-height: 10%;
  background-color: #044f7a;
  color: #fff;
  border: none;
  border-radius: 4rem;
  font-size: 1rem;
  position: absolute;
  top:15%;
  left:15%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.login-buttons{
	width: 100%;
	background-color: #044f7a;
	color: #fff;
}

/* 弹窗样式 */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  width: 80%;
  background-color: #fff;
  border-radius: 0.5rem;
  padding: 1.5rem;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1rem;
  font-weight: bold;
  margin-bottom: 1rem;
}

.close {
  font-size: 1.5rem;
  cursor: pointer;
}

.modal-body {
  font-size: 1rem;
  line-height: 1.5;
}

.mini_container{
	display: flex;
	flex-direction: row;
	align-items: center;
}

/* 按钮 */
.mini-btn{
	width: 30%;
	margin-left: 15%;
}
</style>