<template>
	<view class="her-scoller-study" :style="{
			'background-color': goodsInfo.backgroundColor
		}">
		<view class="her_Two_study" :style="{
			'background-color': goodsInfo.backgroundColor,
			'padding-top':goodsInfo.PaddingTop+'px',
			'padding-right':goodsInfo.PaddingRight+'px',
			'padding-bottom':goodsInfo.PaddingBottom+'px',
			'padding-left':goodsInfo.PaddingLeft+'px',
		}">
			<view class="good-five" @click="openGood(item)" v-for="(item, gli) in goodsInfo.list" :style="{borderRadius:goodsInfo.SearchFilletPX+'px'}" :key="gli">
				<view class="img-box">
					<view class="img-show">
						<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>
		</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: '',
				showAuth: false,
				u: {},
			};
		},
		created() {
			this.mainColor = this.$uiConfig.mainColor;
		},
		methods: {
			openGood(item) {
				this.u = uni.getStorageSync('mall_UserInfo');
				if (!this.u) {
					this.u = {
						nickName: '未登录',
						avatarUrl: ''
					};
					this.showAuth = true;
				} else {
					if (item.linkUrl) {
						uni.navigateTo({
							url: item.linkUrl,
						});
					}
				}
			},
			reloadUserinfo() {
				this.u = uni.getStorageSync('mall_UserInfo');
				// this.showAuth = false;
			},
			//关闭登录窗口
			gbAuth() {
				this.showAuth = false;
			}
		}
	};
</script>

<style>
.her-scoller-study {
	padding: 12px;
}
.her_Two_study{
	overflow-x: auto !important;
	display: flex;
	white-space: nowrap;
}
.her-scoller-study .good-five {
	position: relative;
	margin-right: 12px;
	width: 30%;
	border-radius: 10rpx;
	padding-bottom: 10rpx;
	border:1px solid rgb(226, 226, 226);
	overflow: hidden;
}
.her-scoller-study .good-five .tips {
	width: 64rpx;
	height: 64rpx;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 4;
}
.her-scoller-study .good-five .img-box {
	width: 100%;
	height: 0;
	padding-top: 100%;
	position: relative;
}
.her-scoller-study .good-five .img-box .img-show {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: 2;
}
.her-scoller-study .good-five .guding {
	position: relative;
}
.her-scoller-study .good-five .guding .img-box {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
}
.her-scoller-study .good-five .good-info {
	padding: 6rpx;
	padding-bottom: 0;
}
.her-scoller-study .good-five .good-info .good-name {
	overflow: hidden;
	text-overflow: ellipsis;
	display: block;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	margin-bottom: 4rpx;
	font-size: 13px;
	width: 100%;
}
.her-scoller-study .good-five .good-info .good-price-info {
	display: flex;
	justify-items: center;
	align-items: center;
}
.her-scoller-study .good-five .good-info .good-price-info .price {
	color: #999999;
	flex: 1;
	font-size: 12px;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
.her-scoller-study .good-five .good-info .good-price-info .buy {
	width: 24px;
	text-align: right;
}
</style>
