<template>

	<view
		style="display: flex;flex-direction: column;height: 100vh;background: -webkit-linear-gradient(left,#FEA65F,#FB9440);">

		<view class="top">
			<NavBar ref="nav" navTitle=" " :showIcon="false" :start-change-height="page.startHeight"
				:end-change-height="page.endHeight">
			</NavBar>

		</view>


		<loading-state ref="pageView" @request="request">
			<view style="background: #fff; height: calc(100vh - 45px - 65vw);width: 100%; 
				border-radius: 15px;display: flex;flex-direction: column; box-sizing: border-box;margin-top: -15px;">

				<swiper v-if="notices.length>0" class='swiper-box' :autoplay='true' interval='5000' :vertical='true'
					:circular='true'>
					<swiper-item v-for="(item,index) in notices" @click="noticeClick(item)">
						<!-- {{index + 1}}、啊实打实阿斯加德阿斯asdas什么大塑料袋阿萨德的 -->
						<view style="display: flex;flex-direction: row;align-items: center;box-sizing: border-box;">
							<image src="../../static/notice.png" style="width: 18px;height: 18px;"></image>
							<text
								style="font-size: 13px; text-overflow: ellipsis;white-space: nowrap;overflow: hidden;color: #E26040; flex: 1;margin-left: 10px;margin-right: 10px;">{{index + 1}}、{{item.title}}</text>
							<image src="../../static/more.png" style="width: 15px;height:15px;"></image>
						</view>
					</swiper-item>
				</swiper>

				<view class="center">

					<view style="width: 22%;display: flex;flex-direction: column;overflow-y: auto;padding-top: 10px;">
						<!-- <text style="width: 100%;text-align: center;margin-bottom: 5px;margin-top: 5px;
						color: #333;font-weight: 600;font-size: 13px;">全部分类</text> -->
						<view style="width: 100%;display: flex;flex-direction: column; ">
							<view v-for="(item,index) in data" @click="labelClick(index,item)"
								style="display: flex;flex-direction: column;justify-content: center;position: relative;">
								<text class="label" :class="{'label2':selectIndex==index}">{{item.name}}</text>
								<view v-if="item.count>0" style="border-radius: 50%;text-align: center;background: #f00;color: #fff;font-size: 8px;
								position: absolute;
								  top: 10px;
								  right: 8px;
								  padding: 2px 5px;
								  width: auto;">{{item.count}}</view>
							</view>

						</view>

					</view>

					<view style="width: 78%;background-color: #fff;overflow-y: auto;">

						<view style="width: 100%; display: flex;flex-direction: column;overflow-y: auto;">

							<view v-for="(item,index) in goods"
								style="display: flex;flex-direction: column;justify-content: center;width: 95%; margin-top: 15px; margin-left: 3%;">

								<view style="display: flex;flex-direction: row;align-items: center;
								justify-content: space-between;position: relative; 	z-index: 100;  ">

									<view style="box-sizing: border-box;">

										<text v-if="item.state == '1'" style="opacity: 0.7; font-size: 14px;font-weight: 600;font-family: sans-serif;z-index: 101;
											margin-top: 30px; margin-left: 5px;	width: 80px; height: 30px;line-height: 30px; text-align: center; background: #6d6d6d;
												position: absolute;border-radius: 20px;color: #fff;">已失效</text>
										<image :src="item.iconUrl"
											style="width: 90px;height: 90px; border-radius: 10px;z-index: 100;"
											mode="aspectFill" @click="itemClick(item.goodsSid)"></image>

									</view>


									<view
										style="display: flex;flex-direction: column;flex: 1;  padding-bottom: 15px; margin-left: 10px;"
										:style="{'border-bottom':(index == goods.length-1 ? 'none' : '1px #EFEFEF solid')}">

										<text style="font-size: 14px;color: #000;font-weight: 600;">{{item.name}}</text>

										<text
											style="font-size: 10px;color: #999;margin-top: 5px;">{{item.remark}}</text>

										<view
											style="display: flex;flex-direction: row;align-items: center;margin-top: 8px;">
											<!-- :class="item.state=='0'?'oragin':'gray'" -->
											<text :class="item.state=='0'?'oragin':'gray'" style="border: 1px #EE752F solid; border-radius: 5px;	padding: 0px 8px;
											font-size: 10px;color: #EE752F;">{{item.weight}}{{item.specificationUnit}}/{{item.unitName}}</text>

											<text
												style="border: 1px #EE752F solid; background: #FF9900;margin-left: 10px; color: #fff; font-size: 10px;border-radius: 5px;	padding: 0px 8px;"
												v-if="item.type=='0'">百姓菜!</text>
											<text
												style="border: 1px #3AA15F solid; background: #40C772;margin-left: 10px; color: #fff; font-size: 10px;border-radius: 5px;	padding: 0px 8px;"
												v-if="item.type=='1'">精品菜!</text>
											<text
												style="border: 1px #1D60C7 solid; background: #2489F7;margin-left: 10px; color: #fff; font-size: 10px;border-radius: 5px;	padding: 0px 8px;"
												v-if="item.type=='2'">企业菜!</text>
										</view>

										<!-- v-if="item.state == '0' " -->
										<text v-if="item.state == '0' "
											style="font-size: 10px;color: #E36443;margin-top: 8px;">提货截止日：{{item.periodValidity}}</text>

										<text v-if="item.state == '1' "
											style="font-size: 10px;color: #999;margin-top: 8px;">抱歉，商品已超过提货截止日</text>


										<view style="display: flex;flex-direction: row;align-items: center;justify-content: space-between; margin-top: 10px;
										margin-right: 15px;">
											<view style="display: flex;flex-direction: row;align-items: center;">
												<text style="font-size: 12px;color: #666;">存量：</text>
												<!-- :style="{color:(item.state == '1' ? '#999' : '#FF5006')}" -->
												<text :style="{color:(item.state == '1' ? '#999' : '#FF5006')}"
													style="font-size: 14px;color: #FF5006;">{{item.goodsNumber}}{{item.unitName}}</text>
											</view>

											<!-- :class="item.state=='0'?'oragin':'gray'" -->
											<view style="display: flex;flex-direction: row;align-items: center;"
												:class="item.state=='0'?'oragin':'gray'">

												<image src="../../static/jian_icon.png" mode="aspectFill"
													style="width: 20px;height: 20px;" @click.stop="jian(item)"></image>

												<text
													style="font-size: 14px;margin-left: 8px;margin-right: 8px;">{{item.count}}</text>
												<image src="../../static/jia_icon.png" mode="aspectFill"
													style="width: 20px;height: 20px;" @click.stop="jia(item)"></image>

											</view>
										</view>

									</view>

								</view>

							</view>

							<view v-if="notData"
								style="display: flex;flex-direction: column;justify-content: center;align-items: center;margin-top: 10vw;">

								<image src="https://supervise.yxtsoft.com/lpk/image/buchongcaijiao.png" mode="aspectFit"
									style="width: 50vw;height: 50vw;"></image>
								<view style="display: flex;flex-direction: row;align-items: center;margin-top: 15px;">
									<text style="font-size: 14px; color: #666;margin-right: 5px;">您的菜窖为空,请</text>
									<text
										style="background: #FF9900; border-radius: 8px; padding: 3px 8px; color: #fff;"
										@click="gotoShopp()">补充菜窖</text>
								</view>
							</view>

						</view>

					</view>

				</view>

				<view class="bottom">


					<view
						style="display: flex;flex-direction: row; justify-content: center;align-items: center;padding-bottom: 10px;margin-top: 5px;padding: 0px 20px;">

						<text
							style="background: #FF9900;color: #fff;height: 40px;line-height: 40px;font-size: 13px;padding: 0px 15px;border: 1px #FF5006 solid;
						border-top-left-radius: 25px;border-bottom-left-radius: 25px;border-top-right-radius: 0px;border-bottom-right-radius: 0px;"
							@click="transfer()">转赠亲友</text>

						<view style="border: 1px #FF5006 solid;margin-left: 5px;margin-right: 5px;padding: 0px 10px;height: 42px;flex: 1;
							display: flex;flex-direction: row;align-items: center;box-sizing: border-box;justify-content: center;"
							@click="gotoCart()">
							<!-- image src="../../static/shoppCart_icon.png" mode="aspectFill"
									style="height: 20px;width: 25px;"></image> -->
							<text style="font-size: 12px;color: #666;margin-left: 10px; ">已选中</text>
							<text style="font-size: 15px;color: #FF5006;margin-left: 10px; ">{{page.count}}</text>
							<text style="font-size: 12px;color: #666;margin-left: 10px; ">份</text>
						</view>
						<text style="background: #FF9900; color: #fff;font-size: 13px; padding: 0px 15px;height: 40px;line-height: 40px;
							border: 1px #FF5006 solid; border-top-right-radius: 25px; border-bottom-right-radius: 25px;flex-shrink: 0;"
							@click="reservation()">预约提菜</text>


					</view>

				</view>

			</view>

		</loading-state>


		<!-- 转赠弹框 -->
		<view class="model" catchtouchmove='preventTouchMove' v-if='showModal3' @click="colseDialog3()"></view>
		<view class="modalDlg3" catchtouchmove='preventTouchMove' v-if='showModal3'>
			<view style="display: flex;flex-direction: column;background: #fff;
			 padding: 10px 20px;">

				<text
					style="font-size: 16px;color: #000;font-weight: 600;font-family: sans-serif;margin-top: 10px;margin-bottom:10px ;">转赠蔬菜列表</text>

				<scroll-view scroll-y="true" style="height: 80vw; width: 100%;  box-sizing: border-box;
			" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll">
					<view style="display: flex;flex-direction: column;">

						<view v-for="(item,index) in pickingUpGoods"
							style=" display: flex;flex-direction: row;margin-top: 15px; margin-bottom: 10px;">

							<view style="display: flex;flex-direction: row;align-items: center;width: 100%;  ">

								<image :src="item.iconUrl" style="width: 90px;height: 90px; border-radius: 10px; "
									mode="aspectFill" @click="itemClick(item.goodsSid)"></image>

								<view
									style="display: flex;flex-direction: column;flex: 1;  padding-bottom: 15px; margin-left: 10px;"
									:style="{'border-bottom':(index == goods.length-1 ? 'none' : '1px #EFEFEF solid')}">

									<text style="font-size: 14px;color: #000; font-weight: 600;">{{item.name}}</text>

									<text style="font-size: 10px;color: #999;margin-top: 5px;">{{item.remark}}</text>

									<view
										style="display: flex;flex-direction: row;align-items: center;margin-top: 8px;">
										<text style="border: 1px #EE752F solid; border-radius: 5px;	padding: 0px 8px;
							font-size: 10px;color: #EE752F;">{{item.weight}}{{item.specificationUnit}}/{{item.unitName}}</text>

										<text
											style="border: 1px #EE752F solid; background: #FF9900;margin-left: 10px; color: #fff; font-size: 10px;border-radius: 5px;	padding: 0px 8px;"
											v-if="item.type=='0'">百姓菜!</text>
										<text
											style="border: 1px #3AA15F solid; background: #40C772;margin-left: 10px; color: #fff; font-size: 10px;border-radius: 5px;	padding: 0px 8px;"
											v-if="item.type=='1'">精品菜!</text>
										<text
											style="border: 1px #1D60C7 solid; background: #2489F7;margin-left: 10px; color: #fff; font-size: 10px;border-radius: 5px;	padding: 0px 8px;"
											v-if="item.type=='2'">企业菜!</text>
									</view>

									<view style="display: flex;flex-direction: row;align-items: center;justify-content: space-between; margin-top: 15px;
						margin-right: 15px;">
										<view style="display: flex;flex-direction: row;align-items: center;">
											<text style="font-size: 10px;color: #FF5006;">剩余：</text>
											<text
												style="font-size: 14px;color: #FF5006;">{{item.goodsNumber}}{{item.unitName}}</text>
										</view>

										<view style="display: flex;flex-direction: row;align-items: center;">

											<image src="../../static/jian_icon.png" mode="aspectFill"
												style="width: 20px;height: 20px;" @click.stop="jian(item)"></image>

											<text
												style="font-size: 14px;margin-left: 8px;margin-right: 8px;">{{item.count}}</text>
											<image src="../../static/jia_icon.png" mode="aspectFill"
												style="width: 20px;height: 20px;" @click.stop="jia(item)"></image>

										</view>
									</view>

								</view>

							</view>

						</view>

						<view v-if="transferNotData"
							style="display: flex;flex-direction: column;justify-content: center;align-items: center;margin-top: 5vw;">

							<image src="https://supervise.yxtsoft.com/lpk/image/supplementing.png" mode="aspectFit"
								style="width: 50vw;height: 50vw;"></image>
							<view style="display: flex;flex-direction: row;align-items: center;margin-top: -15px;">
								<text
									style="background: #FF9900; border-radius: 8px; padding: 3px 8px; color: #fff;">请添加~</text>
							</view>
						</view>


					</view>


				</scroll-view>


				<view style="display: flex;flex-direction: row;align-items: center;margin-top: 15px;">
					<text style="font-size: 14px;margin-right: 10px;font-weight: 600;">转赠留言</text>
					<input placeholder="可以写下您对亲友的祝福"
						style="font-size: 30rpx;flex: 1;background: #F2F2F2;border-radius: 5px;height: 40px;line-height: 40px;padding-left: 10px;padding-right: 10px;"
						:value="transferInfo.remarks" @input="onKeyInput" />
				</view>

				<!-- <view style="display: flex;flex-direction: row;align-items: center;margin-top: 15px;">
					<checkbox @change="checboxChange()" color="#FF9900" style="transform:scale(0.7)"></checkbox>
					<view style="display: flex;flex-direction: row;align-items: center;">
						<text style="color: #A4A4A4; font-size: 12px;">我已阅读并同意</text>
						<text style="color: #5B7096; font-size: 12px;">《蔬菜转赠协议》</text>
					</view>
				</view> -->

				<button open-type="share" :disabled="butdisabled">确认</button>

			</view>

		</view>

		<!-- 通知弹框 -->
		<view class="model" catchtouchmove='preventTouchMove' v-if='showModal4' @click="colseDialog4()"></view>
		<view class="modalDlg4" catchtouchmove='preventTouchMove' v-if='showModal4'>

			<view style="display: flex;flex-direction: column;background: #fff; width: 80%; border-radius: 20px;
				padding: 20px;">

				<text
					style="color: #333; font-size: 20px;font-weight: 800;font-family: sans-serif;width: 100%;text-align: center;">通知公告</text>

				<view style="margin-top: 20px;" v-show="!noticeInfo.content==''">
					<rich-text :nodes="noticeInfo.content | formatRichText" class="ql-editor"></rich-text>
				</view>


				<text
					style="color: #666; font-size: 13px; width: 95%;text-align:right;margin-top: 20px;">{{noticeInfo.releaseTime}}</text>

				<view
					style="flex-shrink: 0;display: flex;flex-direction: row;align-items: center;justify-content: center;margin-top: 20px;">
					<text style="background: #FF9900;color: #fff;text-align: center;border-radius: 20px;
					padding:8px 25px ;" @click="colseDialog4()">我知道了</text>
				</view>


			</view>


		</view>


		<!-- 获取手机号弹框 -->
		<view class="model" catchtouchmove='preventTouchMove' v-if='showModal1' @click="colseDialog1()"></view>
		<view class="modalDlg4" catchtouchmove='preventTouchMove' v-if='showModal1'>

			<view style="display: flex;flex-direction: column;background: #fff; width: 80%; border-radius: 20px;
				">
				<view
					style="display: flex;flex-direction: column;align-items: center;justify-content: center;width: 100%;margin-top: 20px;">
					<image src="../../static/logo_icon.png" style="width: 10vw;height: 10vw;" mode="scaleToFill">
					</image>
					<text
						style="margin-top: 5px;color: #333;font-size: 18px;font-weight: 600;font-family: sans-serif;">云菜窖</text>
				</view>


				<view style="display: flex;margin-top: 10px;margin-left: 20px; margin-right: 20px;">
					<text style="color: #999;text-indent:2em;">为确保您能正常体验小程序功能，云菜窖需要获取您的手机号。</text>
				</view>


				<view
					style="flex-shrink: 0;display: flex;flex-direction: row;align-items: center;justify-content: center;margin-top: 20px;">
					<button class="button1" @click="colseDialog1()">拒绝</button>
					<button class="button2" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">同意</button>
				</view>


			</view>


		</view>


		<!-- 恢复预约提货弹框 -->
		<view class="model" catchtouchmove='preventTouchMove' v-if='showModal2' ></view>
		<view class="modalDlg2" catchtouchmove='preventTouchMove' v-if='showModal2'>

			<view style="display: flex;flex-direction: column;justify-content: center;align-items: center;
			 width: 80%; border-radius: 20px; background: linear-gradient(#FFF4E4, #fff);">
				
				<image src="../../static/notices.png" style="width: 60px;height: 60px; margin-top: -30px;" mode="scaleToFill"></image>
				
				<text style="margin-top: 16px;font-size: 18px;color: #101010;font-weight: 600;font-family: sans-serif;">温馨提示</text>
				<text style="margin-top: 12px;font-size: 14px;color: #333;padding-left: 30px;padding-right: 30px;">您好，云菜窖预约提货服务现已恢复正常，您可在“我的菜窖”页面进行预约提菜。</text>
				
				<text style="margin-top: 25px;margin-bottom: 20px;border: 1px #FF9900 solid; color: #FF9900;font-size: 14px;
				border-radius: 20px;height: 40px; line-height: 40px;padding-left: 30px;padding-right: 30px;" @click="colseDialog2()">{{confirmText}}</text>
				
			</view>


		</view>




	</view>

</template>

<script>
	export default {
		data() {
			return {
				notices: [],
				noticeInfo: {},
				butdisabled: true,
				transferNotData: true,
				notData: false,
				showModal1: false,
				showModal2: true,
				confirmText: "我知道了（5s）",
				countdown: 5,
				showModal3: false,
				showModal4: false,
				scrollHeight: "",
				scrollLeftTop: "0",
				scrollRightTop: "0",
				brandType: "0",
				styleObject: {
					// 'position': 'fixed',
					// 'top':'80vw',
					'margin-top': '62vw',
					'border-top-left-radius': '25px',
					'border-top-right-radius': '25px',
					'border-bottom-left-radius': '25px',
					'border-bottom-right-radius': '25px',
					'background': '#fff',
					'padding-top': '10px',
					'margin-bottom': "60px"

				},
				page: {
					count: "0",
					startHeight: 0,
					endHeight: 0
				},
				data: [],
				goods: [],
				selectIndex: 0,
				pickingUp: {
					type: "去完善",
					name: "",
					date: "",
					address: ""
				},
				userInfo: {
					type: "去完善",
					name: "",
					phone: ""
				},
				pickingUpGoods: [

				],
				baseDataSuccess: false,
				newPerGiftList: [

				],
				transferInfo: {},
				newporGiftSid: "",
				orderSid: "",
				shareSid: ""

			}
		},
		created() {

			// console.log("==========", getApp().globalData.isNewUser);

		},
		onShow() {
			if (typeof this.$mp.page.getTabBar === 'function' && this.$mp.page.getTabBar()) {
				this.$mp.page.getTabBar().setData({
					selected: 1
				})

			}

			console.log("mobile>>>", getApp().globalData.mobile);

			if (getApp().globalData.mobile == '')
				this.showModal1 = true

			this.request()
			this.getNotice()
			this.page.count = 0
		},
		onLoad(options) {

			this.shareSid = options.shareSid
			this.orderSid = options.orderSid
			console.log("shareSid>>>>", this.shareSid);
			console.log("orderSid>>>>", this.orderSid);

			let info = uni.getSystemInfoSync();

			this.page.startHeight = info.windowWidth * 0.6
			this.page.endHeight = info.windowWidth * 0.8

			this.shareGift()
			this.showPop()
			
		},
		filters: {
			/**
			 * 处理富文本里的图片宽度自适应
			 * 1.去掉img标签里的style、width、height属性
			 * 2.img标签添加style属性：max-width:100%;height:auto
			 * 3.修改所有style里的width属性为max-width:100%
			 * 4.去掉<br/>标签
			 * @param html
			 * @returns {void|string|*}
			 */
			formatRichText(html) {
				//控制小程序中图片大小
				if (html) {
					let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
						match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
						match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
						match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
						return match;
					});
					newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
						match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi,
							'max-width:100%;');
						return match;
					});
					newContent = newContent.replace(/<br[^>]*\/>/gi, '');
					newContent = newContent.replace(/\<img/gi,
						'<img style="max-width:100%;height:auto;display:block;margin:10rpx auto;"');
					return newContent;
				} else {
					return '暂无商品详情';
				}
			},
		},
		methods: {
			
			showPop() {
			
				let timeOut = setInterval(() => {
			
					if (this.countdown == 1) {
						this.showModal2 = false
						this.confirmText = "确定"
						this.countdown = 5
						clearInterval(timeOut)
			
					} else {
						this.countdown = this.countdown - 1;
						this.confirmText = "我知道了" + "（" + this.countdown + "s）"
					}
				}, 1000)
			},
			
			
			getNotice() {
				let _this = this
				this.$api.getNotices().then((resp) => {
					console.log("getNotice>>>>", resp);
					_this.notices = resp

				}).catch(e => {})
			},
			noticeClick(item) {
				console.log("noticeClick>>>>", item);

				this.noticeInfo = item
				this.showModal4 = true

			},
			onKeyInput(event) {
				this.transferInfo.remarks = event.target.value
			},
			shareGift() {
				console.log("shareGift>>>>", this.shareSid);
				console.log("shareGift>>>>", this.orderSid);

				// 邀请新人 助力礼包  isNewUser==1 可以助力
				if (this.stringIsNotEmpty(this.orderSid) && getApp().globalData.isNewUser == '1') {

					var params = {
						customerSid: getApp().globalData.sid,
						orderSid: this.orderSid
					}

					this.$api.recommendedAssistance(params).then((resp) => {

					}).catch(e => {})
				}

			},

			labelClick(index, item) {
				this.selectIndex = index
				this.brandType = item.id
				this.pickingUpGoods = []
				this.page.count = 0
				this.getgoods()

			},
			request() {
				let _this = this
				var params = {
					customerSid: getApp().globalData.sid
				}

				_this.$api.vegeCellarTypeList(params).then((resp) => {
					_this.data = resp
					_this.pickingUpGoods = []
					_this.baseDataSuccess = true
					// _this.selectIndex = 0
					_this.getgoods()
				}).catch(e => {
					_this.$nextTick(() => {
						_this.$refs.pageView.setLoadState(1)
					})
				})
			},
			getgoods() {
				let _this = this

				var params = {
					customerSid: getApp().globalData.sid,
					affiliation: this.data[this.selectIndex].id
				}


				_this.$api.vegeCellarList(params).then((resp) => {
					_this.goods = resp

					_this.notData = resp.length == 0
					_this.$nextTick(() => {
						_this.$refs.pageView.setLoadState(2)
					})
				}).catch(e => {
					_this.$nextTick(() => {
						_this.$refs.pageView.setLoadState(1)
					})
				})
			},
			jian(item) {

				if (item.state == '0') {
					if (Number(item.count) > 0) {
						item.count = Number(item.count) - 1
						this.addGoods(item)
					}
					this.getcount()
				} else {
					this.shortToast('商品已过提货日期')
				}


			},
			jia(item) {
				if (item.state == '0') {
					if (item.count < item.goodsNumber)
						item.count = Number(item.count) + 1

					this.getcount()
					this.addGoods(item)
				} else {
					this.shortToast('商品已过提货日期')
				}
			},

			getcount() {

				let num = 0;
				for (var i = 0; i < this.goods.length; i++) {
					num += Number(this.goods[i].count);
				}

				this.page.count = num

				this.butdisabled = this.page.count == 0

			},

			addGoods(goods) {

				var item = this.pickingUpGoods.find(item => item.goodsSid == goods.goodsSid)

				if (item) {

					if (goods.count == 0) {
						var index = this.pickingUpGoods.findIndex(item => item.goodsSid == goods.goodsSid)
						this.pickingUpGoods.splice(index, 1)
					} else {
						item.count = goods.count
					}

				} else {
					this.pickingUpGoods.push(goods)

				}

				this.transferNotData = this.pickingUpGoods.length == 0


			},

			itemClick(goodsSid) {
				uni.navigateTo({
					url: '/pages/good/goodsDetail?sid=' + goodsSid
				})
			},

			gotoShopp() {
				uni.switchTab({
					url: '/pages/home/cloudCard2',
				})

				// uni.navigateTo({
				// 	url: '/pages/bind/bind_cloudCard'
				// })

			},

			transfer() {
				if (this.pickingUpGoods.length > 0) {

					// this.showModal3 = true
					uni.navigateTo({
						url: '/pages/good/transfer?pickingUpGoods=' + encodeURIComponent(JSON.stringify(this
							.pickingUpGoods)) + "&affiliation=" + this.data[this.selectIndex].id,
					})
				} else {
					this.shortToast('请先选择商品')
				}

			},
			reservation() {
				console.log(">>>>>>>>>>", this.pickingUpGoods);
				if (this.pickingUpGoods.length > 0) {

					uni.navigateTo({
						url: '/pages/good/reservation?pickingUpGoods=' + encodeURIComponent(JSON.stringify(this
								.pickingUpGoods)) +
							"&affiliation=" + this.data[this.selectIndex].id,
					})

					// this.showModal = true
				} else {
					this.shortToast('请先选择商品')
				}

			},
			colseDialog1() {
				this.showModal1 = false
			},
			colseDialog2() {
				this.showModal2 = false
				clearInterval()
			},
			colseDialog3() {
				this.showModal3 = false
			},
			colseDialog4() {
				this.showModal4 = false
			},
			onShareAppMessage: function(res) {

				_this.showModal3 = false

				let _this = this
				const promise = new Promise(resolve => {
					// 模拟网络请求
					setTimeout(() => {

						var list = []
						for (var i = 0; i < this.pickingUpGoods.length; i++) {
							var item = this.pickingUpGoods[i]

							if (item.count > 0) {
								list.push({
									goodsSid: item.goodsSid,
									select: item.count
								})
							}

						}

						var params = {
							customerSid: getApp().globalData.sid,
							brandId: _this.brandType,
							remarks: _this.transferInfo.remarks,
							vos: list
						}

						// console.log("=========0", params);

						_this.$api.transSubmission(params).then((resp) => {

							// console.log("=========", resp);

							let shareData = JSON.stringify({
								params: {
									code: resp.transferCode,
									codeKey: resp.sid
								},
								functionName: 'bindCard',
								url: '/pages/bind/bind_cloudCard?code=' + resp
									.transferCode + "&codeKey=" + resp.sid

								// url: '/pages/home/cloudCard2?shareSid=' + getApp().globalData.sid,
								// functionName: 'share'
							})
							// 转码传输
							let value = encodeURIComponent(shareData)

							resolve({
								title: '汇融惠享-云菜窖',
								// ②
								path: '/pages/login/login?data=' + value,
								imageUrl: 'https://supervise.yxtsoft.com/lpk/image/share_transfer.png', //自定义图片路径，显示图片长宽比是 5:4。

							})

						}).catch(e => {
							_this.shortToast('发生错误,请稍后再试.')
							return
						})

					}, 0)
				})

				return promise

			},
			getPhoneNumber(e) {
				let _this = this
				console.log(e.detail.code)
				_this.$api.getPhone({
					userSid: getApp().globalData.sid,
					code: e.detail.code
				}).then((resp) => {
					_this.showModal1 = false
					getApp().globalData.mobile = resp
				}).catch(e => {
					console.log(e);
				})
			},


		}
	}
