<template>
	<view class="">
		<!-- <view class="cloud_entrepot" :style="{'min-height': winHeight + 'px'}">
			<view class="head-wrapper"></view>
			<view class="town-title">{{town}}里海云仓</view>
			<view class="body-wrapper">
				<block v-for="(item,index) in cloudList" :key="index">
					<navigator class="item"
						:url="`/pages/nongKe/goods_list/index?cate_id=${item.category_id}&street=${street_code}&name=${item.category_name}`"
						:style="{'background-image': `url(${item.background})`}">
						<text class="item-title">{{item.category_name}}云仓服务</text>
						<text>{{item.description}}</text>
						<view class="chakan-btn">查看</view>
					</navigator>
				</block>
			</view>
		</view> -->


		<view class="">
			<view style="height: var(--status-bar-height);"></view>
			<transition name="fade">
				<view class="head" v-if="showtit">
					<view style="display: flex;align-items: center;">
						<u--image :showLoading="true" src="/static/images/LHYC/FH.png" width="50.82rpx"
							height="50.82rpx"></u--image>
						<view class="head_tit">
							通滩镇里海云仓
						</view>
					</view>
					<view class="" @click="showPop=true">
						<u--image :showLoading="true" src="/static/images/LHYC/QB.png" width="50.82rpx"
							height="50.82rpx"></u--image>
						全部
					</view>
				</view>
			</transition>
			<transition name="fade">
				<!-- 滚动 -->
				<view class="heads" v-if="!showtit">
					<view class="" style="display: flex;align-items: center;">
						<view class="back" style="margin-right: 17rpx;">
							<u--image :showLoading="true" src="/static/images/LHYC/FH.png" width="50.82rpx"
								height="50.82rpx"></u--image>
						</view>
						<view class="" style="font-size: 40rpx;font-weight: 700;transform: skewX(-10deg);">
							供销综合云市场
						</view>
					</view>

					<view style="position: relative;width: 289.14rpx;">
						<u-search borderColor="#FF6D20" bgColor="white" :showAction="false" placeholder="请输入..."
							v-model="keyword" class="serch_cls"></u-search>
						<u--image class="img_cls" :showLoading="true" src="/static/images/GXSC/SS.png" width="115.65rpx"
							height="56.82rpx"></u--image>
					</view>
					<view class='iconfont search-right' @click="showPop=true">
						<u--image :showLoading="true" src="/static/images/LHYC/QB.png" width="50.82rpx"
							height="50.82rpx"></u--image>
						全部
					</view>
				</view>
			</transition>


			<view class="box">
				<view class="" style="">
					<swiper :autoplay="false" :active-class="activeClass" :interval="3000" class="swipers"
						:circular="true" previous-margin='1rpx' next-margin='1rpx' :current="current"
						:disable-touch="true">
						<swiper-item v-for="item in list3">
							<u--image :showLoading="true" :src="item" width="750rpx" height="998.83rpx"></u--image>
						</swiper-item>
					</swiper>

				</view>
				<!-- 	<u--image :showLoading="true" src="/static/images/LHYC/BG.png" width="750rpx"
					height="998.83rpx"></u--image> -->
				<view class="menu" v-if="false">

					<swiper :autoplay="false" :active-class="activeClass" :interval="3000" class="swiper"
						:circular="true" previous-margin='280rpx' next-margin='280rpx' :current="current"
						@change="test">
						<swiper-item v-for="item in list3">
							<u--image :showLoading="true" :src="item" width="175.23rpx" height="175.23rpx"></u--image>
						</swiper-item>
					</swiper>


				</view>

				<view class="content_act" :style="">
					<view class="content_sift" v-if="true">
						<view class="">
							综合
						</view>
						<view class="">
							销量
						</view>
						<view class="">
							价格
						</view>
					</view>
					<view class="goods_list">
						<view class="goods" v-for="item,index in [1,1,1,1,1]">
							<view class="left">
								<u--image :showLoading="true" src="/static/images/LHYC/BG.png" width="192.76rpx"
									height="192.76rpx"></u--image>
							</view>
							<view class="right">
								<view class="tit">
									亿福馒头粉纯天然无添加小麦粉加工 1000g/袋
								</view>
								<view class="">
									<view class="good_score">
										<text style="margin-right: 10rpx;color: #F84221;">5.0</text>
										<text>3000+评论</text>
									</view>
									<view class="good_price">
										<view class="good_price_l">
											<view class=""
												style="color: #F84221;font-size: 22.78rpx;font-weight: bold;">
												￥<text style="font-size: 30rpx;">10</text>.00
											</view>
											<view class="old_price">
												￥30.00
											</view>
										</view>
										<view class="good_price_r">
											<u--image :showLoading="true" src="/static/images/LHYC/J.png"
												width="49.07rpx" height="49.07rpx"></u--image>
										</view>

									</view>
								</view>
							</view>
						</view>
						<view style="height: 100rpx;">

						</view>
					</view>
					<view class="card">
						<view class="left">
							<view class="">
								<u--image :showLoading="true" src="/static/images/LHYC/GWC.png" width="63.09rpx"
									height="63.09rpx"></u--image>
							</view>
							<view class="tot_price">
								<view class="">
									￥20.00
								</view>
								<view class="">
									支持配送 售后无忧
								</view>
							</view>
						</view>
						<view class="right">
							去结算
						</view>
					</view>
				</view>


			</view>
			<!-- http://192.168.1.5:8080/ -->
		</view>
		<!-- 组件 -->
		<view<u-popup mode="right" :show="showPop" @close="showPop=false" @open="showPop=true">
			<view class="pop">
				<!-- <text>出淤泥而不染，濯清涟而不妖</text> -->
				<view class="pop_head" style="display: flex;">
					<u--image :showLoading="true" src="/static/images/LHYC/PFH.png" width="50.82rpx"
						height="50.82rpx"></u--image>
					<view class="head_tit">
						里海云仓
					</view>
				</view>
				<view class="pop_content">
					<view class="pop_li" v-for="item in [1,1,1,1,1,1]">
						<u--image :showLoading="true" src="/static/images/LHYC/SHFWYC.png" width="84.11rpx"
							height="84.11rpx"></u--image>
						<view class="" style="margin-left: 20rpx;">
							<view style="font-size: 33.29rpx;color: black;">
								生活服务云仓服务
							</view>
							<view class="" style="font-size: 22.78rpx;">
								生活服务云仓服务
							</view>
						</view>
					</view>
				</view>
			</view>
			</u-popup>
	</view>
	</view>

