小程序：村长说农货

htmldev/wxMini/README.md

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

htmldev/wxMini/pages/media/child/video-item-normal/index.js

@@ -0,0 +1,16 @@
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {},
+
+  /**
+   * 组件的初始数据
+   */
+  data: {},
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {}
+})

htmldev/wxMini/pages/media/child/video-item-normal/index.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

htmldev/wxMini/pages/media/child/video-item-normal/index.scss

@@ -0,0 +1,77 @@
+.photo-wrap {
+  position: relative;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 194rpx;
+  overflow: hidden;
+
+  .photo {
+    display: block;
+    width: 100%;
+    height: 100%;
+    background: pink;
+  }
+
+  .play {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    z-index: 1;
+    width: 53rpx;
+    height: 53rpx;
+    transform: translate(-50%, -50%);
+    background: pink;
+  }
+
+  .pv {
+    position: absolute;
+    left: 14rpx;
+    top: 12rpx;
+    z-index: 1;
+    font-size: 24rpx;
+    line-height: 34rpx;
+    color: rgba(255, 255, 255, 1);
+  }
+}
+
+.video-name {
+  width: 100%;
+  padding: 0 12rpx;
+  margin-top: 12rpx;
+  font-size: 24rpx;
+  line-height: 34rpx;
+  color: rgba(24, 26, 43, 1);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.data-detail {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 12rpx 18rpx 20rpx;
+  margin-top: 12rpx;
+  border-top: 2rpx solid rgba(245, 245, 245, 1);
+
+  .box {
+    display: flex;
+    align-items: center;
+    flex: 1;
+  }
+
+  .icon-praise,
+  .icon-message,
+  .icon-share {
+    width: 27rpx;
+    height: 27rpx;
+    background: pink;
+  }
+
+  .data {
+    font-size: 24rpx;
+    line-height: 28rpx;
+    color: rgba(153, 153, 153, 1);
+  }
+}

htmldev/wxMini/pages/media/child/video-item-normal/index.wxml

@@ -0,0 +1,20 @@
+<view class="photo-wrap">
+  <image class="photo" src=""></image>
+  <image class="play" src=""></image>
+  <text class="pv">3万次播放</text>
+</view>
+<view class="video-name">视频名称视频名称视频名</view>
+<view class="data-detail">
+  <view class="box">
+    <image class="icon-praise" src=""></image>
+    <text class="data">99+</text>
+  </view>
+  <view class="box">
+    <image class="icon-message" src=""></image>
+    <text class="data">99+</text>
+  </view>
+  <view class="box">
+    <image class="icon-share" src=""></image>
+    <text class="data">99+</text>
+  </view>
+</view>

htmldev/wxMini/pages/media/media.js

@@ -3,7 +3,21 @@ Page({
   /**
    * 页面的初始数据
    */
-  data: {},
+  data: {
+    background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
+    swiperActiveDot: 0,
+    nav: [
+      {
+        name: '最新视频',
+        value: '1'
+      },
+      {
+        name: '播放最高',
+        value: '2'
+      }
+    ],
+    active: '1'
+  },
 
   /**
    * 生命周期函数--监听页面加载
@@ -59,5 +73,19 @@ Page({
    */
   onShareAppMessage() {
 
+  },
+  handleSwiperChange(e) {
+    const { current } = e.detail
+
+    this.setData({
+      swiperActiveDot: current
+    })
+  },
+  handleNav(e) {
+    const { value } = e.detail
+
+    this.setData({
+      active: value
+    })
   }
 })

htmldev/wxMini/pages/media/media.json

@@ -1,3 +1,6 @@
 {
-  "usingComponents": {}
-}
+  "usingComponents": {
+    "customer-tab": "../../components/customer-tab/index",
+    "video-item-normal": "./child/video-item-normal/index"
+  }
+}

htmldev/wxMini/pages/media/media.scss

