clunt
/
dingdong-mall
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

师傅圈展示其他城市师傅

This commit is contained in:
donqi 2022-12-28 23:32:27 +08:00
parent cc229f3cfb
commit 29eb03800e
4 changed files with 198 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
common/js/request.js
View File

@ -90,7 +90,7 @@ export default {
let curLocation = uni.getStorageSync('curLocation'); let curLocation = uni.getStorageSync('curLocation');
if (curLocation && curLocation.updateTimes) { if (curLocation && curLocation.updateTimes) {
let curTimes = new Date().getTime(); let curTimes = new Date().getTime();
let deltaSeconds = curTimes - Number(curLocation.updateTimes); let deltaSeconds = curTimes - curLocation.updateTimes;
if (deltaSeconds >= 15 * 60 * 1000) { if (deltaSeconds >= 15 * 60 * 1000) {
// 设定重新获取定位的时间间隔为15分钟 // 设定重新获取定位的时间间隔为15分钟
await this.wxGetLocation(); await this.wxGetLocation();

12
pages/index/home.vue
View File

@ -89,7 +89,11 @@
<vertical-card :list="hotServCategory" :multiPicMode="true" title="大家都在买"></vertical-card> <vertical-card :list="hotServCategory" :multiPicMode="true" title="大家都在买"></vertical-card>
</view> </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>
<view class="margin-top-sm margin-lr-sm waterfall-grid"> <view class="margin-top-sm margin-lr-sm waterfall-grid">
<view @click="showDetails(item)" v-for="(item, index) in productList" class="waterfall-grid-item"> <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> <load-status-bar ref="loadStatusBar1" @loadMore="loadProductPage"></load-status-bar>
</view> </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>
<view class="margin-top-sm margin-lr-sm waterfall-grid"> <view class="margin-top-sm margin-lr-sm waterfall-grid">
<view @click="showDetails(item)" v-for="(item, index) in otherCityProductList" class="waterfall-grid-item"> <view @click="showDetails(item)" v-for="(item, index) in otherCityProductList" class="waterfall-grid-item">

249
pages/index/worker-home.vue
View File

@ -29,77 +29,160 @@
</view> </view>
</view> </view>
</view> </view>
<!-- 师傅卡片 --> <!-- 当前定位城市师傅 -->
<view v-for="(item, index) in workerInfos" class="bg-white padding margin-lr-sm margin-tb-sm shadow-warp"> <view>
<!-- 师傅信息 --> <!-- 师傅卡片 -->
<view class="solid-bottom padding-bottom-sm"> <view v-for="(item, index) in workerInfos" class="bg-white padding margin-lr-sm margin-tb-sm shadow-warp">
<view class="flex justify-start"> <!-- 师傅信息 -->
<view class="cu-avatar round" :style="'background-image:url(' + item.workerLogoUrl + '); width: 130rpx; height: 130rpx;'"></view> <view class="solid-bottom padding-bottom-sm">
<view class="margin-left-sm flex-column-between"> <view class="flex justify-start">
<view class="text-black text-xl">{{item.name}}</view> <view class="cu-avatar round" :style="'background-image:url(' + item.workerLogoUrl + '); width: 130rpx; height: 130rpx;'"></view>
<view class="text-sm"> <view class="margin-left-sm flex-column-between text-beside-avatar">
<view> <view class="text-black text-xl">{{item.name}}</view>
<text class="margin-right-xs">服务技能:</text> <view class="text-sm">
<text v-for="(skill, skillArrIndex) in item.goodsCategories"> <view>
<text>{{skill.goodsCategoryName}}</text> <text class="margin-right-xs">服务技能:</text>
<text v-if="skillArrIndex !== item.goodsCategories.length - 1">，</text> <text v-for="(skill, skillArrIndex) in item.goodsCategories">
</text> <text>{{skill.goodsCategoryName}}</text>
</view> <text v-if="skillArrIndex !== item.goodsCategories.length - 1">，</text>
<view> </text>
<text class="margin-right-xs">服务范围:</text> </view>
<text v-for="(area, areaArrIndex) in item.workerAreas"> <view>
<text>{{getLastSplitAreaName(area.mergerName)}}</text> <text class="margin-right-xs">服务范围:</text>
<text v-if="areaArrIndex !== item.workerAreas.length - 1">，</text> <text v-for="(area, areaArrIndex) in item.workerAreas">
</text> <text>{{getLastSplitAreaName(area.mergerName)}}</text>
<text v-if="areaArrIndex !== item.workerAreas.length - 1">，</text>
</text>
</view>
</view> </view>
</view> </view>
</view> </view>
</view> <view class="text-sm padding-top">
<view class="text-sm padding-top"> <view class="flex justify-between">
<view class="flex justify-between"> <text>总评分<text class="text-red text-xl margin-left-xs">5.0</text> /5.0分</text>
<text>总评分<text class="text-red text-xl margin-left-xs">5.0</text> /5.0分</text> <uni-rate :readonly="true" allow-half :value="5" />
<uni-rate :readonly="true" allow-half :value="5" /> </view>
</view> <view class="flex justify-between">
<view class="flex justify-between"> <view>
<view> <text v-if="vCard.rateInfo.ratePoint" v-for="(ratePoint, index) in vCard.rateInfo.ratePoint">
<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>{{ratePoint.name}}</text><text class="margin-lr-xs">{{ratePoint.score}}</text> </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 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>
<!-- 服务列表 -->
<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>
<!-- 服务列表 --> <load-status-bar ref="loadStatusBar1" @loadMore="loadWorkerPage"></load-status-bar>
<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>
<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> </view>
</template> </template>
@ -115,10 +198,12 @@
}, },
data() { data() {
return { return {
workerInfos: [], workerInfos: [],
otherCityWorkers: [],
loadMoreStatus: '', loadMoreStatus: '',
hasMoreData: false, hasMoreData: false,
pageNum: 0, pageNum: 0,
otherCityWorkersPageNum: 0,
pageSize: 0, pageSize: 0,
stickyTop: this.CustomBar, stickyTop: this.CustomBar,
searchInfo: {}, searchInfo: {},
@ -154,11 +239,14 @@
this.pageNum = this.$globalData.initPageNum; this.pageNum = this.$globalData.initPageNum;
this.workerInfos = []; this.workerInfos = [];
this.loadWorkerPage(params); this.loadWorkerPage(params);
this.otherCityWorkers = [];
this.loadOtherCityWorkerPage();
}, },
async loadWorkerPage(params = {}) { async loadWorkerPage(params = {}) {
params.pageNum = this.pageNum; params.pageNum = this.pageNum;
params.pageSize = this.pageSize; params.pageSize = this.pageSize;
this.$refs.loadStatusBar.showLoading(); this.$refs.loadStatusBar1.showLoading();
try { try {
let res = await this.$request.getWorkerList(params); let res = await this.$request.getWorkerList(params);
let rowsLength = res.rows.length; let rowsLength = res.rows.length;
@ -166,13 +254,34 @@
this.workerInfos = this.workerInfos.concat(res.rows); this.workerInfos = this.workerInfos.concat(res.rows);
this.pageNum++; this.pageNum++;
if (rowsLength === this.pageSize) { if (rowsLength === this.pageSize) {
this.$refs.loadStatusBar.showLoadMore(); this.$refs.loadStatusBar1.showLoadMore();
} }
} }
this.$refs.loadStatusBar.showLoadOver(); this.$refs.loadStatusBar1.showLoadOver();
} catch (e) { } catch (e) {
console.error(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) { async loadCategoryList(idArr) {
@ -383,5 +492,9 @@
height: 6px; height: 6px;
border-radius: 50%; border-radius: 50%;
margin-top: 50%; margin-top: 50%;
}
.text-beside-avatar {
width: 75%;
} }
</style> </style>

6
style/default.css
View File

@ -129,4 +129,10 @@
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
}
.divider {
background: #E0E3DA;
width: 100%;
height: 5rpx;
} }