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

<template>
  <view class="theme-regist-content-info-container">
    <u-empty
        mode="data"
        text="暂未报名，前去报名"
        v-if="isEmpty"
    >
    </u-empty>
    <template v-else>
      <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"
                  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>
          <view class="review-msg" v-if="REVIEW_STATUS.noPass.value === model1.userInfo.reviewState">
            审核备注：{{ model1.userInfo.reviewMsg }}
          </view>
          <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="REVIEW_STATUS[model1.userInfo.reviewState].name"
            size="normal"
            type="primary"
            :disabled="REVIEW_STATUS.pass.value === model1.userInfo.reviewState"
            @click="onRegistClick"
        ></u-button>
      </view>
    </template>
    <view class="regist-btn" v-if="isEmpty">
      <u-button
          text="我要报名"
          size="normal"
          type="primary"
          throttle-time="500"
          @click="toRegistClick"
      ></u-button>
    </view>
  </view>
</template>

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

export default {
  name: 'content',
  computed: {
    REVIEW_STATUS() {
      return REVIEW_STATUS;
    },
  },
  components: {
    SingleDropList,
    RichText,
  },
  props: {},
  data() {
    return {
      CONTENT_TYPE,
      content: null,
      queryParams: {},
      title: '',
      date: '',
      contentType: '',
      show: false,
      isEmpty: 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.getUsrContent();
    //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过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.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 getUsrContent() {
      const {
        data,
      } = await fetchUsrThemeMeetingInfo({}, this.queryParams.type);
      if (!data) {
        this.isEmpty = true;
        return;
      }
      const {
        content: {
          title,
          content,
          createTime,
          id,
          contentType,
        },
        ...usrInfoApply
      } = data;
      this.content = content;
      this.title = title;
      this.contentType = contentType;
      this.model1 = {
        userInfo: { ...usrInfoApply },
      };
      this.id = id;
      uni.setNavigationBarTitle({
        title,
      });
      this.date = uni.$u.timeFormat(createTime, 'yyyy-mm-dd');
    },
    onRegistClick() {
      authLogin(async (usr) => {
        this.show = true;
        this.$refs.uForm.clearValidate();
      });
    },
    toRegistClick() {
      if (this.queryParams.type == MEETING_TYPE.theme.value) {
        uni.$u.route({
          type: 'reLaunch',
          url: '/pages/tabbar/index/index',
        });
      }
      if (this.queryParams.type == MEETING_TYPE.conference.value) {
        uni.$u.route({
          type: 'navigateTo',
          url: '/pasb/pages/meeting-info/index',
        });
      }
    },
  },
};
</script>
<style lang="scss" src="./index.scss" />;