<template>
	<view class="card" @tap="toGoods(goods.goods_id)">
		<image mode="widthFix" :src="goods.img" ></image>
		<view class="name">{{goods.name}}</view>
		<view class="info">
			<view class="priceBox">
			<view class="price">{{goods.price}}</view>
			<view class="originCost">{{goods.originCost}}</view>
			</view>
			<view class="slogan">{{goods.slogan}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			/**
			 * 商品数据
			 */
			goods: {
				goods_id: Number, 
				img: String, 
				name: String,
				originCost:String,
				price: String, 
				slogan:String
			}
			
		},
		created() {
		},
		data() {
			return {
				
			};
		},
		methods:{
			toGoods(id){
				console.log(id)
				uni.navigateTo({
					url: `../detail/detail?oderId=1`,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			}
		}
	}
</script>

<style lang="scss">
	image{
		width: 100%;
		height: 120rpx;
	}
	.name{
		width: 92%;
		padding: 5px 4%;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		text-align: justify;
		overflow: hidden;
		font-size: 24rpx;
		color: #333333;
	}
	.info{
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 92%;
		padding: 5px 4% 5px 4%;
		.priceBox{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.price{
				color: #EB5D3B;
				font-size: 28rpx;
				font-weight: 600;
				margin-right: 10rpx;
			}
			.originCost{
				text-decoration:line-through;
				color: #999999;
				font-size: 20rpx;
			}
			
		}
		.slogan{
			color: #999999;
			font-size: 20rpx;
		}
	}
</style>
