hongze_yb_xcx/pages/login.vue

<template>
    <view class="login-page">
        <image :src="globalImgUrls.loginTop" class="top-img" mode="aspectFill"></image>
        <view class="form-wrap tel-wrap" v-if="active==='手机号'">
            <van-field
                :value="tel"
                placeholder="请输入手机号"
                :border="false"
                center
                type="number"
                title-width="60px"
                @change="inputChange('tel', $event)"
            >
                <template slot="label">
                    <picker
                        mode="selector"
                        :range="telAreaList"
                        range-key="name"
                        :value="telAreaIndex"
                        @change="telAreaChange"
                        header-text="请选择您的国际区号"
                    >
                        <view>
                            +{{ telAreaList[telAreaIndex].value}}
                            <van-icon name="arrow-down" style="margin-left: 4px"/>
                        </view>
                    </picker>
                </template>
                <button slot="button" class="tel-btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">获取微信手机号</button>
            </van-field>
            <van-field
                :value="verifyCode"
                placeholder="请输入4位验证码"
                :border="false"
                title-width="60px"
                type="number"
                maxlength='4'
                center
                @change="inputChange('verifyCode', $event)"
            >
                <text slot="button" class="sendcode-btn" v-if="!isSendVerifyCode" @click="handleSendVerifyCode('tel')">发送验证码</text>
                <van-count-down slot="button" :time="countDownTime" format="ss S" @finish="timeFinished" v-else/>
            </van-field>
            <view class="global-btn-yellow-change submit-btn" @click="handleSubmit('tel')">提交</view>
        </view>
        <view class="form-wrap email-wrap" v-else>
            <van-field
                :value="email"
                placeholder="请输入邮箱地址"
                :border="false"
                center
                title-width="60px"
                @change="inputChange('email',$event)"
            />
            <van-field
                :value="verifyCode"
                placeholder="请输入4位验证码"
                :border="false"
                title-width="60px"
                center
                type="number"
                maxlength='4'
                @change="inputChange('verifyCode',$event)"
            >   
                <text slot="button" class="sendcode-btn" type="primary" v-if="!isSendVerifyCode" @click="handleSendVerifyCode('email')">发送验证码</text>
                <van-count-down slot="button" :time="countDownTime" format="ss S" @finish="timeFinished" v-else/>
            </van-field>
            <view class="global-btn-yellow-change submit-btn" @click="handleSubmit('email')">提交</view>
        </view>
        <!-- 底部 -->
        <view class="change-wrap">
            <view class="text">{{active==='手机号'?'使用邮箱登录':'使用手机号登录'}}</view>
            <image class="img" @click="handleChange" mode="aspectFill" :src="active==='手机号'?'../static/login-email.png':'../static/login-phone.png'"></image>
        </view>
        <view class="bot-text">专注为全球投资者提供中立客观的研究服务</view>
    </view>
</template>

