产品分类页面增加一级类目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', CANCEL: 'cancelCallback',
VERTICAL_NAV_GET_ITEM: 'verticalNavGetItem', VERTICAL_NAV_GET_ITEM: 'verticalNavGetItem',
VERTICAL_NAV_SEARCH: 'verticalNavSearch', VERTICAL_NAV_SEARCH: 'verticalNavSearch',
VERTICAL_NAV_CHANGE_MAIN_NAV_ITEM: 'verticalNavChangeMainNavItem',
CHOOSE_ADDRESS: 'chooseAddress' CHOOSE_ADDRESS: 'chooseAddress'
} }

View File

@ -7,7 +7,13 @@
<input @confirm="searchGoods" :adjust-position="true" type="text" placeholder="输入搜索内容" <input @confirm="searchGoods" :adjust-position="true" type="text" placeholder="输入搜索内容"
confirm-type="search"></input> confirm-type="search"></input>
</view> </view>
</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 + ')'"> <view class="VerticalBox" :style="'height:calc(' + containerHeight + ')'">
<scroll-view class="VerticalNav nav"> <scroll-view class="VerticalNav nav">
<view class="cu-item" :class="index==tabCur?'text-main-color cur':''" v-for="(item,index) in list" <view class="cu-item" :class="index==tabCur?'text-main-color cur':''" v-for="(item,index) in list"
@ -16,13 +22,19 @@
{{item.goodsCategoryName}} {{item.goodsCategoryName}}
</view> </view>
</scroll-view> </scroll-view>
<scroll-view class="VerticalMain"> <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" <view class="padding-top padding-lr" v-for="(type, index1) in list[tabCur].child" :key="index1"
:id="'main-'+type.goodsCategoryId"> :id="'main-'+type.goodsCategoryId">
<view class="cu-bar bg-white bottom-border" @click="chooseNavItem(type)">
<view class="action"> <view class="cu-bar bg-white bottom-border" @click="chooseNavItem(type)">
<text class="cuIcon-title text-main-color"></text>{{type.goodsCategoryName}} <view class="action">
</view> <text class="cuIcon-title text-main-color"></text>{{type.goodsCategoryName}}
</view>
</view> </view>
<view class="cu-list menu"> <view class="cu-list menu">
<view class="cu-item" :class="curNavItem.goodsCategoryId === subType.goodsCategoryId ? 'bg-main-color light' : ''" v-for="(subType,index2) in type.child" :key="index2" @click="chooseNavItem(subType)"> <view class="cu-item" :class="curNavItem.goodsCategoryId === subType.goodsCategoryId ? 'bg-main-color light' : ''" v-for="(subType,index2) in type.child" :key="index2" @click="chooseNavItem(subType)">
@ -40,7 +52,11 @@
<script> <script>
export default { export default {
name: 'vertical-nav', name: 'vertical-nav',
props: { props: {
navList: {
type: Array,
default: []
},
list: { list: {
type: Array, type: Array,
default: [] default: []
@ -56,11 +72,13 @@
}, },
data() { data() {
return { return {
tabCur: 0, tabCur: 0,
navTabCur: 0,
// mainCur: 0, // mainCur: 0,
// load: true, // load: true,
// verticalNavTop: 0, // verticalNavTop: 0,
curNavItem: {} curNavItem: {},
scrollLeft: 0
} }
}, },
onReady() { onReady() {
@ -70,6 +88,12 @@
loadData() { loadData() {
// this.list = await this.$api.data('categoryList'); // this.list = await this.$api.data('categoryList');
// this.tabCur = this.list[0].goodsCategoryId; // 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) { tabSelect(e) {
this.tabCur = e.currentTarget.dataset.index; this.tabCur = e.currentTarget.dataset.index;

View File

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

View File

@ -64,6 +64,26 @@
<text class="text-bold cuIcon-unfold"></text> <text class="text-bold cuIcon-unfold"></text>
</view> </view>
<view class="cu-load" :class="loadMoreStatus"></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>
</view> </view>
</template> </template>
@ -81,7 +101,11 @@
loadMoreStatus: '', loadMoreStatus: '',
hasMoreData: false, hasMoreData: false,
pageNum: this.$globalData.initPageNum, pageNum: this.$globalData.initPageNum,
pageSize: this.$globalData.initPageSize, pageSize: this.$globalData.initPageSize,
otherCityProductList: [],
loadMoreStatusOfOtherCityPage: '',
hasMoreOtherCityData: false,
pageNumOfOtherCityPage: this.$globalData.initPageNum,
stickyTop: this.CustomBar, stickyTop: this.CustomBar,
// type: 0=1=2=order: 0=1= // type: 0=1=2=order: 0=1=
tabCur: 0, tabCur: 0,
@ -169,12 +193,17 @@
methods: { methods: {
async loadData() { async loadData() {
this.pageNum = this.$globalData.initPageNum; this.pageNum = this.$globalData.initPageNum;
this.pageSize = this.$globalData.initPageSize; 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.getCurAreaArr();
await this.loadRegionList(); await this.loadRegionList();
this.loadProductData(); this.loadProductData();
this.loadOtherCityProductData();
}, },
async getCurAreaArr() { async getCurAreaArr() {
let areaArr = await this.$request.getCurArea(); let areaArr = await this.$request.getCurArea();
@ -209,10 +238,39 @@
this.loadMoreStatus = 'erro bg-red' 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() { reloadProductPage() {
this.pageNum = this.$globalData.initPageNum; this.pageNum = this.$globalData.initPageNum;
this.pageSize = this.$globalData.initPageSize; this.pageSize = this.$globalData.initPageSize;
this.pageNumOfOtherCityPage = this.$globalData.initPageNum;
this.productList = [];
this.otherCityProductList = [];
this.loadProductData(); this.loadProductData();
this.loadOtherCityProductData();
}, },
async loadProductPage(params) { async loadProductPage(params) {
// let shopInfo = await this.$api.data('shopInfo'); // let shopInfo = await this.$api.data('shopInfo');
@ -228,15 +286,30 @@
this.productList = this.productList.concat(res[1].data.rows); this.productList = this.productList.concat(res[1].data.rows);
} }
this.pageNum++; this.pageNum++;
},
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(idArr) { async loadCategoryList(type = 1) {
let res = await this.$request.listByStep({ let res = await this.$request.listByStep({
type: 1 type: type
}); });
res = res.data; res = res.data;
let typeList = await this.$request.listByStepWithAllNode({ let typeList = await this.$request.listByStepWithAllNode({
goodsCategoryId: res[0].goodsCategoryId, goodsCategoryId: res[0].goodsCategoryId,
type: 1 type: type
}); });
typeList = typeList.data; typeList = typeList.data;
let subTypeList = []; let subTypeList = [];
@ -301,7 +374,8 @@
for(let i = 0; i < this.originTaskConditions.length; i++) { for(let i = 0; i < this.originTaskConditions.length; i++) {
this.taskConditions[i].value = this.originTaskConditions[i].value; 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.chosenCategory = [];
// this.$forceUpdate(); // this.$forceUpdate();
this.reloadProductPage(); this.reloadProductPage();

View File

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