师傅圈展示其他城市师傅
This commit is contained in:
donqi
parent
cc229f3cfb
commit
29eb03800e
|
|
@ -90,7 +90,7 @@ export default {
|
|||
let curLocation = uni.getStorageSync('curLocation');
|
||||
if (curLocation && curLocation.updateTimes) {
|
||||
let curTimes = new Date().getTime();
|
||||
let deltaSeconds = curTimes - Number(curLocation.updateTimes);
|
||||
let deltaSeconds = curTimes - curLocation.updateTimes;
|
||||
if (deltaSeconds >= 15 * 60 * 1000) {
|
||||
// 设定重新获取定位的时间间隔为15分钟
|
||||
await this.wxGetLocation();
|
||||
|
|
|
|||
|
|
@ -89,7 +89,11 @@
|
|||
<vertical-card :list="hotServCategory" :multiPicMode="true" title="大家都在买"></vertical-card>
|
||||
</view>
|
||||
<!-- 当前城市服务列表 -->
|
||||
<view class="text-gray text-lg text-center margin">————当前城市————</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>
|
||||
<view class="margin-top-sm margin-lr-sm waterfall-grid">
|
||||
<view @click="showDetails(item)" v-for="(item, index) in productList" class="waterfall-grid-item">
|
||||
|
|
@ -99,7 +103,11 @@
|
|||
<load-status-bar ref="loadStatusBar1" @loadMore="loadProductPage"></load-status-bar>
|
||||
</view>
|
||||
<!-- 其他城市服务列表 -->
|
||||
<view class="text-gray text-lg text-center margin">————其他城市————</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>
|
||||
<view class="margin-top-sm margin-lr-sm waterfall-grid">
|
||||
<view @click="showDetails(item)" v-for="(item, index) in otherCityProductList" class="waterfall-grid-item">
|
||||
|
|
|
|||
|
|
@ -29,77 +29,160 @@
|
|||
</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 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 text-beside-avatar">
|
||||
<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>
|
||||
<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 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 class="text-sm" v-if="vCard.rateInfo.commentNum">评价({{vCard.rateInfo.commentNum}})<text
|
||||
class="text-bold text-gray cuIcon-right"></text></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>
|
||||
<!-- 服务列表 -->
|
||||
<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>
|
||||
<load-status-bar ref="loadStatusBar1" @loadMore="loadWorkerPage"></load-status-bar>
|
||||
</view>
|
||||
<load-status-bar ref="loadStatusBar" @loadMore="loadWorkerPage"></load-status-bar>
|
||||
|
||||
<!-- 其他城市师傅 -->
|
||||
<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" 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 text-beside-avatar">
|
||||
<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="loadStatusBar2" @loadMore="loadOtherCityWorkerPage"></load-status-bar>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
|
@ -115,10 +198,12 @@
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
workerInfos: [],
|
||||
workerInfos: [],
|
||||
otherCityWorkers: [],
|
||||
loadMoreStatus: '',
|
||||
hasMoreData: false,
|
||||
pageNum: 0,
|
||||
otherCityWorkersPageNum: 0,
|
||||
pageSize: 0,
|
||||
stickyTop: this.CustomBar,
|
||||
searchInfo: {},
|
||||
|
|
@ -154,11 +239,14 @@
|
|||
this.pageNum = this.$globalData.initPageNum;
|
||||
this.workerInfos = [];
|
||||
this.loadWorkerPage(params);
|
||||
|
||||
this.otherCityWorkers = [];
|
||||
this.loadOtherCityWorkerPage();
|
||||
},
|
||||
async loadWorkerPage(params = {}) {
|
||||
params.pageNum = this.pageNum;
|
||||
params.pageSize = this.pageSize;
|
||||
this.$refs.loadStatusBar.showLoading();
|
||||
this.$refs.loadStatusBar1.showLoading();
|
||||
try {
|
||||
let res = await this.$request.getWorkerList(params);
|
||||
let rowsLength = res.rows.length;
|
||||
|
|
@ -166,13 +254,34 @@
|
|||
this.workerInfos = this.workerInfos.concat(res.rows);
|
||||
this.pageNum++;
|
||||
if (rowsLength === this.pageSize) {
|
||||
this.$refs.loadStatusBar.showLoadMore();
|
||||
this.$refs.loadStatusBar1.showLoadMore();
|
||||
}
|
||||
}
|
||||
this.$refs.loadStatusBar.showLoadOver();
|
||||
this.$refs.loadStatusBar1.showLoadOver();
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
this.$refs.loadStatusBar.showLoadErr();
|
||||
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);
|
||||
let rowsLength = res.rows.length;
|
||||
if (rowsLength > 0) {
|
||||
this.otherCityWorkers = this.otherCityWorkers.concat(res.rows);
|
||||
this.otherCityWorkersPageNum++;
|
||||
if (rowsLength === this.pageSize) {
|
||||
this.$refs.loadStatusBar2.showLoadMore();
|
||||
}
|
||||
}
|
||||
this.$refs.loadStatusBar2.showLoadOver();
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
this.$refs.loadStatusBar2.showLoadErr();
|
||||
}
|
||||
},
|
||||
async loadCategoryList(idArr) {
|
||||
|
|
@ -383,5 +492,9 @@
|
|||
height: 6px;
|
||||
border-radius: 50%;
|
||||
margin-top: 50%;
|
||||
}
|
||||
|
||||
.text-beside-avatar {
|
||||
width: 75%;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -129,4 +129,10 @@
|
|||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.divider {
|
||||
background: #E0E3DA;
|
||||
width: 100%;
|
||||
height: 5rpx;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue