更新

src/App.vue

@@ -4,4 +4,14 @@
   </div>
 </template>
 
-<style lang="less"></style>
+<style lang="less">
+p {
+  padding: 0;
+  margin: 0;
+}
+.textOver {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>

src/layout/user/person copy.vue

@@ -1,53 +0,0 @@
-<template>
-  <div id="person">
-    <el-col :span="24">
-      321312
-      <!-- <van-form @submit="onSubmit">
-        <van-field v-model="name" name="用户名称" label="用户名称" placeholder="请输入用户名称" :rules="[{ required: true, message: '请输入用户名称' }]" />
-        <van-field v-model="phone" name="手机号" label="手机号" placeholder="请输入手机号" :rules="[{ required: true, message: '请输入手机号' }]" />
-        weqeqweqw
-        <van-field
-          v-model="password"
-          type="password"
-          name="登录密码"
-          label="登录密码"
-          placeholder="请输入密码"
-          :rules="[{ required: true, message: '请输入密码' }]"
-        />
-        <van-field
-          v-model="cardnumber"
-          name="身份证号"
-          label="身份证号"
-          placeholder="请输入身份证号"
-          :rules="[{ required: true, message: '请输入身份证号' }]"
-        />
-        <div style="margin: 16px;">
-          <van-button round block type="info" native-type="submit">
-            提交
-          </van-button>
-        </div>
-      </van-form> -->
-    </el-col>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'person',
-  props: {},
-  components: {},
-  data: () => ({
-    username: '',
-    password: '',
-  }),
-  created() {},
-  computed: {},
-  methods: {
-    onSubmit(values) {
-      console.log('submit', values);
-    },
-  },
-};
-</script>
-
-<style lang="less" scoped></style>

src/layout/user/person.vue

@@ -1,21 +1,13 @@
 <template>
   <div id="person">
-    <el-col :span="24">
+    <el-col :span="24" class="info">
       <van-form @submit="onSubmit">
         <van-field v-model="form.name" name="用户名称" label="用户名称" placeholder="请输入用户名称" :rules="[{ required: true, message: '请输入用户名称' }]" />
-        <van-field
-          v-model="form.phone"
-          name="手机号"
-          :disabled="true"
-          label="手机号"
-          placeholder="请输入手机号"
-          :rules="[{ required: true, message: '请输入手机号' }]"
-        />
+        <van-field v-model="form.phone" name="手机号" label="手机号" placeholder="请输入手机号" :rules="[{ required: true, message: '请输入手机号' }]" />
         <van-field
           v-model="form.password"
           type="password"
           name="登录密码"
-          :disabled="true"
           label="登录密码"
           placeholder="请输入密码"
           :rules="[{ required: true, message: '请输入密码' }]"
@@ -27,13 +19,11 @@
           placeholder="请输入身份证号"
           :rules="[{ required: true, message: '请输入身份证号' }]"
         />
-
         <van-field v-model="form.email" name="邮箱" label="邮箱" placeholder="请输入邮箱" :rules="[{ required: true, message: '请输入邮箱' }]" />
         <van-field v-model="form.addr" name="地址" label="地址" placeholder="请输入地址" :rules="[{ required: true, message: '请输入地址' }]" />
         <van-field name="uploader" label="头像">
           <template #input><upload :limit="1" :data="form.img_path" type="img_path" :url="'/files/imgpath/upload'" @upload="uploadSuccess"></upload> </template>
         </van-field>
-
         <van-field name="radio" label="用户类型">
           <template #input>
             <van-radio-group v-model="form.role" direction="horizontal">
@@ -43,224 +33,89 @@
             </van-radio-group>
           </template>
         </van-field>
