Skip to content
GitLab
Commit 731ccd0c authored by Junling Bu's avatar Junling Bu
Browse files

chore[litemall-vue]: 调整search页面

parent 424496d4
Hide whitespace changes
Inline Side-by-side
litemall-vue/src/router/items.js
View file @ 731ccd0c
......@@ -20,15 +20,6 @@ export default [
},
component: () => import('@/views/items/search')
},
{
path: '/items/search/result',
name: 'search-result',
meta: {
keepAlive: true
},
component: () => import('@/views/items/search-result'),
props: route => route.query
},
{
path: '/items/detail/:itemId',
name: 'detail',
......
litemall-vue/src/views/items/search-result/index.vue deleted 100755 → 0
View file @ 424496d4
<template>
<div class="item_list">
<form action="/search" class="fixedTop">
<van-search placeholder="请输入商品名称" v-model="searchVal" @search="resetInit" showAction/>
</form>
<van-list
v-model="loading"
:finished="finished"
:immediate-check="false"
:offset="100"
@load="loadMore"
>
<item-group>
<item-card-hori
v-for="(item) in items"
:key="item.id"
:goods="item"
@click="itemClick(item.id)"
/>
</item-group>
</van-list>
<is-empty v-if="items.length === 0">抱歉,没有找到符合条件商品</is-empty>
<transition name="fade">
<van-icon name="arrowupcircle" class="backTop" @click.native="backTop" v-show="showArrow"></van-icon>
</transition>
</div>
</template>
<script>
import { goodsList } from '@/api/api';
import ItemGroup from '@/components/item-group/';
import IsEmpty from '@/components/is-empty/';
import ItemCardHori from '@/components/item-card-hori/';
import { Search, List } from 'vant';
import _ from 'lodash';
import loadMore from '@/mixin/list-load-more';
import scrollFixed from '@/mixin/scroll-fixed';
export default {
name: 'Item-list',
props: {
keyword: {
type: String,
default: ''
}
},
mixins: [loadMore, scrollFixed],
data() {
return {
isEmpty: false,
shop_id: '',
searchVal: '',
showArrow: false
};
},
activated() {
this.searchVal = this.keyword;
this.resetInit();
this.eventListen();
},
deactivated() {
document
.getElementById('app')
.removeEventListener('scroll', this.scrollShowArrow);
},
created() {
this.initData();
this.scrollShowArrow = _.throttle(this.scrollShowArrow, 100);
},
methods: {
initData() {
this.items = [];
return this.$reqGet(
`/wx/goods/list`,
{
keyword: this.searchVal,
page: 1,
limit: 100,
sort: 'name',
order: 'desc',
categoryId: 0
},
{
hideLoading: true
}
).then(res => {
const { goodsList, filterCategoryList } = res.data.data;
_.each(goodsList, v => {
v.pic_url = v.picUrl;
});
this.items.push(...goodsList);
// return page;
});
},
eventListen() {
document
.getElementById('app')
.addEventListener('scroll', this.scrollShowArrow);
},
scrollShowArrow() {
this.showArrow = document.getElementById('app').scrollTop > 120;
},
backTop() {
document.getElementById('app').scrollTop = 0;
},
itemClick(i) {
this.$router.push({ name: 'detail', params: { itemId: i } });
}
},
components: {
[ItemGroup.name]: ItemGroup,
[ItemCardHori.name]: ItemCardHori,
[Search.name]: Search,
[List.name]: List,
[IsEmpty.name]: IsEmpty
}
};
</script>
<style lang="scss" scoped>
.fade-enter,
.fade-leave-to {
opacity: 0;
}
.fade-enter-active,
.fade-leave-active {
transition: all 0.5s;
}
.item_list {
background-color: #fff;
padding-top: 50px;
box-sizing: border-box;
}
.fixedTop {
position: fixed;
width: 100%;
top: 0;
z-index: 999;
}
.items_loading {
margin: 0 auto;
}
.backTop {
position: fixed;
right: 20px;
bottom: 20px;
font-size: 24px;
}
</style>
litemall-vue/src/views/items/search/index.vue
View file @ 731ccd0c
......@@ -16,36 +16,72 @@
plain
v-for="(his, i) in wordHistory"
:key="i"
@click="toSearchResult(his)"
@click="clickSearch(his)"
>{{his}}</van-tag>
</div>
</div>
<van-list
v-model="loading"
:finished="finished"
:immediate-check="false"
@load="loadMore"
>
<item-group>
<item-card-hori
v-for="(item) in list"
:key="item.id"
:goods="item"
@click="itemClick(item.id)"
/>
</item-group>
</van-list>
<is-empty v-if="isEmpty">抱歉,没有找到符合条件商品</is-empty>
</div>
</template>
<script>
import { Search, Tag } from 'vant';
import { Search, Tag, List } from 'vant';
import { goodsList } from '@/api/api';
import ItemGroup from '@/components/item-group/';
import IsEmpty from '@/components/is-empty/';
import ItemCardHori from '@/components/item-card-hori/';
export default {
data() {
return {
keyword: '',
focusStatus: true,
wordHistory: []
wordHistory: [],
list: [],
page: 1,
limit: 10,
pages: 0,
loading: false,
finished: false,
isEmpty: false
};
},
methods: {
enterSearch() {
const keyword = this.keyword;
this.pushHistoryTolocal(keyword);
this.toSearchResult(keyword);
this.reset();
this.searchGoods();
},
toSearchResult(word) {
clickSearch(word) {
this.keyword = word.trim();
this.$router.push({
name: 'search-result',
query: { keyword: word.trim() }
});
this.reset();
this.searchGoods();
},
reset() {
this.list = [];
this.page = 1;
this.limit = 10;
this.total = 0;
this.loading = false;
this.finished = false;
this.isEmpty = false;
},
pushHistoryTolocal(keyword) {
const wordHistory = this.wordHistory;
......@@ -71,14 +107,41 @@ export default {
},
disabledSubmit() {
return false;
}
},
searchGoods() {
goodsList({
keyword: this.keyword,
page: this.page,
limit: this.limit,
categoryId: 0
}).then(res => {
var data = res.data.data;
this.list.push(...data.list);
this.page = data.page;
this.limit = data.limit;
this.pages = data.pages;
});
},
async loadMore() {
this.loading = false;
this.page += 1;
await this.searchGoods();
this.loading = false;
if (this.pages <= this.page) {
this.finished = true;
}
},
},
activated() {
this.wordHistory = this.getKeyWordHistory();
},
components: {
[Search.name]: Search,
[Tag.name]: Tag
[Tag.name]: Tag,
[ItemGroup.name]: ItemGroup,
[ItemCardHori.name]: ItemCardHori,
[List.name]: List,
[IsEmpty.name]: IsEmpty
}
};
</script>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment