traffic-eff-app/pasbrg/pages/regtheme/index.vue

<template>
  <view class="theme-regist-content-info-container">
    <view class="title-container">
      <view class="title-content-text">{{ title }}</view>
      <view class="title-content-date">{{ date }}</view>
    </view>
    <rich-text :content="content"></rich-text>
    <u-popup :show="show" :round="5" mode="bottom" :closeOnClickOverlay="true" :overlay="true" @close="popClose">
      <view class="pop-form-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 USR_TYPE_LIST"
                  :key="index"
                  :label="item.name"
                  :name="item.value"
              >
              </u-radio>
            </u-radio-group>
          </u-form-item>
        </u--form>
        <u-button
            :style="{
              marginTop: 'auto',
             marginBottom: '80rpx'
            }"
            type="primary"
            text="提交"
            :disabled="loading"
            :loading="loading"
            loadingText="正在提交..."
            @click="onSubmit"
        >
        </u-button>
      </view>
    </u-popup>
    <view class="regist-btn">
      <u-button
          text="报名"
          size="normal"
          type="primary"
          @click="onRegistClick"
      ></u-button>
    </view>
  </view>
</template>

<script>
import { fetchContentDetail,  putUsrRegist } from '@/common/api';
import { CONTENT_TYPE, USR_TYPE_LIST } from '@/common/EnumConst';
import RichText from '@/components/RichText/index.vue';
import { authLogin, getStorageObj, getUserInfo, storageKey } from '@/util';

export default {
  name: 'content',
  components: {
    RichText,
  },
  props: {},
  data() {
    return {
      CONTENT_TYPE,
      content: null,
      queryParams: {},
      title: '',
      date: '',
      contentType: '',
      show: false,
      id: '',
      USR_TYPE_LIST,
      loading: false,
      model1: {
        userInfo: {
          usrName: '',
          conferenceFlag: '1',
        },
      },
      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'],
        },
      },
    };
  },
  created() {
  },
  onLoad(res) {
    // 登录返回之后的页面
    this.queryParams = getStorageObj(storageKey.regtheme);
    this.getContentInfo();
    this.restForm();
    //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
    this.$refs.uForm.setRules(this.rules);
  },
  methods: {
    onSubmit() {
      this.loading = true;
      this.$refs.uForm.validate().then(async (res) => {
        const { code } = await putUsrRegist({
          ...this.model1.userInfo,
          contentId: this.queryParams.id,
        }, this.queryParams.type);
        this.loading = false;
        if (code !== 200) {
          return;
        }
        uni.showToast({
          mask: true,
          title: '报名完成',
          icon: 'success',
          success: async () => {
            this.show = false;
          },
        });
      }).catch(errors => {
        this.loading = false;
      });
    },
    popClose() {
      this.show = false;
    },
    async getContentInfo() {
      const {
        data: {
          content,
          title,
          createTime,
          contentType,
          id,
        },
      } = await fetchContentDetail(this.queryParams.id);
      this.content = content;
      this.title = title;
      this.contentType = contentType;
      this.id = id;
      uni.setNavigationBarTitle({
        title,
      });
      this.date = uni.$u.timeFormat(createTime, 'yyyy-mm-dd');
    },
    restForm() {
      this.model1 = {
        userInfo: {
          usrName: '',
        },
      };
      const user = getUserInfo();
      if (user) {
        this.model1.userInfo.usrName = user.usrName;
        this.model1.userInfo.tel = user.tel;
      }
    },
    onRegistClick() {
      authLogin(async (usr) => {
        this.show = true;
        this.restForm();
        this.$refs.uForm.clearValidate();
      });
    }
  }
};
</script>
<style lang="scss" src="./index.scss" />;