-
-        <div class="infos">
-          <van-field name="uploader" label="身份证正面" v-if="form.role == '2' || form.role == '3'">
-            <template #input
-              ><upload
-                :limit="1"
-                v-if="form.role == '2' || form.role == '3'"
-                :data="form.cardfilea"
-                type="cardfilea"
-                :url="'/files/cardfilea/upload'"
-                @upload="uploadSuccess"
-              ></upload>
-            </template>
-          </van-field>
-
-          <van-field name="uploader" label="身份证背面" v-if="form.role == '2' || form.role == '3'">
-            <template #input
-              ><upload
-                :limit="1"
-                v-if="form.role == '2' || form.role == '3'"
-                :data="form.cardfileb"
-                type="cardfileb"
-                :url="'/files/cardfileb/upload'"
-                @upload="uploadSuccess"
-              ></upload>
-            </template>
-          </van-field>
-
-          <van-field name="uploader" label="组织机构图片" v-if="form.role == '2' || form.role == '3'">
-            <template #input
-              ><upload
-                :limit="1"
-                v-if="form.role == '2' || form.role == '3'"
-                :data="form.img_qy"
-                type="img_qy"
-                :url="'/files/img_qy/upload'"
-                @upload="uploadSuccess"
-              ></upload>
-            </template>
-          </van-field>
-
-          <template v-if="form.role == '3'">
-            <van-field
-              v-model="form.institution_type"
-              name="机构类型"
-              label="机构类型"
-              placeholder="请输入机构类型"
-              :rules="[{ required: true, message: '请输入机构类型' }]"
-            />
-            <van-field
-              v-model="form.institution_code"
-              name="机构代码"
-              label="机构代码"
-              placeholder="请输入机构代码"
-              :rules="[{ required: true, message: '请输入机构代码' }]"
-            />
-            <van-field
-              v-model="form.institution_nature"
-              name="机构性质"
-              label="机构性质"
-              placeholder="请输入机构性质"
-              :rules="[{ required: true, message: '请输入机构性质' }]"
-            />
+        <van-field name="uploader" label="身份证正面" v-if="form.role == '2' || form.role == '3'">
+          <template #input
+            ><upload
+              :limit="1"
+              v-if="form.role == '2' || form.role == '3'"
+              :data="form.cardfilea"
+              type="cardfilea"
+              :url="'/files/cardfilea/upload'"
+              @upload="uploadSuccess"
+            ></upload>
           </template>
