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

调整服务列表首页样式；调整可选地区；增加展示其他城市服务列表

This commit is contained in:
donqi 2022-12-17 00:16:28 +08:00
parent 6cc1c3c754
commit cc229f3cfb
5 changed files with 168 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
components/goods-card/flow-goods-card.vue
View File

@ -1,24 +1,37 @@
<template> <template>
<view> <view>
<view class="bg-img img-box bg-gray" :style="'background-image:url(' + product.goodsImgUrl + ');'"></view> <view class="bg-img img-box bg-gray" :style="'background-image:url(' + product.goodsImgUrl + ');'"></view>
<view class="padding bg-white"> <view class="padding bg-white card-text-container flex-column-around">
<view class="flex justify-between align-center"> <view class="flex justify-between align-center">
<view v-if="product.goodsStandardList && product.goodsStandardList.length > 0"> <view v-if="product.goodsStandardList && product.goodsStandardList.length > 0">
<view v-if="product.goodsStandardList[0].discountPrice" class="flex justify-start align-center"> <view v-if="product.goodsStandardList[0].discountPrice" class="flex justify-start align-center">
<text class="text-price text-red text-bold text-xl">{{product.goodsStandardList[0].discountPrice}}</text> <text
<text class="text-del" v-if="product.goodsPrice">¥{{product.goodsStandardList[0].goodsPrice}}</text> class="text-price text-red text-bold text-xl">{{product.goodsStandardList[0].discountPrice}}</text>
</view> <text class="text-del"
<view v-else-if="product.goodsStandardList[0].goodsPrice" class="flex justify-start align-center"> v-if="product.goodsPrice">¥{{product.goodsStandardList[0].goodsPrice}}</text>
<text class="text-price text-red text-bold text-xl">{{product.goodsStandardList[0].goodsPrice}}</text> <text>/</text>
</view> <text>{{product.goodsUnit}}</text>
</view> </view>
<view class="padding-xs" v-if="product.type"> <view v-else-if="product.goodsStandardList[0].goodsPrice" class="flex justify-start align-center">
<view class='cu-tag light bg-blue'>{{product.type}}</view> <text
class="text-price text-red text-bold text-xl">{{product.goodsStandardList[0].goodsPrice}}</text>
<text>/</text>
<text>{{product.goodsUnit}}</text>
</view>
</view> </view>
</view> <view v-if="product.deptGoodsCategoryName">
<view class="text-black">{{product.goodsName}}</view> <view class='cu-tag light bg-blue'>
<view class="text-sm">{{product.goodsDesc}}</view> <text v-if="product.parGoodsCategoryName">
<view v-if="product.goodsAreaList && product.goodsAreaList.length"> {{product.parGoodsCategoryName}}
<text>/</text>
</text>
<text>{{product.deptGoodsCategoryName}}</text>
</view>
</view>
</view>
<view class="text-black one-line-ellipsis">{{product.goodsName}}</view>
<view class="text-sm two-line-ellipsis">{{product.goodsDesc}}</view>
<view v-if="product.goodsAreaList && product.goodsAreaList.length" class="two-line-ellipsis">
<view class="cu-capsule"> <view class="cu-capsule">
<view class='cu-tag bg-main-color sm'> <view class='cu-tag bg-main-color sm'>
<text class='cuIcon-locationfill'></text> <text class='cuIcon-locationfill'></text>
@ -26,9 +39,10 @@
<view class="cu-tag line-main-color sm"> <view class="cu-tag line-main-color sm">
服务区域 服务区域
</view> </view>
</view> </view>
<text v-for="(item,index) in product.goodsAreaList"> <text v-for="(item,index) in product.goodsAreaList">
<text class="margin-lr-xs text-sm">{{item.areaName}}<text v-if="index != product.goodsAreaList.length - 1">,</text></text> <text class="margin-lr-xs text-sm">{{item.areaName}}<text
v-if="index != product.goodsAreaList.length - 1">,</text></text>
</text> </text>
</view> </view>
</view> </view>
@ -45,8 +59,7 @@
} }
}, },
data() { data() {
return { return {}
}
} }
} }
</script> </script>
@ -58,10 +71,15 @@
height: 28rpx; height: 28rpx;
font-size: 16rpx; font-size: 16rpx;
line-height: 32rpx; line-height: 32rpx;
} }
.img-box {
padding-bottom: 100%; .img-box {
width: 100%; padding-bottom: 100%;
height: 0; width: 100%;
height: 0;
}
.card-text-container {
height: 270rpx;
} }
</style> </style>

