<template>
	<view >
		<view class="integralGood" v-if="pid == 'integral_goods'">
			<view
				class="integralGood-item dis-flex"
				@click="goUrl(item.url)"
				:style="{ padding: padding + 'px', marginBottom: index != integralGoodLsit.length - 1 ? '20upx' : '0' }"
				v-for="(item, index) in integralGoodLsit"
				:key="index"
			>
				<view class="logo-img"><image class="logo-img" :src="item.thumb" mode=""></image></view>
				<view class="flex-box content">
					<view class="f-30">{{ item.title }}</view>
					<view class="f-30 c-ff4444" style="line-height: 120upx;">{{ item.price_text }}</view>
					<view class="col-9 f-28" style="text-decoration:line-through;">
						市场价:{{ item.old_price }}元
						<view class="btn">去兑换</view>
					</view>
				</view>
			</view>
		</view>
		<view class="integralGood2" v-if="pid == 'integral_goods2'" :style="{ padding: padding + 'px' }">
			<view class="integralGood2-item" @click="goUrl(item.url)" v-for="(item, index) in integralGoodLsit" :key="index">
				<view class="img-box"><image class="img-box" :src="item.thumb" mode=""></image></view>
				<view >
					<view class="f-28">{{ item.title }}</view>
					<view class="f-26 f-w c-ff4444" style="line-height: 60upx;">{{ item.price_text }}</view>
					<view class="col-9 f-24" style="text-decoration:line-through;">
						市场价:{{ item.old_price }}元
						<view class="col-9 f-24" style="float: right;">{{ item.pv }}人喜欢</view>
					</view>
				</view>
			</view>
		</view>
		<view class="integralGood3" v-if="pid == 'integral_goods3'">
			<view class="integralGood3-item" @click="goUrl(item.url)" :style="{ padding: padding + 'px' }" v-for="(item, index) in integralGoodLsit" :key="index">
				<view class="img-box">
					<image class="img-box" :src="item.thumb" mode=""></image>
					<view class="top">TOP {{ index + 1 < 10 ? '0' + (index + 1) : index + 1 }}</view>
				</view>
				<view class="p-top-20">
					<view class="f-28">
						<view class="sign">积分</view>
						{{ item.title }}
					</view>
					<view class="f-36 f-w c-ff4444" style="line-height: 80upx;">
						{{ item.price_text }}
						<view class="conversion">兑换</view>
					</view>
					<view class="col-9 f-24" style="text-decoration:line-through;">
						市场价:{{ item.old_price }}元
						<view class="col-9 f-24" style="float: right;">{{ item.pv }}人喜欢</view>
					</view>
				</view>
			</view>
		</view>
		<view class="integralGood4" v-if="pid == 'integral_goods4'">
			<view class="integralGood4-item" v-for="(item, index) in integralGoodLsit" :key="index"   @click="goUrl(item.url)"
			:style="{paddingTop: padding + 'px',paddingBottom: padding + 'px',paddingLeft: padding + 'px',paddingRight:(integralGoodLsit.length - 1) == index?padding + 'px':0 }">
				<view class="img-box"><image class="img-box" :src="item.thumb" mode=""></image></view>
				<view class="f-26">{{ item.title }}</view>
				<view class="f-26 c-ff4444" style="line-height: 70upx;">{{ item.price_text }}</view>
				<view class="col-9 f-24" style="text-decoration:line-through;">
					市场价:{{ item.old_price }}元
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import App from '@/common/js/app.js';
export default {
	data() {
		return {};
	},
	props: {
		padding: {
			type: Number,
			default: 0
		},
		integralGoodLsit: {
			type: Array,
			default: [1]
		},
		pid: {
			type: String,
			default: null
		}
	},
	methods: {
		goUrl(url) {
			App.navigationTo({
				url: url
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.integralGood {
	.integralGood-item {
		background-color: #ffffff;

		.logo-img {
			width: 200upx;
			height: 200upx;
		}
		.content {
			padding-left: 20upx;
			.btn {
				width: 150upx;
				height: 50upx;
				border-radius: 60upx;
				background-color: #ff4444;
				color: #ffffff;
				line-height: 50upx;
				text-align: center;
				float: right;
			}
		}
	}
}
.integralGood2 {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	background-color: #ffffff;
	.integralGood2-item {
		flex: 0 0 48%;
		margin-bottom: 20upx;
		.img-box {
			width: 100%;
			height: 300upx;
			border-radius: 10upx;
		}
	}
}
.integralGood3 {
	.integralGood3-item {
		background-color: #ffffff;
		margin-bottom: 20upx;
		.img-box {
			height: 500upx;
			width: 100%;
			position: relative;
			.top {
				height: 50upx;
				width: 150upx;
				border-radius: 0 60upx 60upx 0upx;
				line-height: 50upx;
				text-align: center;
				font-size: 28upx;
				color: #ffffff;
				font-weight: 700;
				background-color: #ff4444;
				position: absolute;
				left: 0;
				top: 0;
			}
		}
		.sign {
			width: 100upx;
			height: 50upx;
			line-height: 50upx;
			text-align: center;
			color: #333333;
			background-color: #ffd93f;
			border-radius: 6upx;
			margin-right: 20upx;
			display: inline-block;
		}
		.conversion {
			width: 150upx;
			height: 50upx;
			line-height: 50upx;
			text-align: center;
			color: #ffffff;
			font-size: 28upx;
			border-radius: 10upx;
			background-color: #ff4444;
			display: inline-block;
			float: right;
			margin-top: 15upx;
		}
	}
}
.integralGood4 {
	width: 100%;
	overflow: auto;
	display: flex;
	background-color: #FFFFFF;
	.integralGood4-item {
		display: inline-block;
		
		flex: 0 0 36%;
		.img-box {
			width: 250upx;
			height: 250upx;
		}
	}
}
</style>