-
-          <van-field
-            v-model="form.office_phone"
-            v-if="form.role == '2' || form.role == '3'"
-            name="办公电话"
-            label="办公电话"
-            placeholder="请输入办公电话"
-            :rules="[{ required: true, message: '请输入办公电话' }]"
-          />
-
-          <van-field
-            v-model="form.profession"
-            v-if="form.role == '2' || form.role == '3'"
-            name="所属行业"
-            label="所属行业"
-            placeholder="请输入所属行业"
-            :rules="[{ required: true, message: '请输入所属行业' }]"
-          />
-          <van-field name="radio" label="性别" v-if="form.role == '6'">
-            <template #input>
-              <van-radio-group v-model="form.gender" direction="horizontal">
-                <van-radio name="男">男</van-radio>
-                <van-radio name="女">女</van-radio>
-              </van-radio-group>
-            </template>
-          </van-field>
-          <!-- <van-field readonly clickable name="datetimePicker" :value="value" label="时间选择" placeholder="点击选择时间" @click="showPickers = true" />
-        <van-datetime-picker v-model="showPickers" @cancel="showPicker = false" type="date" title="选择年月日" :min-date="minDate" :max-date="maxDate" /> -->
-
-          <van-cell title="日期" is-link :value="timeValue" @click="showPopup" v-if="form.role == '6'" />
-          <van-popup v-model="show" position="bottom">
-            <van-datetime-picker
-              v-model="currentDate"
-              type="datetime"
-              :loading="isLoadingShow"
-              :min-date="minDate"
-              :max-date="maxDate"
-              :formatter="formatter"
-              @cancel="show = false"
-              @confirm="confirmPicker"
-            />
-          </van-popup>
-
-          <van-field
-            v-model="form.level"
-            v-if="form.role == '6'"
-            name="职称级别"
-            label="职称级别"
-            placeholder="请输入职称级别"
-            :rules="[{ required: true, message: '请输入职称级别' }]"
-          />
-          <van-field
-            v-model="form.levelname"
-            v-if="form.role == '6'"
-            name="职称"
-            label="职称"
-            placeholder="请输入职称"
-            :rules="[{ required: true, message: '请输入职称' }]"
-          />
-
-          <van-field
-            v-model="form.position"
-            v-if="form.role == '6'"
-            name="职务"
-            label="职务"
-            placeholder="请输入职务"
-            :rules="[{ required: true, message: '请输入职务' }]"
-          />
-
-          <van-field
-            v-model="form.school"
-            v-if="form.role == '6'"
-            name="院校"
-            label="院校"
-            placeholder="院校"
-            :rules="[{ required: true, message: '请输入院校' }]"
-          />
-
-          <van-field readonly clickable name="picker" :value="value" label="学历" v-if="form.role == '6'" placeholder="请选择学历" @click="showPicker = true" />
-          <van-popup v-model="showPicker" position="bottom">
-            <van-picker show-toolbar :columns="column" @confirm="onConfirm" @cancel="showPicker = false" />
-          </van-popup>
-
-          <van-field
-            readonly
-            clickable
-            name="picker"
-            :value="value"
-            label="学位     "
-            v-if="form.role == '6'"
-            placeholder="请选择学位"
-            @click="showPicker = true"
-          />
-          <van-popup v-model="showPicker" position="bottom">
-            <van-picker show-toolbar :columns="columns" @confirm="onConfirm2" @cancel="showPicker = false" />
-          </van-popup>
-
-          <van-field
-            v-model="form.major"
-            v-if="form.role == '6'"
-            name="专业"
-            label="专业"
-            placeholder="请输入专业"
-            :rules="[{ required: true, message: '请输入专业' }]"
-          />
-
-          <van-field
-            v-model="form.major"
-            v-if="form.role == '6'"
-            name="从事专业"
-            label="从事专业 "
-            placeholder="请输入从事专业"
-            :rules="[{ required: true, message: '请输入专业' }]"
-          />
-
-          <van-field
-            v-model="form.resume"
-            autosize
-            label="个人简历"
-            v-if="form.role == '2' || form.role == '6'"
-            type="textarea"
-            placeholder="请输入个人简历"
-            show-word-limit
-          />
-
-          <van-field
-            v-model="form.project"
-            v-if="form.role == '6'"
-            name="项目"
-            label="项目 "
-            placeholder="请输入项目"
-            :rules="[{ required: true, message: '请输入项目' }]"
-          />
-
-          <van-field
-            v-model="form.project"
-            v-if="form.role == '6'"
-            name="学术成就"
-            label="学术成就 "
-            placeholder="请输入学术成就"
-            :rules="[{ required: true, message: '请输入学术成就' }]"
-          />
-
-          <van-field
-            v-model="form.paper"
-            v-if="form.role == '6'"
-            name="论文"
-            label="论文 "
-            placeholder="请输入论文"
-            :rules="[{ required: true, message: '请输入论文' }]"
-          />
-
-          <van-field v-model="form.remark" autosize label="备注" v-if="form.role == '6'" type="textarea" placeholder="请输入备注" show-word-limit />
-        </div>
+        </van-field>
+        <van-field name="uploader" label="身份证背面" v-if="form.role == '2' || form.role == '3'">
+          <template #input
+            ><upload
+              :limit="1"
+              v-if="form.role == '2' || form.role == '3'"
+              :data="form.cardfileb"
+              type="cardfileb"
+              :url="'/files/cardfileb/upload'"
+              @upload="uploadSuccess"
+            ></upload>
+          </template>
+        </van-field>
+        <van-field name="uploader" label="组织机构图片" v-if="form.role == '2' || form.role == '3'">
+          <template #input
+            ><upload
+              :limit="1"
+              v-if="form.role == '2' || form.role == '3'"
+              :data="form.img_qy"
+              type="img_qy"
+              :url="'/files/img_qy/upload'"
+              @upload="uploadSuccess"
+            ></upload>
+          </template>
+        </van-field>
+        <template v-if="form.role == '3'">
+          <van-field v-model="form.institution_type" name="机构类型" label="机构类型" placeholder="请输入机构类型" />
+          <van-field v-model="form.institution_name" name="机构名称" label="机构类型" placeholder="请输入机构名称" />
+          <van-field v-model="form.institution_code" name="机构代码" label="机构代码" placeholder="请输入机构代码" />
+          <van-field v-model="form.institution_nature" name="机构性质" label="机构性质" placeholder="请输入机构性质" />
+        </template>
+        <van-field v-model="form.office_phone" v-if="form.role == '2' || form.role == '3'" name="办公电话" label="办公电话" placeholder="请输入办公电话" />
+        <van-field v-model="form.profession" v-if="form.role == '2' || form.role == '3'" name="所属行业" label="所属行业" placeholder="请输入所属行业" />
+        <van-field name="radio" label="性别" v-if="form.role == '6'">
+          <template #input>
+            <van-radio-group v-model="form.gender" direction="horizontal">
+              <van-radio name="男">男</van-radio>
+              <van-radio name="女">女</van-radio>
+            </van-radio-group>
+          </template>
+        </van-field>
+        <van-cell title="日期" is-link :value="form.birthday" @click="birthdayPopup" v-if="form.role == '6'" />
+        <van-popup v-model="birthdayShow" position="bottom">
+          <van-datetime-picker type="date" @cancel="birthdayShow = false" @confirm="birthdayPicker" />
+        </van-popup>
+        <van-field v-model="form.level" v-if="form.role == '6'" name="职称级别" label="职称级别" placeholder="请输入职称级别" />
+        <van-field v-model="form.levelname" v-if="form.role == '6'" name="职称" label="职称" placeholder="请输入职称" />
+        <van-field v-model="form.position" v-if="form.role == '6'" name="职务" label="职务" placeholder="请输入职务" />
+        <van-field v-model="form.school" v-if="form.role == '6'" name="院校" label="院校" placeholder="院校" />
+        <van-field readonly clickable name="picker" :value="form.xl" label="学历" v-if="form.role == '6'" placeholder="请选择学历" @click="xlPicker = true" />
+        <van-popup v-model="xlPicker" position="bottom">
+          <van-picker show-toolbar :columns="xlList" @confirm="onConfirm" @cancel="xlPicker = false" />
+        </van-popup>
+        <van-field readonly clickable name="picker" :value="form.xw" label="学位" v-if="form.role == '6'" placeholder="请选择学位" @click="xwPicker = true" />
+        <van-popup v-model="xwPicker" position="bottom">
+          <van-picker show-toolbar :columns="xwList" @confirm="onConfirms" @cancel="xwPicker = false" />
+        </van-popup>
+        <van-field v-model="form.major" v-if="form.role == '6'" name="专业" label="专业" placeholder="请输入专业" />
+        <van-field v-model="form.professional" v-if="form.role == '6'" name="从事专业" label="从事专业 " placeholder="请输入从事专业" />
+        <van-field
+          v-model="form.resume"
+          autosize
+          label="个人简历"
+          v-if="form.role == '2' || form.role == '6'"
+          type="textarea"
+          placeholder="请输入个人简历"
+          show-word-limit
+        />
+        <van-field v-model="form.project" v-if="form.role == '6'" name="项目" label="项目 " placeholder="请输入项目" />
+        <van-field v-model="form.project" v-if="form.role == '6'" name="学术成就" label="学术成就 " placeholder="请输入学术成就" />
+        <van-field v-model="form.paper" v-if="form.role == '6'" name="论文" label="论文 " placeholder="请输入论文" />
+        <van-field v-model="form.remark" autosize label="备注" v-if="form.role == '6'" type="textarea" placeholder="请输入备注" show-word-limit />
         <div style="margin: 16px;">
           <van-button round block type="info" native-type="submit">
             提交