</script>

<style>
	.gray {
		filter: grayscale(100%);
		-webkit-filter: grayscale(100%);
		transition: filter 0.2s;
	}



	.oragin {}


	.swiper-box {
		margin-top: -55px;
		height: 50rpx;
		line-height: 50rpx;
		padding: 0 20rpx;
		background-color: #FDE0C6;
		overflow: hidden;
		opacity: 0.8;
		border-radius: 5px;
		margin-left: 10px;
		margin-right: 10px;
		margin-bottom: 5px;
	}

	.swiper-box .item {
		white-space: nowrap;
		text-overflow: ellipsis;
		color: #E26040;
		font-size: 10px;

	}

	.button1 {

		background: #fff;
		color: #666;
		flex: 1;
		border-radius: 0px;
		border-bottom-left-radius: 20px;
		border: 1px solid #eee;
	}

	.button2 {
		background: #fff;
		color: #FF9900;
		border-radius: 0px;
		border-bottom-right-radius: 20px;
		flex: 1;
		border: 1px solid #eee;
	}

	button {
		background: #FF9900;
		color: #fff;
		height: 42px;
		line-height: 40px;
		font-size: 13px;
		padding: 0px 15px;
		border: 1px #FF5006 solid;
		border-top-left-radius: 25px;
		border-bottom-left-radius: 25px;
		border-top-right-radius: 0px;
		border-bottom-right-radius: 0px;
	}


	button::after {
		border: 0;
	}


	.top {
		width: 100vw;
		/* height: 126.66vw; */
		height: 65vw;
		/* 加载背景图 */
		background-image: url(https://supervise.yxtsoft.com/lpk/image/clound_bj1.png);
		/* background-image: url(../../static/clound_bj1.png); */
		/* 让背景图基于容器大小伸缩 */
		background-size: 100% 100%;
	}

	.center {
		display: flex;
		flex-direction: row;
		flex: 1;
		background-color: #f7f7f7;
		border-radius: 15px;
		overflow: hidden;
		min-width: 0;
	}

	.bottom {
		display: flex;
		flex-direction: column;
		border-top: 1px solid #F8F8F8;
		padding-top: 5px;
		flex-shrink: 0;
		margin-bottom: 10px;
	}

	.label {
		color: #191919;
		font-size: 12px;
		margin-top: 10px;
		margin-bottom: 10px;
		text-align: center;
		padding-top: 7px;
		padding-bottom: 7px;
		margin-left: 5px;
	}

	.label2 {
		background: #FFF;
		color: #FFF;
		background-color: #FF9900;
		font-size: 12px;
		margin-top: 10px;
		margin-bottom: 10px;
		padding-top: 7px;
		padding-bottom: 7px;
		text-align: center;
		font-weight: bold;
		border-radius: 20px;
		margin-left: 5px;
	}

	.top_img1 {
		border: 1px #FF9900 solid;
	}

	.top_img2 {
		border: none
	}

	.top_text1 {
		border: 1px #FF9900 solid;
		background: #FF5006;
		color: #fff;
		font-weight: 800;
		font-family: sans-serif;
		padding: 5px 16px;
		border-radius: 5px;
		margin-top: -25px;
		font-size: 13px;
		word-break: keep-all;
		white-space: nowrap;
	}

	.top_text2 {
		border: 1px #FF9900 solid;
		background: #fff;
		color: #F6894B;
		font-weight: 800;
		padding: 5px 16px;
		font-family: sans-serif;
		border-radius: 5px;
		margin-top: -25px;
		font-size: 13px;
		word-break: keep-all;
		white-space: nowrap;
	}

	::-webkit-scrollbar {
		width: 0;
		height: 0;
		background-color: transparent;
	}

	/* 弹窗样式 */
	.model {
		position: absolute;
		width: 100%;
		height: 100%;
		background: #000;
		z-index: 100000;
		opacity: 0.7;
		top: 0;
		left: 0;

	}

	.modalDlg {
		/* 设置超出滚动 */
		overflow: auto;
		width: 100%;
		position: fixed;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 100000;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.modalDlg2 {
		/* 设置超出滚动 */
		overflow: auto;
		position: fixed;
		z-index: 100000;
		display: flex;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.device-list {
		box-sizing: border-box;
		padding: 26rpx 6%;
		display: flex;
		flex-direction: row;
		align-items: center;
		border-bottom: 1px solid #eee;
		width: 100%;
	}

	.modalDlg3 {
		/* 设置超出滚动 */
		overflow: auto;
		width: 100%;
		position: fixed;
		top: 40vw;
		left: 0;
		right: 0;
		bottom: 0;
		opacity: 1;
		z-index: 100001;
		background-color: #fff;
		border-top-right-radius: 20px;
		border-top-left-radius: 20px;
		display: flex;
		flex-direction: column;

	}

	.modalDlg4 {
		/* 设置超出滚动 */
		overflow: auto;
		position: fixed;
		z-index: 100000;
		display: flex;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
</style>