<template>
	<view class="container">
		<block v-if="!loading">
			<load-ing></load-ing>
		</block>
		<block v-else>
			<far-bottom></far-bottom>
			<view class="tablist-main dis-flex flex-y-center b-f">
				<view class="tab-item t-c flex-box p-r" :class="curActive===tabItem.type?'col-f4 f-30':'col-9 f-28'" v-for="(tabItem,index) in tablist"
				 :key="index" @click="selectTab(tabItem.type)">{{tabItem.title}}({{tabItem.num}})
					<view v-if="curActive===tabItem.type" class="active-tab"></view>
				</view>
			</view>
			<view class="packet-main">
				<view class="unpacket" v-if="curActive==='0' && selectStatus">
					<view class="red-square-main dis-flex flex-x-between flex-y-center b-f m-btm30" @click="navgateto">
						<view class="dis-flex flex-y-center">
							<image :src="imgfixUrls + 'redpacket/redsquare.png'" class="redsquareImage"></image>
							<view class="f-28 col-3">{{languageStatus!=1?'红包广场':'훙보센터'}}</view>
						</view>
						<view class="redsquare-right iconfont icon-right col-c"></view>
					</view>
					<view class="receive-redpacket col-9 f-24 t-c m-btm30" v-if="!!expireSoon && expireSoon>0">您有<text class="col-f4">{{expireSoon}}</text>个红包即将过期</view>
					<view class="unused-packet-main" v-if="!!redPacketList && redPacketList.length>0">
						<view class="unused-packet-list">
							<view  v-for="(redPacketItem,index) in redPacketList" :key="index">
								<view class="unused-list-item p-r m-btm20" :style="{'background-image':'url('+imageRoot+'redpacket_bg.png)'}" @click="goindex(redPacketItem.use_where,redPacketItem.link)"
								>
								 <view class="unused-list-rad" v-if="redPacketItem.status == 6">
								 	<view class="flex-box">
								 		<view class="t-r" style="line-height: 210upx;color: #ffffff;">
								 			转赠中(不可使用)
								 		</view>
								 	</view>
									<view class="flex-box " style="padding-top: 70upx;">
										<view class="closeBtn" @click="closeRed(redPacketItem)">
											取消转赠
										</view>
									</view>
								 </view>
									<view class="redPacket-type f-24 col-f">{{redPacketItem.title}}</view>
									<view class="UnredPacket-detail dis-flex flex-dir-column flex-x-center">
										<view class="UnredPacket-price dis-flex flex-y-center">
											<view class="UnredPacket-priceStyle col-f f-50"><text class="f-30">¥</text>{{redPacketItem.cut_money}}</view>
											<view class="f-26 col-f">满{{redPacketItem.full_money}}可用</view>
										</view>
										<view class="UnredPacket-date f-24 col-f">{{redPacketItem.time}}</view>
										<view v-if="redPacketItem.usegoods_type != 0" class="UnredPacket-date f-24 col-f" @click="selectBox1(redPacketItem.id)">{{redPacketItem.use_where}}
										<text
											  v-if="redPacketItem.id != selectId" class="iconfont icon-right col-f"></text><text
											 v-else-if="redPacketItem.id == selectId" class="iconfont icon-unfold col-f"></text>
											</view>
											<view v-else-if="redPacketItem.usegoods_type == 0" class="UnredPacket-date f-24 col-f">{{redPacketItem.use_where}}</view>
										<view class="makeBtn" @click="makered(redPacketItem)" v-if="redPacketItem.transferstatus == '1'">
											转赠
										</view>
									</view>
									<view class="selectBox" v-if="redPacketItem.id == selectId">
										<view class="select-con dis-flex" v-for="(item,index) in useWhereList" :key='index'>
											<view class="f-24">
												{{item.name}}
											</view>
											<view class="f-24 t-r gohomeBtn" @click="gohone(item.link)">
												前往
											</view>
										</view>
									</view>
								</view>
								<view class="linkUser" v-if="redPacketItem.transferflag == 1">
									<view class="dis-flex f-24">
										<view class="flex-box">
											赠送人
										</view>
										<view class="flex-box t-r">
											{{redPacketItem.oldnickname}}
										</view>
									</view>
									<view class="dis-flex f-24" style="padding: 10upx 0;">
										<view class="flex-box">
											手机号
										</view>
										<view class="flex-box t-r">
											{{redPacketItem.oldmobile}}
										</view>
									</view>
									<view class="dis-flex f-24">
										<view class="flex-box">
											领取时间
										</view>
										<view class="flex-box t-r">
											{{redPacketItem.gettime}}
										</view>
									</view>
								</view>
							</view>
							
						</view>
					</view>

				</view>
				<view class="usedpacket" v-if="(curActive==='1' || curActive==='2'  || curActive==='3') && selectStatus">
				<view class="search dis-flex" v-if="curActive == '3'">
					<view class="iconfont icon-search t-c"
					style="width: 80upx;height: 80upx;line-height: 80upx;">
						
					</view>
					<input class="searchInput" @confirm="confirm" v-model="mobile" type="text" maxlength="11" placeholder="请输入手机号" value=""  />
				</view>
					<block v-if="!!redPacketList && redPacketList.length>0">
						<view class="usedpacket-list">
							<view  v-for="(redPacketItem,index) in redPacketList" :key="index">
								<view class="usedpacket-list-item dis-flex m-btm20" >
									<view class="usedpacket-itemleft p-r dis-flex flex-dir-column flex-x-center">
										<view class="usedpacket-priceStyle col-f f-50 t-c"><text class="f-30">¥</text>{{redPacketItem.cut_money}}</view>
										<view class="f-24 col-f t-c">满{{redPacketItem.full_money}}可用</view>
										<view class="itemleft_bgstyle"></view>
										<view class="itemleft_bgstyle2"></view>
									</view>
									<view class="usedpacket-itemright p-r flex-box b-f padding-box-all">
										<view class="usedpacket_titleType dis-flex flex-y-center">
											<view class="usedpacketType t-c m-right10 dis-flex flex-y-center" v-if="!!redPacketItem.label"><text class="col-f f-24">{{redPacketItem.label}}</text></view>
											<view class="usedpacketTitle onelist-hidden f-28 col-3">{{redPacketItem.title}}</view>
										</view>
										<view class="col-9 f-24 m-top-btm10">范围：{{redPacketItem.use_where}}</view>
										<view class="col-9 f-24">{{redPacketItem.time}}</view>
										<image :src="curActive==='1'? imgfixUrls + 'redpacket/usedpacket.png': imgfixUrls + 'redpacket/havepacket.png'"
										 class="usedpacketImage" v-if="curActive != '3'"></image>
										 <image :src="imgfixUrls + 'redpacket/haveGive.png'"
										  class="usedpacketImage" v-if="curActive == '3'"></image>
									</view>
								</view>
								<view class="linkUser" style="background-color: #cccccc;color: #999999;" v-if="redPacketItem.transferflag == 1">
									<view class="dis-flex f-24">
										<view class="flex-box">
											赠送人
										</view>
										<view class="flex-box t-r">
											{{redPacketItem.oldnickname}}
										</view>
									</view>
									<view class="dis-flex f-24" style="padding: 10upx 0;">
										<view class="flex-box">
											手机号
										</view>
										<view class="flex-box t-r">
											{{redPacketItem.oldmobile}}
										</view>
									</view>
									<view class="dis-flex f-24">
										<view class="flex-box">
											领取时间
										</view>
										<view class="flex-box t-r">
											{{redPacketItem.gettime}}
										</view>
									</view>
								</view>
								<view class="linkUser" style="background-color: #cccccc;color: #999999;" v-if="curActive == '3'">
									<view class="dis-flex f-24">
										<view class="flex-box">
											{{redPacketItem.transfermode == 1?'赠送对象':'领取对象'}}
										</view>
										<view class="flex-box t-r">
											{{redPacketItem.getname}}
										</view>
									</view>
									<view class="dis-flex f-24" style="padding: 10upx 0;">
										<view class="flex-box">
											手机号
										</view>
										<view class="flex-box t-r">
											{{redPacketItem.mobile}}
										</view>
									</view>
									<view class="dis-flex f-24">
										<view class="flex-box">
											领取时间
										</view>
										<view class="flex-box t-r">
											{{redPacketItem.transfertime}}
										</view>
									</view>
								</view>
							</view>
							
						</view>
					</block>
					<block v-else>
						<nonemores :diyTitleType="'Data'" :diyImagesSrc="img"></nonemores>
					</block>
				</view>
				<view style="background-color: #F8F8F8;" class="m-top20" v-if="!!redPacketList && redPacketList.length>0 && selectStatus">
					<load-more :isMore="loadingMore"></load-more>
				</view>
			</view>
		</block>
		<PopManager :show="showlink" type="bottom" @clickmask="showlink = false">
			<view class="shareBox dis-flex" v-if="showlink">
				<button class="flex-box sharebtn t-c" @click="sharelinkman">
					<image :src="imgfixUrls+ 'wxhaoyou.png'"  mode=""></image>
					<view class="sharetext">
						联系人
					</view>
				</button>
				<!-- #ifdef H5 || APP-PLUS -->
				<button class="flex-box sharebtn t-c" @click="shareover">
					<image :src="imgfixUrls+ 'checkout/weixin.png'" mode=""></image>
					<view class="sharetext">
						微信好友
					</view>
				</button>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
				<button class="flex-box sharebtn t-c" open-type="share" >
					<image :src="imgfixUrls+ 'checkout/weixin.png'" mode=""></image>
					<view class="sharetext">
						微信好友
					</view>
				</button>
				<!-- #endif -->
				<button class="flex-box sharebtn t-c" @click="sharelint">
					<image :src="imgfixUrls+ 'pengyouquan.png'"  mode=""></image>
					<view class="sharetext">
						微信朋友圈
					</view>
				</button>
			</view>
			<view class="b-f close" @click="showlink = false">
				关闭
			</view>
		</PopManager>
		<PopManager :show="shareShow" :type="'top'" @clickmask="shareShow = false">
			<cover-view>
				<cover-image v-if="shareShow" :src="imageRoot + 'share.png'" class="coverImg"></cover-image>
			</cover-view>
		</PopManager>
	</view>
