CommunityApp/comps/dt_goods_list_home02.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">
			  <view v-if="imgsIndex==0" 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 class="goods_sell_out_tip" v-if="false">补货中</view>
	      </view>
	      <view class="goods_info">
				<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 dt-text-row-one">{{item.caption?item.caption:''}}</view>
				<view style="position: relative;margin: 0 auto;">
					<image src="http://139.9.103.171:1888/img/image/ic_boom.png"  style="width: 230upx;height: 128rpx;"></image>
					<!-- <view style="position: absolute;top: 40upx;left:-12upx;text-decoration: line-through;font-size: 22upx;color: #999;">
						{{item.marketPrice?"￥"+item.marketPrice:''}}
					</view> -->
				</view>
				<view style="position: relative;width: 350upx;display: flex;flex-direction: column;align-items: center;">
					<image src="http://139.9.103.171:1888/img/image/price_bg.png"  style="width: 350upx;height: 60rpx;"></image>
					<view style="position: absolute;left: 20upx;right:20upx;top:0;bottom:0;display: flex;justify-content: space-between;align-items: center;">
						<view style="display: flex;color: #fff;font-weight: bold;">
							<view style="margin-top: 10upx;font-size: 24upx;">￥</view>
							<view style="margin-top: 10upx;">{{item.price}}</view>
							<view style="text-decoration: line-through;font-size: 20upx;margin-top: 14upx;margin-left: 10upx;color: #f7f7f7;font-weight: 100;">{{item.marketPrice?"￥"+item.marketPrice:''}}</view>
						</view>
						<view style="color:#f92325;font-size: 26upx;font-weight: bold;">立即加购</view>
					</view>
				</view>
	      </view>
	    </view>
	  </view>
</template>

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

<style lang="scss">
	.goods_list {
		
	  .goods_item {
		  border-radius: 20upx;
		  background-color: #fff;
		  margin-bottom: 10upx;
	    display: flex;
	    flex-direction: row;
	    padding: 20upx;
	    .goods_img {
	      position: relative;
	      width: 290upx;
	      height: 300upx;
	      image {
	        width: 290upx;
	        height: 300upx;
	      }
	      .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 {
	            flex: 1;
	            color: #3A3A3A;
				font-weight:bold;
	            font-size: 28upx;
	            letter-spacing: 1upx;
	          }
	        }
	        .goods_des {
	          font-size: 24upx;
			  margin: 10upx 0;
	          color: #999;
			  font-weight: 500;
	        }
	      // }
	      .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>