zyronon
4 years ago
15 changed files with 497 additions and 91 deletions
@ -1,13 +0,0 @@ |
|||||||
<template> |
|
||||||
|
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
export default { |
|
||||||
name: "School" |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<style scoped> |
|
||||||
|
|
||||||
</style> |
|
||||||
@ -0,0 +1,154 @@ |
|||||||
|
<template> |
||||||
|
<div class="school"> |
||||||
|
<BaseHeader> |
||||||
|
<template v-slot:center> |
||||||
|
<span class="f16">添加学校</span> |
||||||
|
</template> |
||||||
|
<template v-slot:right> |
||||||
|
<div> |
||||||
|
<span class="f16" :class="isChanged?'save-yes':'save-no'">保存</span> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</BaseHeader> |
||||||
|
<div class="content"> |
||||||
|
<div class="row" @click="$nav('/choose-school')"> |
||||||
|
<div class="left">学校</div> |
||||||
|
<div class="right"> |
||||||
|
<span>{{ isEmpty(localSchool.name) }}</span> |
||||||
|
<img src="../../../assets/img/icon/back.png" alt=""> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="row" @click="$nav('/edit-userinfo-item',{type:1})"> |
||||||
|
<div class="left">院系</div> |
||||||
|
<div class="right"> |
||||||
|
<span>{{ isEmpty(school.department) }}</span> |
||||||
|
<img src="../../../assets/img/icon/back.png" alt=""> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="row" @click="$nav('/edit-userinfo-item',{type:1})"> |
||||||
|
<div class="left">入学时间</div> |
||||||
|
<div class="right"> |
||||||
|
<span>{{ isEmpty(school.joinTime) }}</span> |
||||||
|
<img src="../../../assets/img/icon/back.png" alt=""> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="row" @click="$nav('/edit-userinfo-item',{type:1})"> |
||||||
|
<div class="left">学历</div> |
||||||
|
<div class="right"> |
||||||
|
<span>{{ isEmpty(school.education) }}</span> |
||||||
|
<img src="../../../assets/img/icon/back.png" alt=""> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="row" @click="$nav('/edit-userinfo-item',{type:1})"> |
||||||
|
<div class="left">展示范围</div> |
||||||
|
<div class="right"> |
||||||
|
<span>{{ displayType }}</span> |
||||||
|
<img src="../../../assets/img/icon/back.png" alt=""> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import {mapState} from 'vuex' |
||||||
|
import enums from '../../../utils/enums' |
||||||
|
import {inject} from "vue"; |
||||||
|
|
||||||
|
export default { |
||||||
|
name: "AddSchool", |
||||||
|
data() { |
||||||
|
return { |
||||||
|
mitt: inject('mitt'), |
||||||
|
localSchool: this.$clone(this.$store.state.userinfo.school) |
||||||
|
} |
||||||
|
}, |
||||||
|
created() { |
||||||
|
let val = localStorage.getItem('changeSchool') |
||||||
|
if (val) { |
||||||
|
this.localSchool.name = val |
||||||
|
localStorage.clear() |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
isChanged() { |
||||||
|
if (this.school.name !== this.localSchool.name) return true |
||||||
|
if (this.school.department !== this.localSchool.department) return true |
||||||
|
if (this.school.joinTime !== this.localSchool.joinTime) return true |
||||||
|
if (this.school.education !== this.localSchool.education) return true |
||||||
|
return this.school.displayType !== this.localSchool.displayType; |
||||||
|
}, |
||||||
|
displayType() { |
||||||
|
if (this.school.displayType === enums.DISPLAY_TYPE.ALL) return '公开可见' |
||||||
|
if (this.school.displayType === enums.DISPLAY_TYPE.SCHOOL) return '校友可见' |
||||||
|
if (this.school.displayType === enums.DISPLAY_TYPE.ME) return '仅自己可见' |
||||||
|
}, |
||||||
|
...mapState({ |
||||||
|
userinfo: 'userinfo', |
||||||
|
school: state => state.userinfo.school, |
||||||
|
}) |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
isEmpty(val) { |
||||||
|
if (val) return val |
||||||
|
return '点击设置' |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped lang="scss"> |
||||||
|
@import "../../../assets/scss/index"; |
||||||
|
|
||||||
|
.school { |
||||||
|
position: fixed; |
||||||
|
left: 0; |
||||||
|
right: 0; |
||||||
|
bottom: 0; |
||||||
|
top: 0; |
||||||
|
color: white; |
||||||
|
|
||||||
|
.content { |
||||||
|
padding-top: 6rem; |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
.row { |
||||||
|
padding: 0 1.5rem; |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
height: 5rem; |
||||||
|
font-size: 1.4rem; |
||||||
|
transition: all .1s; |
||||||
|
background: $main-bg; |
||||||
|
|
||||||
|
&:active { |
||||||
|
background: $active-main-bg; |
||||||
|
} |
||||||
|
|
||||||
|
.right { |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
color: $second-text-color; |
||||||
|
|
||||||
|
|
||||||
|
img { |
||||||
|
margin-left: 1rem; |
||||||
|
width: 15px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
.save-yes { |
||||||
|
color: $primary-btn-color; |
||||||
|
} |
||||||
|
|
||||||
|
.save-no { |
||||||
|
color: $disable-primary-btn-color; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,203 @@ |
|||||||
|
<template> |
||||||
|
<div class="choose-school"> |
||||||
|
<BaseHeader> |
||||||
|
<template v-slot:center> |
||||||
|
<span class="f16">添加学校</span> |
||||||
|
</template> |
||||||
|
<template v-slot:right> |
||||||
|
<span class="f14">没有找到?</span> |
||||||
|
</template> |
||||||
|
<template v-slot:bottom> |
||||||
|
<div class="search-ctn"> |
||||||
|
<Search placeholder="搜索大学名称" v-model="schoolName" @clear="isSearch = false"></Search> |
||||||
|
<span class="search-btn" @click="search">搜索</span> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</BaseHeader> |
||||||
|
<div class="content"> |
||||||
|
<div class="nearby" v-if="!isSearch"> |
||||||
|
<div class="title"> |
||||||
|
<img src="../../../assets/img/icon/location.svg" alt=""> |
||||||
|
<span>离我最近</span> |
||||||
|
</div> |
||||||
|
<div v-if="nearby.length" |
||||||
|
class="item" |
||||||
|
v-for="item in nearby" |
||||||
|
@click="setSchool(item)" |
||||||
|
>{{ item }} |
||||||
|
</div> |
||||||
|
<div v-else class="item">无法获取</div> |
||||||
|
</div> |
||||||
|
<div class="schools" v-if="!isSearch"> |
||||||
|
<div class="item" v-for="item in schools" |
||||||
|
@click="setSchool(item)" |
||||||
|
>{{ item }} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div v-if="isSearch"> |
||||||
|
<div v-if="searchSchools.length" class="item" v-for="item in searchSchools" |
||||||
|
@click="setSchool(item)" |
||||||
|
> |
||||||
|
<span v-if="item.indexOf(schoolName) > -1"> |
||||||
|
{{ item.substr(0, item.indexOf(schoolName)) }} |
||||||
|
<span style="color: #f50">{{ schoolName }}</span> |
||||||
|
{{ item.substr(item.indexOf(schoolName) + schoolName.length) }} |
||||||
|
</span> |
||||||
|
<span v-else>{{ item }}</span> |
||||||
|
</div> |
||||||
|
<div v-else class="empty"> |
||||||
|
<img src="../../../assets/img/icon/head-image.jpeg" alt=""> |
||||||
|
<div class="title">搜索结果为空</div> |
||||||
|
<div class="sub-title">没有搜索到相关的内容</div> |
||||||
|
<div class="btn">没有学校信息？去申报</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import {mapState} from 'vuex' |
||||||
|
import Search from '../../../components/Search' |
||||||
|
import {inject} from "vue"; |
||||||
|
|
||||||
|
export default { |
||||||
|
name: "ChooseSchool", |
||||||
|
components: { |
||||||
|
Search |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
isSearch: false, |
||||||
|
nearby: [], |
||||||
|
schools: [], |
||||||
|
searchSchools: [], |
||||||
|
schoolName: '', |
||||||
|
mitt: inject('mitt') |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
...mapState({ |
||||||
|
userinfo: 'userinfo', |
||||||
|
school: state => state.userinfo.school, |
||||||
|
}) |
||||||
|
}, |
||||||
|
created() { |
||||||
|
for (let i = 0; i < 20; i++) { |
||||||
|
this.nearby.push('附件大学' + i) |
||||||
|
this.schools.push('所有大学' + i) |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
setSchool(val) { |
||||||
|
localStorage.setItem('changeSchool', val) |
||||||
|
this.$back() |
||||||
|
}, |
||||||
|
search() { |
||||||
|
if (!this.schoolName.length) return this.isSearch = false |
||||||
|
this.isSearch = true |
||||||
|
let all = this.nearby.concat(this.schools) |
||||||
|
this.searchSchools = all.filter(v => v.includes(this.schoolName)) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped lang="scss"> |
||||||
|
@import "../../../assets/scss/index"; |
||||||
|
|
||||||
|
.choose-school { |
||||||
|
position: fixed; |
||||||
|
left: 0; |
||||||
|
right: 0; |
||||||
|
bottom: 0; |
||||||
|
top: 0; |
||||||
|
color: white; |
||||||
|
overflow: auto; |
||||||
|
|
||||||
|
.search-ctn { |
||||||
|
background: $main-bg; |
||||||
|
width: 100%; |
||||||
|
box-sizing: border-box; |
||||||
|
padding: 1rem 2rem; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
|
||||||
|
.search { |
||||||
|
flex: 1; |
||||||
|
} |
||||||
|
|
||||||
|
.search-btn { |
||||||
|
font-size: 1.4rem; |
||||||
|
margin-left: 2rem; |
||||||
|
color: $primary-btn-color; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.content { |
||||||
|
padding-top: 12rem; |
||||||
|
|
||||||
|
.nearby { |
||||||
|
border-bottom: 1px solid $line-color; |
||||||
|
|
||||||
|
.title { |
||||||
|
padding: 1rem 2rem; |
||||||
|
|
||||||
|
img { |
||||||
|
width: 1rem; |
||||||
|
height: 1rem; |
||||||
|
margin-right: .2rem; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
.item { |
||||||
|
padding: 0 2rem; |
||||||
|
font-size: 1.4rem; |
||||||
|
height: 5rem; |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
transition: all .1s; |
||||||
|
background: $main-bg; |
||||||
|
|
||||||
|
&:active { |
||||||
|
background: $active-main-bg; |
||||||
|
color: $second-text-color; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.empty { |
||||||
|
text-align: center; |
||||||
|
|
||||||
|
.title { |
||||||
|
margin-top: 6rem; |
||||||
|
font-size: 1.8rem; |
||||||
|
} |
||||||
|
|
||||||
|
.sub-title { |
||||||
|
color: $second-text-color; |
||||||
|
margin-top: 2rem; |
||||||
|
font-size: 1.4rem; |
||||||
|
} |
||||||
|
|
||||||
|
img { |
||||||
|
margin-top: 6rem; |
||||||
|
height: 10rem; |
||||||
|
border-radius: 50%; |
||||||
|
} |
||||||
|
|
||||||
|
.btn { |
||||||
|
margin-top: 15rem; |
||||||
|
display: inline-block; |
||||||
|
background: $second-btn-color; |
||||||
|
padding: 1.5rem 4rem; |
||||||
|
border-radius: 2px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
</style> |
||||||
@ -1,23 +1,24 @@ |
|||||||
import * as Vuex from "vuex"; |
import * as Vuex from "vuex"; |
||||||
|
import enums from'../utils/enums' |
||||||
|
|
||||||
const store = Vuex.createStore({ |
const store = Vuex.createStore({ |
||||||
state: { |
state: { |
||||||
pageAnim: 'none', |
|
||||||
playDuration: 60, |
|
||||||
currentVideoId: null, |
|
||||||
bodyHeight: document.body.clientHeight, |
bodyHeight: document.body.clientHeight, |
||||||
bodyWidth: document.body.clientWidth |
bodyWidth: document.body.clientWidth, |
||||||
|
userinfo: { |
||||||
|
school: { |
||||||
|
name: 'asdasd', |
||||||
|
department: null, |
||||||
|
joinTime: null, |
||||||
|
education: null, |
||||||
|
displayType: enums.DISPLAY_TYPE.ALL, |
||||||
|
} |
||||||
|
} |
||||||
}, |
}, |
||||||
mutations: { |
mutations: { |
||||||
setPageAnim(state, states) { |
setUserinfo(store, val) { |
||||||
state.pageAnim = states |
store.userinfo = val |
||||||
}, |
} |
||||||
setPlayDuration(state, v) { |
|
||||||
state.playDuration = v |
|
||||||
}, |
|
||||||
setCurrentVideoId(state, v) { |
|
||||||
state.currentVideoId = v |
|
||||||
}, |
|
||||||
} |
} |
||||||
}) |
}) |
||||||
|
|
||||||
|
|||||||
@ -0,0 +1,7 @@ |
|||||||
|
export default { |
||||||
|
DISPLAY_TYPE: { |
||||||
|
ALL: 1, |
||||||
|
SCHOOL: 2, |
||||||
|
ME: 3, |
||||||
|
} |
||||||
|
} |
||||||
Loading…
Reference in new issue