<template>
	<view class="pos-order-list" ref="container">
		<!-- #ifdef MP || APP-PLUS -->
		<NavBar titleText="订单管理" bagColor="#f5f5f5" :iconColor="iconColor" :textColor="iconColor"
			:isScrolling="isScrolling" showBack></NavBar>
		<!-- #endif -->
		<view class="searchCon acea-row">
			<view class="search acea-row row-middle">
				<text class="iconfont icon-ic_search"></text>
				<input class="inputs" placeholder='请输入订单号' placeholder-style="font-size:28rpx" placeholder-class='placeholder' confirm-type='search'
					name="search" v-model="searchListData.orderNo" @confirm="searchSubmit"></input>
			</view>
			<view class="btn" @click="filterShow = true">
				<text class="iconfont icon-a-icon_filter1x"></text>
			</view>
		</view>
		<view :style="{ height: navHeight + 'px' }" v-if="isFixed"></view>
		<!-- #ifdef MP -->
		<view class="nav acea-row row-around row-middle" :style="{
			top:getHeight.barTop+getHeight.barHeight+'px'
		}" id="nav">
		<!-- #endif -->
			<!-- #ifndef MP -->
			<view class="nav acea-row row-around row-middle" id="nav">
			<!-- #endif -->
				<scroll-view scroll-x="true" class="scroll_view">
					<view class="item" :class="state == 'all' ? 'on' : ''" @click="changeStatus('all')">
						全部({{headerArr['all']!=undefined?headerArr['all']:0}})
						<image src="../static/adorn.png" v-if="state == 'all'"></image>
					</view>
					<view class="item" :class="state == 'notShipped' ? 'on' : ''" @click="changeStatus('notShipped')">
						待发货({{headerArr['notShipped']!=undefined?headerArr['notShipped']:0}})
						<image src="../static/adorn.png" v-if="state == 'notShipped'"></image>
					</view>
					<view class="item" :class="state == 'spike' ? 'on' : ''" @click="changeStatus('spike')">
						待收货({{headerArr['spike']!=undefined?headerArr['spike']:0}})
						<image src="../static/adorn.png" v-if="state == 'spike'"></image>
					</view>
					<view class="item" :class="state == 'awaitVerification' ? 'on' : ''"
						@click="changeStatus('awaitVerification')">
						待核销({{headerArr['verification']!=undefined?headerArr['verification']:0}})
						<image src="../static/adorn.png" v-if="state == 'awaitVerification'"></image>
					</view>
					<view class="item" :class="state == 'receiving' ? 'on' : ''" @click="changeStatus('receiving')">
						已收货({{headerArr['receiving']!=undefined?headerArr['receiving']:0}})
						<image src="../static/adorn.png" v-if="state == 'receiving'"></image>
					</view>
					<view class="item" :class="state == 'complete' ? 'on' : ''" @click="changeStatus('complete')">
						已完成({{headerArr['complete']!=undefined?headerArr['complete']:0}})
						<image src="../static/adorn.png" v-if="state == 'complete'"></image>
					</view>
					<view class="item" :class="state == 'refunded' ? 'on' : ''" @click="changeStatus('refunded')">
						已退款({{headerArr['refunded']!=undefined?headerArr['refunded']:0}})
						<image src="../static/adorn.png" v-if="state == 'refunded'"></image>
					</view>
					<view class="item" :class="state == 'deleted' ? 'on' : ''" @click="changeStatus('deleted')">
						已删除({{headerArr['deleted']!=undefined?headerArr['deleted']:0}})
						<image src="../static/adorn.png" v-if="state == 'deleted'"></image>
					</view>
				</scroll-view>
			</view>
			<view class="list" v-if="list.length">
				<view class="item" v-for="(item, index) in list" :key="index">
					<view class="order-num acea-row row-between-wrapper" @click="toDetail(item)">
						<view>
							<view class="title">
								<view class="type">{{orderType[item.type]}}</view>{{ item.orderNo }}
							</view>
						</view>
						<view class="state" v-if="item.refundStatus==3">
							已退款
						</view>
						<view class="state" v-else-if="item.groupBuyRecordStatus===99||item.groupBuyRecordStatus===10|| item.status == 9">
							{{orderStatus[item.status]}}
						</view>
						<view class="state" v-else>
							{{item.groupBuyRecordStatus==0?'拼团中':'拼团失败'}}
						</view>
					</view>
					<view class="pos-order-goods">
						<view class="goods acea-row" @click="toDetail(item)">
							<scroll-view class="picTxt scroll-view" scroll-x="true"
								v-if="item.infoResponseList.length > 1">
								<view class="pictrue" v-for="(val, key) in item.infoResponseList" :key="key">
									<image :src="val.image" />
								</view>
							</scroll-view>
							<view class="picTxt" v-else>
								<view class="acea-row" v-for="(val, key) in item.infoResponseList" :key="key">
									<view class="pictrue">
										<image :src="val.image" />
									</view>
									<view class="text info-text">
										<view class="info line2">
											{{ val.productName }}
										</view>
										<view class="attr">
											{{ val.sku }}
										</view>
									</view>
								</view>
							</view>
							<view class="money">
								<baseMoney :money="item.payPrice" symbolSize="20" integerSize="32" decimalSize="20">
								</baseMoney>
								<view class="num">共{{ item.totalNum }}件</view>
							</view>
						</view>
					</view>
					<view class="operation acea-row row-between-wrapper">
						<view class="more">
						</view>
						<view class="acea-row row-middle">
							<view class="bnt" v-if="item.groupBuyRecordStatus==10||item.groupBuyRecordStatus==99"  @click="modify(item, 1)">订单备注</view>
							<view class="bnt primary" v-if="[1,2].includes(item.status)&&item.refundStatus!=3&&(item.groupBuyRecordStatus==10||item.groupBuyRecordStatus==99)"
								@click="goDelivery(item)">立即发货
							</view>
							<!-- <navigator class="bnt primary" :url="'/pages/admin/logistics/index?orderId='+item.order_id"
								v-if="item._status == 4 && item.delivery_type == 'express'&&item.refundStatus!=3">发货记录
							</navigator> -->
							<view class="bnt primary" v-if="item.status==3&&item.refundStatus!=3&&item.groupBuyRecordStatus==99" @click="verify(item)">
								立即核销</view>
							<view class="bnt primary" v-if="item.status==3&&item.groupBuyRecordStatus==10&&item.refundStatus!=3" @click="verify(item)">
								立即核销</view>
						</view>
					</view>
				</view>
			</view>
			<emptyPage v-else title="暂无订单～" :imgSrc="urlDomain+'crmebimage/presets/noShopper.png'"></emptyPage>
			<Loading :loaded="loaded" :loading="loading"></Loading>
			<PriceChange :change="change" :orderInfo="orderInfo" :isRefund="isRefund"
				v-on:statusChange="statusChange($event)" v-on:closechange="changeclose($event)"
				v-on:savePrice="savePrice" :status="status"></PriceChange>
			<view class="mask" v-if="filterShow" @click="filterShow=!filterShow"></view>
			<!-- #ifdef H5 -->
			<view class="filter-popup" :class="{ on: filterShow }">
			<!-- #endif -->
			<!-- #ifndef H5 -->
			<view class="filter-popup" :class="{ on: filterShow }" :style="{
			top:getHeight.barTop+getHeight.barHeight+'px'}">
			<!-- #endif -->
				<view class="search-box">
					<view class="search acea-row row-middle">
						<text class="iconfont icon-ic_search"></text>
						<input class="input" placeholder='请输入要查询的订单' placeholder-style="font-size:28rpx" placeholder-class='placeholder'
							confirm-type='search' name="search" v-model="searchListData.orderNo"
							@confirm="searchSubmit"></input>
					</view>
				</view>
				<view class="content">
					<view class="item">
						<view class="title">按下单时间</view>
						<view class="acea-row list">
							<view class="cell" v-for="(item, index) in dateList" :key="index"
								:class="{ on: item.val == dateSelected }" @click="dateChange(item.val)">{{ item.label }}
							</view>
						</view>
					</view>
					<view class="item">
						<view class="title">按订单类型</view>
						<view class="acea-row list">
							<view class="cell" v-for="(item, index) in payList" :key="index"
								:class="{ on: item.val === searchListData.type }" @click="payChange(item.val)">
								{{ item.label }}
							</view>
						</view>
					</view>
					<view class="bottom">
						<view class="no_view" @click="resetBtn">重置</view>
						<view class="yes_view" @click="submitBtn">确定</view>
					</view>
				</view>
			</view>
			<view v-if="confirmShow" class="mask"></view>
			<view v-if="confirmShow" class="confirm-popup">
				<view class="title">确认付款</view>
				<view class="info">确认该订单用户已付款</view>
				<view class="acea-row btn-box">
					<view class="btn" @click="confirmShow = false">取消</view>
					<view class="btn primary" @click="offlinePay">确认</view>
				</view>
			</view>
			<view class="footerH"></view>
			<footerPage></footerPage>
		</view>
