CommunityApp/comps/dt_goods_list_home.vue

<template>
  <view class="goods_list">
    <view class="goods_item" v-for="(item,index) in dataList" :key="index" @tap="jumpGoodsDes(item.id)">
        <scroll-view scroll-x="true">
        	<view class="goods_img">
				<view v-for="(imgsItem,imgsIndex) in  item.productImages" :key="imgsIndex">
					<image :src="imgsItem.large||'http://139.9.103.171:1888/img/image/goods_def.png'" mode="widthFix"></image>
				</view>
			</view>
        </scroll-view>
      <view class="goods_info">
        <view class="mid-wrap">
          <view class="goods_top">
            <view class="goods_time" v-if="false">10分钟</view>
            <view class="goods_title dt-text-row-two">{{item.name}}</view>
          </view>
          <view class="goods_des one_line_ellipsis">{{item.caption}}</view>
        </view>
        <view class="goods_active" v-if="false">
          <view class="active_item">特价抢购</view>
          <view class="active_item">1元换购</view>
          <view class="active_item">包邮</view>
        </view>
		<scroll-view scroll-x="true" style="width: 100%;margin: 20upx 0 12upx;">
			<view v-if="item.promotion" style="display: flex;white-space: nowrap;">
				<view v-if="item.promotion.coupon" style="
				padding: 4rpx 8rpx;
				font-size: 20upx;
				color: #DB4444;
				background:rgba(219,68,68,0.1);
				margin-right: 5upx;
				border-radius: 25px;">
				{{item.promotion.coupon.name}}
				</view>
				<view v-if="item.promotion.freeShipping" style="
				padding: 4rpx 8rpx;
				font-size: 20upx;
				color: #DB4444;
				background:rgba(219,68,68,0.1);
				margin-right: 5upx;
				border-radius: 25px;">
				{{item.promotion.freeShipping.name}}
				</view>
				<view v-if="item.promotion.gifts.length>0" 
				v-for="(giftsItem,giftsIndex) in item.promotion.gifts"
				:key="giftsIndex"
				style="
				padding: 4rpx 8rpx;
				font-size: 20upx;
				color: #DB4444;
				background:rgba(219,68,68,0.1);
				margin-right: 5upx;
				border-radius: 25px;">
				{{giftsItem.name}}
				</view>
				<view v-if="item.promotion.moneyOffs.length>0" 
				v-for="(moneyOffs,moneyOffsIndex) in item.promotion.moneyOffs"
				:key="moneyOffsIndex"
				style="
				padding: 4rpx 8rpx;
				font-size: 20upx;
				color: #444FDB;
				background:rgba(68,79,219,0.1);
				margin-right: 5upx;
				border-radius: 25px;">
				{{moneyOffs.name}}
				</view>
			</view>
		</scroll-view>
        <view class="goods_bottom">
          <view class="sell_info">
            <view class="sell_price">
				<text style="font-size: 20upx;margin-top: 10upx;color: #ee1515;">￥</text>
              <text class="price">{{item.price}}</text>
			  <text>{{item.marketPrice?"￥"+item.marketPrice:''}}</text>
            </view>
            <!-- <view class="sell_count">销量{{item.sales}}笔</view> -->
          </view>
          <!-- <image src="/static/image/shop_car_icon.png" class="buy"></image> -->
		  <view style="font-weight: 500;font-size:32upx;color: #fff;line-height: 60upx;padding: 0 20upx;background-color: #DB4444;border-radius: 25px;">立即购买</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    height:{
      type:[String,Number],
      default:70
    },
    dataList: {
      type: Array,
      default: []
    }
  },
  data() {
    return {};
  },
  computed: {
    midStyle(){
      return 'height:'+uni.upx2px(this.height)+'px'
    },
  },
  methods: {
    jumpGoodsDes(id) {
      console.log(id);
      uni.navigateTo({
        url: "/pagesM/pages/goods_des?id=" + id
      })
    }
  },
  created() { }
};
</script>

<style lang="scss">
.goods_list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  // background: #F2F2F2;
  background: transparent;
  width: 100%;
  .goods_item {
    border-radius: 10upx;
    background: #fff;
    overflow: hidden;
	padding: 30upx;
	margin: 0 20upx 20upx;
	width: 100%;
    .goods_img {
		width: 100%;
      display: flex;
      align-items: center;
	  
      image {
		  display: block;
		border-radius: 10upx;
        width: 210upx;
        height: 210upx;
		margin-right: 12upx;
      }
    }
    .goods_info {
		margin-top: 20upx;
      box-sizing: border-box;
      .mid-wrap{
        .goods_top {
          display: flex;
          flex-direction: row;
          align-items: center;
          .goods_time {
            font-size: 18upx;
            border-radius: 4upx;
            background: $dt-color-primary;
            padding: 5upx 10upx;
            color: #fff;
            margin-right: 10upx;
          }
          .goods_title {
            flex: 1;
            color: #3A3A3A;
            font-size: 28upx;
			font-weight: bold;
            letter-spacing: 1upx;
          }
        }
        .goods_des {
          font-size: 24upx;
          color: #C1C1C1;
          margin-top: 10upx;
        }
      }
      .goods_active {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        margin-top: 10upx;
        .active_item {
          // border-radius: 4upx;
          padding: 5upx 10upx;
          color: #ee1515;
          font-size: 18upx;
          margin-right: 10upx;
          position: relative;
          margin-bottom: 10upx;
          //  border: 2upx solid #ee1515;
        }
        .active_item::after {
          display: flex;
          box-sizing: border-box;
          align-items: center;
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 200%;
          height: 200%;
          transform: scale(0.5);
          transform-origin: 0 0;
          border: 1upx solid #ee1515;
          border-radius: 4upx;
          pointer-events: none;
        }
      }
      .goods_bottom {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
		padding: 0 10upx 10upx;
        .sell_info {
          display: flex;
          flex-direction: column;
          .sell_price {
            display: flex;
            flex-direction: row;
            align-items: center;
            .price{
              font-size: 36upx;
			  font-weight:800;
              color: #DB4444;
            }
			text:last-child {
			  color: #888888;
			  font-size: 22upx;
			  text-decoration: line-through;
			  margin-left: 20upx;
			  margin-top: 10upx;
			}
          }
          .sell_count {
            margin-top: 10upx;
            font-size: 22upx;
            color: #888888;
          }
        }
        .buy {
          width: 40upx;
          height: 40upx;
        }
      }
    }
  }
}
</style>