@@ -280,150 +135,64 @@ export default {
     upload,
   },
   data: () => ({
-    timeValue: '',
-    show: false,
-    isLoadingShow: true,
-    currentDate: new Date(),
-    minDate: new Date(),
-    maxDate: new Date(2020, 12, 31),
-
-    value: '',
-    columns: ['中专及以上', '大专及以上', '本科及以上', '研究生及以上'],
-    column: ['学士', '博士', '其他'],
-    showPicker: false,
-    end_time: '',
-    minDate: new Date(2020, 0, 1),
-    maxDate: new Date(2025, 10, 1),
-    currentDate: new Date(),
-    imageData: [], // 准备保存的图片列表
-    countIndex: 1,
-    username: '',
-    password: '',
     form: {
+      birthday: '',
+      xl: '',
+      xw: '',
       img_path: require('@/assets/logo.png'),
       cardfilea: require('@/assets/logo.png'),
       cardfileb: require('@/assets/logo.png'),
       img_qy: require('@/assets/logo.png'),
     },
+    // 出生日期
+    birthday: '',
+    birthdayShow: false,
+    // 学历
+    xlPicker: false,
+    xlList: ['中专及以上', '大专及以上', '本科及以上', '研究生及以上'],
+    // 学位
+    xwPicker: false,
+    xwList: ['学士', '硕士', '博士', '其他'],
   }),
