<template>
	<view style="padding-top: 10px;">
		<view v-for="(item,index) in goodsList" :key="index" class="dis-flex-between-center goods-item">
			<view class="">
				<image :src="item.cover_image" mode=""></image>
			</view>
			<view class="goods-info">
				<view class="" style="color: #333;font-size: 16px;">{{item.title}}</view>
				<view class="">面值:{{item.price}}元</view>
				<view class="">{{item.important}}</view>
			</view>
			<view class="btn" @click="toUrl(item)">立即刮奖</view>
		</view>
	</view>
</template>

<script>
	import API from '@/common/js/api.js'
	export default {
		data() {
			return {
				id: '',
				type: '20元',
				goodsList: [
					{cover_image:'../../static/home/tem11.png', title: '超级加倍', "id": 1, "important": "最高奖金100万元", "price": "20.00", },
					{cover_image:'../../static/home/tem11.png', title: '超级加倍', "id": 1, "important": "最高奖金100万元", "price": "20.00", },
					{cover_image:'../../static/home/tem11.png', title: '超级加倍', "id": 1, "important": "最高奖金100万元", "price": "20.00", },
					{cover_image:'../../static/home/tem11.png', title: '超级加倍', "id": 1, "important": "最高奖金100万元", "price": "20.00", }
				],
			}
		},
		methods: {
			toUrl(item){
				uni.navigateTo({
					url:'/pages/scratchCard/scratchCard?id='+item.id+'&type='+this.type
				})
			},
			getGoodsList(){
				API.getGoodsList({zone_id: this.id}, res=>{
					console.log(res);
					this.goodsList = res.data;
				})
			}
		},
		onLoad(e) {
			uni.setNavigationBarTitle({
				title: e.type,
				// +'元专区'
			})
			this.type = e.type;
			this.id = e.id;
			this.getGoodsList();
		}
	}
</script>

<style lang="scss" scoped>
.dis-flex-between-center{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.goods-item{
	height: 88px;
	padding: 10px 13px;
	color: #999;
	font-size: 14px;
	
	>view{
		height: 88px;
	}
	image{
		width: 138px;
		height: 88px;
		border-radius: 10px;
	}
	.goods-info{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin: 0px 5px;
		flex: 1;
	}
	.btn{
		width: 78px;
		height: 40px;
		background-color: #e33838;
		border-radius: 5px;
		font-size: 14px;
		color: #fff;
		line-height: 40px;
		text-align: center;
	}
}
</style>
