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

<template>
  <view class="register-bg">
    <view class="bg-container">
      参会报名
    </view>
    <auth-wrap class="register-container" ref="authWrap">
      <view class="form-content" slot="content">
        <u--form
            labelPosition="left"
            :model="model1"
            :rules="rules"
            ref="uForm"
            @submit="onSubmit"
        >
          <u-form-item
              label="姓名"
              prop="userInfo.usrName"
              borderBottom
          >
            <u--input
                placeholder="输入姓名"
                v-model="model1.userInfo.usrName"
                border="none"
            ></u--input>
          </u-form-item>
          <u-form-item
              label="单位名称"
              prop="userInfo.orgUnitName"
              borderBottom
          >
            <u--input
                placeholder="输入单位名称"
                v-model="model1.userInfo.orgUnitName"
                border="none"
            ></u--input>
          </u-form-item>
          <u-form-item
              label="职务"
              prop="userInfo.uniLevel"
              borderBottom
          >
            <u--input
                placeholder="输入职务"
                v-model="model1.userInfo.uniLevel"
                border="none"
            ></u--input>
          </u-form-item>
          <u-form-item
              label="联系电话"
              prop="userInfo.tel"
              borderBottom
          >
            <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"
                type="number"
                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 usrTypeList"
                  :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>
    </auth-wrap>
  </view>
</template>

<script>

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

export default {
  name: 'login',
  components: {
    AuthWrap,
    SingleDropList,
  },
  props: {},
  data() {
    return {
      ICON_CFG,
      showEnterprise: false,
      loading: false,
      model1: {
        userInfo: {
          usrName: '',
          conferenceFlag: 'N',
        },
      },
      usrTypeList: [
        {
          value: '1',
          name: '大会代表',
        },
        {
          value: '2',
          name: '随行人员',
        },
      ],
      conferenceHall: [],
      tripList: [],
      rules: {
        'userInfo.usrName': {
          type: 'string',
          required: true,
          message: '请填写姓名',
          trigger: ['blur', 'change'],
        },
        'userInfo.tel': {
          type: 'string',
          len: 11,
          required: true,
          message: '请填写11位手机号',
          trigger: ['blur', 'change'],
        },
        'userInfo.email': {
          type: 'string',
          required: true,
          message: '请填写邮箱',
          pattern: /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/,
          trigger: ['blur', 'change'],
        },
        'userInfo.orgUnitName': {
          type: 'string',
          required: true,
          message: '请填写单位名称',
          trigger: ['blur', 'change'],
        },
        'userInfo.uniLevel': {
          type: 'string',
          required: true,
          message: '请填写职务',
          trigger: ['blur', 'change'],
        },
        'userInfo.usrType': {
          type: 'string',
          required: true,
          message: '请填写人员类型',
          trigger: ['blur', 'change'],
        },
        'userInfo.contentId': {
          type: 'string',
          required: true,
          message: '请选择会场',
          trigger: ['blur', 'change'],
        },
      },
    };
  },
  created() {
  },
  onLoad() {
    //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
    this.$refs.uForm.setRules(this.rules);
    this.$refs.authWrap.reloadPage();
    const user = getUserInfo();
    if (user) {
      this.model1.userInfo.usrName = user.usrName;
      this.model1.userInfo.tel = user.tel;
    }
    this.init();
  },
  onReady() {
    //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
    this.$refs.uForm.setRules(this.rules);
  },
  methods: {
    getImageUrl,
    conferenceSelect(item) {
      this.model1.userInfo.contentId = item.value;
      this.$refs.uForm.validateField('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,
        };
      });
    },
    onSubmit() {
      this.loading = true;
      this.$refs.uForm.validate().then(async (res) => {
        const { code } = await putUsrRegist(this.model1.userInfo);
        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" />;