wanmeiyizhan/pages/community/detail.vue

<template>
  <view class="main">
    <view class="contentBox">
      <view class="contentTitle">{{ detailObj.POST_TITLE || "" }}</view>

      <view class="itemTop">
        <view class="topLeft">
          <view class="profileBox">
            <image class="profile" />
          </view>
          <view class="otherBox">
            <view class="userName">{{ detailObj.AUTHOR_NAME || "-" }}</view>
            <view class="timeBox">{{ detailObj.PUBLISH_TIME || "-" }}</view>
          </view>
        </view>
      </view>

      <view class="detailContent">
        {{ detailObj.POST_CONTENT || "" }}
      </view>

      <view
        class="imageList"
        v-if="detailObj.ImageList && detailObj.ImageList.length > 0"
      >
        <view
          class="imageItem"
          v-for="(item, index) in detailObj.ImageList"
          :key="index"
        >
          <image class="imageBox" :src="item.ImageUrl" />
        </view>
      </view>
    </view>

    <!-- 评论 -->
    <view class="commentBox">
      <view class="commentTitle">评论</view>

      <scroll-view class="commentScroll" scroll-y>
        <view
          class="commentList"
          v-if="commentList && commentList.length > 0"
        ></view>
        <view class="noComment" v-else>
          <image
            class="noCommentIcon"
            src="/static/images/home/noComment.svg"
          />
          <text class="noDataText">还没有评论，发表第一个评论吧</text>
        </view>
      </scroll-view>

      <view class="postCommentBox">
        <view class="userProfile"></view>
        <view class="userInput">
          <input
            style="width: 100%"
            placeholder="写下你的评论..."
            confirm-type="send"
            :value="commentText"
          />
        </view>
        <view class="userSubmit">发送</view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      currentID: "", // 当前的id
      detailObj: {},
      commentList: [], // 评论数组
      commentText: "", // 评论的内容
    };
  },
  onLoad(query) {
    console.log("query", query);
    this.handleGetPostDetail(query.id);
  },
  methods: {
    async handleGetPostDetail(id) {
      uni.showLoading({
        title: "加载中...",
      });
      const req = {
        POSTId: id,
      };
      const data = await this.$api.$get("/Member/GetPOSTDetail", req);
      this.detailObj = data.Result_Data;
      console.log("handleGetPostDetail", this.detailObj);

      uni.hideLoading();
    },
  },
};
</script>

<style scoped lang="less">
.main {
  width: 100vw;
  background: #f5f6f7;
  .contentBox {
    width: 100%;
    background: #fff;
    box-sizing: border-box;
    padding: 8rpx 32rpx 56rpx;
    .contentTitle {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 40rpx;
      color: #130f05;
      line-height: 56rpx;
      text-align: left;
      font-style: normal;
    }

    .itemTop {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 16rpx;
      .topLeft {
        width: calc(100% - 190rpx);
        display: flex;
        align-items: center;
        .profileBox {
          width: 72rpx;
          height: 72rpx;
          margin-right: 16rpx;
          .profile {
            width: 100%;
            height: 100%;
          }
        }
        .otherBox {
          width: calc(100% - 88rpx);
          .userName {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 28rpx;
            color: #130f05;
            line-height: 40rpx;
            text-align: left;
            font-style: normal;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
          }
          .timeBox {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #716f69;
            line-height: 36rpx;
            text-align: left;
            font-style: normal;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
          }
        }
      }
    }

    .detailContent {
      margin-top: 40rpx;
    }

    .imageList {
      width: 100%;
      margin-top: 24rpx;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      .imageItem {
        width: 218rpx;
        height: 218rpx;
        border-radius: 8rpx;
        margin-right: 8rpx;
        overflow: hidden;
        .imageBox {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  .commentBox {
    margin-top: 16rpx;
    width: 100%;
    box-sizing: border-box;
    padding: 32rpx;
    background: #fff;
    .commentTitle {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 32rpx;
      color: #130f05;
      line-height: 44rpx;
      text-align: left;
      font-style: normal;
    }

    .commentScroll {
      width: 100%;
      .noComment {
        width: 100%;
        height: 300rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .noCommentIcon {
          width: 220rpx;
          height: 220rpx;
          margin-bottom: 24rpx;
        }
        .noDataText {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #716f69;
          line-height: 40rpx;
          text-align: justify;
          font-style: normal;
        }
      }
    }

    .postCommentBox {
      width: 100%;
      box-sizing: border-box;
      padding: 20rpx 0;
      background: #fff;
      border-top: 1px solid #f3f3f3;
      display: flex;
      align-items: center;

      .userProfile {
        width: 64rpx;
        height: 64rpx;
        margin-right: 16rpx;
      }

      .userInput {
        width: calc(100% - 224rpx);
        height: 72rpx;
        display: flex;
        align-items: center;
        background: #f8f8f9;
        box-sizing: border-box;
        padding-left: 24rpx;
      }

      .userSubmit {
        width: 120rpx;
        height: 60rpx;
        box-sizing: border-box;
        color: #fff;
        background: #ba922f;
        margin-left: 24rpx;
        border-radius: 16rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}
</style>