feats

babel.config.js

@@ -7,7 +7,7 @@ module.exports = {
     ['import', {
       libraryName: 'vant',
       libraryDirectory: 'es',
-      style: true
+      style: (name) => `${name}/style/less`,
     }, 'vant']
   ]
 }

src/components/FieldPicker/index.vue

@@ -0,0 +1,78 @@
+<template>
+  <van-field
+    readonly
+    clickable
+    :name="name"
+    :value="valueText"
+    :label="label"
+    :placeholder="placeholder"
+    @click="show = true"
+  >
+    <template slot="extra">
+      <van-popup v-model="show" :position="position">
+        <van-picker
+          show-toolbar
+          :columns="columns"
+          :value-key="valueKey"
+          @click.native.stop="() => {}"
+          @confirm="handleConfirm"
+          @cancel="show = false"
+        />
+      </van-popup>
+    </template>
+  </van-field>
+</template>
+
+<script>
+// 暂时只支持单列
+
+export default {
+  name: 'FieldPicker',
+  props: {
+    name: String,
+    value: null,
+    label: String,
+    placeholder: {
+      type: String,
+      default: '请选择'
+    },
+    position: {
+      type: String,
+      default: 'bottom',
+    },
+    columns: {
+      type: Array,
+      default: () => [],
+    },
+    valueKey: {
+      type: String,
+      required: true,
+    },
+    valueId: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    valueText() {
+      if (this.value === undefined || this.value === null) return undefined;
+      if (!this.columns) return undefined;
+
+      const item = this.columns.filter(x => x[this.valueId] === this.value)[0] || {}
+      return item[this.valueKey]
+    }
+  },
+  data() {
+    return {
+      show: false,
+    }
+  },
+  methods: {
+    handleConfirm(_, inx) {
+      this.show = false
+      const item = this.columns[inx]
+      this.$emit('input', item[this.valueId])
+    }
+  }
+}
+</script>

src/store/index.js

@@ -16,11 +16,8 @@ const store = new Vuex.Store({
       phone: '',
       personId: '',
       classId: '',
-      sexNumber: null,
-      Semester: '',
       sex: '',
       termId: '',
-      Classs: '',
       LOADING: false,
     }
   },

src/util/initial.js

