CommunityApp/pagesM/comps/dt_goods_list.vue

<template>
  <view class="goods_list" :style="{backgroundColor:bgColor}">
    <view class="goods_item" v-for="(item,index) in dataList" :key="index" @tap="jumpGoodsDes(item.id||item.productId)">
      <view class="goods_img">
        <image :src="item.thumbnail||item.img|| 'http://139.9.103.171:1888/img/image/goods_def.png'"></image>
        <view class="goods_sell_out_tip" v-if="false">补货中</view>
      </view>
      <view class="goods_info">
        <view>
			<view class="goods_top">
			  <view class="goods_time" v-if="false">10分钟</view>
			  <view class="goods_title dt-text-row-one">{{item.name}}</view>
			</view>
			<view class="goods_des">{{item.caption?item.caption:''}}</view>
			<scroll-view scroll-x="true" style="width: 100%;margin-top: 10upx;height: 30upx;">
				<view v-if="item.promotion" style="display: flex;white-space: nowrap;">
					<view v-if="item.promotion.coupon" style="
					padding: 0 8rpx;
					height: 30upx;
					line-height: 30upx;
					font-size: 20rpx;
					color: #DB4444;
					margin-right: 5upx;
					background:rgba(219,68,68,0.1);
					border-radius: 25px;">
					{{item.promotion.coupon.name}}
					</view>
					<view v-if="item.promotion.freeShipping" style="
					padding: 0 8rpx;
					height: 30upx;
					line-height: 30upx;
					font-size: 20rpx;
					color: #DB4444;
					margin-right: 5upx;
					background:rgba(219,68,68,0.1);
					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: 0 8rpx;
					height: 30upx;
					line-height: 30upx;
					font-size: 20rpx;
					color: #DB4444;
					margin-right: 5upx;
					background:rgba(219,68,68,0.1);
					border-radius: 25px;">
					{{giftsItem.name}}
					</view>
					<view v-if="item.promotion.moneyOffs.length>0" 
				v-for="(moneyOffsItem,moneyOffsIndex) in item.promotion.moneyOffs"
				:key="moneyOffsIndex"
					 style="
					padding: 0 8rpx;
					height: 30upx;
					line-height: 30upx;
					font-size: 20rpx;
					color: #444FDB;
					margin-right: 5upx;
					background:rgba(68,79,219,0.1);
					border-radius: 25px;">
					{{moneyOffsItem.name}}
					</view>
				</view>
			</scroll-view>
			<!-- <view class="goods_active" > -->
			  <!-- <view class="active_item">特价抢购</view>
			  <view class="active_item">1元换购</view>
			  <view class="active_item">包邮</view> -->
			<!-- </view> -->
		</view>
        <view class="goods_bottom">
          <view class="sell_info">
            <view class="sell_price">
				<text style="font-size: 20upx;margin-top: 10upx;">￥</text>
              <text>{{item.price}}</text>
              <text style="margin-top: 10upx;">{{item.marketPrice?"￥"+item.marketPrice:''}}</text>
            </view>
            <!-- <view class="sell_count">销量{{item.sales?item.sales:0}}笔</view> -->
          </view>
          <view class="buy">购买</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    dataList: {
      type: Array,
      default: []
    },
	bgColor:{
		type: String,
		default:'#f2f2f2'
	}
  },
  data() {
    return {};
  },
  methods: {
    jumpGoodsDes(id) {
      console.log(id);
      uni.navigateTo({
        url: "/pagesM/pages/goods_des?id=" + id
      })
    }
  },
  created() { }
};
</script>

<style lang="scss">
.goods_list {
	padding: 20upx;
  .goods_item {
	  border-radius: 20upx;
	  background-color: #fff;
	  margin-bottom: 20upx;
    display: flex;
    flex-direction: row;
    padding: 20upx;
	height: 216upx;
    .goods_img {
      position: relative;
      width: 222upx;
      height: 222upx;
      image {
        width: 222upx;
        height: 222upx;
      }
      .goods_sell_out_tip {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 98upx;
        height: 98upx;
        background: rgba(0, 0, 0, 1);
        opacity: 0.6;
        border-radius: 50%;
        font-size: 22upx;
        color: #fff;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
      }
    }
    .goods_info {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
      padding-left: 26upx;
      flex: 1;
      // .mid-wrap{
      //   height:150rpx;
        .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;
          }
          .goods_title {
			  margin-top: 10upx;
            flex: 1;
            color: #3A3A3A;
			font-weight:bold;
            font-size: 28upx;
            letter-spacing: 1upx;
            // margin-left: 20upx;
          }
        }
        .goods_des {
          font-size: 24upx;
          color: #999;
		  font-weight: 500;
          margin-top: 10upx;
		  height: 60upx;
		  line-height: 30upx;
        }
      // }
      .goods_active {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        .active_item {
          // border: 1upx solid #ee1515;
          // border-radius: 4upx;
          padding: 5upx 10upx;
          color: #ee1515;
          font-size: 18upx;
          margin-right: 20upx;
          position: relative;
          margin-bottom: 10upx;
        }
        .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;
        .sell_info {
          display: flex;
          flex-direction: column;
          .sell_price {
            display: flex;
            flex-direction: row;
            align-items: center;
            text{
              font-size: 36upx;
              color: #DB4444;
            }
            text:last-child {
              color: #888888;
              font-size: 22upx;
              text-decoration: line-through;
              margin-left: 20upx;
            }
          }
          .sell_count {
            margin-top: 10upx;
            font-size: 22upx;
            color: #888888;
          }
        }
        .buy {
          width: 100upx;
          height: 50upx;
          line-height: 50upx;
          background: $dt-color-primary;
          border-radius: 25upx;
          font-size: 0.8rem;
          text-align: center;
          color: #fff;
        }
      }
    }
  }
}
</style>