小程序：新增VR看菜园

htmldev/wxMini/README.md

@@ -10,7 +10,7 @@
     - [x] 联系商家 contactBusiness 4
   - [x] 收藏 collection 4
   - [x] 最新上架 newGoods 4
-  - VR看菜园 VR 4
+  - [x] VR看菜园 VR 4
   - 频道：村长说农货 media 5
     - 视频详情 mediaDetail 2
 - 优秀合作社 partner 4

htmldev/wxMini/pages/VR/VR.js

@@ -3,7 +3,9 @@ Page({
   /**
    * 页面的初始数据
    */
-  data: {},
+  data: {
+    background: ['demo-text-1', 'demo-text-2', 'demo-text-3']
+  },
 
   /**
    * 生命周期函数--监听页面加载

htmldev/wxMini/pages/VR/VR.scss

@@ -0,0 +1,137 @@
+.wrapper {
+  width: 100%;
+  padding-top: 20rpx;
+}
+
+.page-section {
+  width: 100%;
+  margin: 42rpx auto 48rpx;
+
+  swiper {
+    width: 100%;
+    height: 590rpx;
+  }
+
+  .swiper-item-wrap {
+    width: 590rpx !important;
+    padding-left: 30rpx;
+  }
+
+  .swiper-item {
+    position: relative;
+    left: 0;
+    top: 0;
+    width: 590rpx;
+    height: 100%;
+    border-radius: 24rpx;
+    overflow: hidden;
+  }
+
+  .swiper-item image {
+    display: block;
+    width: 100%;
+    height: 100%;
+    background: pink;
+  }
+
+  .info {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    z-index: 1;
+    width: 100%;
+    padding: 0 28rpx 20rpx;
+  }
+
+  .name {
+    font-size: 36rpx;
+    line-height: 44rpx;
+    font-weight: 500;
+    color: rgba(255, 255, 255, 1);
+    word-break: break-all;
+    word-wrap: break-word;
+  }
+
+  .address {
+    width: 100%;
+    font-size: 20rpx;
+    line-height: 32rpx;
+    color: rgba(229, 229, 229, 1);
+    word-break: break-all;
+    word-wrap: break-word;
+  }
+}
+
+.page-title {
+  position: relative;
+  left: 0;
+  top: 0;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding-left: 46rpx;
+  line-height: 40rpx;
+  font-size: 36rpx;
+  font-weight: 500;
+  color: #1F1F39;
+
+  &:before {
+    content: '';
+    position: absolute;
+    left: 16rpx;
+    top: 1rpx;
+    width: 14rpx;
+    height: 37rpx;
+    border-radius: 40rpx;
+    background: #91B379;
+  }
+}
+
+.main {
+  padding: 48rpx 0 278rpx;
+}
+
+.list {
+  display: flex;
+  width: 690rpx;
+  min-height: 278rpx;
+  padding: 20rpx 28rpx 34rpx;
+  margin: 0 auto 20rpx;
+  border-radius: 24rpx;
+  background: rgba(255, 255, 255, 1);
+  box-shadow: 0 4rpx 8rpx 0 rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+
+  .photo-wrap {
+    width: 224rpx;
+    height: 224rpx;
+    border-radius: 16rpx;
+    overflow: hidden;
+
+    image {
+      display: block;
+      width: 100%;
+      height: 100%;
+      background: pink;
+    }
+  }
+
+  .info {
+    width: calc(100% - 224rpx);
+    padding-left: 28rpx;
+    padding-top: 18rpx;
+  }
+
+  .name {
+    font-size: 32rpx;
+    line-height: 46rpx;
+    color: rgba(31, 51, 73, 1);
+  }
+
+  .address {
+    margin-top: 8rpx;
+    font-size: 24rpx;
+    line-height: 34rpx;
+    color: rgba(153, 153, 153, 1);
+  }
+}

htmldev/wxMini/pages/VR/VR.wxml

@@ -0,0 +1,48 @@
+<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
+      interval="{{2000}}"
+      autoplay="{{false}}">
+      <block
+        wx:for="{{background}}"
+        wx:key="*this">
+        <swiper-item
+          class="swiper-item-wrap">
+          <view class="swiper-item {{item}}">
+            <image src=""></image>
+            <view class="info">
+              <view class="name">嵊州菜园</view>
+              <view class="address">浙江省嵊州菜园</view>
+            </view>
+          </view>
+        </swiper-item>
+      </block>
+    </swiper>
+  </view>
+  <view class="page-title">VR菜园</view>
+  <view class="main">
+    <view
+      class="list"
+      wx:for="{{[1, 2, 3]}}"
+      wx:key="item">
+      <view class="photo-wrap">
+        <image src=""></image>
+      </view>
+      <view class="info">
+        <view class="name">嵊州菜园</view>
+        <view class="address">浙江省嵊州菜园</view>
+      </view>
+    </view>
+  </view>
+</view>

htmldev/wxMini/pages/home/home.js

@@ -170,9 +170,11 @@ Page({
       })
     }
   },
-  jumpNewGoods() {
+  openMarketing(e) {
+    const { page } = e.currentTarget.dataset
+
     wx.navigateTo({
-      url: '/pages/newGoods/newGoods'
+      url: `/pages/${page}/${page}`
     })
   }
 })

htmldev/wxMini/pages/home/home.wxml

@@ -49,10 +49,19 @@
       <image
         class="new-goods"
         src=""
-        bind:tap="jumpNewGoods"></image>
-      <image class="vr" src=""></image>
+        data-page="newGoods"
+        bind:tap="openMarketing"></image>
+      <image
+        class="vr"
+        data-page="VR"
+        src=""
+        bind:tap="openMarketing"></image>
     </view>
-    <image class="media" src=""></image>
+    <image
+      class="media"
+      data-page="media"
+      src=""
+      bind:tap="openMarketing"></image>
   </view>
   <view class="excellent-goods-title">优秀产品</view>
   <van-tabs active="{{ currentCategory }}" color="transparent" title-active-color="#FFFFFF"