hongze_yb_pc/src/components/LoginPop.vue

<script setup>
import { onMounted,onUnmounted,reactive,ref} from 'vue';
import { ElMessage } from 'element-plus';
import {ArrowDown} from '@element-plus/icons-vue'
import {apiUserLogin,apiGetEmailCode,apiGetSMSCode} from '@/api/common'

let sendCodeInterval=null

let phoneAreaList=ref([
    {
        name: "大陆+86",
        value: "86",
    },
    {
        name: "香港+852",
        value: "852",
    },
    {
        name: "台湾+886",
        value: "886",
    },
    {
        name: "美国+1",
        value: "1",
    },
    {
        name: "新加坡+65",
        value: "65",
    }
])
let selectArea=ref({name: "大陆+86",value:'86'})
let form=reactive({
    type:'phone',
    mobile:'',
    code:'',
    email:''
})

const typeChange=(e)=>{
    form.type=e
    form.mobile=''
    form.code=''
    form.email=''
    clearTimeout(sendCodeInterval)
    isSendCode.value=false
}

//发送验证码

let isSendCode=ref(false)//是否已发送验证码
const handleSendCode=async (type)=>{
    if(isSendCode.value) return
    let res
    if(type=='phone'){
        if(!form.mobile){
            ElMessage('请输入手机号')
            return
        }
        res=await apiGetSMSCode({
            mobile: form.mobile,
            area_num: selectArea.value.value
        })
    }else{
        if(!form.email){
            ElMessage('请输入邮箱')
            return
        }
        res=await apiGetEmailCode({email: form.email})
    }
    if(res.code===200){
        isSendCode.value=true
        ElMessage.success('验证码已发送')
        sendCodeInterval=setTimeout(() => {
            isSendCode.value=false
        }, 60000);
    }
}

onUnmounted(()=>{
    clearTimeout(sendCodeInterval)
})

const handleLogin=async ()=>{
    let params = {}
    if (type === 'phone') {
        params = {
            area_num: selectArea.value.value,
            mobile: form.mobile,
            verify_code: form.code,
            bind_type: 1
        }
    } else {
        params = {
            email: form.email,
            verify_code: form.code,
            bind_type: 2
        }
    }
    if(!params.verify_code){
        ElMessage('请填写验证码')
        return
    }
    const res=await apiUserLogin(params)
    if(res.code===200){
        window.location.href(import.meta.env.VITE_APP_REDIRECT_URI)
    }
}


onMounted(()=>{
    const redirect_uri=encodeURIComponent(import.meta.env.VITE_APP_REDIRECT_URI)
    let obj=new WxLogin({
        self_redirect:true,
        id:"wx-qrcode-box", 
        appid: import.meta.env.VITE_APP_APPID, 
        scope: "snsapi_login", 
        redirect_uri: redirect_uri,
        state: "",
        style: "",
        href: "",//可传入base64 编码的 css样式
    });
})

</script>

<template>
    <div class="login-wrap">
        <div class="content">
            <!-- <img class="close-icon" src="@/assets/icon-close.png" alt=""> -->
            <div id="wx-qrcode-box" class="wx-qrcode-box" v-if="$store.state.showLogin"></div>
            <div class="bind-accout-box" v-if="$store.state.showBind">
                <!-- <img class="logo" :src="$store.state.globalImgUrls.loginTop" alt=""> -->
                <!-- 手机号登录 -->
                <template v-if="form.type=='phone'">
                <h2 class="title">手机号登录</h2>
                <div class="phone-area-box" style="margin-bottom: 30px;">
                    <div class="area-box">
                        <span style="margin-right: 10px;">国家/区号</span>
                        <el-dropdown trigger="click" popper-class="self-dropdown">
                            <span class="el-dropdown-link" style="color: #F3A52F;font-size: 16px;">
                                {{selectArea.name}}
                                <el-icon class="el-icon--right">
                                    <arrow-down />
                                </el-icon>
                            </span>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item 
                                        v-for="item in phoneAreaList" 
                                        :key="item.value"
                                        @click="selectArea=item"
                                    >{{item.name}}</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </div>
                </div>
                <div class="input-item">
                    <input type="text" v-model="form.mobile" placeholder="请输入手机号">
                </div>
                <div class="input-item">
                    <input v-model="form.code" placeholder="请输入验证码" />
                    <span :class="['send-code-btn',isSendCode&&'send-code-disabled']" @click="handleSendCode('phone')">{{isSendCode?'已发送':'发送验证码'}}</span>
                </div>
                <div class="global-main-btn login-btn" @click="handleLogin">登录</div>
                <div class="bot-img">
                    <img src="@/assets/icon-login-email.png" alt="" @click="typeChange('email')">
                    <div>邮箱登录</div>
                </div>

                </template>
                <!-- 邮箱登录 -->
                <template v-if="form.type=='email'">
                <h2 class="title">邮箱登录</h2>
                <div class="input-item">
                    <input type="text" v-model="form.email" placeholder="请输入手机号">
                </div>
                <div class="input-item">
                    <input v-model="form.code" placeholder="请输入验证码" />
                    <span :class="['send-code-btn',isSendCode&&'send-code-disabled']" @click="handleSendCode('email')">{{isSendCode?'已发送':'发送验证码'}}</span>
                </div>
                <div class="global-main-btn login-btn" @click="handleLogin">登录</div>
                <div class="bot-img">
                    <img src="@/assets/icon-login-phone.png" alt="" @click="typeChange('phone')">
                    <div>手机号登录</div>
                </div>
                </template>
            </div>
        </div>
    </div>
</template>

<style lang="scss">
.login-wrap{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 00;
    top: 0;
    background-color: rgba(0,0,0,0.4);
    z-index: 999;
    .content{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
    .wx-qrcode-box{
        padding-top: 20px;
        width: 400px;
        max-height: 500px;
        background-color: #fff;
        border-radius: 16px;
        text-align: center;
    }
    .close-icon{
        position: absolute;
        top: 10px;
        right: 10px;
        width: 20px;
        height: 20px;
    }
    .bind-accout-box{
        background-color: #fff;
        width: 400px;
        // min-height: 400px;
        padding: 20px;
        border-radius: 16px;
        .logo{
            width: 50px;
            display: block;
            margin: 0 auto 50px auto;
        }
        .title{
            font-size: 20px;
            margin-bottom: 50px;
        }
        input{
            border: none;
            outline: none;
        }
        .input-item{
            margin-bottom: 20px;
            padding: 8px 0;
            border-bottom: 1px solid #F2F2F2;
            position: relative;
            .send-code-btn{
                position: absolute;
                right: 0;
                bottom: 8px;
                color: #F3A52F;
                cursor: pointer;
            }
            .send-code-disabled{
                color: #999;
            }
        }
        .login-btn{
            width: 300px;
            margin: 50px auto;
        }
        .bot-img{
            text-align: center;
            font-size: 14px;
            img{
                width: 50px;
                height: 50px;
            }
        }
    }


}
</style>