saas_miniprogram/components/popup/technician.vue

<!-- <template>
	<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";
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> -->