编辑资料页面

src/App.vue

@@ -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)

src/assets/scss/index.scss

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

src/pages/home/Publish.vue

@@ -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>
 

src/pages/me/userinfo/AddSchool.vue

@@ -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('修改成功')
     }

src/pages/me/userinfo/ChooseCity.vue

@@ -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>

src/pages/me/userinfo/ChooseLocation.vue

@@ -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>

src/pages/me/userinfo/ChooseProvince.vue

@@ -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>

src/pages/me/userinfo/ChooseSchool.vue

@@ -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;

src/pages/me/userinfo/EditUserInfo.vue

@@ -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">
+      <div class="row" @click="showBirthdayDialog">
-        <input type="date" style="opacity: 0;left: 0;
-    position: absolute;
-    right: 0;
-    width: 98%;
-    height: 50px;"/>
-
         <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 => {
+      this.$showSelectDialog(this.sexList, async e => {
-        console.log(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>

src/pages/me/userinfo/EditUserInfoItem.vue

@@ -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="记得填写名字哦">
+          <input type="text" v-model="localUserinfo.name" placeholder="记得填写名字哦">
-          <img class="close" src="../../../assets/img/icon/close.svg" alt="">
+          <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">
+          <input type="text" v-model="localUserinfo.account">
-          <img class="close" src="../../../assets/img/icon/close.svg" alt="">
+          <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',
+      localUserinfo: this.$clone(this.$store.state.userinfo)
-      isChanged: false,
     }
   },
+  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;

src/router/index.js

@@ -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({

src/store/index.js

@@ -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,