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">
          <RegistForm
              v-if="rules"
              :rules="rules"
              ref="registForm"
              @onSubmitHandle="onFormSubmit"
              :regist-info="model1.userInfo"
          >
            <template v-slot:footer>
              <view class="review-msg" v-if="REVIEW_STATUS.noPass.value === model1.userInfo.reviewState">
                审核信息：{{ model1.userInfo.reviewMsg }}
              </view>
            </template>
          </RegistForm>
        </view>
      </u-popup>
      <view class="regist-btn">
        <u-button
            v-if="REVIEW_STATUS[model1.userInfo.reviewState]"
            :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, formCfg, putUsrRegist } from '@/common/api';
import { CONTENT_TYPE, MEETING_TYPE, REVIEW_STATUS, USR_TYPE_LIST } from '@/common/EnumConst';
import RegistForm from '@/components/RegistForm/index.vue';
import RichText from '@/components/RichText/index.vue';
import SingleDropList from '@/components/SingleDropList/index.vue';
import { authLogin, getStorageObj, storageKey } from '@/util';

const staticRules = {
  'userInfo.email': {
    pattern: /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/,
  },
};
export default {
  name: 'content',
  computed: {
    REVIEW_STATUS() {
      return REVIEW_STATUS;
    },
  },
  components: {
    SingleDropList,
    RichText,
    RegistForm,
  },
  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: null,
    };
  },
  created() {
  },
  async onLoad(res) {
    // 登录返回之后的页面
    this.queryParams = getStorageObj(storageKey.regtheme);
    this.getUsrContent();

    const { msg } = await formCfg('theme_form_cfg');
    if (msg) {
      const cfgJson = JSON.parse(msg);
      Object.keys(staticRules).forEach(item => {
        if (!cfgJson[item]) {
          Object.assign(cfgJson[item], staticRules[item]);
        }
      });
      this.rules = cfgJson;
    }
    //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
    this.$refs.registForm?.setFormRules();
  },
  methods: {
    async onFormSubmit(usrInfo) {
      await putUsrRegist({
        ...usrInfo,
        contentId: this.id,
      }, this.queryParams.type);
      uni.showToast({
        mask: true,
        title: '报名完成',
        icon: 'success',
      });
    },
    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.registForm?.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" />;