帮我用uniapp+uview写一个手机验证码登录页面，是个社交类的软件，要简洁大方好看

当然可以！UniApp 是一个基于 Vue.js 的跨平台开发框架，而 UView 是一个基于 UniApp 的组件库，可以帮助你创建漂亮的界面。下面是一个简单的示例代码，实现了一个手机验证码登录页面：

1. 在你的项目中安装 UView 组件库：

   npm install uview-ui

2. 在页面的 `template` 中添加以下代码：

   <u-cell-group>
     <u-cell title="手机号码">
       <u-input type="number" placeholder="请输入手机号码" v-model="phone"></u-input>
     </u-cell>
     <u-cell title="验证码">
       <u-input type="number" placeholder="请输入验证码" v-model="code"></u-input>
       <u-button type="primary" @click="sendCode" :disabled="codeSending">{{ codeButtonText }}</u-button>
     </u-cell>
   </u-cell-group>
   <u-button type="primary" @click="login">登录</u-button>

3. 在页面的 `script` 中添加以下代码：

   export default {
     data() {
       return {
         phone: '',
         code: '',
         codeSending: false,
         codeButtonText: '发送验证码',
         codeSeconds: 60
       };
     },
     methods: {
       sendCode() {
         // 发送验证码逻辑，可以使用uni.request等方法向后端发送请求
         // 然后设置 codeSending 为 true，倒计时结束后再设置为 false
         this.codeSending = true;
         this.codeButtonText = `${this.codeSeconds}秒后重试`;
         const timer = setInterval(() => {
           this.codeSeconds--;
           if (this.codeSeconds <= 0) {
             clearInterval(timer);
             this.codeSeconds = 60;
             this.codeSending = false;
             this.codeButtonText = '发送验证码';
           } else {
             this.codeButtonText = `${this.codeSeconds}秒后重试`;
           }
         }, 1000);
       },
       login() {
         // 登录逻辑，可以使用uni.request等方法向后端发送请求
         // 使用 this.phone 和 this.code 获取用户输入的手机号码和验证码
       }
     }
   };

4. 在页面的 `style` 中添加以下代码：

   /* 根据需要自定义样式 */

这只是一个简单的示例，你可以根据自己的需求进行定制，添加更多的验证逻辑、样式等。希望这能帮助到你！