329 lines
11 KiB
Vue
329 lines
11 KiB
Vue
<template>
|
||
<view class="margin-bottom-with-bar">
|
||
<!-- 顶部操作条 -->
|
||
<cu-custom :bgColor="'bg-main-color'">
|
||
<block slot="content">全国师傅圈</block>
|
||
</cu-custom>
|
||
<!-- 搜索栏 -->
|
||
<view class="sticky-bar" :style="[{top: stickyTop + 'px'}]">
|
||
<view class="cu-bar bg-white search solid-bottom margin-bottom-sm">
|
||
<view class="action">
|
||
<picker :mode="'multiSelector'" @change="regionChange" @columnchange="regionColChange"
|
||
:value="areaMultiIndex" :range-key="'areaName'" :range="areaList">
|
||
<text class="cuIcon-location"></text>
|
||
<text>{{searchInfo.area && searchInfo.area.length ? searchInfo.area[2].areaName : areaList[2][0].areaName}}</text>
|
||
</picker>
|
||
</view>
|
||
<view class="search-form round">
|
||
<text class="cuIcon-search"></text>
|
||
<input @confirm="searchGoods" v-model="searchInfo.inputWorkerName" :adjust-position="true" type="text"
|
||
placeholder="搜索师傅名称" confirm-type="search"></input>
|
||
</view>
|
||
<view class="action">
|
||
<picker :mode="'multiSelector'" @change="categoryChange"
|
||
@columnchange="categoryColChange" :value="categoryMultiIndex" :range-key="'goodsCategoryName'"
|
||
:range="categoryList">
|
||
<text>{{searchInfo.category && searchInfo.category.length ? searchInfo.category[2].goodsCategoryName : '技能筛选'}}</text>
|
||
<text class="cuIcon-filter"></text>
|
||
</picker>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 师傅卡片 -->
|
||
<view v-for="(item, index) in workerInfos" class="bg-white padding margin-lr-sm margin-tb-sm shadow-warp">
|
||
<!-- 师傅信息 -->
|
||
<view class="solid-bottom padding-bottom-sm">
|
||
<view class="flex justify-start">
|
||
<view class="cu-avatar round" :style="'background-image:url(' + item.workerLogoUrl + '); width: 130rpx; height: 130rpx;'"></view>
|
||
<view class="margin-left-sm flex-column-between">
|
||
<view class="text-black text-xl">{{item.name}}</view>
|
||
<view class="text-sm">
|
||
<view>
|
||
<text class="margin-right-xs">服务技能:</text>
|
||
<text v-for="(skill, skillArrIndex) in item.goodsCategories">
|
||
<text>{{skill.goodsCategoryName}}</text>
|
||
<text v-if="skillArrIndex !== item.goodsCategories.length - 1">，</text>
|
||
</text>
|
||
</view>
|
||
<view>
|
||
<text class="margin-right-xs">服务范围:</text>
|
||
<text v-for="(area, areaArrIndex) in item.workerAreas">
|
||
<text>{{getLastSplitAreaName(area.mergerName)}}</text>
|
||
<text v-if="areaArrIndex !== item.workerAreas.length - 1">，</text>
|
||
</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="text-sm padding-top">
|
||
<view class="flex justify-between">
|
||
<text>总评分<text class="text-red text-xl margin-left-xs">5.0</text> /5.0分</text>
|
||
<uni-rate :readonly="true" allow-half :value="5" />
|
||
</view>
|
||
<view class="flex justify-between">
|
||
<view>
|
||
<text v-if="vCard.rateInfo.ratePoint" v-for="(ratePoint, index) in vCard.rateInfo.ratePoint">
|
||
<text>{{ratePoint.name}}</text><text class="margin-lr-xs">{{ratePoint.score}}</text>
|
||
</text>
|
||
</view>
|
||
<view class="text-sm" v-if="vCard.rateInfo.commentNum">评价({{vCard.rateInfo.commentNum}})<text
|
||
class="text-bold text-gray cuIcon-right"></text></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 服务列表 -->
|
||
<view class="padding-top-sm padding-bottom-xl grid text-center col-4 grid-square">
|
||
<view v-for="(product,index) in item.goodsList" :key="index" class="bg-img"
|
||
:style="[{ backgroundImage:'url(' + product.goodsImgUrl + ')' }]" v-if="index < 3">
|
||
<view class="pic-down-text">
|
||
<view class="text-grey text-cut text-sm">{{product.goodsName}}</view>
|
||
<!-- <view class="text-price text-red text-cut">{{product.price}}</view> -->
|
||
</view>
|
||
</view>
|
||
<view v-if="item.goodsList && item.goodsList.length > 3">
|
||
<view v-for="(item, index) in 3" class="circle-point margin-right-xs bg-grey"></view>
|
||
</view>
|
||
</view>
|
||
<!-- 进店看看 -->
|
||
<view class="flex justify-between align-end margin-top-xs">
|
||
<view class="cu-capsule">
|
||
<view class='cu-tag bg-main-color'>
|
||
<text class='cuIcon-shopfill'></text>
|
||
</view>
|
||
<view class="cu-tag line-main-color">
|
||
{{item.deptName}}
|
||
</view>
|
||
</view>
|
||
<!-- <view class="margin-right-sm text-black">{{item.shopName}}</view> -->
|
||
<view class='cu-tag light bg-main-color radius' @click="showShopDetail(item)">进店看看<text
|
||
class="text-bold cuIcon-right"></text></view>
|
||
</view>
|
||
</view>
|
||
<load-status-bar ref="loadStatusBar" @loadMore="loadWorkerPage"></load-status-bar>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import horizontalNameCard from '@/components/common-card/horizontal-name-card.vue';
|
||
import loadStatusBar from '@/components/custom-bar/load-status-bar.vue';
|
||
|
||
export default {
|
||
name: 'worker-circle',
|
||
components: {
|
||
horizontalNameCard,
|
||
loadStatusBar
|
||
},
|
||
data() {
|
||
return {
|
||
workerInfos: [],
|
||
loadMoreStatus: '',
|
||
hasMoreData: false,
|
||
pageNum: 0,
|
||
pageSize: 0,
|
||
stickyTop: this.CustomBar,
|
||
searchInfo: {},
|
||
areaList: [],
|
||
areaMultiIndex: [0, 0, 0],
|
||
categoryList: [],
|
||
categoryMultiIndex: [0, 0, 0]
|
||
}
|
||
},
|
||
onReady() {
|
||
this.loadData();
|
||
},
|
||
methods: {
|
||
async loadData() {
|
||
this.pageSize = this.$globalData.initPageSize;
|
||
this.loadCategoryList();
|
||
await this.loadRegionList();
|
||
this.searchInfo.area = [this.areaList[0][0], this.areaList[1][0], this.areaList[2][0]]
|
||
this.searchGoods();
|
||
},
|
||
async reloadData(params = {}) {
|
||
this.pageNum = 0;
|
||
this.workerInfos = [];
|
||
this.loadWorkerPage(params);
|
||
},
|
||
async loadWorkerPage(params = {}) {
|
||
params.pageNum = this.pageNum;
|
||
params.pageSize = this.pageSize;
|
||
this.$refs.loadStatusBar.showLoading();
|
||
try {
|
||
let res = await this.$request.getWorkerList(params);
|
||
let rowsLength = res.rows.length;
|
||
if (rowsLength > 0) {
|
||
this.workerInfos = this.workerInfos.concat(res.rows);
|
||
this.pageNum++;
|
||
if (rowsLength === this.pageSize) {
|
||
this.$refs.loadStatusBar.showLoadMore();
|
||
}
|
||
}
|
||
this.$refs.loadStatusBar.showLoadOver();
|
||
} catch (e) {
|
||
console.error(e)
|
||
this.$refs.loadStatusBar.showLoadErr();
|
||
}
|
||
},
|
||
async loadCategoryList(idArr) {
|
||
let typeList = await this.$request.listByStep();
|
||
typeList = typeList.data;
|
||
let col1Id = idArr ? idArr[0] : typeList[0].goodsCategoryId;
|
||
let subTypeList = await this.$request.listByStep({
|
||
goodsCategoryId: col1Id
|
||
});
|
||
subTypeList = subTypeList.data;
|
||
let col2Id = idArr ? idArr[1] : subTypeList[0].goodsCategoryId;
|
||
let subSubTypeList = await this.$request.listByStep({
|
||
goodsCategoryId: col2Id
|
||
});
|
||
subSubTypeList = subSubTypeList.data;
|
||
this.categoryList.push(typeList);
|
||
this.categoryList.push(subTypeList);
|
||
this.categoryList.push(subSubTypeList);
|
||
},
|
||
async loadRegionList() {
|
||
let regionList = await this.$request.areaListByStep();
|
||
regionList = regionList.data;
|
||
let subRegionList = [];
|
||
let subSubRegionList = [];
|
||
if (regionList && regionList.length > 0) {
|
||
subRegionList = await this.$request.areaListByStep({
|
||
parentCode: regionList[0].areaCode
|
||
});
|
||
subRegionList = subRegionList.data;
|
||
}
|
||
if (subRegionList && subRegionList.length > 0) {
|
||
subSubRegionList = await this.$request.areaListByStep({
|
||
parentCode: subRegionList[0].areaCode
|
||
});
|
||
subSubRegionList = subSubRegionList.data;
|
||
}
|
||
this.areaList.push(regionList);
|
||
this.areaList.push(subRegionList);
|
||
this.areaList.push(subSubRegionList);
|
||
},
|
||
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.searchInfo.area = chosenArea;
|
||
this.searchGoods();
|
||
},
|
||
async regionColChange(e) {
|
||
let colObj = e.detail;
|
||
if (colObj.column == 0) {
|
||
// 通过一级查二级
|
||
let subAreaList = await this.$request.areaListByStep({
|
||
parentCode: this.areaList[0][colObj.value].areaCode
|
||
});
|
||
subAreaList = subAreaList.data;
|
||
let subSubAreaList = [];
|
||
if (subAreaList.length) {
|
||
subSubAreaList = await this.$request.areaListByStep({
|
||
parentCode: subAreaList[0].areaCode
|
||
});
|
||
subSubAreaList = subSubAreaList.data;
|
||
}
|
||
this.areaList.pop();
|
||
this.areaList.pop();
|
||
this.areaList.push(subAreaList);
|
||
this.areaList.push(subSubAreaList);
|
||
this.areaMultiIndex = [colObj.value, 0, 0];
|
||
} else if (colObj.column == 1) {
|
||
// 通过二级查三级
|
||
let subAreaList = await this.$request.areaListByStep({
|
||
parentCode: this.areaList[1][colObj.value].areaCode
|
||
});
|
||
subAreaList = subAreaList.data;
|
||
this.areaList.pop();
|
||
this.areaList.push(subAreaList);
|
||
this.areaMultiIndex = [this.areaMultiIndex[0], colObj.value, 0];
|
||
}
|
||
},
|
||
async 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.searchInfo.category = chosenCategory;
|
||
this.searchGoods();
|
||
},
|
||
async categoryColChange(e) {
|
||
let colObj = e.detail;
|
||
if (colObj.column == 0) {
|
||
// 通过一级查询二级
|
||
let subTypeList = await this.$request.listByStep({
|
||
goodsCategoryId: this.categoryList[0][colObj.value].goodsCategoryId
|
||
});
|
||
subTypeList = subTypeList.data;
|
||
let subSubTypeList = await this.$request.listByStep({
|
||
goodsCategoryId: subTypeList[0].goodsCategoryId
|
||
});
|
||
subSubTypeList = subSubTypeList.data;
|
||
this.categoryList.pop();
|
||
this.categoryList.pop();
|
||
this.categoryList.push(subTypeList);
|
||
this.categoryList.push(subSubTypeList);
|
||
this.categoryMultiIndex = [colObj.value, 0, 0];
|
||
} else if (colObj.column == 1) {
|
||
// 通过二级查三级
|
||
let subSubTypeList = await this.$request.listByStep({
|
||
goodsCategoryId: this.categoryList[1][colObj.value].goodsCategoryId
|
||
});
|
||
subSubTypeList = subSubTypeList.data;
|
||
this.categoryList.pop();
|
||
this.categoryList.push(subSubTypeList);
|
||
this.categoryMultiIndex = [this.categoryMultiIndex[0], colObj.value, 0];
|
||
}
|
||
},
|
||
searchGoods() {
|
||
let params = {
|
||
goodsCategoryId: this.searchInfo.category && this.searchInfo.category.length > 1 ? this.searchInfo.category[2].goodsCategoryId : null,
|
||
areaId: this.searchInfo.area[2].areaId,
|
||
workerName: this.searchInfo.inputWorkerName
|
||
};
|
||
this.reloadData(params);
|
||
},
|
||
showShopDetail(shopInfo) {
|
||
uni.navigateTo({
|
||
url: '../product/shop-detail?shopInfo=' + encodeURIComponent(JSON.stringify(shopInfo))
|
||
})
|
||
},
|
||
getLastSplitAreaName(mergeName) {
|
||
let arr = mergeName.split(",");
|
||
return arr[arr.length - 1];
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.grid.grid-square {
|
||
overflow: visible;
|
||
}
|
||
|
||
.grid.grid-square>view {
|
||
margin-right: 20rpx;
|
||
margin-bottom: 20rpx;
|
||
border-radius: 6rpx;
|
||
position: relative;
|
||
overflow: visible;
|
||
}
|
||
|
||
.pic-down-text {
|
||
margin-top: 100%;
|
||
width: 100%;
|
||
}
|
||
|
||
.circle-point {
|
||
display: inline-block;
|
||
width: 6px;
|
||
height: 6px;
|
||
border-radius: 50%;
|
||
margin-top: 50%;
|
||
}
|
||
</style>
|