优化我的小区 公告部分的数据加载提示

This commit is contained in:
赵毅 2025-07-23 15:42:18 +08:00
parent 2866332d27
commit 38896f2a26
2 changed files with 232 additions and 183 deletions

View File

@ -208,7 +208,7 @@ export default {
page_size: 10, page_size: 10,
page_num: 1, page_num: 1,
flag: false, flag: false,
loadMoreText: "下拉加载后续10条共计30条", loadMoreText: "",
}; };
}, },
async onLoad(options) { async onLoad(options) {
@ -489,7 +489,7 @@ export default {
if (isTabChange) { if (isTabChange) {
this.page_num = 1; this.page_num = 1;
this.infoList = []; this.infoList = [];
this.loadMoreText = "下拉加载后续10条共计30条"; // this.loadMoreText = "1030";
} }
this.selectedTab = index; this.selectedTab = index;
console.log("选中的tab:", index); console.log("选中的tab:", index);
@ -527,7 +527,7 @@ export default {
icon: "none", icon: "none",
}); });
} else { } else {
this.loadMoreText = `下拉加载后续10条`; // this.loadMoreText = `10`;
} }
}, },

View File

@ -1,25 +1,34 @@
<template> <template>
<div class="container"> <div class="container">
<div class="local"> <div class="local">
<image id="local" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_localIcon.png" mode="aspectFill"></image> <image
{{address}} id="local"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_localIcon.png"
mode="aspectFill"
></image>
{{ address }}
<u-icon name="arrow-down" color="#999999" size="28"></u-icon> <u-icon name="arrow-down" color="#999999" size="28"></u-icon>
</div> </div>
<div class="search"> <div class="search">
<div class="searchBox"> <div class="searchBox">
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png" mode="aspectFill"></image> <image
<input type="text" placeholder="请输入您想搜索的内容"> src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png"
mode="aspectFill"
></image>
<input type="text" placeholder="请输入您想搜索的内容" />
</div> </div>
</div> </div>
<div class="swiperBox"> <div class="swiperBox">
<swiper class="swiper" @change="swiperChange" :current="currentIndex"> <swiper class="swiper" @change="swiperChange" :current="currentIndex">
<swiper-item v-for="(page, pageIndex) in swiperList" :key="pageIndex"> <swiper-item v-for="(page, pageIndex) in swiperList" :key="pageIndex">
<div class="navList"> <div class="navList">
<div class="navItem" v-for="(item, itemIndex) in page" :key="itemIndex"> <div
class="navItem"
v-for="(item, itemIndex) in page"
:key="itemIndex"
>
<image :src="picUrl + item.cate_image" mode="widthFix"></image> <image :src="picUrl + item.cate_image" mode="widthFix"></image>
<div class="navName">{{ item.cate_name }}</div> <div class="navName">{{ item.cate_name }}</div>
</div> </div>
@ -28,7 +37,11 @@
</swiper> </swiper>
<div class="dot"> <div class="dot">
<div class="dotItem" v-for="(page, index) in swiperList" :class="currentIndex == index ? 'actives' : ''"></div> <div
class="dotItem"
v-for="(page, index) in swiperList"
:class="currentIndex == index ? 'actives' : ''"
></div>
</div> </div>
</div> </div>
@ -46,34 +59,60 @@
</scroll-view> --> </scroll-view> -->
<div class="merchantList"> <div class="merchantList">
<div class="merchantItem" v-for="item in merchatList" :key="item.id" @click="Info(item)"> <div
class="merchantItem"
v-for="item in merchatList"
:key="item.id"
@click="Info(item)"
>
<div class="merchantItem_left"> <div class="merchantItem_left">
<image :src="picUrl + item.bigImg[0]" mode="aspectFill"></image> <image :src="picUrl + item.bigImg[0]" mode="aspectFill"></image>
</div> </div>
<div class="merchantItem_right"> <div class="merchantItem_right">
<div class="merchantItem_right_tit"> <div class="merchantItem_right_tit">
<div class="merchantItem_right_tit_left"> <div class="merchantItem_right_tit_left">
{{item.merchant_name}} {{ item.merchant_name }}
</div> </div>
<div class="merchantItem_right_tit_right"> <div class="merchantItem_right_tit_right">
{{item.distances}} {{ item.distances }}
</div> </div>
</div> </div>
<div class="merchantItem_right_con"> <div class="merchantItem_right_con">
<div class="merchantItem_right_con_left"> <div class="merchantItem_right_con_left">
<div class="startList"> <div class="startList">
<image v-for="index in 5" :src="index < item.rating ? 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_start1.png' : 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_start2.png'" mode="aspectFill"></image> <image
v-for="index in 5"
:src="
index < item.rating
? 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_start1.png'
: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_start2.png'
"
mode="aspectFill"
></image>
</div>
<div
class="merchangtItem_tag"
v-if="item.refund_property_fee_ratio"
>
买单反物业费
</div>
<div
class="merchangtItem_tag"
v-if="item.refund_user_points_ratio"
>
买单反积分
</div> </div>
<div class="merchangtItem_tag" v-if="item.refund_property_fee_ratio">买单反物业费</div>
<div class="merchangtItem_tag" v-if="item.refund_user_points_ratio">买单反积分</div>
</div> </div>
<div class="merchantItem_right_con_right"> <div class="merchantItem_right_con_right">
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_review.png" mode="aspectFill"></image> <image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_review.png"
mode="aspectFill"
></image>
点评 点评
</div> </div>
</div> </div>
<div class="merchantItem_right_add"> <div class="merchantItem_right_add">
{{item.comAddress}} {{ item.comAddress }}
</div> </div>
</div> </div>
</div> </div>
@ -81,20 +120,24 @@
<div class="btnList"> <div class="btnList">
<div class="btn_left"> <div class="btn_left">
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_serverIcon.png" mode="aspectFill"></image> <image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_serverIcon.png"
mode="aspectFill"
></image>
到店服务券 到店服务券
</div> </div>
<div class="line"></div> <div class="line"></div>
<div class="btn_right"> <div class="btn_right">
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/lcoal_payIcon.png" mode="aspectFill"></image> <image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/lcoal_payIcon.png"
mode="aspectFill"
></image>
快捷支付记录 快捷支付记录
</div> </div>
</div> </div>
<div class="btnList_after"></div> <div class="btnList_after"></div>
<nav-footer :current="2" />
</div> </div>
</template> </template>
@ -105,11 +148,10 @@ import {
uniqueByField, uniqueByField,
menuButtonInfo, menuButtonInfo,
calculateDistance, calculateDistance,
NavgateTo NavgateTo,
} from '../../../utils'; } from "../../../utils";
import { apiArr } from '../../../api/v2local';
import { apiArr } from "../../../api/v2local";
export default { export default {
data() { data() {
@ -117,16 +159,15 @@ export default {
picUrl, picUrl,
top: "", top: "",
localHeight: "", localHeight: "",
swiperList: [ swiperList: [],
],
currentIndex: 0, currentIndex: 0,
checkedItems: [false, false, false, false], checkedItems: [false, false, false, false],
address:"", address: "",
page_size:"10", page_size: "10",
page_num:"1", page_num: "1",
flag:false, flag: false,
merchatList:[] merchatList: [],
} };
}, },
onLoad(options) { onLoad(options) {
const meun = menuButtonInfo(); const meun = menuButtonInfo();
@ -135,12 +176,12 @@ export default {
this.localHeight = meun.height; this.localHeight = meun.height;
this.getCateList(); this.getCateList();
this.getMechantList(); this.getMechantList();
this.address = uni.getStorageSync("location").address this.address = uni.getStorageSync("location").address;
console.log(this.address) console.log(this.address);
}, },
onReachBottom() { onReachBottom() {
if(this.flag){ if (this.flag) {
this.getMechantList(); this.getMechantList();
} }
}, },
@ -155,8 +196,8 @@ export default {
}, },
// //
async getCateList() { async getCateList() {
let that = this let that = this;
await request(apiArr.getMerChantCateList, "POST").then(res => { await request(apiArr.getMerChantCateList, "POST").then((res) => {
console.log(res); console.log(res);
// 10 // 10
const chunkSize = 10; const chunkSize = 10;
@ -164,54 +205,62 @@ export default {
for (let i = 0; i < res.rows.length; i += chunkSize) { for (let i = 0; i < res.rows.length; i += chunkSize) {
that.swiperList.push(res.rows.slice(i, i + chunkSize)); that.swiperList.push(res.rows.slice(i, i + chunkSize));
} }
}) });
}, },
// //
async getMechantList(){ async getMechantList() {
let that = this let that = this;
await request(apiArr.getMerchantList, "POST",{ await request(apiArr.getMerchantList, "POST", {
page_num:that.page_num, page_num: that.page_num,
page_size:that.page_size, page_size: that.page_size,
}).then(res => { }).then((res) => {
let latitude = uni.getStorageSync("location").lat let latitude = uni.getStorageSync("location").lat;
let longitude = uni.getStorageSync("location").lng let longitude = uni.getStorageSync("location").lng;
res.rows.forEach(item => { res.rows.forEach((item) => {
item.bigImg = item.album_images.split(',') item.bigImg = item.album_images.split(",");
const distanceInKm = calculateDistance(latitude,longitude,item.latitude,item.longitude); const distanceInKm = calculateDistance(
item.distances = distanceInKm >= 1 ? `${distanceInKm.toFixed(1)}km` : `${(distanceInKm * 1000).toFixed(1)}m`; latitude,
longitude,
item.latitude,
item.longitude
);
item.distances =
distanceInKm >= 1
? `${distanceInKm.toFixed(1)}km`
: `${(distanceInKm * 1000).toFixed(1)}m`;
if(item.ad){ if (item.ad) {
item.comAddress = item.ad.ad_name.replace(/,/g, '') + item.address item.comAddress = item.ad.ad_name.replace(/,/g, "") + item.address;
}else{ } else {
item.comAddress = item.address item.comAddress = item.address;
} }
}); });
res.rows.sort((a, b) => { res.rows.sort((a, b) => {
const valueA = parseFloat(a.distances.replace('km', '').replace('m', '')) * (a.distances.includes('km') ? 1000 : 1); const valueA =
const valueB = parseFloat(b.distances.replace('km', '').replace('m', '')) * (b.distances.includes('km') ? 1000 : 1); parseFloat(a.distances.replace("km", "").replace("m", "")) *
(a.distances.includes("km") ? 1000 : 1);
const valueB =
parseFloat(b.distances.replace("km", "").replace("m", "")) *
(b.distances.includes("km") ? 1000 : 1);
return valueA - valueB; return valueA - valueB;
}); });
if (res.rows.length == this.page_size) {
if(res.rows.length == this.page_size){
this.page_num = this.page_num + 1; this.page_num = this.page_num + 1;
this.flag = true this.flag = true;
}else{ } else {
this.flag = false this.flag = false;
} }
this.merchatList = this.merchatList.concat(res.rows) this.merchatList = this.merchatList.concat(res.rows);
}) });
}, },
// //
Info(e){ Info(e) {
uni.setStorageSync("merchantInfo",e) uni.setStorageSync("merchantInfo", e);
NavgateTo("../detail/index") NavgateTo("../detail/index");
}, },
}, },
};
}
</script> </script>
<style> <style>