Skip to content

jijin / dance-pc

Go to a project
Toggle navigation
Toggle navigation pinning
8554c0db by zhangmeng
Options

登录注册

1 parent 04376af8
Inline Side-by-side
Showing 3 changed files with 416 additions and 281 deletions
src/layoutPc/components/AppHeader.vue
<template>
<div class="topNav">
<router-link to="/">
<!-- <img class="logo" src="@/assets/v1/nav_logo.png">-->
<!-- <img class="logo" src="@/assets/v1/nav_logo.png">-->
<img class="logo" src="/img/logoArr.png">
</router-link>
<div class="home-menu forPc">
<el-menu v-if="language==0"
router :default-active="activeIndex" :mode="mode" :ellipsis="true"
popper-effect="dark" @select="handleSelect"
<el-menu
v-if="language==0"
:default-active="activeIndex" :ellipsis="true" :mode="mode" popper-effect="dark"
router @select="handleSelect"
>
<el-menu-item index="/">{{ language==0?'首页':'HOME' }}</el-menu-item>
<el-menu-item index="/news">{{ language==0?'新闻资讯':'NEWS' }}</el-menu-item>
<el-menu-item index="/guide">{{ language==0?'参赛指南':'GUIDELINE' }}</el-menu-item>
<el-menu-item index="/match/list">{{ language==0?'大赛报名':'REGISTRATION' }}</el-menu-item>
<el-menu-item index="/saiC">{{ language==0?'赛程安排':'COMPETITIONS' }}</el-menu-item>
<el-menu-item index="/meta">{{ language==0?'媒体中心':'MEDIA' }}</el-menu-item>
<el-menu-item index="/notice">{{ language==0?'通知公告':'NOTICEBOARD' }}</el-menu-item>
<el-menu-item index="/">{{ language == 0 ? '首页' : 'HOME' }}</el-menu-item>
<el-menu-item index="/news">{{ language == 0 ? '新闻资讯' : 'NEWS' }}</el-menu-item>
<el-menu-item index="/guide">{{ language == 0 ? '参赛指南' : 'GUIDELINE' }}</el-menu-item>
<el-menu-item index="/match/list">{{ language == 0 ? '大赛报名' : 'REGISTRATION' }}</el-menu-item>
<el-menu-item index="/saiC">{{ language == 0 ? '赛程安排' : 'COMPETITIONS' }}</el-menu-item>
<el-menu-item index="/meta">{{ language == 0 ? '媒体中心' : 'MEDIA' }}</el-menu-item>
<el-menu-item index="/notice">{{ language == 0 ? '通知公告' : 'NOTICEBOARD' }}</el-menu-item>
<!-- <el-sub-menu index="/about">-->
<!-- <template #title>{{ language==0?'关于我们':'CONTACT & MORE' }}</template>-->
<!-- <el-menu-item index="/about/wuDao">{{ language==0?'舞蹈节':'About Us' }}</el-menu-item>-->
<!-- <el-menu-item index="/about/regulations" v-if="language==1">Rules & Regulations</el-menu-item>-->
<!-- <el-menu-item index="/about/culture">{{ language==0?'地方文化':'Culture' }}</el-menu-item>-->
<!-- </el-sub-menu>-->
<!-- <template #title>{{ language==0?'关于我们':'CONTACT & MORE' }}</template>-->
<!-- <el-menu-item index="/about/wuDao">{{ language==0?'舞蹈节':'About Us' }}</el-menu-item>-->
<!-- <el-menu-item index="/about/regulations" v-if="language==1">Rules & Regulations</el-menu-item>-->
<!-- <el-menu-item index="/about/culture">{{ language==0?'地方文化':'Culture' }}</el-menu-item>-->
<!-- </el-sub-menu>-->
</el-menu>
<el-menu v-else class="enMenu"
router :default-active="activeIndex" :mode="mode" :ellipsis="true"
popper-effect="dark" @select="handleSelect"
<el-menu
v-else :default-active="activeIndex"
:ellipsis="true" :mode="mode" class="enMenu" popper-effect="dark"
router @select="handleSelect"
>
<el-menu-item index="/">{{ language==0?'首页':'HOME' }}</el-menu-item>
<el-menu-item index="/news">{{ language==0?'新闻资讯':'NEWS' }}</el-menu-item>
<el-menu-item index="/guide">{{ language==0?'参赛指南':'GUIDELINE' }}</el-menu-item>
<el-menu-item index="/match/list">{{ language==0?'大赛报名':'REGISTRATION' }}</el-menu-item>
<el-menu-item index="/saiC">{{ language==0?'赛程安排':'COMPETITIONS' }}</el-menu-item>
<el-menu-item index="/meta">{{ language==0?'媒体中心':'MEDIA' }}</el-menu-item>
<el-menu-item index="/notice">{{ language==0?'通知公告':'NOTICEBOARD' }}</el-menu-item>
<el-menu-item index="/">{{ language == 0 ? '首页' : 'HOME' }}</el-menu-item>
<el-menu-item index="/news">{{ language == 0 ? '新闻资讯' : 'NEWS' }}</el-menu-item>
<el-menu-item index="/guide">{{ language == 0 ? '参赛指南' : 'GUIDELINE' }}</el-menu-item>
<el-menu-item index="/match/list">{{ language == 0 ? '大赛报名' : 'REGISTRATION' }}</el-menu-item>
<el-menu-item index="/saiC">{{ language == 0 ? '赛程安排' : 'COMPETITIONS' }}</el-menu-item>
<el-menu-item index="/meta">{{ language == 0 ? '媒体中心' : 'MEDIA' }}</el-menu-item>
<el-menu-item index="/notice">{{ language == 0 ? '通知公告' : 'NOTICEBOARD' }}</el-menu-item>
<!-- <el-sub-menu index="/about">-->
<!-- <template #title>{{ language==0?'关于我们':'CONTACT & MORE' }}</template>-->
<!-- <el-menu-item index="/about/wuDaoEn">{{ language==0?'舞蹈节':'About Us' }}</el-menu-item>-->
<!-- <el-menu-item index="/about/regulations" v-if="language==1">Rules & Regulations</el-menu-item>-->
<!-- <el-menu-item index="/about/cultureEn">{{ language==0?'地方文化':'Culture' }}</el-menu-item>-->
<!-- </el-sub-menu>-->
<!-- <template #title>{{ language==0?'关于我们':'CONTACT & MORE' }}</template>-->
<!-- <el-menu-item index="/about/wuDaoEn">{{ language==0?'舞蹈节':'About Us' }}</el-menu-item>-->
<!-- <el-menu-item index="/about/regulations" v-if="language==1">Rules & Regulations</el-menu-item>-->
<!-- <el-menu-item index="/about/cultureEn">{{ language==0?'地方文化':'Culture' }}</el-menu-item>-->
<!-- </el-sub-menu>-->
</el-menu>
</div>
<div class="flex-right">
<div class="search mr20 forPc">
<el-button :icon="Search" circle @click="searchNews" />
</div>
<div class="languageBtn">
<span :class="language==0?'active':''" @click="changeLanguage(0)">{{ language==0?'中文':'CN' }}</span>
<span :class="language==0?'active':''" @click="changeLanguage(0)">{{ language == 0 ? '中文' : 'CN' }}</span>
|
<span :class="language==1?'active':''" @click="changeLanguage(1)">EN</span>
</div>
<div class="ml20 forPc" >
<el-button v-if="!isLogin" @click="goLogin" style="border-radius: 20px;" class="loginBtn">
<span>{{ language==0?'登录':'LOGIN' }}</span>
<div class="ml20 forPc">
<el-button v-if="!isLogin" class="loginBtn" style="border-radius: 20px;" @click="goLogin">
<span>{{ language == 0 ? '登录' : 'LOGIN' }}</span>
<!-- ｜ &nbsp;<span @click="goRegister">注册</span>-->
</el-button>
<el-dropdown v-if="isLogin" class="mr20">
<el-avatar :icon="UserFilled">
<!-- {{user.userName.substring(0,4)}}-->
<!-- {{user.userName.substring(0,4)}}-->
</el-avatar>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item @click="router.push('/center/myInfo')">{{ language==0?'个人中心':'Personal' }}</el-dropdown-item>
<el-dropdown-item @click="logout()">{{language==0?'退出':'Exit'}}</el-dropdown-item>
<el-dropdown-item @click="router.push('/center/myInfo')">{{
language == 0 ? '个人中心' : 'Personal'
}}
</el-dropdown-item>
<el-dropdown-item @click="logout()">{{ language == 0 ? '退出' : 'Exit' }}</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
......@@ -80,19 +85,27 @@
<img src="@/assets/v1/menu.png">
</a>
</div>
<el-drawer
v-model="drawer" size="100%"
:style="{'--el-drawer-padding-primary':0}" direction="ltr"
:with-header="false" title="菜单"
v-model="drawer" :style="{'--el-drawer-padding-primary':0}"
:with-header="false" direction="ltr"
size="100%" title="菜单"
>
<div class="weiHead">
<el-button size="large" v-if="!isLogin" @click="goLogin" round style="color: #fff" class="btn-lineG">
<span>{{ language==0?'登录':'LOGIN' }}</span>
<el-button
v-if="!isLogin" class="btn-lineG" round size="large" style="color: #fff"
@click="goLogin"
>
<span>{{ language == 0 ? '登录' : 'LOGIN' }}</span>
<!-- ｜ &nbsp;<span @click="goRegister">注册</span>-->
</el-button>
<el-button type="primary" round plain size="large" v-if="isLogin" @click="logout()">{{language==0?'退出':'Exit'}}</el-button>
<el-button
v-if="isLogin" plain round size="large" type="primary"
@click="logout()"
>
{{ language == 0 ? '退出' : 'Exit' }}
</el-button>
<div style="display: flex">
<div class="languageBtn">
<span v-if="language==0" :class="language==0?'active':''" @click="changeLanguage(0)">中文</span>
......@@ -100,16 +113,19 @@
|
<span :class="language==1?'active':''" @click="changeLanguage(1)">EN</span>
</div>
<el-icon color="#453DEA" size="30" @click="closeDrawer"><close/></el-icon>
<el-icon color="#453DEA" size="30" @click="closeDrawer">
<close />
</el-icon>
</div>
</div>
<el-menu class="weiMenu"
v-if="language==0"
router :default-active="activeIndex" mode="vertical" :ellipsis="false"
popper-effect="dark" @select="handleSelect"
<el-menu
v-if="language==0"
:default-active="activeIndex"
:ellipsis="false" class="weiMenu" mode="vertical" popper-effect="dark"
router @select="handleSelect"
>
<el-menu-item index="/">首页</el-menu-item>
<el-menu-item index="/news">新闻资讯</el-menu-item>
......@@ -125,10 +141,11 @@
</el-sub-menu>
<el-menu-item v-if="isLogin" index="/center/myInfo">个人中心</el-menu-item>
</el-menu>
<el-menu class="weiMenu"
v-if="language==1"
router :default-active="activeIndex" mode="vertical" :ellipsis="false"
popper-effect="dark" @select="handleSelect"
<el-menu
v-if="language==1"
:default-active="activeIndex"
:ellipsis="false" class="weiMenu" mode="vertical" popper-effect="dark"
router @select="handleSelect"
>
<el-menu-item index="/">HOME</el-menu-item>
<el-menu-item index="/news">NEWS</el-menu-item>
......@@ -156,7 +173,7 @@
import { computed, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import useUserStore from '@/store/modules/user'
import { Search,UserFilled } from '@element-plus/icons-vue'
import { Search, UserFilled } from '@element-plus/icons-vue'
import { getCurrentInstance, onMounted } from '@vue/runtime-core'
import _ from 'lodash'
import LoginDialog from '@/viewsPc/login'
......@@ -166,7 +183,7 @@ import SearchPop_en from './indexSearch_en'
import Captcha from './captcha'
import CaptchaSms from './captchaSms'
import cache from '@/plugins/cache'
import {useStorage} from "@vueuse/core";
import { useStorage } from '@vueuse/core'
const router = useRouter()
const route = useRoute()
......@@ -202,19 +219,23 @@ onMounted(() => {
}
console.log(activeIndex.value)
})
function changeLanguage(n) {
if(language.value == n){
if (language.value == n) {
return
}
proxy.$modal.loading()
language.value = n
}
function showDrawer() {
drawer.value = true
}
function closeDrawer() {
drawer.value = false
}
function handleSelect(key, keyPath) {
// console.log(key)
activeIndex.value = key
......@@ -222,7 +243,7 @@ function handleSelect(key, keyPath) {
}
const logout = () => {
proxy.$modal.confirm(language.value==0?'确定退出？':'Are you sure to exit?').then(function() {
proxy.$modal.confirm(language.value == 0 ? '确定退出？' : 'Are you sure to exit?').then(function() {
return useUserStore().logOut()
}).then(() => {
isLogin.value = true
......@@ -232,12 +253,6 @@ const logout = () => {
}
const goLogin = (query) => {
let param = {}
// if (_.isBoolean(flag)) {
// param = {
// notShowClose: flag
// }
// }
proxy.$refs['pcloginDialog'].open(query)
}
......@@ -251,78 +266,96 @@ watch(() => useUserStore().reLogin, (val) => {
goLogin(val.query)
}
})
watch(() => useUserStore().visitor, (val) => {
if (val) {
console.log(val)
proxy.$refs['visitorDialog'].open()
}
})
function searchNews() {
proxy.$refs['searchDialog'].open()
}
function getCode() {
proxy.$refs['codeRef'].getCode()
}
</script>
<style scoped lang="scss">
.home-menu{width: 60vw;
:deep(.el-menu--horizontal.el-menu){border: none;}
<style lang="scss" scoped>
.home-menu {
width: 60vw;
:deep(.el-menu--horizontal.el-menu) {
border: none;
}
}
.loginBtn {color: #fff;margin-right: 15px;border: none;
background: linear-gradient(-90deg, #8623FC, #453DEA);box-shadow:0 0 10px #fff;
.loginBtn {
color: #fff;
margin-right: 15px;
border: none;
background: linear-gradient(-90deg, #8623FC, #453DEA);
box-shadow: 0 0 10px #fff;
&:active {
color: #fff;
background:linear-gradient(0deg, #8623FC, #453DEA);
border:none;
background: linear-gradient(0deg, #8623FC, #453DEA);
border: none;
}
&:hover {
box-shadow:0 0 10px var(--el-color-primary);border: none;
color:#fff;
box-shadow: 0 0 10px var(--el-color-primary);
border: none;
color: #fff;
}
}
.topNav {
box-shadow: 0px 0px 13px rgba(113,113,113);
box-shadow: 0px 0px 13px rgba(113, 113, 113);
display: flex;
justify-content: space-between;
height: 80px;
align-items: center;
.logo {
height: 60px;
margin-left: 40px;
}
.flex-right {
display: flex;
align-items: center;
}
.search {
position: relative;
.el-button.is-circle:hover {
color:var(--el-color-primary);
color: var(--el-color-primary);
border-color: var(--el-color-primary);
}
.el-button.is-circle:active {
background: var(--el-color-primary);
color: #fff;
border-color: var(--el-color-primary);
}
.el-button.is-circle:focus {
border-color: var(--el-color-primary)
}
:deep(.el-input .el-input__wrapper) {
box-shadow: none;
border-radius: 18px;
background: #F4F4F4;
}
.el-icon {
position: absolute;
right: 5px;
......@@ -336,46 +369,100 @@ function getCode() {
}
.ropenbtn{padding: 10px;display: none;
img{ width: 44px;}
.ropenbtn {
padding: 10px;
display: none;
img {
width: 44px;
}
}
:deep(.el-input) {
height: 100%
}
:deep(.el-form-item) {
height: 40px;
}
:deep(.el-input){height: 100%}
:deep(.el-form-item){height: 40px;}
//.home-menu .el-menu--horizontal > .el-menu-item{margin: 0 5px; font-size: 18px;}
.home-menu .el-sub-menu{font-size: 16px;}
.weiMenu.el-menu{
.home-menu .el-sub-menu {
font-size: 16px;
}
.weiMenu.el-menu {
border: none;
:deep(.el-menu-item.is-active){color: var(--el-color-primary);}
:deep(.el-menu-item.is-active) {
color: var(--el-color-primary);
}
}
.weiHead{display: flex;justify-content: space-between;padding: 15px;align-items: center;
.weiHead {
display: flex;
justify-content: space-between;
padding: 15px;
align-items: center;
width: 100%;
.languageBtn{font-size: 20px;line-height: 30px;white-space: nowrap;margin-right: 20px;}
.languageBtn {
font-size: 20px;
line-height: 30px;
white-space: nowrap;
margin-right: 20px;
}
}
.weiMenu{
.el-menu-item{font-size: 20px}
:deep(.el-sub-menu__title){font-size: 20px}
:deep(.el-sub-menu .el-sub-menu__icon-arrow){font-size: 20px}
.weiMenu {
.el-menu-item {
font-size: 20px
}
:deep(.el-sub-menu__title) {
font-size: 20px
}
:deep(.el-sub-menu .el-sub-menu__icon-arrow) {
font-size: 20px
}
}
@media (max-width: 1675px) {
.search {
display: none;
}
}
@media (max-width: 1620px) {
.home-menu .el-menu--horizontal > .el-menu-item{margin: 0 2px; }
.home-menu .el-menu--horizontal > .el-menu-item {
margin: 0 2px;
}
}
@media (max-width: 1450px) {
.home-menu .el-menu--horizontal > .el-menu-item{font-size: 15px}
.home-menu .el-menu--horizontal > .el-menu-item {
font-size: 15px
}
}
@media (max-width: 1340px) {
.home-menu .el-menu--horizontal > .el-menu-item{margin: 0; }
@media (max-width: 1340px) {
.home-menu .el-menu--horizontal > .el-menu-item {
margin: 0;
}
}
@media (max-width: 1250px) {
.home-menu .el-menu--horizontal > .el-menu-item{font-size: 14px}
.topNav .logo{height: 50px;margin-left: 20px}
.home-menu .el-menu--horizontal > .el-menu-item {
font-size: 14px
}
.topNav .logo {
height: 50px;
margin-left: 20px
}
}
@media (max-width: 1000px) {
.box {
width: 100%
......@@ -383,7 +470,9 @@ function getCode() {
.forPc {
display: none;
}
.ropenbtn{display: block}
.ropenbtn {
display: block
}
.loginBtn {
display: none;
}
......
src/viewsPc/login.vue
<template>
<el-dialog close-icon="CircleClose" center
v-model="show" class="pcloginpop" width="450px" :append-to-body="true" :title="title"
destroy-on-close :show-close="showClose" :close-on-click-modal="false" @close="close"
<el-dialog
v-model="show"
:append-to-body="true"
:close-on-click-modal="false"
:show-close="showClose"
:title="title"
center
class="pcloginpop"
close-icon="CircleClose"
destroy-on-close
width="450px"
@close="close"
>
<div class="pd10"></div>
<el-form v-if="loginStatus==0" ref="loginRef" :model="loginForm"
:rules="language==0?loginRules:loginRules_en" class="login-form">
<div class="pd10" />
<el-form
v-if="loginStatus==0" ref="loginRef" :model="loginForm"
:rules="language==0?loginRules:loginRules_en" class="login-form"
>
<el-form-item prop="username">
<el-input
v-model.trim="loginForm.username"
size="large"
auto-complete="off"
:placeholder="language==0?'账号（注册时使用的邮箱）':'Account (e-mail)'"
>
</el-input>
v-model.trim="loginForm.username"
:placeholder="language==0?'账号（注册时使用的邮箱）':'Account (e-mail)'"
auto-complete="off"
size="large"
/>
</el-form-item>
<el-form-item prop="password">
<el-input
v-model.trim="loginForm.password"
type="password"
size="large" show-password
auto-complete="off"
:placeholder="language==0?'密码':'Password'"
@keyup.enter="handleLogin"
>
</el-input>
v-model.trim="loginForm.password"
:placeholder="language==0?'密码':'Password'"
auto-complete="off" show-password
size="large"
type="password"
@keyup.enter="handleLogin"
/>
</el-form-item>
<el-form-item v-if="captchaEnabled" prop="code">
<el-input
v-model.trim="loginForm.code"
size="large"
auto-complete="off"
:placeholder="language==0?'验证码':'Code'"
@keyup.enter="handleLogin"
v-model.trim="loginForm.code"
:placeholder="language==0?'验证码':'Code'"
auto-complete="off"
size="large"
@keyup.enter="handleLogin"
>
<template #append>
<div class="login-code">
......@@ -42,17 +50,17 @@
</div>
</template>
</el-input>
</el-form-item>
<el-form-item style="width:100%;">
<el-button
class="loginBtn"
:loading="loading"
size="large"
type="primary"
style="width:100%;"
@click.prevent="handleLogin"
:loading="loading"
class="loginBtn"
size="large"
style="width:100%;"
type="primary"
@click.prevent="handleLogin"
>
<span v-if="!loading">{{ language == 0 ? '登 录' : 'Login' }}</span>
<span v-else>{{ language == 0 ? '登 录 中...' : 'Logging in' }}</span>
......@@ -61,27 +69,33 @@
<el-form-item>
<!-- <span style="color: #999;font-size: 12px;">*默认密码是会员号+证件号后四位+)*%</span>-->
<div style="display: flex;justify-content: space-between;width: 100%;">
<a class="text-primary"
@click="showChangePassword">{{ language == 0 ? '忘记密码' : 'Forgot password' }}?</a>
<a @click="showRegister" class="text-primary">{{ language == 0 ? '账号注册' : 'Register' }}></a>
<a
class="text-primary"
@click="showChangePassword"
>{{ language == 0 ? '忘记密码' : 'Forgot password' }}?</a>
<a class="text-primary" @click="showRegister">{{ language == 0 ? '账号注册' : 'Register' }}></a>
</div>
</el-form-item>
<el-form-item>
<div class="agreeLine" v-if="language==0">
<div v-if="language==0" class="agreeLine">
登录或注册即代表同意
<a @click="goAgreement" target="_blank">《用户协议》</a>和
<a @click="goPolicy" target="_blank">《隐私政策》</a>
<a target="_blank" @click="goAgreement">《用户协议》</a>和
<a target="_blank" @click="goPolicy">《隐私政策》</a>
</div>
<div class="agreeLine" v-else>
<div v-else class="agreeLine">
Registering and logging in means agreeing to the User
<a @click="goAgreement" target="_blank">Agreement</a> and
<a target="_blank" @click="goAgreement">Agreement</a> and
<a @click="goPolicy">Privacy Policy</a>
</div>
</el-form-item>
</el-form>
<div v-if="loginStatus==1">
<a class="poLeft" @click="close()"><el-icon><ArrowLeftBold /></el-icon></a>
<a class="poLeft" @click="close()">
<el-icon>
<ArrowLeftBold />
</el-icon>
</a>
<div class="rItem r1" @click="goRegister(1)">
<h3>{{ language == 0 ? '机构用户' : 'Organization' }}</h3>
</div>
......@@ -90,38 +104,42 @@
</div>
</div>
<div v-if="loginStatus==2">
<a class="poLeft" @click="close()"><el-icon><ArrowLeftBold /></el-icon></a>
<el-form ref="changePasswordRef" :model="changePasswordForm"
:rules="language==0?changePasswordRules:changePasswordRules_en" class="login-form">
<a class="poLeft" @click="close()">
<el-icon>
<ArrowLeftBold />
</el-icon>
</a>
<el-form
ref="changePasswordRef" :model="changePasswordForm"
:rules="language==0?changePasswordRules:changePasswordRules_en" class="login-form"
>
<el-form-item prop="username">
<el-input
v-model.trim="changePasswordForm.username"
size="large"
auto-complete="off" @change="changePasswordFormUsername"
:placeholder="language==0?'注册时使用的邮箱':'E-mail'"
>
</el-input>
v-model.trim="changePasswordForm.username"
:placeholder="language==0?'注册时使用的邮箱':'E-mail'"
auto-complete="off" size="large"
@change="changePasswordFormUsername"
/>
</el-form-item>
<el-form-item>
<el-input
v-model.trim="changePasswordForm.code"
size="large"
auto-complete="off"
:placeholder="language==0?'验证码':'Code'"
@keyup.enter="handleLogin"
v-model.trim="changePasswordForm.code"
:placeholder="language==0?'验证码':'Code'"
auto-complete="off"
size="large"
@keyup.enter="handleLogin"
>
<template #append>
<el-button type="primary" plain style="width: 110px;" @click="sendsmsMsg">
<van-count-down v-if="counting" :time="60000" format="ss" @finish="counting=false">
<el-button plain style="width: 110px;" type="primary" @click="sendsmsMsg">
<van-count-down v-if="counting" :time="60000" format="ss" @finish="counting=false">
<template #default="timeData">
<span class="text-primary">{{ timeData.seconds }}{{ language == 0 ? '秒' : 's' }}</span>
</template>
</van-count-down>
<!-- <count-down v-slot="{ totalSeconds }" :time="60000" @end="counting=false">-->
<!-- {{ totalSeconds }} {{ language == 0 ? '秒' : 's' }}-->
<!-- </count-down>-->
<!-- <count-down v-slot="{ totalSeconds }" :time="60000" @end="counting=false">-->
<!-- {{ totalSeconds }} {{ language == 0 ? '秒' : 's' }}-->
<!-- </count-down>-->
<span v-else>
{{ language == 0 ? '发送验证码' : 'Send' }}
</span>
......@@ -129,39 +147,40 @@
</template>
</el-input>
<!-- <div class="vcodeBox" :style="isShow?'height:240px':'height:0'">-->
<Vcode :successText="successVcode" :failText="failVcode" :slider-text="sliderText" :zIndex="9999" :show="isShow" @success="codeSuccess"></Vcode>
<Vcode
:fail-text="failVcode" :show="isShow" :slider-text="sliderText" :success-text="successVcode"
:z-index="9999" @success="codeSuccess"
/>
<!-- </div>-->
</el-form-item>
<el-form-item prop="password">
<el-input
v-model.trim="changePasswordForm.password"
type="password"
size="large" show-password
auto-complete="off"
:placeholder="language==0?'新密码':'New password'"
@keyup.enter="handleLogin"
>
</el-input>
v-model.trim="changePasswordForm.password"
:placeholder="language==0?'新密码':'New password'"
auto-complete="off" show-password
size="large"
type="password"
@keyup.enter="handleLogin"
/>
</el-form-item>
<el-form-item prop="confirmPassword">
<el-input
v-model.trim="changePasswordForm.confirmPassword"
type="password"
size="large" show-password
auto-complete="off"
:placeholder="language==0?'确认密码':'Confirm password'"
>
</el-input>
v-model.trim="changePasswordForm.confirmPassword"
:placeholder="language==0?'确认密码':'Confirm password'"
auto-complete="off" show-password
size="large"
type="password"
/>
</el-form-item>
<el-form-item style="width:100%;">
<el-button
class="loginBtn"
:loading="loading"
size="large"
type="primary"
style="width:100%;"
@click.prevent="handleChangePassword"
:loading="loading"
class="loginBtn"
size="large"
style="width:100%;"
type="primary"
@click.prevent="handleChangePassword"
>
<span v-if="language==0">确定</span>
<span v-else>Submit</span>
......@@ -173,25 +192,25 @@
</template>
<script setup>
import {getCurrentInstance, ref, watch} from 'vue'
import Vcode from "vue3-puzzle-vcode"
import { getCurrentInstance, ref, watch } from 'vue'
import Vcode from 'vue3-puzzle-vcode'
import CountDown from '@chenfengyuan/vue-countdown'
import {forgetPassword, getCodeImg} from '@/api/login'
import { forgetPassword, getCodeImg } from '@/api/login'
import * as match from '@/apiPc/match'
import Cookies from 'js-cookie'
import useUserStore from '@/store/modules/user'
const language = useStorage('language', 0)
import {useRouter} from 'vue-router'
import {ElMessage, ElMessageBox} from 'element-plus'
import cache from "@/plugins/cache";
import {useStorage} from "@vueuse/core/index";
import {getCaptchaSms, getCaptchaSms2} from "@/apiPc/match";
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import cache from '@/plugins/cache'
import { useStorage } from '@vueuse/core/index'
import { getCaptchaSms, getCaptchaSms2 } from '@/apiPc/match'
const emit = defineEmits(['submitForm'])
const userStore = useUserStore()
const router = useRouter()
const {proxy} = getCurrentInstance()
const { proxy } = getCurrentInstance()
const loginForm = ref({
username: '',
password: '',
......@@ -201,26 +220,26 @@ const loginForm = ref({
})
const countDown = ref(null)
const loginRules = {
username: [{required: true, trigger: 'change', message: '请输入您的会员号'}],
password: [{required: true, trigger: 'change', message: '请输入您账号密码'}],
code: [{required: true, trigger: 'change', message: '请输入验证码'}]
username: [{ required: true, trigger: 'change', message: '请输入您的会员号' }],
password: [{ required: true, trigger: 'change', message: '请输入您账号密码' }],
code: [{ required: true, trigger: 'change', message: '请输入验证码' }]
}
const changePasswordRules = {
username: [{required: true, trigger: 'change', message: '请输入您的账号'}],
password: [{required: true, trigger: 'change', message: '请输入您的密码'}],
confirmPassword: [{required: true, trigger: 'change', message: '请再次输入您的密码'}],
code: [{required: true, trigger: 'change', message: '请输入验证码'}]
username: [{ required: true, trigger: 'change', message: '请输入您的账号' }],
password: [{ required: true, trigger: 'change', message: '请输入您的密码' }],
confirmPassword: [{ required: true, trigger: 'change', message: '请再次输入您的密码' }],
code: [{ required: true, trigger: 'change', message: '请输入验证码' }]
}
const loginRules_en = {
username: [{required: true, trigger: 'change', message: 'Please enter '}],
password: [{required: true, trigger: 'change', message: 'Please enter '}],
code: [{required: true, trigger: 'change', message: 'Please enter '}]
username: [{ required: true, trigger: 'change', message: 'Please enter ' }],
password: [{ required: true, trigger: 'change', message: 'Please enter ' }],
code: [{ required: true, trigger: 'change', message: 'Please enter ' }]
}
const changePasswordRules_en = {
username: [{required: true, trigger: 'change', message: 'Please enter '}],
password: [{required: true, trigger: 'change', message: 'Please enter '}],
confirmPassword: [{required: true, trigger: 'change', message: 'Please enter '}],
code: [{required: true, trigger: 'change', message: 'Please enter '}]
username: [{ required: true, trigger: 'change', message: 'Please enter ' }],
password: [{ required: true, trigger: 'change', message: 'Please enter ' }],
confirmPassword: [{ required: true, trigger: 'change', message: 'Please enter ' }],
code: [{ required: true, trigger: 'change', message: 'Please enter ' }]
}
const show = ref(false)
......@@ -232,7 +251,7 @@ const loading = ref(false)
// 验证码开关
const captchaEnabled = ref(true)
//忘记密码
// 忘记密码
const isShow = ref(false)
const isCodeTrue = ref(false)
const counting = ref(false)
......@@ -244,7 +263,9 @@ const changePasswordForm = ref({
const failVcode = ref('验证失败，请重试')
const successVcode = ref('验证通过！')
const sliderText = ref('拖动滑块完成拼图')
const open = (params) => {
const typeStr = ref()
const open = (params, type) => {
console.log(params)
show.value = true
showClose.value = !(params?.notShowClose || false)
......@@ -259,9 +280,11 @@ const open = (params) => {
sliderText.value = 'Drag the slider to complete the puzzle'
title.value = 'LOGIN'
}
if (type) typeStr.value = type
getCode()
getCookie()
}
defineExpose({
open
})
......@@ -272,8 +295,8 @@ function handleLogin() {
loading.value = true
// 勾选了需要记住密码设置在 cookie 中设置记住用户名和密码
if (loginForm.value.rememberMe) {
Cookies.set('telno', loginForm.value.telno, {expires: 30})
Cookies.set('rememberMe', loginForm.value.rememberMe, {expires: 30})
Cookies.set('telno', loginForm.value.telno, { expires: 30 })
Cookies.set('rememberMe', loginForm.value.rememberMe, { expires: 30 })
} else {
// 否则移除
Cookies.remove('telno')
......@@ -297,21 +320,31 @@ function handleLogin() {
function close() {
loginStatus.value = 0
title.value = language.value == 0?'用户登录':'LOGIN'
title.value = language.value == 0 ? '用户登录' : 'LOGIN'
}
function showChangePassword() {
loginStatus.value = 2
title.value = language.value == 0?'忘记密码/密码重置':'FORGET PASSWORD'
title.value = language.value == 0 ? '忘记密码/密码重置' : 'FORGET PASSWORD'
}
function showRegister() {
loginStatus.value = 1
if (language.value == 0) {
title.value = '账号注册'
// if (language.value == 0) {
// title.value = '账号注册'
// } else {
// title.value = 'REGISTER'
// }
if (typeStr.value && typeStr.value == 2) {
if (language.value == 0) {
title.value = '账号注册'
} else {
title.value = 'REGISTER'
}
} else {
title.value = 'REGISTER'
goRegister(typeStr.value)
}
}
......@@ -359,7 +392,7 @@ function sendsmsMsg() {
return
}
if (counting.value) {
} else {
isShow.value = true
}
......@@ -369,7 +402,7 @@ function codeSuccess() {
// 忘记密码验证成功
isShow.value = false
isCodeTrue.value = true
getCaptchaSms2({account: changePasswordForm.value.username}).then(res => {
getCaptchaSms2({ account: changePasswordForm.value.username }).then(res => {
counting.value = true
})
}
......@@ -384,26 +417,25 @@ function handleChangePassword() {
if (isCodeTrue.value) {
delete changePasswordForm.value.confirmPassword
forgetPassword(changePasswordForm.value).then(res => {
ElMessage.success(language.value == 0 ? '操作成功，请登录' :'Operation successful, please log in')
ElMessage.success(language.value == 0 ? '操作成功，请登录' : 'Operation successful, please log in')
close()
})
} else {
ElMessage.warning(language.value == 0 ? '请发送验证码' :'Please send the verification code')
ElMessage.warning(language.value == 0 ? '请发送验证码' : 'Please send the verification code')
}
}
})
}
const goAgreement = () => {
const routeLocation = router.resolve({
name: 'userAgreement',
name: 'userAgreement'
})
window.open(routeLocation.href, '_blank')
}
const goPolicy = () => {
const routeLocation = router.resolve({
name: 'policy',
name: 'policy'
})
window.open(routeLocation.href, '_blank')
}
......@@ -440,7 +472,7 @@ const goPolicy = () => {
background: linear-gradient(-90deg, #8623FC, #453DEA);
border-radius: 20px;
font-size: 18px;
&:hover {
//background: linear-gradient(90deg, #8623FC, #453DEA);
box-shadow: 0 0 10px #453DEA;
......@@ -466,20 +498,20 @@ const goPolicy = () => {
position: relative;
background: #ffffff;
padding: 0 25px 5px;
.el-input {
height: 40px;
:deep(.el-input__wrapper) {
box-shadow: none;
border-bottom: 1px solid #E5E5E5;
}
input {
height: 40px;
}
}
.input-icon {
height: 39px;
width: 14px;
......@@ -495,7 +527,7 @@ const goPolicy = () => {
.login-code {
height: 40px;
img {
cursor: pointer;
vertical-align: middle;
......@@ -525,7 +557,7 @@ const goPolicy = () => {
padding: 0;
color: #fff;
box-shadow: none;
div {
color: #fff;
}
......@@ -535,7 +567,7 @@ const goPolicy = () => {
a {
font-weight: 600;
color: #000;
&:hover {
text-decoration: underline;
}
......@@ -548,28 +580,28 @@ const goPolicy = () => {
width: 350px;
padding: 1px;
margin: 20px auto;
h3 {
font-size: 30px;
margin: 50px;
}
&.r1 {
background: url("@/assets/dance/r1b.png") no-repeat left;
&:hover {
background: url("@/assets/dance/r1.png") no-repeat left;
}
}
&.r2 {
background: url("@/assets/dance/r2b.png") no-repeat left;
&:hover {
background: url("@/assets/dance/r2.png") no-repeat left;
}
}
&:hover {
color: #fff;
}
......@@ -585,5 +617,11 @@ const goPolicy = () => {
border: var(--el-color-primary) solid 1px;
border-radius: 0;
}
.poLeft{position: absolute;top:24px;font-size: 20px;left:20px}
.poLeft {
position: absolute;
top: 24px;
font-size: 20px;
left: 20px
}
</style>
......
src/viewsPc/match/detail_en.vue
......@@ -394,6 +394,7 @@
<pickup ref="pickupRef" />
<checkAllSportsman ref="checkAllSportsmanRef" />
<LoginDialog ref="pcloginDialog" @submitForm="reFlash" />
</div>
</template>
......@@ -405,12 +406,12 @@ import SubstationList from '@/viewsPc/match/components/substation-list'
import MatchInfoProjectList from '@/viewsPc/match/components/matchInfo-projectList'
import QuickRow from '@/viewsPc/match/components/quick-row'
import Pickup from '@/viewsPc/components/pickup'
import { getCurrentInstance, ref } from 'vue'
import { getCurrentInstance, ref, watch } from 'vue'
import { reactive, onMounted } from '@vue/runtime-core'
import { useRoute, useRouter } from 'vue-router'
import AffixInvitation from '@/viewsPc/match/components/affix-invitation'
import checkAllSportsman from '@/viewsPc/match/components/checkAllSportsman'
import LoginDialog from '@/viewsPc/login'
const language = useStorage('language', 0)
const route = useRoute()
......@@ -455,6 +456,7 @@ const data = reactive({
startSign: '',
isNational: false
})
const {
error,
loading,
......@@ -466,6 +468,7 @@ const {
signDoneGroupList, signDoneGroupListToTal, queryGroupList,
time, startSign, isNational
} = toRefs(data)
const signTypePop = ref(false)
const upgradePop = ref(false)
......@@ -539,22 +542,22 @@ function changeMenu(menu, l) {
function choseSignType() {
console.log(matchData.value.signType, matchData.value.languageSource, user)
if (!user) {
handelGoLogin({}, matchData.value.signType)
// 判断signType，如1个人注册-报名；
switch (matchData.value.signType) {
case '0':
// 注册
goGeren()
break
case '1':
// 登录
goLogin()
break
case '2':
popChangeType()
break
}
// switch (matchData.value.signType) {
// case '0':
// // 注册
// goGeren()
// break
// case '1':
// // 登录
// goLogin()
// break
// case '2':
// popChangeType()
// break
// }
} else {
// 获取已报名信息
checkIsSign().then(() => {
......@@ -952,16 +955,21 @@ async function getCheckOcr(obj) {
}
}
watch(() => useUserStore().reLogin, (val) => {
if (val.show) {
console.log(val)
handelGoLogin(val.query)
}
})
// 登录
const handelGoLogin = (query) => {
const param = {}
// if (_.isBoolean(flag)) {
// param = {
// notShowClose: flag
// }
// }
proxy.$refs['pcloginDialog'].open(query)
const handelGoLogin = (query, type) => {
proxy.$refs['pcloginDialog'].open(query, type)
}
const reFlash = () => {
// 刷新
location.reload()
}
</script>
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!