优化我的小区 公告部分的数据加载提示
This commit is contained in:
赵毅
parent
2866332d27
commit
38896f2a26
@ -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 = "下拉加载后续10条，共计30条";
|
||||||
}
|
}
|
||||||
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条`;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|||||||
@ -1,39 +1,52 @@
|
|||||||
<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"
|
||||||
<u-icon name="arrow-down" color="#999999" size="28"></u-icon>
|
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_localIcon.png"
|
||||||
</div>
|
mode="aspectFill"
|
||||||
|
></image>
|
||||||
|
{{ address }}
|
||||||
|
<u-icon name="arrow-down" color="#999999" size="28"></u-icon>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="search">
|
||||||
|
<div class="searchBox">
|
||||||
|
<image
|
||||||
|
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 class="search">
|
<div class="swiperBox">
|
||||||
<div class="searchBox">
|
<swiper class="swiper" @change="swiperChange" :current="currentIndex">
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png" mode="aspectFill"></image>
|
<swiper-item v-for="(page, pageIndex) in swiperList" :key="pageIndex">
|
||||||
<input type="text" placeholder="请输入您想搜索的内容">
|
<div class="navList">
|
||||||
|
<div
|
||||||
|
class="navItem"
|
||||||
|
v-for="(item, itemIndex) in page"
|
||||||
|
:key="itemIndex"
|
||||||
|
>
|
||||||
|
<image :src="picUrl + item.cate_image" mode="widthFix"></image>
|
||||||
|
<div class="navName">{{ item.cate_name }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</swiper-item>
|
||||||
|
</swiper>
|
||||||
|
|
||||||
|
<div class="dot">
|
||||||
|
<div
|
||||||
|
class="dotItem"
|
||||||
|
v-for="(page, index) in swiperList"
|
||||||
|
:class="currentIndex == index ? 'actives' : ''"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="swiperBox">
|
<div class="lines"></div>
|
||||||
<swiper class="swiper" @change="swiperChange" :current="currentIndex">
|
<!-- <scroll-view scroll-x="true" enhanced enable-flex class="scrollBox">
|
||||||
<swiper-item v-for="(page, pageIndex) in swiperList" :key="pageIndex">
|
|
||||||
<div class="navList">
|
|
||||||
<div class="navItem" v-for="(item, itemIndex) in page" :key="itemIndex">
|
|
||||||
<image :src="picUrl + item.cate_image" mode="widthFix"></image>
|
|
||||||
<div class="navName">{{ item.cate_name }}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</swiper-item>
|
|
||||||
</swiper>
|
|
||||||
|
|
||||||
<div class="dot">
|
|
||||||
<div class="dotItem" v-for="(page, index) in swiperList" :class="currentIndex == index ? 'actives' : ''"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="lines"></div>
|
|
||||||
<!-- <scroll-view scroll-x="true" enhanced enable-flex class="scrollBox">
|
|
||||||
<div class="scrollView">
|
<div class="scrollView">
|
||||||
<div class="scroll-viewItem" v-for="(item, index) in 4" @click="checkItem(index)">
|
<div class="scroll-viewItem" v-for="(item, index) in 4" @click="checkItem(index)">
|
||||||
<image v-show="!checkedItems[index]" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_uncheck.png"
|
<image v-show="!checkedItems[index]" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_uncheck.png"
|
||||||
@ -45,173 +58,209 @@
|
|||||||
</div>
|
</div>
|
||||||
</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
|
||||||
<div class="merchantItem_left">
|
class="merchantItem"
|
||||||
<image :src="picUrl + item.bigImg[0]" mode="aspectFill"></image>
|
v-for="item in merchatList"
|
||||||
</div>
|
:key="item.id"
|
||||||
<div class="merchantItem_right">
|
@click="Info(item)"
|
||||||
<div class="merchantItem_right_tit">
|
>
|
||||||
<div class="merchantItem_right_tit_left">
|
<div class="merchantItem_left">
|
||||||
{{item.merchant_name}}
|
<image :src="picUrl + item.bigImg[0]" mode="aspectFill"></image>
|
||||||
</div>
|
|
||||||
<div class="merchantItem_right_tit_right">
|
|
||||||
{{item.distances}}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="merchantItem_right_con">
|
|
||||||
<div class="merchantItem_right_con_left">
|
|
||||||
<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>
|
|
||||||
</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="merchantItem_right_con_right">
|
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_review.png" mode="aspectFill"></image>
|
|
||||||
点评
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="merchantItem_right_add">
|
|
||||||
{{item.comAddress}}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="merchantItem_right">
|
||||||
<div class="btnList">
|
<div class="merchantItem_right_tit">
|
||||||
<div class="btn_left">
|
<div class="merchantItem_right_tit_left">
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_serverIcon.png" mode="aspectFill"></image>
|
{{ item.merchant_name }}
|
||||||
到店服务券
|
|
||||||
</div>
|
</div>
|
||||||
<div class="line"></div>
|
<div class="merchantItem_right_tit_right">
|
||||||
<div class="btn_right">
|
{{ item.distances }}
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/lcoal_payIcon.png" mode="aspectFill"></image>
|
|
||||||
快捷支付记录
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="merchantItem_right_con">
|
||||||
|
<div class="merchantItem_right_con_left">
|
||||||
|
<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>
|
||||||
|
</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="merchantItem_right_con_right">
|
||||||
|
<image
|
||||||
|
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_review.png"
|
||||||
|
mode="aspectFill"
|
||||||
|
></image>
|
||||||
|
点评
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="merchantItem_right_add">
|
||||||
|
{{ item.comAddress }}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="btnList_after"></div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="btnList">
|
||||||
|
<div class="btn_left">
|
||||||
|
<image
|
||||||
|
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_serverIcon.png"
|
||||||
|
mode="aspectFill"
|
||||||
|
></image>
|
||||||
|
到店服务券
|
||||||
|
</div>
|
||||||
|
<div class="line"></div>
|
||||||
|
<div class="btn_right">
|
||||||
|
<image
|
||||||
|
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/lcoal_payIcon.png"
|
||||||
|
mode="aspectFill"
|
||||||
|
></image>
|
||||||
|
快捷支付记录
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="btnList_after"></div>
|
||||||
|
|
||||||
|
<nav-footer :current="2" />
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import {
|
import {
|
||||||
request,
|
request,
|
||||||
picUrl,
|
picUrl,
|
||||||
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() {
|
||||||
return {
|
return {
|
||||||
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) {
|
||||||
|
const meun = menuButtonInfo();
|
||||||
|
this.top = meun.top;
|
||||||
|
// this.top = meun.height + meun.top;
|
||||||
|
this.localHeight = meun.height;
|
||||||
|
this.getCateList();
|
||||||
|
this.getMechantList();
|
||||||
|
this.address = uni.getStorageSync("location").address;
|
||||||
|
console.log(this.address);
|
||||||
|
},
|
||||||
|
|
||||||
|
onReachBottom() {
|
||||||
|
if (this.flag) {
|
||||||
|
this.getMechantList();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
swiperChange(e) {
|
||||||
|
this.currentIndex = e.detail.current;
|
||||||
|
},
|
||||||
|
|
||||||
|
checkItem(index) {
|
||||||
|
this.$set(this.checkedItems, index, !this.checkedItems[index]);
|
||||||
|
},
|
||||||
|
//查询商家分类
|
||||||
|
async getCateList() {
|
||||||
|
let that = this;
|
||||||
|
await request(apiArr.getMerChantCateList, "POST").then((res) => {
|
||||||
|
console.log(res);
|
||||||
|
// 将数据分成每10个一组
|
||||||
|
const chunkSize = 10;
|
||||||
|
that.swiperList = [];
|
||||||
|
for (let i = 0; i < res.rows.length; i += chunkSize) {
|
||||||
|
that.swiperList.push(res.rows.slice(i, i + chunkSize));
|
||||||
}
|
}
|
||||||
|
});
|
||||||
},
|
},
|
||||||
onLoad(options) {
|
//查询商家列表
|
||||||
const meun = menuButtonInfo();
|
async getMechantList() {
|
||||||
this.top = meun.top;
|
let that = this;
|
||||||
// this.top = meun.height + meun.top;
|
await request(apiArr.getMerchantList, "POST", {
|
||||||
this.localHeight = meun.height;
|
page_num: that.page_num,
|
||||||
this.getCateList();
|
page_size: that.page_size,
|
||||||
this.getMechantList();
|
}).then((res) => {
|
||||||
this.address = uni.getStorageSync("location").address
|
let latitude = uni.getStorageSync("location").lat;
|
||||||
console.log(this.address)
|
let longitude = uni.getStorageSync("location").lng;
|
||||||
},
|
res.rows.forEach((item) => {
|
||||||
|
item.bigImg = item.album_images.split(",");
|
||||||
|
const distanceInKm = calculateDistance(
|
||||||
|
latitude,
|
||||||
|
longitude,
|
||||||
|
item.latitude,
|
||||||
|
item.longitude
|
||||||
|
);
|
||||||
|
item.distances =
|
||||||
|
distanceInKm >= 1
|
||||||
|
? `${distanceInKm.toFixed(1)}km`
|
||||||
|
: `${(distanceInKm * 1000).toFixed(1)}m`;
|
||||||
|
|
||||||
onReachBottom() {
|
if (item.ad) {
|
||||||
if(this.flag){
|
item.comAddress = item.ad.ad_name.replace(/,/g, "") + item.address;
|
||||||
this.getMechantList();
|
} else {
|
||||||
|
item.comAddress = item.address;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
res.rows.sort((a, b) => {
|
||||||
|
const valueA =
|
||||||
|
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;
|
||||||
|
});
|
||||||
|
|
||||||
|
if (res.rows.length == this.page_size) {
|
||||||
|
this.page_num = this.page_num + 1;
|
||||||
|
this.flag = true;
|
||||||
|
} else {
|
||||||
|
this.flag = false;
|
||||||
}
|
}
|
||||||
},
|
this.merchatList = this.merchatList.concat(res.rows);
|
||||||
|
});
|
||||||
methods: {
|
|
||||||
swiperChange(e) {
|
|
||||||
this.currentIndex = e.detail.current;
|
|
||||||
},
|
|
||||||
|
|
||||||
checkItem(index) {
|
|
||||||
this.$set(this.checkedItems, index, !this.checkedItems[index]);
|
|
||||||
},
|
|
||||||
//查询商家分类
|
|
||||||
async getCateList() {
|
|
||||||
let that = this
|
|
||||||
await request(apiArr.getMerChantCateList, "POST").then(res => {
|
|
||||||
console.log(res);
|
|
||||||
// 将数据分成每10个一组
|
|
||||||
const chunkSize = 10;
|
|
||||||
that.swiperList = [];
|
|
||||||
for (let i = 0; i < res.rows.length; i += chunkSize) {
|
|
||||||
that.swiperList.push(res.rows.slice(i, i + chunkSize));
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
//查询商家列表
|
|
||||||
async getMechantList(){
|
|
||||||
let that = this
|
|
||||||
await request(apiArr.getMerchantList, "POST",{
|
|
||||||
page_num:that.page_num,
|
|
||||||
page_size:that.page_size,
|
|
||||||
}).then(res => {
|
|
||||||
let latitude = uni.getStorageSync("location").lat
|
|
||||||
let longitude = uni.getStorageSync("location").lng
|
|
||||||
res.rows.forEach(item => {
|
|
||||||
item.bigImg = item.album_images.split(',')
|
|
||||||
const distanceInKm = calculateDistance(latitude,longitude,item.latitude,item.longitude);
|
|
||||||
item.distances = distanceInKm >= 1 ? `${distanceInKm.toFixed(1)}km` : `${(distanceInKm * 1000).toFixed(1)}m`;
|
|
||||||
|
|
||||||
if(item.ad){
|
|
||||||
item.comAddress = item.ad.ad_name.replace(/,/g, '') + item.address
|
|
||||||
}else{
|
|
||||||
item.comAddress = item.address
|
|
||||||
}
|
|
||||||
});
|
|
||||||
res.rows.sort((a, b) => {
|
|
||||||
const valueA = 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;
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
if(res.rows.length == this.page_size){
|
|
||||||
this.page_num = this.page_num + 1;
|
|
||||||
this.flag = true
|
|
||||||
}else{
|
|
||||||
this.flag = false
|
|
||||||
}
|
|
||||||
this.merchatList = this.merchatList.concat(res.rows)
|
|
||||||
})
|
|
||||||
},
|
|
||||||
//跳转商家详情
|
|
||||||
Info(e){
|
|
||||||
uni.setStorageSync("merchantInfo",e)
|
|
||||||
NavgateTo("../detail/index")
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
|
//跳转商家详情
|
||||||
|
Info(e) {
|
||||||
}
|
uni.setStorageSync("merchantInfo", e);
|
||||||
|
NavgateTo("../detail/index");
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user