132 lines
3.1 KiB
Vue
132 lines
3.1 KiB
Vue
<template>
|
|
<view class="msg_l_wrapper" :class="{ active: visible }">
|
|
<view class="zd-row header">
|
|
<span class="page_name">搜索</span>
|
|
<uni-icons type="closeempty" size="20" @tap="handleClose"></uni-icons>
|
|
</view>
|
|
<view class="search-container">
|
|
<view class="mgb40" v-for="e in conditions" :key="e.label">
|
|
<view class="fil_name">{{e.label}}<span v-show="e.required" style="color: #D7592F;font-weight: 700;">*</span></view>
|
|
<view v-if="e.key === 'scan'">
|
|
<search-box v-model="e.value"
|
|
/>
|
|
</view>
|
|
</view>
|
|
<slot></slot>
|
|
</view>
|
|
<view class="zd-row submitbar">
|
|
<view class="zd-col-4">
|
|
<button class="btn-submit btn-cancle" @tap="handleClear">全部清除</button>
|
|
</view>
|
|
<view class="zd-col-4">
|
|
<button class="btn-submit btn-success" @tap="handleSearch">查询</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import SearchBox from '@/components/SearchBox.vue'
|
|
export default {
|
|
components: {
|
|
SearchBox
|
|
},
|
|
props: {
|
|
conditions: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
visible: false
|
|
};
|
|
},
|
|
methods: {
|
|
init () {
|
|
this.visible = true
|
|
},
|
|
handleClose () {
|
|
uni.setNavigationBarColor({
|
|
frontColor: '#000000', // 导航栏文字颜色，只能是 '#ffffff' 或 '#000000'
|
|
backgroundColor: '#d7592f', // 导航栏背景颜色
|
|
animation: {
|
|
duration: 300, // 动画持续时间（毫秒）
|
|
timingFunc: 'ease-in-out' // 动画效果
|
|
}
|
|
});
|
|
this.visible = false
|
|
},
|
|
handleClear () {
|
|
this.$emit('clear')
|
|
},
|
|
handleSearch () {
|
|
this.$emit('search')
|
|
this.handleClose()
|
|
},
|
|
filterResults(key) {
|
|
// 根据条件过滤结果
|
|
const query = this.conditions.find((c) => c.key === key).value;
|
|
this.searchResults = this.filterData(query, key);
|
|
},
|
|
filterData(query, key) {
|
|
// 模拟数据过滤逻辑
|
|
const allItems = ['苹果', '香蕉', '橙子', '葡萄', '西瓜']; // 示例数据
|
|
return allItems.filter((item) => item.includes(query));
|
|
},
|
|
search() {
|
|
this.$emit('search', this.conditions);
|
|
this.$emit('update:visible', false); // 隐藏弹窗
|
|
},
|
|
selectItem(item) {
|
|
this.$emit('select', item);
|
|
this.searchQuery = item;
|
|
this.searchResults = [];
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="stylus" scoped>
|
|
@import '@/common/style/mixin.styl';
|
|
.msg_l_wrapper
|
|
position: fixed;
|
|
top: 0;
|
|
right: -100%;
|
|
width: 100%;
|
|
padding: 14rpx;
|
|
z-index: 301;
|
|
transition: all .3s;
|
|
height: calc(100% - var(--status-bar-height));
|
|
background-color: #ffffff;
|
|
overflow: auto;
|
|
transition: right 0.3s ease;
|
|
.msg_l_wrapper.active {
|
|
right: 0;
|
|
}
|
|
.header
|
|
position absolute
|
|
top 0
|
|
left 0
|
|
z-index: 301;
|
|
_wh(100%, calc(var(--status-bar-height) + 88rpx))
|
|
padding var(--status-bar-height) 20rpx 0 20rpx
|
|
background-color #fff
|
|
border-bottom 1px solid #f6f6f6
|
|
.page_name
|
|
_font(32rpx, 32rpx, #000,700,center)
|
|
.fil_name
|
|
line-height: 80rpx;
|
|
font-size: 28rpx;
|
|
color: #323232;
|
|
.submitbar
|
|
position absolute
|
|
z-index: 301;
|
|
background-color: #fff;
|
|
padding: 20rpx 28rpx;
|
|
box-shadow: none;
|
|
border-top 1px solid #f6f6f6
|
|
.search-container
|
|
width 100%
|
|
padding calc(var(--status-bar-height) + 108rpx) 28rpx 120rpx 28rpx;
|
|
</style> |