zc_saas_h5/pages2/verify/info_fill.vue

<template>
  <view>
    <nav-bar title="填写资料"></nav-bar>
    <view style="margin-top: 30rpx; padding: 0 40rpx">
      <u-form :model="form" ref="uForm" :error-type="errorType">
        <template v-for="(item, index) in listData">
          <u-form-item
            :key="index"
            v-if="item.type === 'input'"
            :label="item.label"
            :required="item.required"
            :label-width="auto"
            :prop="item.required ? item.prop : ''"
          >
            <u-input
              v-model="form[item.key]"
              :disabled="item.disabled"
              :placeholder="`请输入${item.label}`"
            />
          </u-form-item>
          <u-form-item
            :key="index"
            v-else-if="item.type === 'radio'"
            :label="item.label"
            :required="item.required"
            :label-width="auto"
            :prop="item.required ? item.prop : ''"
          >
            <u-radio-group v-model="form[item.key]">
              <u-radio
                v-for="(item1, i) in backDictArr(item)"
                :key="i"
                :name="item1.value"
                :disabled="item.disabled"
              >
                {{ item1.label }}
              </u-radio>
            </u-radio-group>
          </u-form-item>
          <u-form-item
            :key="index"
            v-else-if="item.type === 'select'"
            :label="item.label"
            :required="item.required"
            :label-width="auto"
            :prop="item.required ? item.prop : ''"
          >
            <u-input
              @click="open(item)"
              v-model="form[item.key]"
              type="select"
              :placeholder="`请选择${item.label}`"
            />
            <u-select
              v-model="item.show"
              :list="backDictArr(item)"
              :default-value="defaultValue"
              @confirm="
                (e) => {
                  confirm(e, item.key);
                }
              "
            ></u-select>
          </u-form-item>
        </template>
      </u-form>
    </view>
    <view @click="submitForm" class="submit_btn">提交资料</view>
  </view>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
const list = [
  {
    key: "realname",
    type: "input",
    label: "姓名",
    required: true,
    prop: "realname",
  },
  {
    key: "idCard",
    type: "input",
    label: "身份证号",
    required: true,
    prop: "idCard",
  },
  {
    key: "companyName",
    type: "input",
    label: "工作单位",
    required: true,
    prop: "companyName",
  },
  {
    key: "sex",
    type: "radio",
    label: "性别",
    required: true,
    list: [
      { label: "男", value: 1 },
      { label: "女", value: 2 },
    ],
    prop: "sex",
  },
  {
    key: "eduLevel",
    type: "select",
    label: "学历",
    dictKey: "edu_level",
    show: false,
    required: true,
    prop: "eduLevel",
  },
];
export default {
  name: "SaasMiniprogramInfoFill",

  data() {
    return {
      listData: [],
      form: {},
      options: {},
      errorType: ["message"],
      auto: "180rpx",
      defaultValue: [0],
      isUploading: false,
      rules: {
        realname: [
          {
            required: true,
            message: "请输入姓名",
            trigger: ["change", "blur"],
          },
        ],
        sex: [
          {
            validator: (rule, value, callback) => {
              return !!value;
            },
            message: "请选择性别",
            trigger: "change",
          },
        ],
        idCard: [
          {
            required: true,
            message: "请输入身份证号",
            trigger: ["change", "blur"],
          },
        ],
        eduLevel: [
          {
            required: true,
            message: "请选择学历",
            trigger: ["change", "blur"],
          },
        ],
        companyName: [
          {
            required: true,
            message: "请输入工作单位",
            trigger: ["change", "blur"],
          },
        ],
      },
    };
  },

  async onLoad(options) {
    this.options = options;
    !this.userInfo && (await this.getUserInfo());
    this.init();
  },

  methods: {
    ...mapActions(["getUserInfo"]),
    init() {
      let { keys } = this.options;
      if (!keys) {
        return;
      }
      keys.split(",").forEach((key) => {
        let item = list.find((item) => item.key == key);
        if (item) {
          const value = this.userInfo[key];
          this.$set(this.form, key, value);
          this.listData.push({ ...item, disabled: !!value });
        }
      });
    },
    backDictArr(item) {
      let { dictKey, list } = item;
      if (dictKey) {
        if (!this.dictObj) {
          return [];
        }
        list = this.dictObj[dictKey].map((e, i) => {
          return { label: e, value: i };
        });
        item.list = list;
      }
      return list;
    },
    open(item) {
      if (item.disabled) {
        return;
      }
      let { key, list } = item;
      const option = list.find((e) => e.label === this.form[key]);
      this.defaultValue = [option ? option.value : 0];
      item.show = true;
    },
    confirm(e, key) {
      this.form[key] = e[0].label;
    },
    submitForm() {
      if (this.isUploading) {
        return;
      }
      this.isUploading = true;
      this.$nextTick(() => {
        this.$refs.uForm.validate((valid) => {
          if (valid) {
            this.$api
              .appuserInfo(this.form)
              .then((res) => {
                if (res.data.code === 200) {
                  uni.showToast({
                    title: "提交成功",
                    icon: "none",
                  });
                  this.getUserInfo();
                  setTimeout(() => {
                    uni.navigateBack();
                  }, 1500);
                } else {
                  uni.showToast({
                    title: res.data.msg,
                    icon: "none",
                  });
                }
              })
              .finally(() => {
                this.isUploading = false;
              });
          } else {
            this.isUploading = false;
            console.log(this.form);
            console.log("验证失败");
          }
        });
      });
    },
  },
  computed: {
    ...mapGetters(["userInfo", "dictObj"]),
  },
  onReady(res) {
    this.$refs.uForm.setRules(this.rules);
  },
};
</script>

<style lang="scss" scoped>
.submit_btn {
  width: 526rpx;
  height: 80rpx;
  background: #007aff;
  border-radius: 40rpx;
  text-align: center;
  line-height: 80rpx;
  color: #ffffff;
  position: absolute;
  left: 50%;
  margin-left: -263rpx;
  bottom: 140rpx;
}
</style>