<!-- 菜单悬浮的原理: 通过给菜单添加position:sticky实现, 用法超简单, 仅APP端的低端机不兼容 https://caniuse.com/#feat=css-sticky -->
<template>
	<view class="content" style="background-color: #f7f7f7;">
		<view class="sticky-tabs">
			<!-- <u-tabs :list="tabs" :is-scroll="true" :current="tabIndex" @change="tabChange" active-color="#333333"
				inactive-color="#333333"></u-tabs> -->
				<view class="sticky-tabs-list" v-for="(item,index) in tabs" :key="index" @click="tabChange(index)">
					<image :src="item.Aurl" mode="" v-if="tabIndex==index"></image>
					<image :src="item.Surl" mode="" v-else></image>
					<span :class="[tabIndex==index?'spanL':'spanH']">{{item.name}}</span>
				</view>
		</view>
		<!-- 数据列表 -->
		<view v-if="goods.length > 0" class="margin-sm bg" v-for="(item,index) in goods" :key='index'
			@click="goNav('/my/order/pay?ordersId='+item.ordersId,item)" style="border-radius: 20rpx;padding: 36rpx;">
			<view class="flex justify-between">
				<view class="flex align-center profile-img">
					<image src="../../static/logo.png" style="width: 55rpx;height: 55rpx;border: 1px solid#d7f2ee;border-radius: 50%;">
					</image>
					<view class="margin-left-xs ">{{item.artificerName}}</view>
				</view>
				<view class="text-green" v-if="item.status ==1"><span>{{item.ordersNo}}</span><span>待支付</span></view>
				<view class="text-green" v-if="item.status ==2"><span>{{item.ordersNo}}</span><span>待服务</span></view>
				<view class="text-green" v-if="item.status ==3"><span>{{item.ordersNo}}</span><span>待评价</span></view>
				<view class="text-green" v-if="item.status ==4"><span>{{item.ordersNo}}</span><span>已取消</span></view>
				<view class="text-green" v-if="item.status ==5"><span>{{item.ordersNo}}</span><span>已完成</span></view>
				<view class="text-green" v-if="item.status ==6"><span>{{item.ordersNo}}</span><span>服务中</span></view>
				<view class="text-green" v-if="item.status ==7"><span>{{item.ordersNo}}</span><span>技师出发</span></view>
				<view class="text-green" v-if="item.status ==8"><span>{{item.ordersNo}}</span><span>技师到达</span></view>
				<view class="text-green" v-if="item.status ==9"><span>{{item.ordersNo}}</span><span>待确认</span></view>
				<view class="text-green" v-if="item.status ==10"><span>{{item.ordersNo}}</span><span>待补单</span></view>
				
				<!-- <view class="u-tips-color">{{item.createTime}}</view> -->
			</view>
			<view class="margin-top-sm" style="width: 100%;height: 1rpx;background: #f7f7f7;"></view>
			<view class=" u-flex u-p-t-30">
				<view class="u-m-r-10">
					<u-avatar
						:src="(item.ordersMassageList && item.ordersMassageList.length > 0 && item.ordersMassageList[0].massageType && item.ordersMassageList[0].massageType.massageImg)?item.ordersMassageList[0].massageType.massageImg: '../../static/logo.png'"
						mode="square" size="100"style="height: 132rpx;width: 132rpx;flex: 0 0 132rpx;">
					</u-avatar>
				</view>
				<view class="u-flex-1" style="margin-left: 20rpx;">
					<view class="text-bold u-line-1" style="width: 560rpx;">
						<view class=" text-lg "
							v-if="item.ordersMassageList && item.ordersMassageList.length > 0 && item.ordersMassageList[0].massageType && item.ordersMassageList[0].massageType.title"
							style="font-size: 32rpx;margin-top: 0rpx;display: inline-block;width: 470rpx; overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
							{{item.ordersMassageList[0].massageType.title}}
						</view>
					</view>
					<view class="u-font-12 u-tips-color flex justify-between" style="margin-top: 6rpx;">
						预约时间：{{item.serveTime}}
					</view>
					<view class="flex-sub u-font-12 margin-top-xs" style="color: #999999;">
						实付：<text class="text-df" style="color: #FF1200;">￥</text><text class="text-xl text-bold" style="color: #FF1200;">{{item.payMoneyTotal}}</text>
					</view>
				</view>
				
			</view>
			<view class="flex u-p-t-20 justify-between align-center" style="justify-content: flex-end;">
				<view class="flex text-right" style="flex-direction: column;width: 100%;">
					
					<view class="showBtn" :style="{'justify-content':item.status != 6||item.status==1?'flex-end':'space-between'}">
						<view class="gengduo" @click.stop="gengBtn(index)" v-show="item.status ==6||item.status ==1">更多</view>
						<view class="showBtn-view">
							<u-button v-if="item.status == 10" :custom-style="customStyle1" shape="circle" :plain="true"
								@click="goNav('/my/order/payModifyDd?ordersId='+item.ordersId,item)" class="btns">
								立即预约
							</u-button>
							<u-button v-if="item.status == 3" :custom-style="customStyle1" class="btns" shape="circle" :plain="true"
								@click="goNav('/my/order/feedback?artificerId='+item.artificerId+ '&ordersId='+item.ordersId)">
								待评价
							</u-button>		
							<u-button v-if="item.status == 9&&item.refusalContent" :custom-style="customStyle1" shape="circle" :plain="true"
								@click="toggleQ('center',item)"  class="btns">
								拒单详情
							</u-button>
							<u-button v-if="item.status == 1" :custom-style="customStyle1" shape="circle" :plain="true"
								@click="goNav('/my/order/payModifyDd?ordersId='+item.ordersId,item)" class="btns">
								去支付
							</u-button>
							
							<u-button v-if="item.btnShow == 'true'&&item.status==2||item.oldOrdersId==null||item.status==6||item.status==7||item.status==8||item.status == 9&&!item.refusalContent" :custom-style="customStyle1" shape="circle" :plain="true"
								@click="goNav('/my/order/payModifyDzhifu?ordersId='+item.ordersId,item,'修改')" class="btns">
								修改订单
							</u-button>
							<u-button v-if="item.status == 5" :custom-style="customStyle1" shape="circle"  class="btns" :plain="true" @click="goNav('/my/order/complain?id='+item.ordersId)" >
								去投诉
							</u-button>
							<u-button v-if="item.status == 6" :custom-style="customStyle1" class="btns" shape="circle" :plain="true"
									@click="goNav('/my/order/pay?ordersId='+item.ordersId,item)">
								升级项目
							</u-button>
							<u-button v-if="item.status == 6" :custom-style="customStyle1" class="btns" shape="circle" :plain="true"
								@click="toggle('center',item)">
								提前结束
							</u-button>
							<u-button :custom-style="customStyle1" shape="circle" :plain="true"
								@click="goNav('/my/order/pay?ordersId='+item.ordersId)" class="btnsH">
								联系客服
							</u-button>
						</view>
					</view>
					<view class="hideBtn" v-show="btnShow==index" style="justify-content: end;">
						<u-button
							v-if="item.status != 3 && item.status != 4 && item.status != 5"
							:custom-style="customStyle" shape="circle" :plain="true"
							 class="btns"
							@click="cancelOrder(item)">
							取消订单
						</u-button>
						<u-button v-if="item.status == 6" :custom-style="customStyle1" class="btns" shape="circle" :plain="true"
								@click="goNav('/my/wallet/index?artificerId='+item.artificerId+'&ordersId='+item.ordersId,item)">
							充值
						</u-button>
						<u-button v-if="item.addNum !=null && item.status == 6" :custom-style="customStyle1" class="btns" shape="circle" :plain="true"
								@click="goNav('/my/order/pay?ordersId='+item.ordersId,item)">
							加钟
						</u-button>
						
					</view>
				</view>
			</view>
		</view>
		<view>
			<!-- 确认拒绝 -->
			<uni-popup ref="popupQ" background-color="#fff">
				<view class="popup-content">
					<view class="popup-head">
						<span>确认拒单</span>
						<span @click="closePopupQ(type)">x</span>
					</view>
					<view class="popup-mian">
						<view  class="popup-mian-textarea">
							{{qurenJd.refusalContent}}
						</view>
						<view class="popup-mian-btn">
							<span @click="TuiPopup(type,'1')">
								同意
							</span>
							<span @click="TuiPopup(type,'3')">
								全额退款
							</span>
						</view>
					</view>
				</view>
			</uni-popup>
		</view>
		<view>
			<!-- 提前结束 -->
			<uni-popup ref="popup" background-color="#fff">
				<view class="popup-content">
					<view class="popup-head">
						<span>请输入提前结束的原因</span>
						<span @click="closePopup(type)">x</span>
					</view>
					<view class="popup-mian">
						<textarea placeholder="请输入提前结束服务原因" @input="textareaInp" class="popup-mian-textarea" name="" id="" cols="30" rows="10"></textarea>
						<view class="popup-mian-btn">
							<span @click="closePopup(type)">
								取消
							</span>
							<span @click="tiqian('center')">
								确定
							</span>
						</view>
					</view>
				</view>
			</uni-popup>
		</view>
		<empty v-if="goods.length == 0"></empty>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import mescrollBody from "@/components/mescroll-uni/components/mescroll-body/mescroll-body.vue";
	import meTabs from "@/components/mescroll-uni/me-tabs/me-tabs.vue";
	import empty from '@/components/empty.vue'
	// 调用手机系统权限
	// #ifdef APP-PLUS
	import permision from "@/components/permission.js";
	// #endif
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
			mescrollBody,
			meTabs,
			empty
		},
		data() {
			return {
				tiqianData:[],
				qurenJd:[],
				btnShow:'',
				type:'center',
				goods: [], // 数据列表
				game: [],
				tabs: [{
					name: '全部',
					Aurl:'../../static/order_icon/order_icon1-1.png',
					Surl:'../../static/order_icon/order_icon1.png',
					status: '0'
				}, {
					name: '待支付',
					Aurl:'../../static/order_icon/order_icon2-2.png',
					Surl:'../../static/order_icon/order_icon2.png',
					status: '1'
				}, {
					name: '待服务',
					Aurl:'../../static/order_icon/order_icon3-3.png',
					Surl:'../../static/order_icon/order_icon3.png',
					status: '2'
				}, {
					name: '待补单',
					Aurl:'../../static/order_icon/order_icon4-4.png',
					Surl:'../../static/order_icon/order_icon4.png',
					status: '10'
				},{
					name: '技师出发',
					Aurl:'../../static/order_icon/order_icon10-10.png',
					Surl:'../../static/order_icon/order_icon10.png',
					status: '7'
				}, {
					name: '技师到达',
					Aurl:'../../static/order_icon/order_icon5-5.png',
					Surl:'../../static/order_icon/order_icon5.png',
					status: '8'
				}, {
					name: '服务中',
					Aurl:'../../static/order_icon/order_icon6-6.png',
					Surl:'../../static/order_icon/order_icon6.png',
					status: '6'
				}, {
					name: '待评价',
					Aurl:'../../static/order_icon/order_icon7-7.png',
					Surl:'../../static/order_icon/order_icon7.png',
					status: '3'
				}, {
					name: '已取消',
					Aurl:'../../static/order_icon/order_icon8-8.png',
					Surl:'../../static/order_icon/order_icon8.png',
					status: '4'
				}, {
					name: '已完成',
					Aurl:'../../static/order_icon/order_icon9-9.png',
					Surl:'../../static/order_icon/order_icon9.png',
					status: '5'
				}],
				tabIndex: 0, // tab下标
				page: 1,
				limit: 10,
				userId: 0,
				status: 1,
				nickName: '',
				avatar: '',
				customStyle: {
					color: '#999999',
					border: '4rpx solid #999999',
					border: "8rpx",
					width: '180rpx',
					height: '60rpx',
					margin: "0 0 0 20rpx",
					fontSize: '26rpx'
				},
				customStyle1: {
					color: '#FFFFFF',
					backgroundColor: '',
					border: "8rpx",
					width: '180rpx',
					height: '60rpx',
					margin: "0 0 0 20rpx",
					fontSize: '26rpx'
				},
				yhqxSel: '否',
				latitude: '43.86487',
				longitude: '',
				// customStyle: {
				// 	color: '#1789FD',
				// 	backgroundColor: '#1E1F31',
				// 	border: "8rpx",
				// 	width: '180rpx',
				// 	height: '54rpx',
				// 	margin: "0 0 0 20rpx"
				// }
				earlyFinishReason:'',
				
			}
		},
		onLoad() {
			this.userId = uni.getStorageSync('userId')
			this.nickName = uni.getStorageSync('nickName');
			
		},
		onShow() {
			this.yhqxSel = this.$queue.getData("yhqxSel");
			let SelectIndex = this.$queue.getData('SelectIndex');
			if (SelectIndex) {
				this.tabIndex = SelectIndex;
				this.$queue.remove('SelectIndex')
			}

			let token = this.$queue.getData('token');
			if (token) {
				uni.showLoading({
					title: '加载中...'
				})
				this.getOrderList()
			} else {
				uni.navigateTo({
					url: '/pages/public/login'
				});
			}
		},
		methods: {
			goNav(url,item,text) {
				this.$queue.setData('xiangmu',item);
				if(item.isSupplement='1'){
					uni.navigateTo({
						url:url
					})
				}else{
					if(item.oldOrdersId){//如果有订单有升级 那就去升级订单详情
						uni.navigateTo({
							url:'/my/order/payShengji?ordersId='+item.ordersId
						})
					}else if(item.addNum){
						uni.navigateTo({
							url:'/my/order/payJaZ?ordersId='+item.ordersId
						})
					}else if(item.addNum&&item.oldOrdersId){
						uni.navigateTo({
							url:'/my/order/payJaZ?ordersId='+item.ordersId
						})
					}else if(text=='修改'){
						uni.navigateTo({
							url:'/my/order/payModifyDzhifu?ordersId='+item.ordersId
						})
					}else{
						uni.navigateTo({
							url:url
						})
					}
				}
				
			},
			gengBtn(index){//更多按钮
				this.btnShow=index
			},
			closePopupQ(type){//提前结束    关闭弹出框
				this.type = type
				this.$refs.popupQ.close(type);
			},
			toggleQ(type,item) {//确认拒单 弹出框
				this.qurenJd=item;
				
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popupQ.open(type)
			},
			TuiPopup(typeTxte,type){//确认拒单 全额退款.同意按钮   关闭弹出框
				this.type = typeTxte
				let data = {
					ordersId: this.qurenJd.ordersId,
					isAuto: '0',
					type: type
				}
				this.$Request.post('/app/artificer/cancelSupplementOrders', data).then(res => {
					if (res.code == 0) {
						uni.showToast({
							title:'操作完成！'
						})
						this.getOrderList()
							this.$refs.popupQ.close(typeTxte);
					}else{
						uni.showToast({
							icon:'error',
							title:'操作失败！'
						})
					}
				
				}).catch(() => {
					//联网失败, 结束加载
				});
			},
			
			closePopup(type){//提前结束    关闭弹出框
				this.type = type
				this.$refs.popup.close(type);
			},
			textareaInp(e){//提前结束 输入框
				this.earlyFinishReason=e.detail.value;
				console.log("earlyFinishReason",this.earlyFinishReason)
			},
			tiqian(type){//提前结束 确认按钮
				var that=this;
				that.type = type;
				
				uni.getLocation({
					type: 'wgs84',
					success: function (resa) {
						var longitude=resa.longitude;
						var latitude=resa.latitude;
						console.log('当前位置的经度：' + resa.longitude);
						console.log('当前位置的纬度：' + resa.latitude);
						let data = {
							ordersId: that.tiqianData.ordersId,
							accomplishLongitude:longitude,
							accomplishLatitude:latitude,
							earlyFinishReason: that.earlyFinishReason,
						}
						that.$Request.post('/app/artificer/accomplishOrders', data).then(res => {
							if (res.code == 0) {
								uni.showToast({
									title:'操作完成！'
								})
								that.getOrderList()
								that.$refs.popup.close(type);
							}else{
								console.log('shibai：' + longitude);
								console.log('shibai：' + latitude);
								uni.showToast({
									icon:'error',
									title:'操作失败！'
								})
							}
						
						}).catch(() => {
							//联网失败, 结束加载
						});
						
					},
						fail: function(e) {
							// #ifdef H5
								uni.showToast({
									title:'获取地址失败！'
								})
							// #endif
							// #ifdef APP-PLUS
							that.checkPermission();
							// #endif
						}
				});
				
			},
			toggle(type,item) {//提前结束 弹出框
				this.tiqianData=item;
				this.type = type;
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type);
			},
			async checkPermission() {
				let status = permision.isIOS ? await permision.requestIOS('location') : await permision.requestAndroid(
					'android.permission.ACCESS_FINE_LOCATION');
				if (status === null || status === 1) {
					status = 1;
				} else if (status === 2) {
					uni.showModal({
						content: "系统定位已关闭",
						confirmText: "确定",
						showCancel: false,
						success: function(res) {}
					})
				} else if (status.code) {
					uni.showModal({
						content: status.message
					})
				} else {
					uni.showModal({
						title: '定位服务已关闭',
						content: "您需要打开定位权限，否则我们将无法获得到您附近的项目服务，导致我们无法为您提供服务，请到>设置>隐私>定位服务>中开启【盛安到家】定位权限",
						confirmText: "设置",
						success: function(res) {
							if (res.confirm) {
								permision.gotoAppSetting();
							}
						}
					})
				}
				return status;
			},
			getTimeStampWithoutSeconds(date) {
			    // 将日期转换为标准的UTC时间
			    var utcDate = new Date(
						   date.getUTCFullYear(), 
						   date.getUTCMonth(), 
						   date.getUTCDate(), 
						   date.getUTCHours(), 
						   date.getUTCMinutes(), 
			                           0);
			    // 返回不含秒的时间戳
			    return utcDate.getTime();
			},
			//获取列表数据
			getOrderList() {
				let curTab = this.tabs[this.tabIndex].status

				let data = {
					status: curTab,
					page: this.page,
					limit: this.limit
				}
				// selectOrdersList
				this.$Request.get('/app/artificer/selectAppOrdersList', data).then(res => {
					if (res.code == 0) {
						uni.hideLoading();
						if (this.page == 1) this.goods = []; //如果是第一页需手动制空列表
						this.goods = [...this.goods, ...res.data.list]; //追加新数据
						var date = new Date(); // 当前日期和时间
						var timestamp = this.getTimeStampWithoutSeconds(date); // 不含秒的时间戳
						const twoHoursInMilliseconds = 2 * 60 * 60 * 1000; // 两个小时的毫秒数
						var twoTime=parseInt(new Date(twoHoursInMilliseconds).getTime())
						for(var i=0;i<this.goods.length;i++){
							var time=parseInt(new Date(this.goods[i].serveTime).getTime())
							if(time-timestamp>twoTime){
								this.$set(this.goods[i], 'btnShow', 'true')
							}else{
								this.$set(this.goods[i], 'btnShow', 'false')
							}
						}
					}

				}).catch(() => {
					//联网失败, 结束加载

				});
			},
			// 切换菜单
			tabChange(index) {
				uni.showLoading({
					title: '加载中...'
				})
				this.tabIndex = index
				// this.goods = []; // 置空列表,显示加载进度条
				this.page = 1
				this.getOrderList()
			},
			// 取消订单
			cancelOrder(e) {
				let contentName = '';
				let closeKC = this.$queue.getData('closeKC');
				if (e.status == 7 || e.status == 8 && closeKC) {
					let money = parseFloat(parseFloat(e.price) * parseFloat(closeKC)).toFixed(2);
					contentName = '取消订单将扣除' + money + '元的手续费，并且车费将全部扣除！';
				}
				let that = this
				uni.showModal({
					title: '温馨提示',
					content: '是否确认取消订单？' + contentName,
					success: function(res) {
						if (res.confirm) {
							let data = {
								ordersId: e.ordersId
							}
							that.$queue.showLoading('取消中...')
							that.$Request.post('/app/artificer/deleteOrders', data).then(res => {
								uni.hideLoading();
								if (res.code == 0) {
									that.page = 1
									that.getOrderList()
								} else {
									that.$queue.showToast(res.msg);
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			/*下拉刷新的回调 */
			downCallback() {
				// 这里加载你想下拉刷新的数据, 比如刷新轮播数据
				// loadSwiper();
				// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
				this.mescroll.resetUpScroll()
				this.page = 1;
				this.getOrderList();
			},
			// 完成订单
			cancel(e) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确认完成订单吗?',
					success: function(res) {
						if (res.confirm) {
							let data = {
								ordersId: e.ordersId,
							}
							that.$queue.showLoading('提交中...')
							that.$Request.post('/app/artificer/accomplishOrders', data).then(res => {
								uni.hideLoading();
								if (res.code == 0) {
									that.page = 1
									that.getOrderList()
								} else {
									that.$queue.showToast(res.msg);
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			//删除
			delOrder(e) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定删除订单吗?',
					success: function(res) {
						if (res.confirm) {
							let data = {
								ordersId: e.ordersId,
							}
							that.$queue.showLoading('删除中...')
							that.$Request.post('/app/artificer/removeOrders', data).then(res => {
								uni.hideLoading();
								if (res.code == 0) {
									uni.showToast({
										name: "删除成功"
									})
									that.page = 1
									that.getOrderList()
								} else {
									that.$queue.showToast(res.msg);
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			
		},
		onReachBottom: function() {
			this.page = this.page + 1;
			this.getOrderList();
			console.log("asd",this.totalCount)
			if (this.totalCount==undefined&&this.orderList!='') {
				uni.showToast({
					title: '已经到底了~',
					icon: 'none'
				})
			}
		},
		onPullDownRefresh: function() {
			this.page = 1;
			this.getOrderList();
			setTimeout(d => {
				uni.stopPullDownRefresh();
			}, 2000)
		},
	}
</script>

<style lang="scss" scoped>
	/deep/.u-size-default{
		margin-top: 5px !important;
	}
	/deep/.justify-between{
		height: 60rpx;
	}
	.gengduo{
		font-weight: 400;
		font-size: 25rpx;
		color: #7D7D7D;
	}
	.profile-img{
		margin-top: -20rpx;
		
	}
	.showBtn-view{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.showBtn{
		justify-content: space-between;
	}
	.showBtn,.hideBtn{
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		flex-wrap: wrap;
		justify-content: space-between;
		
	}
	
	.popup-mian-btn span:nth-child(1){
		background: linear-gradient(90deg, #FE912E, #FF9970);
	}
	.popup-mian-btn span:nth-child(2){
		background: linear-gradient(90deg, #019C88, #28BA92, #35C495);
	}
	.popup-mian-btn span{
		width: 247rpx;
		height: 77rpx;
		line-height: 77rpx;
		text-align: center;
		font-weight: 400;
		font-size: 32rpx;
		color: #FFFEFE;
		border-radius: 39rpx;
	}
	.popup-mian-btn{
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-top: 10px;
	}
	.popup-mian-textarea{
		width: 525.69rpx;
		height: 211.81rpx;
	}
	.popup-mian{
		width: 88%;
		display: flex;
		flex-direction: column;
		margin: 5px auto 0px auto;
	}
	.popup-head span:nth-child(2){
		width: 50rpx;
		height: 50rpx;
		line-height: 19px;
		text-align: center;
		font-size: 24px;
		color: #15AB8D;
		border-radius: 50%;
		border: 3px solid #15AB8D;
	}
	.popup-head span:nth-child(1){
		font-weight: bold;
		font-size: 32rpx;
		color: #333333;
	}
	.popup-head{
		width: 100%;
		height: 99.38rpx;
		background-color: rgba(21, 171, 141, 0.09);
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 0 15px;
	}
	.popup-content{
		width: 613rpx;
		height: 479rpx;
		background: #FFFFFF;
		border-radius: 56rpx;
		display: flex;
		flex-direction: column;
	}
	/deep/.btnsH{
		background: #fff !important;
		// border: 1px solid #d7d7d7 !important;
		color: #d7d7d7 !important;
		width: 131rpx !important;
		height: 47rpx !important;
		line-height: 47px !important;
		border-radius: 23rpx !important;
	}
	/deep/.btns{
		background: #fff !important;
		// border: 1px solid #019C88 !important;
		color: #019C88 !important;
		width: 131rpx !important;
		height: 47rpx !important;
		line-height: 47px !important;
		border-radius: 23rpx !important;
	}
	.text-green span:nth-child(1){
		font-weight: 400;
		font-size: 25rpx;
		color: #7D7D7D;
		margin-right: 10px;
	}
	/deep/.margin-top-sm{
		margin-top: 3px;
	}
	.sticky-tabs {
		width: 100%;
		z-index: 990;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 10px;
		position: sticky;
		top: var(--window-top);
		flex-wrap: wrap;
		align-content: flex-start;
		background-color: #fff;
	}
	.sticky-tabs-list image{
		width: 52.08rpx;
		height: 50.69rpx;
	}
	.spanH{
		color: #666;
	}
	.spanL{
		color: #019C88;
	}
	.sticky-tabs-list span{
		font-weight: bold;
		font-size: 26rpx;
		margin-top: 3px;
	}
	.sticky-tabs-list{
		width: 20%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 10px;
		
	}
	/*
	sticky生效条件：
	1、父元素不能overflow:hidden或者overflow:auto属性。(mescroll-body设置:sticky="true"即可, mescroll-uni本身没有设置overflow)
	2、必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
	3、父元素的高度不能低于sticky元素的高度
	4、sticky元素仅在其父元素内生效,所以父元素必须是 mescroll
	*/
	

	// 使用mescroll-uni,则top为0
	.mescroll-uni,
	/deep/.mescroll-uni {
		.sticky-tabs {
			top: 0;
		}
	}

	.demo-tip {
		padding: 18upx;
		font-size: 24upx;
		text-align: center;
	}
	/deep/uni-page-body{
		height: 100%;
		background-color: #F7F7F7;
	}
	page {
		height: 100%;
		background-color: #F7F7F7;
	}

	.bg {
		background-color: #FFFFFF;
	}
</style>