产品分类页面增加一级类目tab,二级类目需要可选;
产品列表页面增加展示其他城市产品; 师傅圈选择了区域筛选条件的,展示的当前城市师傅列表只展示该区域条件下的服务范围;
This commit is contained in:
parent
dbf467b928
commit
b830e060eb
|
|
@ -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'
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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);
|
||||||
|
|
|
||||||
|
|
@ -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();
|
||||||
|
|
|
||||||
|
|
@ -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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue