网易云 -微信小程序-vue

项目结构

实现登录（二维码，手机，邮箱，验证码登录）

<template>
    <div class="main">
        <div class="logo">
          <p class="p">🔍CNIP<span class="text">Logo</span></p>
          <div class="logoContent">
              <p>新用户首次登录免费获得VIP周卡</p>
              <p class="logoContentBottome">仅限从未领取过VIP的新用户</p>
          </div>
          <p class="logoLogo"><span>会员曲库</span><span>免费下载</span><span>无损音质</span><span>个性装扮</span></p>
        </div>
        <div v-show="text != 'qr'">
            <div class="login" v-if="text != '验证'">
            <div class="phone"><span>{
  {text}}：</span><input type="text" v-model="account"></div>
            <div class="password"><span>密码：</span><input type="password" v-model="password"></div>
            <button class="userLogin" @click="login">登录</button>
            </div>
            <div class="login" v-if="text === '验证'">
                <div class="phone" v-if="text2 === '手机号'"><span>{
  {text2}}：</span><input type="text" v-model="account"></div>
                <div class="phone" v-if="text2 === '验证'">
                    <span>{
  {text2}}：</span>
                    <input type="text" v-model="password">
                    <uni-countdown :show-day="false" :show-hour="false" :show-minute="false" :second="time"></uni-countdown>
                </div>
                <button class="userLogin" @click="login">{
  {yzmlogin}}</button>
            </div>
            <div class="yzm" @click="change('yzm')" v-show="text != '验证'">验证码登录</div>
            <div class="yzm" @click="change('phone')" v-show="text === '验证'">手机登录</div>
        </div>
        <div v-show="text === 'qr'" class="qr">
            <img :src="img" alt="" :lazy-load="true">
        </div>
        <div class="changeOption">
            <div class="phoneLogin" @click="change('phone')">手机登录</div>
            <div class="emailLogin" @click="change('email')">邮箱登录</div>
            <div class="qrLogin" @click="change('qr')">二维码登录</div>
        </div>
    </div>
</template>

<script>
import {uniCountdown} from '@dcloudio/uni-ui'
export default {
    components:{uniCountdown},
    data() {
        return {
            time:60,            
            text:'手机号',
            text2:'手机号',
            account:'',
            password:'',
            yzmlogin:'下一步',
            img:'',
            key:'',
            times:''
        }
    },
    methods:{
        change(e){
                switch(e){
                case "phone":
                    this.text = '手机号'
                    this.account =''
                    this.password = ''
                    clearInterval(this.times)
                    break;
                case "email":
                    this.text = '邮箱'
                    this.account =''
                    this.password = ''
                    clearInterval(this.times)
                    break
                case 'yzm':
                    this.text = '验证'
                    this.account =''
                    this.password = ''
                    clearInterval(this.times)
                    break
                case 'qr':
                    this.text = 'qr'
                    this.account =''
                    this.password = ''
                    let timess  = Date.now();
                    this.request({url:'/login/qr/key',timestamp:timess}).then(res=>{
                        this.key = res.data.data.unikey
                        this.request({url:'/login/qr/create',data:{
                            key:this.key,
                            qrimg:true
                        }}).then(res2=>{
                            this.img = res2.data.data.qrimg
                            this.checkqr()
                        })
                    })
                }
        },
        login(){
            if(this.yzmlogin === '确定'){
                this.request({url:'/captcha/verify',data:{phone:this.account,captcha:this.password}}).then(res=>{
                    if(res.data.code ===200){
                        console.log(res);
                        uni.setStorageSync('userinfo',res.data);
                        uni.switchTab({
                            url: "/pages/find/index"
                        });
                    }
                })
            }else{
                switch(this.text){
                case "手机号":
                    this.request({url:'/login/cellphone',data:{phone:this.account,password:this.password}}).then(res=>{
                        if(res.data.code === 200){
                            try{
                                uni.setStorageSync('userinfo',res.data);
                                uni.switchTab({
                                url: "/pages/find/index"
                            });
                            }catch(e){
                                throw e
                            }
                            
                        }
                    })
                    break;
                case '邮箱':
                    this.request({url:'/login',data:{
                        email:this.account,