liangxin/xdd-uniapp-new
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feat：县域详情加载优化

Browse Source
This commit is contained in:
LinCyJang
2026-06-01 01:07:28 +08:00
parent 48e037e44e
commit 4eb12b7a70
1 changed files with 382 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pkg_product/views/famousQianxianShop.vue
+382 -121
View File
@@ -349,7 +349,7 @@
</view>
</view>
<view class="v12-px-6" >
<u-divider :text="infoArray.length === 0 ? ' ·　暂无资讯　· ' : ' ·　已经到底啦　· '" textPosition="center"></u-divider>
<u-divider :text="infoArray.length === 0 ? ' ·　暂无资讯　· ' : ` ·　${getLoadMoreText(infoLoading, infoHasMore, infoArray)}　· `" textPosition="center"></u-divider>
</view>
</view>
</view>
@@ -401,7 +401,7 @@
v-if="activeIndex === 2"
class="guide-section"
>
<view v-if="isLoadInfoListSuccess">
<view v-if="isLoadGuideListoSuccess">
<view class="guide-list">
<view
v-for="(item, index) in guideList"
@@ -430,7 +430,7 @@
class="no-data-loadend"
/> -->
<view class="v12-px-6" >
<u-divider :text="guideList.length === 0 ? ' ·　暂无攻略　· ' : ' ·　已经到底啦　· '" textPosition="center"></u-divider>
<u-divider :text="guideList.length === 0 ? ' ·　暂无攻略　· ' : ` ·　${getLoadMoreText(guideLoading, guideHasMore, guideList)}　· `" textPosition="center"></u-divider>
</view>
</view>
<goo-skeleton v-else />
@@ -533,6 +533,9 @@
</view>
</view>
</view>
<view v-if="industryList.length > 0 || investmentFileList.length > 0" class="load-more-status">
{{ getLoadMoreText(industryLoading || investmentLoading, industryHasMore || investmentHasMore, industryList.length ? industryList : investmentFileList) }}
</view>
<!-- <view class="project-wrap">
<view class="title">
<image
@@ -633,6 +636,9 @@
</view>
</view>
</view>
<view v-if="shopList.length > 0" class="load-more-status">
{{ getLoadMoreText(shopLoading, shopHasMore, shopList) }}
</view>
</view>
<view v-if="industryTabIndex === 2">
<view class="card-wrap">
@@ -698,6 +704,9 @@
</view>
</view>
</view>
<view v-if="jiaLouList.length > 0" class="load-more-status">
{{ getLoadMoreText(jiaLouLoading, jiaLouHasMore, jiaLouList) }}
</view>
</view>
<view v-if="industryTabIndex === 3">
<view class="card-wrap">
@@ -769,6 +778,9 @@
</view>
</view>
</view>
<view v-if="villageList.length > 0" class="load-more-status">
{{ getLoadMoreText(villageLoading, villageHasMore, villageList) }}
</view>
</view>
</view>
<!-- 产品 -->
@@ -907,7 +919,6 @@ import {
postCountyFamousNewsZan,
postCountyFamousNewsView,
getCountyFamousIndustry,
getCountyFamousIndustryProject,
getCountyFamousInvestmentFile,
getCountyFamousVillage,
getCountyFamousCityDetail,
@@ -958,6 +969,7 @@ export default {
showShare: false,
posterUrl: '', // 分享海报
id: null,
pageSize: 10,
partnerId: null,
isLike: false, //点赞
isFavorite: false,
@@ -1006,10 +1018,42 @@ export default {
countyId: null,
newsCategoryList: [],
newsCurrent: 0,
newsCategoryInited: false,
newsCategoryLoading: false,
shopList: [],
shopTypeList: [],
shopTypeActive: '',
detail: {}
shopTypeInited: false,
detail: {},
infoPage: 1,
infoHasMore: true,
infoLoading: false,
infoInited: false,
guidePage: 1,
guideHasMore: true,
guideLoading: false,
guideInited: false,
industryPage: 1,
industryHasMore: true,
industryLoading: false,
industryInited: false,
investmentPage: 1,
investmentHasMore: true,
investmentLoading: false,
investmentInited: false,
shopPage: 1,
shopHasMore: true,
shopLoading: false,
shopInited: false,
jiaLouPage: 1,
jiaLouHasMore: true,
jiaLouLoading: false,
jiaLouInited: false,
villagePage: 1,
villageHasMore: true,
villageLoading: false,
villageInited: false,
saleListInited: false
}
},
onShareAppMessage() {
@@ -1027,6 +1071,35 @@ export default {
onPageScroll(e) {
this.scrollData = e
},
onReachBottom() {
if (this.activeIndex === 3) {
this.getInfoReq()
return
}
if (this.activeIndex === 2) {
this.getGuideReq()
return
}
if (this.activeIndex !== 0) {
return
}
if (this.industryTabIndex === 0) {
this.getIndustryReq()
this.getInvestmentFileReq()
return
}
if (this.industryTabIndex === 1) {
this.getShopList()
return
}
if (this.industryTabIndex === 2) {
this.getJiaLouListReq()
return
}
if (this.industryTabIndex === 3) {
this.getVillageListReq()
}
},
onLoad(options) {
const id = options.id || ''
this.id = id
@@ -1044,29 +1117,77 @@ export default {
}
if (this.partnerId) cookie.set('spread', this.partnerId)
this.getShopDetailReq()
this.getInfoReq()
this.getGuideReq()
// this.initPoster()
this.getListReq()
this.getSaleListReq()
this.queryGuide('countyFamousIndex')
this.getCityNewsCategoryReq()
},
methods: {
getPageList(data) {
if (Array.isArray(data)) {
return data
}
return (data && (data.records || data.list || data.data)) || []
},
getHasMore(data, list, page) {
const pageCount = Number(
data && (data.pages || data.totalPage || data.last_page || data.pageCount || 0)
)
const total = Number(
data && (data.total || data.totalCount || data.count || 0)
)
if (pageCount > 0) {
return page < pageCount
}
if (total > 0) {
return page * this.pageSize < total
}
return list.length >= this.pageSize
},
getLoadMoreText(loading, hasMore, list) {
if (!list.length) return ''
if (loading) return '加载中...'
if (hasMore) return '上拉加载更多'
return '没有更多了'
},
formatInfoList(list = []) {
return list.map(info => {
var pt = info.createTime.replace(/-/g, "/")
info.year = formatDateTime(pt, 'yyyy')
info.monthDay = formatDateTime(pt, 'MM/dd')
info.time = formatDateTime(pt, 'HH:mm:ss')
info.showMore = false
return info
})
},
formatGuideList(list = []) {
return list.map((info) => {
var pt = info.createTime.replace(/-/g, "/")
info.year = formatDateTime(pt, 'yyyy')
info.monthDay = formatDateTime(pt, 'MM/dd')
info.time = formatDateTime(pt, 'HH:mm:ss')
return info
})
},
/**
* 获取县城资讯类别
*/
getCityNewsCategoryReq() {
getCityNewsCategory().then(res => {
if (this.newsCategoryInited || this.newsCategoryLoading) {
return Promise.resolve()
}
this.newsCategoryLoading = true
return getCityNewsCategory().then(res => {
if(res.status === 200) {
this.newsCategoryList = [{name: '全部', id: ''}].concat(res.data || [])
this.newsCategoryInited = true
}
}).finally(() => {
this.newsCategoryLoading = false
})
},
changeNewsTab(index) {
if (this.newsCurrent === index) return
this.newsCurrent = index
this.getInfoReq()
this.getInfoReq(true)
},
formatterTime(time) {
const now = new Date();
@@ -1229,27 +1350,18 @@ export default {
} else {
this.saleActived = e.id
}
getCountyFamousVillage({
countyFamousDataId: this.id,
categoryId: this.saleActived,
page: 1,
limit: 9999
}).then(res => {
const { success, data } = res
if (success) {
this.villageList = data.records || []
}
})
this.getVillageListReq(true)
},
getSaleListReq() {
const params = {
countyFamousDataId: this.id,
page: 1,
limit: 9999
if (this.saleListInited) {
return Promise.resolve()
}
getSaleList(params).then(res => {
const params = {
countyFamousDataId: this.id
}
return getSaleList(params).then(res => {
this.saleList = [{name: '全部', id: ''}].concat(res.data || [])
this.saleListInited = true
})
},
goStore(item) {
@@ -1276,49 +1388,9 @@ export default {
}
})
},
getListReq(id) {
// getPoster(this.id).then(({data}) => this.posterUrl = data)
getCountyFamousIndustry({
countyFamousDataId: this.id,
page: 1,
limit: 9999
}).then(res => {
const { success, data } = res
if (success) {
this.industryList = data.records || []
}
})
getCountyFamousIndustryProject({
countyFamousDataId: this.id,
page: 1,
limit: 9999
}).then(res => {
const { success, data } = res
if (success) {
this.industryProjectList = data.records || []
}
})
getCountyFamousInvestmentFile({
countyFamousDataId: this.id,
page: 1,
limit: 9999
}).then(res => {
const { success, data } = res
if (success) {
this.investmentFileList = data.records || []
}
})
getCountyFamousVillage({
countyFamousDataId: this.id,
categoryId: id,
page: 1,
limit: 9999
}).then(res => {
const { success, data } = res
if (success) {
this.villageList = data.records || []
}
})
getListReq() {
this.getIndustryReq(true)
this.getInvestmentFileReq(true)
getCountyFamousCityDetail(this.id).then(res => {
const { success, data } = res
if (success) {
@@ -1405,34 +1477,38 @@ export default {
})
},
// 资讯
getInfoReq() {
getInfoReq(reset = false) {
const _this = this
if (_this.loading) {
if (_this.infoLoading) {
return
}
if (!reset && !_this.infoHasMore) {
return
}
_this.isLoadInfoListSuccess = false
_this.loading = true
_this.infoArray = []
_this.infoLoading = true
const page = reset ? 1 : _this.infoPage
if (reset) {
_this.infoPage = 1
_this.infoHasMore = true
_this.infoArray = []
}
const categoryId = this.newsCategoryList[this.newsCurrent] ? this.newsCategoryList[this.newsCurrent].id : ''
getCountyFamousCityNews({
page: 1,
limit: 9999,
page,
limit: this.pageSize,
countyFamousDataId: _this.id,
categoryId: categoryId
}).then(res => {
const { data } = res
_this.loading = false
_this.infoArray.push.apply(_this.infoArray, _this.toTop(data.records).map((info) => {
var pt = info.createTime.replace(/-/g, "/")
info.year = formatDateTime(pt, 'yyyy')
info.monthDay = formatDateTime(pt, 'MM/dd')
info.time = formatDateTime(pt, 'HH:mm:ss')
info.showMore = false
return info
}))
// console.log(this.toTop(_this.infoArray));
const list = _this.formatInfoList(_this.getPageList(data))
const merged = page === 1 ? list : _this.infoArray.concat(list)
_this.infoArray = _this.toTop(merged)
_this.infoHasMore = _this.getHasMore(data, list, page)
_this.infoPage = page + 1
_this.infoInited = true
}).finally(() => {
_this.loading = false
_this.infoLoading = false
_this.isLoadInfoListSuccess = true
uni.stopPullDownRefresh()
})
@@ -1443,30 +1519,35 @@ export default {
})
},
// 攻略
getGuideReq() {
getGuideReq(reset = false) {
const _this = this
if (_this.loading) {
if (_this.guideLoading) {
return
}
if (!reset && !_this.guideHasMore) {
return
}
_this.isLoadGuideListoSuccess = false
_this.loading = true
_this.guideList = []
_this.guideLoading = true
const page = reset ? 1 : _this.guidePage
if (reset) {
_this.guidePage = 1
_this.guideHasMore = true
_this.guideList = []
}
getCountyFamousCityGuide({
page: 1,
limit: 9999,
page,
limit: this.pageSize,
countyFamousDataId: _this.id
}).then(res => {
const { data } = res
_this.loading = false
_this.guideList.push.apply(_this.guideList, data.records.map((info) => {
var pt = info.createTime.replace(/-/g, "/")
info.year = formatDateTime(pt, 'yyyy')
info.monthDay = formatDateTime(pt, 'MM/dd')
info.time = formatDateTime(pt, 'HH:mm:ss')
return info
}))
const list = _this.formatGuideList(_this.getPageList(data))
_this.guideList = page === 1 ? list : _this.guideList.concat(list)
_this.guideHasMore = _this.getHasMore(data, list, page)
_this.guidePage = page + 1
_this.guideInited = true
}).finally(() => {
_this.loading = false
_this.guideLoading = false
_this.isLoadGuideListoSuccess = true
uni.stopPullDownRefresh()
})
@@ -1478,10 +1559,35 @@ export default {
// 刷新数据
switch (this.activeIndex) {
case 3:
this.getInfoReq()
this.getCityNewsCategoryReq().finally(() => {
if (!this.infoInited) {
this.getInfoReq(true)
}
})
break
case 2:
this.getGuideReq()
if (!this.guideInited) {
this.getGuideReq(true)
}
break
case 0:
if (this.industryTabIndex === 1) {
if (!this.shopTypeInited) {
this.getShopTypeList()
}
if (!this.shopInited) {
this.getShopList(true)
}
}
if (this.industryTabIndex === 2 && !this.jiaLouInited) {
this.getJiaLouListReq(true)
}
if (this.industryTabIndex === 3) {
this.getSaleListReq()
if (!this.villageInited) {
this.getVillageListReq(true)
}
}
break
default:
break
@@ -1726,26 +1832,30 @@ export default {
if (index === this.industryTabIndex) return
this.industryTabIndex = index
if (index === 2) {
const params = {
countyId: this.countyId,
shopType: 'countyFamous',
name: '',
page: 1,
limit: 9999
if (!this.jiaLouInited) {
this.getJiaLouListReq(true)
}
getJiaLouList(params).then(res => {
this.jiaLouList = res.data.records || []
})
}
if (index === 1) {
this.shopTypeActive = ''
if (this.shopTypeList.length === 0) {
this.getShopTypeList()
}
this.getShopList()
if (!this.shopInited) {
this.getShopList(true)
}
}
if (index === 3) {
this.getSaleListReq()
if (!this.villageInited) {
this.getVillageListReq(true)
}
}
},
getShopTypeList() {
if (this.shopTypeInited) {
return
}
getCountyFamousHotelType({
page: 1,
limit: 9999
@@ -1754,25 +1864,170 @@ export default {
? res.data
: (res.data && (res.data.hotelTypeList || res.data.list || res.data.records)) || []
this.shopTypeList = [{ name: '全部', id: '' }].concat(listData || [])
this.shopTypeInited = true
})
},
getShopList() {
getIndustryReq(reset = false) {
if (this.industryLoading) {
return
}
if (!reset && !this.industryHasMore) {
return
}
const page = reset ? 1 : this.industryPage
if (reset) {
this.industryPage = 1
this.industryHasMore = true
this.industryList = []
}
this.industryLoading = true
getCountyFamousIndustry({
countyFamousDataId: this.id,
page,
limit: this.pageSize
}).then(res => {
const { success, data } = res
if (success) {
const list = this.getPageList(data)
this.industryList = page === 1 ? list : this.industryList.concat(list)
this.industryHasMore = this.getHasMore(data, list, page)
this.industryPage = page + 1
this.industryInited = true
}
}).finally(() => {
this.industryLoading = false
})
},
getInvestmentFileReq(reset = false) {
if (this.investmentLoading) {
return
}
if (!reset && !this.investmentHasMore) {
return
}
const page = reset ? 1 : this.investmentPage
if (reset) {
this.investmentPage = 1
this.investmentHasMore = true
this.investmentFileList = []
}
this.investmentLoading = true
getCountyFamousInvestmentFile({
countyFamousDataId: this.id,
page,
limit: this.pageSize
}).then(res => {
const { success, data } = res
if (success) {
const list = this.getPageList(data)
this.investmentFileList = page === 1 ? list : this.investmentFileList.concat(list)
this.investmentHasMore = this.getHasMore(data, list, page)
this.investmentPage = page + 1
this.investmentInited = true
}
}).finally(() => {
this.investmentLoading = false
})
},
getJiaLouListReq(reset = false) {
if (this.jiaLouLoading || !this.countyId) {
return
}
if (!reset && !this.jiaLouHasMore) {
return
}
const page = reset ? 1 : this.jiaLouPage
if (reset) {
this.jiaLouPage = 1
this.jiaLouHasMore = true
this.jiaLouList = []
}
this.jiaLouLoading = true
const params = {
countyId: this.countyId,
shopType: 'countyFamous',
name: '',
page,
limit: this.pageSize
}
getJiaLouList(params).then(res => {
const list = this.getPageList(res.data)
this.jiaLouList = page === 1 ? list : this.jiaLouList.concat(list)
this.jiaLouHasMore = this.getHasMore(res.data, list, page)
this.jiaLouPage = page + 1
this.jiaLouInited = true
}).finally(() => {
this.jiaLouLoading = false
})
},
getShopList(reset = false) {
if (this.shopLoading) {
return
}
if (!reset && !this.shopHasMore) {
return
}
const page = reset ? 1 : this.shopPage
if (reset) {
this.shopPage = 1
this.shopHasMore = true
this.shopList = []
}
const params = {
countyFamousDataId: this.id,
page: 1,
limit: 9999
page,
limit: this.pageSize
}
if (this.shopTypeActive) {
params.countyFamousHotelType = this.shopTypeActive
}
this.shopLoading = true
getCityShopList(params).then(res => {
this.shopList = (res.data && (res.data.records || res.data.list)) || []
const list = this.getPageList(res.data)
this.shopList = page === 1 ? list : this.shopList.concat(list)
this.shopHasMore = this.getHasMore(res.data, list, page)
this.shopPage = page + 1
this.shopInited = true
}).finally(() => {
this.shopLoading = false
})
},
handleShopType(type) {
if (this.shopTypeActive === type.id) return
this.shopTypeActive = type.id
this.getShopList()
this.getShopList(true)
},
getVillageListReq(reset = false) {
if (this.villageLoading) {
return
}
if (!reset && !this.villageHasMore) {
return
}
const page = reset ? 1 : this.villagePage
if (reset) {
this.villagePage = 1
this.villageHasMore = true
this.villageList = []
}
this.villageLoading = true
getCountyFamousVillage({
countyFamousDataId: this.id,
categoryId: this.saleActived,
page,
limit: this.pageSize
}).then(res => {
const { success, data } = res
if (success) {
const list = this.getPageList(data)
this.villageList = page === 1 ? list : this.villageList.concat(list)
this.villageHasMore = this.getHasMore(data, list, page)
this.villagePage = page + 1
this.villageInited = true
}
}).finally(() => {
this.villageLoading = false
})
},
fileItemClick(file) {
const url = file.attachment || ''
@@ -1900,6 +2155,12 @@ export default {
white-space: nowrap;
}
}
.load-more-status{
padding: 24rpx 0 8rpx;
text-align: center;
font-size: 24rpx;
color: #999;
}
.video-item {
width: 100%;
height: 400rpx;