适用商品

src/component/waterFlowLayoutGoods/waterFlowLayout.js

+// component/waterFlowLayout/waterFlowLayout.js
+const wxService = require('../../utils/wxService')
+const utils = require('../../utils/util')
+
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    currentHasUserInfo: {
+      type: Boolean,
+      value: false,
+      observer(val){
+      }
+    },
+    imageData: {
+      type: Array,
+      value: [],
+    },
+    type: {
+      type: Number,
+      value: [],
+    }
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    // imageheight: 0
+    userIsLogin : false
+  },
+
+  observers: {
+    currentHasUserInfo(val) {
+      console.log(val)
+      this.setData({
+        userIsLogin: val
+      })
+    }
+
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    onTapLike(e) {
+      if (e.currentTarget.dataset.currentType != 2) return;
+      const { memberId } = wx.getStorageSync('_baseUserInfo')
+      let params = {
+        contentId: e.currentTarget.dataset.id,
+        type: e.currentTarget.dataset.type,
+        userId: memberId
+      }
+      this.triggerEvent('updataLike', params)
+    },
+    onTapShare(e) {
+      if (e.currentTarget.dataset.currentType != 2) return;
+      console.log(e)
+      let params = {
+        url: e.currentTarget.dataset.url,
+        title: e.currentTarget.dataset.title,
+        headline: e.currentTarget.dataset.headline,
+        describe: e.currentTarget.dataset.describe,
+        id: e.currentTarget.dataset.id
+      }
+      wxService.nextTick(() => {
+        this.triggerEvent('_onTapShare', params)
+      })
+    },
+
+    //详情
+    gotoDetail(e) {
+      // type 1:内容  2：我的发布
+      if (this.data.type == 1) {
+        wxService.router(`/pages/wantToBuyDetail/wantToBuyDetail?id=${e.currentTarget.dataset.id}`)
+      } else if (this.data.type == 2) {
+        if (e.currentTarget.dataset.currentType == 2){
+          wxService.router(`/subPackage/page/pages/myReleaseDetail/myReleaseDetail?id=${e.currentTarget.dataset.id}`)
+        }
+      }
+    },
+
+    //授權
+    _getUserInfo(res){
+      wxService.nextTick(() => {
+        this.triggerEvent('getAuth',res);
+      })
+    }
+    //获取图片高度
+    // imageLoad(e) {
+    //   console.log('height', utils.imageUtil(e))
+    //   let imageSize = utils.imageUtil(e)
+    //   this.data.imageData.forEach((item)=>{
+    //     item.imageheight = imageSize.imageHeight
+    //   })
+    //   // this.setData({
+    //   //   // imagewidth: imageSize.imageWidth,
+    //   //   imageheight: imageSize.imageHeight
+    //   // })
+    //   console.log('imageData',this.data.imageData)
+    // }
+  }
+})

src/component/waterFlowLayoutGoods/waterFlowLayout.json

+{
+  "component": true,
+  "usingComponents": {}
+}
\ No newline at end of file

src/component/waterFlowLayoutGoods/waterFlowLayout.wxml

+<!--component/waterFlowLayout/waterFlowLayout.wxml-->
+<wxs src="../../wxs/utils.wxs" module="utils" />
+
+<view class="water-wrap {{type == 2 ? 'release-water' : ''}}">
+	<view class="left">
+		<block wx:for="{{imageData}}" wx:key="">
+			<template is="water-list" data="{{...item}}" wx:if="{{index%2==0}}" />
+		</block>
+	</view>
+	<view class="right">
+		<block wx:for="{{imageData}}" wx:key="">
+			<template is="water-list" data="{{...item}}" wx:if="{{index%2==1}}" />
+		</block>
+	</view>
+</view>
+<template name="water-list">
+	<view class="item" data-current-type="{{currentType}}">
+		<!--		<view class="no-audited" wx:if="{{currentType != 2}}">
+			{{currentType == 1 ? '待审核' : (currentType == 3 ? '已驳回' : '已通过')}}
+		</view>-->
+		<image
+		 class="item-img"
+		 src="{{url}}"
+		 data-id="{{id}}"
+		 mode="widthFix"
+		 bindload="imageLoad"
+		 bindtap="gotoDetail"
+		/>
+		<view class="item-title-box" data-id="{{id}}" bindtap="gotoDetail">
+			<text class="item-title">{{explain}}</text>
+		</view>
+
+		<view class="pro-price-wrap">
+			<view class="pro-plus-price">
+				<text>￥</text>
+				<text class="plus-price">{{memberPrice ? utils.numberFormat(memberPrice / 100) : utils.numberFormat(minSalePrice / 100)}}</text>
+				<image wx:if="{{memberPrice}}" mode="widthFix" src="/assets/imgs/7_1_0/member-icon.png" />
+			</view>
+			<view class="pro-member-price" wx:if="{{plusPrice}}">
+				<text>￥</text>
+				<text class="member-price">{{utils.numberFormat(plusPrice / 100)}}</text>
+				<image mode="widthFix" src="/assets/imgs/7_1_0/plus-sm.png" />
+			</view>
+		</view>
+
+		<!--
+		<view class="share-wrap">
+			<view
+			 class="share-oprate"
+			 catchtap="onTapLike"
+			 data-id="{{id}}"
+			 data-type="{{type}}"
+			 data-current-type="{{currentType}}"
+			>
+				<image class="share-img" src="{{type ? '/assets/imgs/heart-primary.png'  : '/assets/imgs/heart-default.png'}}" />
+				<text class="share-number">{{enjoySum || 0}}</text>
+			</view>
+			<view
+			 class="share-oprate"
+			 catchtap="onTapShare"
+			 data-title="{{headline}}"
+			 data-url="{{url}}"
+			 data-headline="{{headline}}"
+			 data-describe="{{describe}}"
+			 data-id="{{id}}"
+			 data-current-type="{{currentType}}"
+			>
+				<image class="share-img" src="/assets/imgs/share.png" />
+				<text class="share-number">{{transmitSum || 0}}</text>
+			</view>
+		</view>-->
+	</view>
+</template>
+

src/component/waterFlowLayoutGoods/waterFlowLayout.wxss

+/* component/waterFlowLayout/waterFlowLayout.wxss */
+
+.water-wrap{
+  text-align: justify;
+  padding-top: 14rpx;
+}  
+.release-water{
+  margin-top: -2rpx;
+}
+.item {
+  margin-bottom: 14rpx;
+  display: inline-block;
+  /* width: 349.86rpx; */
+  width: 100%;
+  border-radius: 10rpx;
+  box-shadow: 0px 2px 5px 0px rgba(199, 199, 199, 0.5);
+  background-color: #ffffff;
+  position: relative;
+
+}
+.item-ava{
+  width: 40rpx;
+  height: 40rpx;
+  border-radius: 20rpx;
+}
+.heart{
+  width: 30rpx;
+  height: 26rpx;
+  margin-right: 8rpx;
+}
+.heart_{
+  display: flex;
+  align-items: center;
+}
+.item-img{
+  max-height: 480rpx;
+  width: 100%;
+  border-top-left-radius: 10rpx;
+  border-top-right-radius: 10rpx;
+}
+.item-title{
+  font-size: 30rpx;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  color: #232220;
+  margin: 15rpx;
+  /* word-spacing: -0.2em; */
+  letter-spacing: 0em;
+}
+.item .name{
+  display: flex;
+  padding: 0 15rpx;
+  margin-top: 20rpx;
+  padding-bottom: 10rpx;
+  align-items: center;
+  font-size: 22rpx;
+  color: #1e1e1e;
+}
+.pro-price-wrap{
+  padding: 0 17rpx;
+}
+.pro-plus-price{
+  color: #cb3c3c;
+  font-size: 24rpx;
+}
+.pro-member-price{
+  color: #333333;
+  font-size: 24rpx;
+  margin-top: 10rpx;
+}
+.plus-price,.member-price{
+  font-size: 32rpx;
+}
+.pro-plus-price image{
+  width: 61rpx;
+  margin-left: 13rpx;
+}
+.pro-member-price image{
+  width: 51rpx;
+  margin-left: 13rpx;
+}
+.share-wrap{
+  display: flex;
+  justify-content: space-between;
+  padding: 10rpx;
+}
+
+.share-oprate{
+  display: flex;
+  align-items: center;
+}
+
+.share-img{
+  width: 28rpx;
+  height: 28rpx;
+}
+.share-number{
+  font-size: 24rpx;
+  color: #999999;
+  margin-left: 10rpx;
+}
+
+.left,.right{
+  display: inline-block;
+  vertical-align: top;
+  width: 49%;
+}
+.right{
+  float: right;
+}
+.no-audited{
+  width: 100rpx;
+  height: 40rpx;
+  position: absolute;
+  top: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.5);
+  color: #ffffff;
+  font-size: 24rpx;
+  text-align: center;
+  line-height: 40rpx;
+  border-radius: 20rpx;
+}
\ No newline at end of file

