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-18 01:05:46 +08:00
parent c90cda1892
commit 1aeed2e31d
12 changed files with 481 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/App.vue
View File

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

6
src/assets/scss/index.scss
View File

@ -23,3 +23,9 @@ p {
padding: 0;
margin: 0;
}
.line {
height: 1px;
background: $line-color;
width: 100%;
}

4
src/pages/home/Publish.vue
View File

@ -20,7 +20,7 @@
</SlideRowList>
</div>
<div class="float">
<img class="close" src="../../assets/img/icon/close-white.png" alt="">
<img class="close" src="../../assets/img/icon/close-white.png" alt="" @click="$back">
<div class="choose-music">
<img src="../../assets/img/icon/close-white.png" alt="">
<span>选择音乐</span>
@ -80,9 +80,7 @@ export default {
console.log(PermissionDeniedError);
})
},
},
}
</script>

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

@ -78,10 +78,14 @@ export default {
let school = localStorage.getItem('changeSchool')
let department = localStorage.getItem('changeDepartment')
let displayType = localStorage.getItem('changeDisplayType')
let joinTime = localStorage.getItem('changeJoinTime')
let education = localStorage.getItem('changeEducation')
if (school !== null) this.localSchool.name = school
if (department !== null) this.localSchool.department = department
if (displayType !== null) this.localSchool.displayType = ~~displayType
localStorage.clear()
if (joinTime !== null) this.localSchool.joinTime = ~~joinTime
if (education !== null) this.localSchool.education = education
// localStorage.clear()
},
computed: {
isChanged() {
@ -112,12 +116,14 @@ export default {
},
],
callback: (indexArr, data) => {
localStorage.setItem('changeJoinTime', data[0])
this.localSchool.joinTime = ~~data[0]
}
}).show()
},
showEducationDialog() {
this.$showSelectDialog(this.educationList, e => {
localStorage.setItem('changeEducation', e.name)
this.localSchool.education = e.name
})
},
@ -131,8 +137,12 @@ export default {
},
back() {
if (this.isChanged) {
this.$showConfirmDialog('学校信息30天内只允许修改一次，是否保存修改', this.save, this.$back)
this.$showConfirmDialog('学校信息30天内只允许修改一次，是否保存修改', this.save, () => {
localStorage.clear()
this.$back()
})
} else {
localStorage.clear()
this.$back()
}
},
@ -143,6 +153,7 @@ export default {
this.$store.commit('setUserinfo', data)
await this.$sleep(500)
this.$hideLoading()
localStorage.clear()
this.$back()
this.$notice('修改成功')
}

131
src/pages/me/userinfo/ChooseCity.vue Normal file
View File

@ -0,0 +1,131 @@
<template>
<div class="choose-location">
<BaseHeader>
<template v-slot:center>
<span class="f16">成都</span>
</template>
</BaseHeader>
<div class="content">
<div class="schools">
<div class="row" @click="save(item)" v-for="item in list">
<span>{{ item }}</span>
<div class="right">
<img src="../../../assets/img/icon/close-white.png" alt="">
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import {mapState} from "vuex";
export default {
name: "ChooseProvince",
data() {
return {
list: [
'成都',
'自贡',
'攀枝花',
'泸州',
'德阳',
'绵阳',
'广元',
'遂宁',
'内江',
'乐山',
'南充',
'眉山',
'宜宾',
'广安',
'达州',
'雅安',
'巴中',
'资阳',
'阿坝',
'甘孜',
'凉山',
]
}
},
computed: {
...mapState({
userinfo: 'userinfo',
})
},
methods: {
async save(item) {
this.$showLoading()
let data = {...this.userinfo, ...{location: '中国-四川-成都'}}
this.$store.commit('setUserinfo', data)
await this.$sleep(500)
this.$hideLoading()
history.go(-3)
}
}
}
</script>
<style scoped lang="scss">
@import "../../../assets/scss/index";
.choose-location {
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
color: white;
overflow: auto;
.content {
padding-top: 6rem;
.nearby {
.title {
padding: 1rem 2rem;
img {
width: 1rem;
height: 1rem;
margin-right: .2rem;
}
}
}
.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;
}
}
&:active {
background: $active-main-bg;
color: $second-text-color;
}
}
}
}
</style>

