uniapp使用uni-popup做底部弹出选项（vue3）

效果图

页面代码

xml 复制代码

<!-- 发票筛选弹出框 -->
		<uni-popup ref="popupRef" type="bottom" border-radius="10px 10px 0 0" background-color="#fff">
			<h4 style="text-align: center;margin-bottom: 20px;">发票筛选</h4>
			<h4>发票状态</h4>
			<view class="choose-item">
				<p @click="activeBtn('status',1)" :class="[invoiceForm.status==1?'active':'']">正常</p>
				<p @click="activeBtn('status',2)" :class="[invoiceForm.status==2?'active':'']">已作废</p>
				<p @click="activeBtn('status',3)" :class="[invoiceForm.status==3?'active':'']">已冲红-全额</p>
				<p @click="activeBtn('status',4)" :class="[invoiceForm.status==4?'active':'']">已冲红-部分</p>
			</view>
			<h4>发票使用状态</h4>
			<view class="choose-item">
				<p @click="activeBtn('use',1)" :class="[invoiceForm.use==1?'active':'']">未使用</p>
				<p @click="activeBtn('use',2)" :class="[invoiceForm.use==2?'active':'']">已使用</p>
			</view>
			<h4>发票认证状态</h4>
			<view class="choose-item">
				<p @click="activeBtn('authentication',1)" :class="[invoiceForm.authentication==1?'active':'']">未认证</p>
				<p @click="activeBtn('authentication',2)" :class="[invoiceForm.authentication==2?'active':'']">已认证</p>
			</view>
			<h4>开票起止时间</h4>
			<view class="choose-item time-class">

				<uni-datetime-picker type="date" style="width: 50%" v-model="invoiceForm.starTime">
					<p style="width: 77%;text-align: center;">{{invoiceForm.starTime || "开票开始时间"}}</p>
				</uni-datetime-picker>

				<uni-datetime-picker type="date" style="width: 50%" v-model="invoiceForm.endTime">
					<p style="width: 77%;text-align: center;">{{invoiceForm.endTime || "开票结束时间"}}</p>
				</uni-datetime-picker>
			</view>
			<view class="tow-btn-class">
				<view @click="onreset"
					style="width: 45%;height: 100%;color: #fff;background: #FF8604;border-radius: 10px;line-height: 36px;text-align: center;">
					重置
				</view>
				<view @click="submitBtn"
					style="width: 45%;height: 100%;color: #fff;background: #0087FD;border-radius: 10px;line-height: 36px;text-align: center;">
					确认
				</view>
			</view>
		</uni-popup>

逻辑代码

javascript 复制代码

	const popupRef = ref()
	// 打开弹框的方法-绑在触发的元素上
	const showPopupBtn = () => {
		popupRef.value.open('bottom')
	}
	// 发票筛选
	let invoiceForm = ref({
		status: "",
		use: "",
		authentication: "",
		starTime: "",
		endTime: ""
	})
	// 切换激活状态
	const activeBtn = (type, val) => {
		invoiceForm.value[type] = val
	}
	// 提交
	const submitBtn = () => {
		popupRef.value.close()
	}
	// 重置选项
	const onreset = () => {
		invoiceForm.value.status = ""
		invoiceForm.value.use = ""
		invoiceForm.value.authentication = ""
		invoiceForm.value.starTime = ""
		invoiceForm.value.endTime = ""
	}

css

javascript 复制代码

::v-deep .uni-popup__wrapper {
			padding: 10px 10px 0;
			display: flex;
			flex-direction: column;

			.choose-item {
				display: flex;
				width: 100%;
				margin: 10px 0 30px;

				p {
					width: fit-content;
					padding: 6px 10px;
					border-radius: 10px;
					background: #F1F0F1;
					font-size: 14px;
					margin-right: 7px;
				}

				.active {
					background: #37C2BC;
					color: #fff;
				}
			}

			::v-deep .uni-date-editor {
				display: flex;
				justify-content: center;
			}

			.tow-btn-class {
				width: 100%;
				height: 36px;
				display: flex;
				justify-content: space-around;
				margin-bottom: 30px;
			}
		}