src/subPackage/page/pages/scanCoupon/scanCoupon.js

@@ -2,12 +2,38 @@
 const wxService = require('../../../../utils/wxService')
 
 wxService.page({
-
   /**
    * 页面的初始数据
    */
   data: {
-
+    proData: [
+      {
+        "id": "636202018767245312",
+        "classifyId": "621357257015300096",
+        "headline": "2222",
+        "type": 0,
+        "memberPrice": 57700,
+        "plusPrice": 32550,
+        "transmitSum": 0,
+        "index": 0,
+        "url": "https://img3.bigaka.com/test/1001/201910/20191022/10015eb58657-67ec-43c2-9344-c277e0032742.jpg",
+        "currentType": 1,
+        "explain": "测试文案001/测试文案002/测试文案003"
+      },
+      {
+        "id": "636201959732416512",
+        "classifyId": "621357257015300096",
+        "headline": "2222",
+        "type": 0,
+        "memberPrice": 548,
+        "plusPrice": 220,
+        "transmitSum": 0,
+        "index": 0,
+        "url": "https://img3.bigaka.com/test/1001/201910/20191022/1001ccee65c3-cced-4518-bbad-16412d671075.png",
+        "currentType": 1,
+        "explain": "Bigaka Bigaka 玫瑰金皮带腕表"
+      }
+    ]
   },
 
   /**

src/subPackage/page/pages/scanCoupon/scanCoupon.json

 {
-  "usingComponents": {}
+  "usingComponents": {
+    "water-flow-layout": "/component/waterFlowLayoutGoods/waterFlowLayout"
+  }
 }
\ No newline at end of file

src/subPackage/page/pages/scanCoupon/scanCoupon.wxml

@@ -32,8 +32,12 @@
 			<view class="goods-num">适用商品</view>
 			<view class="goods-more">查看更多></view>
 		</view>
-		<view/>
+				<water-flow-layout
+				 wx:if="{{proData.length}}"
+					type="2"
+					image-data="{{proData}}"
+				/>
+				<view class="goods-no-more" wx:else>没有更多哦</view>
 	</view>
-
 </view>
 

src/subPackage/page/pages/scanCoupon/scanCoupon.wxss

@@ -4,6 +4,12 @@
 page {
 	background-color: rgba(0, 0, 0, 0.05);
 }
+.goods-no-more {
+	text-align: center;
+	margin-top: 24rpx;
+	font-size: 24rpx;
+	color: rgba(51, 51, 51, 1);
+}
 .scan-stores,
 .scan-goods {
 	background-color: #fff;