yicangzongtai_app_240321/pages/government/problem_detail.vue

<template>
  <view class="container">
    <navbar :config="config" backColor="#666666"></navbar>
    <view class="detail">
      <view class="title">
        {{detail.problemTitle}}
      </view>
      <view class="postMessage">
        <!-- <view> -->
       <!-- <view class="">
          <text class="iconfont2 icon-img">&#xe643;</text>
          <text>发布者：{{detail.informationAuthor}}</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.replyContent">
        </view>
      </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>
  <!-- <share ref="shares" :contentHeight="580"></share> -->
  </view>
</template>

<script>
  import share from "@/pages/public/share";
  import rate from "@/components/rate.vue"
  export default {
    components: {
      share,
      rate
    },
    data() {
      return {
        config: {
          back: true,
          title: '问题详情',
          color: 'black',
          backgroundColor: [1, "#fff"],
          statusBarFontColor: '#1A1A1A',
          leftSlot: true
        },
        detail: {},
      }
    },
    onLoad(options) { 
      if (options && options.id) {
        this.getDetail(options.id)
      }
    },
    methods: {
      getDetail(id) {
        this.$yghttp.get(`/common/problem/info/${id}`).then(res => {
          if (res.code === 200) {
            this.detail = res.data
          }
        })
      },
      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 lang="scss" scoped>
  .detail {
    padding: 20rpx 20rpx 40rpx 30rpx;

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

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

      & 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: #3775F6;
        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: #3775F6;
        font-size: 36rpx;
      }
    }

  }
</style>