修改学校

src/App.vue

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

src/assets/scss/color.scss

@@ -1,4 +1,5 @@
 $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);

src/assets/scss/index.scss

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

src/components/BaseHeader.vue

@@ -1,5 +1,6 @@
 <template>
   <div id='BaseHeader'>
+    <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"
@@ -11,6 +12,8 @@
       <slot name="center"><span></span></slot>
       <slot name="right"><span></span></slot>
     </div>
+    <slot name="bottom"></slot>
+  </div>
 </template>
 <script>
 export default {
@@ -25,7 +28,6 @@ export default {
   computed: {},
   methods: {
     back() {
-      this.$store.commit('setPageAnim', 'back')
       window.history.back()
     }
   }
@@ -33,12 +35,17 @@ export default {
 </script>
 
 <style scoped lang='scss'>
+@import "../assets/scss/index";
+
 #BaseHeader {
   width: 100%;
+  position: fixed;
+  background: $main-bg;
+  .header {
     display: flex;
     justify-content: center;
     align-items: center;
-  height: 60px;
+    height: 6rem;
     border-bottom: 1px solid #cccccc11;
     position: relative;
     color: white;
@@ -58,4 +65,5 @@ export default {
       align-items: center;
     }
   }
+}
 </style>

src/components/Search.vue

@@ -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 {
 @import "../assets/scss/color";
 
 .search {
+  position: relative;
   height: 36px;
   background: rgb(59, 59, 71);
   border-radius: 2px;
@@ -40,6 +67,12 @@ export default {
       color: $second-text-color;
     }
   }
+
+  .close {
+    position: absolute;
+    right: 0;
+    width: 1rem;
+  }
 }
 
 </style>

src/pages/me/Me.vue

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

src/pages/me/School.vue

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

src/pages/me/userinfo/AddSchool.vue

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

src/pages/me/userinfo/ChooseSchool.vue

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

src/pages/me/userinfo/EditUserInfo.vue

@@ -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 @@
         <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 {
 </script>
 
 <style scoped lang="scss">
-@import "../../assets/scss/index";
+@import "../../../assets/scss/index";
 
 .edit{
   position: fixed;
@@ -173,7 +173,7 @@ export default {
     font-size: 1.4rem;
 
     &:active {
-      opacity: .5;
+      background: $active-main-bg;
     }
 
     .right {

src/pages/me/userinfo/EditUserInfoItem.vue

@@ -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 @@
         <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 {
 </script>
 
 <style scoped lang="scss">
-@import "../../assets/scss/index";
+@import "../../../assets/scss/index";
 
 .edit-item {
   position: fixed;

src/router/index.js

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

src/store/index.js

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

src/utils/enums.js

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

vue.config.js

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