(八)、详情页面+unicloud-db组件+parsel富文本解析详情页【uniapp+uinicloud多用户社区博客实战项目(完整开发文档-从零到完整项目)】

1，detail详情页面

1.1新建detail页面

1.2点击跳转到详情页

1.3 blog-item.vue中的代码块：

      <!-- 上 标题 -->
      <view class="title" @click="goDetail">{{item.title}}</view>
      <!-- 中 内容 -->
      <view class="text" @click="goDetail">
        <view class="t">{{item.description}}</view>
      </view>

      <!-- 评论数 -->
      <view class="box" @click="goDetail">
        <text class="iconfont icon-a-5-xinxi"></text>
        <text>{{item.comment_count && item.comment_count>0 ? item.comment_count : '评论'}}</text>
      </view>

1.4 goDetail点击跳转方法

      //点击跳转到详情
      goDetail() {
        uni.navigateTo({
          url: "/pages/detail/detail?id=" + this.item._id
        })
      },

1.5 detail.vue完整代码

<template>
  <view class="detail">
    <view class="container">
      <view class="title">这是标题</view>
      <view class="userinfo">
        <view class="avatar">
          <image src="../../static/images/panda.jpg" mode="aspectFill"></image>
        </view>
        <view class="text">
          <view class="name">王五</view>
          <view class="small">6天前 · 发布于北京市</view>
        </view>
      </view>
      <view class="content">
        这里是详情页
      </view>

      <view class="like">
        <view class="btn">
          <text class="iconfont icon-good-fill"></text>
          <text>88</text>
        </view>
        <view class="users">
          <image src="../../static/images/user.jpg" mode="aspectFill"></image>
        </view>
        <view class="text"><text class="num">998</text>人看过</view>
      </view>

    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {

      };
    }
  }
</script>

<style lang="scss">
  .detail {
    background: #f8f8f8;
    min-height: calc(100vh - var(--window-top));

    .container {
      padding: 30rpx;
      background: #fff;

      .title {
        font-size: 46rpx;
        color: #333;
        line-height: 1.4em;
        font-weight: 600;
      }

      .userinfo {
        padding: 20rpx 0 50rpx;
        display: flex;
        align-items: center;

        .avatar {
          width: 60rpx;
          height: 60rpx;
          padding-right: 15rpx;

          image {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }

        .text {
          font-size: 28rpx;
          color: #555;

          .small {
            font-size: 20rpx;
            color: #999;
          }
        }
      }

      .content {}

      .like {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 80rpx 50rpx 50rpx;

        .btn {
          width: 260rpx;
          height: 120rpx;
          background: #e4e4e4;
          border-radius: 100rpx;
          color: #fff;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          font-size: 28rpx;

          .iconfont {
            font-size: 50rpx;
          }

          &.active {
            background: #0199FE;
          }
        }

        .text {
          font-size: 26rpx;
          color: #666;

          .num {
            color: #0199FE
          }

          .spot {
            padding: 0 10rpx;
          }
        }

        .users {
          display: flex;
          justify-content: center;
          padding: 30rpx 0;

          image {
            width: 50rpx;
            height: 50rpx;
            border-radius: 50%;
            border: 3px solid #fff;
            margin-left: -20rpx;
          }
        }
      }

    }
  }
</style>

2，使用 组件—数据库查询组件

2.1 详情页接收页面跳转传参–文章id

detail.vue

<script>
  export default {
    data() {
      return {
        article_id: ''

      };
    },
    onLoad(e) {
      console.log(e)
      this.article_id = e.id
    }
  }
</script>

2.2 使用 标签包裹detail页面中的数据展示

unicloud-db 组件

<unicloud-db v-slot:default="{data, loading, error, options}" collection="table1" field="field1" :getone="true" where="id=='1'">
  <view>
    {{ data}}
  </view>
</unicloud-db>

uview中的Parse 富文本解析器

          <view class="content">
            <u-parse :content="data.content" :tagStyle="tagstyle"></u-parse>
          </view>

富文本样式定义

    data() {
      return {
        artid: '',
        tagstyle: {
          p: "line-height:1.7em;font-size:16px;padding-bottom:10rpx",
          img: "margin:10rpx 0"
        }

      };
    },

      <unicloud-db :where="`_id=='${artid}'`" v-slot:default="{data, loading, error, options}" :getone="true"
        collection="quanzi_articles">
        <view v-if="error">{{error.message}}</view>
        <view v-else>
          <view class="title">{{data.title}}</view>
          <view class="userinfo">
            <view class="avatar">
              <image src="../../static/images/panda.jpg" mode="aspectFill"></image>
            </view>
            <view class="text">
              <view class="name">王五</view>
              <view class="small">6天前 · 发布于北京市</view>
            </view>
          </view>
          <view class="content">
            <u-parse :content="data.content" :tagStyle="tagstyle"></u-parse>
          </view>
        </view>
      </unicloud-db>