mnsx/user/page/refundAdmin.vue

<template>
	<view class="content">
		<view class="navbar">
			<view v-for="(item, index) in navList" :key="index" class="nav-item"
				:class="{ current: tabCurrentIndex === index }" @click="tabClick(index)">{{ item.text }}</view>
		</view>
		<view class="top-search">
			<input type="number" class="search-key" placeholder="请输入用户手机号码" v-model="userphone" />
			<image src="../../static/icon/search.png" mode="" class="search-logo"></image>
			<view class="search-btn" @click.stop="search">搜索</view>
		</view>
		<swiper :current="tabCurrentIndex" class="swiper-box" duration="300" @change="changeTab"
			:style="{ height: height}">
			<swiper-item class="tab-content" v-for="(tabItem, tabIndex) in navList" :key="tabIndex">
				<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData" :style="{ height: height}">
					<!-- 空白页 -->
					<empty v-if="tabItem.loaded === true && tabItem.orderList.length === 0"></empty>

					<!-- 订单列表 -->
					<view @click="goToOrderDetail(item)" v-for="(item, index) in tabItem.orderList" :key="index"
						class="order-item">
						<view class="i-top b-b">
							<!-- <view class=""></view> -->
							<text class="time">订单编号：{{ item.order_id }}</text>
							<text class="state" style=" color: #901b21; font-size: 26rpx;font-weight: 500; "
								v-if="tabCurrentIndex === 0">待退款</text>
							<text class="state" style=" color: #901b21; " v-else>已退款</text>
							<text v-if="item.status === 4" class="del-btn iconfont icondelete"
								@click="deleteOrder(index)"></text>
						</view>

						<scroll-view v-if="item._info > 1" class="goods-box" scroll-x>
							<view v-for="(goodsItem, goodsIndex) in item._info" :key="goodsIndex" class="goods-item">
								<image class="goods-img" :src="goodsItem.cart_info.productInfo.image" mode="aspectFill">
								</image>
							</view>
						</scroll-view>
						<view class="goods-box-single" v-for="itemt in item._info">
							<image class="goods-img" :src="itemt.cart_info.productInfo.image" mode="scaleToFill">
							</image>
							<view class="right">
								<view class="flex-start">
									<text class="title clamp">{{ itemt.cart_info.productInfo.store_name }}</text>
									<text class="price"
										style="flex-grow: 1;text-align: right;color: #901B21;font-size: 30rpx;font-weight: bold;">
										{{ itemt.cart_info.productInfo.price | moneyNum }}
									</text>
								</view>
								<view class="row flex">
									<!-- <text class="row_title">{{ goodsItem.productInfo.attrInfo ? '商品退款' : '押金退款' }}</text> -->
									<text class="attr-box">x {{ itemt.cart_info.cart_num}}</text>
								</view>
							</view>
						</view>
						<view class="flex">
							
							<view class="price-box">
								<text
									style="color: #901b21;display: inline-block;margin-right: 8rpx;">押金：{{item.deposit}}</text>
								已退还：{{item.deposit_back}}
							</view>
							<view class="price-box" v-if="tabCurrentIndex==0">
								退款金额：
								<text class="price">{{ moneyNum(item.pay_price) }}</text>
							</view>
						</view>
						
						<view class="action-box b-t" v-if="tabCurrentIndex === 0">
							<button @click.stop="backdeposit(item)" class="action-btn">退还押金</button>
							<button @click.stop="agreeRefund(item)" class="action-btn">同意退款</button>
						</view>
					</view>
					<uni-load-more :status="tabItem.loadingType"></uni-load-more>
				</scroll-view>
			</swiper-item>
		</swiper>
		<uni-popup ref="popupagree" class="agree-wrapper">
			<view class="agree">
				<image src="https://zccy.liuniu946.com/static/img/agreebg.png" mode=""></image>
				<view class="tap1">确认同意该笔退款吗？</view>
				<view class="tap2">一旦操作将无法再次退还押金</view>
				<view class="btn-wrapper flex">
					<view @click="cansel">取消</view>
					<view class="tybtn" @click="agree">继续</view>
				</view>
			</view>
		</uni-popup>
		<!-- 押金退款弹窗 -->
		<uni-popup ref="popupadmin" type="center">
			<view class="bind-admin-wappper">
				<view class="title">押金退还</view>
				<view class="admin-item">
					<view class="item-name">订单号</view>
					<view class="item-val"><input type="text" v-model="orderId" placeholder="订单号不能为空" disabled /></view>
				</view>
				<view class="admin-item">
					<view class="item-name">退还金额</view>
					<view class="item-val"><input type="text" v-model="backNum" placeholder="请输入退还金额" /></view>
				</view>
				<view class="btn-wrapper">
					<view class="btn" @click="backClose">取消</view>
					<view class="btn btn1" @click="qrbackDeposit">确定</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import empty from '@/components/empty';
	import {
		orderList,
		orderCancel,
		orderDel,
		orderTake,
		GetAdminOrderList,
		aOrderRefund,
		backDeposit
	} from '@/api/order.js';
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	// import empty from '@/components/empty.vue'
	export default {
		components: {
			uniLoadMore,
			empty,
			uniPopup
		},
		onReady() {
			var _this = this;
			uni.getSystemInfo({
				success: resu => {
					const query = uni.createSelectorQuery();
					query.select('.swiper-box').boundingClientRect();
					query.exec(function(res) {
						console.log(res, 'ddddddddddddd');
						_this.height = resu.windowHeight - res[0].top + 'px';
						console.log('打印页面的剩余高度', _this.height);
					});
				},
				fail: res => {}
			});
		},
		data() {
			return {
				agreeItem: {},
				height: 0,
				// maxheight: 0,
				currentIndex: 0,
				refList: [], //退款列表
				navList: [{
						state: -1,
						text: '待退款',
						loadingType: 'more',
						orderList: [],
						page: 1, //当前页数
						limit: 10
					},
					{
						state: -2,
						text: '已退款',
						loadingType: 'more',
						orderList: [],
						page: 1, //当前页数
						limit: 10 //每次信息条数
					}
				],
				tabCurrentIndex: 0,
				orderId: '',
				backMaxNum: 0,
				backNum: '',
				backIndex: '',
				userphone: '',
				keyword: '',

			};
		},
		filters: {
			moneyNum(value) {
				return +value;
			}
		},
		onLoad(options) {
			/**
			 * 修复app端点击除全部订单外的按钮进入时不加载数据的问题
			 * 替换onLoad下代码即可
			 */
			console.log(options);
			this.isUser = options.isUser;
			console.log(this.isUser);
			this.tabCurrentIndex = +options.state;
			// #ifndef MP
			console.log('dddddddddddddddddddd')
			this.loadData();
			// #endif
			// #ifdef MP
			if (options.state == 0) {
				this.loadData();
			}
			// #endif
		},
		// #ifdef APP-PLUS || H5
		onBackPress(e) {
			uni.switchTab({
				url: '/pages/user/user'
			});
			return true;
		},
		// #endif
		methods: {
			moneyNum(value) {
				return +value;
			},
			// 确认收货
			orderTake(item, index) {
				let obj = this;
				uni.showModal({
					title: '是否确认收货？',
					success: () => {
						orderTake({
								uni: item.order_id
							})
							.then(e => {
								obj.navList[obj.tabCurrentIndex].orderList.splice(index, 1);
								uni.showToast({
									title: '收货成功'
								});
							})
							.catch(e => {
								console.log(e);
							});
					}
				});
			},
			//跳转到订单详情
			goToOrderDetail(e) {
				console.log('dddd')
				uni.navigateTo({
					// url: '/pages/order/orderDetail?id=' + e.order_id
					url: '/user/page/orderDetail?id=' + e.order_id
				});
			},
			// 申请退款
			orderRefund(e) {
				uni.navigateTo({
					url: '/pages/order/orderRefund?id=' + e.order_id
				});
			},
			// 订单支付
			orderPay(e) {
				uni.navigateTo({
					url: '/pages/money/pay?type=1&ordid=' + e.order_id + '&money=' + e.pay_price
				});
			},
			//获取订单列表
			loadData(source) {
				//这里是将订单挂载到tab列表下
				let obj =this
				let index = this.tabCurrentIndex;
				let navItem = this.navList[index];
				let state = navItem.state;
				if (source === 'tabChange' && navItem.loaded === true) {
					//tab切换只有第一次需要加载数据
					return;
				}
				if (navItem.loadingType === 'loading') {
					//防止重复加载
					return;
				}
				if (navItem.loadingType === 'noMore') {
					//防止重复加载
					return;
				}
				// 修改当前对象状态为加载中
				navItem.loadingType = 'loading';
				console.log('jiazai+++++++++++++++')
				GetAdminOrderList({
						status: state,
						page: navItem.page,
						limit: navItem.limit,
						user_phone: obj.keyword
					})
					.then(({
						data
					}) => {
						console.log(data, 'data+++++++++++++++++++++++++++')
						// let arr = data.map(e => {
						// 	let b = this.orderStateExp(e.status);
						// 	e.stateTip = b.stateTip;
						// 	e.stateTipColor = b.stateTipColor;
						// 	return e;
						// });

						let arr = data.map(e => {
							return e
						})
						console.log(data)
						navItem.orderList = navItem.orderList.concat(arr);

						console.log(data.length, 'ddddddddddddddddddd');
						navItem.page++;
						if (navItem.limit == data.length) {
							//判断是否还有数据， 有改为 more， 没有改为noMore
							navItem.loadingType = 'more';
							return;
						} else {
							//判断是否还有数据， 有改为 more， 没有改为noMore
							navItem.loadingType = 'noMore';
							console.log(navItem.loadingType)
						}
						uni.hideLoading();
						this.$set(navItem, 'loaded', true);
					})
					.catch(e => {
						console.log(e);
					});
			},

			//swiper 切换
			changeTab(e) {
				this.tabCurrentIndex = e.target.current;
				this.loadData('tabChange');
			},
			//顶部tab点击
			tabClick(index) {
				this.tabCurrentIndex = index;
			},
			//删除订单
			deleteOrder(index) {
				uni.showLoading({
					title: '请稍后'
				});
				setTimeout(() => {
					this.navList[this.tabCurrentIndex].orderList.splice(index, 1);
					uni.hideLoading();
				}, 600);
			},
			//取消订单
			cancelOrder(item) {
				uni.showModal({
					title: '订单取消',
					content: '是否取消订单？',
					success: e => {
						if (e.confirm) {
							uni.showLoading({
								title: '请稍后'
							});
							orderCancel({
									id: item.order_id
								})
								.then(e => {
									uni.showToast({
										title: '取消成功',
										duration: 2000,
										position: 'top'
									});
								})
								.catch(e => {
									console.log(e);
								});
							//取消订单后删除待付款中该项
							let list = this.navList[this.tabCurrentIndex].orderList;
							let index = list.findIndex(val => val.id === item.id);
							index !== -1 && list.splice(index, 1);
							uni.hideLoading();
						}
					}
				});
			},

			//订单状态文字和颜色
			orderStateExp(state) {
				let stateTip = '',
					stateTipColor = '#fa436a';
				switch (+state) {
					case 0:
						stateTip = '待付款';
						break;
					case 1:
						stateTip = '待发货';
						break;
					case 2:
						stateTip = '待收货';
						break;
					case 3:
						stateTip = '待评价';
						break;
					case 4:
						stateTip = '已完成';
						stateTipColor = '#901b21';
						break;
					case 9:
						stateTip = '订单已关闭';
						stateTipColor = '#909399';
						break;

						//更多自定义
				}
				return {
					stateTip,
					stateTipColor
				};
			},
			agreeRefund(item) {
				this.agreeItem = item
				console.log('同意');
				this.$refs.popupagree.open();
			},
			search() {
				let obj = this
				if (obj.userphone == '') {
					obj.keyword = ''
				} else {
					const reg = /^(\+?0?86-?)?1[\d]\d{9}$/;
					if (!reg.test(obj.userphone)) {
						obj.$api.msg('请填写正确的手机号码');
						return;
					}
				}
				obj.keyword = obj.userphone
				obj.navList[obj.tabCurrentIndex].orderList = []
				obj.navList[obj.tabCurrentIndex].loadingType = 'more'
				obj.navList[obj.tabCurrentIndex].page = 1
				obj.loadData()
			},
			//取消
			cansel() {
				this.$refs.popupagree.close();
			},
			//同意退款
			agree() {
				aOrderRefund({
					order_id: this.agreeItem.order_id,
					price: this.agreeItem.pay_price * 1,
					type: 1,
				}).then(res => {
					console.log(res)
					this.$api.msg('退款成功')
					let s = this.navList[this.tabCurrentIndex].orderList.indexOf(this.agreeItem);
					this.navList[this.tabCurrentIndex].orderList.splice(s, 1);
				}).catch(err => {
					console.log(err)
				})
				this.$refs.popupagree.close();
			},
			// 打开退还押金弹窗
			backdeposit(item) {
				let obj = this
				obj.orderId = item.order_id
				obj.backMaxNum = item.deposit * 1 - item.deposit_back * 1
				this.$refs.popupadmin.open()
				obj.backIndex = obj.navList[obj.tabCurrentIndex].orderList.indexOf(item)
				console.log(item, 'ddddddddddddddddddddd', obj.backIndex)
			},
			// 关闭退还押金弹窗
			backClose() {
				let obj = this
				obj.$refs.popupadmin.close()
				obj.orderId = ''
				obj.backMaxNum = ''
				obj.backNum = ''
			},
			// 确认退还押金
			qrbackDeposit() {
				let obj = this
				if (obj.backNum == '') {
					obj.$api.msg('请输入退还押金')
					return
				}
				if (obj.backNum * 1 > obj.backMaxNum * 1) {
					obj.$api.msg('退还金额大于押金')
					return
				}
				if (obj.orderId == '') {
					obj.$api.msg('请选择订单')
					return
				}

				backDeposit({
					order_id: obj.orderId,
					refund_price: obj.backNum
				}).then(res => {
					uni.showToast({
						title: '退还成功',
						duration: 2000
					});
					console.log(res)
					obj.navList[obj.tabCurrentIndex].orderList[obj.backIndex].deposit_back = obj.backNum * 1 +
						obj.navList[obj.tabCurrentIndex].orderList[obj.backIndex]
						.deposit_back * 1
					obj.$refs.popupadmin.close()
					obj.orderId = ''
					obj.backMaxNum = ''
					obj.backNum = ''
				})

			},
		}
	};
</script>

<style lang="scss" scoped>
	page,
	.content {
		background: $page-color-base;
		height: 100%;
	}

	.swiper-box {
		height: calc(100% - 40px);
	}

	.list-scroll-content {
		height: 100%;
	}

	.navbar {
		display: flex;
		height: 40px;
		padding: 0 5px;
		background: #fff;
		box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
		position: relative;
		z-index: 10;

		.nav-item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 15px;
			color: $font-color-dark;
			position: relative;

			&.current {
				color: $base-color;

				&:after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 44px;
					height: 0;
					border-bottom: 2px solid $base-color;
				}
			}
		}
	}

	.uni-swiper-item {
		height: auto;
	}

	.order-item {
		display: flex;
		flex-direction: column;
		padding-left: 30rpx;
		background: #fff;
		margin-top: 16rpx;

		.i-top {
			display: flex;
			align-items: center;
			height: 80rpx;
			padding-right: 30rpx;
			font-size: $font-base;
			color: $font-color-dark;
			position: relative;

			.time {
				flex: 1;
			}

			.state {
				color: $base-color;
			}

			.del-btn {
				padding: 10rpx 0 10rpx 36rpx;
				font-size: $font-lg;
				color: $font-color-light;
				position: relative;

				&:after {
					content: '';
					width: 0;
					height: 30rpx;
					border-left: 1px solid $border-color-dark;
					position: absolute;
					left: 20rpx;
					top: 50%;
					transform: translateY(-50%);
				}
			}
		}

		/* 多条商品 */
		.goods-box {
			height: 160rpx;
			padding: 20rpx 0;
			white-space: nowrap;

			.goods-item {
				width: 120rpx;
				height: 120rpx;
				display: inline-block;
				margin-right: 24rpx;
			}

			.goods-img {
				display: block;
				width: 100%;
				height: 100%;
			}
		}

		/* 单条商品 */
		.goods-box-single {
			display: flex;
			padding: 20rpx 0;

			.goods-img {
				display: block;
				width: 120rpx;
				height: 120rpx;
			}

			.right {
				flex: 1;
				display: flex;
				flex-direction: column;
				padding: 0 30rpx 0 24rpx;
				overflow: hidden;

				.row {
					margin-top: 10rpx;
					justify-content: flex-end;
				}

				.row_title {
					padding: 5rpx 10rpx;
					background-color: #dddddd;
					border-radius: 10rpx;
					font-size: 22rpx;
					color: #ffffff;
					background: #ffeee9;
					border-radius: 5rpx;
					color: #f55e5c;
				}

				.title {
					font-size: $font-base + 2rpx;
					color: $font-color-dark;
					line-height: 1;
					width: 80%;
				}

				.attr-box {
					display: flex;
					justify-content: flex-end;
					font-size: $font-sm + 2rpx;
					color: $font-color-light;
				}

				.price {
					display: inline;
					font-size: $font-base + 2rpx;
					color: $font-color-dark;

					&:before {
						content: '￥';
						font-size: $font-sm;
					}
				}
			}
		}

		.price-box {
			display: flex;
			justify-content: flex-end;
			align-items: baseline;
			padding: 20rpx 30rpx;
			font-size: $font-sm + 2rpx;
			color: $font-color-light;

			.num {
				margin: 0 8rpx;
				color: $font-color-dark;
			}

			.price {
				font-size: 26rpx;
				color: #333;

				&:before {
					content: '￥';
					font-size: $font-sm;
					margin: 0 2rpx 0 8rpx;
				}
			}
		}

		.action-box {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			height: 100rpx;
			position: relative;
			padding-right: 30rpx;
		}

		.action-btn {
			display: inline-block;
			// width: 150rpx;
			height: 48rpx;
			background: linear-gradient(90deg, #962c32, #942026);
			border-radius: 24rpx;
			// width: 160rpx;
			// height: 60rpx;
			margin: 0;
			margin-left: 24rpx;
			// padding: 0;
			text-align: center;
			line-height: 48rpx;
			font-size: 26rpx;
			color: #fff;

			// background: #fff;
			// border-radius: 100px;
			&:after {
				border-radius: 100px;
			}

			&.recom {
				color: $base-color;

				&:after {
					border-color: $base-color;
				}
			}

			&.evaluate {
				color: $color-yellow;

				&:after {
					border-color: $color-yellow;
				}
			}
		}
	}

	/* load-more */
	.uni-load-more {
		display: flex;
		flex-direction: row;
		height: 80rpx;
		align-items: center;
		justify-content: center;
	}

	.uni-load-more__text {
		font-size: 28rpx;
		color: #999;
	}

	.uni-load-more__img {
		height: 24px;
		width: 24px;
		margin-right: 10px;
	}

	.uni-load-more__img>view {
		position: absolute;
	}

	.uni-load-more__img>view view {
		width: 6px;
		height: 2px;
		border-top-left-radius: 1px;
		border-bottom-left-radius: 1px;
		background: #999;
		position: absolute;
		opacity: 0.2;
		transform-origin: 50%;
		animation: load 1.56s ease infinite;
	}

	.uni-load-more__img>view view:nth-child(1) {
		transform: rotate(90deg);
		top: 2px;
		left: 9px;
	}

	.uni-load-more__img>view view:nth-child(2) {
		transform: rotate(180deg);
		top: 11px;
		right: 0;
	}

	.uni-load-more__img>view view:nth-child(3) {
		transform: rotate(270deg);
		bottom: 2px;
		left: 9px;
	}

	.uni-load-more__img>view view:nth-child(4) {
		top: 11px;
		left: 0;
	}

	.load1,
	.load2,
	.load3 {
		height: 24px;
		width: 24px;
	}

	.load2 {
		transform: rotate(30deg);
	}

	.load3 {
		transform: rotate(60deg);
	}

	.load1 view:nth-child(1) {
		animation-delay: 0s;
	}

	.load2 view:nth-child(1) {
		animation-delay: 0.13s;
	}

	.load3 view:nth-child(1) {
		animation-delay: 0.26s;
	}

	.load1 view:nth-child(2) {
		animation-delay: 0.39s;
	}

	.load2 view:nth-child(2) {
		animation-delay: 0.52s;
	}

	.load3 view:nth-child(2) {
		animation-delay: 0.65s;
	}

	.load1 view:nth-child(3) {
		animation-delay: 0.78s;
	}

	.load2 view:nth-child(3) {
		animation-delay: 0.91s;
	}

	.load3 view:nth-child(3) {
		animation-delay: 1.04s;
	}

	.load1 view:nth-child(4) {
		animation-delay: 1.17s;
	}

	.load2 view:nth-child(4) {
		animation-delay: 1.3s;
	}

	.load3 view:nth-child(4) {
		animation-delay: 1.43s;
	}

	@-webkit-keyframes load {
		0% {
			opacity: 1;
		}

		100% {
			opacity: 0.2;
		}
	}

	.agree-wrapper {
		.agree {
			width: 522rpx;
			height: 605rpx;
			background: #ffffff;
			border-radius: 20rpx;
			text-align: center;

			image {
				width: 522rpx;
				height: 307rpx;
				// background: linear-gradient(90deg, #962C32, #942026);
				border-radius: 20rpx;
			}

			.tap1 {
				padding-top: 47.5rpx;
				font-size: 36rpx;
				font-weight: 500;
				color: #333333;
				line-height: 1;
			}

			.tap2 {
				padding-top: 22rpx;
				font-size: 30rpx;
				font-weight: 500;
				color: #999999;
				line-height: 1;
			}

			.btn-wrapper {
				padding-top: 55.5rpx;
				justify-content: center;

				view {
					width: 197rpx;
					height: 61rpx;
					border: 1px solid #901b21;
					border-radius: 31px;
					background: #ffffff;
					font-size: 24rpx;
					font-weight: 500;
					color: #901b21;
					line-height: 61rpx;
				}

				.tybtn {
					margin-left: 22.8rpx;
					color: #fff;
					background-color: #901b21;
				}
			}
		}
	}

	.bind-admin-wappper {
		width: 600rpx;
		height: 682rpx;
		border-radius: 20rpx;
		background-color: #fff;

		.title {
			padding-top: 70rpx;
			font-size: 42rpx;
			text-align: center;
			font-family: PingFang SC;
			font-weight: 500;
			color: #901b21;
		}

		.admin-item {
			.item-name {
				padding-top: 55rpx;
				padding-bottom: 20rpx;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				padding-left: 68rpx;
			}

			.item-val {
				width: 470rpx;
				height: 70rpx;
				line-height: 70rpx;
				margin: 0 auto;
				background: #ffffff;
				border: 1px solid #999999;
				border-radius: 6px;
				outline: none;

				input {
					padding-left: 20rpx;
					display: block;
					height: 70rpx;
					line-height: 70rpx;
				}
			}
		}

		.btn-wrapper {
			margin-top: 60rpx;
			display: flex;
			justify-content: space-between;
			height: 50rpx;
			padding: 0 65rpx;

			.btn {
				// margin-right: 22rpx;
				text-align: center;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				line-height: 70rpx;
				color: #666666;
				width: 224rpx;
				height: 70rpx;
				border-radius: 6rpx;
				border: 1px solid #999999;
			}

			.btn1 {
				color: #fff;
				background-color: #901b21;
			}
		}
	}
	.top-search {
		width: 750rpx;
		height: 100rpx;
		// padding-top: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	
		.search-key {
			width: 700rpx;
			height: 70rpx;
			padding-left: 100rpx;
			background: #FFFFFF;
			box-shadow: 0px 1rpx 21rpx 0px rgba(144, 27, 33, 0.12);
			border-radius: 35rpx;
			position: relative;
		}
	
		.search-logo {
			width: 36rpx;
			height: 36rpx;
			position: absolute;
			top: 0;
			bottom: 0;
			left: 50rpx;
			margin: auto;
		}
	
		.search-btn {
			width: 150rpx;
			height: 70rpx;
			border-radius: 30rpx;
			color: rgb(144, 27, 33);
			text-align: center;
			line-height: 70rpx;
			position: absolute;
			top: 0;
			bottom: 0;
			right: 10rpx;
			margin: auto;
			// background-color: red;
			z-index: 9;
		}
	}
</style>