uni-app登录页登入

以下是一个使用uni-app创建登录页面的示例：

1. 在uni-app项目中创建一个新的页面，命名为"login"。
2. 在login.vue文件中，编写登录页面的HTML结构和样式，包括输入框、按钮等元素。
3. 在data中定义需要用到的变量，例如用户名和密码。
4. 在methods中编写登录的逻辑，可以使用uni.request方法向服务器发送登录请求，并处理返回的结果。
5. 在页面的按钮上绑定点击事件，调用登录方法。
6. 在App.vue中配置路由，将登录页面添加到路由中。
7. 在首页或其他页面的按钮上添加跳转到登录页面的事件，使用uni.navigateTo方法跳转到登录页面。

示例代码如下：

<template>
  <view class="container">
    <view class="form">
      <input v-model="username" type="text" placeholder="请输入用户名" />
      <input v-model="password" type="password" placeholder="请输入密码" />
      <button @click="login">登录</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    login() {
      // 发送登录请求
      uni.request({
        url: 'http://example.com/login',
        method: 'POST',
        data: {
          username: this.username,
          password: this.password
        },
        success: res => {
          // 处理登录结果
          if (res.data.success) {
            uni.showToast({
              title: '登录成功',
              icon: 'success'
            });
            // 跳转到首页或其他页面
            uni.switchTab({
              url: '/pages/home/home'
            });
          } else {
            uni.showToast({
              title: '登录失败',
              icon: 'none'
            });
          }
        },
        fail: err => {
          uni.showToast({
            title: '网络错误',
            icon: 'none'
          });
        }
      });
    }
  }
};
</script>

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.form {
  width: 300px;
}

input {
  width: 100%;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  width: 100%;
  padding: 10px;
  background-color: #007aff;
  color: #fff;
  border: none;
  border-radius: 4px;
}
</style>