<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 class="">
				<view v-if="showtit">
					<view :class="{'head':true,'show':showtit}" style="padding-top:  var(--status-bar-height);">
						<view style="display: flex;align-items: center;">
							<u--image :showLoading="true" v-if="cloudList.length>0" src="/static/images/LHYC/FH.png"
								width="50.82rpx" height="50.82rpx" @click='goBack'></u--image>
							<u--image v-else :showLoading="true" src="/static/images/LHYC/PFH.png" width="50.82rpx"
								height="50.82rpx" @click='goBack'></u--image>
							<view class="head_tit" :style="{color:cloudList.length>0?'':'black'}">
								{{town}}里海云仓
							</view>
							<view class="sl" :class="{actsl:showSelect}" @click="showSelect=!showSelect">
								<u--image :showLoading="true" src="/static/images/GXSC/BSL.png" width="33.29rpx"
									height="33.29rpx"></u--image>
							</view>
						</view>
						<view class="" style="display: flex;align-items: center;">
							<view style="display: flex;align-items: center;z-index: 999999;">
								<u--image :showLoading="true" src="/static/images/LHYC/DWB.png" width="50.82rpx"
									height="50.82rpx"></u--image>
								<view class="town_name" :style="{color:cloudList.length>0?'':'black'}"
									@click="showpick">{{street}}</view>
							</view>
							<view class="head_r" @click="showPop=true">
								<u--image v-if="cloudList.length>0" :showLoading="true" src="/static/images/LHYC/QB.png"
									width="50.82rpx" height="50.82rpx"></u--image>
								<u--image v-else :showLoading="true" src="/static/images/LHYC/QB.png" width="50.82rpx"
									height="50.82rpx"></u--image>
								<text :style="{color:cloudList.length>0?'':'black'}">全部</text>
							</view>

						</view>


					</view>

					<view class="selected-list" :style="`top:${headtop}px`" :class="{actSel:showSelect}">
						<div class="triangle-up"></div>
						<view
							@click="navgo(`/pages/nongKe/supply_chain/supplier?type_id=10&street_id=${street_code}&townName=${street}`)">
							供销综合云市场 <text></text>
						</view>
						<view class="selected-li">
							供销综合云商品 <text> <u--image style="margin-left: 40rpx;" :showLoading="true"
									src="/static/images/GXSC/XZ.png" width="24.53rpx" height="24.53rpx"></u--image>
							</text>
						</view>
					</view>
				</view>





				<!-- 滚动 -->
				<view :class="{'heads':true,'show':!showtit}" style="padding-top: var(--status-bar-height);">
					<view style="align-items: center;display: flex;justify-content: space-between;">
						<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" @click='goBack'></u--image>
							</view>
							<view class="" style="font-size: 40rpx;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/SSBT.png"
								width="115.65rpx" height="56.82rpx" @click="serch"></u--image>
						</view>
						<view class='head_r' @click="showPop=true">
							<u--image :showLoading="true" src="/static/images/LHYC/QB.png" width="50.82rpx"
								height="50.82rpx"></u--image>
							<text class="">全部</text>
							<view class="flags">

							</view>
						</view>
					</view>
				</view>

				<view class="box" v-if="cloudList.length>0">
					<view :class="act_swiper">
						<swiper :autoplay="false" :active-class="activeClass" :interval="3000" class="swipers"
							:circular="true" previous-margin='0rpx' next-margin='0rpx' :current="current"
							:disable-touch="true">
							<swiper-item v-for="(item,index) in cloudList">
								<u--image :showLoading="true" :src="item.cover" :class="act_img" width="750rpx"
									height="998.83rpx"></u--image>
							</swiper-item>
						</swiper>
					</view>
					<view class="" style="height:998.83rpx;" v-if="act_swiper">

					</view>


					<view class="menu" v-if="showtit" style="transition: 1s;">
						<swiper :autoplay="false" :active-class="activeClass" :interval="3000" class="swiper"
							:circular="true" previous-margin='270rpx' next-margin='270rpx' :current="current"
							@change="test">
							<swiper-item v-for="(item,index) in cloudList" :key="index" @click="clickSwiperFn(index)">
								<view class="swiper_item" :class="{swiper_item_act:index==current}">
									<u--image :showLoading="true" :src="item.background" class="swiper_b"
										width="175.23rpx" height="175.23rpx"></u--image>
								</view>

							</swiper-item>
						</swiper>
					</view>
					<!-- 商品列表 -->
					<view class="content">
						<view class="content_sift" :style="{position:pocls,top:(headtop)+'px'}" v-if="!showtit">
							<view :class="{act:item.act,price_sift:true}" v-for="item,index in actList" :key="index"
								@click="screenGoods(item.screen,index)">
								{{item.tit}}
								<view class="" v-if="index==2" style="margin-left: 10rpx;">
									<u-icon name="arrow-up" :color="item.price&&item.act?'#FF6D20':'black'"
										size="10"></u-icon>
									<u-icon name="arrow-down" :color="!item.price&&item.act?'#FF6D20':'black'"
										size="10"></u-icon>
								</view>
							</view>
						</view>
						<view class="goods_list" v-if="goodsList.length>0">
							<view class="empty" v-if='showLoading'>
								<u-loading-icon v-if='showLoading' text="加载中" textSize="18"></u-loading-icon>
							</view>
							<view class="goods" @click="goodDetail(item)" v-else v-for="item,index in goodsList">
								<view class="left">
									<u--image :showLoading="true" :src="item.image" width="192.76rpx"
										height="192.76rpx"></u--image>
								</view>
								<view class="right">
									<view class="tit">
										<!-- 亿福馒头粉纯天然无添加小麦粉加工 1000g/袋 -->
										{{item.store_info}}
									</view>
									<view class="">
										<view class="good_score">
											<text style="margin-right: 10rpx;color: #F84221;">{{item.rate}}</text>
											<text>{{item.reply_count}}评论</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;">{{item.price}}</text>
												</view>
												<view class="old_price">
													￥30.00
												</view>
											</view>
											<view class="good_price_r">
												<view :class="{x_tra:trnList[index].bottom }"
													:style="`transform:translateY(${trnList[index].bottom}px);transition:${trnList[index].bottom?1:0}s  cubic-bezier(0.4, -0.9, 0.75, 1);`"
													@click.stop="addcart(item,index)">
													<u--image :class="'act_class'+index"
														:style="`transform:translateX(${trnList[index].left}px);transition:${trnList[index].bottom?1:0}s `"
														src="/static/images/LHYC/J.png" width="49.07rpx"
														height="49.07rpx"></u--image>
												</view>

											</view>

										</view>
									</view>
								</view>
							</view>
							<view style="height: 100rpx;">
								<u-loadmore :status="status" />
							</view>
						</view>
						<!-- 空 -->
						<view v-else>
							<view class="empty">
								<view class="info">
									<u--image :showLoading="true" src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/noCart.png" width="400.09rpx"
										height="400.09rpx"></u--image>
									<view class="" style="text-align: center;color:#999">
										暂无商品
									</view>
								</view>
							</view>
						</view>
						<!-- 购物车 -->
						<view class="card" :style="`bottom:${appInfo.bottom}px`"
							@click="navgo('/pages/order_addcart/order_addcart')">
							<view class="left">
								<view class="cart" :class="{act_cart:act_cart}"
									style="position: relative;z-index: 9999999;">
									<u--image :showLoading="true" src="/static/images/LHYC/GWC.png" width="63.09rpx"
										height="63.09rpx"></u--image>

									<view class="badge" v-show="goodsNum">
										{{goodsNum}}
									</view>
								</view>
								<view class="tot_price">
									<view class="">
										￥{{totalMoney}}
									</view>
									<view class="">
										支持配送 售后无忧
									</view>
								</view>
							</view>
							<view class="right">
								去结算
							</view>
						</view>
					</view>


				</view>
			</view>
			<!-- 组件 -->
			<view class="" v-if="showPop">
				<u-popup mode="right" :show="showPop" @close="showPop=false" @open="showPop=true">
					<view class="pop">
						<view style="height: var(--status-bar-height);"></view>
						<view class="pop_head" style="display: flex;">
							<u--image :showLoading="true" src="/static/images/LHYC/PFH.png" width="50.82rpx"
								height="50.82rpx" @click='showPop=false'></u--image>
							<view class="head_tit">
								里海云仓
							</view>
						</view>
						<view class="pop_content" v-if="cloudList.length">
							<view class="pop_li" @click="all(index)" v-for="item,index in cloudList" :key="index">
								<u--image :showLoading="true" :src="item.background" width="84.11rpx"
									height="84.11rpx"></u--image>
								<view class="" style="margin-left: 20rpx;">
									<view style="font-size: 33.29rpx;color: black;">
										{{item.category_name}}云仓服务
									</view>
									<view class="" style="font-size: 22.78rpx;">
										{{item.description}}
									</view>
								</view>
							</view>
						</view>


						<view v-else>
							<!-- <u--image :showLoading="true" src="/static/images/LHYC/PFH.png" width="50.82rpx" height="50.82rpx"
							@click='goBack'></u--image>
					</view> -->
							<view class="yuncangempty">

								<u--image :showLoading="true" src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/noCart.png" width="400.09rpx"
									height="400.09rpx"></u--image>
								<view class="" style="text-align: center;color:#999">
									当前区域暂无云仓
								</view>
							</view>
						</view>

					</view>
				</u-popup>

			</view>

		</view>
		<view class="empty" style="" v-if="cloudList.length<=0">
			<view style="height: var(--status-bar-height);"></view>
			<view style="padding: 10rpx;">

				<view class="info">
					<u--image :showLoading="true" src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/noCart.png" width="400.09rpx"
						height="400.09rpx"></u--image>
					<view class="" style="text-align: center;color:#999">
						当前区域暂无云仓
					</view>
				</view>
			</view>



			<!-- 多规格购物车 -->


			<authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse">
			</authorize>
			<view class="" :style="`height:${appInfo.bottom}px;background-color:white`">
			</view>
		</view>
		<view class="">
			<u-picker :defaultIndex="defaInd" :show="showPicker" ref="uPicker" :columns="columnData" @confirm="confirm"
				@cancel="showPicker = false" @change="changeHandler" keyName="name"></u-picker>
		</view>
		<view class="" v-if="showcartpop">
			<u-popup :show="showcartpop" @close="closecartpop" @open="opencartpop">
				<view class="sku">
					<view class="sku_head">
						<view class="sku_head_l">
							<u--image :showLoading="true" :src="skuform.image" width="200.09rpx"
								height="200.09rpx"></u--image>
						</view>
						<view class="sku_head_r">
							<view class="sku_goods_tit">
								{{skuform.store_info}}
							</view>
							<view class="">
								<view class="sku_goods_price">
									￥ {{skuform.price}}
								</view>
								<view class="sku_goods_num" v-if="this.skusize">
									库存:{{skuform.sku[this.skusize].stock}}
								</view>
							</view>
						</view>
					</view>
					<view class="sku_size">
						<view class="" style="margin-bottom: 10rpx;">
							尺码
						</view>
						<view class="">
							<text class="size_li" :class="{act_size_li:item.sku==skusize}"
								v-for="(item,index) in skuform.sku" @click="skusizechange(item.sku)">{{item.sku}}</text>

						</view>
					</view>
					<view class="sku_num">
						<view class="">
							数量
						</view>
						<view class="">
							<u-number-box v-model="skuNumber" @change="valChange"></u-number-box>
						</view>
					</view>
					<view class="skuaddcart" @click="skuaddcart">
						确定
					</view>

				</view>
			</u-popup>
		</view>


	</view>

