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"
        >
          <u-form-item
              prop="userInfo.name"
              borderBottom
              ref="item1"
          >
            <u--input
                prefixIcon="account"
                v-model="model1.userInfo.name"
                border="none"
            ></u--input>
          </u-form-item>
          <u-form-item
              prop="userInfo.tel"
              borderBottom
              ref="item1"
          >
            <u--input
                prefixIcon="phone"
                placeholder="输入手机号"
                border="none"
                v-model="model1.userInfo.tel"
            ></u--input>
          </u-form-item>

          <u-form-item
              label="性别"
              prop="userInfo.sex"
              borderBottom
          >
            <u-radio-group
                v-model="model1.userInfo.sex"
                placement="row"
            >
              <u-radio
                  :style="{
                  marginRight: '20rpx'
                }"
                  v-for="(item, index) in sexList"
                  :key="index"
                  :label="item.name"
                  :name="item.value"
              >
              </u-radio>
            </u-radio-group>
          </u-form-item>
          <u-form-item
              label="参会企业"
              prop="userInfo.enterpriseId"
              borderBottom
              ref="item1"
          >
            <SingleDropList
                :style="{
                marginLeft: '20rpx'
              }"
                defaultValue="1"
                :src="sexList"
                placeholder="请选择参会企业"
                :on-change="enterpriseSelect"
            >
            </SingleDropList>
          </u-form-item>
          <u-form-item
              label="参会行程"
              prop="userInfo.tripId"
              borderBottom
              ref="item1"
          >
            <SingleDropList
                :style="{
                marginLeft: '20rpx'
              }"
                defaultValue="1"
                :src="sexList"
                placeholder="请选择参会行程"
                :on-change="enterpriseSelect"
            >
            </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 { putUsrRegist } from '@/common/api';
import { ICON_CFG } from '@/common/EnumConst';
import AuthWrap from '@/components/AuthComp/index.vue';
import SingleDropList from '@/components/SingleDropList/index.vue';
import { getImageUrl, getUserInfo } from '@/util';

export default {
  name: 'login',
  components: {
    AuthWrap,
    SingleDropList
  },
  props: {},
  data() {
    return {
      ICON_CFG,
      showEnterprise: false,
      loading: false,
      model1: {
        userInfo: {
          name: '',
          sex: '',
        },
      },
      sexList: [
        {
          value: '0',
          name: '男',
        },
        {
          value: '1',
          name: '女',
        },
        {
          value: '2',
          name: '保密',
        },
      ],
      rules: {
        'userInfo.name': {
          type: 'string',
          required: true,
          message: '请填写姓名',
          trigger: ['blur', 'change'],
        },
        'userInfo.tel': {
          type: 'string',
          max: 11,
          required: true,
          message: '请填写11位手机号',
          trigger: ['blur', 'change'],
        },
      },
    };
  },
  created() {
  },
  onLoad() {
    //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
    this.$refs.uForm.setRules(this.rules);
    this.$refs.authWrap.reloadPage();
    const user = getUserInfo();
    if (user) {
      this.model1.userInfo.name = user.usrName;
    }
  },
  onReady() {
    //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
    this.$refs.uForm.setRules(this.rules);
  },
  methods: {
    getImageUrl,
    enterpriseSelect(enterprise) {
      this.model1.userInfo.enterpriseId = enterprise.value;
      this.model1.userInfo.enterpriseName = enterprise.name;
      this.$refs.uForm.validateField('userInfo.enterpriseId');
    },
    onSubmit() {
      this.loading = true;
      this.$refs.uForm.validate().then(res => {
        putUsrRegist(this.model1.userInfo);
        this.loading = false;
      }).catch(errors => {
        uni.$u.toast('校验失败');
        this.loading = false;
      });
    },
    hideKeyboard() {
      uni.hideKeyboard();
    },
  },
};
</script>
<style lang="scss" src="./index.scss" />;