psvt-miniprogram/src/pages/articleDetail/index.wxml

<view class="page">
  <view class="tag-wrap">
    <view class="tag" wx:for="{{detail.CateNames}}" wx:key="index">{{item}}</view>
  </view>
  <view class="title">{{detail.Title}}</view>
  <view class="info">
    <view class="date">{{detail.PublishAt}}</view>
    <view class="line">|</view>
    <view class="pv">{{detail.OpenNum}}人阅读</view>
  </view>
  <view class="banner" wx:if="{{detail.TitlePicLink}}">
    <image class="b-img" mode="aspectFill" src="{{detail.TitlePicLink}}"></image>
  </view>
  <view class="mp-wrap">
    <mp-html content="{{content}}"></mp-html>
  </view>
  <view class="recommended" wx:if="{{detail.Recommends && detail.Recommends.length}}">
    <view class="r-header">
      <view class="title">相关推荐</view>
    </view>
    <view class="r-list">
      <view class="list-card" wx:for="{{detail.Recommends}}" wx:key="Id" bind:tap="handleRecommendTap" data-id="{{item.Id}}">
        <view class="photo-wrap">
          <image class="photo" mode="aspectFill" src="{{item.TitlePicLink}}"></image>
          <view class="type1" wx:if="{{item.Type==='1'}}">图文</view>
          <view class="type2" wx:if="{{item.Type==='2'}}">
            <image class="icon" src="{{imageUrl}}icon10.png?t={{Timestamp}}"></image>
            视频
          </view>
        </view>
        <view class="wrap">
          <view class="w-title">{{item.Title}}</view>
          <view class="status">
            <view class="tag">{{item.CateName}}</view>
            <view class="stat">
              <view class="s-item">
                <image class="icon" src="{{imageUrl}}icon8.png?t={{Timestamp}}"></image>
                {{item.OpenNum}}
              </view>
              <view class="s-item">
                <image class="icon" src="{{imageUrl}}icon9.png?t={{Timestamp}}"></image>
                {{item.ComplimentNum}}
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
  <view class="page-footer">
    <view class="op-wrap">
      <!-- 点赞 -->
      <view class="op" bind:tap="handleCompliment">
        <image class="icon" src="{{detail.IsCompliment ? imageUrl + 'icon9-active.png?t=' + Timestamp : imageUrl + 'icon9.png?t=' + Timestamp}}"></image>
        <view class="num {{detail.IsCompliment ? 'active1' : ''}}">{{detail.ComplimentNum || 0}}</view>
      </view>
      <!-- 收藏 -->
      <view class="op" bind:tap="handleCollect">
        <image class="icon" src="{{detail.IsCollect ? imageUrl + 'icon28-active.png?t=' + Timestamp : imageUrl + 'icon28.png?t=' + Timestamp}}"></image>
        <view class="num {{detail.IsCollect ? 'active2' : ''}}">{{detail.CollectionPeopleNum || 0}}</view>
      </view>
      <!-- 分享 -->
      <view class="op">
        <button class="share-btn" open-type="share">
          <image class="icon" src="{{imageUrl}}icon29.png?t={{Timestamp}}"></image>
        </button>
        <view class="num">{{detail.ShareNum || 0}}</view>
      </view>
    </view>
    <view class="next" wx:if="{{next.Id}}" bind:tap="handleNext">
      下一篇
    </view>
  </view>
</view>