小程序：视频详情样式

htmldev/wxMini/pages/mediaDetail/mediaDetail.js

@@ -1,12 +1,19 @@
+const pages = require('../../mixin/pages')
+
 Page({
 
   /**
    * 页面的初始数据
    */
   data: {
+    ...pages.data(),
+    listUrl: '/api/user/video/comment/list',
+    searchForm: {
+      'video_id': ''
+    },
     videoConfig: {}
   },
-
+  ...pages.methods,
   /**
    * 生命周期函数--监听页面加载
    */
@@ -14,8 +21,12 @@ Page({
     const { videoConfig } = options
 
     if (videoConfig) {
+      const temp = JSON.parse(videoConfig)
       this.setData({
-        videoConfig: JSON.parse(videoConfig)
+        videoConfig: temp,
+        'searchForm.video_id': temp.id
+      }, () => {
+        this.fetchOrderList()
       })
     }
   },
@@ -52,20 +63,22 @@ Page({
    * 页面相关事件处理函数--监听用户下拉动作
    */
   onPullDownRefresh() {
-
+    if (this.data.freshing) {
+      return
+    }
+    this.setData({
+      freshing: true
+    })
+    this.bindCallBack()
   },
 
   /**
    * 页面上拉触底事件的处理函数
    */
   onReachBottom() {
-
+    this.fetchOrderList()
   },
-
-  /**
-   * 用户点击右上角分享
-   */
-  onShareAppMessage() {
-
+  bindCallBack() {
+    this.refreshOrderList()
   }
 })

htmldev/wxMini/pages/mediaDetail/mediaDetail.json

@@ -1,4 +1,10 @@
 {
-  "usingComponents": {},
-  "navigationBarTitleText": "视频详情"
+  "usingComponents": {
+    "van-loading": "@vant/weapp/loading/index"
+  },
+  "navigationBarTitleText": "视频详情",
+  "backgroundColor": "#F6F6F6",
+  "backgroundTextStyle": "dark",
+  "enablePullDownRefresh": true,
+  "onReachBottomDistance": 50
 }

htmldev/wxMini/pages/mediaDetail/mediaDetail.scss

@@ -10,7 +10,8 @@ video {
 }
 
 .main {
-  padding: 24rpx 24rpx 0 28rpx;
+  padding: 24rpx 24rpx 40rpx 28rpx;
+  border: 1rpx solid rgba(189, 189, 189, 1);
 }
 
 button.btn[type="default"] {
@@ -82,3 +83,116 @@ button.btn[type="default"] {
   word-break: break-all;
   word-wrap: break-word;
 }
+
+.comment-list {
+  padding: 40rpx 24rpx 40rpx 28rpx;
+
+  .title {
+    margin-bottom: 44rpx;
+  }
+}
+
+.list {
+  display: flex;
+  width: 100%;
+  margin-bottom: 28rpx;
+}
+
+.portrait {
+  width: 80rpx;
+  height: 80rpx;
+  border-radius: 50%;
+  overflow: hidden;
+
+  image {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.box {
+  padding-left: 20rpx;
+  padding-top: 18rpx;
+
+  .name {
+    line-height: 28rpx;
+    font-size: 24rpx;
+    font-weight: 700;
+    color: rgba(51, 51, 51, 1);
+  }
+
+  .create-at {
+    margin: 14rpx 0 20rpx;
+    line-height: 28rpx;
+    font-size: 20rpx;
+    color: rgba(153, 153, 153, 1);
+  }
+
+  .content {
+    line-height: 28rpx;
+    font-size: 24rpx;
+    color: rgba(51, 51, 51, 1);
+  }
+}
+
+.form-item {
+  position: relative;
+  left: 0;
+  top: 0;
+  width: 572rpx;
+  height: 76rpx;
+  border-radius: 38rpx;
+  background: rgba(240, 240, 240, 1);
+}
+
+.smile {
+  position: absolute;
+  left: 27rpx;
+  top: 18rpx;
+  width: 40rpx;
+  height: 40rpx;
+}
+
+input {
+  width: 383rpx;
+  height: 100%;
+  padding: 0 13rpx;
+  margin-left: 67rpx;
+  font-size: 32rpx;
+  color: rgba(51, 51, 51, 1);
+}
+
+.placeholder {
+  color: rgba(166, 166, 166, 1);
+}
+
+.footer-fixed-bottom .btn-send {
+  position: absolute;
+  right: 14rpx;
+  top: 10rpx;
+  z-index: 1;
+  width: 108rpx;
+  height: 56rpx;
+  border-radius: 38rpx;
+  background: rgba(96, 169, 252, 1);
+  font-size: 24rpx;
+  color: #FFF;
+}
+
+.footer-fixed-bottom .btn-like,
+.footer-fixed-bottom .btn-share {
+  width: 48rpx;
+  height: 48rpx;
+  padding: 0 !important;
+  background: transparent;
+
+  image {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.footer-fixed-bottom .btn-like {
+  margin: 0 14rpx 0 10rpx;
+}

htmldev/wxMini/pages/mediaDetail/mediaDetail.wxml

@@ -16,4 +16,54 @@
     <view class="subtitle">{{videoConfig.video_name}}：</view>
     <view class="describe">{{videoConfig.video_introduce}}</view>
   </view>
+  <view class="comment-list">
+    <view class="title">
+      <text>评论</text>
+    </view>
+    <view
+      class="list"
+      wx:for="{{listData}}"
+      wx:key="id">
+      <view class="portrait">
+        <image src="{{item.user_head_img_url}}"></image>
+      </view>
+      <view class="box">
+        <view class="name">{{item.user_nickname}}</view>
+        <view class="create-at">{{item.created_at}}</view>
+        <view class="content">{{item.video_comment}}</view>
+      </view>
+    </view>
+    <view class="pullup-wrapper" wx:if="{{!isRefresh}}">
+      <van-loading
+        wx:if="{{!finished}}"
+        size="24px"
+        type="spinner">加载中...
+      </van-loading>
+    </view>
+  </view>
+</view>
+
+<view
+  class="footer-fixed-bottom"
+  style="box-shadow: none;">
+  <view>
+    <view class="form-item">
+      <image
+        class="smile"
+        src="../../image/common/smile.png"></image>
+      <input
+        placeholder-class="placeholder"
+        value=""
+        placeholder="说点什么吧..."></input>
+      <button class="btn-send">发送</button>
+    </view>
+    <button class="btn-like">
+      <image src="../../image/common/like_1.png"></image>
+    </button>
+    <button
+      class="btn-share"
+      open-type="share">
+      <image src="../../image/common/share_1.png"></image>
+    </button>
+  </view>
 </view>