写一个uniapp的登录注册页面
时间: 2024-01-17 17:14:06 浏览: 25
抱歉,作为AI语言模型我无法提供图片和代码等视觉类的内容,以下是简单的UI设计描述以及前端代码示例,仅供参考:
UI设计:
登录页面:
- LOGO
- 输入框:用户名、密码
- 忘记密码
- 登录按钮
- 去注册按钮
注册页面:
- LOGO
- 输入框:用户名、密码、确认密码、手机号、验证码
- 获取验证码按钮
- 注册按钮
- 去登录按钮
前端代码示例:
登录页面:
```
<template>
<view class="container">
<image class="logo" src="../../static/logo.png"></image>
<input class="input" type="text" placeholder="用户名" v-model="username"></input>
<input class="input" type="password" placeholder="密码" v-model="password"></input>
<view class="forget-password">忘记密码</view>
<button class="login-button" @click="login">登录</button>
<view class="go-register" @click="toRegister">去注册</view>
</view>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
login() {
// 登录逻辑
},
toRegister() {
uni.navigateTo({
url: '/pages/register/register'
})
}
}
}
</script>
```
注册页面:
```
<template>
<view class="container">
<image class="logo" src="../../static/logo.png"></image>
<input class="input" type="text" placeholder="用户名" v-model="username"></input>
<input class="input" type="password" placeholder="密码" v-model="password"></input>
<input class="input" type="password" placeholder="确认密码" v-model="confirmPassword"></input>
<input class="input" type="text" placeholder="手机号" v-model="phone"></input>
<view class="verify-code">{{ verifyCode }}</view>
<button class="get-verify-code" @click="getVerifyCode">获取验证码</button>
<button class="register-button" @click="register">注册</button>
<view class="go-login" @click="toLogin">去登录</view>
</view>
</template>
<script>
export default {
data() {
return {
username: '',
password: '',
confirmPassword: '',
phone: '',
verifyCode: ''
}
},
methods: {
getVerifyCode() {
// 获取验证码逻辑
},
register() {
// 注册逻辑
},
toLogin() {
uni.navigateTo({
url: '/pages/login/login'
})
}
}
}
</script>
```