573 lines
16 KiB
Vue
573 lines
16 KiB
Vue
<template>
|
|
<div class="login">
|
|
<NavTop :type="0" style="flex-shrink:0"></NavTop>
|
|
<div class="box">
|
|
<div class="left">
|
|
<div class="title">
|
|
{{lan.$t("huanying")}} <span class="orgname">{{lan.$t("beelink")}}</span>
|
|
</div>
|
|
|
|
<div class="nosign">
|
|
{{lan.$t("meiyouzhanghao")}} <span class="tosign"><router-link to="/sign"> {{lan.$t("chengweilaoshi")}} </router-link></span>
|
|
</div>
|
|
<div class="tab">
|
|
<LoginTab @sel="Selectnum"></LoginTab>
|
|
</div>
|
|
<div v-if="tabselected == 1">
|
|
<a-form :layout="formLayout">
|
|
<a-form-item :label="lan.$t('shoujihao')" class="form-item">
|
|
<a-input-group compact>
|
|
<!-- <a-select default-value="Zhejiang" class="getcode">
|
|
<a-select-option value="Zhejiang">
|
|
中国+0086
|
|
</a-select-option>
|
|
<a-select-option value="Jiangsu"> Jiangsu </a-select-option>
|
|
</a-select> -->
|
|
<a-select :default-value="hqqh" size="small" option-label-prop="label" @change="getquhao" class="getcode" show-search v-if="hqqh != '+' && hqqh">
|
|
<a-select-option v-for="(i,j) in quhaolist" :key="j" :value="i.name + '+' + i.code" :label="'+' + i.code">
|
|
{{i.name}}+{{i.code}}
|
|
</a-select-option>
|
|
<!-- <a-select-option value="Jiangsu"> Jiangsu </a-select-option> -->
|
|
</a-select>
|
|
<div class="getcode" v-else></div>
|
|
<div class="line"></div>
|
|
<a-input v-model:value="phone" style="width: 50%" :placeholder="lan.$t('shurushouji')" />
|
|
</a-input-group>
|
|
</a-form-item>
|
|
<a-form-item :label="lan.$t('yanzhengma')" class="form-item">
|
|
<a-input-group compact>
|
|
<div class="getcode" @click="getcode">
|
|
{{lan.$t("dianjihuoquyzm")}} {{ time == 60 ? "" : "(" + time + ")" }}
|
|
</div>
|
|
<div class="line"></div>
|
|
<a-input style="width: 50%" :placeholder="lan.$t('shuruyzm')" v-model:value="code"/>
|
|
</a-input-group>
|
|
</a-form-item>
|
|
<div class="submit" @click="sublogin">{{lan.$t("lijidenglu")}}</div>
|
|
<div>{{lan.$t('banquan')}}</div>
|
|
</a-form>
|
|
</div>
|
|
|
|
<div v-if="tabselected == 2">
|
|
<a-form :layout="formLayout">
|
|
<a-form-item :label="lan.$t('zhanghao')" class="form-item input">
|
|
<a-input-group compact>
|
|
<a-input
|
|
:placeholder="lan.$t('shuruzhanghaol')"
|
|
v-model:value="userinfo.phone"
|
|
/>
|
|
</a-input-group>
|
|
</a-form-item>
|
|
<a-form-item :label="lan.$t('mima')" class="form-item">
|
|
<a-input-group compact>
|
|
<a-input
|
|
style="width: 70%"
|
|
:placeholder="lan.$t('shurumima')"
|
|
type="password"
|
|
class="shuru"
|
|
v-model:value="userinfo.password"
|
|
/>
|
|
<div class="forget"><router-link to="/reset">{{lan.$t('wangjimima')}}</router-link></div>
|
|
</a-input-group>
|
|
</a-form-item>
|
|
<div class="submit" @click="login">{{lan.$t('lijidenglu')}}</div>
|
|
</a-form>
|
|
</div>
|
|
</div>
|
|
<div class="right">
|
|
<div class="top">{{lan.$t('yiwanxinlai')}}</div>
|
|
<div class="topdesc">{{lan.$t('kaiqishenghuo')}}</div>
|
|
|
|
<div class="lessons">
|
|
<!-- @click="tovideoxq(i.videoid)" -->
|
|
<div class="lessonitem" v-for="(i,j) in videolist" :key="j" >
|
|
<img :src="i.img" alt="" class="pic"/>
|
|
<div class="lessonname">
|
|
<div>{{i.title}}</div>
|
|
<span class="score">{{i.score}}分</span>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="icons">
|
|
<img src="@/static/images/weixin.png" alt="" class="icon" @click="slogin(1)" />
|
|
<img src="@/static/images/weibo.png" alt="" class="icon" @click="slogin(2)" />
|
|
<img src="@/static/images/facebook.png" alt="" class="icon" @click="slogin(3)" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bottom">
|
|
<div class="content">
|
|
<div class="title">{{lan.$t('guanyubeelink')}}</div>
|
|
<div class="rowline"></div>
|
|
<!-- {{lan.$t("guanyuneirong")}} -->
|
|
|
|
<div class="texts" v-html="text[0].content">
|
|
</div>
|
|
<div class="relation">
|
|
<div class="more" @click="navto()">{{lan.$t('liaojiegengduo')}}</div>
|
|
<img src="@/static/images/tel.png" alt="" class="icon">
|
|
<div>Beelinkbeelink</div>
|
|
|
|
<img src="@/static/images/email.png" alt="" class="icon email">
|
|
<div>info@beelinkco.com</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { computed, defineComponent, onMounted, reactive, ref } from "vue";
|
|
import LoginTab from "@/components/login/LoginTab.vue";
|
|
import NavTop from "@/components/NavTop.vue"
|
|
import { authLogin, checksmscode, checkuser, getquhaolist, getwebvideolist, loginpass, sendsms } from '@/api';
|
|
import { message } from 'ant-design-vue';
|
|
import router from '@/router';
|
|
import { useI18n } from '@/utils/i18n';
|
|
import store from '@/store';
|
|
import { getValue, saveValue } from '@/utils/common';
|
|
import { locale } from "dayjs";
|
|
import { setToken } from "@/api/base";
|
|
|
|
export default defineComponent({
|
|
name: "Login",
|
|
components: {
|
|
LoginTab,
|
|
NavTop
|
|
},
|
|
setup() {
|
|
const lan: any = useI18n();
|
|
const formLayout = {
|
|
labelCol: 4,
|
|
wrapperCol: 14,
|
|
};
|
|
const tabselected = ref(1); //tab切换的标志
|
|
const time = ref(60);//倒计时
|
|
const phone = ref(""); // 手机号
|
|
const code =ref("")
|
|
|
|
const userinfo = reactive({
|
|
phone: '13152639856',
|
|
password: '123456'
|
|
})
|
|
const mrqh = computed(() => store.state.qh)
|
|
const hqqh = computed(() => { console.log(mrqh.value.name + '+' + mrqh.value.code); return (getValue("Lanvuage") == "en" ?mrqh.value.ename : mrqh.value.name) + '+' + mrqh.value.code })
|
|
const quhaolist = ref<any>([
|
|
{
|
|
code: "86",
|
|
id: 214,
|
|
name: "中国"
|
|
}
|
|
])
|
|
const myquhao=ref(mrqh.value.code)
|
|
const videolist=ref<any>([])
|
|
|
|
onMounted(async ()=>{
|
|
quhaolist.value=await getquhaolist()
|
|
videolist.value=await getwebvideolist()
|
|
console.log(videolist.value,"listsssss")
|
|
})
|
|
|
|
|
|
/**
|
|
* @param val 子组件传过来的值
|
|
*/
|
|
const Selectnum: (val: number) => void = (val: number) => {
|
|
console.log("收到子组件事件", val);
|
|
|
|
tabselected.value = val;
|
|
};
|
|
|
|
/**
|
|
* @param
|
|
* 点击获取验证码 触发倒计时
|
|
*/
|
|
let lock=false
|
|
async function getcode() {
|
|
console.log(phone.value);
|
|
if (lock) {
|
|
console.log("lock")
|
|
return;
|
|
}
|
|
if (phone.value == "") {
|
|
message.error(lan.$t('shoujihaoweikong'));
|
|
return;
|
|
}
|
|
const iszc: any = await checkuser({phone: phone.value})
|
|
if(iszc.data){
|
|
if(iszc.data.type == 0){
|
|
message.error(lan.$t("yizhucexuesheng"))
|
|
return ;
|
|
}
|
|
}
|
|
lock = true;
|
|
console.log(myquhao.value,"quhao")
|
|
sendsms(myquhao.value, phone.value);
|
|
const timestep = setInterval(() => {
|
|
console.log(11112);
|
|
|
|
|
|
|
|
time.value = time.value - 1;
|
|
if (time.value > 0) {
|
|
console.log();
|
|
} else {
|
|
time.value = 60;
|
|
clearInterval(timestep);
|
|
}
|
|
}, 1000);
|
|
}
|
|
function getquhao(e?: any){
|
|
console.log(e)
|
|
myquhao.value = e.toString()
|
|
myquhao.value = myquhao.value.split("+")[1];
|
|
console.log(myquhao.value)
|
|
}
|
|
function login(): void {
|
|
console.log(userinfo.phone,userinfo.password)
|
|
if(userinfo.phone==''){
|
|
message.error(lan.$t('zhanghaoweikong'))
|
|
} else if(userinfo.password==""){
|
|
message.error(lan.$t('mimaweikong'))
|
|
}else{
|
|
loginpass(userinfo.phone,userinfo.password)
|
|
}
|
|
|
|
|
|
}
|
|
|
|
function sublogin(){
|
|
console.log(11)
|
|
// else if(!(/^1[3-9]\d{9}$/.test(phone.value))){
|
|
// message.error(lan.$t('shoujihaoyouwu'));
|
|
// return
|
|
// }
|
|
if(phone.value==''){
|
|
message.error(lan.$t('shoujihaoweikong'))
|
|
return
|
|
} else if(code.value==""){
|
|
// console.log(phone.value)
|
|
console.log((/^1[3-9]\d{9}$/.test(phone.value)))
|
|
message.error(lan.$t('yanzhengmaweikong'))
|
|
return
|
|
}else{
|
|
loginpass(phone.value,'',1,code.value)
|
|
}
|
|
// checksmscode(myquhao.value+phone.value,code.value)
|
|
|
|
}
|
|
|
|
function tovideoxq(e?: number){
|
|
console.log(e)
|
|
router.push("/regime/videoinfo?id="+e)
|
|
}
|
|
|
|
function navto(){
|
|
router.push("/about")
|
|
}
|
|
|
|
function slogin(index: number){
|
|
console.log(index)
|
|
if(index == 3){
|
|
window.FB.login(function(response: any){
|
|
console.log(response, 121212)
|
|
// handle the response
|
|
authLogin(response.authResponse.userID, index).then((res: any)=>{
|
|
if(res.redirect == 1){
|
|
sessionStorage.setItem('mid',res.memberid);
|
|
router.push("/sign")
|
|
|
|
}else{
|
|
if(!saveValue("token", res.api_token) && !saveValue("memberid", res.memberid) ){
|
|
message.error("存储错误, 请允许网页使用本地存储！")
|
|
return false;
|
|
}else{
|
|
setToken();
|
|
store.commit("login", true);
|
|
store.dispatch("setUserInfo");
|
|
router.push("/mine/archives")
|
|
}
|
|
}
|
|
})
|
|
});
|
|
|
|
}
|
|
if(index == 2){
|
|
window.location.href="https://api.weibo.com/oauth2/authorize?client_id=2754574056&response_type=code&redirect_uri=https://beelink.theluyuan.com/wblogin"
|
|
}
|
|
if(index == 1){
|
|
window.location.href=`https://open.weixin.qq.com/connect/qrconnect?appid=wx90b8841b63a86633&redirect_uri=${escape('https://beelink.theluyuan.com/wxlogin')}&response_type=code&scope=snsapi_login&state=STATE#wechat_redirect`
|
|
|
|
}
|
|
}
|
|
const text = computed(()=> store.state.infotext)
|
|
return {
|
|
formLayout,
|
|
tabselected,
|
|
Selectnum,
|
|
getcode,
|
|
time,
|
|
phone,
|
|
login,
|
|
userinfo,
|
|
quhaolist,
|
|
getquhao,
|
|
code,
|
|
myquhao,
|
|
sublogin,
|
|
videolist,
|
|
tovideoxq,
|
|
navto,
|
|
lan,
|
|
slogin,
|
|
mrqh,
|
|
hqqh,
|
|
text
|
|
};
|
|
},
|
|
});
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.input ::v-deep(input::placeholder){
|
|
font-size: 11px;
|
|
}
|
|
.login ::v-deep(.ant-select-selection) {
|
|
border: none;
|
|
}
|
|
.login ::v-deep(.ant-input) {
|
|
border: none;
|
|
}
|
|
.ant-input:focus {
|
|
border: none;
|
|
border-bottom: 1px solid white !important;
|
|
box-shadow: none;
|
|
}
|
|
.login ::v-deep(.ant-form-item-label) {
|
|
line-height: 14px;
|
|
}
|
|
.login ::v-deep(.ant-form-item) ::v-deep(label) {
|
|
color: #0dbba4;
|
|
font-size: 11px;
|
|
left: 1px;
|
|
}
|
|
.login {
|
|
min-width: 100%;
|
|
height: 100vh;
|
|
background: url("../../static/images/loginbg.png");
|
|
background-size: 100% 130%;
|
|
background-repeat: no-repeat;
|
|
.box {
|
|
padding-top: 145px;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
.left {
|
|
width: 314px;
|
|
.title {
|
|
font-size: 17px;
|
|
font-weight: bold;
|
|
}
|
|
.orgname {
|
|
font-size: 29px;
|
|
color: #0dbba4;
|
|
cursor: pointer;
|
|
}
|
|
.nosign {
|
|
font-size: 12px;
|
|
color: #666666;
|
|
margin-top: 17px;
|
|
margin-bottom: 35px;
|
|
}
|
|
.tosign > a {
|
|
color: #0dbba4;
|
|
cursor: pointer;
|
|
}
|
|
.tab {
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.form-item {
|
|
border-bottom: 1px solid #e5e5e5;
|
|
font-size: 15px;
|
|
.shuru {
|
|
margin-right: 30px;
|
|
}
|
|
}
|
|
.line {
|
|
width: 1px;
|
|
height: 14px;
|
|
background: #e5e5e5;
|
|
margin-top: 10px;
|
|
position: relative;
|
|
z-index: 999;
|
|
}
|
|
&::v-deep(.getcode) {
|
|
font-size: 15px;
|
|
color: #08ae98;
|
|
width: 150px;
|
|
line-height: 30px;
|
|
cursor: pointer;
|
|
}
|
|
.submit {
|
|
width: 143px;
|
|
height: 35px;
|
|
background: linear-gradient(
|
|
90deg,
|
|
#00dac2,
|
|
#42de9e,
|
|
#88e062,
|
|
#d0eb3e,
|
|
#fffa18
|
|
);
|
|
border-radius: 18px;
|
|
font-size: 15px;
|
|
color: white;
|
|
font-weight: 800;
|
|
text-align: center;
|
|
line-height: 35px;
|
|
margin-top: 45px;
|
|
margin-bottom: 178px;
|
|
}
|
|
.submit:hover{
|
|
background: #06C7AE;
|
|
}
|
|
.forget {
|
|
color: #08ae98;
|
|
font-size: 12px;
|
|
margin-top: 8px;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
.right {
|
|
width: 690px;
|
|
.top {
|
|
font-size: 26px;
|
|
color: #08ae98;
|
|
font-weight: bold;
|
|
}
|
|
.topdesc {
|
|
color: #343434;
|
|
font-size: 12px;
|
|
margin-top: 14px;
|
|
margin-bottom: 23px;
|
|
}
|
|
.lessons {
|
|
// width: 655px;
|
|
height: 342px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 140px;
|
|
.lessonitem {
|
|
width: 200px;
|
|
height: 157px;
|
|
background: #ffffff;
|
|
box-shadow: 1px 5px 7px 0px rgba(158, 158, 158, 0.11);
|
|
border-radius: 18px;
|
|
margin-right: 23px;
|
|
margin-bottom: 29px;
|
|
.pic {
|
|
width: 200px;
|
|
height: 112px;
|
|
// background: #98a6b8;
|
|
border-radius: 18px 18px 0px 0px;
|
|
}
|
|
.lessonname {
|
|
color: #121212;
|
|
font-size: 12px;
|
|
// line-height: 45px;
|
|
text-indent: 17px;
|
|
height: 45px;
|
|
display: flex;
|
|
align-items: center;
|
|
>div{
|
|
width: 140px;
|
|
white-space:nowrap;
|
|
overflow: hidden;
|
|
text-overflow:ellipsis;
|
|
}
|
|
.score {
|
|
color: #f55456;
|
|
}
|
|
}
|
|
}
|
|
.lessonitem:hover{
|
|
.lessonname{
|
|
color: #06C7AE;
|
|
}
|
|
}
|
|
}
|
|
.icons {
|
|
margin-right: 41px;
|
|
.icon {
|
|
width: 28px;
|
|
height: 28px;
|
|
margin-right: 18px;
|
|
float: right;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.bottom {
|
|
// height: 317px;
|
|
padding-bottom: 30px;
|
|
margin-top: 44px;
|
|
background: #08ae98;
|
|
color: white;
|
|
font-size: 10px;
|
|
background-image: url('../../static/images/bottomback.png');
|
|
background-size: cover;
|
|
.content {
|
|
width: 415px;
|
|
// text-align: center;
|
|
padding-top: 59px;
|
|
margin-left: 144px;
|
|
.title {
|
|
font-size: 18px;
|
|
font-weight: 800;
|
|
}
|
|
.rowline {
|
|
width: 46px;
|
|
height: 2px;
|
|
background: #68df7e;
|
|
margin-top: 18px;
|
|
margin-bottom: 34px;
|
|
}
|
|
.texts{
|
|
text-align: left;
|
|
margin: 0 auto;
|
|
}
|
|
.relation{
|
|
height:29px;
|
|
display: flex;
|
|
line-height: 29px;
|
|
margin-top: 52px;
|
|
color: white;
|
|
.more{
|
|
width: 86px;
|
|
height: 29px;
|
|
background: #68DF7E;
|
|
color:white;
|
|
text-align: center;
|
|
line-height: 29px;
|
|
border-radius: 15px;
|
|
}
|
|
// .more:hover{
|
|
// // background: #ccc;
|
|
// }
|
|
.icon{
|
|
// width: 9px;
|
|
height: 12px;
|
|
margin: auto 0;
|
|
margin-right:6px;
|
|
margin-left: 29px;
|
|
|
|
object-fit: scale-down;
|
|
}
|
|
.email{
|
|
width: 15px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |