123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201 |
- <template>
- <div>
- <form
- class="fbt-form"
- action="/">
- <van-search
- v-model="searchValue"
- show-action
- :shape="'round'"
- placeholder="搜索商品标题 领优惠券拿返现"
- @search="onSearch">
- <template #action>
- <div
- class="btn"
- @click="onSearch">搜索
- </div>
- </template>
- </van-search>
- </form>
- <!--商家-->
- <div
- class="business-list">
- <van-tabs
- v-model="businessValue"
- :color="'#F09E38'"
- :title-active-color="'#333333'"
- :title-inactive-color="'#515151'"
- :background="'#fff'"
- @click="fetchGoodsList"
- ref="fbtCateList">
- <van-tab
- :name="item.value"
- v-for="item in sourceList"
- :key="item.value">
- <template #title>选项</template>
- </van-tab>
- </van-tabs>
- </div>
- <ul class="filter-wrap border-top-1px">
- <li
- :class="{'active': condition === item.value}"
- v-for="item in filterList"
- :key="item.value"
- @click="condition = item.value">选项
- </li>
- <li
- @click="showType = showType === 1 ? 2 : 1">
- <span
- :class="['shopfont', showType === 1 ? 'shopfont-liebiao' : 'shopfont-shuangliebiao']"></span>
- </li>
- </ul>
- </div>
- </template>
- <script>
- import { Search, Tabs, Tab } from 'vant'
- export default {
- name: 'index',
- components: {
- 'van-search': Search,
- 'van-tabs': Tabs,
- 'van-tab': Tab
- },
- data () {
- return {
- searchValue: '',
- sourceList: [
- {
- name: '京东',
- value: 'jd'
- },
- {
- name: '唯品会',
- value: 'vip'
- },
- {
- name: '拼多多',
- value: 'pdd'
- },
- {
- name: '考拉',
- value: 'kaola'
- },
- {
- name: '淘宝',
- value: 'taobao'
- }
- ], // 商家列表
- // 1-综合排序,2-价格升序,3-销量降序 默认1
- filterList: [
- {
- name: '综合',
- value: 1
- },
- {
- name: '销量',
- value: 2
- },
- {
- name: '价格',
- value: 3
- }
- ],
- businessValue: 'jd',
- condition: 1,
- showType: 1 // 列表展示方式
- }
- },
- activated () {
- if (!this.$route.meta.isUseCache) {
- } else {}
- setTimeout(() => {
- this.$refs.fbtCateList.resize()
- }, 500)
- this.$route.meta.isUseCache = false
- },
- methods: {
- onSearch (val) {
- console.log(val)
- },
- fetchGoodsList () {}
- }
- }
- </script>
- <style lang="scss" scoped>
- .fbt-form {
- ::v-deep .van-search {
- padding-bottom: 0;
- .van-cell {
- align-items: center;
- input {
- color: #333;
- -webkit-text-fill-color: #333;
- opacity: 1;
- &::-webkit-input-placeholder {
- -webkit-text-fill-color: #999;
- opacity: 1;
- color: #999;
- }
- }
- }
- }
- .btn {
- font-size: 16px;
- color: #333;
- }
- }
- .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;
- }
- }
- }
- }
- }
- .filter-wrap {
- display: flex;
- align-items: center;
- background: #fff;
- @include border-top-1px(#eee);
- li {
- flex: 1;
- line-height: 40px;
- font-size: 14px;
- color: #999;
- text-align: center;
- &.active {
- font-weight: bolder;
- color: #333;
- }
- }
- }
- </style>
|