114
src/pages/me/userinfo/ChooseLocation.vue Normal file
View File

@ -0,0 +1,114 @@
<template>
<div class="choose-location">
<BaseHeader>
<template v-slot:center>
<span class="f16">选择地区</span>
</template>
</BaseHeader>
<div class="content">
<div class="row" @click="save">暂不设置</div>
<div class="line" style="width: calc(100% - 4rem);margin-left: 2rem;"></div>
<div class="nearby">
<div class="title">
<img src="../../../assets/img/icon/location.svg" alt="">
<span>当前位置</span>
</div>
<div class="row">无法获取</div>
</div>
<div class="line" style="width: calc(100% - 4rem);margin-left: 2rem;"></div>
<div class="schools">
<div class="row" @click="$nav('/choose-province')">
<span>中国</span>
<div class="right">
<img src="../../../assets/img/icon/close-white.png" alt="">
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import {mapState} from "vuex";
export default {
name: "ChooseLocation",
computed: {
...mapState({
userinfo: 'userinfo',
})
},
methods: {
async save(item) {
this.$showLoading()
let data = {...this.userinfo, ...{location: '暂不设置'}}
this.$store.commit('setUserinfo', data)
await this.$sleep(500)
this.$hideLoading()
this.$back()
}
}
}
</script>
<style scoped lang="scss">
@import "../../../assets/scss/index";
.choose-location {
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
color: white;
overflow: auto;
.content {
padding-top: 6rem;
.nearby {
.title {
padding: 1rem 2rem;
img {
width: 1rem;
height: 1rem;
margin-right: .2rem;
}
}
}
.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;
}
}
&:active {
background: $active-main-bg;
color: $second-text-color;
}
}
}
}
</style>

97
src/pages/me/userinfo/ChooseProvince.vue Normal file
View File

@ -0,0 +1,97 @@
<template>
<div class="choose-location">
<BaseHeader>
<template v-slot:center>
<span class="f16">中国</span>
</template>
</BaseHeader>
<div class="content">
<div class="schools">
<div class="row" @click="$nav('/choose-city')" v-for="item in list">
<span>{{ item }}</span>
<div class="right">
<img src="../../../assets/img/icon/close-white.png" alt="">
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "ChooseProvince",
data() {
return {
list: [
'河北', '山西', '辽宁', '吉林', '黑龙江', '江苏', '浙江', '安徽', '福建', '江西', '山东', '河南', '湖北', '湖南', '广东', '海南', '四川', '贵州', '云南', '陕西', '甘肃', '青海', '台湾',
'内蒙古', '广西', '西藏', '宁夏', '新疆',
'北京', '天津', '上海', '重庆',
'香港', '澳门'
]
}
}
}
</script>
<style scoped lang="scss">
@import "../../../assets/scss/index";
.choose-location {
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
color: white;
overflow: auto;
.content {
padding-top: 6rem;
.nearby {
.title {
padding: 1rem 2rem;
img {
width: 1rem;
height: 1rem;
margin-right: .2rem;
}
}
}
.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;
}
}
&:active {
background: $active-main-bg;
color: $second-text-color;
}
}
}
}
</style>

4
src/pages/me/userinfo/ChooseSchool.vue
View File

@ -28,6 +28,7 @@
</div>
<div v-else class="item">无法获取</div>
</div>
<div class="line" style="width: calc(100% - 4rem);margin-left: 2rem;"></div>
<div class="schools" v-if="!isSearch">
<div class="item" v-for="item in schools"
@click="setSchool(item)"
@ -75,7 +76,7 @@ export default {
},
created() {
for (let i = 0; i < 20; i++) {
this.nearby.push('附件大学' + i)
this.nearby.push('附近大学' + i)
this.schools.push('所有大学' + i)
}
},
@ -129,7 +130,6 @@ export default {
padding-top: 12rem;
.nearby {
border-bottom: 1px solid $line-color;
.title {
padding: 1rem 2rem;

70
src/pages/me/userinfo/EditUserInfo.vue
View File

@ -19,55 +19,50 @@
<div class="row" @click="$nav('/edit-userinfo-item',{type:1})">
<div class="left">名字</div>
<div class="right">
<span>B</span>
<span>{{ isEmpty(userinfo.name) }}</span>
<img src="../../../assets/img/icon/back.png" alt="">
</div>
</div>
<div class="row" @click="$nav('/edit-userinfo-item',{type:2})">
<div class="left">抖音号</div>
<div class="right">
<span>B</span>
<span>{{ isEmpty(userinfo.account) }}</span>
<img src="../../../assets/img/icon/back.png" alt="">
</div>
</div>
<div class="row" @click="$nav('/edit-userinfo-item',{type:3})">
<div class="left">简介</div>
<div class="right">
<span>B</span>
<span>{{ isEmpty(userinfo.desc) }}</span>
<img src="../../../assets/img/icon/back.png" alt="">
</div>
</div>
<div class="row" @click="showSexDialog">
<div class="left">性别</div>
<div class="right">
<span>B</span>
<span>{{ isEmpty(userinfo.sex) }}</span>
<img src="../../../assets/img/icon/back.png" alt="">
</div>
</div>
<div class="row">
<input type="date" style="opacity: 0;left: 0;
position: absolute;
right: 0;
width: 98%;
height: 50px;"/>
<div class="row" @click="showBirthdayDialog">
<div class="left">生日</div>
<div class="right">
<span>B</span>
<span>{{ isEmpty(userinfo.birthday) }}</span>
<div v-show="false" id="trigger1"></div>
<img src="../../../assets/img/icon/back.png" alt="">
</div>
</div>
<div class="row" @click="$nav('/edit-userinfo-item')">
<div class="row" @click="$nav('/choose-location')">
<div class="left">所在地</div>
<div class="right">
<span>B</span>
<span>{{ isEmpty(userinfo.location) }}</span>
<img src="../../../assets/img/icon/back.png" alt="">
</div>
</div>
<div class="row" @click="$nav('/add-school')">
<div class="left">学校</div>
<div class="right">
<span>B</span>
<span>{{ isEmpty(userinfo.school.name) }}</span>
<img src="../../../assets/img/icon/back.png" alt="">
</div>
</div>
@ -77,6 +72,9 @@
</template>
<script>
import MobileSelect from "mobile-select";
import {mapState} from "vuex";
export default {
name: "EditUserInfo",
components: {},
@ -95,10 +93,22 @@ export default {
]
}
},
computed: {
...mapState({
userinfo: 'userinfo',
})
},
methods: {
isEmpty(val) {
if (val) return val
return '点击设置'
},
showSexDialog() {
this.$showSelectDialog(this.sexList, e => {
console.log(e)
this.$showSelectDialog(this.sexList, async e => {
this.$showLoading()
await this.$sleep(500)
this.$store.commit('setUserinfo', {...this.userinfo, sex: e.name})
this.$hideLoading()
})
},
showAvatarDialog() {
@ -106,6 +116,32 @@ export default {
console.log(e)
})
},
showBirthdayDialog() {
new MobileSelect({
trigger: "#trigger1",
title: "生日",
connector: "生日",
wheels: [
{
data: Array.apply(null, {length: 100}).map((v, i) => new Date().getFullYear() - i)
},
{
data: Array.apply(null, {length: 12}).map((v, i) => 12 - i)
},
{
data: Array.apply(null, {length: 31}).map((v, i) => 31 - i)
},
],
callback: async (indexArr, data) => {
console.log(data)
this.$showLoading()
await this.$sleep(500)
this.$store.commit('setUserinfo', {...this.userinfo, birthday: data.join('-')})
this.$hideLoading()
// this.localSchool.joinTime = ~~data[0]
}
}).show()
},
}
}
</script>

58
src/pages/me/userinfo/EditUserInfoItem.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="edit-item">
<BaseHeader>
<BaseHeader @back="back">
<template v-slot:center>
<span v-if="type === 1" class="f16">修改名字</span>
<span v-if="type === 2" class="f16">修改抖音号</span>
@ -8,7 +8,7 @@
</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>
@ -17,16 +17,16 @@
<div v-if="type === 1">
<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="">
<input type="text" v-model="localUserinfo.name" placeholder="记得填写名字哦">
<img class="close" src="../../../assets/img/icon/close.svg" alt="" @click="localUserinfo.name = ''">
</div>
<div class="num">{{ name.length }}/20</div>
<div class="num">{{ localUserinfo.name.length }}/20</div>
</div>
<div class="row" v-if="type === 2">
<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="">
<input type="text" v-model="localUserinfo.account">
<img class="close" src="../../../assets/img/icon/close.svg" alt="" @click="localUserinfo.account = ''">
</div>
<div class="num">最多16个字，只允许包含字母、数字、下划线和点，30天内仅能修改一次</div>
</div>
@ -34,6 +34,7 @@
<div class="notice">个人简介</div>
<div class="textarea-ctn">
<textarea name="" id="" cols="30" rows="10"
v-model="localUserinfo.desc"
placeholder="填写个人简介更容易获得别人关注哦"></textarea>
</div>
</div>
@ -45,17 +46,53 @@
//TODO 1、数据变了后，保存按钮变亮；2、数据变了，点返回，弹窗是否确认
import MobileSelect from "mobile-select";
import {mapState} from "vuex";
export default {
name: "EditUserInfo",
data() {
return {
type: 1,
name: 'B',
isChanged: false,
localUserinfo: this.$clone(this.$store.state.userinfo)
}
},
computed: {
isChanged() {
if (this.type === 1) if (!this.localUserinfo.name) return false
if (this.type === 2) if (!this.localUserinfo.desc) return false
if (this.userinfo.name !== this.localUserinfo.name) return true
if (this.userinfo.desc !== this.localUserinfo.desc) return true
return this.userinfo.account !== this.localUserinfo.account;
},
...mapState({
userinfo: 'userinfo',
})
},
created() {
this.type = Number(this.$route.query.type)
},
methods: {
back() {
if (this.isChanged) {
this.$showConfirmDialog('是否保存修改', this.save, this.$back)
} else {
this.$back()
}
},
async save() {
if (!this.isChanged) return
if (this.type === 1) {
if (!this.localUserinfo.name) return this.$notice('名字不能为空')
}
this.$showLoading()
this.$store.commit('setUserinfo', this.localUserinfo)
await this.$sleep(500)
this.$hideLoading()
this.$back()
if (this.type === 3) return this.$notice('新签名保存成功')
},
}
}
</script>
@ -80,6 +117,7 @@ export default {
.content {
padding: 2rem;
padding-top: 7rem;
.notice, .num {
font-size: 1.2rem;
@ -116,7 +154,7 @@ export default {
.textarea-ctn {
width: 100%;
background: rgb(100, 114, 158);
background: $active-main-bg;
padding: 1.5rem;
box-sizing: border-box;
margin-top: 1rem;

6
src/router/index.js
View File

@ -19,6 +19,9 @@ import ChooseDepartment from "../pages/me/userinfo/ChooseDepartment";
import DisplayType from "../pages/me/userinfo/DisplayType";
import Publish from "../pages/home/Publish";
import Test from "../pages/home/Test";
import ChooseLocation from "../pages/me/userinfo/ChooseLocation";
import ChooseProvince from "../pages/me/userinfo/ChooseProvince";
import ChooseCity from "../pages/me/userinfo/ChooseCity";
const routes = [
// {path: '', component: Music},
@ -42,6 +45,9 @@ const routes = [
{path: '/declare-school', component: DeclareSchool},
{path: '/choose-department', component: ChooseDepartment},
{path: '/display-type', component: DisplayType},
{path: '/choose-location', component: ChooseLocation},
{path: '/choose-province', component: ChooseProvince},
{path: '/choose-city', component: ChooseCity},
]
export default VueRouter.createRouter({

8
src/store/index.js
View File

@ -1,11 +1,17 @@
import * as Vuex from "vuex";
import enums from'../utils/enums'
import enums from '../utils/enums'
const store = Vuex.createStore({
state: {
bodyHeight: document.body.clientHeight,
bodyWidth: document.body.clientWidth,
userinfo: {
name: '',
account: '',
desc: '123',
sex: '',
birthday: '',
location:'',
school: {
name: 'asdasd',
department: null,