</template>

<script>
	// import UniDatetime from '../components/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue'
	import Loading from '../components/Loading/index'
	import PriceChange from '../components/PriceChange/index.vue'
	import footerPage from '../components/footerPage/index.vue'
	import countDown from '@/components/countDown/index.vue'
	import emptyPage from '@/components/emptyPage.vue'
	import baseMoney from '../components/BaseMoney.vue'
	// #ifdef MP || APP-PLUS
	import NavBar from '../components/NavBar.vue';
	// #endif
	import {
		isMoney
	} from '@/utils/validate.js';
	import {
		HTTP_REQUEST_URL
	} from '@/config/app';
	import {
		employeeOrderList,
		employeeOrderMark,
		orderStatusNum,
		employeeOrderInfo,
		orderGetVerfication
	} from '@/api/work.js';
	export default {
		name: "AdminOrderList",
		components: {
			Loading,
			PriceChange,
			footerPage,
			countDown,
			emptyPage,
			baseMoney,
			// #ifdef MP || APP-PLUS
			NavBar,
			// #endif
		},
		data() {
			return {
				urlDomain: this.$Cache.get("imgHost"),
				datetimerange: [],
				orderType: ['普通','秒杀','拼团'],
				orderStatus: ['待支付', '待发货', '部分发货', '待核销', '待收货', '已收货', '已完成', '已取消'],
				getHeight: this.$util.getWXStatusHeight(),
				iconColor: '#333333',
				isScrolling: false,
				top: 0,
				navHeight: 0,
				isFixed: false,
				filterShow: false,
				current: "",
				change: false,
				types: 0,
				list: [],
				loaded: false,
				loading: false,
				orderInfo: {},
				status: "",
				state: 'all',
				isRefund: 0, //1是仅退款;0是退货退款
				imgHost: HTTP_REQUEST_URL,
				dateSelected: '1',
				dateList: [{
						label: '全部',
						val: '',
					},
					{
						label: '近1个月',
						val: '2',
					},
					{
						label: '近3个月',
						val: '3',
					},
					{
						label: '近6个月',
						val: '4',
					},
				],
				payList: [
					{
						label: '全部订单',
						val: '',
					},
					{
						label: '普通订单',
						val: 0,
					},
					{
						label: '秒杀订单',
						val: 1,
					},
					{
						label: '拼团订单',
						val: 2,
					}
				],
				confirmOrder: {},
				confirmShow: false,
				searchListData: {
					dateLimit: '',
					limit: 10,
					merId: '',
					orderNo: '',
					page: 1,
					status: 'all',
					type: '',
				},
				headerArr: {},
				totalPage: '',
			};
		},
		onLoad(options) {
			this.state = options.type ? options.type : 'all';
			this.searchListData.status = options.type ? options.type : 'all';
		},
		// created() {
		// 	this.getInitList()
		// 	this.statusHeader()
		// },
		onShow() {
			this.searchListData.page=1
			this.getInitList()
			this.statusHeader()
		},
		methods: {
			//订单表头数量
			statusHeader() {
				orderStatusNum(this.searchListData).then(res => {
					this.headerArr = res.data
				})
			},
			// 订单搜索
			searchSubmit() {
				this.searchListData.page=1
				this.getInitList()
				this.statusHeader()
			},
			//订单列表
			getInitList(type) {
				employeeOrderList(this.searchListData).then(res => {
					//下拉触底
					if (type == 'bottom') {
						this.list = this.list.concat(res.data.list)
					} else {
						this.list = res.data.list
					}
					this.totalPage = res.data.totalPage
				}).catch(err=>{
					this.$util.Tips({
						title: err
					})
				})
			},
			toDetail(item) {
				if(item.groupBuyRecordStatus===0){
					return this.$util.Tips({
						title: '拼团中无法查看详情'
					})
				}else{
					uni.navigateTo({
						url: `/pages/admin/order/detail?orderNo=${item.orderNo}`
					})
				}
			},
			//发送货
			goDelivery(item) {
				uni.navigateTo({
					url: `/pages/admin/order/send?orderNo=${item.orderNo}`
				})
			},
			// 商品操作
			modify: function(item, status, type) {
				this.change = true;
				this.status = status.toString();
				this.orderInfo = item;
				if (status == 2) {
					this.isRefund = type
				}
			},
			//核销
			verify(item) {
				employeeOrderInfo(item.orderNo).then(res => {
					let verifyCode=res.data.verifyCode
					orderGetVerfication({
						verifyCode: res.data.verifyCode
					}).then(res => {
						if (res.code == 200) {
							uni.navigateTo({
								url: `/pages/admin/cancel/list?info=${JSON.stringify(res.data)}&verifyCode=${verifyCode}`
							})
						} else {
							self.$util.Tips({
								title: res.message
							});
						}
					})
				})
			},
			changeclose: function(msg) {
				this.change = msg;
			},
			async savePrice(opt) {
				if (!opt.remark) {
					return this.$util.Tips({
						title: '请输入备注'
					})
				} else {
					this.toMark(this.orderInfo.orderNo, opt.remark)
				}
			},
			//备注
			toMark(orderNo, remark) {
				employeeOrderMark({
					orderNo,
					remark
				}).then(res => {
					res.code == 200 && (this.change = false);
					return this.$util.Tips({
						title: '备注成功'
					})
				})
			},
			// 导航切换
			changeStatus(val) {
				if (this.state != val) {
					this.state = val;
					// this.where.status = val == -1 ? '' : val;
					this.searchListData.status = val
					this.searchListData.page = 1
					this.searchListData={...this.searchListData}
					this.getInitList()
				}
			},
			dateChange(value) {
				const date = new Date();
				let end = date.toLocaleDateString();
				end = end.replaceAll('/', '-')
				let start = '';
				if (value == 1) {
					this.searchListData.dateLimit = ''
					this.dateSelected = value;
					return
				} else if (value == 2) {
					this.searchListData.dateLimit = 'lately30'
				} else if (value == 3) {
					this.searchListData.dateLimit = 'lately90'
				} else if (value == 4) {
					this.searchListData.dateLimit = 'lately180'
				}
				this.dateSelected = value;
			},
			payChange(val) {
				this.searchListData.type = val;
			},
			// 点击确认按钮
			submitBtn() {
				this.filterShow = false;
				this.searchListData.page=1
				this.getInitList()
				this.statusHeader()
			},
			//点击重置按钮
			resetBtn() {
				this.searchListData.orderNo=''
				this.searchListData.dateLimit = ''
				this.searchListData.type = 0;
				this.dateSelected = '1'
			}
		},
		onReachBottom() {
			this.searchListData.page += 1
			this.totalPage >= this.searchListData.page && this.getInitList('bottom')
		}
	}
