CommunityApp/pagesM/comps/dt_goods_list_hot.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">
				<view
				v-if="item.caption"
				style="
				overflow: hidden;
				text-overflow:ellipsis;
				white-space: nowrap;
				margin-right: 26upx;
				max-width: 250upx;
				padding: 8upx 12upx;
				background-color: #f1921a;
				color: #fff;
				border-radius: 10upx;">{{item.caption?item.caption:''}}</view>
				<view v-if="item.promotion&&item.promotion.freeShipping" style="
				padding: 8upx 12upx;
				background-color: #fce9be;
				color: #f1921a;
				border-radius: 10upx;">
				{{item.promotion.freeShipping.name}}
				</view>
			</view>
			<view 
			:style="{backgroundColor:theme==1?'#fce9be':'#fd3400',color:theme==1?'#f1921a':'#fff'}"
			style="
			display: inline-block;
			margin-top: 10upx;
			padding: 8upx 12upx;
			font-size: 24upx;
			border-radius: 10upx;">
			热卖中
			</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 margin-top-10">
			<view v-if="theme==1" style="position: relative;">
				<view style="display: flex;overflow: hidden;border-radius: 25px;">
					<view style="font-size: 28upx;color: #a17603;background-color: #fbc94c;padding: 0 16rpx;height: 50upx;line-height: 55upx;">特惠价</view>
					<view style="background-color: #ea2b33;display: flex;color: #fff;padding: 0 16rpx;width: 250upx;height: 50upx;line-height: 55upx;">
						<view class="sell_info">
						  <view class="sell_price" style="color: #fff;">
							<text style="font-size: 20upx;margin-top: 6upx;font-weight: bold;">￥</text>
						    <text>{{item.price}}</text>
						    <text style="margin-top: 6upx;">{{item.marketPrice?"￥"+item.marketPrice:''}}</text>
						  </view>
						</view>
					</view>
				</view>
				<image src="http://139.9.103.171:1888/img/image/ic_gift.png" mode="widthFix" style="position: absolute;width: 100upx;right: -25upx;bottom: -10upx;" />
			</view>
			<view  v-if="theme==2" style="display: flex;color: #fff;height: 50upx;line-height: 50upx;">
				<view class="sell_info" >
				  <view class="sell_price" style="color: #ff3307;">
					<text style="font-size: 20upx;margin-top: 6upx;font-weight: bold;">￥</text>
					<text>{{item.price}}</text>
					<text style="margin-top: 6upx;color: #ffa8ac;">{{item.marketPrice?"￥"+item.marketPrice:''}}</text>
				  </view>
				</view>
				<image src="http://139.9.103.171:1888/img/image/ic_hot.png" mode="widthFix" style="width: 30upx;margin-left: 20upx;"></image>
			</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    dataList: {
      type: Array,
      default: []
    },
	bgColor:{
		type: String,
		default:'#f2f2f2'
	},
	theme:{
		type:String,
		default:'1'
	}
  },
  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;
		  font-weight: 500;
          margin-top: 10upx;
		  display: flex;
        }
      // }
      .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;
        align-items: center;
        .sell_info {
          display: flex;
          flex-direction: column;
          .sell_price {
            display: flex;
            flex-direction: row;
            text{
              font-size: 36upx;
            }
            text:last-child {
              color: #eba7a4;
              font-size: 22upx;
              text-decoration: line-through;
              margin-left: 10upx;
            }
          }
          .sell_count {
            margin-top: 10upx;
            font-size: 22upx;
            color: #eba7a4;
          }
        }
        .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>