157 lines
4.5 KiB
Vue
157 lines
4.5 KiB
Vue
<template>
|
|
<div class="fullpage-container">
|
|
<section-view :css-style="{'background-color':'#000'}" v-lazy:background-image="assetsUri('images/join/join.png')" class="join-section-view">
|
|
<div class="join-div">
|
|
<h2 class="join-div-t">Join LightLimX</h2>
|
|
</div>
|
|
</section-view>
|
|
<div class="join-2-section-view" :style="{'position':'relative','z-index':'1','min-height':'100%','padding-bottom':'.5rem','box-sizing':'border-box'}" >
|
|
<div class="join-2-section-view-wrap">
|
|
<filter-input :locations="locations" @select="handleFilterSelect" :active.sync="activeLocation"></filter-input>
|
|
<join-us-tabs @handleSelect="handleSelect" :active="active" :content="content" :options="positionType"></join-us-tabs>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import animateMixin from '../../utils/animateMixin'
|
|
import {
|
|
assetsUri
|
|
} from "../../utils";
|
|
import SectionView from "../../components/SectionView/index";
|
|
import JoinUsTabs from "../../components/JoinUsTabs/index";
|
|
import FilterInput from "../../components/FilterInput/index";
|
|
export default {
|
|
name: "join",
|
|
components: {FilterInput, JoinUsTabs, SectionView},
|
|
layout:'index',
|
|
mixins:[animateMixin],
|
|
async asyncData(config) {
|
|
const {$axios,$config,payload}=config;
|
|
if(payload){
|
|
return
|
|
}
|
|
const {baseURL}=$config
|
|
const {content} =await $axios.$get(`${baseURL}/locations/index?page=1&size=99`)
|
|
const locations=content.map((item)=>{
|
|
return {
|
|
...item,
|
|
id:item.id.toString()
|
|
}
|
|
})
|
|
return {locations}
|
|
},
|
|
mounted(){
|
|
this.activeLocation=this.locations[0].id;
|
|
this.handlePositions().then((type)=>{
|
|
this.active=type.length?type[0].id:''
|
|
this.handlePositionOne()
|
|
})
|
|
},
|
|
methods:{
|
|
async handlePositions(){
|
|
const {baseURL}=this.$config;
|
|
const {data:{content,msg},status} = await this.$axios(`${baseURL}/join/index?page=1&size=99&locations_id=${this.activeLocation}`)
|
|
if(status!==200){
|
|
return this.$toast(msg)
|
|
}
|
|
this.positionType=content.map((item)=>{
|
|
return {
|
|
...item.position_type,
|
|
id:item.id.toString()
|
|
}
|
|
})
|
|
return this.positionType
|
|
},
|
|
async handlePositionOne(){
|
|
const {baseURL}=this.$config;
|
|
const res= await this.$axios(baseURL+'/join/one?id='+this.active)
|
|
if(res.status!==200){
|
|
return this.$toast(res.data.msg)
|
|
}
|
|
const {data}=res.data
|
|
this.content=data?data.introduce:'';
|
|
},
|
|
handleSelect(item){
|
|
this.active=item.id;
|
|
this.handlePositionOne()
|
|
},
|
|
handleFilterSelect(item){
|
|
this.activeLocation=item.id;
|
|
this.handlePositions().then((type)=>{
|
|
this.active=type.length?type[0].id:''
|
|
this.handlePositionOne()
|
|
})
|
|
}
|
|
},
|
|
head() {
|
|
return {
|
|
title: this.title,
|
|
meta: [
|
|
{
|
|
hid: 'description',
|
|
name: 'description',
|
|
content: 'My custom description'
|
|
}
|
|
]
|
|
}
|
|
},
|
|
data(){
|
|
return {
|
|
title:'LightLimX-Join Us',
|
|
active:'',
|
|
locations:[],
|
|
activeLocation:'1',
|
|
content:'',
|
|
assetsUri,
|
|
positionType:[]
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.join-2-section-view{
|
|
.join-2-section-view-wrap{
|
|
max-width: 13rem;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
.join{
|
|
&-section-view{
|
|
background-position: center bottom;
|
|
background-size: 100% 4.4rem;
|
|
background-repeat: no-repeat;
|
|
/*background-size: ;*/
|
|
padding-top: .95rem;
|
|
min-height:5.35rem !important;
|
|
}
|
|
&-div{
|
|
padding-top: 1.78rem;
|
|
text-align: center;
|
|
&-t{
|
|
font-size: .48rem;
|
|
font-family: Manrope;
|
|
font-weight: bold;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
}
|
|
@media screen and (max-width: 768px){
|
|
.join{
|
|
&-section-view{
|
|
background-size: auto 6.24rem;
|
|
padding-top: .88rem;
|
|
min-height: 6.24rem !important;
|
|
}
|
|
&-div{
|
|
padding-top: 1.99rem;
|
|
&-t{
|
|
font-size: .6rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|