traffic-eff-app/pasb/pages/regist/RegistForm.vue

<template>
  <view>
    <u--form
        labelPosition="left"
        :model="model1"
        :rules="rules"
        ref="uForm"
        @submit="onSubmit"
    >
      <u-form-item
          label="姓名"
          prop="userInfo.usrName"
          borderBottom
          :class="{
                'require': rules['userInfo.usrName'].required
              }"
      >
        <u--input
            placeholder="输入姓名"
            v-model="model1.userInfo.usrName"
            border="none"
        ></u--input>
      </u-form-item>
      <u-form-item
          label="单位名称"
          prop="userInfo.orgUnitName"
          borderBottom
          class="require"
      >
        <u--input
            placeholder="输入单位名称"
            v-model="model1.userInfo.orgUnitName"
            border="none"
        ></u--input>
      </u-form-item>
      <u-form-item
          label="职务"
          prop="userInfo.uniLevel"
          borderBottom
          class="require"
      >
        <u--input
            placeholder="输入职务"
            v-model="model1.userInfo.uniLevel"
            border="none"
        ></u--input>
      </u-form-item>
      <u-form-item
          label="联系电话"
          prop="userInfo.tel"
          borderBottom
          class="require"
      >
        <u--input
            placeholder="输入联系电话"
            border="none"
            type="number"
            maxlength="11"
            v-model="model1.userInfo.tel"
        ></u--input>
      </u-form-item>
      <u-form-item
          label="邮箱"
          prop="userInfo.email"
          borderBottom
      >
        <u--input
            placeholder="输入邮箱"
            border="none"
            v-model="model1.userInfo.email"
        ></u--input>
      </u-form-item>
      <u-form-item
          label="人员类型"
          prop="userInfo.usrType"
          borderBottom
      >
        <u-radio-group
            v-model="model1.userInfo.usrType"
            placement="row"
        >
          <u-radio
              :style="{
                  marginRight: '20rpx'
                }"
              v-for="(item, index) in USR_TYPE_LIST"
              :key="index"
              :label="item.name"
              :name="item.value"
          >
          </u-radio>
        </u-radio-group>
      </u-form-item>
      <u-form-item
          label="是否参加现场调研"
          prop="userInfo.conferenceFlag"
          borderBottom
      >
        <u-radio-group
            v-model="model1.userInfo.conferenceFlag"
            placement="row"
        >
          <u-radio
              :style="{
                  marginRight: '20rpx'
                }"
              label="是"
              name="0"
          >
          </u-radio>
          <u-radio
              :style="{
                  marginRight: '20rpx'
                }"
              label="否"
              name="1"
          >
          </u-radio>
        </u-radio-group>
      </u-form-item>
      <u-form-item
          label="调研会场"
          prop="userInfo.contentId"
          borderBottom
          v-if="model1.userInfo.conferenceFlag === '0'"
      >
        <SingleDropList
            :style="{
                marginLeft: '20rpx'
              }"
            :defaultValue="model1.userInfo.contentId"
            :src="conferenceHall"
            placeholder="请选择会场"
            @onChange="conferenceSelect"
        >
        </SingleDropList>
      </u-form-item>
    </u--form>
    <u-button
        :style="{
             marginTop: '120rpx'
            }"
        type="primary"
        text="提交"
        :disabled="loading"
        :loading="loading"
        loadingText="正在提交..."
        @click="onSubmit"
    >
    </u-button>
  </view>
</template>

<script>

import { fetchContentInfo, fetchUsrInfo, getDicts, putUsrRegist } from '@/common/api';
import { CONTENT_TYPE, MEETING_TYPE, USR_TYPE_LIST } from '@/common/EnumConst';
import SingleDropList from '@/components/SingleDropList/index.vue';
import { getImageUrl, getUserInfo, setUserInfo } from '@/util';

export default {
  components: {
    SingleDropList,
  },
  props: {
    rules: {},
  },
  data() {
    return {
      USR_TYPE_LIST,
      loading: false,
      model1: {
        userInfo: {
          usrName: '',
          conferenceFlag: '1',
        },
      },
      conferenceHall: [],
    };
  },
  created() {

  },
  onLoad() {

  },
  onReady() {
    this.setFormRules();
  },

  methods: {
    setFormRules() {
      const user = getUserInfo();
      if (user) {
        this.model1.userInfo.usrName = user.usrName;
        this.model1.userInfo.tel = user.tel;
      }
      this.init();
      //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
      this.$refs.uForm.setRules(this.rules);
    },
    getImageUrl,
    conferenceSelect(item) {
      this.model1.userInfo.contentId = item.value;
      this.$refs.uForm.clearValidate('userInfo.contentId');
    },
    async init() {
      const {
        code: conferenceCode,
        rows: conferenceData,
      } = await fetchContentInfo({
        pageNum: 1,
        pageSize: 99,
        contentType: CONTENT_TYPE.conference,
        title: this.keyword,
      });
      this.conferenceHall = conferenceData.map(item => {
        return {
          name: item.title,
          value: item.id,
        };
      });
      const { msg } = await getDicts('tfc_type');
    },
    onSubmit() {
      this.loading = true;
      this.$refs.uForm.validate().then(async (res) => {
        const { code } = await putUsrRegist(this.model1.userInfo, MEETING_TYPE.meeting.value);
        this.loading = false;
        if (code !== 200) {
          return;
        }
        uni.showToast({
          mask: true,
          title: '报名完成',
          icon: 'success',
          success: async () => {
            const user = getUserInfo();
            const newUsr = await fetchUsrInfo(user.id);
            if (newUsr.code === 200) {
              setUserInfo(newUsr.data);
            }
            uni.navigateBack({
              delta: 1,
            });
          },
        });
      }).catch(errors => {
        this.loading = false;
      });
    },
    hideKeyboard() {
      uni.hideKeyboard();
    },
  },
};
</script>
<style lang="scss" src="./index.scss" />;