选择院系

src/App.vue

@@ -27,6 +27,7 @@ export default {
         '/video-detail',
         '/add-school',
         '/choose-school',
+        '/choose-department',
         '/declare-school',
       ];
       const toDepth = routeDeep.indexOf(to.path)

src/pages/me/userinfo/AddSchool.vue

@@ -18,10 +18,10 @@
           <img src="../../../assets/img/icon/back.png" alt="">
         </div>
       </div>
-      <div class="row" @click="$nav('/edit-userinfo-item',{type:1})">
+      <div class="row" @click="checkGo('/choose-department')">
         <div class="left">院系</div>
         <div class="right">
-          <span>{{ isEmpty(school.department) }}</span>
+          <span>{{ isEmpty(localSchool.department) }}</span>
           <img src="../../../assets/img/icon/back.png" alt="">
         </div>
       </div>
@@ -64,11 +64,11 @@ export default {
     }
   },
   created() {
-    let val = localStorage.getItem('changeSchool')
+    let school = localStorage.getItem('changeSchool')
-    if (val) {
+    let department = localStorage.getItem('changeDepartment')
-      this.localSchool.name = val
+    if (school) this.localSchool.name = school
-      localStorage.clear()
+    if (department) this.localSchool.department = department
-    }
+    localStorage.clear()
   },
   computed: {
     isChanged() {
@@ -92,6 +92,10 @@ export default {
     isEmpty(val) {
       if (val) return val
       return '点击设置'
+    },
+    checkGo(path) {
+      if (!this.localSchool.name) return this.$notice('请先选择学校 ')
+      this.$nav(path)
     }
   }
 }

src/pages/me/userinfo/ChooseDepartment.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="choose-school">
+    <BaseHeader>
+      <template v-slot:center>
+        <span class="f16">选择院系</span>
+      </template>
+      <template v-slot:right>
+        <span class="f14" @click="$nav('/declare-school',{type:2})">没有找到?</span>
+      </template>
+    </BaseHeader>
+    <div class="content">
+      <div class="nearby">
+        <div class="item"
+             v-for="item in departments"
+             @click="setDepartment(item)"
+        >{{ item }}
+        </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 {
+      departments: [],
+      schoolName: '',
+    }
+  },
+  computed: {},
+  created() {
+    for (let i = 0; i < 5; i++) {
+      this.departments.push('院系' + i)
+    }
+  },
+  methods: {
+    setDepartment(val) {
+      localStorage.setItem('changeDepartment', val)
+      this.$back()
+    },
+  }
+}
+</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;
+
+
+  .content {
+    padding-top: 6rem;
+
+    .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;
+      }
+    }
+  }
+}
+
+</style>

src/pages/me/userinfo/ChooseSchool.vue

@@ -5,7 +5,7 @@
         <span class="f16">添加学校</span>
       </template>
       <template v-slot:right>
-        <span class="f14" @click="$nav('/declare-school')">没有找到?</span>
+        <span class="f14" @click="$nav('/declare-school',{type:1})">没有找到?</span>
       </template>
       <template v-slot:bottom>
         <div class="search-ctn">
@@ -49,7 +49,7 @@
           <img src="../../../assets/img/icon/head-image.jpeg" alt="">
           <div class="title">搜索结果为空</div>
           <div class="sub-title">没有搜索到相关的内容</div>
-          <div class="btn">没有学校信息？去申报</div>
+          <div class="btn" @click="$nav('/declare-school')">没有学校信息？去申报</div>
         </div>
       </div>
     </div>
@@ -57,9 +57,7 @@
 </template>
 
 <script>
-import {mapState} from 'vuex'
 import Search from '../../../components/Search'
-import {inject} from "vue";
 
 export default {
   name: "ChooseSchool",
@@ -73,15 +71,8 @@ export default {
       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)

src/pages/me/userinfo/DeclareSchool.vue

@@ -10,10 +10,17 @@
         <div class="label">学校全称</div>
         <input type="text" placeholder="请输入学校全称(必填)" v-model="form.name">
       </div>
-      <div class="row">
+      <div class="row" v-if="type === 1">
         <div class="label">所在城市</div>
         <input type="text" placeholder="请输入学校所在城市(必填)" v-model="form.location">
       </div>
+      <div class="department-row" v-if="type === 2">
+        <div class="label">信息问题</div>
+        <div class="right">
+          <span>点击选择(必选)</span>
+          <img src="../../../assets/img/icon/back.png" alt="">
+        </div>
+      </div>
       <div class="notice">感谢你的反馈，我们将尽快核对信息</div>
       <div class="btn" @click="submit">提交</div>
     </div>
@@ -21,32 +28,31 @@
 </template>
 
 <script>
+//TODO　院系点击那个弹窗没做
 export default {
   name: "DeclareSchool",
   data() {
     return {
       form: {
         name: '',
-        location: ''
+        location: '',
-      }
+        departmentInfoType: ''
+      },
+      type: 1
     }
   },
+  created() {
+    this.type = Number(this.$route.query.type)
+  },
   methods: {
     submit() {
       if (!this.form.name) return this.$notice('请输入学校全称')
-      if (!this.form.location) return this.$notice('请输入学校所在城市')
+      if (this.type === 1 && !this.form.location) return this.$notice('请输入学校所在城市')
+      if (this.type === 2 && !this.form.departmentInfoType) return this.$notice('请选择信息问题')
       this.$notice('申报成功')
       setTimeout(this.$back, 1000)
     },
-    $notice(val) {
+
-      let div = document.createElement('div')
-      div.classList.add('global-notice')
-      div.textContent = val
-      document.body.append(div)
-      setTimeout(() => {
-        document.body.removeChild(div)
-      }, 1000)
-    }
   }
 }
 </script>
@@ -88,6 +94,32 @@ export default {
       }
     }
 
+    .department-row {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      .label {
+        color: white;
+        font-size: 1.6rem;
+        margin-right: 3rem;
+      }
+
+      .right {
+        padding: 1.2rem 0;
+        display: flex;
+        align-items: center;
+        color: $second-text-color;
+
+        img {
+          margin-left: 5px;
+          width: 1.2rem;
+        }
+      }
+
+
+    }
+
     .notice {
       margin-top: 2rem;
       color: $second-text-color;

src/router/index.js

@@ -15,6 +15,7 @@ import EditUserInfoItem from "../pages/me/userinfo/EditUserInfoItem";
 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";
 
 const routes = [
   // {path: '', component: Music},
@@ -34,6 +35,7 @@ const routes = [
   {path: '/add-school', component: AddSchool},
   {path: '/choose-school', component: ChooseSchool},
   {path: '/declare-school', component: DeclareSchool},
+  {path: '/choose-department', component: ChooseDepartment},
 ]
 
 export default VueRouter.createRouter({

src/utils/global-methods.js

@@ -1,5 +1,14 @@
 export default {
-  $back(){
+  $notice(val) {
+    let div = document.createElement('div')
+    div.classList.add('global-notice')
+    div.textContent = val
+    document.body.append(div)
+    setTimeout(() => {
+      document.body.removeChild(div)
+    }, 1000)
+  },
+  $back() {
     window.history.back()
   },
   $stopPropagation(e) {