34

chenyc

2025-08-28 e818bcbeefda70e47f73c3be46f151e38d064760

 src/views/login/index.vue

@@ -11,7 +11,7 @@
    const config={
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        }
    }
    const userInfo = userInfoStore()
    const route = useRoute()
@@ -21,6 +21,7 @@
    const visible=ref(3)
    const seconds=ref(60)
    const loadingBUt=ref(false)
    const isLoading = ref(true)
    const ruleForm2=ref({
        newPassword:'',
        pass:'',
@@ -34,18 +35,27 @@
    const asyncValidator = (val:any) =>{
        return val===ruleForm2.value.pass
    }
    const getUserinfo=()=>{
        ajaxPost('/patient/info/getPatientInfo','').then((re:any)=>{
            console.log(re,'得到患者的信息getUserinfo')
            userInfo.setPatient(re)
            router.push('/')
        })
    }
    const onSubmit = (values:any) => {
        console.log('submit', values)
        console.log('提交表单',userInfo.info)
        loadingBUt.value=true
        ajaxPost('/patient/info/wechatLogin2',`mobile=${username.value}&password=${password.value}`,config).then((re:any)=>{
        const openid=userInfo.info.openid
        ajaxPost('/patient/info/wechatLogin2',`mobile=${username.value}&password=${password.value}&openId=${openid}`,config).then((re:any)=>{
            console.log(re)
            if (re===''){
                Toast('登录失败，请重新登录')
            } else {
                console.log('得到tokeng')
                Session.set('token', re)
                Toast('登录成功。。。。。')
                router.push('/')
                Toast('登录成功')
                getUserinfo()
            }
        }).finally(()=>{
            loadingBUt.value=false
@@ -63,6 +73,7 @@
        })
    }
    const onSubmit3=(values:any)=>{
        // userInfo.info.openid='odFja56xfwSZDHhAEMn-JotSzlRc'
        if (userInfo.info.openid===''){
            Toast('没有获取到openid')
            return
@@ -73,7 +84,9 @@
            if (re===false){
                Toast('登录失败，请重新登录')
            } else {
                console.log(re)
                Session.set('token', re)
                Toast('登录成功')
                getUserinfo()
            }
        })
    }
@@ -82,8 +95,11 @@
            Toast('手机号码不能为空')
            return
        }
        ajaxPost('patient/info/sendValidCode','phoneNo='+ruleForm3.value.userPhone,config).then(re=>{
        ajaxPost('patient/info/sendValidCode','phoneNo='+ruleForm3.value.userPhone,config).then((re:any)=>{
            console.log(re)
            if (re.code===200){
                return
            }
            const timer= setInterval(() => {
                if (seconds.value > 0) {
                    seconds.value--
@@ -110,6 +126,19 @@
        return String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === 'micromessenger'
    }
    onMounted(()=>{
        isLoading.value=true
        // userInfo.setInfo({openid:'odFja56xfwSZDHhAEMn-JotSzlRc',nickname:'大橙子',headimgurl:'https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJB…ibLYic7qC9cm0Yjia3VkHRPVa12N0OK6dgdz984biceWg/132'})
        // Session.set('token', 'eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJQQVRfU0ZfUEFUOTE0MzE2NDAyMTk1N0pOcUMiLCJhdXRoIjpbeyJhdXRob3JpdHkiOiJhZG1pbiJ9XSwiaWF0IjoxNzU2MjAwNTg4LCJleHAiOjE3NTY1NjA1ODh9.Oq8Q32JIcRkcKLje3MUZlidDZX8dFzo1WKl5DdpqlAM')
        // getUserinfo()
        // Session.remove('token')
        // 判断是否有token 和userinfo
        const token=Session.get('token')
        // alert(token)
        if (token && userInfo.info.openid!==''){
            console.log('已经登录了')
            getUserinfo()
            return
        }
        if (isWechat()){
            console.log('初始化',route)
            const queryInfo=route.query
@@ -117,19 +146,19 @@
            console.log(code)
            if (code){ // 得到code换取openid
                ajaxGet('wechat/code',{code}).then((re:any)=>{
                    console.log(re)
                    userInfo.setUserInfo({openid:re.openid,nickname:re.nickname,headimgurl:re.headimgurl})
                    console.log(re,'获取openid')
                    userInfo.setInfo({openid:re.openid,nickname:re.nickname,headimgurl:re.headimgurl})
                    const openId = re.openid
                    if (openId) { // 检查登录
                        ajaxPost('patient/info/wechatLogin','openId='+openId,config).then((re:any)=>{
                            console.log('openid换的accesstoken=',re)
                            if (re===''){
                                Toast('请填写表单登录。。')
                                isLoading.value=false
                                Toast('请填写表单登录')
                            } else {
                                console.log()
                                Session.set('token', re)
                                Toast('登录成功。。。。。')
                                router.push('/')
                                Toast('登录成功')
                                getUserinfo()
                            }
                        })
                    }
@@ -153,14 +182,26 @@
                title: '提示',
                message: '请在微信中打开浏览',
            }).then(() => {
                // on close
            })
        }
    })
</script>

<template>
    <div class="login">
    <div v-if="isLoading" class="loading-screen">
        <div class="loading-content">
            <!-- 自定义Logo容器 -->
            <div class="logo-container">
                <img :src="logo" alt="Logo" class="custom-logo">
                <!-- 可选：添加脉冲光环 -->
                <div class="pulse-ring primary"></div>
                <div class="pulse-ring secondary"></div>
            </div>
            <!-- 标题文字 -->
            <p class="loading-text">守护健康 · 加载中</p>
        </div>
    </div>
    <div v-else class="login">
        <div class="titlebiaoti">
            <van-image
                fit="cover"
@@ -179,21 +220,22 @@
                        placeholder="请输入登录名"
                        :rules="[{ required: true, message: '请输入登录名' }]"
                    />
                    <!-- :rules="[{ required: true, message: '请填写密码' }]" -->
                    <van-field
                        v-model="password"
                        type="password"
                        name="密  码"
                        label="密&nbsp&nbsp码"
                        placeholder="6-16位数字或者字母组合"
                        :rules="[{ required: true, message: '请填写密码' }]"

                    >
                        <template #button>
                            <van-button size="small" type="default" @click="wjmm">忘记密码</van-button>
                        </template>
                    </van-field>
                </van-cell-group>
                <div style="margin: 16px;text-align:center;">
                    <div class="tss"><van-icon name="circle" /> 登录即视为已经阅读并同意<b style="color: #769AFF;">网站服务条款、法律声明及隐私权政策</b></div>
                <div style="margin: 16px;text-align: center;">
                    <div class="tss"><van-icon name="circle" /> 登录即视为已经阅读并同意<b style="color: #769aff;">网站服务条款、法律声明及隐私权政策</b></div>
                    <van-button :loading="loadingBUt" round block type="primary" native-type="submit">
                        登  录
                    </van-button>
@@ -220,14 +262,14 @@
                        </template>
                    </van-field>
                </van-cell-group>
                <div style="margin: 16px;text-align:center;">
                    <div class="tss"><van-icon name="circle" /> 登录即视为已经阅读并同意<b style="color: #769AFF;">网站服务条款、法律声明及隐私权政策</b></div>
                <div style="margin: 16px;text-align: center;">
                    <div class="tss"><van-icon name="circle" /> 登录即视为已经阅读并同意<b style="color: #769aff;">网站服务条款、法律声明及隐私权政策</b></div>
                    <van-button :loading="loadingBUt" round block type="primary" native-type="submit">
                        登  录
                    </van-button>
                </div>
            </van-form>
            <van-row class="loginType">
            <van-row class="logintype">
                <div class="toptype">
                    <van-divider
                        :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
@@ -313,43 +355,143 @@
    </div>
</template>
<style lang="scss">
.login{
.login {
    width: 100%;
    min-height: 900px;
}
.logintt{

.logintt {
    text-align: center;
}
.loginwenz{

.loginwenz {
    font-size: 12px;
    font-weight: 400;
    color: #AAAAAA;
    color: #aaa;
}
.loginType{

.logintype {
    width: 100%;
    margin-top: 120px;
    text-align: center;
    font-size: 11px;
    font-weight: 400;
    color: #AAAAAA;
    // background: black;
    .toptype{
    color: #aaa;

    .toptype {
        width: 100%;
    }
}
.titlebiaoti{

.titlebiaoti {
    padding-top: 70px;
    text-align:center;
    text-align: center;
    padding-left: 30px;
    // border: 1px solid black;
    font-size: 15px;
    padding-bottom: 70px;
}
.tss{

.tss {
    font-size: 10px;
    font-weight: 400;
    color: #AAAAAA;
    color: #aaa;
    height: 50px;
    // line-height: 50px;
}
</style>
<style scoped>
/* 医疗风背景 */
.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(140deg, #e6f7ff, #f0fcff, #e0f9f1);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    font-family: "Helvetica Neue", Arial, sans-serif;
}

.loading-content {
    text-align: center;
}

/* Logo容器 */
.logo-container {
    position: relative;
    display: inline-block;
}

/* 自定义Logo样式 */
.custom-logo {
    width: 50px; /* 根据实际Logo大小调整 */
    animation: fadeIn 1s ease-in-out;
}

/* 脉冲光环（衬托科技感） */
.pulse-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 80px;
    margin-left: -40px;
    margin-top: -40px;
    border-radius: 50%;
    border: 1px solid #00a0e9;
    opacity: 0;
    animation: pulse 2s ease-out infinite;
}

.pulse-ring.primary {
    animation-delay: 0s;
}

.pulse-ring.secondary {
    animation-delay: 0.6s;
    border-color: #06c;
}

@keyframes pulse {
    0% {
        transform: scale(0.8);
        opacity: 0.6;
    }

    50% {
        opacity: 0.2;
    }

    100% {
        transform: scale(1.4);
        opacity: 0;
    }
}

/* 加载文字 */
.loading-text {
    color: #06c;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 1px;
    line-height: 1.5;
    opacity: 0.9;
    animation: fadeInUp 0.8s ease-out;
    text-shadow: 0 1px 3px rgba(0, 102, 204, 0.1);
    margin-top: 40px;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
</style>