Task:旅居列表接口对接

This commit is contained in:
modendeveloper
2025-04-27 00:06:13 +08:00
parent 3c56f3cfb5
commit 491323fc17
2 changed files with 200 additions and 34 deletions
+5
View File
@@ -103,3 +103,8 @@ export function getShareImg(id) {
export function getSaleList(params) {
return request.get('/countyFamous/village/category', params, {login: true})
}
// 旅居列表
export function getJiaLouList(params) {
return request.get('/countyFamous/sojourn', params, {login: true})
}
+195 -34
View File
@@ -323,35 +323,36 @@
>
<view v-if="industryTabIndex === 0">
<view class="card-wrap">
<image
<!-- <image
:src="webUrl + '/page/qianxian/card-bg1.png'"
class="bg"
/>
/> -->
<view class="card-cont">
<view class="tab-wrap" id="tab-wrap">
<view
v-for="(tab, tabIndex) in industryTab"
:key="tabIndex"
:class="industryTabIndex === tabIndex ? 'active' : ''"
:class="industryTabIndex === tabIndex ? 'tab-item2' : ''"
class="item"
@click="industryTabItemClick(tabIndex)"
>
<image
<!-- <image
:src="webUrl + tab.icon"
class="icon"
/>
/> -->
{{ tab.name }}
</view>
</view>
<view class="file-wrap">
<view class="title">
<image
:src="webUrl + '/page/qianxian/icon-02.png'"
class="icon"
/>
重点项目
</view>
<view v-if="industryList.length > 0" class="file-list">
<view class="title">
<image
:src="webUrl + '/page/qianxian/icon-02.png'"
class="icon"
/>
重点项目
</view>
<view class="list-cont">
<view
v-for="(file, fileIndex) in industryList"
@@ -399,23 +400,23 @@
</view>
<view v-if="industryTabIndex === 1">
<view class="card-wrap">
<image
<!-- <image
:src="webUrl + '/page/qianxian/card-bg2.png'"
class="bg"
/>
/> -->
<view class="card-cont">
<view class="tab-wrap">
<view
v-for="(tab, tabIndex) in industryTab"
:key="tabIndex"
:class="industryTabIndex === tabIndex ? 'active' : ''"
:class="industryTabIndex === tabIndex ? 'tab-item1' : ''"
class="item"
@click="industryTabItemClick(tabIndex)"
>
<image
<!-- <image
:src="webUrl + tab.icon"
class="icon"
/>
/> -->
{{ tab.name }}
</view>
</view>
@@ -450,23 +451,92 @@
</view>
<view v-if="industryTabIndex === 2">
<view class="card-wrap">
<image
<!-- <image
:src="webUrl + '/page/qianxian/card-bg3.png'"
class="bg bg3"
/>
/> -->
<view class="card-cont">
<view class="tab-wrap">
<view
v-for="(tab, tabIndex) in industryTab"
:key="tabIndex"
:class="industryTabIndex === tabIndex ? 'active' : ''"
:class="industryTabIndex === tabIndex ? 'tab-item1' : ''"
class="item"
@click="industryTabItemClick(tabIndex)"
>
<image
<!-- <image
:src="webUrl + tab.icon"
class="icon"
/>
/> -->
{{ tab.name }}
</view>
</view>
<view class="village-wrap">
<view class="v12-pa-2 sale-wrap">
</view>
<view v-if="jiaLouList.length > 0" class="village-list">
<view
v-for="(jiaLou, jiaLouIndex) in jiaLouList"
:key="jiaLouIndex"
class="village-item v12-white"
@click="villageItemClick(jiaLou)"
>
<view class="img-wrap">
<image
:src="jiaLou.cover + (jiaLou.coverType === 2 ? '?vframe/jpg/offset/1' : '')"
class="img"
/>
<view class="location">
<image
:src="webUrl + '/page/qianxian/icon-08.png'"
class="icon"
/>
<view class="addr one-t">
{{ jiaLou.address }}
</view>
</view>
</view>
<view class="info">
<view class="intro more-t">
{{ jiaLou.intro }}
</view>
<view class="name-wrap">
<image
:src="jiaLou.logo"
class="logo"
/>
<view class="name one-t">
{{ jiaLou.name }}
</view>
</view>
</view>
</view>
</view>
<view v-else class="no-data">暂无租售资讯</view>
</view>
</view>
</view>
</view>
<view v-if="industryTabIndex === 3">
<view class="card-wrap">
<!-- <image
:src="webUrl + '/page/qianxian/card-bg3.png'"
class="bg bg3"
/> -->
<view class="card-cont">
<view class="tab-wrap">
<view
v-for="(tab, tabIndex) in industryTab"
:key="tabIndex"
:class="industryTabIndex === tabIndex ? 'tab-item0' : ''"
class="item"
@click="industryTabItemClick(tabIndex)"
>
<!-- <image
:src="webUrl + tab.icon"
class="icon"
/> -->
{{ tab.name }}
</view>
</view>
@@ -660,7 +730,8 @@ import {
getCountyFamousVillage,
getCountyFamousCityDetail,
getShareImg,
getSaleList
getSaleList,
getJiaLouList,
} from '@/api/qianxian'
import ProductWindow from '@/components/ProductWindow'
import goCartMixin from '@/mixins/goCartMixins'
@@ -733,15 +804,17 @@ export default {
// 村屋列表
villageList: [],
industryTab: [
{ name: '产业项目', icon: '/page/qianxian/icon-04.png' },
{ name: '招商政策', icon: '/page/qianxian/icon-03.png' },
{ name: '租售资讯', icon: '/page/qianxian/icon-07.png' }
{ name: '项目', icon: '/page/qianxian/icon-04.png' },
{ name: '招商', icon: '/page/qianxian/icon-03.png' },
{ name: '旅居', icon: '/page/qianxian/icon-03.png' },
{ name: '租售', icon: '/page/qianxian/icon-07.png' }
],
industryTabIndex: 0,
// 产品
leftList: [],
rightList: [],
videoPlayers:[]
videoPlayers:[],
jiaLouList: [],
}
},
// 必须在页面加 onPageScroll(e){} ,才能滑动显示背景
@@ -1359,6 +1432,18 @@ export default {
industryTabItemClick(index) {
if (index === this.industryTabIndex) return
this.industryTabIndex = index
if(index === 2) {
const params = {
countyFamousDataId: this.id,
page: 1,
limit: 9999
}
console.log(params);
getJiaLouList(params).then(res => {
this.jiaLouList = res.data.records || []
})
}
},
fileItemClick(file) {
const url = file.attachment || ''
@@ -1387,7 +1472,76 @@ export default {
</script>
<style scoped lang="less">
.tab-item0{
position: relative;
background-color: #fff !important;
padding: 10px 15px;
border-radius: 12px 12px 0 0;
cursor: pointer;
transition: .2s;
}
.tab-item0::before{
position: absolute;
bottom: 0;
content: '';
width: 20px;
height: 20px;
border-radius: 100%;
box-shadow: 0 0 0 40px #fff;
transition: .2s;
}
.tab-item0::before{
left: -20px;
clip-path: inset(50% -10px 0 50%);
}
.tab-item1{
position: relative;
background-color: #fff !important;
padding: 10px 15px;
border-radius: 12px 12px 0 0;
cursor: pointer;
transition: .2s;
}
.tab-item1::before,.tab-item1::after{
position: absolute;
bottom: 0;
content: '';
width: 20px;
height: 20px;
border-radius: 100%;
box-shadow: 0 0 0 40px #fff;
transition: .2s;
}
.tab-item1::before{
left: -20px;
clip-path: inset(50% -10px 0 50%);
}
.tab-item1::after{
right: -20px;
clip-path: inset(50% 50% 0 -10px);
}
.tab-item2{
position: relative;
background-color: #fff !important;
padding: 10px 15px;
border-radius: 12px 12px 0 0;
cursor: pointer;
transition: .2s;
}
.tab-item2::after{
position: absolute;
bottom: 0;
content: '';
width: 20px;
height: 20px;
border-radius: 100%;
box-shadow: 0 0 0 40px #fff;
transition: .2s;
}
.tab-item2::after{
right: -20px;
clip-path: inset(50% 50% 0 -10px);
}
@import "@/assets/css/store.less";
.saleActive{
background: #C52733 !important;
@@ -1894,6 +2048,7 @@ export default {
background-color: #F0F0F0;
.card-wrap {
position: relative;
height: 460rpx;
.bg {
position: relative;
z-index: 2;
@@ -1917,10 +2072,11 @@ export default {
align-items: center;
justify-content: center;
flex: 1;
height: 80rpx;
// height: 80rpx;
font-size: 32rpx;
line-height: 36rpx;
font-weight: bold;
background-color: #eee;
.icon {
display: block;
width: 24rpx;
@@ -1936,13 +2092,13 @@ export default {
}
}
.file-wrap {
width: 630rpx;
height: 360rpx;
width: 100%;
min-height: 360rpx;
padding: 20rpx;
margin: 10rpx auto;
border-radius: 20rpx;
margin: -2rpx auto 0;
border-radius: 0 0 20rpx 20rpx;
box-sizing: border-box;
background: rgba(240,240,240,0.39);
background: #fff;
.title {
display: flex;
align-items: center;
@@ -1959,6 +2115,9 @@ export default {
.file-list {
height: 300rpx;
overflow-y: auto;
padding: 20rpx;
border-radius: 20rpx;
background: #eee;
.list-cont {
padding: 20rpx 0 0 0;
.file-item {
@@ -1993,6 +2152,8 @@ export default {
height: 980rpx;
// padding: 16rpx 0 0 0;
overflow-y: auto;
background: #fff;
border-radius: 0 0 20rpx 20rpx;
}
.village-list {
display: flex;