<template>
	<view class="goods-item sh-flex  ">
		<view class="goods-img">
			<u-image radius="10" :showLoading="true" :src="goodsInfo.photoUrl" width="75px" height="75px" @click="click"></u-image>
		</view>
	 
		<view class="goods-content sh-autoFullHig">
			<view class="name fz-28 m-b-15">{{goodsInfo.goodsName}} </view>
			<view class="spec fz-24 m-b-15">{{goodsInfo.goodsDecript}}</view>
			<view class="goods-price-num sh-flex m-b-20 p-r-20 sh-flex-sb">
				<view class="goods-price ">
					<text class="price">{{goodsInfo.price}}	</text>
					<!-- <button>支持</button> -->
				</view>
				<view class="goods-num ">
					<slot name="content"> </slot>
					<!-- <text class="fz-28">X2</text> -->
					<!-- <u-number-box v-model="number" class="fz-28">
						<view slot="minus"  class="minus" >
							<u-icon  name="minus"  size="12" ></u-icon>
						</view>
						<text slot="input"  style="width: 50px;text-align: center;" class="input" >111</text>
						<view slot="plus" class="plus" >
							<u-icon  name="plus" color="#FFFFFF"  size="12" ></u-icon>
						</view>
					</u-number-box> -->
				</view>
			</view>	
		</view>  
		
	</view>
</template>
<script>
	/**
	 * 商品列表卡片
	 * @property {Object} goodsInfo - 商品信息
	 */
	export default {
		props:{
			goodsInfo:{
				type:Object,
				default:{}
			}
		},
		data(){
			return {
			}
		}
	}
</script>
<style lang="scss" scoped>
	.goods-item{
		width: 100%;
		align-items: center;
		.goods-img{
			// width: 150rpx;
			margin-right: 20rpx;
			background-color: #f5f5f5;
			padding: 10rpx;
			border-radius: 20rpx;
		}
		.goods-content{
			.name{
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}
			.spec{
				color:$uni-text-color-grey ;
			}
			.goods-price-num{
				.price{
					color:  $theme-color;
				}
				.goods-num{
					// width: 30rpx;
				}
			}
		}
	}
</style>