273 lines
8.8 KiB
Vue
273 lines
8.8 KiB
Vue
<template>
|
||
<view>
|
||
<!-- 顶部操作条 -->
|
||
<cu-custom :bgColor="'bg-main-color'" :isBack="true">
|
||
<block slot="backText">返回</block>
|
||
<block slot="content">店铺主页</block>
|
||
</cu-custom>
|
||
<!-- 店铺介绍 -->
|
||
<view class="bg-white padding solid-bottom">
|
||
<view class="flex justify-start">
|
||
<view class="cu-avatar round"
|
||
:style="'background-image:url(' + shopInfo.workerLogoUrl + '); width: 130rpx; height: 130rpx;'">
|
||
</view>
|
||
<view class="margin-left-sm flex-column-between">
|
||
<view class="text-black text-xl">{{shopInfo.name}}</view>
|
||
<view>
|
||
<view>
|
||
<text class="cuIcon-form margin-right-xs text-main-color"></text>
|
||
<text class="margin-right-xs">企业认证</text>
|
||
</view>
|
||
<view>
|
||
<text class="cuIcon-location margin-right-xs text-main-color"></text>
|
||
<text class="margin-right-xs">服务范围:</text>
|
||
<text v-for="(area, areaArrIndex) in shopInfo.workerAreas">
|
||
<text>{{getLastSplitAreaName(area.mergerName)}}</text>
|
||
<text v-if="areaArrIndex !== shopInfo.workerAreas.length - 1">，</text>
|
||
</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 店铺评分 -->
|
||
<view class="bg-white padding text-sm padding-top-xs solid-bottom">
|
||
<view class="flex justify-between">
|
||
<text>总评分：<text class="text-red text-xl">5.0</text> / 5.0分</text>
|
||
<uni-rate :readonly="true" allow-half :value="5" />
|
||
</view>
|
||
<view>
|
||
<text>准时</text><text class="margin-lr-xs">5.0</text>
|
||
<text>态度</text><text class="margin-lr-xs">5.0</text>
|
||
<text>技能</text><text class="margin-lr-xs">5.0</text>
|
||
</view>
|
||
</view>
|
||
<!-- 店铺服务说明 -->
|
||
<view class="padding bg-white text-sm">
|
||
<view>
|
||
<text>服务类目：</text>
|
||
<text v-for="(skill, skillArrIndex) in shopInfo.goodsCategories">
|
||
<text>{{skill.goodsCategoryName}}</text>
|
||
<text v-if="skillArrIndex !== shopInfo.goodsCategories.length - 1">，</text>
|
||
</text>
|
||
</view>
|
||
<view>
|
||
<text>附加服务：</text>
|
||
<radio-group @change="changeAdditionalServId">
|
||
<label class="radio margin-right-sm" v-for="(item, index) in additionalServ">
|
||
<radio style="transform:scale(0.7)" class="main-color" :value="item.id" disabled/>
|
||
<text class="margin-left-xs">{{item.name}}</text>
|
||
</label>
|
||
</radio-group>
|
||
</view>
|
||
<view>
|
||
<text>特殊技能：</text>
|
||
<text v-for="(sSkill, sSkillArrIndex) in shopInfo.specialSkills">
|
||
<text>{{sSkill.specialSkillName}}</text>
|
||
<text v-if="sSkillArrIndex !== shopInfo.specialSkills.length - 1">，</text>
|
||
</text>
|
||
</view>
|
||
</view>
|
||
<!-- 本店铺服务列表 -->
|
||
<view class="bg-white">
|
||
<view class="margin-top-sm 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 v-model="searchInfo.goodsName" @confirm="searchGoods" :adjust-position="true" type="text" placeholder="搜索本店铺"
|
||
confirm-type="search"></input>
|
||
</view>
|
||
<!-- <view class="action">
|
||
<text>筛选</text>
|
||
<text class="cuIcon-filter"></text>
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
<!-- 服务列表 -->
|
||
<view class="padding-lr padding-bottom">
|
||
<view class="solid-bottom margin-bottom-sm padding-bottom-sm" @click="showDetails(item)"
|
||
v-for="(item, index) in productList">
|
||
<horizontal-goods-card :ifShowServArea="true" :product="item"></horizontal-goods-card>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
// import horizontalNameCard from '@/components/common-card/horizontal-name-card.vue';
|
||
import horizontalGoodsCard from '@/components/goods-card/horizontal-goods-card.vue';
|
||
|
||
export default {
|
||
components: {
|
||
// horizontalNameCard,
|
||
horizontalGoodsCard
|
||
},
|
||
data() {
|
||
return {
|
||
shopInfo: {},
|
||
productList: [],
|
||
additionalServ: [{
|
||
id: 1,
|
||
name: '58速运'
|
||
}, {
|
||
id: 2,
|
||
name: '货拉拉'
|
||
}, {
|
||
id: 3,
|
||
name: '搬货服务'
|
||
}],
|
||
searchInfo: {},
|
||
areaList: [],
|
||
areaMultiIndex: [0, 0, 0],
|
||
categoryList: [],
|
||
stickyTop: this.CustomBar
|
||
}
|
||
},
|
||
onLoad(option) {
|
||
const params = JSON.parse(decodeURIComponent(option.shopInfo));
|
||
this.loadData(params);
|
||
},
|
||
methods: {
|
||
async loadData(params) {
|
||
// this.shopInfo = await this.$api.data('shopInfo');
|
||
let res = await this.$request.getWorkerAllDetailById({
|
||
workerId: params.workerId
|
||
})
|
||
this.shopInfo = res.data;
|
||
this.loadCategoryList();
|
||
await this.loadRegionList();
|
||
// 获取当前定位
|
||
await this.getCurAreaArr();
|
||
this.searchGoods();
|
||
},
|
||
async getCurAreaArr() {
|
||
let areaArr = await this.$request.getCurArea();
|
||
if (areaArr) {
|
||
this.searchInfo.area = areaArr;
|
||
} else {
|
||
this.searchInfo.area = [this.areaList[0][0], this.areaList[1][0], this.areaList[2][0]];
|
||
}
|
||
},
|
||
async loadProductData(params = {}) {
|
||
params = {
|
||
status: 0,
|
||
...params
|
||
}
|
||
let res = await this.$request.qryProductPage(params);
|
||
this.productList = res[1].data.rows;
|
||
},
|
||
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];
|
||
}
|
||
},
|
||
searchGoods() {
|
||
let params = {
|
||
areaId: this.searchInfo.area[2].areaId,
|
||
goodsName: this.searchInfo.goodsName,
|
||
workerId: this.shopInfo.workerId
|
||
};
|
||
this.loadProductData(params);
|
||
},
|
||
showDetails(productItem) {
|
||
let params = {
|
||
goodsId: productItem.goodsId
|
||
}
|
||
uni.navigateTo({
|
||
url: '/pages/product/product-detail?params=' + encodeURIComponent(JSON.stringify(params))
|
||
});
|
||
},
|
||
getLastSplitAreaName(mergeName) {
|
||
let arr = mergeName.split(",");
|
||
return arr[arr.length - 1];
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
|
||
</style>
|