小程序：新增商品详情、联系商家页

htmldev/wxMini/components/goods-item/index.js

@@ -2,21 +2,19 @@ Component({
   /**
    * 组件的属性列表
    */
-  properties: {
-
-  },
+  properties: {},
 
   /**
    * 组件的初始数据
    */
-  data: {
-
-  },
+  data: {},
 
   /**
    * 组件的方法列表
    */
   methods: {
-
+    jumpGoodsDetail() {
+      this.triggerEvent('jumpGoodsDetail', {})
+    }
   }
 })

htmldev/wxMini/components/goods-item/index.wxml

@@ -1,8 +1,10 @@
-<view class="goods-item">
+<view
+  class="goods-item"
+  bind:tap="jumpGoodsDetail">
   <view class="goods-cover-wrap">
     <image
-    class="goods-cover"
-     mode="widthFix" src=""></image>
+      class="goods-cover"
+      mode="widthFix" src=""></image>
   </view>
   <view class="name-wrap">
     <view class="tag">精选</view>
@@ -18,12 +20,12 @@
     <view class="old">￥99999.00</view>
   </view>
   <view class="key-words-list">
-    <view 
-    class="list" 
-    wx:for="{{3}}" 
-    wx:key="item">
+    <view
+      class="list"
+      wx:for="{{3}}"
+      wx:key="item">
       <image class="label" src=""></image>
       <text class="value">销量高销量高销量高销量高</text>
     </view>
   </view>
-</view>
+</view>

htmldev/wxMini/pages/goodsDetail/goodsDetail.js

@@ -3,7 +3,20 @@ Page({
   /**
    * 页面的初始数据
    */
-  data: {},
+  data: {
+    background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
+    nav: [
+      {
+        name: '详情',
+        value: '1'
+      },
+      {
+        name: '产品',
+        value: '2'
+      }
+    ],
+    currentNav: '1'
+  },
 
   /**
    * 生命周期函数--监听页面加载

htmldev/wxMini/pages/goodsDetail/goodsDetail.scss

@@ -0,0 +1,24 @@
+.page-section {
+  width: 100%;
+
+  swiper {
+    width: 100%;
+    height: 562rpx;
+    overflow: hidden;
+  }
+
+  .swiper-item {
+    height: 100%;
+  }
+
+  .swiper-item image {
+    display: block;
+    width: 100%;
+    height: 100%;
+    background: pink;
+  }
+}
+
+.main-information {
+  width: 658rpx;
+}

htmldev/wxMini/pages/goodsDetail/goodsDetail.wxml

@@ -0,0 +1,26 @@
+<!-- 轮播 -->
+<view class="page-section">
+  <swiper
+    indicator-dots="{{true}}"
+    indicator-color="rgba(130, 130, 130, 1)"
+    indicator-active-color="#FFF"
+    autoplay="{{false}}">
+    <block wx:for="{{background}}" wx:key="*this">
+      <swiper-item>
+        <view class="swiper-item {{item}}">
+          <image src=""></image>
+        </view>
+      </swiper-item>
+    </block>
+  </swiper>
+</view>
+<view class="main-information">
+  <view class="tag-list">
+    <text>蔬菜</text>
+  </view>
+  <text selectable>桃形李桃形李桃形李桃形李桃形李桃形李桃形李桃形李桃形李桃形李桃形李桃形李</text>
+  <view class="unit-price">
+    <text class="price">¥23.00</text>
+    <text class="unit">/ kg</text>
+  </view>
+</view>

htmldev/wxMini/pages/guide/guide.js

@@ -111,5 +111,10 @@ Page({
       currentCategory: item.id,
       navScrollLeft: 0
     })
+  },
+  jumpGoodsDetail(item) {
+    wx.navigateTo({
+      url: '/pages/goodsDetail/goodsDetail'
+    })
   }
 })

htmldev/wxMini/pages/guide/guide.wxml

@@ -32,7 +32,7 @@
     class="waterfall"
     hidden="{{currentNav === '1'}}">
     <view class="waterfall-left">
-      <goods-item/>
+      <goods-item :jumpGoodsDetail="jumpGoodsDetail"/>
     </view>
     <view class="waterfall-right">
       <goods-item/>

htmldev/wxMini/project.private.config.json

@@ -8,7 +8,7 @@
       "list": [
         {
           "name": "111",
-          "pathName": "pages/guide/guide",
+          "pathName": "pages/goodsDetail/goodsDetail",
           "query": "",
           "launchMode": "default",
           "scene": null