greenvalley-mobile/src/views/Activity/ActDetails.vue

<template>
  <div class="box">
    <div>
      <div class="policy-title">
        <span>{{ actDetail.title }}</span>
      </div>
      <!--  && hdDetail.content -->
      <div v-if="hdDetail !== null">
        <div class="policy-info">
          <div>
            <div>
              <a-icon
                class="baseColor"
                style="font-size: 14px; margin-right: 10px"
                type="clock-circle"
              />
              <span>
                {{ hdDetail.releaseTime }}
                <span v-if="hdDetail.closeTime">- {{ hdDetail.closeTime }}</span>
              </span>
            </div>
            <div>
              <a-icon class="baseColor" style="margin-right: 10px" type="environment" />
              <span>{{ hdDetail.address }}</span>
            </div>
          </div>
          <!-- </div> -->
          <!-- <div class="policy-info"> -->
        </div>
        <div class="policy-content" v-dompurify-html="hdDetail.content"></div>
        <div class="policy-other">
          <div>
            <span style="font-size: 14px">会议主题：</span>
            <span>{{ hdDetail.theme }}</span>
          </div>
          <div>
            <span>{{ hdDetail.organization }}</span>
          </div>
          <div>
            <span style="font-size: 14px">主讲嘉宾：</span>
            <span>{{ hdDetail.name }}</span>
          </div>
          <div v-if="hdDetail.other">其他事宜:{{ hdDetail.other }}</div>
        </div>
        <a-button
          disabled
          style="margin: 50px 25px;width:88%"
          v-if="hdDetail.releaseTime && Date.parse(hdDetail.releaseTime) < Date.parse(nowData)"
        >报名已结束</a-button>
        <enroll
          :act-name="hdDetail.title"
          :activity-id="hdDetail.activityId"
          style="margin: 50px 25px"
          v-else
        />
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import Enroll from './components/Enroll.vue';
import { activeDetail } from 'config/api';

export default {
  name: 'ActDetails',
  components: { Enroll },
  data() {
    return { nowData: '', hdDetail: null };
  },
  computed: mapState('home', ['actDetail']),
  async created() {
    await this.getData();
    // 获取当前时间
    var aData = new Date();
    // console.log(aData); //Wed Aug 21 2019 10:00:58 GMT+0800 (中国标准时间)
    this.nowData =
      aData.getFullYear() +
      '-' +
      (aData.getMonth() + 1) +
      '-' +
      aData.getDate() +
      ' ' +
      aData.getHours() +
      ':' +
      aData.getMinutes() +
      ':' +
      aData.getSeconds();
    // console.log(this.nowData); //2019-8-20
  },
  methods: {
    // 获取活动公告列表
    async getData() {
      try {
        const params = {param: {activityId: this.actDetail.activityId,}, };
        const res = await activeDetail(params);
        const { data, msg, code } = res.data;
        if (code === 200) {
          this.hdDetail = data;
        }
      } catch (error) {
        // console.log(error);
      }
    },
  },
};
</script>

<style lang="stylus" scoped>
// body {
//   background: #f5f5f5 !important;
//   padding-top: 0px!important;;
// }
.box {
  width: 100%;
  position: relative;
  margin: 0.3rem auto;
  background: #fff;
  overflow: hidden;
  opacity: 1;
  padding-bottom: 3rem;
}


.back-btn {
  width: 80px;
  position: absolute;
  right: 0;
}

.policy-title {
  height: 90px;
  font-size: 24px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.85);
  opacity: 1;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
  border-bottom: 1px solid #707070;
}

.policy-info {
  // height: 76px;
  line-height: 1.3rem;
  text-align: left;
  padding-left: 1rem
  margin-bottom: 1rem
  margin-top: 1rem
}

.policy-content {
  padding: 0 1rem;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.65);
  font-weight: 400;
  font-family: Microsoft YaHei;
}

.coms-style {
  height: 480px;
  padding: 25px 0;
  border-top: 2px solid #ccc;
  position: absolute;
  bottom: 0;
  width: 100%;
}

.coms-top {
  height: 280px;
  padding: 0 25px;
  overflow: auto;
  box-shadow: 0 0 5px #ccc;
}

.coms-btm {
  margin-top: 20px;
  padding: 0 10px;
}

.coms-content {
  background: rgba(19, 172, 196, 0.1);
}

.sub {
  position: absolute;
  right: 20px;
  bottom: 20px;
}

.policy-other {
  margin: 50px 25px;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.65);
  font-weight: 400;
  font-family: Microsoft YaHei;
}
</style>