mirror of
https://gitee.com/myxzgzs/boyue_jnpf.git
synced 2025-08-09 07:42:43 +08:00
91 lines
2.1 KiB
Vue
91 lines
2.1 KiB
Vue
|
<template>
|
||
|
|
<view class="notice-warp" :style="{height:noticeWarpH + 'px'}">
|
||
|
|
<view class="search-box" style="background-color: #fff;">
|
||
|
|
<u-search :placeholder="$t('app.apply.pleaseKeyword')" v-model="keyword" height="72" :show-action="false"
|
||
|
|
@change="search" bg-color="#f0f2f6" shape="square" />
|
||
|
|
</view>
|
||
|
|
<CommonTabs class="commonTabs" :list="categoryList" @change="change" :current="current" ref="CommonTabs"
|
||
|
|
:icon="icon" type="doc" @iconClick="iconClick">
|
||
|
|
</CommonTabs>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import mixin from "../mixin.js"
|
||
|
|
import CommonTabs from '@/components/CommonTabs'
|
||
|
|
export default {
|
||
|
|
mixins: [mixin],
|
||
|
|
components: {
|
||
|
|
CommonTabs
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
icon: 'icon-ym icon-ym-thumb-mode',
|
||
|
|
keyword: '',
|
||
|
|
current: 0,
|
||
|
|
categoryList: [{
|
||
|
|
fullName: '我的文档',
|
||
|
|
|
||
|
|
}, {
|
||
|
|
fullName: '我的共享'
|
||
|
|
}, {
|
||
|
|
fullName: '共享给我'
|
||
|
|
}, {
|
||
|
|
fullName: '回收站'
|
||
|
|
}],
|
||
|
|
commonTabs: 0,
|
||
|
|
noticeWarpH: 0
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.getContentHeight()
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
async getContentHeight() {
|
||
|
|
const windowHeight = this.$u.sys().windowHeight;
|
||
|
|
const [commonTabs, searchBox] = await Promise.all([
|
||
|
|
this.$uGetRect('.search-box'),
|
||
|
|
this.$uGetRect('.commonTabs')
|
||
|
|
]);
|
||
|
|
this.commonTabs = commonTabs.height
|
||
|
|
this.searchBox = searchBox.height
|
||
|
|
this.noticeWarpH = this.commonTabs + this.searchBox
|
||
|
|
// #ifdef MP
|
||
|
|
this.$emit('mescrollTop', this.commonTabs + 10)
|
||
|
|
// #endif
|
||
|
|
// #ifndef MP
|
||
|
|
this.$emit('mescrollTop', this.noticeWarpH)
|
||
|
|
// #endif
|
||
|
|
},
|
||
|
|
search() {
|
||
|
|
this.searchTimer && clearTimeout(this.searchTimer);
|
||
|
|
this.searchTimer = setTimeout(() => {
|
||
|
|
this.$emit('search', this.keyword)
|
||
|
|
}, 300);
|
||
|
|
},
|
||
|
|
change(e) {
|
||
|
|
this.current = e;
|
||
|
|
this.keyword = ''
|
||
|
|
this.$emit('change', this.current)
|
||
|
|
},
|
||
|
|
iconClick(e) {
|
||
|
|
this.$emit('iconClick')
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
.notice-warp {
|
||
|
|
z-index: 9;
|
||
|
|
position: fixed;
|
||
|
|
top: var(--window-top);
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 200rpx;
|
||
|
|
/*对应mescroll-body的top值*/
|
||
|
|
font-size: 26rpx;
|
||
|
|
text-align: center;
|
||
|
|
background-color: #fff;
|
||
|
|
}
|
||
|
|
</style>
|