<template>
|
<div class="pageHeader">
|
<div class="headerBox">
|
<div class="logoBox">
|
<el-image :src="logo" class="logo" @click="goHome" style="cursor: pointer" />
|
<div class="titleName"><img :src="titleName" /></div>
|
</div>
|
<div class="inputBox f1">
|
<div class="signIn">
|
<p v-if="!userStore.userInfo?.name" class="signInBox">
|
<span @click="loginBtn">注册</span>
|
<span>|</span>
|
<span @click="signupBtn">登录</span>
|
</p>
|
<!-- 用户名 -->
|
<el-dropdown trigger="click" v-else>
|
<p class="el-dropdown-link signInBox">
|
<span>{{ userStore.userInfo?.name }}</span>
|
<el-icon class="el-icon--right">
|
<CaretBottom />
|
</el-icon>
|
</p>
|
<template #dropdown>
|
<el-dropdown-menu>
|
<el-dropdown-item @click="router.push('/personalCenter')"
|
>个人中心</el-dropdown-item
|
>
|
<el-dropdown-item @click="logOut">退出登录</el-dropdown-item>
|
</el-dropdown-menu>
|
</template>
|
</el-dropdown>
|
</div>
|
</div>
|
</div>
|
</div>
|
<login ref="loginRef"></login>
|
<!-- 导航栏 -->
|
|
<!-- 温馨提示弹窗 -->
|
<el-dialog v-model="tipsDialogState" width="420" align-center class="tipsDialog">
|
<template #title>温馨提示</template>
|
<el-icon color="#e6a23c" size="24">
|
<WarningFilled />
|
</el-icon>
|
<p>
|
如果您已使用【京师智教扫一扫】或【云上书房】 微信注册过，请使用微信扫码登录；如果您已在【
|
京师智教】PC端注册过，请使用手机号登录！继续注册将创建全新账户！
|
</p>
|
<template #footer>
|
<el-button @click="goPhoneSignup">手机号登录</el-button>
|
<el-button @click="goWechatSignUp">微信登录</el-button>
|
<el-button type="primary" @click="goLogin">继续注册</el-button>
|
</template>
|
</el-dialog>
|
</template>
|
|
<script setup lang="ts">
|
import login from '@/layout/components/login.vue'
|
import { onMounted, ref, watchEffect, inject, watch } from 'vue'
|
import { ElMessage, ElMessageBox, type FormInstance } from 'element-plus'
|
import logo from '@/assets/images/header/logo.png'
|
import titleName from '@/assets/images/header/titleName.png'
|
import { useRouter } from 'vue-router'
|
import { useUserStore, applyBookStore } from '@/store'
|
const loginRef = ref()
|
const router = useRouter()
|
const userStore = useUserStore()
|
const applyBook = applyBookStore()
|
const MG = inject('MG')
|
const config = inject('config')
|
const tipsDialogState = ref<boolean>(false) // 温馨提示弹窗状态
|
const wechatTipsState = ref<boolean>(false)
|
const localData = ref(localStorage.getItem('jsek-token'))
|
onMounted(() => {
|
// 判断是否微信扫码登录
|
var url = window.location.href
|
if (url.indexOf('WeChatScanningCodeLogin') > -1) {
|
var querys = url.substring(url.indexOf('?') + 1).split('&')
|
var result = {}
|
for (var i = 0; i < querys.length; i++) {
|
var temp = querys[i].split('=')
|
if (temp.length < 2) {
|
result[temp[0]] = ''
|
} else {
|
result[temp[0]] = temp[1]
|
}
|
}
|
if (result && result.code) {
|
MG.identity
|
.loginByWeChatOpenCode({
|
code: result.code,
|
appRefCode: config.appRefCode,
|
platform: 'PCWeb'
|
})
|
.then((res) => {
|
if (res && res.status == 'Ok') {
|
userStore.setToken(res.token)
|
loginRef.value.getUserInfo()
|
MG.app.creatUserBehavior({
|
refCode:"sign"
|
}).then(res => {
|
if(res){
|
console.log("今日已积分")
|
}
|
});
|
}
|
})
|
}
|
}
|
})
|
watchEffect(() => {
|
localData.value = localStorage.getItem('jsek-token') || '0'
|
})
|
|
// 注册按钮
|
const loginBtn = () => {
|
tipsDialogState.value = true
|
}
|
// 登录按钮
|
const signupBtn = () => {
|
loginRef.value.logIn()
|
}
|
|
// 继续注册
|
const goLogin = () => {
|
tipsDialogState.value = false
|
loginRef.value.signUp()
|
}
|
// 去微信登录
|
const goWechatSignUp = () => {
|
tipsDialogState.value = false
|
// loginRef.value.logIn()
|
loginRef.value.setWechatTipsState()
|
}
|
// 去手机号登录
|
const goPhoneSignup = () => {
|
tipsDialogState.value = false
|
loginRef.value.logIn()
|
loginRef.value.changeSignUp('authSignUp')
|
}
|
// 退出登录
|
const logOut = () => {
|
router.push('/home')
|
userStore.delteUserInfo()
|
applyBook.emptyBookList()
|
sessionStorage.removeItem('cartNumber')
|
localStorage.removeItem('alreadyElectronicBook')
|
localStorage.removeItem('alreadyPaperBook')
|
ElMessage.success('退出成功')
|
}
|
|
// logo首页定向
|
const goHome = () => {
|
router.push('/home')
|
}
|
|
</script>
|
|
<style lang="less">
|
.tipsDialog {
|
.el-dialog__header {
|
font-size: 18px;
|
}
|
|
.el-dialog__body {
|
display: flex;
|
align-items: center;
|
|
p {
|
margin-left: 10px;
|
line-height: 24px;
|
}
|
}
|
}
|
</style>
|
<style lang="less" scoped>
|
.pageHeader {
|
width: 100%;
|
background: #fff;
|
// border-bottom:1px solid #C0C0C0;
|
}
|
|
.headerBox {
|
width: 1200px;
|
margin: 0 auto;
|
height: 60px;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.logoBox {
|
display: flex;
|
align-items: center;
|
.titleName {
|
font-size: 24px;
|
padding: 0 10px;
|
margin-left: 15px;
|
border-left: 1px solid #C0C0C0;
|
color:#181818;
|
font-family: Microsoft YaHei, Microsoft YaHei;
|
font-weight: 400;
|
}
|
/deep/.el-image__inner {
|
height: 48px;
|
border: 0;
|
padding: 0;
|
}
|
}
|
}
|
|
/** 验证码图片 */
|
.imgCode {
|
height: 40px;
|
margin-top: 5px;
|
}
|
|
/** 看不清换一张 */
|
.linkHight {
|
height: 20px;
|
|
/deep/ .el-link__inner {
|
height: 100%;
|
}
|
}
|
|
/** header登录注册文字 */
|
.signIn {
|
height: 40px;
|
width: 95px;
|
min-width: 90px;
|
text-align: right;
|
margin-left: 80px;
|
font-weight: 400;
|
justify-content: space-around;
|
color: #000;
|
font-size: 14px;
|
|
span:first-child,
|
span:last-child {
|
cursor: pointer;
|
}
|
|
.signInBox {
|
height: 100%;
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
span {
|
padding: 5px;
|
}
|
|
.el-dropdown {
|
width: 100%;
|
height: 100%;
|
|
span {
|
height: 40px;
|
line-height: 40px;
|
padding: 0;
|
display: block;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
}
|
}
|
|
.selectPhone {
|
background: #fff;
|
}
|
|
.el-select {
|
width: 100px;
|
height: 40px;
|
color: red;
|
|
/deep/ .select-trigger {
|
height: 100%;
|
|
.el-input--suffix {
|
height: 100%;
|
background-color: #fff;
|
}
|
}
|
}
|
</style>
|
