UNIAPP实战项目笔记52 输入手机号页面和输入验证码页面

UNIAPP实战项目笔记52 输入手机号页面和输入验证码页面

实际案例图片

输入手机号页面

输入验证码页面

显示输入手机号 使用验证码登录

具体内容图片自己替换哈，随便找了个图片的做示例
具体位置见目录结构
完善布局页面和样式

代码 login-tel.vue页面

<template>
    <view>
        <Lines></Lines>
        <view class="login-tel">
            <view class="tel-main">
                <view class="login-from">
                    <view class="login-user">
                        <text class="user-text">手机号</text>
                        <input type="number" focus="true" v-model="userTel" placeholder="请输入11位手机号">
                    </view>
                </view>
                <view class="tel" @click="goNextCode">下一步</view>
            </view>
        </view>
    </view>
</template>

<script>
    import Lines from '@/components/common/Lines.vue'
    export default {
        data() {
            return {
                userTel:"",
                rules:{
                    userTel:{
                        rule:/^1[2345679]\d{9}$/,
                        msg:"请输入11位手机号"
                    }
                }
                
            };
        },
        components:{
            Lines
        },
        methods:{
             goNextCode(){
                 if( !this.validate('userTel') ) return ;
                 
                 uni.navigateTo({
                     url:'/pages/login-code/login-code'
                 })
             },
             // 判断验证是否符合要求
             validate(key){
                 let bool = true;
                 if( !this.rules[key].rule.test(this[key]) ){
                     uni.showToast({
                         title:this.rules[key].msg,
                         icon:'none'
                     });
                     bool = false;
                     return false;
                 }
                 return bool;
             },
        }
    }
</script>

<style lang="scss">
.login-tel{
    width: 100vw;
    height: 100vh;
}
.tel-main{
    padding: 0 20rpx;
}
.login-from{
    padding: 30rpx 0;
}
.tel{
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    color: #fff;
    background-color: #40bde8;
    border-radius: 40rpx;
}
.login-user{
    font-size: 40rpx;
    padding: 10rpx 0 ;
    display: flex;
    align-items: center;
    border-bottom: 2rpx solid #f7f7f7;
}
.user-text{
    padding-right: 10rpx;
}
</style>

代码 login-code.vue页面

<template>
    <view>
        <Lines></Lines>
        <view class="login-tel">
            <view class="tel-main">
                <view class="login-from">
                    <view class="login-user">
                        <text class="user-text">验证码</text>
                        <input type="text" focus="true" v-model="userCode" placeholder="请输入验证码">
                        <button plain="true" size="mini" :disabled="disabled" @tap="sendCode">{{codeMsg}}</button>
                    </view>
                </view>
                <view class="tel" @click="getNextIndex">下一步</view>
            </view>
        </view>
    </view>
</template>

<script>
    import Lines from '@/components/common/Lines.vue'
    export default {
        data() {
            return {
                //用户输入的验证码
                userCode:"",
                // 倒计时时间
                codeNum:10,
                // 显示的文本
                codeMsg:"",
                // 按钮是否禁用
                disabled:false,
                
                
            };
        },
        components:{
            Lines
        },
        onReady() {
            this.codeMsg = '重新发送('+this.codeNum+')';
            this.sendCode();
        },
        methods:{
             sendCode(){
                 this.disabled = true;
                 let timer = setInterval(()=>{
                     --this.codeNum;
                     this.codeMsg = '重新发送('+this.codeNum+')';
                 },1000);
                 setTimeout(()=>{
                     clearInterval(timer);
                     this.codeNum = 10;
                     this.disabled = false;
                     this.codeMsg = '重新发送';
                 },10000)
             },
             // 点击下一步
             getNextIndex(){
                 uni.switchTab({
                     url:'/pages/index/index'
                 })
             }
        },
    }
</script>

<style lang="scss">
.login-tel{
    width: 100vw;
    height: 100vh;
}
.tel-main{
    padding: 0 20rpx;
}
.login-from{
    padding: 30rpx 0;
}
.tel{
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    color: #fff;
    background-color: #40bde8;
    border-radius: 40rpx;
}
.login-user{
    font-size: 40rpx;
    padding: 10rpx 0 ;
    display: flex;
    align-items: center;
    border-bottom: 2rpx solid #f7f7f7;
}
.user-text{
    padding-right: 10rpx;
}
</style>

代码 pages.json内容

,{
            "path" : "pages/login-tel/login-tel",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "输入手机号",
                "navigationBarBackgroundColor": "#fff"
            }
            
        }
        ,{
            "path" : "pages/login-code/login-code",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "输入验证码",
                "navigationBarBackgroundColor": "#fff"
            }
            
        }

目录结构

前端目录结构

• manifest.json 配置文件： appid、logo…

• pages.json 配置文件： 导航、 tabbar、 路由

• main.js vue初始化入口文件

• App.vue 全局配置：样式、全局监视

• static 静态资源：图片、字体图标

• page 页面

  • index
    • index.vue
  • list
    • list.vue
  • my
    • my.vue
  • my-config
    • my-config.vue
  • my-config
    • my-config.vue
  • my-add-path
    • my-add-path.vue
  • my-path-list
    • my-path-list.vue
  • search
    • search.vue
  • search-list
    • search-list.vue
  • shopcart
    • shopcart.vue
  • details
    • details.vue
  • my-order
    • my-order.vue
  • confirm-order
    • confirm-order.vue
  • payment
    • payment.vue
  • payment-success
    • payment-success.vue
  • login
    • login.vue
  • login-tel
    • login-tel.vue
  • login-code
    • login-code.vue

• components 组件

  • index
    • Banner.vue
    • Hot.vue
    • Icons.vue
    • indexSwiper.vue
    • Recommend.vue
    • Shop.vue
  • common
    • Card.vue
    • Commondity.vue
    • CommondityList.vue
    • Line.vue
    • ShopList.vue
  • order
    • order-list.vue
  • uni
    • uni-number-box
      • uni-number-box.vue
    • uni-icons
      • uni-icons.vue
    • uni-nav-bar
      • uni-nav-bar.vue
    • mpvue-citypicker
      • mpvueCityPicker.vue

• common 公共文件：全局css文件 || 全局js文件

  • api
    • request.js
  • common.css
  • uni.css

• store vuex状态机文件

  • modules
    • cart.js
    • path.js
  • index.js