yicangzongtai_app_240321/pages/news/news_detail.vue

<template>
  <view class="container">
    <navbar :config="config" backColor="#666"></navbar>
    <view class="detail">
      <view class="title">
        {{detail.informationTitle}}
      </view>
      <view class="postMessage">
        <text>{{detail.informationTypeName}}</text>
        <text>{{detail.createTime}}</text>
        <!-- <view>
          <view class="">
            <text class="iconfont2 icon-img">&#xe643;</text>
            <text>发布者：{{detail.informationTypeName}}</text>
          </view>
          <view class="">
            <text class="iconfont2 icon-img">&#xe66c;</text>
            <text>{{detail.createTime}}</text>
          </view>
        </view>
        <view @click="shareHandler">
          <text class="iconfont2 icon-img">&#xe615;</text>
          <text>分享</text>
        </view> -->
      </view>
      <view class="content">
        <view class="ql-editor-box" v-html="detail.informationContent">
        </view>
        <!-- <u-parse :domain="$mConfig.imgURL" :html="detail.informationContent"></u-parse> -->
      </view>
      <!-- <view class="browse">
        <view class="look-box">
          <text class="iconfont3 look-icon">&#xe63b;</text>
          <text>浏览量：{{detail.browse_sum||0}}</text>
        </view>
      </view> -->
    </view>
    <!-- <view class="footer-box">
      <view class="btn" @click="openKongKim" v-if="detail.jumpType !== null || detail.jumpType !== undefined">
        <text v-if="detail.jumpType == 2">{{detail.resourceModelTitle || '一键前往'}}</text>
        <text v-else>一键前往</text>
      </view>
      <view class="footer-tools">
        <view>
          <text class="iconfont3 look-icon">&#xe63b;</text>
          <text>{{detail.browseNum||0}}</text>
        </view>
      </view>
    </view> -->
    <!-- <share ref="shares" :contentHeight="580"></share> -->
  </view>
</template>

<script>
  import { newsDetial } from '@/api/government.js';
  import share from "@/pages/public/share";
  import rate from "@/components/rate.vue"
  export default {
    components: {
      share,
      rate
    },
    data() {
      return {
        config: {
          back: true,
          title: '资讯详情',
          color: '#1A1A1A',
          backgroundColor: [1, "#fff"],
          statusBarFontColor: '#1A1A1A',
          leftSlot: true
        },
        detail: {}
      }
    },
    onLoad(options) {
      if (options && options.informationId) {
        this.getDetail(options.informationId)
      }
    },
    methods: {
      getDetail(id) {
        newsDetial(id).then(res => {
          if (res.code === 200) {
            this.detail = res.data
          }
        })
      },
      openKongKim() {
        this.$openPage(this.detail)
      },
      // shareHandler() {
      //   if (!token) {
      //     uni.navigateTo({
      //       url: "/pages/login/index",
      //     });
      //   } else {
      //     // 咨询分享
      //     // this.$http.post(`/information/share/${this.detail.id}`).then(res => {})
      //     this.$nextTick(() => {
      //       this.$refs.shares.shareInfo("/?&shareId=" + user.id, null, null, null, null, this.detail.id);
      //     });

      //   }
      // },
    }
  }
</script>

<style>
  page {
    background: #fff;
  }
</style>

<style lang="scss" scoped>
  .container {
    // padding-bottom: 100rpx;
  }

  .detail {
    padding: 42rpx 30rpx 40rpx 30rpx;
    // margin: 30rpx;
    background-color: #fff;
    border-radius: 20rpx;

    .title {
      margin-bottom: 40rpx;
      font-size: 35rpx;
      font-family: PingFang SC, PingFang SC-Bold;
      font-weight: 700;
      color: #1a1a1a;
      line-height: 56rpx;
      letter-spacing: -0.7rpx;
    }

    .postMessage {
      display: flex;
      align-items: center;
      // justify-content: space-between;
      padding: 0 10rpx;
      margin-bottom: 30rpx;
      font-size: 26rpx;
      font-family: PingFang SC, PingFang SC-Medium;
      font-weight: 500;
      color: #999999;

      text {
        margin-right: 30rpx;
      }

      & view {
        display: flex;
        align-items: center;
        width: 50%;

        text:last-child {
          flex: 1;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

        // margin-right: 50rpx;
      }

      .mb20 {
        margin-bottom: 20rpx;
      }

      .icon-img {
        margin-right: 8rpx;
        color: #FA6138;
        font-size: 36rpx;
      }
    }

    .look-box {
      display: flex;
      align-items: center;

      .look-icon {
        font-size: 36rpx;
        margin-right: 8rpx;
        margin-top: 8rpx;
      }
    }

    * {
      word-break: break-all;
    }

    .content /deep/ img {
      max-width: 100%;
    }

    .content /deep/ .ql-align-center {
      text-align: center;
    }

    .content /deep/ .ql-align-right {
      text-align: right;
    }

    .content /deep/ blockquote {
      display: block;
      border-left: 8px solid #d0e5f2;
      padding: 5px 10px;
      margin: 10px 0;
      line-height: 1.4;
      font-size: 100%;
      background-color: #f1f1f1;
    }

    .content /deep/ .ql-indent-1 {
      margin-left: 60rpx;
    }

    .content /deep/ .ql-indent-2 {
      margin-left: 120rpx;
    }

    .content /deep/ .ql-indent-3 {
      margin-left: 180rpx;
    }

    .content /deep/ .ql-indent-4 {
      margin-left: 240rpx;
    }

    .content /deep/ .ql-indent-5 {
      margin-left: 300rpx;
    }

    .content {
      /deep/ .ql-editor-box {
        .ql-video {
          width: 100%;
          // height: 45vw;
        }
      }
    }

    .browse {
      margin-top: 30rpx;
      font-size: 24rpx;
      font-family: PingFang SC, PingFang SC-Medium;
      font-weight: 500;
      color: #999999;

      view {
        display: flex;
        align-items: center;
      }

      .icon-img {
        margin-right: 8rpx;
        color: #FA6138;
        font-size: 36rpx;
      }
    }

  }

  .footer-box {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 30rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    box-shadow: 0 0 6rpx 6rpx rgba(0, 0, 0, .1);
  }

  .btn {
    max-width: 400rpx;
    padding: 0 20rpx;
    line-height: 60rpx;
    text-align: center;
    color: #fff;
    background-color: #3775F6;
    border-radius: 8rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .footer-tools {
    flex-shrink: 0;
    .look-icon {
      margin-right: 4rpx;
      font-size: 40rpx;
    }

    &>view {
      display: flex;
      align-items: center;
      font-size: 30rpx;
    }
  }
</style>