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 class="col-info-d t-c m-b-30">
      <u-parse :content="detailVO.content"></u-parse>
    </view>
    <view class="dis-flex flex-x-between bottom-btns">
      <view class="dis-flex flex-y-center">
        <u-icon name="eye" color="#7f7f7f" size="18"></u-icon>
        <view class="btn-title">{{detailVO.views || 0}}人阅读</view>
      </view>
      <view class="dis-flex flex-y-center">
        <u-icon name="thumb-up" color="#7f7f7f" size="18"></u-icon>
        <view class="btn-title">{{detailVO.likeNum || 0}}点赞</view>
      </view>
      <view class="dis-flex flex-y-center" @click="addCollection">
        <u-icon name="star" color="#7f7f7f" size="18"></u-icon>
        <view class="btn-title">{{detailVO.collectNum || 0}}收藏数</view>
      </view>
    </view>
  </view>
</template>

<script>
  import themeMixins from '@/pages/yuecai/mixins/themeMixins.js';
  export default {
    mixins: [themeMixins],
    data() {
      return {
        detailVO: {},
      }
    },
    methods: {
      getInformationDetail(id) {
        this.$u.api.getInformationDetail(id).then(res => {
          if (res.data.content) {
            res.data.content = decodeURIComponent(res.data.content);
          }
          this.detailVO = res.data || {}
        })
      },
      addCollection() {
        this.detailVO.id
      },
      addLike() {
        this.detailVO.id
      }
    },
    onLoad(options) {
      this.getInformationDetail(options.id);
    },
  }
</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>