-  created() {
-    this.getTime();
-  },
+  created() {},
   computed: {},
   methods: {
-    uploadSuccess({ type, data }) {
-      console.log(type, data);
-      // if (type !== 'img_path') {
-      //   let arr = _.get(this.uploads, type);
-      //   if (arr !== undefined) {
-      //     this.uploads[type].push({ name: data.name, uri: data.uri });
-      //   } else {
-      //     let newArr = [{ name: data.name, uri: data.uri }];
-      //     this.$set(this.uploads, `${type}`, newArr);
-      //   }
-      // } else {
-      //   this.picLoading = false;
-      //   this.$set(this.info, `${type}`, data.uri);
-      //   this.$nextTick(() => {
-      //     this.picLoading = true;
-      //   });
-      // }
-    },
-
-    showPopup() {
-      this.show = true;
-      this.isLoadingShow = true;
-      setTimeout(() => {
-        this.isLoadingShow = false;
-      }, 500);
+    // 出生日期
+    birthdayPopup() {
+      this.birthdayShow = true;
     },
     // 确认选择之后的时间
-    confirmPicker(val) {
+    birthdayPicker(val) {
       let year = val.getFullYear();
       let month = val.getMonth() + 1;
       let day = val.getDate();
-      let hour = val.getHours();
-      let minute = val.getMinutes();
-      // let second = val.getSeconds()
-      if (month >= 1 && month <= 9) {
-        month = `0${month}`;
-      }
-      if (day >= 1 && day <= 9) {
-        day = `0${day}`;
-      }
-      if (hour >= 0 && hour <= 9) {
-        hour = `0${hour}`;
-      }
-      if (minute >= 0 && minute <= 9) {
-        minute = `0${minute}`;
-      }
-      // if (second >= 0 && second <= 9) { second = `0${second}` }
-      this.timeValue = `${year}-${month}-${day} ${hour}:${minute}:00`;
-      console.log(this.timeValue);
-      this.show = false;
-    },
-    // 默认显示当前时间
-    getTime() {
-      let date = new Date();
-      let y = date.getFullYear();
-      let m = date.getMonth() + 1;
-      let d = date.getDate();
-      let h = date.getHours();
-      let min = date.getMinutes();
-      // let s = date.getSeconds()
-      if (m >= 1 && m <= 9) {
-        m = `0${m}`;
-      }
-      if (d >= 1 && d <= 9) {
-        d = `0${d}`;
-      }
-      if (h >= 0 && h <= 9) {
-        h = `0${h}`;
-      }
-      if (min >= 0 && min <= 9) {
-        min = `0${min}`;
-      }
-      // if (s >= 0 && s <= 9) { min = `0${s}` }
-      let time = `${y}-${m}-${d} ${h}:${min}:00`;
-      this.timeValue = time;
+      let birthday = `${year}-${month}-${day}`;
+      this.$set(this.form, `birthday`, birthday);
+      this.birthdayShow = false;
     },
-    // 日期选项格式化函数
-    formatter(type, value) {
-      if (type === 'year') {
-        return `${value}年`;
-      } else if (type === 'month') {
-        return `${value}月`;
-      } else if (type === 'day') {
-        return `${value}日`;
-      } else if (type === 'hour') {
-        return `${value}时`;
-      } else if (type === 'minute') {
-        return `${value}分`;
-      } else if (type === 'second') {
-        return `${value}秒`;
-      }
-      return value;
+    // 学历
+    onConfirm(xl) {
+      this.$set(this.form, `xl`, xl);
+      this.xlPicker = false;
     },
-
-    onConfirm(value) {
-      this.value = value;
-      this.showPicker = false;
+    // 学位
+    onConfirms(xw) {
+      this.$set(this.form, `xw`, xw);
+      this.xwPicker = false;
     },
-
-    onConfirm2(value) {
-      this.value = value;
-      this.showPicker = false;
-    },
-
-    onSubmit(form) {
+    onSubmit() {
       console.log(this.form);
     },
+    // 图片上传
+    uploadSuccess({ type, data }) {
+      // this.$set(this.form, `${type}`, data.uri);
+    },
   },
 };
 </script>
 
 <style lang="less" scoped>
-.infos {
-  margin: 20px 0 0 0;
+.info {
+  margin: 0 0 50px 0;
 }
 </style>

src/layout/user/userMess.vue

@@ -0,0 +1,61 @@
+<template>
+  <div id="userMess">
+    <el-row>
+      <el-col :span="24" class="info">
+        <el-col :span="4" class="left">
+          <el-image :src="userMessInfo.pic"></el-image>
+        </el-col>
+        <el-col :span="20" class="right">
+          <p>{{ userMessInfo.name }}</p>
+          <p>用户身份：{{ userMessInfo.type }}</p>
+          <p>手机号{{ userMessInfo.phone }}</p>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'userMess',
+  props: {
+    userMessInfo: null,
+  },
+  components: {},
+  data: function() {
+    return {};
+  },
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.info {
+  padding: 15px;
+  .left {
+    border: 1px solid #ccc;
+    border-radius: 90px;
+    .el-image {
+      border-radius: 90px;
+    }
+  }
+  .right {
+    padding: 0 15px 5px 15px;
+    p:first-child {
+      font-size: 18px;
+      font-weight: bold;
+    }
+  }
+}
+</style>

src/router/index.js

@@ -4,27 +4,34 @@ import VueRouter from 'vue-router';
 Vue.use(VueRouter);
 
 const routes = [
-  // 首頁-直播大厅
+  // 直播大厅
   {
     path: '/',
     name: '',
     meta: { title: '直播大厅', isleftarrow: false },
     component: () => import('../views/index.vue'),
   },
-  // 首頁-科技超市
+  // 科技超市
   {
     path: '/market/index',
     name: '',
     meta: { title: '科技超市', isleftarrow: true },
     component: () => import('../views/market/index.vue'),
   },
-  // 首頁-个人中心
+  // 个人中心
   {
     path: '/user/index',
-    name: '',
+    name: 'user_index',
     meta: { title: '个人中心', isleftarrow: true },
     component: () => import('../views/user/index.vue'),
   },
+  // 个人中心-个人信息维护
+  {
+    path: '/user/personal',
+    name: 'user_personal',
+    meta: { title: '个人信息维护', isleftarrow: true },
+    component: () => import('../views/user/personal.vue'),
+  },
 ];
 
 const router = new VueRouter({

src/views/user/index.vue

@@ -6,7 +6,12 @@
           <NavBar v-show="navShow" :title="title" :isleftarrow="isleftarrow"> </NavBar>
         </el-col>
         <el-col :span="24" class="main">
-          <person></person>
+          <el-col :span="24" class="one">
+            <userMess :userMessInfo="userMessInfo"></userMess>
+          </el-col>
+          <el-col :span="24" class="two">
+            <clickBtn></clickBtn>
+          </el-col>
         </el-col>
         <el-col :span="24" class="foot">
           <footInfo></footInfo>
@@ -19,15 +24,16 @@
 <script>
 import NavBar from '@/layout/common/topInfo.vue';
 import footInfo from '@/layout/common/footInfo.vue';
-import person from '@/layout/user/person.vue';
-
+import userMess from '@/layout/user/userMess.vue';
+import clickBtn from './parts/clickBtn.vue';
 export default {
   name: 'index',
   props: {},
   components: {
-    NavBar,
-    footInfo,
-    person,
+    NavBar, //头部
+    footInfo, //底部菜单
+    userMess, // 头部信息
+    clickBtn, //功能按钮
   },
   data: () => ({
     // 头部标题
@@ -36,12 +42,13 @@ export default {
     isleftarrow: '',
     // 返回
     navShow: true,
-
-    tel: '',
-    text: '',
-    digit: '',
-    number: '',
-    password: '',
+    // 用户信息
+    userMessInfo: {
+      pic: require('@/assets/logo.png'),
+      name: '顾红伟',
+      type: '个人',
+      phone: '17319450324',
+    },
   }),
   created() {},
   computed: {},

src/views/user/parts/clickBtn.vue

@@ -0,0 +1,42 @@
+<template>
+  <div id="clickBtn">
+    <el-row>
+      <el-col :span="24">
+        <el-col :span="24" class="native">
+          <van-cell is-link @click="$router.push({ path: '/user/personal' })">个人信息</van-cell>
+          <!-- <van-cell is-link @click="$router.push({ path: '/user/teaLeave' })">请假&退出管理</van-cell> -->
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers, mapGetters } from 'vuex';
+export default {
+  name: 'clickBtn',
+  props: {},
+  components: {},
+  data: () => ({}),
+  created() {},
+  computed: {
+    ...mapState(['user']),
+  },
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+.native {
+  height: 50px;
+  background-color: #fff;
+  margin: 0 0 5px 0;
+}
+/deep/.van-cell {
+  line-height: 30px;
+}
+/deep/.van-cell__right-icon {
+  height: 30px;
+  line-height: 30px;
+}
+</style>

src/views/user/personal.vue

@@ -0,0 +1,67 @@
+<template>
+  <div id="personal">
+    <el-row>
+      <el-col :span="24" class="style">
+        <el-col :span="24" class="top">
+          <NavBar v-show="navShow" :title="title" :isleftarrow="isleftarrow"> </NavBar>
+        </el-col>
+        <el-col :span="24" class="main">
+          <person></person>
+        </el-col>
+        <el-col :span="24" class="foot">
+          <footInfo></footInfo>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import NavBar from '@/layout/common/topInfo.vue';
+import footInfo from '@/layout/common/footInfo.vue';
+import person from '@/layout/user/person.vue';
+export default {
+  name: 'personal',
+  props: {},
+  components: {
+    NavBar,
+    footInfo,
+    person, //个人信息维护
+  },
+  data: () => ({
+    // 头部标题
+    title: '',
+    // meta为true
+    isleftarrow: '',
+    // 返回
+    navShow: true,
+  }),
+  created() {},
+  computed: {},
+  methods: {},
+  mounted() {
+    this.title = this.$route.meta.title;
+    this.isleftarrow = this.$route.meta.isleftarrow;
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.style {
+  width: 100%;
+  min-height: 667px;
+  position: relative;
+  background-color: #f9fafc;
+}
+.top {
+  height: 46px;
+  overflow: hidden;
+}
+.main {
+  min-height: 570px;
+}
+.foot {
+  position: absolute;
+  bottom: 0;
+}
+</style>