123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348 |
- <template>
- <div
- class="category-container">
- <!--模拟搜索-->
- <div class="jump-search">
- <van-search
- :shape="'round'"
- v-model="searchValue"
- placeholder="搜索商品标题 领优惠券拿返现"/>
- <router-link
- :to="{name: 'Search'}">去搜索页
- </router-link>
- </div>
- <!--商家-->
- <div class="business-list">
- <van-tabs
- v-model="businessValue"
- :color="'#ee0a24'"
- :title-active-color="'#FFF'"
- :title-inactive-color="'#8A8A8A'"
- :background="'#fff'"
- @click="fetchCateList"
- ref="fbtBusinessList">
- <van-tab
- :name="item.value"
- v-for="item in sourceList"
- :key="item.value">
- <template #title>
- <i>{{ item.name }}</i>
- </template>
- </van-tab>
- </van-tabs>
- </div>
- <!--分类-->
- <div
- class="cate-header">
- <van-tabs
- v-model="catId"
- :color="'#F09E38'"
- :title-active-color="'#333333'"
- :title-inactive-color="'#515151'"
- :background="'#fff'"
- @click="selectCateId"
- ref="fbtCateList">
- <van-tab
- :name="item.id"
- v-for="item in cateList"
- :key="item.id">
- <template #title>{{ item.name }}</template>
- </van-tab>
- </van-tabs>
- <van-dropdown-menu
- class="fbt-van-dropdown-menu">
- <van-dropdown-item
- ref="fbtCateDropdownMenu">
- <template #title>
- <van-icon name="arrow-down"/>
- </template>
- <ul>
- <li
- :class="{'active': item.id === catId}"
- v-for="item in cateList"
- :key="item.id"
- @click="onConfirm(item)">{{ item.name }}
- </li>
- </ul>
- </van-dropdown-item>
- </van-dropdown-menu>
- </div>
- <!--商品列表-->
- <Main
- :source="this.businessValue"
- :catId="catId"
- ref="myMain"/>
- </div>
- </template>
- <script>
- import { Tab, Tabs, DropdownMenu, DropdownItem, Icon, Toast, Search } from 'vant'
- import Main from './child/main'
- import { apiCateList } from './api/api'
- export default {
- name: 'index',
- components: {
- 'van-tabs': Tabs,
- 'van-tab': Tab,
- 'van-dropdown-menu': DropdownMenu,
- 'van-dropdown-item': DropdownItem,
- 'van-icon': Icon,
- 'van-search': Search,
- Main
- },
- data () {
- return {
- searchValue: '',
- sourceList: [
- {
- name: '京东',
- value: 'jd'
- },
- {
- name: '唯品会',
- value: 'vip'
- },
- {
- name: '拼多多',
- value: 'pdd'
- },
- {
- name: '考拉',
- value: 'kaola'
- },
- {
- name: '淘宝',
- value: 'taobao'
- }
- ], // 商家列表
- businessValue: 'jd',
- catId: '',
- cateList: [], // 分类列表
- numPositionY: 0 // BS纵轴坐标
- }
- },
- activated () {
- if (!this.$route.meta.isUseCache) {
- this.searchValue = ''
- this.businessValue = this.sourceList[0].value
- this.catId = ''
- this.numPositionY = 0
- this.fetchCateList()
- } else {
- this.$nextTick(() => {
- if (this.$refs.myMain.scroll) {
- this.$refs.myMain.scroll.refresh()
- this.$refs.myMain.scroll.scrollTo(0, this.numPositionY)
- }
- })
- }
- setTimeout(() => {
- this.$refs.fbtBusinessList.resize()
- }, 500)
- this.$route.meta.isUseCache = false
- },
- methods: {
- async fetchCateList () {
- try {
- const { status, data, msg } = await apiCateList(this.businessValue)
- if (status) {
- this.cateList = data
- setTimeout(() => {
- this.$refs.fbtCateList.resize()
- this.$refs.myMain.init()
- }, 500)
- } else {
- Toast(msg)
- }
- } catch (e) {}
- },
- selectCateId () {
- this.$nextTick(() => {
- this.$refs.myMain.init()
- })
- },
- onConfirm (obj) {
- this.catId = obj.id
- this.$nextTick(() => {
- this.$refs.fbtCateDropdownMenu.toggle()
- this.$refs.myMain.init()
- })
- }
- },
- beforeRouteLeave (to, from, next) {
- if (['CategoryDetail'].findIndex(item => item === to.name) > -1) {
- from.meta.isUseCache = true
- }
- this.numPositionY = this.$refs.myMain.scroll ? this.$refs.myMain.scroll.y : 0
- next()
- }
- }
- </script>
- <style lang="scss" scoped>
- .category-container {
- position: absolute;
- left: 0;
- top: 0;
- right: 0;
- bottom: 50px;
- width: 100%;
- }
- .jump-search {
- ::v-deep .van-search {
- padding-bottom: 0;
- input {
- &::-webkit-input-placeholder {
- -webkit-text-fill-color: #999;
- opacity: 1;
- color: #999;
- }
- }
- }
- position: relative;
- left: 0;
- top: 0;
- overflow: hidden;
- a {
- position: absolute;
- left: 12px;
- top: 10px;
- right: 12px;
- bottom: 0;
- opacity: 0;
- }
- }
- .business-list {
- position: relative;
- left: 0;
- top: 0;
- width: 100%;
- ::v-deep .van-tabs__nav--line {
- .van-tab {
- width: 75px;
- padding: 0;
- &--active {
- .van-tab__text {
- background: #EA483F !important;;
- }
- }
- .van-tab__text {
- display: flex;
- align-items: center;
- justify-content: center;
- width: 67px;
- height: 23px;
- padding: 0 12px;
- background: #F3F3F3;
- border-radius: 12px;
- img {
- width: 16px;
- height: 16px;
- margin-right: 3px;
- }
- i {
- font-size: 11px;
- color: inherit;
- white-space: nowrap;
- text-overflow: ellipsis;
- overflow: hidden;
- }
- }
- }
- .van-tabs__line {
- display: none;
- }
- }
- }
- .cate-header {
- position: relative;
- left: 0;
- top: 0;
- width: 100%;
- ::v-deep .van-tabs {
- width: calc(100% - 42px);
- .van-tabs__nav--line {
- .van-tab {
- &--active {
- .van-tab__text {
- font-size: 16px !important;
- font-weight: bold;
- }
- }
- .van-tab__text {
- font-size: 13px;
- }
- }
- }
- }
- .fbt-van-dropdown-menu {
- position: absolute;
- right: 0;
- top: 0;
- width: 42px;
- height: 100%;
- ::v-deep .van-dropdown-menu__bar {
- height: 100%;
- box-shadow: none;
- .van-dropdown-menu__title {
- &::after {
- visibility: hidden;
- }
- }
- }
- ul {
- display: flex;
- flex-flow: row wrap;
- align-content: flex-start;
- width: 375px;
- min-height: 177px;
- background: #F8F8F8;
- padding: 12px 0 2px;
- li {
- width: 75px;
- height: 24px;
- margin-left: 15px;
- margin-bottom: 10px;
- border-radius: 12px;
- color: #515151;
- background: #ECECEC;
- font-size: 12px;
- line-height: 24px;
- text-align: center;
- white-space: nowrap;
- text-overflow: ellipsis;
- overflow: hidden;
- &.active {
- color: #FFFFFF;
- background: #EA483F;
- }
- }
- }
- }
- }
- </style>
|