volunteer-4/src/pages-sub/home/major/index.vue

73 lines
2.0 KiB
Vue

<route lang="json5" type="page">
{
style: {
navigationStyle: 'custom',
},
needLogin: true,
}
</route>
<template>
<view class="flex flex-col h-screen">
<Navbar
safeAreaInsetTop
bg-color="transparent"
:bordered="false"
left-arrow
title="查职业"
@click-left="navigatorBack"
content-class="justify-start"
>
<template #title>
<SearchInput placeholder="搜索专业" @confirm="handleChange"></SearchInput>
</template>
</Navbar>
<scroll-view class="flex-1 pb-safe flex flex-col" :scroll-y="true">
<z-tabs
:current="currentTab"
:list="tabsList"
:scrollCount="4"
inactive-color="#BFBFBF"
active-color="#303030"
:bar-style="{ backgroundColor: '#1580FF' }"
:tabsStyle="{ position: 'sticky', top: '0', zIndex: '99' }"
@change="handleTabChange"
v-bind="{} as any"
/>
<MajorList :type="1050" :keyword="searchValue" v-show="currentTab === 0"></MajorList>
<MajorList :type="1070" :keyword="searchValue" v-show="currentTab === 1"></MajorList>
<MajorList :type="1060" :keyword="searchValue" v-show="currentTab === 2"></MajorList>
</scroll-view>
</view>
</template>
<script lang="ts" setup>
import MajorList from './components/MajorList.vue'
import zTabs from '@/pages-sub/uni_modules/z-tabs/components/z-tabs/z-tabs.vue'
import Navbar from '@/pages-sub/components/navbar/Navbar.vue'
import SearchInput from '@/pages-sub/components/input/SearchInput.vue'
const searchValue = ref('')
const navigatorBack = () => {
uni.navigateBack()
}
const handleChange = (value: string) => {
searchValue.value = value
}
const tabsList = ['普通本科', '职教本科', '高职专科']
const currentTab = ref(0)
const handleTabChange = (index: number) => {
currentTab.value = index
}
</script>
<style lang="scss" scoped>
@import '../styles/navbar_search.scss';
@import '@/pages-sub/home/styles/navbar-custom.scss';
</style>