Browse Source

修改学校

pull/19/head
zyronon 4 years ago
parent
commit
49cbf8b4fb
  1. 8
      src/App.vue
  2. 3
      src/assets/scss/color.scss
  3. 3
      src/assets/scss/index.scss
  4. 68
      src/components/BaseHeader.vue
  5. 37
      src/components/Search.vue
  6. 2
      src/pages/me/Me.vue
  7. 13
      src/pages/me/School.vue
  8. 154
      src/pages/me/userinfo/AddSchool.vue
  9. 203
      src/pages/me/userinfo/ChooseSchool.vue
  10. 32
      src/pages/me/userinfo/EditUserInfo.vue
  11. 6
      src/pages/me/userinfo/EditUserInfoItem.vue
  12. 20
      src/router/index.js
  13. 27
      src/store/index.js
  14. 7
      src/utils/enums.js
  15. 5
      vue.config.js

8
src/App.vue

@ -22,9 +22,11 @@ export default { @@ -22,9 +22,11 @@ export default {
return this.transitionName = ''
}
const routeDeep = ['/message', '/attention', '/home', '/me',
'/editUserInfo',
'/editUserInfoItem',
'/VideoDetail',
'/edit-userinfo',
'/edit-userinfo-item',
'/video-detail',
'/add-school',
'/choose-school',
];
const toDepth = routeDeep.indexOf(to.path)
const fromDepth = routeDeep.indexOf(from.path)

3
src/assets/scss/color.scss

@ -1,8 +1,9 @@ @@ -1,8 +1,9 @@
$main-bg: rgb(22, 26, 37);
$active-main-bg: rgb(31, 37, 52);
$second-text-color: rgb(143, 143, 158);
$second-btn-color: rgb(58, 58, 70);
$line-color: rgb(37, 45, 66);
$primary-btn-color: rgb(252, 47, 86);
$disable-primary-btn-color: rgba(252, 47, 86, .5);
$disable-primary-btn-color: rgba(252, 47, 86, .5);

3
src/assets/scss/index.scss

@ -12,7 +12,8 @@ @@ -12,7 +12,8 @@
html, body {
width: 100%;
height: 100%;
background: #2e3244;
//background: #2e3244;
background: $main-bg;
font-size: 62.5%;
margin: 0;
padding: 0;

68
src/components/BaseHeader.vue

@ -1,15 +1,18 @@ @@ -1,15 +1,18 @@
<template>
<div id='BaseHeader'>
<svg @click="back()" t="1564765917375" class="icon left" viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="16292" width="32" height="32">
<path
d="M363.840919 472.978737C336.938714 497.358861 337.301807 537.486138 364.730379 561.486138L673.951902 832.05497C682.818816 839.813519 696.296418 838.915012 704.05497 830.048098 711.813519 821.181184 710.915012 807.703582 702.048098 799.94503L392.826577 529.376198C384.59578 522.174253 384.502227 511.835287 392.492414 504.59418L702.325747 223.807723C711.056111 215.895829 711.719614 202.404616 703.807723 193.674252 695.895829 184.943889 682.404617 184.280386 673.674253 192.192278L363.840919 472.978737Z"
p-id="16293" fill="#8a8a8a"></path>
</svg>
<slot name="center"><span></span></slot>
<slot name="right"><span></span></slot>
<div class="header">
<svg @click="back()" t="1564765917375" class="icon left" viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="16292" width="32" height="32">
<path
d="M363.840919 472.978737C336.938714 497.358861 337.301807 537.486138 364.730379 561.486138L673.951902 832.05497C682.818816 839.813519 696.296418 838.915012 704.05497 830.048098 711.813519 821.181184 710.915012 807.703582 702.048098 799.94503L392.826577 529.376198C384.59578 522.174253 384.502227 511.835287 392.492414 504.59418L702.325747 223.807723C711.056111 215.895829 711.719614 202.404616 703.807723 193.674252 695.895829 184.943889 682.404617 184.280386 673.674253 192.192278L363.840919 472.978737Z"
p-id="16293" fill="#8a8a8a"></path>
</svg>
<slot name="center"><span></span></slot>
<slot name="right"><span></span></slot>
</div>
<slot name="bottom"></slot>
</div>
</template>
<script>
@ -25,7 +28,6 @@ export default { @@ -25,7 +28,6 @@ export default {
computed: {},
methods: {
back() {
this.$store.commit('setPageAnim', 'back')
window.history.back()
}
}
@ -33,29 +35,35 @@ export default { @@ -33,29 +35,35 @@ export default {
</script>
<style scoped lang='scss'>
@import "../assets/scss/index";
#BaseHeader {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
height: 60px;
border-bottom: 1px solid #cccccc11;
position: relative;
color: white;
.left {
position: absolute;
left: 10px;
top: 15px;
}
& > :nth-last-child(1) {
height: 100%;
position: absolute;
right: 17px;
top: 0;
position: fixed;
background: $main-bg;
.header {
display: flex;
justify-content: center;
align-items: center;
height: 6rem;
border-bottom: 1px solid #cccccc11;
position: relative;
color: white;
.left {
position: absolute;
left: 10px;
top: 15px;
}
& > :nth-last-child(1) {
height: 100%;
position: absolute;
right: 17px;
top: 0;
display: flex;
align-items: center;
}
}
}
</style>

37
src/components/Search.vue

@ -1,13 +1,39 @@ @@ -1,13 +1,39 @@
<template>
<div class="search">
<img src="../assets/img/icon/pause.svg" alt="">
<input type="text" placeholder="搜索">
<input type="text" :placeholder="placeholder" v-model="value">
<img v-if="modelValue.length" class="close" src="../assets/img/icon/close.svg" @click="clear">
</div>
</template>
<script>
export default {
name: "Search"
name: "Search",
props: {
placeholder: {
type: String,
default: '搜索'
},
modelValue: String,
},
methods: {
clear() {
this.value = ''
}
},
computed: {
value: {
get() {
return this.modelValue
},
set(val) {
this.$emit('update:modelValue', val)
if (!val) {
this.$emit('clear')
}
}
}
}
}
</script>
@ -15,6 +41,7 @@ export default { @@ -15,6 +41,7 @@ export default {
@import "../assets/scss/color";
.search {
position: relative;
height: 36px;
background: rgb(59, 59, 71);
border-radius: 2px;
@ -40,6 +67,12 @@ export default { @@ -40,6 +67,12 @@ export default {
color: $second-text-color;
}
}
.close {
position: absolute;
right: 0;
width: 1rem;
}
}
</style>

2
src/pages/me/Me.vue

@ -29,7 +29,7 @@ @@ -29,7 +29,7 @@
</div>
</div>
<div class="my-buttons ">
<div class="collect" @click="$nav('/editUserInfo')">
<div class="collect" @click="$nav('/edit-userinfo')">
<span class="mr5p">编辑资料</span>
<span class="f10p" style="color: darkgray">85%</span>
</div>

13
src/pages/me/School.vue

@ -1,13 +0,0 @@ @@ -1,13 +0,0 @@
<template>
</template>
<script>
export default {
name: "School"
}
</script>
<style scoped>
</style>

154
src/pages/me/userinfo/AddSchool.vue

@ -0,0 +1,154 @@ @@ -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>

203
src/pages/me/userinfo/ChooseSchool.vue

@ -0,0 +1,203 @@ @@ -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>

32
src/pages/me/EditUserInfo.vue → src/pages/me/userinfo/EditUserInfo.vue

@ -11,37 +11,37 @@ @@ -11,37 +11,37 @@
<div class="userinfo">
<div class="change-avatar">
<div class="avatar-ctn" @click="changeAvatarDialog = true">
<img class="avatar" src="../../assets/img/icon/head-image.jpeg" alt="">
<img class="change" src="../../assets/img/icon/back.png" alt="">
<img class="avatar" src="../../../assets/img/icon/head-image.jpeg" alt="">
<img class="change" src="../../../assets/img/icon/back.png" alt="">
</div>
<span>点击更换头像</span>
</div>
<div class="row" @click="$nav('/editUserInfoItem',{type:1})">
<div class="row" @click="$nav('/edit-userinfo-item',{type:1})">
<div class="left">名字</div>
<div class="right">
<span>B</span>
<img src="../../assets/img/icon/back.png" alt="">
<img src="../../../assets/img/icon/back.png" alt="">
</div>
</div>
<div class="row" @click="$nav('/editUserInfoItem',{type:2})">
<div class="row" @click="$nav('/edit-userinfo-item',{type:2})">
<div class="left">抖音号</div>
<div class="right">
<span>B</span>
<img src="../../assets/img/icon/back.png" alt="">
<img src="../../../assets/img/icon/back.png" alt="">
</div>
</div>
<div class="row" @click="$nav('/editUserInfoItem',{type:3})">
<div class="row" @click="$nav('/edit-userinfo-item',{type:3})">
<div class="left">简介</div>
<div class="right">
<span>B</span>
<img src="../../assets/img/icon/back.png" alt="">
<img src="../../../assets/img/icon/back.png" alt="">
</div>
</div>
<div class="row" @click="changeSexDialog = true">
<div class="left">性别</div>
<div class="right">
<span>B</span>
<img src="../../assets/img/icon/back.png" alt="">
<img src="../../../assets/img/icon/back.png" alt="">
</div>
</div>
<div class="row">
@ -54,21 +54,21 @@ @@ -54,21 +54,21 @@
<div class="left">生日</div>
<div class="right">
<span>B</span>
<img src="../../assets/img/icon/back.png" alt="">
<img src="../../../assets/img/icon/back.png" alt="">
</div>
</div>
<div class="row" @click="$nav('/editUserInfoItem')">
<div class="row" @click="$nav('/edit-userinfo-item')">
<div class="left">所在地</div>
<div class="right">
<span>B</span>
<img src="../../assets/img/icon/back.png" alt="">
<img src="../../../assets/img/icon/back.png" alt="">
</div>
</div>
<div class="row">
<div class="row" @click="$nav('/add-school')">
<div class="left">学校</div>
<div class="right">
<span>B</span>
<img src="../../assets/img/icon/back.png" alt="">
<img src="../../../assets/img/icon/back.png" alt="">
</div>
</div>
</div>
@ -108,7 +108,7 @@ export default { @@ -108,7 +108,7 @@ export default {
</script>
<style scoped lang="scss">
@import "../../assets/scss/index";
@import "../../../assets/scss/index";
.edit{
position: fixed;
@ -173,7 +173,7 @@ export default { @@ -173,7 +173,7 @@ export default {
font-size: 1.4rem;
&:active {
opacity: .5;
background: $active-main-bg;
}
.right {

6
src/pages/me/EditUserInfoItem.vue → src/pages/me/userinfo/EditUserInfoItem.vue

@ -18,7 +18,7 @@ @@ -18,7 +18,7 @@
<div class="notice">我的名字</div>
<div class="input-ctn" style="margin-bottom: 1rem;">
<input type="text" v-model="name" placeholder="记得填写名字哦">
<img class="close" src="../../assets/img/icon/close.svg" alt="">
<img class="close" src="../../../assets/img/icon/close.svg" alt="">
</div>
<div class="num">{{ name.length }}/20</div>
</div>
@ -26,7 +26,7 @@ @@ -26,7 +26,7 @@
<div class="notice">我的抖音号</div>
<div class="input-ctn" style="margin-bottom: 1rem;">
<input type="text" v-model="name">
<img class="close" src="../../assets/img/icon/close.svg" alt="">
<img class="close" src="../../../assets/img/icon/close.svg" alt="">
</div>
<div class="num">最多16个字只允许包含字母数字下划线和点30天内仅能修改一次</div>
</div>
@ -61,7 +61,7 @@ export default { @@ -61,7 +61,7 @@ export default {
</script>
<style scoped lang="scss">
@import "../../assets/scss/index";
@import "../../../assets/scss/index";
.edit-item {
position: fixed;

20
src/router/index.js

@ -10,8 +10,10 @@ import MyCard from "../pages/me/MyCard"; @@ -10,8 +10,10 @@ import MyCard from "../pages/me/MyCard";
import MyCollect from "../pages/me/MyCollect";
import VideoDetail from "../pages/me/VideoDetail";
import Index2 from "../pages/home/Index2";
import EditUserInfo from "../pages/me/EditUserInfo";
import EditUserInfoItem from "../pages/me/EditUserInfoItem";
import EditUserInfo from "../pages/me/userinfo/EditUserInfo";
import EditUserInfoItem from "../pages/me/userinfo/EditUserInfoItem";
import AddSchool from "../pages/me/userinfo/AddSchool";
import ChooseSchool from "../pages/me/userinfo/ChooseSchool";
const routes = [
// {path: '', component: Music},
@ -21,13 +23,15 @@ const routes = [ @@ -21,13 +23,15 @@ const routes = [
{path: '/attention', component: Attention},
{path: '/message', component: Message},
{path: '/me', component: Me},
{path: '/editUserInfo', component: EditUserInfo},
{path: '/editUserInfoItem', component: EditUserInfoItem},
{path: '/edit-userinfo', component: EditUserInfo},
{path: '/edit-userinfo-item', component: EditUserInfoItem},
{path: '/music', component: Music},
{path: '/countryChoose', component: countryChoose},
{path: '/MyCard', component: MyCard},
{path: '/MyCollect', component: MyCollect},
{path: '/VideoDetail', component: VideoDetail},
{path: '/country-choose', component: countryChoose},
{path: '/my-card', component: MyCard},
{path: '/my-collect', component: MyCollect},
{path: '/video-detail', component: VideoDetail},
{path: '/add-school', component: AddSchool},
{path: '/choose-school', component: ChooseSchool},
]
export default VueRouter.createRouter({

27
src/store/index.js

@ -1,23 +1,24 @@ @@ -1,23 +1,24 @@
import * as Vuex from "vuex";
import enums from'../utils/enums'
const store = Vuex.createStore({
state: {
pageAnim: 'none',
playDuration: 60,
currentVideoId: null,
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: {
setPageAnim(state, states) {
state.pageAnim = states
},
setPlayDuration(state, v) {
state.playDuration = v
},
setCurrentVideoId(state, v) {
state.currentVideoId = v
},
setUserinfo(store, val) {
store.userinfo = val
}
}
})

7
src/utils/enums.js

@ -0,0 +1,7 @@ @@ -0,0 +1,7 @@
export default {
DISPLAY_TYPE: {
ALL: 1,
SCHOOL: 2,
ME: 3,
}
}

5
vue.config.js

@ -1,5 +1,10 @@ @@ -1,5 +1,10 @@
// vue.config.js
const isProduction = process.env.NODE_ENV === 'production'
module.exports = {
publicPath: isProduction ? '' : '',
assetsDir: isProduction ? './' : './',
// productionSourceMap: false,
lintOnSave:false, //关闭eslint检查
devServer:{
open: true,

Loading…
Cancel
Save