小程序：最新上架

htmldev/wxMini/README.md

@@ -7,9 +7,9 @@
   - [x] 采购指南 guide 6
     - [x] 商品详情(预售、现货) goodsDetail 8
     - [x] 购物车 shoppingCar 4
-    - 联系商家 contactBusiness 4
-  - 收藏 collection 4
-  - 最新上架 newGoods 4
+    - [x] 联系商家 contactBusiness 4
+  - [x] 收藏 collection 4
+  - [x] 最新上架 newGoods 4
   - VR看菜园 VR 4
   - 频道：村长说农货 media 5
     - 视频详情 mediaDetail 2

htmldev/wxMini/app.json

@@ -11,7 +11,8 @@
     "pages/businessDetail/businessDetail",
     "pages/shoppingCar/shoppingCar",
     "pages/goodsDetail/goodsDetail",
-    "pages/contactBusiness/contactBusiness"
+    "pages/contactBusiness/contactBusiness",
+    "pages/newGoods/newGoods"
   ],
   "permission": {
     "scope.userLocation": {

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

@@ -0,0 +1,23 @@
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {},
+
+  /**
+   * 组件的初始数据
+   */
+  data: {},
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    jumpGoodsDetail() {
+      // this.triggerEvent('jumpGoodsDetail', {})
+      wx.navigateTo({
+        url: '/pages/goodsDetail/goodsDetail'
+      })
+    }
+  }
+})

htmldev/wxMini/components/goods-item-normal/index.json

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

htmldev/wxMini/components/goods-item-normal/index.scss

