contract-front/111/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="showModal">《用户协议》</text>
      <text class="login-agree">与</text>
      <text class="link" @click="showModal">《隐私政策》</text>
    </view>
	
	<view class = 'button_container'>
    <!-- 登录按钮 -->
    <button class="login-button" @click="handleLogin">登陆</button>
	</view>
    
  <mosowe-confirm-popup
    v-model="popupNoCancelShow"
	title="服务协议和隐私政策"
	confirmText
	cancelText
	>
    没有取消弹框
	<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>	
  </view>
</template>

<script>
export default {
  data() {
    return {
      username: '', // 账号
      password: '', // 密码
      isModalVisible: false, // 控制弹窗显示
      modalTitle: '', // 弹窗标题
      modalContent: '' ,// 弹窗内容
	  popupNoCancelShow: false,
	  checked:false,
    };
  },
  onLoad() {
  	uni.request(
  	{ 
  				  url: 'https://gpt.aiym.run/contract/miniapp/product/categories' ,
  				  method:'GET',
				  header:{
					  "Content-Type": "application/json",
					  "X-Access-Token":'11'
				  },
  				  success:(res)=>{
  					  console.log(res.data)
  				  }
  	}
  	);
  },
  
  methods: {
    // 处理登录逻辑
    handleLogin() {
      if (!this.username || !this.password) {
        uni.showToast({ title: '请输入账号和密码', icon: 'none' });
        return;
      }else{
		  
		  console.log(this.checked);
		  if(this.checked){
		  		  uni.showToast({ title: '登录成功', icon: 'success' });
		  		  uni.switchTab({ url: '/pages/home/home' });
		  }else{
		  		  uni.showToast({ title: '请勾选服务协议', icon: 'none' });
		  }
	  }
    },
    // 显示弹窗
    showModal() {
	this.popupNoCancelShow = true ;
    },
    // 关闭弹窗
    closeModal() {
      this.popupNoCancelShow = false ;
    },
	change(e) {
	console.log('当前模式：' + e.type + ',状态：' + e.show);
	},
	changeCK(){
		if(this.checked){
			this.checked = false;
		}else{
			this.checked = true;
		}
	},
	// 处理选中事件
	getConfirm(){
		console.log("111");
		if(this.checked){
			this.checked = this.checked;
		}else{
			this.checked = true;
		}
		this.popupNoCancelShow = 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;;
	  
  }
  
.link {
  color: #007aff;
  text-decoration: underline;
  font-size: 0.6rem;
}

.button_container{
	width: 100%;
	height: 40%;
	display: flex;
	align-items: center;
}
/* 登录按钮 */
.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;
}

/* 弹窗样式 */
.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>