<template>
	<view style="padding: 12px; padding-bottom: 0;" :style="{
			'background-color': goodsInfo.backgroundColor,
		}">
		<view :style="{
			'paddingLeft':goodsInfo.PaddingLeft+'px',
			'paddingRight':goodsInfo.PaddingRight+'px',
			'paddingTop':goodsInfo.PaddingTop+'px',
			'paddingBottom':goodsInfo.PaddingBottom+'px',
		}">
			<u-row gutter="24">
				<u-col span="6" v-for="(item, gli) in goodsInfo.list" :key="gli">
					<view class="good_study_two" @click="openGood(item)" :style="{borderRadius:goodsInfo.SearchFilletPX==0?'10px':goodsInfo.SearchFilletPX+'px'}">
						<view class="img-box">
							<view class="img-show" :style="{'border-top-left-radius':goodsInfo.SearchFilletPX+'px'}">
								<image style="
									  width: 100%;
									  height: 100%;
									"mode="aspectFill" :src="item.picUrl" />
							</view>
						</view>
						<view class="good-info">
							<view class="good-name" v-if="item.name">{{ item.name }}</view>
							<view class="good-price-info" v-if="item.lableName">
								<span class="price">{{ item.lableName }}</span>
							</view>
						</view>
					</view>
				</u-col>
			</u-row>
		</view>
		<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth="gbAuth"></auth>
	</view>
</template>
<script>
	import auth from '@/components/auth/index.vue';
	export default {
		components: {
			auth
		},
		props: ['goodsInfo'],
		data() {
			return {
				mainColor: '',
				showSku: false,
				showAuth: false,
				u: {},
			};
		},
		created() {
			this.mainColor = this.$uiConfig.mainColor;
		},
		methods: {
			openGood(item) {
				this.u = uni.getStorageSync('mall_UserInfo');
				
					if (item.linkUrl) {
						uni.navigateTo({
							url: item.linkUrl,
						});
					}
				
			},
			reloadUserinfo() {
				this.u = uni.getStorageSync('mall_UserInfo');
				// this.showAuth = false;
			},
			//关闭登录窗口
			gbAuth() {
				this.showAuth = false;
			}
		}
	};
</script>

<style>
	.good_study_two {
		position: relative;
		margin-bottom: 12px;
		border: 1rpx solid transparent;
		border-radius: 10rpx;
		overflow: hidden;
		box-shadow: 0 4px 10px 1px #e6e5e5;
		background-color: #fff;
	}

	.good_study_two .tips {
		width: 64rpx;
		height: 64rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 4;
	}

	.good_study_two .img-box {
		width: 100%;
		height: 0;
		padding-top: 100%;
		position: relative;
		overflow: hidden;
	}

	.good_study_two .img-box .img-show {
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

	.good_study_two .guding {
		position: relative;
	}

	.good_study_two .guding .img-box {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
	}

	.good_study_two .good-info {
		padding: 15rpx;
	}

	.good_study_two .good-info .good-name {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		margin-bottom: 8px;
		color: #111111;
		font-size: 26rpx;
		font-weight: bold;
		line-height: 36rpx;
	}

	.good_study_two .good-info .good-price-info {
		display: flex;
		color: #999999;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		font-size: 22rpx;
	}

	.good_study_two .good-info .good-price-info .price {
		color: #999999;
		/* flex: 1; */
		font-size: 11px;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		line-height: 16px;
	}

	.good_study_two .good-info .good-price-info .buy {
		width: 24px;
		text-align: right;
	}
</style>