</template>

<script>
	import {
		cloudWarehouse,
		getCityCloundShop
	} from '@/api/requesta.js'
	import {
		Toast
	} from '@/libs/uniApi';
	import {
		initiateAssistApi
	} from '@/api/activity.js';
	import {
		getCartCounts,
		getCartList,

	} from '@/api/requesta.js';
	import {
		goShopDetail
	} from '@/libs/order.js'
	// 7200 = 8 = 80000 8616
	import {
		postCartAdd,
	} from '@/api/store.js';
	import authorize from '@/components/Authorize';

	import {
		getArea,
		getStreet
	} from '@/api/article.js';
	import {
		getIndexData,
		getDiy
	} from '@/api/api.js'
	import {
		getGeocoder
	} from '@/api/store.js';
	import {
		mapGetters
	} from 'vuex'
	import Cache from '@/utils/cache';
	export default {
		components: {
			authorize,
		},
		data() {
			let src = 'https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/luzhou/static4/13';
			return {
				skuform: {},
				defaInd: [0, 0],
				showPicker: false,
				columnData: [],
				skusize: 0,
				skuNumber: 1,
				showcartpop: false,
				trnList: [],
				act_cart: false,
				appInfo: {},
				pocls: "",
				type: "",
				act_swiper: "",
				current: 3,
				goodsNum: 0,
				goodsList: [],
				isEmpty: false,
				winHeight: 0,
				cloudList: [],
				street: '',
				street_code: '',
				totalMoney: 0,
				town: '',
				list: [1, 1, 1, 1, 1],
				showSelect: false,
				showPop: false,
				keyword: "",
				showLoading: false,
				tot_price: 1,
				showtit: true,
				cartList: [],
				activeClass: 'activeClass',
				headtop: 0,
				page_num: 1,
				act_img: "",
				cartTagInfo: {},
				isAuto: false,
				actList: [{
					tit: '综合',
					act: "",
					screen: ""
				}, {
					tit: '销量',
					act: "",
					screen: "sales"
				}, {
					tit: '价格',
					act: "",
					screen: "price_asc",
					price: true,
				}],
				status: "loadmore",
				flag: false,
				isShowAuth: false, //是否隐藏授权

			}
		},
		computed: {
			...mapGetters(['isLogin', 'viewColor', 'uid']),
		},
		// ...mapGetters(['isLogin', 'viewColor', 'uid']),
		onLoad(e) {
			// this.cartFn()
			this.appInfo = this.$appInfo.safeAreaInsets
			this.winHeight = this.$appInfo.windowHeight
			this.street_code = e.street
			this.town = e.town
			this.getCloundShop()
			this.street = e.town
			this.Area()
			let that = this
			setTimeout(() => {
				uni.createSelectorQuery()
					.in(this)
					.select('.flags')
					.boundingClientRect(rect => {
						that.headtop = rect.top
					})
					.exec();
				uni.createSelectorQuery()
					.in(this)
					.select('.flags')
					.boundingClientRect(rect => {
						this.headtop = rect.top
					})
					.exec();
				uni.createSelectorQuery()
					.in(this)
					.select('.cart')
					.boundingClientRect(rect => {
						// console.log(this.cartTagInfo, 6666)
						this.cartTagInfo = rect
					})
					.exec();
				// console.log(that.headtop)
			}, 500)

			// console.log(this.appInfo, "手机信息")
		},
		onShow() {
			this.cartFn()
			this.showSelect = false
		},
		// 分页
		onReachBottom() {
			if (this.flag || !this.goodsList.length) return
			this.status = "loading"
			this.page_num += 1
			this.flag = true
			cloudWarehouse({
				street_code: this.street_code,
				category_id: this.cloudList[this.current]?.category_id || "",
				order: this.type,
				keyword: this.keyword,
				page_num: this.page_num

			}).then(res => {
				// console.log(res.data.list[0].product_id, this.goodsList[0].product_id)
				if (res.data.list[0].product_id == this.goodsList[0].product_id) {
					this.status = "nomore"
					this.flag = false
				} else {
					if (res.data.list.length == 0) {
						this.status = "nomore"
						return
					}
					this.goodsList = this.goodsList.concat(res.data.list)
				}
			})
			// this.getList().then(res => {
			// 	// console.log(res)
			// 	return
			// 	this.goodsList = this.goodsList.concat(res.data.data)
			// 	this.flag = false
			// 	if (!res.data.data.length) {
			// 		this.status = "nomore"
			// 		this.flag = true
			// 	}
			// })
		},
		onPageScroll(e) {
			let that = this
			this.showtit = !Boolean(e.scrollTop)
			uni.createSelectorQuery()
				.in(this)
				.select('.content')
				.boundingClientRect(rect => {
					if (rect.top <= (this.headtop)) {
						this.pocls = 'fixed'
						this.act_swiper = 'act_swiper'
						this.act_img = 'act_img'

					} else {
						this.pocls = ''
						this.act_swiper = ''
						this.act_img = ''

					}
				})
				.exec();
		},
		onPullDownRefresh() {
			this.getCloundShop()
			this.getList()
			this.cartFn()
			uni.stopPullDownRefresh()
		},
		methods: {
			showpick() {
				this.showPicker = !this.showPicker


			},
			swiperClick(item) {
				const url = item.info[1].value
				uni.navigateTo({
					url: url
				})
			},
			selectLocation() {
				this.isSelectPlace ? this.showPicker = true : ''

			},

			confirm(e) {
				this.showPicker = false
				this.$emit('selectPlce', e)
				this.$emit('change', e)
				this.street = e.value[1].name
				this.$nextTick(() => {
					this.$bus.$emit('value-updated', e.value[1].name + ',' + e.value[1].code);

				})

				// this.sotreParam.street_id = e.value[1].code
				this.street_code = e.value[1].code
				this.getCloundShop()
				this.town = e.value[1].name
				// this.storeMerchantList()

			},
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values,
					index,
					picker = this.$refs.uPicker
				} = e;
				if (columnIndex === 0) {
					getStreet({
						area_code: value[0]['code']
					}).then(res => {
						picker.setColumnValues(1, res.data);
					});
				}
			},
			Area() {
				let that = this
				getArea({
					city_code: 510500
				}).then(res => {

					this.$refs.uPicker.setColumnValues(0, res.data);
					this.Street(res.data[0]['code']);
					// console.log(res.data, 66666)
				});
			},
			Street(code) {
				getStreet({
					area_code: code
				}).then(res => {
					this.$refs.uPicker.setColumnValues(1, res.data);

				});
			},

			swiperChange(e) {
				let {
					current,
					source
				} = e.detail;
				if (source === 'autoplay' || source === 'touch') {
					this.bgColor = this.swiper.url[e.detail.current]['img']
					this.$emit('kkchange', this.bgColor)
				}
			},


			// 对象转数组
			objToArr(data) {
				let obj = Object.keys(data).sort();
				let m = obj.map(key => data[key]);
				return m;
			},
			skusizechange(i) {

				this.skusize = i
			},
			skuaddcart() {
				this.showcartpop = false
				// this.skuform = {}
				let res = postCartAdd({
					cart_num: this.skuNumber,
					is_new: 0,
					product_attr_unique: this.skuform.sku[this.skusize].unique,
					product_id: this.skuform.product_id,
					product_type: this.skuform.product_type,
					spread_id: "",
				}).then((res, err) => {
					this.cartFn()
					uni.showToast({
						title: "加入成功",
						duration: 1000,

					})
				}).catch(err => {
					// this.act_cart = false
					uni.showToast({
						title: err,
						icon: "none",
						duration: 1000,
					})
				})

			},
			valChange(e) {
				this.skuNumber = e.value

			},
			closecartpop() {
				this.showcartpop = false
			},
			opencartpop() {
				this.showcartpop = true
			},
			// 授权关闭
			authColse: function(e) {
				this.isShowAuth = e;
			},

			onLoadFun() {
				this.isShowAuth = false;
			},
			clickSwiperFn(i) {
				// console.log(i)
				this.current = i
			},
			cartFn() {
				getCartList().then(res => {
					// console.log(res)
					this.totalMoney = 0
					this.cartList = res.data.list
					this.cartList.forEach(e => {

						e.list.forEach(item => {
							this.totalMoney += item.cart_num * item.productAttr.price
						})

					})
					this.totalMoney = this.totalMoney.toFixed(2)
				})
				getCartCounts().then(res => {
					this.goodsNum = res.data[0].count
				})
			},
			goodDetail(item) {
				goShopDetail(item, this.uid).then(res => {
					if (this.isLogin) {
						initiateAssistApi(item.activity_id).then(res => {
							let id = res.data.product_assist_set_id;
							uni.hideLoading();
							uni.navigateTo({
								url: '/pages/activity/assist_detail/index?id=' + id
							});
						}).catch((err) => {
							uni.showToast({
								title: err,
								icon: 'none'
							})
						});
					} else {
						this.isAuto = true;
						this.isShowAuth = true
					}

				})
			},
			serch() {
				this.getList()
			},
			goBack() {
				uni.navigateBack()
			},
			screenGoods(type, i) {
				this.actList.forEach(item => {
					item.act = ""
				})
				this.actList[i].act = true
				this.type = type
				if (i == 2) {
					this.actList[i].price = !this.actList[i].price
					this.type = this.actList[i].price ? 'price_asc' : ''
				}
				this.getList()

				// console.log(this.type)

			},
			navgo(url) {
				uni.navigateTo({
					url
				})
			},
			getList() {
				this.showLoading = true
				this.status = "loading"
				cloudWarehouse({
					street_code: this.street_code,
					category_id: this.cloudList[this.current]?.category_id || "",
					order: this.type,
					keyword: this.keyword,
					page_num: this.page_num

				}).then(res => {
					this.goodsList = res.data.list
					this.showLoading = false
					this.goodsList.forEach(item => {
						this.trnList.push({
							left: 0,
							bottom: 0
						})
					})
				})

			},
			addcart(item, i) {
				if (!this.isLogin) {
					this.isAuto = true;
					this.isShowAuth = true
					return
				}

				if (item.sku['']) {
					let data = {
						cart_num: 1,
						is_new: 0,
						product_attr_unique: item.sku[''].unique,
						product_id: item.product_id,
						product_type: item.product_type,
						spread_id: "",
					}
					let that = this
					uni.createSelectorQuery().in(this).select(`.act_class${i}`).boundingClientRect(data1 => {
						that.trnList[i].left = this.cartTagInfo.left - data1.left;
						that.trnList[i].bottom = this.cartTagInfo.top - data1.top;

						let timer = setTimeout(() => {
							that.trnList[i].left = 0
							that.trnList[i].bottom = 0
							that.act_cart = true
							setTimeout(() => {
								that.act_cart = false
							}, 500)
						}, 1000)
					}).exec();
					let res = postCartAdd({
						...data
					}).then((res, err) => {
						this.cartFn()
						uni.showToast({
							title: "加入成功",
							duration: 1000,

						})
					}).catch(err => {
						uni.showToast({
							title: err,
							icon: "none",
							duration: 1000,
						})
					})
					setTimeout(() => {
						that.act_cart = false
					}, 500)
				} else {
					this.skuform = item
					this.showcartpop = true
					const keys = Object.keys(item.sku);
					const firstKey = keys[0];
					this.skusize = keys[0]

				}
				return


			},
			all(index) {
				this.showPop = false
				this.current = index
				this.getList()
			},
			test(e) {
				// console.log(e.target.current)
				this.current = e.target.current
				// console.log(e)
				this.getList()
			},

			async getCloundShop() {
				const {
					data
				} = await getCityCloundShop({
					street_code: this.street_code
				})
				this.cloudList = data
				cloudWarehouse({
					street_code: this.street_code,
					category_id: this.cloudList[this.current].category_id
				}).then(res => {
					this.trnList = []
					this.goodsList = res.data.list
					this.goodsList.forEach(item => {
						this.trnList.push({
							left: 0,
							bottom: 0
						})
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@keyframes addcart {
		from {
			// background-color: red;
			opacity: 1,
		}

		to {
			// background-color: yellow;
			opacity: 0,
		}
	}

	.selected-list {
		padding: 24rpx 14rpx;
		border-radius: 10.51rpx 10.51rpx 10.51rpx 10.51rpx;
		background-color: #fff;
		position: absolute;
		left: 100rpx;
		font-size: 29.79rpx;
		z-index: 9999;
		// top: 100rpx;
		opacity: 0;
		transition: 0.5s;



		.triangle-up {
			width: 0;
			height: 0;
			border-left: 10rpx solid transparent;
			border-right: 10rpx solid transparent;
			border-bottom: 10rpx solid white;
			position: absolute;
			top: -10rpx;
		}

		.selected-li {
			margin-top: 35rpx;
			color: #F84221;
			display: flex;
			align-items: center;
		}
	}


	.sku {
		padding: 20rpx;

		.sku_head {
			display: flex;

			.sku_head_r {
				margin-left: 20rpx;
				display: flex;
				justify-content: space-between;
				flex-direction: column;

				.sku_goods_tit {
					font-size: 30rpx;
					width: 60vw;
					/* 容器的宽度 */
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.sku_goods_price {
					color: red;
					font-size: 30rpx;
					font-weight: bold;
				}
			}

			// justify-content;
		}

		.sku_size {
			margin: 40rpx 0;

			.size_li {
				display: inline-block;
				// width: 100rpx;
				padding: 5rpx 20rpx;
				margin-right: 20rpx;
				text-align: center;
				color: black;
				border: 1px solid #EBECEE;

				// height: 2;
			}

			.act_size_li {
				background-color: #FF5C2D;
				color: white;
				border: #FF5C2D 1px solid;

			}
		}

		.sku_num {
			display: flex;
			justify-content: space-between;
		}

		.skuaddcart {
			width: 50vw;
			background-color: #FEAB00;
			margin: 20rpx auto;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			color: white;
			border-radius: 80rpx;
			// margin-top: 20rpx;
		}
	}

	.flags {
		background-color: red;
		z-index: 99999999;
	}

	.swiper_item {
		display: flex;
		justify-content: space-around;
		transition: .5s;
		padding: 40rpx;
		// transform: scale(1.2);
	}

	.swiper_item_act {
		transform: scale(1.2);
	}

	// .swiper_item:hover {}


	// .swiper_item {
	// 	transform: scale(1.2);
	// }

	.swiper_b {
		transition: 1s;
	}

	// .swiper_b:active {
	// 	transform: scale(1.5);
	// }

	.act_cart {
		transition: 0.5s;
		transform: scale(1.1);
	}

	.box {
		position: relative;

		.content {
			width: 100vw;
			// transform: translateY(-100px);
			border-radius: 50rpx 50rpx 0 0;
			// position: absolute;
			// top: 965rpx;
			// border-top: 5px solid red;
			z-index: 9999;
			background-color: white;
			// padding: 0 10rpx;

		}



		.active_swiper {
			transform: scale(1.3);
			// transform: translateX() translateY();

		}

		.pictrue {
			position: relative;
			width: 100%;
			height: 345rpx;

		}

		.act {
			color: #FF6D20;
		}

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

			// transition: opt\ linear;
			padding-top: 200rpx;
		}

		.act_class {
			transition: 0.5s;
		}

		.act_class:active {
			transform: scale(2);
		}



		.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;
		// background-color: red;
		width: 40vw;
		white-space: nowrap;
		overflow: hidden;

		text-overflow: ellipsis;

		// font-weight: 700;
		// transform: skewX(-10deg);
	}


	.act {
		color: red;
	}

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



	}

	.heads {
		position: fixed;
		z-index: 100;
		color: white;
		width: 100%;
		padding: 0 20rpx;
		transition: 1s;
		opacity: 0;
	}

	.show {
		opacity: 1;
	}

	.menu {
		position: absolute;
		top: 748rpx;
		width: 750rpx;
		// background-color: rgba(255, 255, 255, 0.7);
		height: 250rpx;
		// height: 175.23rpx;
		// box-shadow: 0 0 100px 100px rgba(255, 255, 255, 0.5);
		// box-shadow: 0 0 100rpx 30rpx rgba(255, 255, 255, 0.9);

	}

	.town_name {
		margin-right: 50rpx;
		// background-color: red;
		max-width: 15vw;
		white-space: nowrap;

		overflow: hidden;

		text-overflow: ellipsis;
	}

	.goods_list {
		min-height: 95vh;
		padding: 0 10rpx;
		// background-color: red;

		.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;
					width: 60vw;

					.good_price_r {
						z-index: 9;
					}

					.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;
	}

	.act_swiper {
		height: 200rpx;
		position: fixed;
		z-index: 99;
		overflow: hidden;
	}

	.act_img {
		// transition:t;
		transform: translateY(-840rpx);
		/* #ifdef APP-PLUS */
		transform: translateY(-800rpx);
		/* #endif */

	}

	// .act_swiper2 {
	// 	height: 998rpx;
	// }

	.content_sift {
		width: 750rpx;
		padding: 22rpx 0;
		// padding-top: 80rpx;
		background-color: white;
		display: flex;
		justify-content: space-around;
		// background-color: white;
		// background-color: green;
		z-index: 99;
		box-sizing: border-box;
		margin-bottom: 20rpx;


	}

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

	.card {
		width: 720rpx;
		z-index: 99;
		// 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;
		}
	}

	.badge {
		position: absolute;
		top: 0;
		right: 0;
		background-color: #F84221;
		transform: translate(50%, -50%);
		// padding: 10rpx 10rpx;
		border-radius: 35rpx;
		text-align: center;
		width: 35rpx;
		line-height: 35rpx;
		height: 35rpx;
	}

	// .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;
	// 		}
	// 	}
	// }

	.empty {
		// display: flex;
		// justify-content: space-between;
		// flex-direction: column;
		// align-items: center;
		// padding: 20vh 0;
		position: relative;
		height: 100vh;

		.info {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		// padding-top: 100px;
	}

	.head_r {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.cart {
		z-index: 999;
	}

	.x_tra {
		// position: relative;
		z-index: 999999;
		animation-name: addcatr;
		animation-duration: 1s;
		animation-timing-function: ease-in-out;
		animation-iteration-count: 1;
		animation-fill-mode: forwards; // animation-iteration-count: 1;
		/* 设置为1 */
		// transition: 1s cubic-bezier(0.5, -0.5, 1, 1);
	}

	.price_sift {
		display: flex;
		align-items: center;
	}

	.sl {
		margin-left: 20rpx;
		transform: rotate(180deg);
		transition: 0.5s;
	}

	.actsl {
		transform: rotate(0deg);
	}

	.actSel {
		opacity: 1;
		// transform: translateX(100rpx);

	}

	.yuncangempty {
		margin: 20vh 0;
		display: flex;
		flex-direction: column;
		align-items: center
	}
</style>