</script>

<style lang="scss" scoped>
	.pos-order-list {
		padding-bottom: calc(0rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		padding-bottom: calc(0rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/

		/deep/.navbar {
			.content {
				background: #F5F5F5 !important;
			}
		}
	}

	.searchCon {
		padding: 10rpx 20rpx;

		.search {
			flex: 1;
			height: 72rpx;
			padding: 0 32rpx;
			border-radius: 36rpx;
			background: #FFFFFF;

			.iconfont {
				margin-right: 16rpx;
				font-size: 32rpx;
				color: #999999;
			}

			.inputs {
				flex: 1;
				font-size: 28rpx;
				color: #333;
			}

			.placeholder {
				font-size: 26rpx;
				color: #ccc;
			}
		}

		.btn {
			width: 72rpx;
			height: 72rpx;
			border-radius: 50%;
			margin-left: 20rpx;
			background: #FFFFFF;
			text-align: center;

			.iconfont {
				font-size: 32rpx;
				line-height: 72rpx;
				color: #666666;
			}
		}
	}

	.pos-order-list .nav {
		padding: 0 20rpx 0 34rpx;
		position: sticky;
		top: 0;
		left: 0;
		width: 100%;
		background-color: #F5F5F5;
		z-index: 99;

		&.fixed {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			background: #F5F5F5;
		}

		.scroll_view {
			white-space: nowrap;

			.item {
				display: inline-block;
				color: #999999;
			}
		}

		.item {
			position: relative;
			padding: 28rpx 0;
			padding-right: 50rpx;

			image {
				width: 14rpx;
				height: 14rpx;
				display: block;
				position: absolute;
				bottom: 20rpx;
				right: 45rpx;
			}
		}
	}

	.pos-order-list .nav .item.on {
		font-weight: 500;
		font-size: 30rpx;
		color: #2A7EFB;
	}

	.pos-order-list .nav .item.on::after {
		// content: "";
		// position: absolute;
		// bottom: 20rpx;
		// right: -6rpx;
		// width: 28rpx;
		// height: 28rpx;
		// border: 4rpx solid #2A7EFB;
		// border-top-color: transparent;
		// border-left-color: transparent;
		// border-radius: 14rpx;
		// box-sizing: border-box;
	}

	.pos-order-list .list {
		padding: 0 20rpx;
	}

	.pos-order-list .nothing {
		margin-top: 120upx;
		text-align: center;
		color: #cfcfcf;
	}

	.pos-order-list .list .item {
		padding: 32rpx 24rpx;
		border-radius: 24rpx;
		background-color: #fff;

		/deep/.time {
			.title {
				color: #FF7E00;
			}
		}
	}

	.pos-order-list .list .item~.item {
		margin-top: 20rpx;
	}

	.pos-order-list .list .item .order-num {
		font-size: 28rpx;
		line-height: 40rpx;
		color: #333333;

		.title {
			display: flex;

			.type {
				width: 56rpx;
				height: 36rpx;
				border-radius: 4rpx;
				border: 2rpx solid #2A7EFB;
				font-weight: 500;
				font-size: 20rpx;
				color: #2A7EFB;
				text-align: center;
				line-height: 33rpx;
				margin-right: 12rpx;
				margin-top: 2rpx;
			}
		}
	}

	.pos-order-list .list .item .order-num .state {
		color: #FF7E00;
	}

	.pos-order-list .list .item .order-num .state.on {
		font-size: 24rpx;
		width: 180rpx;
		text-align: right;
	}

	.pos-order-list .list .item .order-num .time {
		font-size: 26upx;
		font-weight: normal;
		color: #999;
	}

	.pos-order-list .list .item .operation {}

	.pos-order-list .list .item .operation .more {
		position: relative;
	}

	.pos-order-list .list .item .operation .icon-gengduo {
		font-size: 50upx;
		color: #aaa;
	}

	.pos-order-list .list .item .operation .order .arrow {
		width: 0;
		height: 0;
		border-left: 11upx solid transparent;
		border-right: 11upx solid transparent;
		border-top: 20upx solid #e5e5e5;
		position: absolute;
		left: 15upx;
		bottom: -18upx;
	}

	.pos-order-list .list .item .operation .order .arrow:before {
		content: '';
		width: 0;
		height: 0;
		border-left: 7upx solid transparent;
		border-right: 7upx solid transparent;
		border-top: 20upx solid #fff;
		position: absolute;
		left: -7upx;
		bottom: 0;
	}

	.pos-order-list .list .item .operation .order {
		width: 200upx;
		background-color: #fff;
		border: 1px solid #eee;
		border-radius: 10upx;
		position: absolute;
		top: -100upx;
		z-index: 9;
	}

	.pos-order-list .list .item .operation .order .items {
		height: 77upx;
		line-height: 77upx;
		text-align: center;
	}

	.pos-order-list .list .item .operation .order .items~.items {
		border-top: 1px solid #f5f5f5;
	}

	.pos-order-list .list .item .operation .bnt {
		width: 144rpx;
		height: 56rpx;
		border-radius: 28rpx;
		border: 1rpx solid #CCCCCC;
		text-align: center;
		font-size: 24rpx;
		line-height: 54rpx;
		color: #333333;

		&.primary {
			color: #FFFFFF !important;
			background-color: #2A7EFB !important;
			border-color: #2A7EFB !important;
		}
	}

	.pos-order-list .list .item .operation .bnt~.bnt {
		margin-left: 16rpx;
	}

	.pos-order-list .list .item .operation .wait {
		margin-left: 30rpx;
	}

	.pos-order-goods .goods {
		padding: 26rpx 0;
	}

	.pos-order-goods .goods~.goods {
		border-top: 1px dashed #e5e5e5;
	}

	.pos-order-goods .goods .picTxt {
		flex: 1;
		min-width: 0;
	}

	.pos-order-goods .goods .scroll-view {
		box-sizing: border-box;
		white-space: nowrap;

		.pictrue {
			display: inline-block;

			+.pictrue {
				margin-left: 16rpx;
			}
		}
	}

	.pos-order-goods .goods .picTxt .pictrue {
		width: 136rpx;
		height: 136rpx;
	}

	.pos-order-goods .goods .picTxt .pictrue image {
		width: 100%;
		height: 100%;
		border-radius: 16rpx;
	}

	.pos-order-goods .goods .picTxt .text {
		flex: 1;
		min-width: 0;
		padding-left: 20rpx;
	}

	.pos-order-goods .goods .picTxt .text .info {
		font-size: 28rpx;
		line-height: 40rpx;
		color: #333333;
	}

	.pos-order-goods .goods .picTxt .text .info .label {
		color: #ff4c3c;
	}

	.pos-order-goods .goods .picTxt .text .attr {
		margin-top: 12rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 24rpx;
		line-height: 34rpx;
		color: #999999;
	}

	.pos-order-goods .goods .money {
		padding-left: 16rpx;
		text-align: right;
		font-size: 28upx;
	}

	.pos-order-goods .goods .money .info {
		margin-top: 18rpx;
		font-size: 24rpx;
	}

	.pos-order-goods .goods .money .x-money {
		color: #282828;
	}

	.pos-order-goods .goods .money .num {
		margin-top: 10rpx;
		font-size: 24rpx;
		line-height: 34rpx;
		color: #999999;
	}

	.pos-order-goods .goods .money .y-money {
		color: #999;
		text-decoration: line-through;
	}

	.public-total {
		font-size: 28upx;
		color: #282828;
		border-top: 1px solid #eee;
		height: 92upx;
		line-height: 92upx;
		text-align: right;
		padding: 0 30upx;
		background-color: #fff;
	}

	.public-total .money {
		color: #ff4c3c;
	}

	.filter-popup {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
		width: 100%;
		border-radius: 0 0 32rpx 32rpx;
		background: #FFFFFF;
		transform: translateY(-100%);
		transition: transform 0.3s;

		&.on {
			transform: translateY(0);
		}

		.search-box {
			padding: 10rpx 32rpx;
		}

		.search {
			height: 58rpx;
			padding: 0 32rpx;
			border-radius: 29rpx;
			background: #F5F5F5;
		}

		.iconfont {
			font-size: 28rpx;
			color: #999999;
		}

		.input {
			flex: 1;
			height: 58rpx;
			padding-left: 16rpx;
			font-size: 24rpx;
		}

		.content {
			
			padding: 32rpx 30rpx 48rpx;

			.bottom {
				display: flex;
				margin-top: 40rpx;
				display: flex;
				view {
					width: 332rpx;
					height: 72rpx;
					text-align: center;
					line-height: 72rpx;
					font-weight: 500;
					font-size: 13px;
				}

				.no_view {
					border-radius: 50rpx;
					border: 1px solid #2A7EFB;
					color: #2A7EFB;
				}

				.yes_view {
					background: #2A7EFB;
					border-radius: 50rpx;
					color: #FFFFFF;
					margin-left: 22rpx;
				}
			}
		}

		.item {
			margin-top: 36rpx;

			&:first-child {
				margin-top: 0;
			}
		}

		.title {
			font-size: 28rpx;
			line-height: 40rpx;
			color: #333333;
		}

		.list {
			padding: 0;
			margin-right: -24rpx;
		}

		.cell {
			width: 154rpx;
			height: 56rpx;
			border: 1rpx solid #F5F5F5;
			border-radius: 28rpx;
			margin: 24rpx 24rpx 0 0;
			background: #F5F5F5;
			text-align: center;
			font-size: 24rpx;
			line-height: 54rpx;
			color: #333333;

			&.on {
				border-color: #2A7EFB;
				background: #E9F2FE;
				color: #2A7EFB;
			}
		}
	}

	.footerH {
		height: 110rpx;
		height: calc(110rpx + constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		height: calc(110rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
	}

	.mask {
		z-index: 21;
	}

	.confirm-popup {
		position: fixed;
		top: 50%;
		right: 75rpx;
		left: 75rpx;
		z-index: 21;
		transform: translateY(-50%);
		border-radius: 32rpx;
		background: #FFFFFF;
		text-align: center;

		.title {
			padding: 40rpx 32rpx 0;
			font-weight: 500;
			font-size: 32rpx;
			line-height: 52rpx;
			color: #333333;
		}

		.info {
			padding: 24rpx 40rpx 0;
			font-size: 30rpx;
			line-height: 42rpx;
			color: #666666;
		}

		.btn-box {
			padding: 40rpx;
		}

		.btn {
			flex: 1;
			height: 72rpx;
			border: 1rpx solid #2A7EFB;
			border-radius: 36rpx;
			margin-left: 32rpx;
			font-weight: 500;
			font-size: 26rpx;
			line-height: 70rpx;
			color: #2A7EFB;
			transform: rotateZ(360deg);

			&.primary {
				background: #2A7EFB;
				color: #FFFFFF;
			}
		}
	}
	.info-text{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.icon-a-icon_filter1x{
		font-size: 40rpx !important;
	}
	.filter-popup .search{
	    height: 72rpx;
	}
	/deep/.uni-input-input{
		font-size: 16px !important;
	}
</style>