why_in_h5/pages/index/components/goods.vue

<template>
  <!-- 商品组 -->
  <view class="diy-goods">
    <view class="goods-list display__list column__2">
      <scroll-view>
        <view class="goods-item" v-for="(dataItem, index) in dataList.data" :key="index" @click="onTargetGoods(dataItem.goods_islicode)">
          <!-- 多列商品 -->
          <block>
            <!-- 标的图片 -->
            <view class="goods-image">
              <image class="image" mode="aspectFill" :src="dataItem.goods_image"></image>
            </view>
            <view class="detail">
              <!-- 标的标题 -->
              <view class="goods-name">
                <text class="twoline-hide">{{ dataItem.goods_name }}</text>
              </view>
              <!-- 标的价格 && 销量-->
              <view class="detail-price oneline-hide">
                <text class="goods-price f-30 col-m">￥ {{ dataItem.price }}</text>
                <text class="sale-count col-9 f-24">销量：{{ dataItem.sale_count }}</text>
              </view>
			  <!-- 标的所有者的信息 -->
	<!-- 		  <view class="detail-owner oneline-hide">
				  <text class="oneline-hide"> {{dataItem.username}} </text>
			  </view> -->
				  
            </view>
          </block>

        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
  export default {
    name: "Goods",
    /**
     * 组件的属性列表
     * 用于组件自定义设置
     */
    props: {
      itemIndex: String,
      itemStyle: Object,
      params: Object,
      dataList: Array
    },
	// 监控
	watch:{
		dataList:function(e){
			console.log("goods datalist",e)
		}
	},
    /**
     * 组件的方法列表
     * 更新属性和数据的方法与更新页面数据的方法类似
     */
    methods: {

      /**
       * 跳转商品详情页
       */
      onTargetGoods(gislicode) {
        this.$navTo(`pages/goods/detail`, { gislicode })
      }

    }

  }
</script>

<style lang="scss" scoped>
  .diy-goods {
    .goods-list {
      padding: 4rpx;
      box-sizing: border-box;

      .goods-item {
		// background-color: #fff;
        box-sizing: border-box;
        padding: 16rpx;

        .goods-image {
          position: relative;
          width: 100%;
          height: 0;
          padding-bottom: 100%;
          overflow: hidden;
          background: #fff;

          &:after {
            content: '';
            display: block;
            margin-top: 100%;
          }

          .image {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            -o-object-fit: cover;
            object-fit: cover;
          }
        }

        .detail {
          padding: 8rpx;
          background: #fff;
		  border-radius: 0 0 6% 6%;
		  box-shadow: #333 2rpx 3rpx 2rpx;

          .goods-name {
            min-height: 68rpx;
            line-height: 1.3;
            white-space: normal;
            color: #484848;
            font-size: 26rpx;
          }

          .detail-price {
            .goods-price {
				font-weight: 800;
				margin-right: 8rpx;
            }

            .sale-count {
				maring-left:20rpx;
              font-size: 18rpx;
            }
          }
		  
		  .detail-owner{
			  padding: 4rpx;
			  font-size: 22rpx;
			  color: #999;
			  margin-left: 10rpx;
		  }
		  
        }
      }

      &.display__slide {
        white-space: nowrap;
        font-size: 0;

        .goods-item {
          display: inline-block;
        }
      }

      &.display__list {
        .goods-item {
          float: left;
        }
      }

      &.column__2 {
        .goods-item {
          width: 50%;
        }
      }

      &.column__3 {
        .goods-item {
          width: 33.33333%;
        }
      }

      &.column__1 {
        .goods-item {
          width: 100%;
          height: 280rpx;
          margin-bottom: 12rpx;
          padding: 20rpx;
          box-sizing: border-box;
          background: #fff;
          line-height: 1.6;

          &:last-child {
            margin-bottom: 0;
          }
        }

        .goods-item_left {
          display: flex;
          width: 40%;
          background: #fff;
          align-items: center;

          .image {
            display: block;
            width: 240rpx;
            height: 240rpx;
          }
        }

        .goods-item_right {
          position: relative;
          width: 60%;

          .goods-name {
            margin-top: 20rpx;
            min-height: 68rpx;
            line-height: 1.3;
            white-space: normal;
            color: #484848;
            font-size: 26rpx;
          }
        }

        .goods-item_desc {
          margin-top: 8rpx;
        }

        .desc-selling_point {
          width: 400rpx;
          font-size: 24rpx;
          color: #e49a3d;
        }

        .desc-goods_sales {
          color: #999;
          font-size: 24rpx;
        }

        .desc_footer {
          font-size: 24rpx;

          .price_x {
            margin-right: 16rpx;
            color: #f03c3c;
            font-size: 30rpx;
          }

          .price_y {
            text-decoration: line-through;
          }
        }
      }
    }
  }
</style>