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">
        <RegistForm
            v-if="rules"
            :rules="rules"
            ref="registForm"
            @onSubmitHandle="onSubmit"
            :regist-info="model1.userInfo"
        ></RegistForm>
      </view>
    </u-popup>
    <view class="regist-btn">
      <u-button
          text="报名"
          size="normal"
          type="primary"
          @click="onRegistClick"
      ></u-button>
    </view>
  </view>
</template>

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

const staticRules = {
  'userInfo.email': {
    pattern: /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/,
  },
};
export default {
  name: 'content',
  components: {
    RichText,
    RegistForm,
  },
  props: {},
  data() {
    return {
      CONTENT_TYPE,
      content: null,
      queryParams: {},
      title: '',
      date: '',
      contentType: '',
      show: false,
      id: '',
      USR_TYPE_LIST,
      loading: false,
      model1: {
        userInfo: {
          usrName: '',
          conferenceFlag: '0',
        },
      },
      rules: null,
    };
  },
  created() {
  },
  onLoad(res) {
    // 登录返回之后的页面
    this.queryParams = getStorageObj(storageKey.regtheme);
    this.getContentInfo();
    formCfg('theme_form_cfg').then(res => {
      const { msg } = res;
      if (msg) {
        const cfgJson = JSON.parse(msg);
        Object.keys(staticRules).forEach(item => {
          if (!cfgJson[item]) {
            Object.assign(cfgJson[item], staticRules[item]);
          }
        });
        this.rules = cfgJson;
      }
      this.$refs.registForm?.setFormRules();
      if (this.queryParams.mode === FORM_MOD.modify) {
        this.getUsrMeetingInfo(this.queryParams.apply);
        this.show = true;
      }
    });
  },
  methods: {
    async onSubmit(userInfo) {
      const {
        id,
        type,
      } = this.queryParams;
      const { code } = await putUsrRegist({
        ...userInfo,
        contentId: id,
      }, type);
      if (code !== 200) {
        return;
      }
      uni.showToast({
        mask: true,
        title: '报名完成',
        icon: 'success',
        success: async () => {
          this.show = false;
        },
      });
    },
    popClose() {
      console.log(this.queryParams);
      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');
    },

    onRegistClick() {
      authLogin(async (usr) => {
        this.show = true;
        // this.$refs.registForm?.restForm();
        // this.$refs.registForm?.clearValidate();
      });
    },
    async getUsrMeetingInfo(id) {
      const { data } = await fetchUsrApplyDetail(id);
      if (!data) {
        return;
      }
      this.model1.userInfo = data;
    },
  },
};
</script>
<style lang="scss" src="./index.scss" />;