MoeJue/douyin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完成编辑学校页面

Browse Source
This commit is contained in:
zyronon 2021-07-15 00:19:25 +08:00
parent c309fffb97
commit c31128cedd
12 changed files with 356 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
package-lock.json generated
View File

@ -1,5 +1,5 @@
{
"name": "douyin3",
"name": "douyin",
"version": "0.1.0",
"lockfileVersion": 1,
"requires": true,
@ -8054,6 +8054,12 @@
"minimist": "^1.2.5"
}
},
"mobile-select": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/mobile-select/-/mobile-select-1.1.2.tgz",
"integrity": "sha1-Hcuei0G7RlJXm8XUyOumFwO7RX8=",
"dev": true
},
"move-concurrently": {
"version": "1.0.1",
"resolved": "https://registry.npm.taobao.org/move-concurrently/download/move-concurrently-1.0.1.tgz",

1
package.json
View File

@ -25,6 +25,7 @@
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0",
"mobile-select": "^1.1.2",
"node-sass": "^4.9.3",
"sass-loader": "^7.1.0"
},

1
src/App.vue
View File

@ -29,6 +29,7 @@ export default {
'/choose-school',
'/choose-department',
'/declare-school',
'/display-type',
];
const toDepth = routeDeep.indexOf(to.path)
const fromDepth = routeDeep.indexOf(from.path)

7
src/components/BaseHeader.vue
View File

