ec.uniapp-master/components/waterfalls-flow/waterfalls-flow.vue

<template>
<view class="waterfalls-flow" :style="'margin-bottom: ' + meta.margin_bottom + 'px'">
    <view class="title" v-if="show && title" @tap="_jumpList">
        <span>{{title}}</span>
        <span>更多
             <text class="iconfont icon-gengduo"></text>
        </span>
    </view>
    <view class="help-select-contet">
        <view class="help-select-card" v-for="(item, index) in waterData" :key="index" >
           <view v-if="index > 0" @tap="_jumpDeatil" :data-id="item.id">
               <image mode="widthFix" :src="item.img"></image>
               <view class="goods-detail">
                   <view class="name">
                       {{item.name}}
                   </view>
                   <view class="money">
                       ￥{{item.sell_price}}
                       <span>￥{{item.market_price}}</span>
                   </view>
               </view>
           </view>
            <view v-else @tap="_jumpLink" :data-link="item.link">
                <image mode="widthFix" class="help-select-iamge" :src="item.image"></image>
            </view>
        </view>
    </view>

</view>
</template>
<script>

export default {
  data() {
    return {};
  },

   options: {
    addGlobalClass: true
  },
  props: {
	  
	 waterData: {
	   type: Array,
	   value: ''
	 },
	 title: {
	   type: String,
	   value: ''
	 },
	 show: {
	   type: Number,
	   value: ''
	 },
	 meta: {
	   type: Object,
	   value: ""
	 } 
	  
	  
  },
  
    //组件的方法
    methods: {
      //内部方法建议以下划线开头
      _jumpLink(e) {
        let link = e.currentTarget.dataset.link;
        wx.navigateTo({
          url: link,
          fail: err => {
            wx.switchTab({
              url: link
            });
          }
        });
      },

      //跳到商品详情页
      _jumpDeatil(e) {
        let id = e.currentTarget.dataset.id;
        wx.navigateTo({
          url: `/pages/store/detail/detail?id=${id}`
        });
      },

      _jumpList() {
        wx.navigateTo({
          url: '/pages/store/list/list'
        });
      } 
    },
 
};
</script>


<style rel="stylesheet/less" lang="less">
@import "waterfalls-flow";
</style>