<template>
	<view>
		<view class="goodslist">
			<view class="goodslist-i" v-for="(item, key) in goodsList" :key="key" @click="navgateTo(item.jump_link)">
				<!-- <navigator class="a" :url="'/pagesBuy/rushdetail/index?i='+item.id+'&c='+item.type" hover-class="none"> -->
				<view class="goodslist-i-t">
					<image class="image" :src="item.logo" mode="aspectFill"></image>
				</view>
				<!-- 			</navigator> -->
				<view class="goodslist-i-c">
					<view class="goodslist-i-c-t">
						<view class="goodslist-i-c-t-l">{{ item.store_name }}</view>
						<view class="goodslist-i-c-t-r">{{ item.distance }}</view>
					</view>
					<view class="goodslist-i-c-c">
						<!-- <navigator class="a" :url="'/pagesBuy/rushdetail/index?i='+item.id+'&c='+item.type" hover-class="none"> -->
						<view class="i">{{ item.group }}</view>{{ item.name }}
						<!-- </navigator> -->
					</view>
					<view class="goodslist-i-c-c2">
						<view class="h1">{{ item.price }}
							<view class="i inline">元</view>
						</view>
						<view class="h2" v-if="item.levelnum > 0">
							<view class="a" >购买</view>
						</view>
						<view class="h2 sell-out" v-if="item.levelnum == 0">已售罄</view>
					</view>
					<view class="goodslist-i-c-b">
						<view class="p">
							<view class="span" style="text-decoration:line-through;">市场价{{ item.oldprice }}</view>
							<view class="em">{{ item.buyNum }}人购买</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import App from '@/common/js/app.js'
	export default {
		data() {
			return {

			}
		},
		props: ['goodsList'],
		
		methods: {
			navgateTo(url) {
				App.navigationTo({
					url
				})
			}
		}
	}
</script>

<style scoped>
	.goodslist-i {
		margin-top: 50upx;
	}

	.goodslist-i:first-child {
		margin-top: 0;
	}

	.goodslist-i-t {
		width: calc(100vw - 60upx);
		height: calc((100vw - 60upx) / 1.8);
	}

	.goodslist-i-t .image {
		width: 100%;
		height: 100%;
		border-radius: 4upx;
	}

	.goodslist-i-c-t {
		color: #999;
		font-size: 24upx;
		margin-top: 20upx;
		display: -webkit-flex;
		display: flex;
		justify-content: space-between;
	}

	.goodslist-i-c-t-l {
		padding-right: 20upx;
		-webkit-flex-shrink: 1;
		flex-shrink: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.goodslist-i-c-t-l {
		-webkit-flex: 1;
		flex: 1;
	}

	.goodslist-i-c-c {
		line-height: 48upx;
		font-size: 32upx;
		margin-top: 20upx;
	}

	.goodslist-i-c-c .i {
		height: 48upx;
		line-height: 48upx;
		font-size: 28upx;
		font-style: normal;
		margin-right: 10upx;
		padding: 0 18upx;
		background-color: #FFD93F;
		border-radius: 4upx;
		display: inline-block;
	}

	.goodslist-i-c-c2 {
		margin-top: 20upx;
		display: -webkit-flex;
		display: flex;
		justify-content: space-between;
	}

	.goodslist-i-c-c2 .h1 {
		color: #FF4040;
		font-size: 40upx;
		font-weight: 600;
	}

	.goodslist-i-c-c2 .h1 .i {
		font-size: 24upx;
		font-weight: normal;
		vertical-align: 2upx;
		margin-left: 8upx;
		display: inline-block;

	}

	.goodslist-i-c-c2 .h2 {
		width: 144upx;
		height: 56upx;
		line-height: 56upx;
		color: #fff;
		font-size: 28upx;
		text-align: center;
		font-weight: normal;
		background-color: #FF4040;
		border-radius: 8upx;
	}

	.goodslist-i-c-c2 .sell-out {
		color: #808080;
		background-color: #D2D2D2;
	}

	.goodslist-i-c-b {
		margin-top: 20upx;
	}

	.goodslist-i-c-b .p {
		color: #999;
		font-size: 24upx;
		margin-top: 6upx;
		display: -webkit-flex;
		display: flex;
		justify-content: space-between;
	}

	.goodslist-i-c-b .span {
		text-decoration: line-through;
	}

	.goodslist-i-c-b .em {
		font-style: normal;
	}
</style>
