用uniapp写一个注册登录页

在uniApp中，创建一个简单的注册登录页主要包括以下几个步骤：

1. **引入所需组件**:
首先需要导入uniApp提供的表单输入组件，如`input`、`button`以及可能的`view`、`text`等基础元素。还有`@login-success`、`@login-error`这样的事件监听器，用于处理登录成功或失败的情况。

<template>
  <view class="register-login-page">
    <!-- 注册部分 -->
    <view class="register-section">
      <view>注册</view>
      <view slot="footer">
        <input placeholder="请输入手机号" v-model="phoneNumber" @blur="validatePhoneNumber" />
        <input placeholder="设置密码" type="password" v-model="password" />
        <button @click="handleRegister">注册</button>
      </view>
    </view>

    <!-- 登录部分 -->
    <view class="login-section">
      <view>登录</view>
      <view slot="footer">
        <input placeholder="请输入用户名或邮箱" v-model="usernameOrEmail" />
        <input type="password" placeholder="请输入密码" v-model="password" />
        <button @click="handleLogin">@login</button>
      </view>
    </view>
    <view v-if="showLoginSuccess" class="success-message">登录成功！</view>
    <view v-if="showLoginError" class="error-message">登录失败，请检查信息。</view>
  </view>
</template>

2. **数据绑定和事件处理**:
在`script`部分，定义数据模型并处理注册和登录事件。比如验证手机号码和密码，以及触发登录操作并监听登录结果。

<script>
export default {
  data() {
    return {
      phoneNumber: '',
      password: '',
      usernameOrEmail: '',
      showLoginSuccess: false,
      showLoginError: false,
    };
  },
  methods: {
    validatePhoneNumber(e) {
      // 验证手机号码规则...
    },
    handleRegister() {
      if (this.validatePhoneNumber()) {
        // 调用实际的注册API...
      }
    },
    handleLogin() {
      this.$http.post('/api/login', { usernameOrEmail: this.usernameOrEmail, password: this.password })
        .then((res) => {
          if (res.data.success) {
            this.showLoginSuccess = true;
            setTimeout(() => {
              this.showLoginSuccess = false;
            }, 2000);
          } else {
            this.showLoginError = true;
          }
        })
        .catch((err) => {
          this.showLoginError = '服务器错误';
        });
    },
  },
};
</script>

3. **样式定制**:
使用CSS对界面进行美化，包括字体、颜色、间距等。

以上是一个基本的示例，实际应用中还需要考虑用户输入校验、错误提示、安全策略（例如密码加密存储）等因素。记得在uniApp官方文档中查找更多信息：https://uniapp.dcloud.net.cn/api/form