阅读量:0
跳转语法uni.switchTab({
url: '/pages/index/index'
});
login.vue代码
<template> <!-- 自定义导航栏 --> <NavBar></NavBar> <view class="login_a"> <view class="login_w"> <view class="login_s"> <view class="login_x"> <uni-forms ref="form" :modelValue="formData"> <uni-forms-item label="用户" name="name"> <uni-easyinput type="text" v-model="formData.name" placeholder="请输入账号或手机号" /> </uni-forms-item> <uni-forms-item label="密码" name="password"> <uni-easyinput type="password" v-model="formData.password" placeholder="请输入密码" /> </uni-forms-item> <!-- 我已阅读 --> <uni-forms-item label=""> <uni-data-checkbox v-model="formData.hobby" multiple :localdata="formData.hobbys" /> </uni-forms-item> <button @click="submitForm" type="primary" >登录</button> <!-- 记住密码 --> <uni-forms-item label="" > <uni-data-checkbox v-model="formData.recall" multiple :localdata="formData.recalls" /> </uni-forms-item> </uni-forms> </view> </view> </view> </view> </template> <script setup lang="ts"> import NavBar from "../components/navBar/navBar.vue"; import { reactive } from 'vue'; import { useRouter } from 'vue-router'; const router = useRouter(); const formData = reactive({ name: 'xptyn', password: '12345', hobby: [5], hobbys: [ { "value": 0, "text": "我已阅读并同意《服务协议》和《隐私政策》" }, ], recall: [5], recalls: [ { "value": 0, "text": "记住密码" }, ], }); const submitForm = () => { // 检查用户名和密码是否为空 if (!formData.name || !formData.password) { console.log('用户名和密码不能为空'); return; } // 检查“我已阅读并同意《服务协议》和《隐私政策》”是否选中 if (!formData.hobby.includes(0)) { uni.showModal({ title: '提示', content: '请阅读并同意《服务协议》和《隐私政策》', showCancel: false }); return; } // 登录逻辑，假设登录成功 console.log('表单数据信息：', formData); uni.switchTab({ url: '/pages/index/index' }); }; // 我已阅读 const change = (e) => { console.log('e:', e); }; </script> <style lang="scss" scoped> @import "/static/css/login.css"; @import '@/uni_modules/uni-scss/index.scss'; </style> login.css
.login_q{ width: 100%; height: 400rpx; position: relative; /* 设置相对定位 */ } .login_z{ width: 100%; height: 80rpx; background-color: #fff; position: absolute; /* 设置绝对定位 */ top: 424rpx; /* 定位到顶部 */ border-radius: 40rpx 40rpx 0rpx 0rpx; } .login_w{ width: 100%; height: 800rpx; display: flex; justify-content: center; } .login_s{ width: 90%; height: 800rpx; } .tit_q{ display: flex; justify-content: center; font-size: 46rpx; } .login_x{ margin-top: 40rpx; } 