mobile-official/src/layout/user/person.vue

<template>
  <div id="person">
    <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="手机号" label="手机号" placeholder="请输入手机号" disabled />
        <van-field
          v-model="form.cardnumber"
          name="身份证号"
          label="身份证号"
          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> -->
          <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="4">个人</van-radio>
              <van-radio name="5">企业</van-radio>
              <van-radio name="6">专家</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field name="uploader" label="身份证正面" v-if="form.role == '4' || form.role == '5'">
          <template #input
            ><upload
              :limit="1"
              v-if="form.role == '4' || form.role == '5'"
              :data="form.cardfile_a"
              type="cardfile_a"
              :url="'/files/cardfilea/upload'"
              @upload="uploadSuccess"
            ></upload>
          </template>
        </van-field>
        <van-field name="uploader" label="身份证背面" v-if="form.role == '4' || form.role == '5'">
          <template #input
            ><upload
              :limit="1"
              v-if="form.role == '4' || form.role == '5'"
              :data="form.cardfile_b"
              type="cardfile_b"
              :url="'/files/cardfileb/upload'"
              @upload="uploadSuccess"
            ></upload>
          </template>
        </van-field>
        <van-field name="uploader" label="组织机构图片" v-if="form.role == '5'">
          <template #input
            ><upload
              :limit="1"
              v-if="form.role == '4' || form.role == '5'"
              :data="form.img_qy"
              type="img_qy"
              :url="'/files/img_qy/upload'"
              @upload="uploadSuccess"
            ></upload>
          </template>
        </van-field>
        <template v-if="form.role == '4'">
          <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 == '4' || form.role == '5'" name="办公电话" label="办公电话" placeholder="请输入办公电话" />
        <van-field v-model="form.profession" v-if="form.role == '4' || form.role == '5'" 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.academic" 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">
            保存
          </van-button>
        </div>
      </van-form>
    </el-col>
  </div>
</template>

<script>
import upload from '@/components/upload.vue';
export default {
  name: 'person',
  props: {
    form: null,
  },
  components: {
    upload,
  },
  data: () => ({
    // 出生日期
    birthday: '',
    birthdayShow: false,
    // 学历
    xlPicker: false,
    xlList: ['中专及以上', '大专及以上', '本科及以上', '研究生及以上'],
    // 学位
    xwPicker: false,
    xwList: ['学士', '硕士', '博士', '其他'],
  }),
  created() {},
  computed: {},
  methods: {
    // 出生日期
    birthdayPopup() {
      this.birthdayShow = true;
    },
    // 确认选择之后的时间
    birthdayPicker(val) {
      let year = val.getFullYear();
      let month = val.getMonth() + 1;
      let day = val.getDate();
      let birthday = `${year}-${month}-${day}`;
      this.$set(this.form, `birthday`, birthday);
      this.birthdayShow = false;
    },
    // 学历
    onConfirm(xl) {
      this.$set(this.form, `xl`, xl);
      this.xlPicker = false;
    },
    // 学位
    onConfirms(xw) {
      this.$set(this.form, `xw`, xw);
      this.xwPicker = false;
    },
    onSubmit() {
      this.$emit('onSubmit', { data: this.form });
    },
    // 图片上传
    uploadSuccess({ type, data }) {
      console.log(type, data);
      this.$set(this.form, `${type}`, data.uri);
    },
  },
};
</script>

<style lang="less" scoped>
.info {
  margin: 0 0 50px 0;
}
</style>