Task:旅居列表接口对接
This commit is contained in:
@@ -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})
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user