小程序：初始化项目

htmldev/wxMini/README.md

@@ -1,26 +1,26 @@
 ### 页面
 
-- 首页 home
-  - 用户消息 leavingAMessage.
-  - 供应商 business
-    - 供应商详情 businessDetail
-  - 采购指南 category
-  - 收藏 collection
-  - 最新上架 newGoods
-  - VR看菜园 VR
-  - 频道：村长说农货 media
-    - 视频详情 mediaDetail
-- 优秀合作社 cooperative
-- 农事天地 news
-- 我的 mine
-- 商品详情 goodsDetail
-- 购物车 shoppingCar
-- 联系商家 contactBusiness
-- 商户端 businessHome
-  - 产品管理 businessGoodsManage
-    - 产品新增/编辑 businessGoodsEdit
-  - 视频管理 businessVideoManage
-    - 视频新增/编辑 businessVideoEdit
-  - 商户消息 businessLeavingAMessage
+- 首页 home 12
+  - 用户消息 leavingAMessage 4
+  - 供应商 business 4
+    - 供应商详情 businessDetail 4
+  - 采购指南 category 6
+  - 收藏 collection 4
+  - 最新上架 newGoods 4
+  - VR看菜园 VR 4
+  - 频道：村长说农货 media 5
+    - 视频详情 mediaDetail 2
+- 优秀合作社 cooperative 4
+- 农事天地 news 4
+- 我的 mine 4
+- 商品详情 goodsDetail 8
+- 购物车 shoppingCar 4
+- 联系商家 contactBusiness 4
+- 商户端 businessHome 4
+  - 产品管理 businessGoodsManage 6
+    - 产品新增/编辑 businessGoodsEdit 16
+  - 视频管理 businessVideoManage 4 
+    - 视频新增/编辑 businessVideoEdit 16
+  - 商户消息 businessLeavingAMessage 4
 
 ### TODO

htmldev/wxMini/app.json

@@ -15,7 +15,7 @@
   "window": {
     "backgroundTextStyle": "light",
     "navigationBarBackgroundColor": "#fff",
-    "navigationBarTitleText": "始宁农业",
+    "navigationBarTitleText": "学习",
     "navigationBarTextStyle": "black"
   },
   "sitemapLocation": "sitemap.json",

htmldev/wxMini/pages/home/child/goodsItem.js

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

htmldev/wxMini/pages/home/child/goodsItem.json

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

htmldev/wxMini/pages/home/child/goodsItem.wxml

@@ -0,0 +1,29 @@
+<view class="goods-item">
+  <view class="goods-cover-wrap">
+    <image
+    class="goods-cover"
+     mode="widthFix" src=""></image>
+  </view>
+  <view class="name-wrap">
+    <view class="tag">精选</view>
+    <view class="name">名字名字名字名字名字名字名字名字名字</view>
+  </view>
+  <view class="dessciption">这是一段描述这是一段描述这是一段描述这是一段描述这是一段描述这是一段描述</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="key-words-list">
+    <view 
+    class="list" 
+    wx:for="{{3}}" 
+    wx:key="item">
+      <image class="label" src=""></image>
+      <text class="value">销量高销量高销量高销量高</text>
+    </view>
+  </view>
+</view>

htmldev/wxMini/pages/home/child/goodsItem.wxss

@@ -0,0 +1,129 @@
+.goods-item {
+  display: flex;
+  flex-direction: column;
+  width: 330rpx;
+  border-radius: 16rpx;
+  background: rgba(255, 255, 255, 1);
+  box-shadow: 0 4rpx 8rpx 0 rgba(0, 0, 0, 0.2);
+}
+
+.goods-cover-wrap {
+  width: 100%;
+  height: 352rpx;
+  border-radius: 16rpx;
+  overflow: hidden;
+}
+
+.goods-cover-wrap .goods-cover {
+  display: block;
+  width: 100%;
+  height: 100%;
+  background: pink;
+}
+
+.name-wrap {
+  display: flex;
+  align-items: center;
+  padding: 15rpx 20rpx 10rpx;
+}
+
+.name-wrap .tag {
+  width: 44rpx;
+  height: 24rpx;
+  border-radius: 12rpx;
+  background: rgba(255, 76, 44, 1);
+  line-height: 24rpx;
+  font-size: 16rpx;
+  color: #FFF;
+  text-align: center;
+}
+
+.name-wrap .name {
+  width: calc(100% - 54rpx);
+  margin-left: 10rpx;
+  font-size: 28rpx;
+  color: rgba(57, 67, 87, 1);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.dessciption {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  width: 306rpx;
+  margin: 0 auto;
+  overflow: hidden;
+  font-size: 24rpx;
+  line-height: 36rpx;
+  color: rgba(183, 191, 206, 1);
+}
+
+.price-wrap {
+  display: flex;
+  align-items: flex-end;
+  width: 306rpx;
+  margin: 0 auto;
+  padding-bottom: 10rpx;
+}
+
+.price-wrap .now {
+  display: flex;
+  align-items: flex-end;
+  color: rgba(255, 76, 44, 1);
+}
+
+.price-wrap .unit,
+.price-wrap .yuan {
+  font-size: 40rpx;
+}
+
+.price-wrap .jiao {
+  padding-bottom: 4rpx;
+  font-size: 28rpx;
+}
+
+.price-wrap .old {
+  padding-bottom: 6rpx;
+  margin-left: 10rpx;
+  font-size: 22rpx;
+  color: rgba(179, 188, 205, 1);
+  text-decoration: line-through;
+}
+
+.key-words-list {
+  display: flex;
+  flex-flow: row wrap;
+  width: 303rpx;
+  padding: 10rpx 0 20rpx;
+  margin: 0 auto;
+  border-top: 2rpx solid rgba(248, 248, 249, 1);
+}
+
+.key-words-list .list {
+  display: flex;
+  align-items: center;
+  margin-top: 10rpx;
+  margin-left: 12rpx;
+}
+
+.key-words-list .list:nth-of-type(2n + 1) {
+  margin-left: 0;
+}
+
+.key-words-list .label {
+  width: 12rpx;
+  height: 16rpx;
+  background-color: pink;
+}
+
+.key-words-list .value{
+  width: 125rpx;
+  margin-left: 2rpx;
+  font-size: 16rpx;
+  color: rgba(128, 128, 128, 1);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

htmldev/wxMini/pages/home/home.js

@@ -1,3 +1,6 @@
+let leftHeight = 0
+let rightHeight = 0
+let query = null
 Page({
 
   /**
@@ -10,12 +13,11 @@ Page({
       '小程序上下滚动效果总结',
       '这是一行上下滚动的文字，文字最好短点，超过一行省略'
     ],
-    headerNav: [
-      {
-        icon: '',
-        name: '供应商',
-        path: ''
-      },
+    headerNav: [{
+      icon: '',
+      name: '供应商',
+      path: ''
+    },
       {
         icon: '',
         name: '采购指南',
@@ -32,11 +34,10 @@ Page({
         path: ''
       }
     ],
-    category: [
-      {
-        name: '全部',
-        id: '1'
-      },
+    category: [{
+      name: '全部',
+      id: '1'
+    },
       {
         name: '分类',
         id: '2'
@@ -58,7 +59,10 @@ Page({
         id: '6'
       }
     ],
-    currentCategory: ''
+    currentCategory: '',
+    list: [],
+    leftList: [],
+    rightList: []
   },
 
   /**
@@ -115,5 +119,33 @@ Page({
    */
   onShareAppMessage () {
 
+  },
+  async isLeft () {
+    const {
+      list,
+      leftList,
+      rightList
+    } = this.data
+    query = wx.createSelectorQuery()
+    for (const item of list) {
+      leftHeight <= rightHeight ? leftList.push(item) : rightList.push(item)
+      await this.getBoxHeight(leftList, rightList)
+    }
+  },
+  getBoxHeight (leftList, rightList) {
+    return new Promise((resolve, reject) => {
+      this.setData({
+        leftList,
+        rightList
+      }, () => {
+        query.select('.waterfall-left').boundingClientRect()
+        query.select('.waterfall-right').boundingClientRect()
+        query.exec((res) => {
+          leftHeight = res[0].height
+          rightHeight = res[1].height
+          resolve()
+        })
+      })
+    })
   }
 })

htmldev/wxMini/pages/home/home.json

@@ -1,9 +1,10 @@
 {
   "usingComponents": {
     "van-tab": "@vant/weapp/tab/index",
-    "van-tabs": "@vant/weapp/tabs/index"
+    "van-tabs": "@vant/weapp/tabs/index",
+    "goods-item": "./child/goodsItem"
   },
-  "navigationBarTitleText": "始宁农业",
+  "navigationBarTitleText": "学习",
   "navigationBarBackgroundColor": "#CCCCCC",
   "backgroundColor": "#F6F6F6",
   "backgroundTextStyle": "dark",

htmldev/wxMini/pages/home/home.wxml

@@ -5,7 +5,6 @@
         <image src=""></image>
       </label>
       <input
-        id="header-search"
         placeholder-class="header-search-placeholder"
         value=""
         placeholder="搜索"></input>
@@ -40,9 +39,7 @@
       interval="{{2000}}"
       circular="{{true}}"
       autoplay="{{true}}">
-      <block
-        wx:for="{{txtlist}}"
-        wx:key="*this">
+      <block wx:for="{{txtlist}}" wx:key="*this">
         <swiper-item>
           <view class="swiper-item {{item}}">{{item}}</view>
         </swiper-item>
@@ -51,10 +48,7 @@
   </view>
   <!--顶部导航-->
   <view class="header-nav">
-    <view
-      class="nav"
-      wx:for="{{headerNav}}"
-      wx:key="index">
+    <view class="nav" wx:for="{{headerNav}}" wx:key="index">
       <image src=""></image>
       <text>{{item.name}}</text>
     </view>
@@ -62,16 +56,10 @@
   <!-- 核心入口：最新上架、VR看菜园、频道：村长说农货 -->
   <view class="marketing-wrap">
     <view>
-      <image
-        class="new-goods"
-        src=""></image>
-      <image
-        class="vr"
-        src=""></image>
+      <image class="new-goods" src=""></image>
+      <image class="vr" src=""></image>
     </view>
-    <image
-      class="media"
-      src=""></image>
+    <image class="media" src=""></image>
   </view>
   <view class="excellent-goods-title">优秀产品</view>
   <van-tabs
@@ -88,4 +76,13 @@
       wx:key="id">
     </van-tab>
   </van-tabs>
+  <!--瀑布流-->
+  <view class="waterfall">
+    <view class="waterfall-left">
+      <goods-item/>
+    </view>
+    <view class="waterfall-right">
+      <goods-item/>
+    </view>
+  </view>
 </view>

htmldev/wxMini/pages/home/home.wxss

@@ -235,3 +235,11 @@
 .van-tabs__scroll--line {
   height: 56rpx !important;
 }
+
+.waterfall{
+  display: flex;
+  justify-content: space-between;
+  width: 690rpx;
+  padding: 30rpx 0;
+  margin: 0 auto;
+}