<template>
<view class="orderCard">
    <view class="imgs" @click="onOrderCard(productCard.id)">
        <image :src="productCard.imgUrl" mode="widthFix" class="img"/>
        <view class="label"></view>
    </view>
    <view class="content">
     <view class="title">{{productCard.title}}</view>
        <view class="describe">{{productCard.describe}}</view>
        <view class="specifications">规格: {{productCard.specifications}}</view>
        <view class="priceAdd">
            <view class="prices">
            	<view class="price">{{productCard.price}}</view>
            	<view class="company">/{{productCard.company}}</view>
            </view>
			<view class="addCart" @click.stop="addCart">
				<slIcon name="icon-addCart" color="#7cc6f1" size="44rpx"/>
			</view>
        </view>
    </view>
	
</view>
</template>

<script>
import slIcon from '@/sdk/sl-icon/index.vue';
import {mapActions,mapState} from "vuex"
export default{
	components:{
		slIcon
	},
	props:{
		productCard:{
		  type:Object,
		  default:()=>{}
		}
	},
	computed: {
	  ...mapState({
	    shoppingCartNum: state => state.app.shoppingCartNum,
	  }),
	},
	methods: {
		...mapActions(['putShoppingCart']),
		onOrderCard(id){
		  // this.$emit('onOrderCard',id)
		  uni.navigateTo({
		  	url:`/pages/productDetail/productDetail?id=${id}`
		  })
		},
		addCart(e){
			let shoppingCartNum=this.shoppingCartNum+1
			this.putShoppingCart(shoppingCartNum)
		}
	}
}
</script>

<style lang="scss" scoped>
	.orderCard{
	    width: 100%;
	    width: 344rpx;
	    border-radius: 20rpx;
	    background: #fff;
	    overflow: hidden;
	    box-sizing: border-box;
		-webkit-appearance: none;
		-webkit-backface-visibility: hidden;
		-webkit-transform: translate3d(0, 0, 0);
	    .imgs{
	        width: 100%;
	        height: 338rpx;
	        .img{
	            width: 100%;
	        }
	    }
	    .title{
	        font-size: 24rpx;
	        color: #1f1f1f;
	        font-weight: bold;
	        white-space: nowrap;
	        overflow: hidden;
	        text-overflow: ellipsis;
	    }
	    .describe{
	        font-size: 24rpx;
	        color: #6c7b8a;
	        font-weight: bold;
	        white-space: nowrap;
	        overflow: hidden;
	        text-overflow: ellipsis;
	    }
	    .specifications{
	        font-size: 20rpx;
	        color: #bfcddb;
	        padding: 20rpx 0;
	    }
	    .prices{
	        display: flex;
	        align-items: center;
	        .price{
	            font-size: 30rpx;
	            color: #fa717f;
	            font-weight: bold;
	        }
	        .price::before{
	            content: "¥";
	            font-size: 24rpx;
	            margin-right: 5rpx;
	        }
	        .company{
	            font-size: 18rpx;
	            color: #bfcddb;
	            margin-left: 10rpx;
	        }
	    }
		.priceAdd{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.addCart{
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	    .content{
	        padding: 10rpx 10rpx 30rpx;
	    }
	}
</style>