dingdong-mall/pages/index/worker-home.vue

627 lines
23 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<c-tabbar :current="1">
<view>
<!-- 顶部操作条 -->
<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[1].areaName : areaList[1][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>
<!-- 师傅卡片 -->
<view v-for="(item, index) in workerInfos" :key="item.workerId"
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(' + defaultHead(item.workerLogoUrl) + '); width: 130rpx; height: 130rpx;'">
</view>
<view class="margin-left-sm flex-column-between text-beside-avatar">
<view class="text-black text-xl">{{item.name}}</view>
<view class="text-sm">
<view :class="isShowAllAreaCurCity[index] ? '' : 'certern-height'">
<text class="margin-right-xs">服务技能:</text>
<text>{{item.goodsCategories}}</text>
</view>
<view :class="isShowAllAreaCurCity[index] ? '' : 'certern-height'">
<text class="margin-right-xs">服务范围:</text>
<text>{{item.workerAreas}}</text>
</view>
<view v-if="item.workerAreas.length>55 || item.goodsCategories.length>55" class="text-main-color bg-white padding-top-sm"
@click="showAllArea('CurCity', index)">
<text>查看全部服务技能范围</text>
<text :class="'cuIcon-' + (isShowAllAreaCurCity[index] ? 'fold' : 'unfold')"></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>
<my-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" :key="index">
<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" v-if="item.goodsList.length">
<view v-for="(product,index) in item.goodsList" :key="product.goodsId" 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 class="circle-point margin-right-xs bg-grey"></view>
<view class="circle-point margin-right-xs bg-grey"></view>
<view 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="loadStatusBar1" @loadMore="loadWorkerPage"></load-status-bar>
</view>
<!-- 其他城市师傅 -->
<view class="text-gray text-lg text-center margin flex align-center">
<view class="divider" />
<text class="margin-lr-sm" style="flex-basis: 85%;">其他城市师傅</text>
<view class="divider" />
</view>
<view>
<!-- 师傅卡片 -->
<view v-for="(item, index) in otherCityWorkers" :key="item.workerId"
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(' + defaultHead(item.workerLogoUrl) + '); width: 130rpx; height: 130rpx;'">
</view>
<view class="margin-left-sm flex-column-between text-beside-avatar">
<view class="text-black text-xl">{{item.name}}</view>
<view class="text-sm">
<view :class="item.showAllAreas ? '' : 'certern-height'">
<text class="margin-right-xs">服务技能:</text>
<text>{{item.goodsCategories}}</text>
<!-- <text v-for="(skill, skillArrIndex) in item.goodsCategories"
:key="skill.goodsCategoryId">
<text>{{skill.goodsCategoryName}}</text>
<text v-if="skillArrIndex !== item.goodsCategories.length - 1"></text>
</text> -->
</view>
<view :class="item.showAllAreas ? '' : 'certern-height'">
<text class="margin-right-xs">服务范围:</text>
<text>{{item.workerAreas}}</text>
<!-- <text v-for="(area, areaArrIndex) in item.workerAreas" :key="area.workerAreaId">
<text>{{getLastSplitAreaName(area.mergerName)}}</text>
<text v-if="areaArrIndex !== item.workerAreas.length - 1"></text>
</text> -->
</view>
<view v-if="item.workerAreas.length>55 || item.goodsCategories.length>55" class="text-main-color bg-white padding-top-sm"
@click="showAllArea('OtherCity', index)">
<text>查看全部服务技能范围</text>
<text
:class="'cuIcon-' + (item.showAllAreas ? 'fold' : 'unfold')"></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>
<my-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" :key="index">
<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" v-if="item.goodsList.length">
<view v-for="(product,index) in item.goodsList" :key="product.goodsId" 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 class="circle-point margin-right-xs bg-grey"></view>
<view class="circle-point margin-right-xs bg-grey"></view>
<view 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="loadStatusBar2" @loadMore="loadOtherCityWorkerPage"></load-status-bar>
</view>
<!-- <view class="occupancy-bottom-bar"></view> -->
</view>
</c-tabbar>
</template>
<script>
import horizontalNameCard from '@/components/common-card/horizontal-name-card.vue';
import loadStatusBar from '@/components/custom-bar/load-status-bar.vue';
import myUniRate from '@/components/uni-rate/my-uni-rate.vue';
import CTabbar from '@/components/CTabbar.vue';
export default {
name: 'worker-circle',
components: {
horizontalNameCard,
loadStatusBar,
myUniRate,
CTabbar
},
data() {
return {
workerInfos: [],
otherCityWorkers: [],
loadMoreStatus: '',
hasMoreData: false,
pageNum: 1,
otherCityWorkersPageNum: 1,
pageSize: 10,
stickyTop: this.CustomBar,
searchInfo: {},
curPositionDistrictId: -1,
areaList: [],
areaMultiIndex: [0, 0],
categoryList: [],
categoryMultiIndex: [0, 0, 0],
isShowAllAreaCurCity: {},
isShowAllAreaOtherCity: {}
}
},
onReady() {
this.loadData();
},
async onShareAppMessage(e) {
let shareInfo = null;
if (e && e.target && e.target.dataset) {
shareInfo = e.target.dataset.shareInfo;
}
if (!this.curUserInfo) {
this.curUserInfo = await this.$request.getCurUserNoCache();
if (!this.curUserInfo) {
uni.showToast({
title: '请前往“我的”完成登录',
icon: 'none'
})
return;
}
}
if (!shareInfo) {
shareInfo = {
title: '家政服务就找工圈子',
path: '/pages/index/home?distributor=' + this.curUserInfo.customerId,
imageUrl: 'http://gqz.opsoul.com/sys/group-selfie.png'
}
}
return shareInfo;
},
methods: {
async loadData() {
// this.pageNum = this.$globalData.initPageNum;
// this.pageSize = this.$globalData.initPageSize;
// 获取当前定位
await this.getCurAreaArr();
await this.loadRegionList();
this.loadCategoryList();
this.searchGoods();
},
async getCurAreaArr() {
let areaArr = await this.$request.getCurArea();
if (areaArr) {
this.searchInfo.area = [areaArr[1], areaArr[2]];
this.curPositionDistrictId = this.searchInfo.area[1].areaId;
}
},
async reloadData(params = {}) {
this.pageNum = this.$globalData.initPageNum;
this.workerInfos = [];
this.loadWorkerPage(params);
this.otherCityWorkers = [];
this.loadOtherCityWorkerPage();
},
async loadWorkerPage(params = {}) {
if (this.searchInfo.area && this.searchInfo.area.length && this.searchInfo.area[this.searchInfo.area
.length - 1].isAll) {
params.areaIds = this.searchInfo.area[this.searchInfo.area.length - 1].areaIds;
params.areaId = null;
}
params.pageNum = this.pageNum;
params.pageSize = this.pageSize;
params.justShowCurWorkerArea = true;
this.$refs.loadStatusBar1.showLoading();
try {
let res = await this.$request.getWorkerList(params);
let rowsLength = res.rows.length;
if (rowsLength > 0) {
for (let i = 0; i < res.rows.length; i++) {
let curDistrictWorkerAreas = [];
let notCurDistrictWorkerAreas = [];
let sortedWorkerAreas = [];
for (let j = 0; j < res.rows[i].workerAreas.length; j++) {
let curWorkerArea = res.rows[i].workerAreas[j];
if (this.areaMultiIndex[1] === 0 && curWorkerArea.districtId === this
.curPositionDistrictId) {
curDistrictWorkerAreas.push(curWorkerArea);
} else {
notCurDistrictWorkerAreas.push(curWorkerArea);
}
}
sortedWorkerAreas = curDistrictWorkerAreas.concat(notCurDistrictWorkerAreas);
// res.rows[i].workerAreas = sortedWorkerAreas;
res.rows[i].goodsCategories = res.rows[i].goodsCategories.map(ii => ii.goodsCategoryName)
.join('');
res.rows[i].workerAreas = sortedWorkerAreas.map(ii => this.getLastSplitAreaName(ii.mergerName))
.join('');
}
this.workerInfos = Object.freeze(this.workerInfos.concat(res.rows));
this.pageNum++;
this.$refs.loadStatusBar1.showLoadMore();
} else {
this.$refs.loadStatusBar1.showLoadOver();
}
} catch (e) {
console.error(e)
this.$refs.loadStatusBar1.showLoadErr();
}
},
async loadOtherCityWorkerPage(params = {}) {
params.pageNum = this.otherCityWorkersPageNum;
params.pageSize = this.pageSize;
params.exceptParentAreaId = this.searchInfo.area && this.searchInfo.area.length ? this.searchInfo.area[
1].areaId : null;
this.$refs.loadStatusBar2.showLoading();
try {
let res = await this.$request.getWorkerList(params, params.pageNum, params.pageSize);
let rowsLength = res.rows.length;
if (rowsLength > 0) {
for (let i = 0; i < rowsLength; i++) {
res.rows[i].goodsCategories = res.rows[i].goodsCategories.map(ii => ii.goodsCategoryName)
.join('');
res.rows[i].workerAreas = res.rows[i].workerAreas.map(ii => this.getLastSplitAreaName(ii.mergerName))
.join('');
res.rows[i].showAllAreas = false
}
// this.otherCityWorkers = Object.freeze(this.otherCityWorkers.concat(res.rows));
// this.otherCityWorkers = this.otherCityWorkers.concat(Object.freeze(res.rows));
this.otherCityWorkers = this.otherCityWorkers.concat(res.rows);
this.otherCityWorkersPageNum++;
this.$refs.loadStatusBar2.showLoadMore();
} else {
this.$refs.loadStatusBar2.showLoadOver();
}
} catch (e) {
console.error(e)
this.$refs.loadStatusBar2.showLoadErr();
}
},
async loadCategoryList(idArr) {
let res = await this.$request.listByStep({
type: 1
});
res = res.data;
let typeList = await this.$request.listByStepWithAllNode({
goodsCategoryId: res[0].goodsCategoryId,
type: 1
});
typeList = typeList.data;
let subTypeList = [];
let subSubTypeList = [];
if (typeList && typeList.length) {
let col1Id = typeList[0].goodsCategoryId;
subTypeList = await this.$request.listByStepWithAllNode({
goodsCategoryId: col1Id
});
subTypeList = subTypeList.data;
}
// if (subTypeList && subTypeList.length) {
// let col2Id = subTypeList[0].goodsCategoryId;
// subSubTypeList = await this.$request.listByStepWithAllNode({
// goodsCategoryId: col2Id
// });
// subSubTypeList = subSubTypeList.data;
// }
this.categoryList.push(typeList);
this.categoryList.push(subTypeList);
this.categoryList.push(subSubTypeList);
},
async loadRegionList() {
// let area = this.searchInfo.area && this.searchInfo.area.length ? this.searchInfo.area : null
// let regionList = await this.$request.areaListByStep({
// areaId: area == null ? null : area[0].areaId
// });
// regionList = regionList.data;
let subRegionList = [this.searchInfo.area[0]];
let subSubRegionList = [];
// if (regionList && regionList.length > 0) {
// let params = {};
// if (area != null) {
// params = {
// areaId: area[1].areaId,
// parentCode: area[0].areaId
// }
// } else {
// params = {
// parentCode: regionList[0].areaCode
// }
// }
// subRegionList = await this.$request.areaListByStep(params);
// subRegionList = subRegionList.data;
// }
if (subRegionList && subRegionList.length > 0) {
subSubRegionList = await this.$request.areaListByStep({
parentCode: subRegionList[0].areaCode
});
subSubRegionList = subSubRegionList.data;
let allAreaIdsOfSubSubRegionList = [];
subSubRegionList.forEach(region => {
allAreaIdsOfSubSubRegionList.push(region.areaId)
})
let subSubRegionListWithAll = [{
areaIds: allAreaIdsOfSubSubRegionList,
areaId: subRegionList[0].areaId,
isAll: true,
areaName: subRegionList[0].areaName
}].concat(subSubRegionList);
subSubRegionList = subSubRegionListWithAll;
}
this.areaList = [];
// this.areaList.push(regionList);
this.areaList.push(subRegionList);
this.areaList.push(subSubRegionList);
this.searchInfo.area = [this.areaList[0][0], this.areaList[1][0]];
},
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]]);
}
let lastCategory = null;
for (let i = chosenCategory.length - 1; i >= 0; i--) {
if (i === 0) {
lastCategory = chosenCategory[i];
if (lastCategory && lastCategory.isAllNode) {
let res = await this.$request.listByStep({
type: 1
});
lastCategory = res.data[0];
}
break;
}
lastCategory = chosenCategory[i];
if (!lastCategory || lastCategory.isAllNode) {
lastCategory = chosenCategory[i - 1];
continue;
}
break;
}
chosenCategory[chosenCategory.length - 1] = lastCategory;
this.searchInfo.category = chosenCategory;
this.searchGoods();
},
async categoryColChange(e) {
let colObj = e.detail;
if (colObj.column == 0) {
// 通过一级查询二级
let subTypeList = await this.$request.listByStepWithAllNode({
goodsCategoryId: this.categoryList[0][colObj.value].goodsCategoryId,
isAllNode: this.categoryList[0][colObj.value].isAllNode
});
subTypeList = subTypeList.data;
// let subSubTypeList = await this.$request.listByStepWithAllNode({
// goodsCategoryId: subTypeList[0].goodsCategoryId
// });
// subSubTypeList = subSubTypeList.data;
this.categoryList.pop();
this.categoryList.pop();
this.categoryList.push(subTypeList);
this.categoryList.push([]);
this.categoryMultiIndex = [colObj.value, 0, 0];
} else if (colObj.column == 1) {
// 通过二级查三级
let subSubTypeList = await this.$request.listByStepWithAllNode({
goodsCategoryId: this.categoryList[1][colObj.value].goodsCategoryId,
isAllNode: this.categoryList[1][colObj.value].isAllNode
});
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,
workerName: this.searchInfo.inputWorkerName
};
if (this.searchInfo.area && this.searchInfo.area.length) {
params.areaId = this.searchInfo.area[this.searchInfo.area.length - 1].areaId;
}
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];
},
showAllArea(type, index) {
const key = type === 'OtherCity' ? 'otherCityWorkers' : 'workerInfos'
const item = this[key][index]
item.showAllAreas = !item.showAllAreas
this.$set( this[key], index, item)
// let arr = this["isShowAllArea" + type];
// if (arr[index] == undefined) {
// arr[index] = false;
// }
// this.$set(this["isShowAllArea" + type], index, !arr[index])
// console.log(this["isShowAllArea" + type]);
},
defaultHead(url) {
if(url === 'https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132') {
return 'http://gqz.opsoul.com/2741722238771_.pic.jpg'
}
return url
}
}
}
</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%;
}
.text-beside-avatar {
width: 75%;
}
.certern-height {
max-height: 100rpx;
overflow: hidden;
}
</style>