<script>
import { apiGetSMSCode, apiGetEmailCode,apiGetWechatPhone } from '@/api/common'
import { apiUserLogin } from '@/api/user'
import { telVerify, emailVerify } from '@/utils/common'
export default {
    data() {
        return {
            active: "手机号",
            telAreaList: [
                {
                    name: "大陆+86",
                    value: "86",
                },
                {
                    name: "香港+852",
                    value: "852",
                },
                {
                    name: "台湾+886",
                    value: "886",
                },
                {
                    name: "美国+1",
                    value: "1",
                },
                {
                    name: "新加坡+65",
                    value: "65",
                },
            ], //手机号区号
            telAreaIndex: 0, //选择手机号区号第几个
            tel: "",//手机号
            email: "",//邮箱
            verifyCode: "",//验证码
            isSendVerifyCode: false,//是否已经发送验证码
            countDownTime: 60 * 1000,//倒计时60秒
        };
    },
    onShow(){
        uni.hideHomeButton({
			fail(res){
				console.log(res);
			}
		})
    },
    methods: {

        // 获取微信绑定的手机号登录
        async getPhoneNumber({detail}){
            const res=await apiGetWechatPhone({
                encryptedData:detail.encryptedData||'',
                iv:detail.iv||'',
                code:detail.code||'',
                isBind:true,
            })
            if(res.code===200){
                uni.switchTab({
                    url: '/pages/report/report'
                })
                this.$store.dispatch('getUserInfo')
                this.$store.dispatch('getTabBar')
            }else if(res.code===400){
                this.$store.commit('setToken', '')
                this.$store.dispatch('getUserInfo')
            }
        },

        handleChange(){
            if(this.active==='手机号'){
                this.active='邮箱'
            }else{
                this.active='手机号'
            }
        },

        // 区号改变
        telAreaChange(e) {
            this.telAreaIndex = e.detail.value;
        },

        //倒计时结束
        timeFinished() {
            this.isSendVerifyCode = false
        },

        inputChange(key, event) {
            this[key] = event.detail
        },

        //发送验证码
        async handleSendVerifyCode(type) {
            let res
            if (type === 'tel') {
                if (!this.tel) {
                    uni.showToast({
                        title: "请输入手机号",
                        icon: "none"
                    })
                    return
                }
                res = await apiGetSMSCode({
                    mobile: this.tel,
                    area_num: this.telAreaList[this.telAreaIndex].value
                })

            } else {
                if (!this.email) {
                    uni.showToast({
                        title: "请输入邮箱地址",
                        icon: "none"
                    })
                    return
                }
                res = await apiGetEmailCode({
                    email: this.email
                })
            }

            if (res.code === 200) {
                this.isSendVerifyCode = true
                uni.showToast({
                    title: "验证码已发送",
                    icon: "success"
                })
            }
        },

        // 提交
        async handleSubmit(type) {
            let params = {}
            if (type === 'tel') {
                params = {
                    area_num: Number(this.telAreaList[this.telAreaIndex].value),
                    mobile: this.tel,
                    verify_code: this.verifyCode,
                    bind_type: 1
                }
            } else {
                params = {
                    email: this.email,
                    verify_code: this.verifyCode,
                    bind_type: 2
                }
            }

            if (!params.verify_code) {
                uni.showToast({
                    title: "请输入验证码",
                    icon: "none"
                })
                return
            }

            const res = await apiUserLogin(params)
            if (res.code === 200) {
                uni.switchTab({
                    url: '/pages/report/report'
                })
                this.$store.dispatch('getUserInfo')
                this.$store.dispatch('getTabBar')
            }

        }
    },
};
</script>

<style lang="scss">
.login-page {
    padding: 34rpx;
    text-align: center;
    @media screen and (min-width: 700px){
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }
}
.top-img {
    width: 140rpx;
    height: 140rpx;
    margin-top: 70rpx;
    margin-bottom: 100rpx;
    @media screen and (min-width: 700px){
        width: 70px;
        height: 70px;
        margin-top: 35px;
        margin-bottom: 50px;
    }
}
.van-cell {
    border-bottom: 1px solid $global-border-color;
}
.sendcode-btn{
    color:$global-text-color-main;
}
.tel-btn{
    font-size: 14px;
    color: $global-text-color-main;
    background: transparent;
    line-height: 1;
    padding: 0;
}
.tel-btn::after{
    border: none;
}
.change-wrap{
    margin-top: 100rpx;
    @media screen and (min-width: 700px){
        margin-top: 50px;
    }
    .text{
        color: #CFCFCF;
        display: flex;
        align-items: center;
        justify-content: center;
        &::before{
            content: '';
            width: 140rpx;
            height: 1rpx;
            display: inline-block;
            background-color: #E1E2E6;
            margin-right: 20rpx;
            @media screen and (min-width: 700px){
                width: 70px;
                margin-right: 10px;
            }
        }
        &::after{
            content: '';
            width: 140rpx;
            height: 1rpx;
            display: inline-block;
            background-color: #E1E2E6;
            margin-left: 20rpx;
            @media screen and (min-width: 700px){
                width: 70px;
                margin-left: 10px;
            }
        }
    }
    .img{
        margin-top: 40rpx;
        width: 80rpx;
        height: 80rpx;
        @media screen and (min-width: 700px){
            margin-top: 20px;
            width: 40px;
            height: 40px;
        }
    }
}
.submit-btn {
    width: 490rpx;
    margin-left: auto;
    margin-right: auto;
    margin-top: 100rpx;
    @media screen and (min-width: 700px){
        width: 245px;
        margin-top: 50px;
        line-height: 35px;
    }
}
.bot-text{
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 100rpx;
    color: $global-text-color-999;
    width: 100%;
    @media screen and (min-width: 700px){
        bottom: 50px;
    }
}
</style>