Leadfyy.co
/
ec.uniapp-master
11
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

对接分类商品列表页面接口。 完成搜索页面缓存逻辑

master
邓平艺 4 years ago
parent
90a44da738
commit
14f4277b8b
5 changed files with 314 additions and 100 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      components/index-nav/index-nav.vue
  2. 3
      pages/index/category/category.vue
  3. 262
      pages/index/onlineMall/onlineMall.vue
  4. 144
      pages/shop/search.vue
  5. 3
      pages/shop/searchList.vue

2
components/index-nav/index-nav.vue
View File

@ -42,7 +42,7 @@ export default {
image: 'https://cdn.guojiang.club/storage/uploads/images/2020_06_05/rNCqCVUgi5GFYntpqmevHEaO1NYt5PZ2tgjEXRMU.png',
name: '数码家电'
},{
link: '/pages/index/onlineMall/onlineMall',
link: '/pages/index/onlineMall/onlineMall?id=6',
image: 'https://cdn.guojiang.club/storage/uploads/images/2020_06_05/rNCqCVUgi5GFYntpqmevHEaO1NYt5PZ2tgjEXRMU.png',
name: '黄金珠宝'
},{

3
pages/index/category/category.vue
View File

@ -235,7 +235,8 @@
},
// 右边点击
rightTap: function(item) {
this.$url(item.path);
console.log(item);
this.$url('/pages/index/onlineMall/onlineMall?id='+ item.id);
},
rightScroll: function(e) {
let scrollH = e.detail.scrollTop + 30;

262
pages/index/onlineMall/onlineMall.vue
View File

@ -1,27 +1,25 @@
<template>
<view>
<lf-nav title="在线商城" :showIcon="true" @changeHeight="e => nav_height = e"></lf-nav>
<lf-nav :title="title" :showIcon="true" @changeHeight="e => nav_height = e"></lf-nav>
<view class="head">
<u-search placeholder="搜你想要的" :show-action="false" :disabled="true" @click="searchClick"></u-search>
</view>
<view class="filter-box">
<!-- tabs -->
<view class="filter-item" @click="switchTab(0)">
<text style="white-space: nowrap">综合排序</text>
</view>
<view class="filter-item">
<text style="white-space: nowrap">黄金珠宝</text>
</view>
<view class="filter-item" @click="switchTab(2)">
<text style="white-space: nowrap">筛选</text>
<view class="filter-item"
v-for="(item, index) in filter_tabs"
:key="index" @click="switchTab(index)">
<text style="white-space: nowrap" v-if="index == 0">{{ item.list[item.select_index].name }}</text>
<text style="white-space: nowrap" v-else>{{ item.name }}</text>
</view>
<!-- 普通列表文字选择 -->
<view class="filter-modal" v-if="show_filter && tab_current == 0" @click="show_filter = false">
<view class="filter-content">
<view>综合排序</view>
<view>销量最高</view>
<view>价格最香</view>
<view>好评最多</view>
<view v-for="(item, index) in filter_tabs[0].list"
:key="index"
:class="{'active-c': filter_tabs[0].select_index == index}"
@click="clickSort(index)">{{ item.name }}
</view>
</view>
</view>
<!-- 多条件搜索 -->
@ -30,31 +28,36 @@
<view class="filter-main">
<view>
<view class="filter-title lf-row-between">
<view>价格区间</view>
<view>{{ filter_tabs[2].list[0].name }}</view>
<view class="lf-flex">
<input class="filter-input" placeholder="最低价" />
<input class="filter-input" type="number" v-model="filter_tabs[2].list[0].min_price" placeholder="最低价" />
<view class="filter-division">-</view>
<input class="filter-input" placeholder="最高价"/>
<input class="filter-input" type="number" v-model="filter_tabs[2].list[0].max_price" placeholder="最高价"/>
</view>
</view>
<view class="filter-title" style="margin-top: 80rpx;">
<text>品牌</text>
<text>{{ filter_tabs[2].list[1].name }}</text>
<text class="lf-font-24 lf-color-777">(可多选)</text>
</view>
<view class="lf-flex-wrap">
<view class="filter-capsule" v-for="(item) in 10" :key="item">周大福</view>
<view class="filter-capsule"
:class="{'active-bg': autoSelectBrand(index)}"
@click="clickBrand(index)"
v-for="(item, index) in filter_tabs[2].list[1].brand"
:key="index">{{ item.name }}
</view>
</view>
</view>
</view>
<view class="filter-foot">
<button class="filter-btn" >重置条件</button>
<button class="filter-btn solid-btn" >确定</button>
<button class="filter-btn" @click="reset">重置条件</button>
<button class="filter-btn solid-btn" @click="submit">确定</button>
</view>
</view>
</view>
</view>
<view style="height: 104rpx;"></view>
<scroll-view :style="{height: autoHeight}" :scroll-y="true">
<scroll-view :style="{height: autoHeight}" :scroll-y="true" @scrolltolower="scrolltolower">
<view class="scroll-content">
<lf-waterfall :list="list"></lf-waterfall>
</view>
@ -74,63 +77,175 @@
tab_current: null,
scrollH: 0,
nav_height: 0,
list: [
{
id: 10,
original_price: "4111.00",
picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
price: "2412.00",
product_id: 1008,
sale: 0,
title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
},
{
id: 10,
original_price: "4111.00",
picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
price: "2412.00",
product_id: 1008,
sale: 0,
title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
},
{
id: 10,
original_price: "4111.00",
picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
price: "2412.00",
product_id: 1008,
sale: 0,
title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
},
{
id: 10,
original_price: "4111.00",
picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
price: "2412.00",
product_id: 1008,
sale: 0,
title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
}
]
list: [],
title: '',
c_id: 0,
filter_tabs: [{
name: '综合排序',
select_index: 0,
list: [{
name: '综合排序',
orderBy: ''
},{
name: '销量最高',
orderBy: 'sale_count'
},{
name: '价格最香',
orderBy: 'sell_price'
},{
name: '最新排序',
orderBy: 'updated_at'
}]
},{
name: ''
},{
name: '筛选',
list: [{
name: '价格区间',
min_price: '',
max_price: ''
},{
name: '品牌',
brand: [],
selected: []
}]
}],
filter_tabs_source: []
}
},
computed: {
autoHeight(){
return `calc(${this.scrollH}px - ${this.nav_height}px - 124rpx - 104rpx)`;
},
autoSelectBrand(){
return function(index){
let item = this.filter_tabs[2].list[1];
let flag = false;
item.selected.map(i => {
if(index == i){
flag = true;
}
})
return flag;
}
}
},
onLoad(){
onLoad(options){
let info = uni.getSystemInfoSync();
this.scrollH = info.screenHeight;
this.c_id = options.id;
this.getGoodsList();
},
methods: {
// 首次获取商品列表
getGoodsList(){
this.$http.get({
api: 'api/store/list',
data: {
c_id: this.c_id
}
}).then(res => {
console.log("getgoodslist", res);
this.getBrandList();
let data_list = res.data.data || [];
let list = data_list.map(item => {
return {
id: item.id,
original_price: item.market_price,
picture: item.img,
pictures: [item.img],
price: item.min_price,
product_id: item.brand_id,
sale: item.sale_count,
title: item.name
}
})
if(data_list[0] && data_list[0].tags){
this.title = data_list[0].tags[0];
this.filter_tabs[1].name = data_list[0].tags[0];
}
this.list = list;
})
},
// 获取品牌列表，只会在第一次进入页面时获取
getBrandList(){
this.$http.get({
api: 'api/brand'
}).then(res => {
console.log("brand", res);
let list = res.data.data.list;
let brand = list.map(item => {
return {name: item.name, id: item.id};
})
this.filter_tabs[2].list[1].brand = brand;
this.filter_tabs_source = JSON.parse(JSON.stringify(this.filter_tabs));
})
},
// 筛选后的接口请求获取商品列表
getFilterGoods(){
let sortItem = this.filter_tabs[0];
let moreItem = this.filter_tabs[2];
let par = {
c_id: this.c_id
}
// 排序
par.orderBy = sortItem.list[sortItem.select_index].orderBy;
// 品牌
if(moreItem.list[1].selected.length){
let brand_id = [];
moreItem.list[1].selected.map(s_item => {
brand_id.push( moreItem.list[1].brand[s_item].id );
})
par.brand_id = brand_id;
}
// 价格
if(moreItem.list[0].min_price && moreItem.list[0].max_price){
par.price = moreItem.list[0].min_price +'-'+ moreItem.list[0].max_price;
}
// TODO 传入分页等信息
this.$http.get({
api: 'api/store/list',
data: par
}).then(res => {
console.log("res", res);
})
},
// 点击选择筛选
clickSort(index){
this.filter_tabs[0].select_index = index;
this.getFilterGoods();
},
// 点击选中筛选某个品牌
clickBrand(index){
let item = this.filter_tabs[2].list[1];
let num = item.selected.indexOf(index);
if(num != -1){
item.selected.splice(num, 1);
}else{
item.selected.push(index);
}
},
// 提交筛选
submit(){
console.log("所以筛选条件", this.filter_tabs)
this.show_filter = false;
this.getFilterGoods();
},
// 重置所有筛选
reset(){
if(this.filter_tabs_source && Object.keys(this.filter_tabs_source).length){
this.filter_tabs = JSON.parse(JSON.stringify(this.filter_tabs_source));
this.show_filter = false;
this.getFilterGoods();
}else{
this.$msg('重置失败', {icon: 'error'});
}
},
// 搜索框被点击
searchClick(){
this.$url('/pages/shop/search');
},
// 切换tabs
switchTab(current){
if(this.tab_current != current){
this.show_filter = true;
@ -138,6 +253,10 @@
this.show_filter = !this.show_filter;
}
this.tab_current = current;
},
// scroll page滚动到底部
scrolltolower(){
this.$msg('页面触底啦~')
}
}
}
@ -209,12 +328,14 @@
.filter-many{
position: absolute;
width: 100%;
height: 630rpx;
min-height: max-content;
max-height: 630rpx;
background-color: #FFFFFF;
left: 0;
z-index: 14;
.filter-main{
height: 500rpx;
min-height: max-content;
max-height: 500rpx;
overflow-y: scroll;
box-sizing: border-box;
padding: 32rpx;
@ -301,7 +422,14 @@
}
}
}
.active-c{
color: #15716E;
}
.active-bg{
background: #15716E;
color: #fff !important;
border: none;
}
.scroll-content{
padding: 30rpx 32rpx;
}

144
pages/shop/search.vue
View File

@ -2,34 +2,41 @@
<view>
<lf-nav title="搜索" :showIcon="true"></lf-nav>
<view class="head">
<u-search placeholder="请输入商品名或商户名" :focus="is_focus" v-model="value" @custom="customClick"></u-search>
<u-search placeholder="请输入商品名或商户名"
:focus="is_focus"
v-model="value"
@search="search"
@custom="customClick">
</u-search>
</view>
<view class="content">
<!-- 大家都在搜 -->
<view>
<text class="title">大家都在搜</text>
</view>
<view class="list">
<view class="item">秋上新</view>
<view class="item">纪梵希</view>
<view class="item">雅诗兰黛</view>
<view class="item">中秋</view>
<view class="item">苹果爱普</view>
<view class="item">基督教烧烤</view>
</view>
<block v-if="hot_list.length">
<view>
<text class="title">大家都在搜</text>
</view>
<view class="list">
<view class="item"
@click="activeKeyWord(item)"
v-for="(item, index) in hot_list"
:key="index">{{ item }}
</view>
</view>
</block>
<!-- 我搜过的 -->
<view class="lf-row-between">
<text class="title">我搜过的</text>
<text class="lf-iconfont icon-shanchu lf-color-777"></text>
</view>
<view class="list">
<view class="item item-2">秋上新</view>
<view class="item item-2">纪梵希</view>
<view class="item item-2">雅诗兰黛</view>
<view class="item item-2">中秋</view>
<view class="item item-2">苹果爱普</view>
<view class="item item-2">基督教烧烤</view>
</view>
<block v-if="history_list.length">
<view class="lf-row-between">
<text class="title">我搜过的</text>
<text class="lf-iconfont icon-shanchu lf-color-777" @click="remove"></text>
</view>
<view class="list">
<view class="item item-2"
@click="activeKeyWord(item)"
v-for="(item, index) in history_list"
:key="index">{{ item }}
</view>
</view>
</block>
</view>
</view>
</template>
@ -38,17 +45,94 @@
export default {
data() {
return {
value: '',
is_focus: true // 是否自动获得焦点
value: '', // 搜索的值
is_focus: true, // 是否自动获得焦点
hot_list: [], // 热门搜索
history_list: [], // 历史搜索
max_history_count: 12 // 最多存多少个历史搜索值
}
},
onLoad(){
this.getHistorySearch();
this.getHotSearch();
},
onHide(){
this.setHistorySearch();
},
methods: {
customClick(event){
console.log("点击了", event);
this.$url('/pages/shop/searchList');
// 获取搜索历史
getHistorySearch(){
let history_search = this.$cookieStorage.get('history_search') || [];
this.history_list = JSON.parse(JSON.stringify(history_search));
},
// 设置搜索历史
setHistorySearch(){
if(this.history_list.length){
this.$cookieStorage.set('history_search', this.history_list);
}else{
this.$cookieStorage.clear('history_search');
}
},
// TODO 获取热门搜索 待对接请求接口
getHotSearch(){
// this.$http.get({
// api: ''
// }).then(res => {
// console.log("hot", res);
// })
let list = ['秋上新','纪梵希','雅诗兰黛','中秋','苹果爱普','基督教烧烤'];
this.hot_list = list;
},
// 激活关键词搜索
activeKeyWord(value){
this.value = value;
this.customClick(value);
},
// 用户按下搜索按钮，或回车键
search(value){
this.customClick(value);
},
// 点击了搜索按钮
customClick(value){
this.updateHistory(value).then(() => {
this.$url('/pages/shop/searchList?value='+ value);
})
},
// 更新搜索历史列表
updateHistory(value){
return new Promise((resolve, reject) => {
let history_list = [...this.history_list];
if(history_list.includes(value)){
history_list.map((item, index) => {
if(item == value){
this.history_list.splice(index, 1); // 删除掉已经存在的key值
}
})
this.history_list.unshift(value); // 向头部追加新的key值
if(this.history_list.length > this.max_history_count){
this.history_list.pop(); // 如果历史记录超出预设最大范围，将最尾key值移除
}
}else{
this.history_list.unshift(value);
if(this.history_list.length > this.max_history_count){
this.history_list.pop();
}
}
resolve(value); // 操作完成，回调成功
})
},
// 清空搜索记录
remove(){
uni.showModal({
title: '温馨提示',
content: '确定清空搜索历史吗？',
confirmColor: '#15716E',
success: result => {
if(result.confirm){
this.history_list = [];
}
}
})
}
}
}

3
pages/shop/searchList.vue
View File

@ -36,7 +36,7 @@
},
data() {
return {
value: '爱慕先生',
value: '',
tab_current: 0,
tab_list: [{
name: '商品(8)'
@ -97,6 +97,7 @@
onLoad(options){
let info = uni.getSystemInfoSync();
this.scrollH = info.screenHeight;
this.value = options.value || '';
},
methods: {
customClick(){

Write Preview
Loading…
Cancel
Save