95
pages/index/home.vue
View File

@ -89,13 +89,24 @@
<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> <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">
<flow-goods-card :product="item"></flow-goods-card> <flow-goods-card :product="item"></flow-goods-card>
</view> </view>
</view> </view>
<load-status-bar ref="loadStatusBar" @loadMore="loadProductPage"></load-status-bar> <load-status-bar ref="loadStatusBar1" @loadMore="loadProductPage"></load-status-bar>
</view>
<!-- 其他城市服务列表 -->
<view class="text-gray text-lg text-center margin">————其他城市————</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> </view>
</view> </view>
@ -129,8 +140,11 @@
areaList: [], areaList: [],
areaMultiIndex: [0, 0, 0], areaMultiIndex: [0, 0, 0],
productList: [], productList: [],
otherCityProductList: [],
pageNum: 0, pageNum: 0,
pageSize: 0 pageSize: 0,
otherCityProductPageNum: 0,
otherCityProductPageSize: 0
} }
}, },
mounted() { mounted() {
@ -146,9 +160,10 @@
methods: { methods: {
async loadData() { async loadData() {
this.initBasicData(); this.initBasicData();
// 加载区域信息 // 加载区域信息
await this.loadRegionList(); await this.loadRegionList();
await this.getCurAreaArr(); await this.getCurAreaArr();
await this.loadRegionList();
// 加载服务商城热门类目 // 加载服务商城热门类目
let hotServCategoryRes = await this.$request.getHotCategory({ let hotServCategoryRes = await this.$request.getHotCategory({
type: 1 type: 1
@ -162,7 +177,9 @@
// 加载品类 // 加载品类
this.loadCategoryList(); this.loadCategoryList();
// 加载当前定位城市的服务列表 // 加载当前定位城市的服务列表
this.loadProductPage(); this.loadProductPage();
// 加载其他城市的服务列表
this.loadOtherCityProductPage();
this.swiperList = await this.$api.data('swiperList'); this.swiperList = await this.$api.data('swiperList');
// this.categories = await this.$api.data('categories'); // this.categories = await this.$api.data('categories');
@ -181,25 +198,38 @@
let areaArr = await this.$request.getCurArea(); let areaArr = await this.$request.getCurArea();
if (areaArr) { if (areaArr) {
this.searchInfo.area = areaArr; this.searchInfo.area = areaArr;
} else {
// 默认选中第一个
this.searchInfo.area = [this.areaList[0][0], this.areaList[1][0], this.areaList[2][0]];
} }
// else {
// // 默认选中第一个
// this.searchInfo.area = [this.areaList[0][0], this.areaList[1][0], this.areaList[2][0]];
// }
}, },
async loadCategoryList() { async loadCategoryList() {
let res = await this.$request.getProductCategories(); let res = await this.$request.getProductCategories();
this.categories = res[1].data.data; this.categories = res[1].data.data;
this.tabSelect(null, this.categories[0]); this.tabSelect(null, this.categories[0]);
}, },
async loadRegionList() { async loadRegionList() {
let regionList = await this.$request.areaListByStep(); 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; regionList = regionList.data;
let subRegionList = []; let subRegionList = [];
let subSubRegionList = []; let subSubRegionList = [];
if (regionList && regionList.length > 0) { if (regionList && regionList.length > 0) {
subRegionList = await this.$request.areaListByStep({ let params = {};
parentCode: regionList[0].areaCode 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; subRegionList = subRegionList.data;
} }
if (subRegionList && subRegionList.length > 0) { if (subRegionList && subRegionList.length > 0) {
@ -207,7 +237,8 @@
parentCode: subRegionList[0].areaCode parentCode: subRegionList[0].areaCode
}); });
subSubRegionList = subSubRegionList.data; subSubRegionList = subSubRegionList.data;
} }
this.areaList = [];
this.areaList.push(regionList); this.areaList.push(regionList);
this.areaList.push(subRegionList); this.areaList.push(subRegionList);
this.areaList.push(subSubRegionList); this.areaList.push(subSubRegionList);
@ -318,7 +349,10 @@
initBasicData() { initBasicData() {
this.pageNum = this.$globalData.initPageNum; this.pageNum = this.$globalData.initPageNum;
this.pageSize = this.$globalData.initPageSize; this.pageSize = this.$globalData.initPageSize;
this.otherCityProductPageNum = this.$globalData.initPageNum;
this.otherCityProductPageSize = this.$globalData.initPageSize;
this.productList = []; this.productList = [];
this.otherCityProductList = [];
}, },
showDetails(productItem) { showDetails(productItem) {
let params = { let params = {
@ -331,31 +365,40 @@
async reloadProductPage() { async reloadProductPage() {
this.initBasicData(); this.initBasicData();
this.loadProductPage(); this.loadProductPage();
this.loadOtherCityProductPage();
}, },
async loadProductPage(params = {}) { async loadProductPage(params = {
params.pageNum = this.pageNum; areaId: this.searchInfo.area && this.searchInfo.area.length ? this.searchInfo.area[this.searchInfo.area.length - 1].areaId : null
params.pageSize = this.pageSize; }, loadStatusBarRefName = "loadStatusBar1", resContainer = "productList", pageNumName = "pageNum", pageSizeName = "pageSize") {
params.pageNum = this[pageNumName];
params.pageSize = this[pageSizeName];
params.status = 0; params.status = 0;
params.areaId = this.searchInfo.area && this.searchInfo.area.length ? this.searchInfo.area[this.searchInfo.area.length - 1].areaId : null; this.$refs[loadStatusBarRefName].showLoading();
this.$refs.loadStatusBar.showLoading();
try { try {
let res = await this.$request.qryProductPage(params); let res = await this.$request.qryProductPage(params);
let rowsLength = res[1].data.rows.length; let rowsLength = res[1].data.rows.length;
if (rowsLength > 0) { if (rowsLength > 0) {
this.productList = this.productList.concat(res[1].data.rows); this[resContainer] = this[resContainer].concat(res[1].data.rows);
this.pageNum++; this[pageNumName]++;
if (rowsLength === this.pageSize) { if (rowsLength === this[pageSizeName]) {
this.$refs.loadStatusBar.showLoadMore(); this.$refs[loadStatusBarRefName].showLoadMore();
return; return;
} }
} }
this.$refs.loadStatusBar.showLoadOver(); this.$refs[loadStatusBarRefName].showLoadOver();
} catch (e) { } catch (e) {
console.error(e) console.error(e)
this.$refs.loadStatusBar.showLoadErr(); 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 */ /* 其他城市服务列表 end */
} }
} }
</script> </script>

9
pages/index/my-home.vue
View File

@ -274,7 +274,7 @@
<view class="cu-modal" :class="appShareQrcodeModal?'show':''"> <view class="cu-modal" :class="appShareQrcodeModal?'show':''">
<view class="cu-dialog bg-white"> <view class="cu-dialog bg-white">
<view class="cu-bar bg-white justify-end"> <view class="cu-bar bg-white justify-end">
<view class="content">小程序邀请二维码</view> <view class="content">小程序线下邀请码</view>
<view class="action" @click="hideModal" data-modal="appShareQrcodeModal"> <view class="action" @click="hideModal" data-modal="appShareQrcodeModal">
<text class="cuIcon-close text-red"></text> <text class="cuIcon-close text-red"></text>
</view> </view>
@ -284,11 +284,12 @@
</image> </image>
</view> </view>
<view class="text-center padding"> <view class="text-center padding">
<view class="padding-bottom-sm text-lg">请通过扫码或分享链接给好友进行邀请</view> <!-- <view class="padding-bottom-sm text-lg">请通过扫码或分享链接给好友进行邀请</view> -->
<button class="cu-btn bg-main-color shadow-blur" open-type="share"> <!-- <button class="cu-btn bg-main-color shadow-blur" open-type="share">
<text class="cuIcon-share"></text> <text class="cuIcon-share"></text>
<text>分享链接给好友</text> <text>分享链接给好友</text>
</button> </button> -->
<view class="padding-bottom-sm text-lg">点击二维码，长按保存图片</view>
</view> </view>
</view> </view>
</view> </view>

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

@ -138,6 +138,7 @@
await this.loadRegionList(); await this.loadRegionList();
// 获取当前定位 // 获取当前定位
await this.getCurAreaArr(); await this.getCurAreaArr();
await this.loadRegionList();
this.loadCategoryList(); this.loadCategoryList();
this.searchGoods(); this.searchGoods();
}, },
@ -205,14 +206,26 @@
this.categoryList.push(subSubTypeList); this.categoryList.push(subSubTypeList);
}, },
async loadRegionList() { async loadRegionList() {
let regionList = await this.$request.areaListByStep(); 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; regionList = regionList.data;
let subRegionList = []; let subRegionList = [];
let subSubRegionList = []; let subSubRegionList = [];
if (regionList && regionList.length > 0) { if (regionList && regionList.length > 0) {
subRegionList = await this.$request.areaListByStep({ let params = {};
parentCode: regionList[0].areaCode 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; subRegionList = subRegionList.data;
} }
if (subRegionList && subRegionList.length > 0) { if (subRegionList && subRegionList.length > 0) {
@ -221,6 +234,7 @@
}); });
subSubRegionList = subSubRegionList.data; subSubRegionList = subSubRegionList.data;
} }
this.areaList = [];
this.areaList.push(regionList); this.areaList.push(regionList);
this.areaList.push(subRegionList); this.areaList.push(subRegionList);
this.areaList.push(subSubRegionList); this.areaList.push(subSubRegionList);

42
style/default.css
View File

@ -1,4 +1,4 @@
.margin-bottom-with-bar { .margin-bottom-with-bar {
margin-bottom: calc(120rpx + constant(safe-area-inset-bottom) / 2); margin-bottom: calc(120rpx + constant(safe-area-inset-bottom) / 2);
margin-bottom: calc(120rpx + env(safe-area-inset-bottom) / 2); margin-bottom: calc(120rpx + env(safe-area-inset-bottom) / 2);
} }
@ -8,9 +8,11 @@
width: 100% !important; width: 100% !important;
bottom: 0 !important; bottom: 0 !important;
margin-bottom: 0 !important; margin-bottom: 0 !important;
z-index: 98; z-index: 98;
padding-bottom: constant(safe-area-inset-bottom / 2) !important;/*兼容 IOS<11.2*/ padding-bottom: constant(safe-area-inset-bottom / 2) !important;
padding-bottom: env(safe-area-inset-bottom / 2) !important;/*兼容 IOS>11.2*/ /*兼容 IOS<11.2*/
padding-bottom: env(safe-area-inset-bottom / 2) !important;
/*兼容 IOS>11.2*/
} }
.cu-bar.tabbar.border .action checkbox { .cu-bar.tabbar.border .action checkbox {
@ -92,23 +94,39 @@
} }
.cu-form-group textarea { .cu-form-group textarea {
margin: 0 0 20rpx 0 !important; margin: 0 0 20rpx 0 !important;
padding: 20rpx !important; padding: 20rpx !important;
} }
.flex-column-start { .flex-column-start {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-start; justify-content: flex-start;
} }
.radius-input { .radius-input {
border: 1rpx solid rgba(0, 0, 0, 0.1); border: 1rpx solid rgba(0, 0, 0, 0.1);
border-radius: 10rpx; border-radius: 10rpx;
padding: 11rpx; padding: 11rpx;
box-sizing: content-box; box-sizing: content-box;
} }
.big-icon { .big-icon {
font-size: 111rpx !important; font-size: 111rpx !important;
} }
.one-line-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.two-line-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}