@@ -0,0 +1,125 @@
+.wrapper {
+  width: 100%;
+  padding-top: 20rpx;
+}
+
+.page-section {
+  width: 100%;
+  margin: 22rpx auto 40rpx;
+
+  swiper {
+    height: 360rpx;
+  }
+
+  .swiper-item {
+    position: relative;
+    left: 0;
+    top: 0;
+    width: 690rpx;
+    height: 100%;
+    margin: 0 auto;
+    border-radius: 24rpx;
+    overflow: hidden;
+  }
+
+  .photo {
+    display: block;
+    width: 100%;
+    height: 100%;
+    background: pink;
+  }
+
+  .info {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    padding: 0 24rpx 8rpx;
+  }
+
+  .label-wrap,
+  .value-wrap {
+    display: flex;
+    align-items: center;
+  }
+
+  .value-wrap {
+    width: calc(100% - 118rpx);
+  }
+
+  .icon {
+    width: 35rpx;
+    height: 34rpx;
+    background: pink;
+  }
+
+  .label,
+  .name {
+    font-size: 28rpx;
+    line-height: 46rpx;
+    color: rgba(255, 255, 255, 1);
+  }
+
+  .name,
+  .address {
+    max-width: 50%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .address {
+    padding-left: 6rpx;
+    font-size: 20rpx;
+    line-height: 46rpx;
+    color: rgba(229, 229, 229, 1);
+  }
+
+  .swiper-dots {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 20rpx;
+
+    & > view {
+      width: 16rpx;
+      height: 16rpx;
+      margin-left: 16rpx;
+      border-radius: 6rpx;
+      background: rgba(145, 179, 121, 0.6);
+
+      &:nth-of-type(1) {
+        margin-left: 0;
+      }
+
+      &.active {
+        background: rgba(145, 179, 121, 1);
+      }
+    }
+  }
+}
+
+.main {
+  display: flex;
+  justify-content: center;
+  flex-flow: row wrap;
+  padding: 30rpx 0 314rpx;
+}
+
+.list {
+  width: 336rpx;
+  min-height: 314rpx;
+  margin-left: 18rpx;
+  margin-bottom: 20rpx;
+  border-radius: 8rpx;
+  background: rgba(255, 255, 255, 1);
+  box-shadow: 0 4rpx 8rpx 0 rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+
+  &:nth-of-type(2n + 1) {
+    margin-left: 0;
+  }
+}

htmldev/wxMini/pages/media/media.wxml

@@ -0,0 +1,60 @@
+<view class="wrapper">
+  <view class="app_page-header-search">
+    <view class="app_page-header-search-warp app_width-690">
+      <label for="header-search">
+        <image src=""></image>
+      </label>
+      <input
+        placeholder-class="app_header-search-placeholder"
+        value=""
+        placeholder="搜索信息"></input>
+    </view>
+  </view>
+  <view class="page-section">
+    <swiper
+      indicator-color="rgba(145, 179, 121, 0.6)"
+      indicator-active-color="rgba(145, 179, 121, 1)"
+      interval="{{2000}}"
+      autoplay="{{false}}"
+      bind:change="handleSwiperChange">
+      <block
+        wx:for="{{background}}"
+        wx:key="*this">
+        <swiper-item
+          class="swiper-item-wrap">
+          <view class="swiper-item {{item}}">
+            <image class="photo" src=""></image>
+            <view class="info">
+              <view class="label-wrap">
+                <image class="icon" src=""></image>
+                <text class="label">频道：</text>
+              </view>
+              <view class="value-wrap">
+                <view class="name">村长说农货</view>
+                <view class="address">浙江省嵊州菜园</view>
+              </view>
+            </view>
+          </view>
+        </swiper-item>
+      </block>
+    </swiper>
+    <view class="swiper-dots">
+      <view
+        class="{{swiperActiveDot === index ? 'active' : ''}}"
+        wx:for="{{background}}"
+        wx:key="index"></view>
+    </view>
+  </view>
+  <customer-tab
+    nav="{{nav}}"
+    active="{{active}}"
+    bind:change="handleNav"/>
+  <view class="main">
+    <view
+      class="list"
+      wx:for="{{4}}"
+      wx:key="item">
+      <video-item-normal/>
+    </view>
+  </view>
+</view>