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
              prop="userInfo.usrName"
              borderBottom
          >
            <u--input
                prefixIcon="account"
                v-model="model1.userInfo.usrName"
                border="none"
            ></u--input>
          </u-form-item>
          <u-form-item
              prop="userInfo.tel"
              borderBottom
          >
            <u--input
                prefixIcon="phone"
                placeholder="输入手机号"
                border="none"
                type="number"
                maxlength="11"
                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
          >
            <SingleDropList
                :style="{
                marginLeft: '20rpx'
              }"
                :defaultValue="model1.userInfo.enterpriseId"
                :src="enterpriseList"
                placeholder="请选择参会单位"
                @onChange="enterpriseSelect"
            >
            </SingleDropList>
          </u-form-item>
          <u-form-item
              label="参会行程"
              prop="userInfo.tripId"
              borderBottom
          >
            <SingleDropList
                :style="{
                marginLeft: '20rpx'
              }"
                :defaultValue="model1.userInfo.tripId"
                :src="tripList"
                placeholder="请选择参会行程"
                @onChange="enterpriseTripSelect"
            >
            </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 { fetchEnterpriseList, fetchEnterpriseTripList, 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: {
          usrName: '',
          sex: '',
        },
      },
      sexList: [
        {
          value: '0',
          name: '男',
        },
        {
          value: '1',
          name: '女',
        },
        {
          value: '2',
          name: '保密',
        },
      ],
      enterpriseList: [],
      tripList: [],
      rules: {
        'userInfo.usrName': {
          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.usrName = user.usrName;
      this.model1.userInfo.tel = user.tel;
      this.model1.userInfo.sex = user.sex;
      this.model1.userInfo.enterpriseId = user.enterpriseId;
      this.model1.userInfo.tripId = user.tripId;
    }
    this.init();
  },
  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');
    },
    enterpriseTripSelect(trip) {
      this.model1.userInfo.tripId = trip.value;
      this.model1.userInfo.enterpriseTripName = trip.name;
      this.$refs.uForm.validateField('userInfo.tripId');
    },
    async init() {
      const {
        code: enterpriseCode,
        rows: enterpriseData,
      } = await fetchEnterpriseList();
      const {
        code: tripCode,
        rows: tripData,
      } = await fetchEnterpriseTripList();
      this.enterpriseList = enterpriseData.map(item => {
        return {
          name: item.enterpriseName,
          value: item.id,
        };
      });
      this.tripList = tripData.map(item => {
        return {
          name: item.tripName,
          value: item.id,
        };
      });
    },
    onSubmit() {
      this.loading = true;
      this.$refs.uForm.validate().then(res => {
        putUsrRegist(this.model1.userInfo);
        this.loading = false;
        uni.showToast({
          title: '报名完成',
          icon: 'success',
        });
        uni.navigateBack({
          delta: 1,
        });
      }).catch(errors => {
        this.loading = false;
      });
    },
    hideKeyboard() {
      uni.hideKeyboard();
    },
  },
};
</script>
<style lang="scss" src="./index.scss" />;