beizhu

package-lock.json

@@ -1880,6 +1880,7 @@
       "version": "0.18.0",
       "resolved": "http://registry.npmjs.org/axios/-/axios-0.18.0.tgz",
       "integrity": "sha1-MtU+SFHv3AoRmTts0AB4nXDAUQI=",
+      "dev": true,
       "requires": {
         "follow-redirects": "^1.3.0",
         "is-buffer": "^1.1.5"
@@ -5200,6 +5201,7 @@
       "version": "1.5.9",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.9.tgz",
       "integrity": "sha512-Bh65EZI/RU8nx0wbYF9shkFZlqLP+6WT/5FnA3cE/djNSuKNHJEinGGZgu/cQEkeeb2GdFOgenAmn8qaqYke2w==",
+      "dev": true,
       "requires": {
         "debug": "=3.1.0"
       },
@@ -5208,6 +5210,7 @@
           "version": "3.1.0",
           "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
           "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
+          "dev": true,
           "requires": {
             "ms": "2.0.0"
           }
@@ -5215,7 +5218,8 @@
         "ms": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
+          "dev": true
         }
       }
     },
@@ -6997,7 +7001,8 @@
     "is-buffer": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
-      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w=="
+      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
+      "dev": true
     },
     "is-builtin-module": {
       "version": "1.0.0",

package.json

@@ -9,7 +9,6 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "axios": "^0.18.0",
     "lodash.get": "^4.4.2",
     "vant": "^1.3.10",
     "vue": "^2.5.17",
@@ -22,6 +21,7 @@
     "@vue/cli-plugin-babel": "^3.0.5",
     "@vue/cli-plugin-eslint": "^3.0.5",
     "@vue/cli-service": "^3.0.5",
+    "axios": "^0.18.0",
     "postcss-import": "^12.0.1",
     "postcss-theme-variables": "^1.0.0",
     "precss": "^3.1.2",

src/config/apis.js

@@ -7,7 +7,7 @@ const apiList = {
   },
   building:{
     get:{
-      url: 'lp/buildingBaseInfo/',
+      url: '/api/lp/buildingBaseInfo',
       method: 'get',
     },
   },

src/pages/building/buildingdetail.vue

@@ -25,67 +25,80 @@
 </template>
 
 <script>
-import BuildingHeader from './components/buildingdetailheader.vue'
-import HouseName from './components/housename.vue'
-import BuildingData from './components/buildingdata.vue'
-import BuildingConduction from './components/buildingconduction.vue'
-import BuildingPerimeter from './components/buildingperimeter.vue'
-import CorrelationDynamics from './components/correlationdynamics.vue'
-import CityArea from './components/cityarea.vue'
-// import ToaseBox from './components/toasebox.vue'
+import { mapState, mapActions } from "vuex";
+import BuildingHeader from "./components/buildingdetailheader.vue";
+import HouseName from "./components/housename.vue";
+import BuildingData from "./components/buildingdata.vue";
+import BuildingConduction from "./components/buildingconduction.vue";
+import BuildingPerimeter from "./components/buildingperimeter.vue";
+import CorrelationDynamics from "./components/correlationdynamics.vue";
+import CityArea from "./components/cityarea.vue";
 
 export default {
-    name:'BuildingDetail',
-    components: {
-    'vue-headful': () => import('vue-headful'),
-    'BuildingHeader':BuildingHeader,
-    'HouseName':HouseName,
-    'BuildingData':BuildingData,
-    'BuildingConduction':BuildingConduction,
-    'BuildingPerimeter':BuildingPerimeter,
-    'CorrelationDynamics':CorrelationDynamics,
-    'CityArea':CityArea,
-    // 'ToaseBox':ToaseBox,
+  name: "BuildingDetail",
+  components: {
+    "vue-headful": () => import("vue-headful"),
+    BuildingHeader: BuildingHeader,
+    HouseName: HouseName,
+    BuildingData: BuildingData,
+    BuildingConduction: BuildingConduction,
+    BuildingPerimeter: BuildingPerimeter,
+    CorrelationDynamics: CorrelationDynamics,
+    CityArea: CityArea
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    // building() {
+    //   return this.$store.state.building;
+    // },
+    ...mapState({
+      name: item => item.name
+    })
+  },
+  created() {
+    // this.$store.dispatch('getBuilding')
+    this.getBuilding({ id: "123" });
   },
-  //  mounted() {
-  //   this.$dialog.alert({
-  //     message: '弹窗内容'
-  //   });
-  // },
   methods: {
+    ...mapActions(["getBuilding"]),
     gotoLookHouse() {
-      this.$router.push({ name: 'lookhouse' })
+      this.$router.push({ name: "lookhouse" });
     },
-    gotopageimg () {
-      this.$router.push({ name: 'buildingimage' })
+    gotopageimg() {
+      this.$router.push({ name: "buildingimage" });
     },
-    gotopagetype () {
-      this.$router.push({ name: 'buildingtype' })
+    gotopagetype() {
+      this.$router.push({ name: "buildingtype" });
     }
+    // getBuildingInfo(){
+    //   axios.get(./)
+    // }
   }
-}
+};
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style lang="postcss" scoped>
-.context{
+.context {
   width: 100%;
   height: 610px;
   overflow-y: auto;
 
-  .clickbutton{
+  .clickbutton {
     width: 100%;
     height: 52px;
     display: flex;
     align-items: center;
     justify-content: space-between;
 
-    .iconline{
-      height:16px;
-      border:1px solid #EAEAEA;
+    .iconline {
+      height: 16px;
+      border: 1px solid #eaeaea;
     }
 
-    .gotopageimg{
+    .gotopageimg {
       height: 100%;
       display: flex;
       flex-direction: row;
@@ -93,68 +106,65 @@ export default {
       margin-left: 20px;
     }
 
-    .gotopagetype{
-          height: 100%;
-          display: flex;
-          flex-direction: row;
-          align-items: center;
-        }
-
-    .gotopagecollect{
-          height: 100%;
-          display: flex;
-          flex-direction: row;
-          align-items: center;
-          margin-right: 30px;
-        }
+    .gotopagetype {
+      height: 100%;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+    }
 
+    .gotopagecollect {
+      height: 100%;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      margin-right: 30px;
+    }
 
-    .right{
-      color: #A1A1A1!important;
+    .right {
+      color: #a1a1a1 !important;
       font-size: 10px !important;
       padding-left: 5px;
     }
 
-    .collect{
+    .collect {
       font-size: 20px !important;
-      color:rgba(252,198,74,1) !important;
+      color: rgba(252, 198, 74, 1) !important;
       padding-right: 5px;
     }
 
-    .clickcharacters{
-    padding: 0 !important;
-    font-size:14px;
-    font-family:PingFangSC-Regular;
-    font-weight:400;
-    color:rgba(102,102,102,1);
-    line-height:20px;
-    text-align: center;
-    }
-
+    .clickcharacters {
+      padding: 0 !important;
+      font-size: 14px;
+      font-family: PingFangSC-Regular;
+      font-weight: 400;
+      color: rgba(102, 102, 102, 1);
+      line-height: 20px;
+      text-align: center;
     }
+  }
 
-  .housecenter{
+  .housecenter {
     width: 100%;
     height: 353px;
-    background-color:rgba(255,255,255,1);
+    background-color: rgba(255, 255, 255, 1);
     margin-bottom: 10px;
 
-    .line{
-      width:90%;
-      border: 0.5px solid #EFEFEF;
+    .line {
+      width: 90%;
+      border: 0.5px solid #efefef;
     }
   }
 
-  .van-button{
+  .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);
+    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);
   }
 }
-
 </style>

src/pages/building/components/housename.vue

@@ -34,7 +34,7 @@ export default {
 .housename{
     margin-top: 10px;
     width: 100%;
-    height: 95px;
+    height: 60px;
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -46,6 +46,7 @@ export default {
       justify-content: space-between;
       width: 90%;
       margin-bottom:5px;
+      padding-top:10px;
     }
 
     .price{

src/pages/building/components/typecontent.vue

@@ -1,144 +1,149 @@
-<template>
-    <div class="typecontent">
-        <div class="househeader">
-            <div class="headertop">
-                <span class="typetitle">B户型</span>
-                <span class="typeprice">24000元/㎡<span class="fixedsize">起</span></span>
-            </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>
-    </div>
-</template>
-
-<script>
-export default {
-    name:'TypeContent'
-}
-</script>
-
-<style lang="postcss" scoped>
-.typecontent{
-    width: 100%;
-    background-color: rgba(248,248,248,1);
-     margin-top: 10px;
-
-    .househeader{
-        width:100%;
-
-        .headertop{
-            width: 100%;
-            display: flex;
-            flex-direction: row;
-            justify-content: space-between;
-            margin-bottom: 10px;
-
-            .typetitle{
-                font-size:18px;
-                font-family:PingFangSC-Regular;
-                font-weight:400;
-                color:rgba(61,61,61,1);
-                line-height:25px;
-                padding-left:20px;
-            }
-            
-            .typeprice{
-                display: flex;
-                flex-direction: row;
-                font-size:16px;
-                font-family:PingFangSC-Medium;
-                font-weight:500;
-                color:rgba(255,84,84,1);
-                line-height:22px;
-                padding-right: 20px;
-
-                .fixedsize{
-                    font-size:12px;
-                    font-family:PingFangSC-Medium;
-                    font-weight:500;
-                    color:#999999;
-                    line-height:22px;
-                }
-            }
-
-        }
-
-        .headerbottom{
-            width: 100%;
-            display: flex;
-            flex-direction: row;
-            justify-content: space-between;
-
-            .typefeature{
-                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;
-                padding-left:20px;
-            }
-
-            .typearea{
-                font-size:12px;
-                font-family:PingFangSC-Regular;
-                font-weight:400;
-                color:rgba(97,97,97,1);
-                line-height:17px;
-                padding-right: 20px;
-            }
-            
-        }
-
-        .housefeature{
-            display: flex;
-            flex-direction: column;
-        
-            .bigcharacters{
-                font-size:18px;
-                font-family:PingFangSC-Regular;
-                font-weight:400;
-                color:rgba(61,61,61,1);
-                line-height:25px;
-                padding:20px 0 0 20px;
-            }
-
-            .smallcharacters{
-                padding: 10px  20px  10px 20px;
-                display: flex;
-                flex-direction: row;
-                justify-content: space-between;
-
-                .fixedsmallcharacters{
-                    font-size:14px;
-                    font-family:PingFangSC-Regular;
-                    font-weight:400;
-                    color:rgba(97,97,97,1);
-                    line-height:20px;
-                    width:46%;
-                }
-                .trendssmallcharacters{
-                    font-size:14px;
-                    font-family:PingFangSC-Regular;
-                    font-weight:400;
-                    color:rgba(97,97,97,1);
-                    line-height:20px;
-                }
-            }
-        }
-    }
-}
-</style>
-
-
+<template>
+    <div class="typecontent">
+        <div class="househeader">
+            <house-name></house-name>
+            <!-- <div class="headertop">
+                <span class="typetitle">B户型</span>
+                <span class="typeprice">24000元/㎡<span class="fixedsize">起</span></span>
+            </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>
+    </div>
+</template>
+
+<script>
+import HouseName from './housename.vue'
+export default {
+    name:'TypeContent',
+    components:{
+        'HouseName':HouseName
+    }
+}
+</script>
+
+<style lang="postcss" scoped>
+.typecontent{
+    width: 100%;
+    background-color: rgba(248,248,248,1);
+     margin-top: 10px;
+
+    .househeader{
+        width:100%;
+
+        .headertop{
+            width: 100%;
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            margin-bottom: 10px;
+
+            .typetitle{
+                font-size:18px;
+                font-family:PingFangSC-Regular;
+                font-weight:400;
+                color:rgba(61,61,61,1);
+                line-height:25px;
+                padding-left:20px;
+            }
+            
+            .typeprice{
+                display: flex;
+                flex-direction: row;
+                font-size:16px;
+                font-family:PingFangSC-Medium;
+                font-weight:500;
+                color:rgba(255,84,84,1);
+                line-height:22px;
+                padding-right: 20px;
+
+                .fixedsize{
+                    font-size:12px;
+                    font-family:PingFangSC-Medium;
+                    font-weight:500;
+                    color:#999999;
+                    line-height:22px;
+                }
+            }
+
+        }
+
+        .headerbottom{
+            width: 100%;
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+
+            .typefeature{
+                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;
+                padding-left:20px;
+            }
+
+            .typearea{
+                font-size:12px;
+                font-family:PingFangSC-Regular;
+                font-weight:400;
+                color:rgba(97,97,97,1);
+                line-height:17px;
+                padding-right: 20px;
+            }
+            
+        }
+
+        .housefeature{
+            display: flex;
+            flex-direction: column;
+        
+            .bigcharacters{
+                font-size:18px;
+                font-family:PingFangSC-Regular;
+                font-weight:400;
+                color:rgba(61,61,61,1);
+                line-height:25px;
+                padding:20px 0 0 20px;
+            }
+
+            .smallcharacters{
+                padding: 10px  20px  10px 20px;
+                display: flex;
+                flex-direction: row;
+                justify-content: space-between;
+
+                .fixedsmallcharacters{
+                    font-size:14px;
+                    font-family:PingFangSC-Regular;
+                    font-weight:400;
+                    color:rgba(97,97,97,1);
+                    line-height:20px;
+                    width:46%;
+                }
+                .trendssmallcharacters{
+                    font-size:14px;
+                    font-family:PingFangSC-Regular;
+                    font-weight:400;
+                    color:rgba(97,97,97,1);
+                    line-height:20px;
+                }
+            }
+        }
+    }
+}
+</style>
+
+

src/pages/building/components/typeheader.vue

@@ -1,82 +1,87 @@
-<template>
-    <div class="typeheader">
-        <van-swipe class="slidewrapper" :autoplay="3000">
-            <van-swipe-item class="slideimg" v-for="(image, index) in images" :key="index">
-                <img v-lazy="image" />
-            </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>
-</template>
-
-<script>
-export default {
-    name:'TypeHeader'
-}
-</script>
-
-<style lang="postcss" scoped>
-.typeheader{
- width:100%;
- height: 262px;
-
-    .slidewrapper{
-        width: 100%;
-        height: 225px;
-
-        .slideimg{
-            width: 100%;
-            height: 100%;
-        }
-    }
-
-    .typeindex{
-        width: 100%;
-        height: 37px;
-        background-color: rgba(248,248,248,1);
-        border-top:0.5px solid #EAEAEA;
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: space-between;
-
-        .typename{
-            font-size:12px;
-            font-family:PingFangSC-Regular;
-            font-weight:400;
-            color:rgba(127,127,127,1);
-            line-height:17px;
-            padding-left:15px;
-        }
-
-        .imageindex{
-                padding-right: 15px;
-
-                .countimage{
-                    font-size:12px;
-                    font-family:PingFangSC-Regular;
-                    font-weight:400;
-                    color:rgba(127,127,127,1);
-                    line-height:17px;
-
-                    .boxcharacters{
-                        font-size:12px;
-                        font-family:PingFangSC-Regular;
-                        font-weight:400;
-                        color:rgba(255,255,255,1);
-                        line-height:17px;
-                    }
-                }
-            }
-    }
-}
-</style>
-
-
+<template>
+    <div class="typeheader">
+        <van-swipe class="slidewrapper" :autoplay="3000">
+            <van-swipe-item class="slideimg" v-for="(image, index) in images" :key="index">
+                <img v-lazy="image" />
+            </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>
+</template>
+
+<script>
+export default {
+    name:'TypeHeader',
+    data (){
+        return{
+            images:''
+        } 
+    }
+}
+</script>
+
+<style lang="postcss" scoped>
+.typeheader{
+ width:100%;
+ height: 262px;
+
+    .slidewrapper{
+        width: 100%;
+        height: 225px;
+
+        .slideimg{
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    .typeindex{
+        width: 100%;
+        height: 37px;
+        background-color: rgba(248,248,248,1);
+        border-top:0.5px solid #EAEAEA;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+
+        .typename{
+            font-size:12px;
+            font-family:PingFangSC-Regular;
+            font-weight:400;
+            color:rgba(127,127,127,1);
+            line-height:17px;
+            padding-left:15px;
+        }
+
+        .imageindex{
+                padding-right: 15px;
+
+                .countimage{
+                    font-size:12px;
+                    font-family:PingFangSC-Regular;
+                    font-weight:400;
+                    color:rgba(127,127,127,1);
+                    line-height:17px;
+
+                    .boxcharacters{
+                        font-size:12px;
+                        font-family:PingFangSC-Regular;
+                        font-weight:400;
+                        color:rgba(255,255,255,1);
+                        line-height:17px;
+                    }
+                }
+            }
+    }
+}
+</style>
+
+

src/pages/reservation/lookhouse.vue

@@ -50,7 +50,8 @@ export default {
       minDate: new Date(),
       maxDate: new Date(2080, 10, 1),
       currentDate: new Date(),
-      remnant:0 //输入数
+      remnant:0 ,//输入数
+      desc:''
 
     };
   },

src/store/building.js

@@ -0,0 +1,25 @@
+import request from '../utils/request'
+import getAPI from '../config/apis'
+
+export default {
+    state: {
+      name: '',
+      id: '',
+      avator: '',
+    },
+    mutations: {
+      updateBuilding(state, newBuilding) {
+        const { name, id, avator } = newBuilding;
+        state.name = name;
+        state.id = id;
+        state.avator = avator;
+      }
+    },
+    actions: {
+      getBuilding({ commit }, params) {
+        request({ ...getAPI('building.get'), query: params }).then((data) => {
+          commit('updateBuilding', data)
+        })
+      },
+    }
+  }

src/store/index.js

@@ -7,6 +7,7 @@ const store = new Vuex.Store({
   modules: {
     app: require('./app.js').default,
     user: require('./user.js').default,
+    building: require('./building.js').default,
   }
 });
 

src/utils/request.js

@@ -1,5 +1,5 @@
 import axios from 'axios'
-import loadding from './loadding'
+// import loadding from './loadding'
 
 export default function request(config) {
   return new Promise((resolve, reject) => {
@@ -22,8 +22,7 @@ export default function request(config) {
       })
     }
 
-    const id = loadding.start()
-
+    // const id = loadding.start()
     axios({
       params,
       data: !data ? undefined : fmtData,
@@ -33,12 +32,12 @@ export default function request(config) {
       ...conf,
     }).then((response) => {
       const data = response.data;
-      loadding.stop(id);
+      // loadding.stop(id);
 
       resolve(data);
     }).catch((error) => {
       // console.error(error);
-      loadding.stop(id);
+      // loadding.stop(id);
 
       reject(error.message);
     });

vue.config.js

@@ -19,5 +19,18 @@ module.exports = {
         ]
       }
     }
+  },
+  devServer: {
+    proxy: {
+      '/api': {
+        target: 'http://192.168.0.166:8087', // wf
+        changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
+        // pathRewrite: {
+        //   '^/api': '/api-v2/api'
+        // },
+      },
+    },
+    // compress: true,
+    disableHostCheck: true,   // That solved it
   }
 }