CommunityApp/pagesM/comps/dt_goods_list_h.vue

<template>
  <view class="content" :style="{backgroundImage: 'url('+(dataItem.path1?dataItem.path1:'')+')'}" @tap="tapMore">
	  <view class="banner">
		  <!-- <view class="name">111</view>
		  <view class="explain">111</view>
		  <view class="gotosee">去看看</view> -->
	  </view>
	  <scroll-view v-if="dataList.length>0" class="scroll-view" scroll-x="true" >
	    <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 class="goods_sell_out_tip" v-if="false">补货中</view>
	  		  </view>
	  		  <!-- <view class="goods_info">
	  			 <view class="goods_name dt-text-row-two">
	  				<view class="type">自营</view>
	  				{{item.name}}
	  			</view>
	  			  <view class="goods_bottom">
	  					  <view class="goods_price">{{item.price}}</view>
	  					  <image v-if="!share" src="../static/image/shopCar2.png" class="goods_buy_icon"></image>
	  					  <image v-if="share" src="../static/image/share_team_goods.png" class="goods_buy_icon"></image>
	  			  </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-two">{{item.name}}</view>
	  		    </view>
	  		    <view class="goods_des">{{item.caption}}</view>
	  		    <view class="goods_active" >
	  		    </view>
	  		    <view class="goods_bottom">
	  		      <view class="sell_info">
	  		        <view class="sell_price">
	  		          <text>￥{{item.price}}</text>
	  		          <text>{{item.marketPrice?"￥"+item.marketPrice:''}}</text>
	  		        </view>
	  		        <view class="sell_count">销量{{item.sales?item.sales:0}}笔</view>
	  		      </view>
	  		      <view class="buy">购买</view>
	  		    </view>
	  		  </view> -->
				 <view class="dt-text-row-one" style="font-size:30upx;font-weight:bold;color:rgba(51,51,51,1);text-align: center;">
					{{item.name}}
				</view>
				<view class="dt-text-row-two" style="font-size:24upx;color:rgba(51,51,51,1);text-align: center;margin-top: 16upx;">
					{{item.caption?item.caption:''}}
				</view>
	  		</view>
	  		<view class="goods_item"  @tap="tapMore">
	  			<view style="width: 232upx;height:100%;display: flex;align-items: center;justify-content: center;">
	  				<view class="text">查看更多</view>
	  			</view>
	  		</view>
	  	</view>
	  </scroll-view>
  </view>
</template>

<script>
export default {
  props: {
    dataList: {
      type: Array,
      default: []
    },
	share: {
		type:Boolean,
		default: false
	},
	dataItem: {
		type:Object,
		default:{}
	}
  },
  data() {
    return {};
  },
  methods: {
	  tapMore() {
	    this.$emit("more");
	  },
    jumpGoodsDes(id) {
      console.log(id);
      uni.navigateTo({
        url: "/pagesM/pages/goods_des?id=" + id
      })
    }
  },
  created() { }
};
</script>

<style lang="scss">
	.content{
		// border-radius: 20upx;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		margin: 0 20upx;
	}
	.banner{
		height:229upx;
		background-color: transparent;
		// border-radius:10upx 10upx 0px 0px;
		// padding-left: 53upx;
		// padding-top: 29upx;
		.name{
			font-size:42upx;
			height: 42upx;
			font-family:PingFang SC;
			font-weight:800;
			color:rgba(255,255,255,1);
		}
		.explain{
			margin-top: 18upx;
			height:53upx;
			font-size:24upx;
			font-family:PingFang SC;
			font-weight:400;
			color:rgba(255,255,255,1);
		}
		.gotosee{
			margin-top: 21upx;
			border-radius: 25upx;
			height:50upx;
			width:100upx;
			font-size: 24upx;
			text-align: center;
			line-height: 50upx;
			background-color: $dt-color-primary;
			color:#fff
		}
	}
	.scroll-view{
		background-color: transparent;
		height: 468upx;
	}
.goods_list {
	display: flex;
  .goods_item {
	// margin: 5.1upx;
	margin: 0 32upx;
	margin-bottom: 12upx;
	width: 176upx;
	display: flex;
	flex-direction: column;
    .goods_img {
      position: relative;
      width:176upx;
      height:225upx;
	  margin-top: 25upx;
      image {
        width:176upx;
        height:176upx;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
      }
      .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{
		margin: 17upx 0;
		.type{
			display: inline-block;
			background-color: red;
			color: #fff;
			font-size: 20upx;
			border-radius: 6upx;
			line-height: 20upx;
			padding: 5upx;
		}
		.goods_name{
			height:63upx;
			font-size:23upx;
			font-weight:400;
			color:rgba(51,51,51,1);
			line-height:31upx;
		}
		.goods_bottom{
			display: flex;
			justify-content: space-between;
			margin-top: 25upx;
			.goods_price_icon{
				display: inline-block;
				font-size:24upx;
				color:$dt-color-primary;
				line-height:31upx;
			}
			.goods_price{
				font-size:24upx;
				font-weight:bold;
				color:$dt-color-primary;
				line-height:31upx;
			}
			.goods_buy_icon{
				width:30upx;
				height:30upx;
			}
		}
	}
    
	
  }
  .text {
    font-size:24upx;
    font-weight:400;
    color:rgba(102,102,102,1);
  }
}
</style>