@@ -0,0 +1,145 @@
+.list {
+  display: flex;
+  align-items: center;
+  width: 690rpx;
+  min-height: 278rpx;
+  padding: 20rpx 22rpx 34rpx 28rpx;
+  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);
+}
+
+.goods-cover-wrap {
+  width: 224rpx;
+  height: 224rpx;
+  border-radius: 16rpx;
+  overflow: hidden;
+
+  .goods-cover {
+    display: block;
+    width: 100%;
+    height: 100%;
+    background: pink;
+  }
+}
+
+.goods-describe {
+  width: calc(100% - 224rpx);
+  padding-left: 24rpx;
+}
+
+.name-wrap {
+  display: flex;
+
+  &.has-tag {
+    .name {
+      max-width: calc(100% - 46rpx);
+    }
+  }
+
+  .name {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    font-size: 32rpx;
+    line-height: 46rpx;
+    color: rgba(31, 51, 73, 1);
+    word-break: break-all;
+    word-wrap: break-word;
+    overflow: hidden;
+  }
+
+  .tag {
+    width: 46rpx;
+    height: 26rpx;
+    margin-top: 10rpx;
+    margin-left: 6rpx;
+    border-radius: 12rpx;
+    background: rgba(255, 76, 44, 1);
+    font-size: 16rpx;
+    line-height: 26rpx;
+    color: rgba(255, 255, 255, 1);
+    text-align: center;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
+.price-wrap {
+  display: flex;
+  align-items: flex-end;
+  margin-top: 16rpx;
+
+  .now {
+    display: flex;
+    align-items: center;
+
+    .unit,
+    .yuan,
+    .jiao {
+      font-size: 28rpx;
+      line-height: 32rpx;
+      color: rgba(31, 51, 73, 1);
+    }
+  }
+
+  .old {
+    margin-left: 26rpx;
+    font-size: 20rpx;
+    line-height: 28rpx;
+    color: rgba(31, 51, 73, 0.6);
+    text-decoration: line-through;
+  }
+}
+
+.star-words {
+  display: flex;
+  flex-flow: row wrap;
+  margin-top: 16rpx;
+
+  .word {
+    margin-left: 6rpx;
+    font-size: 24rpx;
+    line-height: 32rpx;
+    color: rgba(183, 191, 206, 1);
+  }
+}
+
+.key-words-list {
+  display: flex;
+  flex-flow: row wrap;
+  width: 100%;
+  padding-top: 14rpx;
+  margin-top: 14rpx;
+  border-top: 1rpx solid rgba(183, 191, 206, 1);
+
+  .key-words {
+    display: flex;
+    align-items: center;
+    margin-left: 12rpx;
+    margin-top: 14rpx;
+  }
+
+  .key-words:nth-of-type(2n + 1) {
+    margin-left: 0;
+  }
+
+  .label {
+    width: 12rpx;
+    height: 22rpx;
+    background-color: pink;
+  }
+
+  .value {
+    width: 125rpx;
+    margin-left: 2rpx;
+    font-size: 16rpx;
+    line-height: 24rpx;
+    color: rgba(128, 128, 128, 1);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}

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

@@ -0,0 +1,36 @@
+<view class="list">
+  <view class="goods-cover-wrap">
+    <image
+      class="goods-cover"
+      mode="widthFix" src=""></image>
+  </view>
+  <view class="goods-describe">
+    <view class="name-wrap has-tag">
+      <view class="name">名字名字名字</view>
+      <view class="tag">预售</view>
+    </view>
+    <view class="price-wrap">
+      <view class="now">
+        <view class="unit">￥</view>
+        <view class="yuan">99999</view>
+        <view class="jiao">.50</view>
+      </view>
+      <view class="old">￥99999.00</view>
+    </view>
+    <view class="star-words">
+      <text
+        class="word"
+        wx:for="{{['8斤打底', '9成熟', '货车运输三天内到达']}}"
+        wx:key="index">{{item}}</text>
+    </view>
+    <view class="key-words-list">
+      <view
+        class="key-words"
+        wx:for="{{2}}"
+        wx:key="item">
+        <image class="label" src=""></image>
+        <text class="value">销量高销量高销量高销量高</text>
+      </view>
+    </view>
+  </view>
+</view>

htmldev/wxMini/pages/businessDetail/businessDetail.wxml

@@ -22,7 +22,7 @@
   <!--详情-->
 <view
   class="business-info"
-  hidden="{{currentNav === '2'}}">
+  hidden="{{active === '2'}}">
   <text class="phone" user-select>电话：12345678900</text>
   <text class="wechat" user-select>微信：1234567890</text>
   <text class="introduce" user-select>巴啦啦啦，吧啦啦啦啦啦，爸爸啊爸爸爸爸爸爸，爸爸爸爸爸爸。</text>
@@ -30,7 +30,7 @@
   <!--产品-->
 <view
   class="waterfall"
-  hidden="{{currentNav === '1'}}">
+  hidden="{{active === '1'}}">
   <view class="waterfall-left">
     <goods-item-large/>
   </view>

htmldev/wxMini/pages/collection/collection.json

@@ -1,5 +1,6 @@
 {
   "usingComponents": {
-    "customer-tab": "../../components/customer-tab/index"
+    "customer-tab": "../../components/customer-tab/index",
+    "goods-item-normal": "../../components/goods-item-normal/index"
   }
 }

htmldev/wxMini/pages/collection/collection.scss

@@ -9,147 +9,3 @@
 .main {
   padding: 58rpx 0 220rpx;
 }
-
-.list {
-  display: flex;
-  align-items: center;
-  width: 690rpx;
-  min-height: 278rpx;
-  padding: 20rpx 22rpx 34rpx 28rpx;
-  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);
-}
-
-.goods-cover-wrap {
-  width: 224rpx;
-  height: 224rpx;
-  border-radius: 16rpx;
-  overflow: hidden;
-
-  .goods-cover {
-    display: block;
-    width: 100%;
-    height: 100%;
-    background: pink;
-  }
-}
-
-.goods-describe {
-  width: calc(100% - 224rpx);
-  padding-left: 24rpx;
-}
-
-.name-wrap {
-  display: flex;
-
-  &.has-tag {
-    .name {
-      max-width: calc(100% - 46rpx);
-    }
-  }
-
-  .name {
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-    font-size: 32rpx;
-    line-height: 46rpx;
-    color: rgba(31, 51, 73, 1);
-    word-break: break-all;
-    word-wrap: break-word;
-    overflow: hidden;
-  }
-
-  .tag {
-    width: 46rpx;
-    height: 26rpx;
-    margin-top: 10rpx;
-    margin-left: 6rpx;
-    border-radius: 12rpx;
-    background: rgba(255, 76, 44, 1);
-    font-size: 16rpx;
-    line-height: 26rpx;
-    color: rgba(255, 255, 255, 1);
-    text-align: center;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-}
-
-.price-wrap {
-  display: flex;
-  align-items: flex-end;
-  margin-top: 16rpx;
-
-  .now {
-    display: flex;
-    align-items: center;
-
-    view {
-      font-size: 28rpx;
-      line-height: 32rpx;
-      color: rgba(31, 51, 73, 1);
-    }
-  }
-
-  .old {
-    margin-left: 26rpx;
-    font-size: 20rpx;
-    line-height: 28rpx;
-    color: rgba(31, 51, 73, 0.6);
-    text-decoration: line-through;
-  }
-}
-
-.star-words {
-  display: flex;
-  flex-flow: row wrap;
-  margin-top: 16rpx;
-
-  text {
-    margin-left: 6rpx;
-    font-size: 24rpx;
-    line-height: 32rpx;
-    color: rgba(183, 191, 206, 1);
-  }
-}
-
-.key-words-list {
-  display: flex;
-  flex-flow: row wrap;
-  width: 100%;
-  padding-top: 14rpx;
-  margin-top: 14rpx;
-  border-top: 1rpx solid rgba(183, 191, 206, 1);
-
-  .key-words {
-    display: flex;
-    align-items: center;
-    margin-left: 12rpx;
-    margin-top: 14rpx;
-  }
-
-  .key-words:nth-of-type(2n + 1) {
-    margin-left: 0;
-  }
-
-  .label {
-    width: 12rpx;
-    height: 22rpx;
-    background-color: pink;
-  }
-
-  .value {
-    width: 125rpx;
-    margin-left: 2rpx;
-    font-size: 16rpx;
-    line-height: 24rpx;
-    color: rgba(128, 128, 128, 1);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-}

htmldev/wxMini/pages/collection/collection.wxml

@@ -15,40 +15,6 @@
     active="{{active}}"
     bind:change="handleNav"/>
   <view class="main">
-    <view class="list">
-      <view class="goods-cover-wrap">
-        <image
-          class="goods-cover"
-          mode="widthFix" src=""></image>
-      </view>
-      <view class="goods-describe">
-        <view class="name-wrap has-tag">
-          <view class="name">名字名字名字</view>
-          <view class="tag">预售</view>
-        </view>
-        <view class="price-wrap">
-          <view class="now">
-            <view class="unit">￥</view>
-            <view class="yuan">99999</view>
-            <view class="jiao">.50</view>
-          </view>
-          <view class="old">￥99999.00</view>
-        </view>
-        <view class="star-words">
-          <text
-            wx:for="{{['8斤打底', '9成熟', '货车运输三天内到达']}}"
-            wx:key="index">{{item}}</text>
-        </view>
-        <view class="key-words-list">
-          <view
-            class="key-words"
-            wx:for="{{2}}"
-            wx:key="item">
-            <image class="label" src=""></image>
-            <text class="value">销量高销量高销量高销量高</text>
-          </view>
-        </view>
-      </view>
-    </view>
+    <goods-item-normal/>
   </view>
 </view>

htmldev/wxMini/pages/home/home.js

@@ -169,5 +169,10 @@ Page({
         url: `/pages/${path}/${path}`
       })
     }
+  },
+  jumpNewGoods() {
+    wx.navigateTo({
+      url: '/pages/newGoods/newGoods'
+    })
   }
 })

