更新、

src/layout/user/person.vue

@@ -22,33 +22,237 @@
 
         <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-uploader :after-read="onRead" accept="image/*"> -->
-        <van-radio-group v-model="form.role" direction="horizontal">
-          <van-radio name="1">个人</van-radio>
-          <van-radio name="2">企业</van-radio>
-          <van-radio name="3">专家</van-radio>
-        </van-radio-group>
-
-        <template v-if="forms.role == '3'">
+        <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">
+              <van-radio name="2">个人</van-radio>
+              <van-radio name="3">企业</van-radio>
+              <van-radio name="6">专家</van-radio>
+            </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: '请输入机构性质' }]"
+            />
+          </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.institution_type"
-            name="机构类型"
-            label="机构类型"
-            placeholder="请输入机构类型"
-            :rules="[{ required: true, message: '请输入机构类型' }]"
+            v-model="form.resume"
+            autosize
+            label="个人简历"
+            v-if="form.role == '2' || form.role == '6'"
+            type="textarea"
+            placeholder="请输入个人简历"
+            show-word-limit
           />
 
-          <el-form-item label="机构名称" prop="institution_name">
-            <el-input v-model="forms.institution_name" placeholder="请输入机构名称"></el-input>
-          </el-form-item>
-          <el-form-item label="机构代码" prop="institution_code">
-            <el-input v-model="forms.institution_code" placeholder="请输入机构代码"></el-input>
-          </el-form-item>
-          <el-form-item label="机构性质" prop="institution_nature">
-            <el-input v-model="forms.institution_nature" placeholder="请输入机构性质"></el-input>
-          </el-form-item>
-        </template>
+          <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>
         <div style="margin: 16px;">
           <van-button round block type="info" native-type="submit">
             提交
@@ -60,20 +264,149 @@
 </template>
 
 <script>
+import upload from '@/components/upload.vue';
 export default {
   name: 'person',
   props: {},
-  components: {},
+  components: {
+    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: {},
+    form: {
+      img_path: require('@/assets/logo.png'),
+      cardfilea: require('@/assets/logo.png'),
+      cardfileb: require('@/assets/logo.png'),
+      img_qy: require('@/assets/logo.png'),
+    },
   }),
-  created() {},
+  created() {
+    this.getTime();
+  },
   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);
+    },
+    // 确认选择之后的时间
+    confirmPicker(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;
+    },
+    // 日期选项格式化函数
+    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(value) {
+      this.value = value;
+      this.showPicker = false;
+    },
+
+    onConfirm2(value) {
+      this.value = value;
+      this.showPicker = false;
+    },
+
     onSubmit(form) {
       console.log(this.form);
     },
@@ -81,4 +414,8 @@ export default {
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.infos {
+  margin: 20px 0 0 0;
+}
+</style>

src/views/user/index.vue

@@ -66,9 +66,10 @@ export default {
 }
 .main {
   padding: 20px 0 0 0;
-  min-height: 570px;
+  min-height: 300px;
 }
 .foot {
+  margin-top: 50px;
   position: absolute;
   bottom: 0;
 }