|
|
@@ -0,0 +1,426 @@
|
|
|
+<template>
|
|
|
+ <van-pull-refresh
|
|
|
+ class="search"
|
|
|
+ success-text="加载成功"
|
|
|
+ success-duration="1000"
|
|
|
+ :style="{ backgroundColor: isSearch ? $colors.bg3 : $colors.bg }"
|
|
|
+ v-model="isLoading"
|
|
|
+ @refresh="onRefresh"
|
|
|
+ >
|
|
|
+ <van-sticky ref="top" class="list-top" :offset-top="bar.value && bar.value.show ? 46 : 0">
|
|
|
+ <van-search
|
|
|
+ ref="top"
|
|
|
+ shape="round"
|
|
|
+ v-model="search"
|
|
|
+ placeholder="请输入"
|
|
|
+ show-action
|
|
|
+ autofocus
|
|
|
+ :left-icon="require('@assets/svgs/icon-sosuo.svg')"
|
|
|
+ @search="getSearch"
|
|
|
+ >
|
|
|
+ <template #action>
|
|
|
+ <div v-if="!isSearch" @click="getSearch(search)">搜索</div>
|
|
|
+ <div v-else @click="onCancel">取消</div>
|
|
|
+ </template>
|
|
|
+ </van-search>
|
|
|
+ <van-tabs
|
|
|
+ v-if="isSearch"
|
|
|
+ v-model:active="sort"
|
|
|
+ :ellipsis="false"
|
|
|
+ line-width="16"
|
|
|
+ line-height="2"
|
|
|
+ @click-tab="changeTab"
|
|
|
+ :class="{ trans: source == 'TRANSFER' }"
|
|
|
+ >
|
|
|
+ <van-tab
|
|
|
+ :title="item.label"
|
|
|
+ :name="item.value"
|
|
|
+ :title-class="item.type === 'select' && sortDes ? sortDes : ''"
|
|
|
+ :key="index"
|
|
|
+ :lazy-render="false"
|
|
|
+ v-for="(item, index) in selectOptions"
|
|
|
+ >
|
|
|
+ <template v-if="item.type === 'select'" #title>
|
|
|
+ <div class="tab">
|
|
|
+ <span>{{ item.label }}</span>
|
|
|
+ <van-icon size="8" name="arrow-up" />
|
|
|
+ <van-icon size="8" name="arrow-down" />
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </van-tab>
|
|
|
+ </van-tabs>
|
|
|
+ <!-- <van-checkbox
|
|
|
+ v-if="isSearch && source == 'TRANSFER' && !title"
|
|
|
+ @change="getData(true)"
|
|
|
+ class="sala"
|
|
|
+ v-model="salable"
|
|
|
+ >仅看在售</van-checkbox
|
|
|
+ > -->
|
|
|
+
|
|
|
+ <van-button
|
|
|
+ @click="changeSort"
|
|
|
+ v-if="isSearch && source == 'TRANSFER' && !title"
|
|
|
+ class="sala"
|
|
|
+ color="#F5F7FA"
|
|
|
+ type="primary"
|
|
|
+ size="small"
|
|
|
+ icon="arrow-down"
|
|
|
+ icon-position="right"
|
|
|
+ round
|
|
|
+ >{{ salable ? '在售中' : salable === false ? '仅展示' : '综合排序' }}</van-button
|
|
|
+ >
|
|
|
+ </van-sticky>
|
|
|
+
|
|
|
+ <van-action-sheet
|
|
|
+ v-model:show="showAction"
|
|
|
+ @select="selectAction"
|
|
|
+ :actions="actions"
|
|
|
+ cancel-text="取消"
|
|
|
+ close-on-click-action
|
|
|
+ />
|
|
|
+ <van-list
|
|
|
+ class="list"
|
|
|
+ v-model:loading="loading"
|
|
|
+ :immediate-check="false"
|
|
|
+ :finished="finished"
|
|
|
+ finished-text=""
|
|
|
+ @load="getData"
|
|
|
+ v-if="isSearch"
|
|
|
+ >
|
|
|
+ <template v-for="(item, index) in list" :key="index">
|
|
|
+ <auction-info v-model:info="list[index]"></auction-info>
|
|
|
+ </template>
|
|
|
+ <van-empty v-if="empty" description="什么都没有搜到哦~" :image="require('@assets/kong_png_wusousuo.png')" />
|
|
|
+ </van-list>
|
|
|
+ <div class="search-content" v-else>
|
|
|
+ <div class="hot-content" v-if="historys.length > 0">
|
|
|
+ <div class="title">最近搜索</div>
|
|
|
+ <div class="hot-list">
|
|
|
+ <span v-for="(item, index) in historys" :key="index" @click="getSearch(item)">{{ item }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="hot-content" v-if="hots.length > 0">
|
|
|
+ <div class="title">热门搜索</div>
|
|
|
+ <div class="hot-list">
|
|
|
+ <span v-for="(item, index) in hots" :key="index" @click="getSearch(item)">{{ item }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </van-pull-refresh>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import auctionInfo from '../../components/auction/info.vue';
|
|
|
+import product from '../../mixins/product';
|
|
|
+import list from '../../mixins/list';
|
|
|
+import search from '../../mixins/search';
|
|
|
+export default {
|
|
|
+ name: 'auctionSearch',
|
|
|
+ components: { auctionInfo },
|
|
|
+ inject: ['bar', 'setKeeps', 'scrollWrapper', 'changeScroll'],
|
|
|
+ mixins: [product, list, search],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ list: [],
|
|
|
+ beforeSort: '',
|
|
|
+ empty: false,
|
|
|
+ search: '',
|
|
|
+ stiky: null,
|
|
|
+ auctionType: '',
|
|
|
+ source: '',
|
|
|
+ status: '',
|
|
|
+ minterId: '',
|
|
|
+ url: '/auctionActivity/all',
|
|
|
+ scrollTop: 0,
|
|
|
+ sort: 'id,desc',
|
|
|
+ sortDes: '',
|
|
|
+ title: '',
|
|
|
+ selectOptions: [
|
|
|
+ {
|
|
|
+ label: '全部',
|
|
|
+ value: 'id,desc'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '最新',
|
|
|
+ value: 'createdAt,desc'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '最热',
|
|
|
+ value: 'likes,desc'
|
|
|
+ }
|
|
|
+ // {
|
|
|
+ // label: '价格',
|
|
|
+ // value: 'price',
|
|
|
+ // type: 'select'
|
|
|
+ // }
|
|
|
+ ],
|
|
|
+ salable: '',
|
|
|
+ showAction: false
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ isSearch() {
|
|
|
+ this.changeScroll(0);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ actions() {
|
|
|
+ let list = [{ name: '综合排序' }, { name: '在售中' }, { name: '仅展示' }];
|
|
|
+ if (this.salable === '') {
|
|
|
+ list[0].color = this.$colors.prim;
|
|
|
+ }
|
|
|
+ if (this.salable === true) {
|
|
|
+ list[1].color = this.$colors.prim;
|
|
|
+ }
|
|
|
+ if (this.salable === false) {
|
|
|
+ list[2].color = this.$colors.prim;
|
|
|
+ }
|
|
|
+ return list;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.$store.dispatch('getUsedBuy');
|
|
|
+ if (this.$route.query.auctionType) {
|
|
|
+ this.auctionType = this.$route.query.auctionType;
|
|
|
+ }
|
|
|
+ if (this.$route.query.status) {
|
|
|
+ this.status = this.$route.query.status;
|
|
|
+ }
|
|
|
+ if (this.$route.query.search) {
|
|
|
+ this.search = this.$route.query.search;
|
|
|
+ this.getSearch(this.search);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ changeSort() {
|
|
|
+ this.showAction = true;
|
|
|
+ },
|
|
|
+ selectAction(action) {
|
|
|
+ if (action.name == '综合排序') {
|
|
|
+ this.salable = '';
|
|
|
+ }
|
|
|
+ if (action.name == '在售中') {
|
|
|
+ this.salable = true;
|
|
|
+ }
|
|
|
+ if (action.name == '仅展示') {
|
|
|
+ this.salable = false;
|
|
|
+ }
|
|
|
+ this.getData(true);
|
|
|
+ },
|
|
|
+ changeTab(info) {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ if (info.name === 'price') {
|
|
|
+ this.sortDes = this.sortDes == 'desc' ? 'asc' : 'desc';
|
|
|
+ }
|
|
|
+ this.getData(true);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ beforeData() {
|
|
|
+ let sort = this.sort;
|
|
|
+ if (sort == 'price') {
|
|
|
+ sort = 'price,' + this.sortDes;
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ query: {
|
|
|
+ auctionType: this.auctionType,
|
|
|
+ status: this.status,
|
|
|
+ del: false
|
|
|
+ },
|
|
|
+ search: this.search,
|
|
|
+ sort: this.sort === 'id,desc' ? this.sortOptions[this.title] || sort : sort
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onRefresh() {
|
|
|
+ if (this.isSearch) {
|
|
|
+ this.getData(true).then(() => {
|
|
|
+ this.isLoading = false;
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.$http.get('sysConfig/get/hot_search').then(res => {
|
|
|
+ this.hots = res.value.split(',').filter(item => {
|
|
|
+ return item !== ' ' && !!item;
|
|
|
+ });
|
|
|
+
|
|
|
+ this.isLoading = false;
|
|
|
+ });
|
|
|
+ this.getHistory();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ activated() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.changeScroll(this.scrollTop);
|
|
|
+
|
|
|
+ // setTimeout(() => {
|
|
|
+ // this.sort = this.beforeSort;
|
|
|
+ // }, 1000);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ beforeRouteLeave(to, from, next) {
|
|
|
+ if (to.name === 'auctionDetail') {
|
|
|
+ this.beforeSort = this.sort;
|
|
|
+ this.scrollTop = this.scrollWrapper.value.scrollTop;
|
|
|
+ this.setKeeps(['auctionSearch']);
|
|
|
+ } else {
|
|
|
+ this.beforeSort = '';
|
|
|
+ this.scrollTop = 0;
|
|
|
+ this.setKeeps(['auctionSearch'], false);
|
|
|
+ }
|
|
|
+ next();
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.search {
|
|
|
+ background-color: @bg3;
|
|
|
+ padding-bottom: 100px;
|
|
|
+}
|
|
|
+.top {
|
|
|
+ background-color: @bg3;
|
|
|
+ padding: 0 16px;
|
|
|
+ height: 50px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .name {
|
|
|
+ font-size: 20px;
|
|
|
+ // font-weight: bold;
|
|
|
+ color: @prim;
|
|
|
+ line-height: 30px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/deep/.trans {
|
|
|
+ .van-tab {
|
|
|
+ margin-right: 30px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.list-top {
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+/deep/.van-tabs {
|
|
|
+ .van-tabs__nav {
|
|
|
+ padding-left: 16px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.list {
|
|
|
+ padding: 8px 8px 100px;
|
|
|
+}
|
|
|
+// /deep/.van-tab {
|
|
|
+// flex-grow: 0;
|
|
|
+// padding: 0 0 0 0;
|
|
|
+// margin-right: 50px;
|
|
|
+
|
|
|
+.tab {
|
|
|
+ position: relative;
|
|
|
+ padding-right: 14px;
|
|
|
+ .van-icon {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+
|
|
|
+ &.van-icon-arrow-down {
|
|
|
+ top: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.van-icon-arrow-up {
|
|
|
+ bottom: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+/deep/.van-tab--active {
|
|
|
+ .tab {
|
|
|
+ .van-icon-arrow-up {
|
|
|
+ color: #646566;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.asc {
|
|
|
+ .tab {
|
|
|
+ .van-icon-arrow-up {
|
|
|
+ color: @prim;
|
|
|
+ }
|
|
|
+ .van-icon-arrow-down {
|
|
|
+ color: #646566;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.van-tabs {
|
|
|
+ background-color: @bg;
|
|
|
+}
|
|
|
+/deep/.van-tabs__nav--line.van-tabs__nav--complete {
|
|
|
+ border-color: @tabBorder;
|
|
|
+}
|
|
|
+/deep/.van-search {
|
|
|
+ .van-field__left-icon {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .van-icon {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .van-field__control {
|
|
|
+ color: @text0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .van-search__action {
|
|
|
+ color: @text4;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.hot-content {
|
|
|
+ padding: 10px 0 6px 16px;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: @font2;
|
|
|
+ color: @text3;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hot-list {
|
|
|
+ span {
|
|
|
+ display: inline-block;
|
|
|
+ font-size: @font1;
|
|
|
+ color: @text4;
|
|
|
+ line-height: 22px;
|
|
|
+ padding: 0 12px;
|
|
|
+ margin: 6px 16px 0 0;
|
|
|
+ background: @hotBg;
|
|
|
+ border-radius: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/deep/.sala {
|
|
|
+ position: absolute;
|
|
|
+ right: 16px;
|
|
|
+ top: 60px;
|
|
|
+ color: @text3!important;
|
|
|
+ min-width: 92px;
|
|
|
+ font-size: 14px;
|
|
|
+ // .van-checkbox__icon {
|
|
|
+ // color: #fff;
|
|
|
+ // transform: scale(0.6);
|
|
|
+
|
|
|
+ // .van-icon {
|
|
|
+ // border-color: @text3;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // &.van-checkbox__icon--checked {
|
|
|
+ // .van-icon {
|
|
|
+ // border-width: 0;
|
|
|
+ // .linear();
|
|
|
+ // &::before {
|
|
|
+ // color: #fff;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // .van-checkbox__label {
|
|
|
+ // color: @text3;
|
|
|
+ // margin-left: 0px;
|
|
|
+ // font-size: @font1;
|
|
|
+ // }
|
|
|
+}
|
|
|
+</style>
|