产品分类页面增加一级类目tab,二级类目需要可选;

产品列表页面增加展示其他城市产品;
师傅圈选择了区域筛选条件的,展示的当前城市师傅列表只展示该区域条件下的服务范围;
This commit is contained in:
donqi 2023-01-02 16:33:37 +08:00
parent dbf467b928
commit b830e060eb
5 changed files with 138 additions and 21 deletions

View File

@ -3,5 +3,6 @@ export default {
CANCEL: 'cancelCallback',
VERTICAL_NAV_GET_ITEM: 'verticalNavGetItem',
VERTICAL_NAV_SEARCH: 'verticalNavSearch',
VERTICAL_NAV_CHANGE_MAIN_NAV_ITEM: 'verticalNavChangeMainNavItem',
CHOOSE_ADDRESS: 'chooseAddress'
}

View File

@ -8,6 +8,12 @@
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" :class="index==navTabCur?'text-main-color cur':''" v-for="(item,index) in navList"
:key="index" @tap="navTabSelect" :data-index="index" :data-id="item.goodsCategoryId">
<text class="margin-right-xs">{{item.goodsCategoryName}}</text>
</view>
</scroll-view>
<view class="VerticalBox" :style="'height:calc(' + containerHeight + ')'">
<scroll-view class="VerticalNav nav">
<view class="cu-item" :class="index==tabCur?'text-main-color cur':''" v-for="(item,index) in list"
@ -17,8 +23,14 @@
</view>
</scroll-view>
<scroll-view class="VerticalMain">
<view class="cu-bar bg-white" @click="chooseNavItem(list[tabCur])" v-if="list[tabCur].child && list[tabCur].child.length">
<view class="action">
<!-- {{list[tabCur].goodsCategoryName}} -->全部
</view>
</view>
<view class="padding-top padding-lr" v-for="(type, index1) in list[tabCur].child" :key="index1"
:id="'main-'+type.goodsCategoryId">
<view class="cu-bar bg-white bottom-border" @click="chooseNavItem(type)">
<view class="action">
<text class="cuIcon-title text-main-color"></text>{{type.goodsCategoryName}}
@ -41,6 +53,10 @@
export default {
name: 'vertical-nav',
props: {
navList: {
type: Array,
default: []
},
list: {
type: Array,
default: []
@ -57,10 +73,12 @@
data() {
return {
tabCur: 0,
navTabCur: 0,
// mainCur: 0,
// load: true,
// verticalNavTop: 0,
curNavItem: {}
curNavItem: {},
scrollLeft: 0
}
},
onReady() {
@ -71,6 +89,12 @@
// this.list = await this.$api.data('categoryList');
// this.tabCur = this.list[0].goodsCategoryId;
},
navTabSelect(e) {
this.navTabCur = e.currentTarget.dataset.index;
this.scrollLeft = (e.currentTarget.dataset.index - 1) * 60;
this.tabCur = 0;
uni.$emit(this.$globalFun.VERTICAL_NAV_CHANGE_MAIN_NAV_ITEM, this.navList[this.navTabCur]);
},
tabSelect(e) {
this.tabCur = e.currentTarget.dataset.index;
// this.mainCur = e.currentTarget.dataset.mainCur;

View File

@ -247,6 +247,7 @@
}
params.pageNum = this.pageNum;
params.pageSize = this.pageSize;
params.justShowCurWorkerArea = true;
this.$refs.loadStatusBar1.showLoading();
try {
let res = await this.$request.getWorkerList(params);

View File

@ -65,6 +65,26 @@
</view>
<view class="cu-load" :class="loadMoreStatus"></view>
</view>
<!-- 其他城市服务列表 -->
<view class="text-gray text-lg text-center margin flex align-center">
<view class="divider"/>
<text class="margin-lr-sm" style="flex-basis: 50%;">其他城市</text>
<view class="divider"/>
</view>
<!-- 其他城市产品列表 -->
<view class="padding-lr padding-top bg-white solid-top">
<view class="solid-bottom margin-bottom-sm padding-bottom-sm" @click="showDetails(item)"
v-for="(item, index) in otherCityProductList">
<horizontal-goods-card :ifShowServArea="true" :product="item"></horizontal-goods-card>
</view>
</view>
<view class="margin-bottom-lg">
<view v-if="hasMoreOtherCityData" class="text-center bg-main-color light padding-tb-sm" @click="loadOtherCityProductData({})">
<text class="margin-right-xs">查看更多</text>
<text class="text-bold cuIcon-unfold"></text>
</view>
<view class="cu-load" :class="loadMoreStatusOfOtherCityPage"></view>
</view>
</view>
</template>
@ -82,6 +102,10 @@
hasMoreData: false,
pageNum: this.$globalData.initPageNum,
pageSize: this.$globalData.initPageSize,
otherCityProductList: [],
loadMoreStatusOfOtherCityPage: '',
hasMoreOtherCityData: false,
pageNumOfOtherCityPage: this.$globalData.initPageNum,
stickyTop: this.CustomBar,
// type: 0=1=2=order: 0=1=
tabCur: 0,
@ -170,11 +194,16 @@
async loadData() {
this.pageNum = this.$globalData.initPageNum;
this.pageSize = this.$globalData.initPageSize;
this.loadCategoryList();
let type;
if (this.chosenCategory[2]) {
type = this.chosenCategory[2].type;
}
this.loadCategoryList(type);
//
await this.getCurAreaArr();
await this.loadRegionList();
this.loadProductData();
this.loadOtherCityProductData();
},
async getCurAreaArr() {
let areaArr = await this.$request.getCurArea();
@ -209,10 +238,39 @@
this.loadMoreStatus = 'erro bg-red'
}
},
async loadOtherCityProductData(params = {}) {
params.pageNum = this.pageNumOfOtherCityPage;
params.pageSize = this.pageSize;
params.goodsName = this.inputGoodsName;
params.status = 0;
this.taskConditions.forEach((condition) => {
if (condition.type === 2) {
params[condition.code] = condition.value;
} else if (condition.type === 0) {
params.params = params.params ? params.params : {};
params.params[condition.code] = condition.value === 1 ? 'desc' : 'asc';
}
})
params.areaId = null;
params.exceptParentAreaId = this.chosenArea[this.chosenArea.length - 1].areaId;
this.loadMoreStatusOfOtherCityPage = 'loading bg-main-color light';
this.hasMoreOtherCityData = false;
try {
await this.loadOtherCityProductPage(params);
this.loadMoreStatusOfOtherCityPage = this.hasMoreOtherCityData ? '' : 'over bg-grey';
} catch (e) {
this.loadMoreStatusOfOtherCityPage = 'erro bg-red'
}
},
reloadProductPage() {
this.pageNum = this.$globalData.initPageNum;
this.pageSize = this.$globalData.initPageSize;
this.pageNumOfOtherCityPage = this.$globalData.initPageNum;
this.productList = [];
this.otherCityProductList = [];
this.loadProductData();
this.loadOtherCityProductData();
},
async loadProductPage(params) {
// let shopInfo = await this.$api.data('shopInfo');
@ -229,14 +287,29 @@
}
this.pageNum++;
},
async loadCategoryList(idArr) {
async loadOtherCityProductPage(params) {
// let shopInfo = await this.$api.data('shopInfo');
// this.productList = shopInfo.productList;
let res = await this.$request.qryProductPage(params);
let rowsLength = res[1].data.rows.length;
if (rowsLength === this.pageSize) {
this.hasMoreOtherCityData = true;
}
if (this.pageNumOfOtherCityPage === this.$globalData.initPageNum) {
this.otherCityProductList = res[1].data.rows;
} else {
this.otherCityProductList = this.otherCityProductList.concat(res[1].data.rows);
}
this.pageNumOfOtherCityPage++;
},
async loadCategoryList(type = 1) {
let res = await this.$request.listByStep({
type: 1
type: type
});
res = res.data;
let typeList = await this.$request.listByStepWithAllNode({
goodsCategoryId: res[0].goodsCategoryId,
type: 1
type: type
});
typeList = typeList.data;
let subTypeList = [];
@ -301,7 +374,8 @@
for(let i = 0; i < this.originTaskConditions.length; i++) {
this.taskConditions[i].value = this.originTaskConditions[i].value;
}
this.chosenArea = [];
this.chosenArea = [this.areaList[0][0], this.areaList[1][0]];
this.taskConditions[0].value = this.chosenArea[this.chosenArea.length - 1].areaId;
this.chosenCategory = [];
// this.$forceUpdate();
this.reloadProductPage();

View File

@ -5,7 +5,7 @@
<block slot="backText">返回</block>
<block slot="content">产品分类</block>
</cu-custom>
<vertical-nav v-if="categoryList" :containerHeight="containerHeight" :list="categoryList" :isClick2ShowProducts="true"></vertical-nav>
<vertical-nav v-if="categoryList" :containerHeight="containerHeight" :navList="level0CategoryList" :list="categoryList" :isClick2ShowProducts="true"></vertical-nav>
</view>
</template>
@ -18,7 +18,8 @@
},
data() {
return {
containerHeight: '100vh - ' + this.CustomBar + 'px',
containerHeight: '100vh - ' + this.CustomBar + 'px - 46px',
level0CategoryList: [],
categoryList: []
}
},
@ -30,9 +31,20 @@
this.offBindEvent();
},
methods: {
async loadData(params = {}) {
async loadData(params = {}, type = 1) {
let res0 = await this.$request.listByStep({
level: 0
});
this.level0CategoryList = res0.data;
this.loadTargetTypeCategoryList(params, type);
},
async loadTargetTypeCategoryList(params = {}, type = 1) {
this.categoryList = [];
// this.categoryList = await this.$api.data('categoryList');
let res = await this.$request.getProductCategories(params);
let res = await this.$request.getProductCategories({
...params,
type: type
});
res = res[1].data.data;
res.forEach(firstCategory => {
if (firstCategory.child && firstCategory.child.length) {
@ -43,10 +55,12 @@
bindEvent() {
uni.$on(this.$globalFun.VERTICAL_NAV_GET_ITEM, this.chooseSubType);
uni.$on(this.$globalFun.VERTICAL_NAV_SEARCH, this.searchType);
uni.$on(this.$globalFun.VERTICAL_NAV_CHANGE_MAIN_NAV_ITEM, this.changeLevel0Category);
},
offBindEvent() {
uni.$off(this.$globalFun.VERTICAL_NAV_GET_ITEM);
uni.$off(this.$globalFun.VERTICAL_NAV_SEARCH);
uni.$off(this.$globalFun.VERTICAL_NAV_CHANGE_MAIN_NAV_ITEM);
},
chooseSubType(item) {
let params = {
@ -60,6 +74,9 @@
this.loadData({
goodsCategoryName: keyWords
});
},
changeLevel0Category(category) {
this.loadTargetTypeCategoryList({}, category.type);
}
}
}