</template>

<script>
	import {
		getCityCloundShop
	} from '@/api/api.js'
	import {
		Toast
	} from '@/libs/uniApi';
	export default {
		data() {
			let src = 'https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/luzhou/static4/13';
			return {
				current: 3,
				winHeight: 0,
				cloudList: [],
				street_code: '',
				town: '',
				list: [1, 1, 1, 1, 1],
				showPop: false,
				keyword: "",
				showtit: true,
				activeClass: 'activeClass',
				list3: [
					'/static/images/LHYC/BG.png',
					'/static/images/LHYC/WYLVYC.png',
					'/static/images/LHYC/NFCPYC.png',
					'/static/images/LHYC/NFCPYC.png',
					'/static/images/LHYC/NFCPYC.png',
				],
			}
		},
		onLoad(e) {
			uni.getSystemInfo({
				success: (res) => {
					this.winHeight = res.windowHeight
				},
			});
			this.street_code = e.street
			this.town = e.town
			this.getCloundShop()
		},
		onShow() {},
		onPageScroll(e) {
			console.log(e.scrollTop)

			this.showtit = !Boolean(e.scrollTop)
		},
		onPullDownRefresh() {
			this.getCloundShop()
			uni.stopPullDownRefresh()
		},
		methods: {
			test(e) {
				// console.log(e.target.current)
				this.current = e.target.current
			},
			async getCloundShop() {
				const {
					data
				} = await getCityCloundShop({
					street_code: this.street_code
				})
				this.cloudList = data
				data.length < 1 ? Toast("暂无云仓") : '';
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		position: relative;

		.content {
			width: 100vw;
			position: absolute;
			top: 965rpx;
			z-index: 99;
			background-color: #F4F4F4;
			padding: 0 10rpx;

		}

		.content_act {
			width: 100vw;
			position: absolute;
			top: 165rpx;
			z-index: 99;
			background-color: #F4F4F4;
			padding: 0 10rpx;
		}
	}

	.fade-enter-active,
	.fade-leave-active {
		transition: opacity 0.5s;
		/* 过渡动画持续时间 */
	}

	.fade-enter,
	.fade-leave-to {
		opacity: 0;
		/* 初始状态和最终状态的透明度 */
	}

	.head_tits {
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		padding: 0 20rpx;
		color: white;
	}

	.img_cls {
		position: absolute;
		top: 50%;
		right: 7rpx;
		transform: translateY(-50%);

	}

	.pop {
		width: 615.07rpx;
		padding: 30rpx 28rpx;

		.pop_content {
			width: 559rpx;
			height: 80vh;
			background-color: #F4F4F4;
			padding: 28rpx;
			border-radius: 21.03rpx 21.03rpx 0rpx 0rpx;
			margin-top: 47rpx;

			.pop_head {
				// display: flex;
			}

			.pop_li {
				display: flex;
				margin-bottom: 52rpx;
			}
		}


	}

	.head_tit {
		margin-left: 20rpx;
		font-size: 40rpx;
		// font-weight: 700;
		transform: skewX(-10deg);
	}



	.head {
		position: absolute;
		z-index: 100;
		color: white;
		display: flex;
		justify-content: space-between;
		width: 100%;
		padding: 0 20rpx;
		align-items: center;



	}

	.heads {
		position: fixed;
		z-index: 100;
		color: white;
		display: flex;
		justify-content: space-between;
		width: 100%;
		padding: 0 20rpx;
		align-items: center;




	}

	.menu {
		position: absolute;
		top: 748rpx;
		width: 750rpx;

	}

	.goods_list {

		box-shadow: 0 -330rpx 20px rgba(255, 255, 255, 0.6);

		.goods {
			display: flex;
			padding: 21rpx;
			background-color: white;
			border-radius: 21.03rpx 21.03rpx 21.03rpx 21.03rpx;
			margin-bottom: 20rpx;

			.left {
				width: 192.76rpx;
				height: 192.76rpx;
				border-radius: 10.51rpx 10.51rpx 10.51rpx 10.51rpx;
				margin-right: 21rpx;
			}

			.right {
				display: flex;
				justify-content: space-between;
				flex-direction: column;

				.tit {
					font-size: 29.79rpx;
					color: black;
					font-weight: bold;

				}

				.good_score {
					font-size: 26rpx;
					color: #B3B3B3;
					margin-bottom: 15rpx;
				}

				.good_price {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.good_price_l {
						display: flex;

						.old_price {
							color: #B3B3B3;
							text-decoration: line-through;
							font-size: 26.29rpx;
							margin-left: 15rpx;
						}
					}
				}

			}

			// color: greenyellow;
		}
	}

	.activeClass {
		width: 400rpx;
		height: 400rpx;
	}

	.content_sift {
		width: 750rpx;
		padding: 22rpx 0;
		display: flex;
		justify-content: space-around;
		position: fixed;
		z-index: 99999;
		background-color: white;
	}

	.swipers {
		width: 750rpx;
		height: 998.83rpx;
	}

	.card {
		width: 720rpx;
		// margin:auto;
		left: 50%;
		transform: translateX(-50%);
		position: fixed;
		bottom: 0;
		background-color: #333333;
		height: 101.64rpx;
		border-radius: 50.82rpx;
		overflow: hidden;
		color: white;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;

		.left {
			display: flex;
			align-items: center;
			padding: 10rpx 35rpx;

			.tot_price {
				display: flex;
				margin-left: 42rpx;
				flex-direction: column;
				justify-content: space-between;
			}
		}

		.right {
			font-size: 33.29rpx;
			line-height: 50px;
			background: linear-gradient(to right, #F84221, #FF6D20);
			width: 175.23rpx;
			text-align: center;
		}
	}

	// .cloud_entrepot {
	// 	background: url("https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/luzhou/static4/13/ycbg.png") no-repeat;
	// 	background-size: cover;
	// 	padding-bottom: 92.98rpx;
	// }

	// .head-wrapper {
	// 	height: 485.96rpx;
	// 	width: 100%;
	// 	background: url("https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/luzhou/static4/13/top.png") no-repeat;
	// 	background-size: cover;
	// 	margin-bottom: 49.12rpx;
	// }

	// .town-title {
	// 	margin: 0 auto;
	// 	width: 100%;
	// 	text-align: center;
	// 	font-size: 50.88rpx;
	// 	color: #fff;
	// 	margin-bottom: 28.07rpx;

	// 	&::after {
	// 		content: '';
	// 		display: inline-block;
	// 		width: 66.67rpx;
	// 		height: 31.58rpx;
	// 		background: url("https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/luzhou/static4/13/you.png") no-repeat;
	// 		background-size: cover;
	// 		margin-left: 24.56rpx;
	// 	}

	// 	&::before {
	// 		content: '';
	// 		display: inline-block;
	// 		width: 66.67rpx;
	// 		height: 31.58rpx;
	// 		background: url("https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/luzhou/static4/13/zuo.png") no-repeat;
	// 		background-size: cover;
	// 		margin-right: 24.56rpx;
	// 	}
	// }

	// .body-wrapper {
	// 	width: 694.74rpx;
	// 	display: flex;
	// 	justify-content: space-between;
	// 	flex-wrap: wrap;
	// 	margin: 0 auto;

	// 	.item {
	// 		width: 336.84rpx;
	// 		height: 100%;
	// 		padding: 24.56rpx 28.07rpx;
	// 		margin-bottom: 21.05rpx;
	// 		background-repeat: no-repeat;
	// 		background-size: 100% 100%;
	// 		box-sizing: border-box;

	// 		text {
	// 			display: block;
	// 			font-size: 24.56rpx;
	// 			color: #999;
	// 			margin-bottom: 14.04rpx;
	// 		}

	// 		.item-title {
	// 			font-size: 31.58rpx;
	// 			color: #333;
	// 		}

	// 		.chakan-btn {
	// 			width: 114.04rpx;
	// 			height: 49.12rpx;
	// 			font-size: 28.07rpx;
	// 			text-align: center;
	// 			line-height: 49.12rpx;
	// 			color: #fff;
	// 			margin-top: auto;
	// 			background: linear-gradient(90deg, #FE5300 0%, #F84221 100%);
	// 			border-radius: 50px;
	// 		}
	// 	}
	// }
</style>