</template>

<script>
	import App from "@/common/js/app.js"
	import nonemores from "@/components/template/nonemores.vue"
	import wxApi from "@/common/js/wxApi.js"
	import loadIng from '@/components/template/loadlogo'
	import loadMore from '@/components/template/loadmore.vue'
	import PopManager from '@/components/template/PopManager.vue';
	export default {
		data() {
			return {
				diyImagesSrc: 'redpacket/nonemore_packet.png',
				curActive: '0',
				tablist: [{
						title: '未使用',
						type: '0'
					},
					{
						title: '已使用',
						type: '1'
					},
					{
						title: '已过期',
						type: '2'
					}
				],
				current_page: 1,
				curRedpacketTotal: "",
				loading: false,
				expireSoon: "",
				redPacketList: [],
				loadingMore: false,
				selectStatus: false,
				isShareBotton: false,
				useWhereList: [],
				selectId: '',
				img:'',
				showlink:false,
				redItem:{},
				shareShow:false,
				id:null,
				mobile:''
			}
		},
		onLoad(e) {
			let _this = this;
			this.img = this.imgfixUrl + this.diyImagesSrc;
			
			// #ifndef H5
			uni.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
			})
			uni.$once('myredpacketShare',function(data){
				_this.shareover()
			})
			// #endif
			this.$nextTick(function(){
				setTimeout(()=>{
					uni.setNavigationBarTitle({
					　　title:e.title
					})
				},500)
			})
			
			
			
		},
		onShow() {
			let _this = this;
			// #ifndef H5
			if (_this.isShareBotton){
				_this.isShareBotton = false
				return
			}
			// #endif
			_this.getRedpacket_list(true, _this.curActive);
		},
		computed: {

		},
		methods: {
			gohone(link){
				App.navigationTo({
					url: link
				})
			},
			goindex(title,link){
				if(title == '全平台可用'){
					App.navigationTo({
						url: link
					})
				}
			},
			confirm(e){
				this.getRedpacket_list(false,3)
			},
			closeRed(item){
				App.showError(
					`确定取消转赠?`,
					data => {
						if (data.confirm) {
							App._post_form('&p=Order&do=cancelTransfer', {
								objid:item.id,
								type:2
							}, res => {
								uni.showToast({
									title:'操作成功'
								});
								this.redPacketList.map((items,index)=>{
									if(items.id == item.id){
										items.status = 1;
									}
								})
							})
						}
					},
					true
				);
				
			},
			async shareover(){
				// #ifdef H5
				let _this = this;
					this.shareShow = true;
					_this.id = await _this.redShare(_this.redItem.id,2);
					console.log(_this.id)
					let shareLinkurl = uni.getStorageSync('shareLinkurl');
					shareLinkurl = shareLinkurl.replace('pages/subPages/redpacket/myredpacket','pages/mainPages/index/index');
					let shareData =  uni.getStorageSync('shareObj');
					jWeixin.ready(() => {
						wxApi.wxShare({
							title: _this.id?_this.id.title:shareData.title, // 分享标题
							desc: _this.id?_this.id.desc:shareData.desc, // 分享描述
							link:  _this.id?shareLinkurl + '&isred=' + _this.id.recordid:shareLinkurl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
							imgUrl:_this.id? _this.id.shareimg : shareData.imageUrl, // 分享图标
							success: function(res) {
								
							}
						})
					})
				// #endif
			},
			async sharelint(){
				let _this = this;
				
				_this.id = await _this.redShare(_this.redItem.id,2);
				uni.setStorageSync('redItem',_this.id);
				//#ifdef MP-WEIXIN
				App.showError(
					`即将前往“首页”,稍后按照“界面提示”进行点击右上角“···”选择“分享到朋友圈”即可`,
					data => {
						if (data.confirm) {
						App.navigationTo({
							url: 'pages/mainPages/index/index?isRedShare=2&isRedId=' + this.redItem.id
						})
							}
					},
					true
				);
				//#endif
				//#ifdef H5
				this.shareShow = true;
				let shareLinkurl = uni.getStorageSync('shareLinkurl');
				shareLinkurl = shareLinkurl.replace('pages/subPages/redpacket/myredpacket','pages/mainPages/index/index');
				let shareData =  uni.getStorageSync('shareObj');
				jWeixin.ready(() => {
					wxApi.wxShare({
						title: _this.id?_this.id.title:shareData.title, // 分享标题
						desc: _this.id?_this.id.desc:shareData.desc, // 分享描述
						link:  _this.id?shareLinkurl + '&isred=' + _this.id.recordid:shareLinkurl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
						imgUrl:_this.id? _this.id.shareimg : shareData.imageUrl, // 分享图标
						success: function(res) {
							
						}
					})
				})
				//#endif
			},
			sharelinkman(){
				App.navigationTo({
					url: 'pages/subPages2/redClothes/redClothes?type=2&id=' + this.redItem.id
				})
			},
			makered(item) {
				let _this = this;
				this.redItem = item;
				_this.showlink = true;
			},
			redShare(id,type){
				return new Promise((resolve, reject) => {
					App._post_form('&p=Order&do=planTransfer', {
						id,
						type
					}, res => {
						resolve(res.data);
					})
				})
			},
			//列表
			selectLi(id) {
				App._post_form('&p=redpack&do=getRedPackUserWhere', {
					id
				}, res => {
					if (res.errno == 0) {
						this.useWhereList = res.data.use_where
						this.selectId = res.data.id;
					} else if (res.data.use_where.length == 0) {
						uni.showToast({
							icon: 'none',
							title: '暂无数据'
						})
					}

				})
			},
			selectBox1(id) {
				if(this.selectId == id){
					this.selectId = ''
				}else{
					this.selectLi(id);
				}
				
		
			},
			selectBox2(id) {
				this.selectId = ''
			},
			selectTab(type) {
				let _this = this;
				_this.selectStatus = false;
				_this.curActive = type;
				uni.showLoading()
				_this.getRedpacket_list(false, type)
			},
			navgateto() {
				App.navigationTo({
					url: 'pages/subPages/redpacket/redsquare'
				})
			},
			getRedpacket_list(init = false, status = '0', page = 1, isPage = false) {
				let _this = this,
					tablist = _this.tablist,
					url = '&p=redpack&do=userRedPackList',
					data = {
						page,
						status
					};
					if(status == 3){
						url = '&p=Order&do=alreadyTransferList';
						data = {
							page,
							mobile:_this.mobile || '',
							type:2
						}
					}
					
				App._post_form(url,data, res => {
					if (res.errno == 0) {
						let redpacketData = res.data.redpacketData;
						if (init) {
							tablist[0]['num'] = redpacketData.not_used;
							tablist[1]['num'] = redpacketData.used;
							tablist[2]['num'] = redpacketData.expired;
							_this.setData({
								tablist
							});
							if(res.data.transfer == 1 && tablist.length == 3){
							_this.tablist.push({
								title: '已赠送',
								type: '3'
							});
							_this.tablist[3]['num'] = redpacketData.alltr;
							}
						}
						if(url == '&p=Order&do=alreadyTransferList'){
							_this.tablist[3]['num'] = res.data.totalnum;
						}
						if(_this.languageStatus == 1){
							_this.tablist[0].title = '미사용';
							_this.tablist[1].title = '사용완료';
							_this.tablist[2].title = '기한만료';
						}
						if (isPage) {
							if (res.data.list.length > 0) {
								_this["redPacketList"].push(...res.data.list);
							} else {
								_this.loadingMore = true;
							}
						} else {
							_this.setData({
								current_page: 1,
								redPacketList: res.data.list,
								curRedpacketTotal: redpacketData?redpacketData.total:res.data.pagetotal,
								loadingMore: res.data.list.length === 0 || _this.current_page === (redpacketData?redpacketData.total:res.data.pagetotal),
								expireSoon: redpacketData?redpacketData.expireSoon:''
							})
						}
						
					}
					_this.selectStatus = true;
					_this.loading = true;
					uni.hideLoading()
				})
			}
		},
		onReachBottom() {
			let _this = this,
				curActive = _this.curActive;
			if (_this.current_page >= _this.curRedpacketTotal) {
				_this.loadingMore = true;
				return false;
			}
			_this.getRedpacket_list(false, curActive, ++_this.current_page, true)
		},
		components: {
			nonemores,
			loadIng,
			loadMore,
			PopManager
		},
		async onShareAppMessage() {
			let _this = this;
			this.isShareBotton = true;
			console.log(this.isShareBotton, '触发转发点击事件不重新渲染数据')
			let getUserinfo = uni.getStorageSync('userinfo'),
				ShareData =  uni.getStorageSync('shareDataInfo'),
				agencyData = uni.getStorageSync('agencyData'),
				aid = agencyData.aid;
				if(_this.redItem.id){
					_this.id = await _this.redShare(_this.redItem.id,2);
				}else{
					_this.id = null;
				}
			return {
				title: _this.id?_this.id.title:ShareData.title, // 分享标题
				desc: _this.id?_this.id.desc:ShareData.desc, // 分享描述
				imageUrl:_this.id? _this.id.shareimg : ShareData.img, // 分享图标
				path: _this.id?'pages/mainPages/index/index?head_id=' + getUserinfo.mid + '&aid=' + aid + '&isred=' + _this.id.recordid:'pages/mainPages/index/index?head_id=' + getUserinfo.mid + '&aid=' + aid
			};
		}
	}
