ycwh/miniapp/pages/yuecai/information/detail/index.vue

<template>
  <view class="page-view f-30 p-40 flex-dir-column flex-x-center">
    <view class="title">{{detailVO.title}}</view>
    <view class="time">发布时间：{{detailVO.createTime?detailVO.createTime.substring(0,10) : ''}}</view>
    <view v-if="detailVO.videos" class="width-100">
      <video class="width-100" :src="detailVO.videos"></video>
    </view>
    <view class="col-info-d t-c m-b-30">
      <u-parse style="text-align: left;" :content="detailVO.content"></u-parse>
    </view>
    <detailBottom type="information" :articleId.sync="detailVO.id" :liked.sync="detailVO.liked"
      :collected.sync="detailVO.collected" :views.sync="detailVO.views" :likeNum.sync="detailVO.likeNum"
      :collectNum.sync="detailVO.collectNum" @doRefresh="getDetail"></detailBottom>
  </view>
</template>

<script>
  import detailBottom from '@/pages/components/detailbottom.vue'
  export default {
    components: {
      detailBottom
    },
    data() {
      return {
        detailVO: {},
      }
    },
    methods: {
      getDetail() {
        this.$u.api.getInformationDetail(this.detailVO.id).then(res => {
          if (res.data.content) {
            res.data.content = decodeURIComponent(res.data.content);
          }
          this.detailVO = res.data || {}
          //
          uni.setNavigationBarTitle({
            title: res.data.title || ''
          })
        })
      },
    },
    onLoad(options) {
      this.detailVO.id = options.id || '';
      this.getDetail();
    },
  }
</script>

<style scoped lang="scss">
  .title {
    width: 100%;
    text-align: center;
    font-size: 25px;
    color: #65371b;
    margin-bottom: 20px;
  }

  .time {
    font-size: 14px;
    color: #787878;
    font-weight: 300;
    padding-bottom: 10px;
  }

  .bottom-btns {
    width: 100%;

    .btn-title {
      margin-left: 10rpx;
      color: #7f7f7f;
    }
  }
</style>