品类页面，产品筛选搜索展示页面开发；网络异步请求拦截器
This commit is contained in:
donqi
parent
f277a6523b
commit
d54251e6e3
|
|
@ -49,6 +49,10 @@
|
|||
containerHeight: {
|
||||
type: String,
|
||||
default: '100vh'
|
||||
},
|
||||
isClick2ShowProducts: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
|
|
|
|||
35
main.js
35
main.js
|
|
@ -1,27 +1,44 @@
|
|||
// #ifndef VUE3
|
||||
import Vue from 'vue';
|
||||
import App from './App';
|
||||
import CuCustom from 'colorui/components/cu-custom.vue';
|
||||
import CuCustom from 'colorui/components/cu-custom.vue';
|
||||
import ConfirmModal from '@/components/modal/confirm-modal.vue';
|
||||
import Data from './common/js/data.js';
|
||||
import globalFun from './common/js/glogalFun.js';
|
||||
import Data from './common/js/data.js';
|
||||
import globalFun from './common/js/glogalFun.js';
|
||||
import validate from './common/js/validate.js';
|
||||
|
||||
Vue.component('cu-custom', CuCustom)
|
||||
Vue.component('cu-custom', CuCustom)
|
||||
Vue.component('confirm-modal', ConfirmModal);
|
||||
const data = type => {
|
||||
//模拟异步请求数据
|
||||
return new Promise(resolve => {
|
||||
setTimeout(() => {
|
||||
resolve(Data[type]);
|
||||
}, 0)
|
||||
resolve(Data[type]);
|
||||
})
|
||||
}
|
||||
Vue.prototype.$api = {
|
||||
data
|
||||
}
|
||||
Vue.prototype.$globalFun = globalFun;
|
||||
Vue.prototype.$validate = validate;
|
||||
Vue.prototype.$globalFun = globalFun;
|
||||
Vue.prototype.$validate = validate;
|
||||
|
||||
// 异步接口拦截
|
||||
uni.addInterceptor('request', {
|
||||
invoke(args) {
|
||||
// request 触发前拼接 url
|
||||
args.url = 'http://127.0.0.1:80' + args.url;
|
||||
console.log("停止触发");
|
||||
return false;
|
||||
},
|
||||
success(args) {
|
||||
console.log('interceptor-success', args);
|
||||
},
|
||||
fail(err) {
|
||||
console.log('interceptor-fail', err)
|
||||
},
|
||||
complete(res) {
|
||||
console.log('interceptor-complete', res)
|
||||
}
|
||||
})
|
||||
|
||||
Vue.config.productionTip = false
|
||||
|
||||
|
|
|
|||
|
|
@ -16,6 +16,10 @@
|
|||
"path": "product-pick"
|
||||
}, {
|
||||
"path": "shop-detail"
|
||||
}, {
|
||||
"path": "product-category"
|
||||
}, {
|
||||
"path": "filtered-products"
|
||||
}]
|
||||
}, {
|
||||
"root": "pages/my/",
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
<view class="margin-lr-sm margin-bottom-with-bar">
|
||||
<!-- 大类 -->
|
||||
<view class="flex justify-between text-black">
|
||||
<view class="padding text-lg">
|
||||
<view class="padding text-lg" @click="showProductCategories">
|
||||
<text>分类</text>
|
||||
<text class="cuIcon-apps text-main-color"></text>
|
||||
<text class="cuIcon-triangledownfill"></text>
|
||||
|
|
@ -133,6 +133,11 @@
|
|||
uni.navigateTo({
|
||||
url: '../product/product-detail'
|
||||
});
|
||||
},
|
||||
showProductCategories() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/product/product-category'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,145 @@
|
|||
<template>
|
||||
<view>
|
||||
<!-- 顶部操作条 -->
|
||||
<cu-custom :bgColor="'bg-main-color'" :isBack="true" :isBackHome="true" :homePageUrl="'/pages/index/index'">
|
||||
<block slot="content">产品列表</block>
|
||||
</cu-custom>
|
||||
<view class="sticky-bar" :style="[{top: stickyTop + 'px'}]">
|
||||
<!-- 搜索栏 -->
|
||||
<view class="cu-bar search bg-white">
|
||||
<view class="search-form round">
|
||||
<text class="cuIcon-search"></text>
|
||||
<input @confirm="searchGoods" :adjust-position="true" type="text" placeholder="输入搜索内容"
|
||||
confirm-type="search"></input>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 条件筛选栏 -->
|
||||
<scroll-view scroll-x class="bg-white nav text-center" :scroll-with-animation="true"
|
||||
:scroll-left="scrollLeft">
|
||||
<view class="cu-item" v-for="(item,index) in taskConditions" v-if="item.type !== 1" :key="index"
|
||||
@tap="tabSelect" :data-id="index">
|
||||
<!-- 区域筛选picker -->
|
||||
<picker v-if="item.code === 'area'" :mode="'multiSelector'" @change="regionChange"
|
||||
:value="areaMultiIndex" :range-key="'name'" :range="areaList">
|
||||
{{item.title}}
|
||||
<text class="text-lg"><text class="cuIcon-triangledownfill"></text></text>
|
||||
</picker>
|
||||
<!-- 品类筛选picker -->
|
||||
<picker v-else-if="item.code === 'category'" :mode="'multiSelector'" @change="categoryChange"
|
||||
:value="categoryMultiIndex" :range-key="'name'" :range="categoryList">
|
||||
{{item.title}}
|
||||
<text class="text-lg"><text class="cuIcon-triangledownfill"></text></text>
|
||||
</picker>
|
||||
<text v-else>
|
||||
{{item.title}}
|
||||
<text v-if="item.type === 0" class="text-lg"><text
|
||||
:class="item.value === 0 ? 'cuIcon-triangleupfill' : 'cuIcon-triangledownfill'"></text></text>
|
||||
<text v-else class="text-lg"><text class="cuIcon-triangledownfill"></text></text>
|
||||
</text>
|
||||
</view>
|
||||
<view class="cu-item" v-else>
|
||||
<button class="cu-btn bg-grey round shadow-blur">{{item.title}}</button>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<!-- 产品列表 -->
|
||||
<view class="padding bg-white solid-top">
|
||||
<view class="solid-bottom margin-bottom-sm padding-bottom-sm" @click="showDetails(item)"
|
||||
v-for="(item, index) in productList">
|
||||
<horizontal-goods-card :ifShowServArea="true" :product="item"></horizontal-goods-card>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import horizontalGoodsCard from '@/components/goods-card/horizontal-goods-card.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
horizontalGoodsCard
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
productList: [],
|
||||
stickyTop: this.CustomBar,
|
||||
// type: 0=升降序，1=功能按钮；order: 0=升序，1=降序；
|
||||
tabCur: 0,
|
||||
scrollLeft: 0,
|
||||
taskConditions: [{
|
||||
code: 'area',
|
||||
title: '区域'
|
||||
}, {
|
||||
code: 'category',
|
||||
title: '品类'
|
||||
}, {
|
||||
code: 'distance',
|
||||
title: '距离',
|
||||
type: 0,
|
||||
value: 0,
|
||||
}, {
|
||||
code: 'time',
|
||||
title: '时间',
|
||||
type: 0,
|
||||
value: 0,
|
||||
}, {
|
||||
code: 'reset',
|
||||
type: 1,
|
||||
title: '重置'
|
||||
}],
|
||||
areaList: [],
|
||||
areaMultiIndex: [0, 0, 0],
|
||||
categoryList: [],
|
||||
categoryMultiIndex: [0, 0, 0]
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
let params = JSON.parse(decodeURIComponent(options.params));
|
||||
this.loadData(params);
|
||||
},
|
||||
methods: {
|
||||
async loadData(params) {
|
||||
let shopInfo = await this.$api.data('shopInfo');
|
||||
this.productList = shopInfo.productList;
|
||||
},
|
||||
searchGoods(e) {
|
||||
console.log("搜索" + e.detail.value)
|
||||
},
|
||||
tabSelect(e) {
|
||||
this.tabCur = e.currentTarget.dataset.id;
|
||||
this.scrollLeft = (e.currentTarget.dataset.id - 1) * 70;
|
||||
let conditionType = this.taskConditions[this.tabCur].type;
|
||||
let conditionCode = this.taskConditions[this.tabCur].code;
|
||||
if (conditionType === 0) {
|
||||
// 升降序类型的条件切换升降序
|
||||
let orderVal = this.taskConditions[this.tabCur].value;
|
||||
this.taskConditions[this.tabCur].value = orderVal === 0 ? 1 : 0;
|
||||
}
|
||||
},
|
||||
showDetails(productItem) {
|
||||
uni.navigateTo({
|
||||
url: '../product/product-detail?productId=' + productItem.id
|
||||
});
|
||||
},
|
||||
regionChange(e) {
|
||||
this.areaMultiIndex = e.detail.value;
|
||||
let chosenArea = [];
|
||||
for(let i = 0; i < this.areaList.length; i++) {
|
||||
chosenArea.push(this.areaList[i][this.areaMultiIndex[i]]);
|
||||
}
|
||||
this.taskConditions[this.tabCur].value = chosenArea;
|
||||
},
|
||||
categoryChange(e) {
|
||||
this.categoryMultiIndex = e.detail.value;
|
||||
let chosenCategory = [];
|
||||
for(let i = 0; i < this.categoryList.length; i++) {
|
||||
chosenCategory.push(this.categoryList[i][this.categoryMultiIndex[i]]);
|
||||
}
|
||||
this.taskConditions[this.tabCur].value = chosenCategory;
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
<template>
|
||||
<view>
|
||||
<!-- 顶部操作条 -->
|
||||
<cu-custom :bgColor="'bg-main-color'" :isBack="true">
|
||||
<block slot="backText">返回</block>
|
||||
<block slot="content">产品分类</block>
|
||||
</cu-custom>
|
||||
<vertical-nav :containerHeight="containerHeight" :list="categoryList" :isClick2ShowProducts="true"></vertical-nav>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import verticalNav from '@/components/multi-level-nav/vertical-nav.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
verticalNav
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
containerHeight: '100vh - ' + this.CustomBar + 'px',
|
||||
categoryList: []
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.loadData();
|
||||
this.bindEvent();
|
||||
},
|
||||
onUnload() {
|
||||
this.offBindEvent();
|
||||
},
|
||||
methods: {
|
||||
async loadData() {
|
||||
// this.categoryList = await this.$api.data('categoryList');
|
||||
this.categoryList = await uni.request({
|
||||
url: '/goods/category/list',
|
||||
method: 'POST'
|
||||
})
|
||||
},
|
||||
bindEvent() {
|
||||
uni.$on(this.$globalFun.VERTICAL_NAV_GET_ITEM, this.chooseSubType);
|
||||
uni.$on(this.$globalFun.VERTICAL_NAV_SEARCH, this.searchType);
|
||||
},
|
||||
offBindEvent() {
|
||||
uni.$off(this.$globalFun.VERTICAL_NAV_GET_ITEM);
|
||||
uni.$off(this.$globalFun.VERTICAL_NAV_SEARCH);
|
||||
},
|
||||
chooseSubType(item) {
|
||||
let params = {
|
||||
type: 1
|
||||
}
|
||||
uni.navigateTo({
|
||||
url: '/pages/product/filtered-products?params=' + encodeURIComponent(JSON.stringify(params))
|
||||
})
|
||||
},
|
||||
searchType(keyWords) {
|
||||
console.log("搜索" + keyWords)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
Loading…
Reference in New Issue