CommunityApp/pagesM/comps/dt_recommend_goods_list.vue

<template>
  <view class="goods_list">
    <view class="goods_item" v-for="(item,index) in dataList" :key="index" @tap="jumpGoodsDes(item.id)">
      <view class="goods_img">
        <image :src="item.thumbnail||'http://139.9.103.171:1888/img/image/goods_def.png'"></image>
      </view>
      <view class="goods_info">
        <view class="mid-wrap" :style="midStyle">
          <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 two_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 10upx 0;">
			<view v-if="item.promotion" style="display: flex;white-space: nowrap;">
				<view v-if="item.promotion.coupon" style="
				padding: 4rpx 8rpx;
				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: 4rpx 8rpx;
				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: 4rpx 8rpx;
				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: 4rpx 8rpx;
				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_bottom">
          <view class="sell_info">
            <view class="sell_price">
				<text style="font-size: 20upx;margin-top: 10upx;color: #ee1515;">￥</text>
              <text>{{item.price}}</text>
			  <text style="margin-top: 8upx;">{{item.marketPrice?"￥"+item.marketPrice:''}}</text>
            </view>
            <!-- <view class="sell_count">销量{{item.sales}}笔</view> -->
          </view>
          <image src="http://139.9.103.171:1888/img/image/shop_car_icon.png" class="buy"></image>
        </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;
  padding: 0 1upx;
  // background: #F2F2F2;
  background: transparent;
  .goods_item {
    display: flex;
    flex-direction: column;
    border-radius: 10upx;
    background: #fff;
    overflow: hidden;
    margin-bottom: 20upx;
    margin-left: 20upx;
	padding: 20upx;
    width: 306upx;
    .goods_img {
      display: flex;
      width: 100%;
      align-items: center;
	  justify-content: center;
	  margin-bottom: 20upx;
      image {
        width: 230upx;
        height: 230upx;
      }
    }
    .goods_info {
      box-sizing: border-box;
      .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;
            margin-right: 10upx;
          }
          .goods_title {
            flex: 1;
            color: #3A3A3A;
            font-size: 28upx;
			font-weight: bold;
            letter-spacing: 1upx;
          }
        }
        .goods_des {
          font-size: 22upx;
          color: #999;
          line-height: 38upx;
          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;
            text{
              font-size: 36upx;
			  font-weight:800;
              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: 40upx;
          height: 40upx;
        }
      }
    }
  }
}
</style>