Task：旅居列表接口对接

api/qianxian.js

@@ -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})
+}

pkg_product/views/famousQianxianShop.vue

@@ -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-04.png' },
-        { name: '招商政策', icon: '/page/qianxian/icon-03.png' },
+        { name: '招商', icon: '/page/qianxian/icon-03.png' },
-        { name: '租售资讯', icon: '/page/qianxian/icon-07.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;
+        width: 100%;
-        height: 360rpx;
+        min-height: 360rpx;
         padding: 20rpx;
-        margin: 10rpx auto;
+        margin: -2rpx auto 0;
-        border-radius: 20rpx;
+        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;