htmldev/wxMini/pages/home/home.wxml

@@ -46,7 +46,10 @@
   <!-- 核心入口：最新上架、VR看菜园、频道：村长说农货 -->
   <view class="marketing-wrap">
     <view>
-      <image class="new-goods" src=""></image>
+      <image
+        class="new-goods"
+        src=""
+        bind:tap="jumpNewGoods"></image>
       <image class="vr" src=""></image>
     </view>
     <image class="media" src=""></image>

htmldev/wxMini/pages/newGoods/newGoods.js

@@ -0,0 +1,82 @@
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    nav: [
+      {
+        name: '最新',
+        value: '1'
+      },
+      {
+        name: '热度最高',
+        value: '2'
+      }
+    ],
+    active: '1'
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  },
+  handleNav(e) {
+    const { value } = e.detail
+
+    this.setData({
+      active: value
+    })
+  }
+})

htmldev/wxMini/pages/newGoods/newGoods.json

@@ -0,0 +1,6 @@
+{
+  "usingComponents": {
+    "customer-tab": "../../components/customer-tab/index",
+    "goods-item-normal": "../../components/goods-item-normal/index"
+  }
+}

htmldev/wxMini/pages/newGoods/newGoods.scss

@@ -0,0 +1,11 @@
+.wrapper {
+  padding-top: 20rpx;
+}
+
+.margin-bottom-20 {
+  margin-bottom: 20rpx;
+}
+
+.main {
+  padding: 58rpx 0 220rpx;
+}

htmldev/wxMini/pages/newGoods/newGoods.wxml

@@ -0,0 +1,20 @@
+<view class="wrapper">
+  <view class="app_page-header-search margin-bottom-20">
+    <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>
+  <customer-tab
+    nav="{{nav}}"
+    active="{{active}}"
+    bind:change="handleNav"/>
+  <view class="main">
+    <goods-item-normal/>
+  </view>
+</view>