Browse Source

小程序:视频详情

panyong 2 years ago
parent
commit
58e05bb6f9

+ 1 - 1
htmldev/wxMini/README.md

@@ -12,7 +12,7 @@
   - [x] 最新上架 newGoods 4
   - [x] VR看菜园 VR 4
   - [x] 频道:村长说农货 media 5
-    - 视频详情 mediaDetail 2
+    - [x] 视频详情 mediaDetail 2
 - 优秀合作社 partner 4
 - 农事天地 news 4
 - 我的 mine 4

+ 7 - 0
htmldev/wxMini/pages/media/media.js

@@ -87,5 +87,12 @@ Page({
     this.setData({
       active: value
     })
+  },
+  jumpMediaDetail(e) {
+    const { item } = e.currentTarget.dataset
+
+    wx.navigateTo({
+      url: '/pages/mediaDetail/mediaDetail?videoConfig=' + item
+    })
   }
 })

+ 3 - 1
htmldev/wxMini/pages/media/media.wxml

@@ -53,7 +53,9 @@
     <view
       class="list"
       wx:for="{{4}}"
-      wx:key="item">
+      wx:key="item"
+      data-item="{{item}}"
+      bind:tap="jumpMediaDetail">
       <video-item-normal/>
     </view>
   </view>

+ 84 - 0
htmldev/wxMini/pages/mediaDetail/mediaDetail.scss

@@ -0,0 +1,84 @@
+.wrapper {
+  width: 100%;
+  padding-bottom: 100rpx;
+}
+
+video {
+  display: block;
+  width: 100%;
+  height: 422rpx;
+}
+
+.main {
+  padding: 24rpx 24rpx 0 28rpx;
+}
+
+button.btn[type="default"] {
+  width: 698rpx;
+  height: 80rpx;
+  border-radius: 40rpx;
+  border: 2rpx solid rgba(145, 179, 121, 1);
+  font-size: 28rpx;
+  color: rgba(145, 179, 121, 1);
+  background-color: transparent;
+}
+
+.title {
+  display: flex;
+  font-size: 0;
+
+  text {
+    position: relative;
+    left: 0;
+    top: 0;
+    font-size: 32rpx;
+    font-weight: 500;
+    line-height: 46rpx;
+    color: rgba(51, 51, 51, 1);
+
+    &:after {
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      z-index: -1;
+      content: '';
+      width: 100%;
+      height: 14rpx;
+      background: rgba(145, 179, 121, 0.6);
+    }
+  }
+}
+
+.name-list-title {
+  margin: 36rpx 0 24rpx;
+}
+
+.name-list {
+  display: flex;
+  flex-flow: row wrap;
+  line-height: 40rpx;
+  font-size: 28rpx;
+  color: rgba(101, 101, 101, 1);
+  word-break: break-all;
+  word-wrap: break-word;
+}
+
+.video-title {
+  margin: 48rpx 0 22rpx;
+}
+
+.subtitle {
+  line-height: 40rpx;
+  font-size: 28rpx;
+  font-weight: 500;
+  color: rgba(77, 77, 77, 1);
+}
+
+.describe {
+  margin-top: 12rpx;
+  line-height: 54rpx;
+  font-size: 28rpx;
+  color: rgba(101, 101, 101, 1);
+  word-break: break-all;
+  word-wrap: break-word;
+}

+ 23 - 0
htmldev/wxMini/pages/mediaDetail/mediaDetail.wxml

@@ -0,0 +1,23 @@
+<view class="wrapper">
+  <video
+    src=""
+    object-fit="cover"
+    poster=""
+    show-mute-btn="{{true}}"
+    play-btn-position="center"></video>
+  <view class="main">
+    <button
+      class="btn"
+      type="default">查看附件
+    </button>
+    <view class="title name-list-title">
+      <text>出境人员</text>
+    </view>
+    <view class="name-list">张三 李四</view>
+    <view class="title video-title">
+      <text>影片内容</text>
+    </view>
+    <view class="subtitle">吧啦农务:</view>
+    <view class="describe">吧啦啊啊啊啊啊啊啊啊啊啊啊,吧啦啊啊啊啊啊啊啊啊啊啊啊吧啦啊啊啊啊啊啊啊啊啊啊啊。</view>
+  </view>
+</view>

+ 1 - 13
htmldev/wxMini/project.private.config.json

@@ -3,19 +3,7 @@
     "urlCheck": false,
     "compileHotReLoad": true
   },
-  "condition": {
-    "miniprogram": {
-      "list": [
-        {
-          "name": "111",
-          "pathName": "pages/leavingAMessage/leavingAMessage",
-          "query": "",
-          "launchMode": "default",
-          "scene": null
-        }
-      ]
-    }
-  },
+  "condition": {},
   "description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档:https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
   "libVersion": "2.13.2",
   "projectname": "%E5%A7%8B%E5%AE%81%E5%86%9C%E4%B8%9A"