<template>
	<view class='commodity'>
	<!-- 单个商品组件 -->
	    <view class='commodity-item'
		v-for="(item,index) in dataList"
		:key="index"
		:style="'width:'+ itemW + ';' "
		@tap="goDetails(item)"
		>
		    <image class='commodity-img' :src="item.imgUrl" mode="widthFix"
			:style="'height:'+ bigH +';'"></image>
		     <view class='commodity-content'>
				 <text class='commodity-name'>{{item.name}}</text>
				 <view>
					 <text class='pprice'>￥{{item.pprice / 100}}</text>
				 </view>
		     </view>	
	     </view>
	</view> 	
</template>

<script>
	import process from '../../utils/process.js'	
export default {
	data() {
		return {
			name:null,
			id: null,
			imgUrl:null,
			price:null,
			Flowerpattern:null
		}
	},
	props:{
		dataList: Array,
		itemW:{
			type: String,
			default: "375rpx"
	    },
		bigH:{
			 type: String,
			 default: "375rpx"
		}
	},
	methods:{
		goDetails(item){
			//跳转支付页面，需要把选择的棉花糖种类传过去。怎么选择其中一种？ 传递参数就行
			   this.name = item.name 
			   this.id = item.id
			   this.imgUrl = item.imgUrl
			   this.price = item.pprice 
			   process.SugarType[0] = item.Flowerpattern	  //赋值给全局变量并发送	   
			uni.navigateTo({ 
				//传递数据，不能只传一个值，传递一个对象
				url:'/pages/pay/pay?dataList='+JSON.stringify({
					name:item.name,
					id:item.id,
					imgUrl:item.imgUrl,
					price:item.pprice,
				})	
			})
			// uni.navigateTo({
			// 	url: '/pages/cottonCandy/SugarMaking'
			// }) 
			
		}
	}
}
</script>

<style scoped>
.commodity{
	display: flex;
	flex-wrap: wrap;
}
.commodity-item{
 	width: 375rpx; 
 	padding-bottom: 10rpx;		
}
.commodity-img{
	width: 100%;
 	height: 375rpx; 
}
.commodity-content{
	text-align: center;
}
.commodity-name{
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	color: #444444;
	word-break: break-all;
/* 	padding: 6rpx 20rpx; */
}
.oprice{
	text-decoration: line-through;
	font-size: 24rpx;
	color: #999999;
}
.discount{
	border-radius: 4rpx;
	border: 1rpx solid #FF3333;
	padding: 2rpx 10rpx;
	font-size: 20rpx;
	color: #FF3333;
}
</style>