</script>

<style lang="scss">
	
	.coverImg {
		/* #ifdef H5 */
		width: 750upx;
		/* #endif */
		/* #ifdef MP-WEIXIN */
		width: 540upx;
		/* #endif */
	}
	.selectBox {
		margin: 0rpx 35rpx 0 35rpx;
		background: white;

		.select-con {
			padding: 20rpx;

			view {
				width: 500rpx;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				word-break: break-all;
				margin-left: 30rpx;
				line-height: 50rpx;
			}
			.gohomeBtn{
				width: 100upx;
				height: 50upx;
				line-height: 50upx;
				text-align: center;
				background-color: #FF4444;
				color: #FFFFFF;
				border-radius: 10upx;
			}
		}
	}
	
	page {
		background-color: #F8F8F8;
	}

	.tablist-main {
		width: 100%;
		height: 84upx;
		line-height: 84upx;

		.tab-item {
			.active-tab {
				position: absolute;
				left: 50%;
				bottom: 0;
				transform: translateX(-50%);
				width: 80upx;
				height: 8upx;
				background-color: #ff4444;
				border-radius: 8upx 8upx 0 0;
			}
		}
	}

	.packet-main {
		margin: 30upx;
	}

	.red-square-main {
		padding: 24upx;

		.redsquareImage {
			display: block;
			width: 40upx;
			height: 40upx;
			margin-right: 16upx;
		}

		.redsquare-right {
			font-size: 24upx;
		}
	}

	.unused-packet-main {
		.unused-packet-list {
			.unused-list-item {
				width: 100%;
				//height: 170upx;
				background-size: 100% 210upx;
				background-repeat: no-repeat;
				padding: 20upx 0;
				position: relative;
				.unused-list-rad{
					display: flex;
					width: 100%;
					height: 100%;
					position: absolute;
					left: 0;
					top: 0;
					background-color: rgba(0,0,0,0.6);
					z-index: 1;
					border-radius: 20upx;
					font-size: 28upx;
					// padding-top: 40upx;
					.closeBtn{
						width: 150upx;
						height: 70upx;
						line-height: 70upx;
						background-color: #FFFFFF;
						font-size: 28upx;
						border-radius: 10upx;
						float: right;
						text-align: center;
						margin-right: 60upx;
					}
				}

				.redPacket-type {
					position: absolute;
					right: 20upx;
					top: 20upx;
				}

				.UnredPacket-detail {
					height: 170rpx;
					padding: 0 50upx;
					position: relative;
				}

				.UnredPacket-priceStyle {
					margin-right: 12upx;

					>text {
						display: inline-block;
						vertical-align: top;
					}
				}
				.makeBtn{
					width: 120upx;
					height: 60upx;
					background-color: #ffffff;
					color: #FF4444;
					text-align: center;
					line-height: 60upx;
					border-radius: 10upx;
					font-size: 28upx;
					font-weight: 700;
					position: absolute;
					bottom: 10upx;
					right: 30upx;
				}
			}
		}
	}

	.usedpacket {
		.usedpacket-list {
			.usedpacket-list-item {
				height: 170upx;

				.usedpacket-itemleft {
					width: 28%;
					height: 100%;
					background-color: #CCCCCC;
					padding: 0 20upx;
					flex-shrink: 0;

					.usedpacket-priceStyle {
						margin-right: 12upx;

						>text {
							display: inline-block;
							vertical-align: top;
							margin-top: 4upx;
						}
					}

					.itemleft_bgstyle {
						width: 30upx;
						height: 30upx;
						border-radius: 50%;
						position: absolute;
						left: -16upx;
						top: 50%;
						transform: translateY(-50%);
						background-color: #F8F8F8;
					}

					.itemleft_bgstyle2 {
						position: absolute;
						right: 0;
						top: 0;
						width: 1%;
						height: 170upx;
						padding-left: 4upx;
						color: #fff;
						box-sizing: border-box;
						background: radial-gradient(transparent 0, transparent 8upx, #CCCCCC 8upx);
						background-size: 16upx 16upx;
						background-position: 16upx 0px;
						background-color: #fff;
					}
				}

				.usedpacket-itemright {
					height: 100%;

					.usedpacket_titleType {
						.usedpacketType {
							padding: 0 6upx;
							height: 28upx;
							background-color: #ccc;
							border-radius: 14upx;

							>text {
								display: inline-block;
								transform: scale(.85);
							}
						}

						.usedpacketTitle {
							width: 240upx;
						}
					}

					>image {
						position: absolute;
						display: block;
						right: 24upx;
						bottom: 0;
						width: 114upx;
						height: 114upx;
					}
				}
			}
			
		}

	}
	.linkUser{
		padding: 30upx;
		background-color: #ff4444;
		border-radius: 20upx;
		font-size: 28upx;
		// margin-bottom: 20upx;
		position: relative;
		top: -15upx;
		margin-bottom: 10upx;
		color: #ffffff;
	}
	.shareBox{
			padding: 50upx 30upx;
			width: 92vw;
			background-color: #FFFFFF;
			border-radius:  30upx 30upx 0 0;
			image{
				width: 100upx;
				height: 100upx;
			}
			.sharetext{
				font-size: 28upx;
				color: #666666;
			}
			/deep/.sharebtn{
				background-color: #FFFFFF;
			}
		}
		.close{
			text-align: center;
			padding: 20upx;
			border-top: 1upx solid #EEEEEE;
			font-size: 36upx;
			color: #666666;
		}
		.search{
			// margin: 30upx;
			margin-bottom: 30upx;
			border-radius: 20upx;
			background-color: #ffffff;
			/deep/.searchInput{
				height: 80upx;
				line-height: 80upx;
				font-size: 28upx;
				width: 100%;
			}
		}
</style>
