beizhu

src/pages/building/buildingdetail.vue

@@ -81,19 +81,19 @@ import BuildingPerimeter from "./components/buildingperimeter.vue";
 
 export default {
   name: "BuildingDetail",
-   data() {
-        return {
-        activeName: '',
-        };
+  data() {
+    return {
+      activeName: ""
+    };
   },
   components: {
     "vue-headful": () => import("vue-headful"),
-    BuildingPerimeter: BuildingPerimeter,
+    BuildingPerimeter: BuildingPerimeter
   },
   computed: {
     ...mapState({
-      detail: s => s.building.detail,
-    }),
+      detail: s => s.building.detail
+    })
   },
   created() {
     this.getBuilding({ project_id: "1" });
@@ -104,7 +104,10 @@ export default {
       this.$router.push({ name: "lookhouse" });
     },
     gotopageimg() {
-      this.$router.push({ name: "buildingimage" });
+      this.$router.push({
+        name: "buildingimage",
+        query: { id: this.detail.buildingid }
+      });
     },
     gotopagetype() {
       this.$router.push({ name: "buildingtype" });
@@ -114,8 +117,8 @@ export default {
 </script>
 
 <style scoped>
-.van-cell:not(:last-child)::after{
-    right:15px!important;
+.van-cell:not(:last-child)::after {
+  right: 15px !important;
 }
 </style>
 
@@ -127,12 +130,12 @@ export default {
   overflow-y: auto;
   position: relative;
 
-  .cityarea{
-    width:72px;
-    height:27px;
-    background:rgba(0,0,0,0.39);
+  .cityarea {
+    width: 72px;
+    height: 27px;
+    background: rgba(0, 0, 0, 0.39);
     padding: 0 0 0 5px;
-    border-radius:0px 0px 25px 0px;
+    border-radius: 0px 0px 25px 0px;
     position: absolute;
     top: 0;
     left: 0;
@@ -140,26 +143,26 @@ export default {
     flex-direction: row;
     align-items: center;
 
-    .iconarea{
-        font-size: 10px !important;
-        color:rgba(255,255,255,1) !important;
-        padding-right:5px;
+    .iconarea {
+      font-size: 10px !important;
+      color: rgba(255, 255, 255, 1) !important;
+      padding-right: 5px;
     }
 
-    .areaname{
-        font-size:12px;
-        font-family:PingFangSC-Regular;
-        font-weight:400;
-        color:rgba(255,255,255,1);
-        line-height:17px;
+    .areaname {
+      font-size: 12px;
+      font-family: PingFangSC-Regular;
+      font-weight: 400;
+      color: rgba(255, 255, 255, 1);
+      line-height: 17px;
     }
-}
+  }
 
-  .headerbigimg{
+  .headerbigimg {
     width: 100%;
     height: 211px;
 
-    .bigimg{
+    .bigimg {
       width: 100%;
       height: 100%;
     }
@@ -229,216 +232,214 @@ export default {
     background-color: rgba(255, 255, 255, 1);
     margin-bottom: 10px;
 
-    .housename{
-    margin-top: 10px;
-    width: 100%;
-    height: 60px;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-
-    .housenameheader{
+    .housename {
+      margin-top: 10px;
+      width: 100%;
+      height: 60px;
       display: flex;
-      flex-direction:row;
-      justify-content: space-between;
-      width: 90%;
-      margin-bottom:5px;
-      padding-top:10px;
-    }
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
 
-    .price{
-        font-size:18px;
-        font-family:PingFangSC-Medium;
-        font-weight:500;
-        color:rgba(255,84,84,1);
-        line-height:22px;
+      .housenameheader {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        width: 90%;
+        margin-bottom: 5px;
+        padding-top: 10px;
+      }
+
+      .price {
+        font-size: 18px;
+        font-family: PingFangSC-Medium;
+        font-weight: 500;
+        color: rgba(255, 84, 84, 1);
+        line-height: 22px;
         padding-right: 8px;
-    }
+      }
 
-    .pricestart{
-        font-size:16px;
-        font-family:PingFangSC-Medium;
-        font-weight:500;
-        color:rgba(0,0,0,1);
-        line-height:22px;
-    }
+      .pricestart {
+        font-size: 16px;
+        font-family: PingFangSC-Medium;
+        font-weight: 500;
+        color: rgba(0, 0, 0, 1);
+        line-height: 22px;
+      }
 
-    .housenamefooter{
+      .housenamefooter {
         display: flex;
-        flex-direction:row;
+        flex-direction: row;
         justify-content: space-between;
         width: 90%;
-    }
-    .phone{
+      }
+      .phone {
         font-size: 12px !important;
-        color:rgba(119,165,240,1)!important;
+        color: rgba(119, 165, 240, 1) !important;
         padding-right: 5px;
-    }
+      }
 
-    .housetype{
-        background:rgba(247,250,255,1);
-        border-radius:2px;
+      .housetype {
+        background: rgba(247, 250, 255, 1);
+        border-radius: 2px;
         padding: 4px 5px;
-        font-size:12px;
-        font-family:PingFangSC-Regular;
-        font-weight:400;
-        color:rgba(119,165,240,1);
-        line-height:17px;
+        font-size: 12px;
+        font-family: PingFangSC-Regular;
+        font-weight: 400;
+        color: rgba(119, 165, 240, 1);
+        line-height: 17px;
         margin-right: 10px;
-    }
+      }
 
-    .housetel{
-        font-size:14px;
-        font-family:PingFangSC-Regular;
-        font-weight:400;
-        color:rgba(119,165,240,1);
-        line-height:20px;
+      .housetel {
+        font-size: 14px;
+        font-family: PingFangSC-Regular;
+        font-weight: 400;
+        color: rgba(119, 165, 240, 1);
+        line-height: 20px;
         display: flex;
         flex-direction: row;
+      }
     }
-  }
-
-.buildingdata{
-    width: 100%;
-    height: 256px;
 
-  .datacontent{
-    width: 90%;
-    height: 206px;
-    background-color:rgba(245,247,249,1);
-    border-radius:2px;
-    margin: 20px 0 0 20px;
-
-    .slidewrapper{
+    .buildingdata {
       width: 100%;
-      height: 100%;
-
-      .slideimg{
-        width: 100%;
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-
-        .slidedesc{
-          padding: 10px 0;
-          font-size:12px;
-          font-family:PingFangSC-Regular;
-          font-weight:400;
-          color:rgba(128,128,128,1);
-          line-height:17px;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-          width: 96%;
+      height: 256px;
 
+      .datacontent {
+        width: 90%;
+        height: 206px;
+        background-color: rgba(245, 247, 249, 1);
+        border-radius: 2px;
+        margin: 20px 0 0 20px;
+
+        .slidewrapper {
+          width: 100%;
+          height: 100%;
+
+          .slideimg {
+            width: 100%;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+
+            .slidedesc {
+              padding: 10px 0;
+              font-size: 12px;
+              font-family: PingFangSC-Regular;
+              font-weight: 400;
+              color: rgba(128, 128, 128, 1);
+              line-height: 17px;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              width: 96%;
+            }
+          }
         }
       }
     }
-  }
-}
 
-.line {
-  width: 90%;
-  border: 0.5px solid #efefef;
+    .line {
+      width: 90%;
+      border: 0.5px solid #efefef;
+    }
   }
-}
 
-.van-button {
-  position: fixed;
-  top: 617px;
-  left: 0;
-  background-color: rgba(63, 65, 68, 1);
-  font-size: 16px;
-  font-family: PingFangSC-Regular;
-  font-weight: 400;
-  color: rgba(255, 255, 255, 1);
-}
+  .van-button {
+    position: fixed;
+    top: 617px;
+    left: 0;
+    background-color: rgba(63, 65, 68, 1);
+    font-size: 16px;
+    font-family: PingFangSC-Regular;
+    font-weight: 400;
+    color: rgba(255, 255, 255, 1);
+  }
 
-.houseconduction{
-  width: 100%;
-  height: auto;
-  background-color: rgba(255,255,255,1);
-  margin-bottom: 10px;
+  .houseconduction {
+    width: 100%;
+    height: auto;
+    background-color: rgba(255, 255, 255, 1);
+    margin-bottom: 10px;
 
-  .line{
-    width:90%;
-    border: 0.5px solid #EFEFEF;
-  }
-  .conduction{
-    padding: 20px 0 18px 20px;
-
-    .conductiontitle{
-      font-size:18px;
-      font-family:PingFangSC-Regular;
-      font-weight:400;
-      color:rgba(37,38,42,1);
-      line-height:25px;
+    .line {
+      width: 90%;
+      border: 0.5px solid #efefef;
+    }
+    .conduction {
+      padding: 20px 0 18px 20px;
+
+      .conductiontitle {
+        font-size: 18px;
+        font-family: PingFangSC-Regular;
+        font-weight: 400;
+        color: rgba(37, 38, 42, 1);
+        line-height: 25px;
+      }
     }
 
-  }
+    .conductioncontent {
+      width: 90%;
+      height: auto;
+      margin-left: 5%;
+      text-align: justify;
 
-  .conductioncontent{
-    width: 90%;
-    height: auto;
-    margin-left:5%;
-    text-align: justify;
-    
-    .conductioncharacters{
-      width: 100%;
-      font-size:14px;
-      font-family:PingFangSC-Regular;
-      font-weight:400;
-      color:rgba(113,108,108,1);
-      line-height:23px;
+      .conductioncharacters {
+        width: 100%;
+        font-size: 14px;
+        font-family: PingFangSC-Regular;
+        font-weight: 400;
+        color: rgba(113, 108, 108, 1);
+        line-height: 23px;
+      }
     }
   }
-}
 
-.dynamics{
-  width: 100%;
-  height: auto;
-  background-color: rgba(255,255,255,1);
-
-  .dynamicstitle{
-    padding: 15px 0 10px 20px;
-
-    .titlecharacters{
-        font-size:18px;
-        font-family:PingFangSC-Regular;
-        font-weight:400;
-        color:rgba(37,38,42,1);
-        line-height:25px;
+  .dynamics {
+    width: 100%;
+    height: auto;
+    background-color: rgba(255, 255, 255, 1);
+
+    .dynamicstitle {
+      padding: 15px 0 10px 20px;
+
+      .titlecharacters {
+        font-size: 18px;
+        font-family: PingFangSC-Regular;
+        font-weight: 400;
+        color: rgba(37, 38, 42, 1);
+        line-height: 25px;
+      }
+    }
+    .dynamictitle {
+      font-size: 16px;
+      font-family: PingFangSC-Regular;
+      font-weight: 400;
+      color: rgba(37, 38, 42, 1);
+      line-height: 22px;
     }
-  }
-        .dynamictitle{
-            font-size:16px;
-            font-family:PingFangSC-Regular;
-            font-weight:400;
-            color:rgba(37,38,42,1);
-            line-height:22px;
-        }
 
-        .peopletimer{
-            font-size:12px;
-            font-family:PingFangSC-Regular;
-            font-weight:400;
-            color:rgba(128,128,128,1);
-            line-height:17px;
+    .peopletimer {
+      font-size: 12px;
+      font-family: PingFangSC-Regular;
+      font-weight: 400;
+      color: rgba(128, 128, 128, 1);
+      line-height: 17px;
 
-            .people{
-                padding-right: 20px
-            }
-        }
+      .people {
+        padding-right: 20px;
+      }
+    }
 
-        .dynamiccontent{
-            font-size:14px;
-            font-family:PingFangSC-Regular;
-            font-weight:400;
-            color:rgba(113,108,108,1);
-            line-height:23px;
-        }
-}
+    .dynamiccontent {
+      font-size: 14px;
+      font-family: PingFangSC-Regular;
+      font-weight: 400;
+      color: rgba(113, 108, 108, 1);
+      line-height: 23px;
+    }
+  }
 }
 </style>

src/pages/building/buildingimage.vue

@@ -40,7 +40,8 @@ export default {
         }),
      },
      created() {
-        this.getBuildingimage({ buildingid: "8a9cd8265afb04b2015bccb967fc15f7" });
+        this.getBuildingimage({ buildingid: this.$route.query.id });
+        window.console.log(this.$route.query.id)
     },
     methods: {
         ...mapActions(["getBuildingimage"]),

src/pages/building/buildingtype.vue

@@ -2,40 +2,42 @@
     <div class="context">
      <vue-headful title="户型图"  />
         <div class="typeheader">
-        <van-swipe class="slidewrapper" :autoplay="3000">
-            <van-swipe-item class="slideimg">
-                <img class="typeimg" />
-            </van-swipe-item>
-        </van-swipe>
-        <div class="typeindex">
-             <span class="typename">帝景天寓楼栋图</span>
-               <div class="imageindex">
-                   <span class="countimage countindex">2</span>
-                   <span class="countimage">/</span>
-                   <span class="countimage totalcount">4</span>
-               </div>
-        </div>
-    </div>
-        <div class="typecontent">
-        <div class="househeader">
-            <div class="headertop">
-                <span class="typetitle">B户型</span>
-                <span class="typeprice">24000元/㎡<span class="fixedsize">起</span></span>
+            <van-swipe class="slidewrapper" v-model="activeName2" @click="handleClick">
+                <van-swipe-item class="slideimg" v-for="list in detail.buildingModelLst" :key="list.id" >
+                    <img class="typeimg" :src="list.modelurl" />
+                </van-swipe-item>
+            </van-swipe>
+            <div class="typeindex">
+                <span class="typename"></span>
+                <div class="imageindex">
+                    <span class="countimage countindex">2</span>
+                    <span class="countimage">/</span>
+                    <span class="countimage totalcount">4</span>
+                </div>
             </div>
-            <div class="headerbottom">
-                <span class="typefeature">挑高双层</span>
-                <span class="typearea">建筑面积:182.5㎡</span>
-            </div>
-            <div class="housefeature">
-                <span class="bigcharacters">三室两厅两卫</span>
-                <span class="smallcharacters">
-                    <span class="fixedsmallcharacters">户型描述：</span>
-                    <span class="trendssmallcharacters">客厅空间较大，有足够的活动空间，有私家花园，提高生活品质。主卧朝南，且与阳台相连。</span>
-                </span>
+        </div>
+        <div class="typecontent" >
+            <div class="househeader" v-for="list in detail.buildingModelLst" :key="list.id">
+                <div class="headertop">
+                    <span class="typetitle">{{ list.name }}</span>
+                    <span class="typeprice">{{ list.referenceprice }}<span class="fixedsize">起</span></span>
+                </div>
+                <div class="headerbottom">
+                    <div>
+                    <span class="typefeature" v-for="(item ,index) in list.childrenfeatures" :key="index">{{ list.childrenfeatures[index] }}</span>
+                    </div>
+                    <span class="typearea">建筑面积:{{ list.area }}㎡</span>
+                </div>
+                <div class="housefeature">
+                    <span class="bigcharacters">{{ list.situation }}</span>
+                    <span class="smallcharacters">
+                        <span class="fixedsmallcharacters">户型描述：</span>
+                        <span class="trendssmallcharacters">{{ list.modelParsingLst[0].detailparsing }}</span>
+                    </span>
+                </div>
             </div>
         </div>
     </div>
-    </div>
 </template>
 
 <script>  
@@ -43,6 +45,11 @@ import { mapState, mapActions } from "vuex";
 
 export default {
     name:'BuildingType',
+    data () {
+        return{
+            activeName2: 'id'
+        }
+    },
     components: {
         'vue-headful': () => import('vue-headful'),
     },
@@ -56,6 +63,9 @@ export default {
     },
     methods: {
         ...mapActions(["getBuildingtype"]),
+        handleClick(id){
+                window.console.log(id)
+        }
   }
 }
 </script>
@@ -127,7 +137,11 @@ export default {
 .typecontent{
     width: 100%;
     background-color: rgba(248,248,248,1);
-     margin-top: 10px;
+    margin-top: 10px;
+    /* display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    overflow: hidden; */
 
     .househeader{
         width:100%;
@@ -186,6 +200,7 @@ export default {
                 color:rgba(119,165,240,1);
                 line-height:17px;
                 padding-left:20px;
+                margin-right:10px;
             }
 
             .typearea{