548 lines
18 KiB
Vue
548 lines
18 KiB
Vue
<template name="index">
|
|
<view>
|
|
<!-- 顶部操作条 -->
|
|
<!-- <cu-custom class="text-left">
|
|
<block slot="left-content">
|
|
<image :src="item.url" v-if="item.type=='image'"></image>
|
|
<text class="padding-left text-xl" style="float: left;">叮咚到家家政服务</text>
|
|
</block>
|
|
</cu-custom> -->
|
|
<!-- 轮播图-->
|
|
<swiper class="screen-swiper" :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="true" :circular="true"
|
|
:autoplay="true" interval="5000" duration="500">
|
|
<swiper-item v-for="(item,index) in swiperList" :key="item.id">
|
|
<image mode="aspectFill" :src="item.url" v-if="item.type=='image'"></image>
|
|
<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover"
|
|
v-if="item.type=='video'"></video>
|
|
</swiper-item>
|
|
</swiper>
|
|
<!-- 搜索栏 -->
|
|
<view class="cu-bar search bg-white">
|
|
<view class="search-form round">
|
|
<text class="cuIcon-search"></text>
|
|
<input @confirm="searchGoods" v-model="searchInfo.inputGoodsName" :adjust-position="true" type="text"
|
|
placeholder="输入搜索内容" confirm-type="search"></input>
|
|
</view>
|
|
<!-- 区域筛选picker -->
|
|
<view class="action">
|
|
<picker :mode="'multiSelector'" @change="regionChange" @columnchange="regionColChange"
|
|
:value="areaMultiIndex" :range-key="'areaName'" :range="areaList">
|
|
<text>{{searchInfo.area && searchInfo.area.length ? searchInfo.area[1].areaName : areaList[1][0].areaName}}</text>
|
|
<text class="cuIcon-location"></text>
|
|
</picker>
|
|
</view>
|
|
</view>
|
|
<view>
|
|
<view class="margin-lr-sm">
|
|
<!-- 大类 -->
|
|
<view class="flex justify-between text-black">
|
|
<view class="padding text-lg" @click="showProductCategories">
|
|
<text>分类</text>
|
|
<text class="cuIcon-apps text-main-color"></text>
|
|
<text class="cuIcon-triangledownfill"></text>
|
|
</view>
|
|
<view class="flex-twice">
|
|
<scroll-view scroll-x class="nav text-right" :scroll-with-animation="true" :scroll-left="scrollLeft">
|
|
<view class="cu-item" :class="index==tabCur?'text-main-color cur':''" v-if="index < 2"
|
|
v-for="(item,index) in categories" :key="item.goodsCategoryId" @tap="tabSelect($event, item)" :data-index="index">
|
|
{{item.goodsCategoryName}}
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
<!-- 热门细类 -->
|
|
<view class="cu-list grid no-border hot-sub-category" :class="['col-5']" :style="'padding-top: 10rpx'">
|
|
<view class="cu-item align-center" v-for="(item,index) in hotServCategory" :key="index" v-if="tabCur === 0 && index < 5"
|
|
@click="chooseCategory(item)">
|
|
<!-- <view class="hot-sub-category-icon" :class="['cuIcon-' + item.cuIcon,'text-' + item.color]">
|
|
<view class="cu-tag badge" v-if="item.badge!=0">
|
|
<block v-if="item.badge!=1">{{item.badge}}</block>
|
|
</view>
|
|
</view> -->
|
|
<view class="cu-avatar round"
|
|
:style="'width: 100rpx; height: 100rpx; background-image:url(' + item.cover + ');'"></view>
|
|
<text>{{item.name}}</text>
|
|
</view>
|
|
<view class="cu-item align-center" v-for="(item,index) in hotFittingsCategory" :key="index" v-if="tabCur === 1 && index < 5"
|
|
@click="chooseCategory(item)">
|
|
<view class="cu-avatar round"
|
|
:style="'width: 100rpx; height: 100rpx; background-image:url(' + item.cover + ');'"></view>
|
|
<text>{{item.name}}</text>
|
|
</view>
|
|
</view>
|
|
<!-- 细类 -->
|
|
<view class="cu-list grid no-border" :class="['col-5']" v-if="subCategories.length > 5">
|
|
<view class="cu-item" v-for="(item,index) in subCategories" :key="index"
|
|
v-if="index < subCategories.length && index > 4" @click="chooseCategory(item)">
|
|
<view :class="['cuIcon-' + item.cuIcon,'text-' + item.color]">
|
|
<!-- <view class="cu-tag badge" v-if="item.badge!=0">
|
|
<block v-if="item.badge!=1">{{item.badge}}</block>
|
|
</view> -->
|
|
</view>
|
|
<text>{{item.goodsCategoryName}}</text>
|
|
</view>
|
|
</view>
|
|
<!-- 超值服务 -->
|
|
<!-- <vertical-goods-card ref="discountGoodsCard" :goodsInfos="discountGoods.goodsInfos"
|
|
:title="discountGoods.title"></vertical-goods-card> -->
|
|
<!-- 热门服务 -->
|
|
<vertical-card :list="hotServCategory" :multiPicMode="true" title="大家都在买"></vertical-card>
|
|
</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">
|
|
<flow-goods-card :product="item"></flow-goods-card>
|
|
</view>
|
|
</view>
|
|
<load-status-bar ref="loadStatusBar1" @loadMore="loadProductPage"></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: 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">
|
|
<flow-goods-card :product="item"></flow-goods-card>
|
|
</view>
|
|
</view>
|
|
<load-status-bar ref="loadStatusBar2" @loadMore="loadOtherCityProductPage"></load-status-bar>
|
|
</view>
|
|
</view>
|
|
<view class="occupancy-bottom-bar"></view>
|
|
<!-- 前往授权设置 -->
|
|
<view class="cu-modal" :class="isShowPrivSetting?'show':''">
|
|
<view class="cu-dialog">
|
|
<view class="padding-xl text-left">
|
|
<view>需先授权定位功能才可正常使用功能</view>
|
|
</view>
|
|
<view class="cu-bar bg-white">
|
|
<navigator class="modal-bottom-oper margin-0 flex-sub text-black" open-type="exit" target="miniProgram">拒绝授权
|
|
</navigator>
|
|
<button class="cu-btn modal-bottom-oper margin-0 flex-sub text-main-color bg-white solid-left" open-type="openSetting" @opensetting="authLocationCallback">前往授权</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import verticalCard from '@/components/common-card/vertical-card.vue';
|
|
import loadStatusBar from '@/components/custom-bar/load-status-bar.vue';
|
|
import flowGoodsCard from '@/components/goods-card/flow-goods-card.vue';
|
|
|
|
export default {
|
|
name: 'index',
|
|
components: {
|
|
verticalCard,
|
|
loadStatusBar,
|
|
flowGoodsCard
|
|
},
|
|
data() {
|
|
return {
|
|
scrollLeft: 0,
|
|
dotStyle: true,
|
|
swiperList: [],
|
|
tabCur: 0,
|
|
categories: [],
|
|
subCategories: [],
|
|
hotServCategory: [],
|
|
hotFittingsCategory: [],
|
|
discountGoods: {},
|
|
InputBottom: 0,
|
|
searchInfo: {},
|
|
areaList: [],
|
|
areaMultiIndex: [0, 0],
|
|
productList: [],
|
|
otherCityProductList: [],
|
|
pageNum: 0,
|
|
pageSize: 0,
|
|
otherCityProductPageNum: 0,
|
|
otherCityProductPageSize: 0,
|
|
isShowPrivSetting: false
|
|
}
|
|
},
|
|
mounted() {
|
|
this.bindEvent();
|
|
},
|
|
beforeDestroy() {
|
|
this.offBindEvent();
|
|
},
|
|
async onReady() {
|
|
// await this.$request.authAndGetLocation();
|
|
// 定位当前城市
|
|
await this.getCurAreaArr();
|
|
},
|
|
methods: {
|
|
async loadData() {
|
|
this.initBasicData();
|
|
// 加载区域信息
|
|
await this.loadRegionList();
|
|
// 加载服务商城热门类目
|
|
let hotServCategoryRes = await this.$request.getHotCategory({
|
|
type: 1
|
|
});
|
|
this.hotServCategory = hotServCategoryRes.data;
|
|
// 加载配件商城热门类目
|
|
let hotFittingsCategoryRes = await this.$request.getHotCategory({
|
|
type: 2
|
|
});
|
|
this.hotFittingsCategory = hotFittingsCategoryRes.data;
|
|
// 加载品类
|
|
this.loadCategoryList();
|
|
// 加载当前定位城市的服务列表
|
|
this.loadProductPage();
|
|
// 加载其他城市的服务列表
|
|
this.loadOtherCityProductPage();
|
|
|
|
this.swiperList = await this.$api.data('swiperList');
|
|
// this.categories = await this.$api.data('categories');
|
|
// this.subCategories = await this.$api.data('subCategories');
|
|
this.moduleBarInfos = await this.$api.data('moduleBarInfos');
|
|
// this.hotGoods = await this.$api.data('hotGoods');
|
|
// this.discountGoods = await this.$api.data('discountGoods');
|
|
},
|
|
bindEvent() {
|
|
uni.$on('clickCard', this.clickHotCategory);
|
|
},
|
|
offBindEvent() {
|
|
uni.$off('clickCard');
|
|
},
|
|
async authLocationCallback(res) {
|
|
if (res.detail.authSetting['scope.userLocation']) {
|
|
this.isShowPrivSetting = false;
|
|
await this.getCurAreaArr();
|
|
}
|
|
},
|
|
async wxGetLocation() {
|
|
let _this = this;
|
|
// 通过 wx.getSetting 先查询一下用户是否授权了authScope
|
|
let res1 = await wx.getSetting();
|
|
if (res1) {
|
|
if (!res1.authSetting['scope.userLocation']) {
|
|
let res2 = await wx.getLocation({
|
|
type: 'gcj02',
|
|
fail: async (result) => {
|
|
console.log(result)
|
|
if (result.errno === 103 || result.errMsg === 'getLocation:fail auth deny') {
|
|
this.isShowPrivSetting = true;
|
|
} else {
|
|
// 用户授权
|
|
uni.showToast({
|
|
title: '请确认是否开启定位',
|
|
icon: 'none',
|
|
duration: 1500
|
|
})
|
|
}
|
|
},
|
|
success: async (result) => {
|
|
await _this.$request.storageLocation(result);
|
|
let areaArr = await _this.getCurAreaArr();
|
|
if (areaArr) {
|
|
_this.searchInfo.area = areaArr;
|
|
await _this.loadData();
|
|
}
|
|
}
|
|
})
|
|
} else {
|
|
wx.getLocation({
|
|
type: 'gcj02',
|
|
fail: async (result) => {
|
|
console.log(result)
|
|
if (result.errCode === 2 || result.errCode === 404) {
|
|
uni.showToast({
|
|
title: '定位获取失败，请确认是否开启定位',
|
|
icon: 'none',
|
|
duration: 2500
|
|
})
|
|
} else {
|
|
uni.showToast({
|
|
title: '定位获取失败，请稍后重试',
|
|
icon: 'none',
|
|
duration: 2500
|
|
})
|
|
}
|
|
},
|
|
success: async (result) => {
|
|
await _this.$request.storageLocation(result);
|
|
let areaArr = await _this.getCurAreaArr();
|
|
if (areaArr) {
|
|
_this.searchInfo.area = areaArr;
|
|
await _this.loadData();
|
|
}
|
|
}
|
|
})
|
|
}
|
|
}
|
|
},
|
|
async getCurAreaArr() {
|
|
let curLocation = uni.getStorageSync('curLocation');
|
|
if (curLocation && curLocation.updateTimes) {
|
|
let curTimes = new Date().getTime();
|
|
let deltaSeconds = curTimes - curLocation.updateTimes;
|
|
if (deltaSeconds <= 15 * 60 * 1000) {
|
|
this.searchInfo.area = curLocation.area;
|
|
this.loadData();
|
|
return;
|
|
}
|
|
}
|
|
await this.wxGetLocation();
|
|
},
|
|
async loadCategoryList() {
|
|
let res = await this.$request.getProductCategories();
|
|
this.categories = res[1].data.data;
|
|
this.tabSelect(null, this.categories[0]);
|
|
},
|
|
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 = [];
|
|
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.reloadProductPage();
|
|
},
|
|
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 tabSelect(e, item) {
|
|
this.tabCur = e == null ? 0 : e.currentTarget.dataset.index;
|
|
this.scrollLeft = (this.tabCur - 1) * 60;
|
|
|
|
let subSubTypeList = [];
|
|
for (let i = 0; i < item.child.length; i++) {
|
|
let stopFlag = false;
|
|
let secondList = item.child[i].child;
|
|
if (secondList && secondList.length) {
|
|
for (let k = 0; k < secondList.length; k++) {
|
|
let thirdList = secondList[k].child;
|
|
if (thirdList && thirdList.length) {
|
|
for (let j = 0; j < thirdList.length; j++) {
|
|
subSubTypeList = subSubTypeList.concat(thirdList[j]);
|
|
if (subSubTypeList.length >= 15) {
|
|
subSubTypeList = subSubTypeList.slice(0, 15);
|
|
stopFlag = true;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
if (stopFlag) break;
|
|
}
|
|
}
|
|
if (stopFlag) break;
|
|
}
|
|
|
|
let subCategoryOpt = await this.$api.data('subCategories');
|
|
for(let i = 0; i < subSubTypeList.length; i++) {
|
|
subSubTypeList[i]['cuIcon'] = subCategoryOpt[i].cuIcon;
|
|
subSubTypeList[i]['color'] = subCategoryOpt[i].color;
|
|
}
|
|
this.subCategories = subSubTypeList;
|
|
},
|
|
chooseCategory(item) {
|
|
this.searchInfo.category = item;
|
|
this.searchGoods();
|
|
},
|
|
searchGoods() {
|
|
let params = {
|
|
category: this.searchInfo.category,
|
|
area: this.searchInfo.area,
|
|
inputGoodsName: this.searchInfo.inputGoodsName
|
|
};
|
|
uni.navigateTo({
|
|
url: '/pages/product/filtered-products?params=' + encodeURIComponent(JSON.stringify(params))
|
|
})
|
|
},
|
|
clickHotCategory(item) {
|
|
let params = {
|
|
category: item
|
|
};
|
|
uni.navigateTo({
|
|
url: '/pages/product/filtered-products?params=' + encodeURIComponent(JSON.stringify(params))
|
|
})
|
|
},
|
|
showProductCategories() {
|
|
uni.navigateTo({
|
|
url: '/pages/product/product-category'
|
|
})
|
|
},
|
|
/* 底部当前城市服务列表 start */
|
|
initBasicData() {
|
|
this.pageNum = this.$globalData.initPageNum;
|
|
this.pageSize = this.$globalData.initPageSize;
|
|
this.otherCityProductPageNum = this.$globalData.initPageNum;
|
|
this.otherCityProductPageSize = this.$globalData.initPageSize;
|
|
this.productList = [];
|
|
this.otherCityProductList = [];
|
|
},
|
|
showDetails(productItem) {
|
|
let params = {
|
|
goodsId: productItem.goodsId
|
|
}
|
|
uni.navigateTo({
|
|
url: '/pages/product/product-detail?params=' + encodeURIComponent(JSON.stringify(params))
|
|
});
|
|
},
|
|
async reloadProductPage() {
|
|
this.initBasicData();
|
|
this.loadProductPage();
|
|
this.loadOtherCityProductPage();
|
|
},
|
|
async loadProductPage(params = {
|
|
areaId: this.searchInfo.area && this.searchInfo.area.length ? this.searchInfo.area[this.searchInfo.area.length - 1].areaId : null
|
|
}, loadStatusBarRefName = "loadStatusBar1", resContainer = "productList", pageNumName = "pageNum", pageSizeName = "pageSize") {
|
|
if (!params.exceptParentAreaId && 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[pageNumName];
|
|
params.pageSize = this[pageSizeName];
|
|
params.status = 0;
|
|
this.$refs[loadStatusBarRefName].showLoading();
|
|
try {
|
|
let res = await this.$request.qryProductPage(params);
|
|
let rowsLength = res[1].data.rows.length;
|
|
if (rowsLength > 0) {
|
|
this[resContainer] = this[resContainer].concat(res[1].data.rows);
|
|
this[pageNumName]++;
|
|
if (rowsLength === this[pageSizeName]) {
|
|
this.$refs[loadStatusBarRefName].showLoadMore();
|
|
return;
|
|
}
|
|
}
|
|
this.$refs[loadStatusBarRefName].showLoadOver();
|
|
} catch (e) {
|
|
console.error(e)
|
|
this.$refs[loadStatusBarRefName].showLoadErr();
|
|
}
|
|
},
|
|
/* 底部当前城市服务列表 end */
|
|
/* 其他城市服务列表 start */
|
|
loadOtherCityProductPage() {
|
|
this.loadProductPage({
|
|
exceptParentAreaId: this.searchInfo.area && this.searchInfo.area.length ? this.searchInfo.area[1].areaId : null
|
|
}, "loadStatusBar2", "otherCityProductList", "otherCityProductPageNum", "otherCityProductPageSize")
|
|
}
|
|
/* 其他城市服务列表 end */
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.screen-swiper {
|
|
height: 500rpx;
|
|
}
|
|
|
|
.cu-list+.cu-list {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.cu-list.grid.no-border {
|
|
padding: 0 10rpx;
|
|
}
|
|
|
|
.hot-sub-category .cu-item .hot-sub-category-icon {
|
|
font-size: 80rpx;
|
|
}
|
|
|
|
.modal-bottom-oper {
|
|
height: 70rpx;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.waterfall-grid {
|
|
column-count: 2;
|
|
column-gap: 15rpx;
|
|
}
|
|
|
|
.waterfall-grid-item {
|
|
break-inside: avoid;
|
|
margin-bottom: 15rpx;
|
|
}
|
|
</style>
|