效果图

页面代码

<!-- 发票筛选弹出框 --><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>

逻辑代码

	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

::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;}}