@ -28,7 +28,11 @@ export default {
computed: {},
methods: {
back() {
window.history.back()
if (this.$attrs.onBack) {
this.$attrs.onBack()
} else {
this.$back()
}
}
}
}
@ -41,6 +45,7 @@ export default {
width: 100%;
position: fixed;
background: $main-bg;
.header {
display: flex;
justify-content: center;

72
src/components/ConfirmDialog.vue Normal file
View File

@ -0,0 +1,72 @@
<template>
<div class="ConfirmDialog " @click="$emit('dismiss')">
<div class="content" @click.stop="null">
<div class="item">{{ title }}</div>
<div class="footer">
<div class="cancel" @click.stop="$emit('cancel')">放弃</div>
<div class="ok" @click.stop="$emit('ok')">保存</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "ConfirmDialog",
props: {
visible: {
type: Boolean,
default: false
},
title: {
type: String,
default() {
return ''
}
}
},
data() {
return {}
}
}
</script>
<style scoped lang="scss">
.ConfirmDialog {
z-index: 10;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #000000bb;
display: flex;
justify-content: center;
align-items: center;
color: black;
.content {
background: white;
width: 80%;
border-radius: 2px;
box-sizing: border-box;
padding: 1.5rem 2rem;
font-size: 1.5rem;
.footer {
margin-top: 2rem;
display: flex;
justify-content: flex-end;
.cancel {
margin-right: 2.5rem;
}
}
}
}
</style>

60
src/components/Loading.vue Normal file
View File

@ -0,0 +1,60 @@
<template>
<div class="Loading">
<div class="circle blue"></div>
<div class="circle red"></div>
</div>
</template>
<script>
export default {
name: "Loading"
}
</script>
<style scoped lang="scss">
@import "../assets/scss/index";
.Loading {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: flex;
justify-content: space-between;
width: 2.2rem;
.circle {
width: 1rem;
height: 1rem;
border-radius: 50%;
}
.blue {
background: cadetblue;
animation: anim-blue .4s ease-in-out 0s infinite alternate;
}
.red {
background: $primary-btn-color;
animation: anim-red .4s ease-in-out 0s infinite alternate;
}
@keyframes anim-blue {
from {
transform: translate3d(0, 0, 0) scale(1);
}
to {
transform: translate3d(1rem, 0, 0) scale(1.2);
}
}
@keyframes anim-red {
from {
transform: translate3d(0, 0, 0) scale(1);
}
to {
transform: translate3d(-1rem, 0, 0) scale(1.2);
}
}
}
</style>

2
src/components/SelectDialog.vue
View File

@ -27,8 +27,6 @@ export default {
</script>
<style scoped lang="scss">
.SelectDialog {
z-index: 10;
position: absolute;

77
src/pages/me/userinfo/AddSchool.vue
View File

@ -1,12 +1,12 @@
<template>
<div class="school">
<BaseHeader>
<BaseHeader @back="back">
<template v-slot:center>
<span class="f16">添加学校</span>
</template>
<template v-slot:right>
<div>
<span class="f16" :class="isChanged?'save-yes':'save-no'">保存</span>
<span class="f16" :class="isChanged?'save-yes':'save-no'" @click="save">保存</span>
</div>
</template>
</BaseHeader>
@ -25,21 +25,22 @@
<img src="../../../assets/img/icon/back.png" alt="">
</div>
</div>
<div class="row" @click="$nav('/edit-userinfo-item',{type:1})">
<div class="row" @click="showJoinTimeDialog">
<div class="left">入学时间</div>
<div class="right">
<span>{{ isEmpty(school.joinTime) }}</span>
<span>{{ isEmpty(localSchool.joinTime) }}</span>
<img src="../../../assets/img/icon/back.png" alt="">
<div v-show="false" id="trigger1"></div>
</div>
</div>
<div class="row" @click="$nav('/edit-userinfo-item',{type:1})">
<div class="row" @click="showEducationDialog">
<div class="left">学历</div>
<div class="right">
<span>{{ isEmpty(school.education) }}</span>
<span>{{ isEmpty(localSchool.education) }}</span>
<img src="../../../assets/img/icon/back.png" alt="">
</div>
</div>
<div class="row" @click="$nav('/edit-userinfo-item',{type:1})">
<div class="row" @click="$nav('/display-type',{displayType : localSchool.displayType})">
<div class="left">展示范围</div>
<div class="right">
<span>{{ displayType }}</span>
@ -54,6 +55,9 @@
import {mapState} from 'vuex'
import enums from '../../../utils/enums'
import {inject} from "vue";
import MobileSelect from "mobile-select";
import ConfirmDialog from "../../../components/ConfirmDialog";
import Loading from "../../../components/Loading";
//TODO 年份选择器没做
export default {
@ -61,14 +65,22 @@ export default {
data() {
return {
mitt: inject('mitt'),
localSchool: this.$clone(this.$store.state.userinfo.school)
localSchool: this.$clone(this.$store.state.userinfo.school),
educationList: [
{id: 1, name: '专科'},
{id: 2, name: '本科'},
{id: 3, name: '硕士'},
{id: 4, name: '博士'},
]
}
},
created() {
let school = localStorage.getItem('changeSchool')
let department = localStorage.getItem('changeDepartment')
if (school) this.localSchool.name = school
if (department) this.localSchool.department = department
let displayType = localStorage.getItem('changeDisplayType')
if (school !== null) this.localSchool.name = school
if (department !== null) this.localSchool.department = department
if (displayType !== null) this.localSchool.displayType = ~~displayType
localStorage.clear()
},
computed: {
@ -80,9 +92,9 @@ export default {
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 '仅自己可见'
if (this.localSchool.displayType === enums.DISPLAY_TYPE.ALL) return '公开可见'
if (this.localSchool.displayType === enums.DISPLAY_TYPE.SCHOOL) return '校友可见'
if (this.localSchool.displayType === enums.DISPLAY_TYPE.ME) return '仅自己可见'
},
...mapState({
userinfo: 'userinfo',
@ -90,6 +102,25 @@ export default {
})
},
methods: {
showJoinTimeDialog() {
new MobileSelect({
trigger: "#trigger1",
title: "学历",
wheels: [
{
data: Array.apply(null, {length: 50}).map((v, i) => new Date().getFullYear() - i)
},
],
callback: (indexArr, data) => {
this.localSchool.joinTime = ~~data[0]
}
}).show()
},
showEducationDialog() {
this.$showSelectDialog(this.educationList, e => {
this.localSchool.education = e.name
})
},
isEmpty(val) {
if (val) return val
return '点击设置'
@ -97,6 +128,23 @@ export default {
checkGo(path) {
if (!this.localSchool.name) return this.$notice('请先选择学校 ')
this.$nav(path)
},
back() {
if (this.isChanged) {
this.$showConfirmDialog('学校信息30天内只允许修改一次，是否保存修改', this.save, this.$back)
} else {
this.$back()
}
},
async save() {
if (!this.isChanged) return
this.$showLoading()
let data = {...this.userinfo, ...{school: this.localSchool}}
this.$store.commit('setUserinfo', data)
await this.$sleep(500)
this.$hideLoading()
this.$back()
this.$notice('修改成功')
}
}
}
@ -148,7 +196,6 @@ export default {
}
.save-yes {
color: $primary-btn-color;
}
@ -156,4 +203,6 @@ export default {
.save-no {
color: $disable-primary-btn-color;
}
</style>

93
src/pages/me/userinfo/DisplayType.vue Normal file
View File

@ -0,0 +1,93 @@
<template>
<div class="DisplayType">
<BaseHeader>
<template v-slot:center>
<span class="f16">展示范围</span>
</template>
</BaseHeader>
<div class="content">
<div class="row" @click="setDisplayType(enums.DISPLAY_TYPE.ALL)">
<div class="left">公开可见</div>
<div class="right" v-if="displayType === enums.DISPLAY_TYPE.ALL">
<img src="../../../assets/img/icon/back.png" alt="">
</div>
</div>
<div class="row" @click="setDisplayType(enums.DISPLAY_TYPE.SCHOOL)">
<div class="left">校友可见</div>
<div class="right" v-if="displayType === enums.DISPLAY_TYPE.SCHOOL">
<img src="../../../assets/img/icon/back.png" alt="">
</div>
</div>
<div class="row" @click="setDisplayType(enums.DISPLAY_TYPE.ME)">
<div class="left">仅自己可见</div>
<div class="right" v-if="displayType === enums.DISPLAY_TYPE.ME">
<img src="../../../assets/img/icon/back.png" alt="">
</div>
</div>
</div>
</div>
</template>
<script>
import enums from "../../../utils/enums";
export default {
name: "DisplayType",
data() {
return {
enums,
displayType: enums.DISPLAY_TYPE.ALL
}
},
created() {
this.displayType = ~~this.$route.query.displayType
},
methods: {
setDisplayType(type) {
this.displayType = type
localStorage.setItem('changeDisplayType', type)
this.$back()
}
}
}
</script>
<style scoped lang="scss">
@import "../../../assets/scss/index";
.DisplayType {
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;
.right {
display: flex;
justify-content: space-between;
align-items: center;
color: $second-text-color;
img {
margin-left: 1rem;
width: 15px;
}
}
}
}
}
</style>

2
src/router/index.js
View File

@ -16,6 +16,7 @@ import AddSchool from "../pages/me/userinfo/AddSchool";
import ChooseSchool from "../pages/me/userinfo/ChooseSchool";
import DeclareSchool from "../pages/me/userinfo/DeclareSchool";
import ChooseDepartment from "../pages/me/userinfo/ChooseDepartment";
import DisplayType from "../pages/me/userinfo/DisplayType";
const routes = [
// {path: '', component: Music},
@ -36,6 +37,7 @@ const routes = [
{path: '/choose-school', component: ChooseSchool},
{path: '/declare-school', component: DeclareSchool},
{path: '/choose-department', component: ChooseDepartment},
{path: '/display-type', component: DisplayType},
]
export default VueRouter.createRouter({

6
src/utils/enums.js
View File

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

48
src/utils/global-methods.js
View File

@ -1,7 +1,24 @@
import * as Vue from "vue";
import SelectDialog from "../components/SelectDialog";
import ConfirmDialog from "../components/ConfirmDialog";
import Loading from "../components/Loading";
export default {
$showLoading() {
const app = Vue.createApp({
render() {
return <Loading/>
},
})
let parent = document.createElement('div')
parent.classList.add(...['dialog-ctn'])
document.body.append(parent)
app.mount(parent)
},
$hideLoading() {
let parent = document.querySelector('.dialog-ctn')
parent.remove()
},
$showSelectDialog(sexList, cb) {
let remove = () => {
let parent = document.querySelector('.dialog-ctn')
@ -24,6 +41,32 @@ export default {
document.body.append(parent)
app.mount(parent)
},
$showConfirmDialog(title, okCb, cancelCb) {
let remove = () => {
let parent = document.querySelector('.dialog-ctn')
parent.classList.replace('fade-in', 'fade-out')
setTimeout(() => {
parent.remove()
}, 300)
}
let tempOkCb = e => {
remove()
okCb(e)
}
let tempCancelCb = e => {
remove()
cancelCb(e)
}
const app = Vue.createApp({
render() {
return <ConfirmDialog onCancel={tempCancelCb} onDismiss={remove} title={title} onOk={tempOkCb}/>
},
})
let parent = document.createElement('div')
parent.classList.add(...['dialog-ctn', 'fade-in'])
document.body.append(parent)
app.mount(parent)
},
$notice(val) {
let div = document.createElement('div')
div.classList.add('global-notice')
@ -97,5 +140,10 @@ export default {
str += s
}
return str
},
$sleep(duration) {
return new Promise((resolve, reject) => {
setTimeout(resolve, duration)
})
}
}