@@ -70,10 +70,17 @@ export function Login () {
     console.log(e);
     let userInfo = {
       token: e.token,
-      name: e.person.name,
-      phone: e.person.phone,
-      personId: e.person.personId,
+      ...e.person,
     }
+
+    if (e.student && e.student.classId) {
+      userInfo = {
+        ...userInfo,
+        termId: e.student.termId,
+        classId: e.student.classId,
+      }
+    }
+
     store.commit('SET_USER_INFO', userInfo)
     hideLoading()
 

src/views/UserCenter.vue

@@ -14,7 +14,9 @@
         </div>
       </div>
 
-      <div v-else class="userInfo-button-zhuce" @click="seeUserInfo()">注册</div>
+      <div v-else class="userInfo-button-zhuce" @click="seeUserInfo()">
+        <van-button round type="info" size="small">&nbsp;&nbsp;注&nbsp;&nbsp;&nbsp;&nbsp;册&nbsp;&nbsp;</van-button>
+      </div>
     </div>
 
     <div class="menu-list flex-1">
@@ -135,14 +137,12 @@ export default {
 
     }
     .userInfo-button-zhuce {
-      width: 80px;
-      letter-spacing: 4px;
-      color: #fff;
-      border-radius: 20px;
-      line-height: 30px;
-      background-color: #2cb798;
       margin: 0 auto;
-      text-align: center;
+
+      .van-button {
+        // text-align: right;
+        // letter-spacing: 10px;
+      }
     }
   }
   .menu-list {

src/views/userPages/SetUser.vue

@@ -4,76 +4,47 @@
       <van-nav-bar title="修改个人信息" left-text="返回" left-arrow @click-left="onClickLeft" />
       <van-form @submit="onSubmit">
         <van-field
-          v-model="name"
-          name="name"
+          v-model="personInfo.name"
           label="姓名"
           placeholder="姓名"
           :rules="[{ required: true, message: '请填写姓名' }]"
         />
         <van-field
-          v-model="phone"
+          v-model="personInfo.phone"
           type="number"
-          name="phone"
           maxlength="11"
           label="手机号"
           placeholder="手机号"
           :rules="[{ required: true, message: '请填写手机号码' }]"
         />
-        <van-field
-          readonly
-          clickable
-          name="sex"
-          :value="sex"
+
+        <field-picker
           label="性别"
           placeholder="点击选择性别"
-          @click="onClickPicker(1)"
+          v-model="personInfo.sex"
+          value-id="id"
+          value-key="label"
+          :columns="sexArry"
         />
-        <van-popup v-model="sexShowPicker" position="bottom">
-          <van-picker
-            show-toolbar
-            :columns="sexArry"
-            @confirm="onConfirmSex"
-            @cancel="sexShowPicker = false"
-          />
-        </van-popup>
 
-        <van-field
-          readonly
-          clickable
-          name="Semester"
-          :value="Semester"
+        <field-picker
+          v-model="personInfo.termId"
           label="学期"
           placeholder="点击选择学期"
-          @click="onClickPicker(2)"
+          value-id="termId"
+          value-key="name"
+          :columns="SemesterArry"
         />
-        <van-popup v-model="SemesterShowPicker" position="bottom">
-          <van-picker
-            show-toolbar
-            value-key="name"
-            :columns="SemesterArry"
-            @confirm="onConfirmSemester"
-            @cancel="SemesterShowPicker = false"
-          />
-        </van-popup>
 
-        <van-field
-          readonly
-          clickable
-          name="Classs"
-          :value="Classs"
+        <field-picker
+          v-model="personInfo.classId"
           label="班级"
           placeholder="点击选择班级"
-          @click="ClasssShowPicker = true"
+          value-id="classId"
+          value-key="name"
+          :columns="ClasssArry"
         />
-        <van-popup v-model="ClasssShowPicker" position="bottom">
-          <van-picker
-            show-toolbar
-            value-key="name"
-            :columns="ClasssArry"
-            @confirm="onConfirmClasss"
-            @cancel="onClickPicker(3)"
-          />
-        </van-popup>
+
         <div style="margin: 20px; margin-top:3em;">
           <van-button round block type="info" native-type="submit">提交</van-button>
         </div>
@@ -84,24 +55,25 @@
 
 <script>
 import { mapState } from 'vuex'
-import { SetUser, getSchoolterm, getSchoolClass } from '../../util/api'
+import { SetUser, getSchoolterm, getSchoolClass } from '@/util/api'
+
 export default {
+  components: {
+    FieldPicker: () => import('@/components/FieldPicker')
+  },
+
   data() {
     return {
-      name: '',
-      phone: '',
-      sexArry: ['男', '女'],
+      personInfo: {
+        name: null,
+        sex: null,
+        phone: null,
+        termId: null,
+        classId: null,
+      },
+      sexArry: [{id: 1, label: '男'}, {id: 2, label: '女'}],
       SemesterArry: [],
       ClasssArry: [],
-      sexShowPicker: false,
-      SemesterShowPicker: false,
-      ClasssShowPicker: false,
-      sex: '',
-      sexNumber: null,
-      Semester: '',
-      Classs: '',
-      termId: '',
-      classId: ''
     }
   },
   computed: {
@@ -113,11 +85,11 @@ export default {
     user: {
       handler(nw) {
         if (nw) {
-          this.name = nw.name
-          this.phone = nw.phone
-          this.Classs = nw.Classs
-          this.Semester = nw.Semester
-          this.sex = nw.sex
+          this.personInfo.name = nw.name
+          this.personInfo.phone = nw.phone
+          this.personInfo.classId = nw.classId
+          this.personInfo.termId = nw.termId
+          this.personInfo.sex = nw.sex
         }
       },
       immediate: true
@@ -125,9 +97,6 @@ export default {
   },
   mounted() {
     this.getSemester()
-    // if (this.ClasssShowPicker) {
-    //   this.getClass()
-    // }
   },
   methods: {
     // 获取学期班级 star
@@ -135,6 +104,12 @@ export default {
       getSchoolterm({ pageSize: 999 }).then((e) => {
         console.log('获取学期', e)
         this.SemesterArry = e.records
+
+        if ((!this.ClasssArry || this.ClasssArry.length < 1) && e.total > 0) {
+          const first = this.SemesterArry[0]
+
+          this.getClass(first.termId)
+        }
       })
     },
 
@@ -148,78 +123,17 @@ export default {
     onClickLeft() {
       this.$router.go(-1)
     },
-    onConfirmSex(e) {
-      if (e == '男') {
-        this.sexNumber = 1
-        this.sex = e
-      } else {
-        this.sexNumber = 2
-
-        this.sex = e
-      }
-
-      this.sexShowPicker = false
-    },
     //学期区------------------------
 
-    onConfirmSemester(e, x) {
-      const { name, termId } = e
-      this.Semester = name
-      this.getClass(termId)
-      this.termId = termId
-      console.log('🚀 ~值，下标 ', e, x)
-      this.SemesterShowPicker = false
-    },
-    //班级区------------------------
-    onConfirmClasss(e) {
-      const { name, classId } = e
-      this.Classs = name
-      this.classId = classId
-
-      this.ClasssShowPicker = false
-    },
-    // this.showPicker = false
-
-    onClickPicker(e) {
-      switch (e) {
-        case 1:
-          this.sexShowPicker = true
-
-          break
-        case 2:
-          this.SemesterShowPicker = true
-          this.Classs = ''
-
-          break
-        case 3:
-          this.ClasssShowPicker = true
-
-          break
-        default:
-          break
-      }
-    },
     onSubmit(values) {
       console.log('submit', values)
 
       this.$toast.success('修改成功！')
       SetUser(this.$store.state.user.personId, {
-        classId: this.classId,
-        name: this.name,
+        ...this.personInfo,
         personId: this.$store.state.user.personId,
-        phone: this.phone,
-        sex: this.sexNumber,
-        termId: this.termId
       }).then((e) => {
-        console.log(e)
-        this.$store.commit('SET_USER_INFO', { name: this.name })
-        this.$store.commit('SET_USER_INFO', { phone: values.phone })
-        this.$store.commit('SET_USER_INFO', { sexNumber: this.sexNumber })
-        this.$store.commit('SET_USER_INFO', { termId: this.termId })
-        this.$store.commit('SET_USER_INFO', { classId: this.classId })
-        this.$store.commit('SET_USER_INFO', { Classs: this.Classs })
-        this.$store.commit('SET_USER_INFO', { Semester: this.Semester })
-        this.$store.commit('SET_USER_INFO', { sex: this.sex })
+        this.$store.commit('SET_USER_INFO', this.personInfo)
         this.$router.go(-1)
       })
     }

vue.config.js

@@ -7,6 +7,16 @@ const resolve = dir => path.join(__dirname, dir)
 
 
 module.exports = {
+  css: {
+    loaderOptions: {
+      less: {
+        modifyVars: {
+          // 直接覆盖变量
+          'blue': '#2CB798',
+        },
+      },
+    },
+  },
 
   devServer: {
     proxy: {