beizhu

package.json

@@ -55,4 +55,5 @@
     "last 2 versions",
     "not ie <= 8"
   ]
+
 }

src/pages/building/buildingdetail.vue

@@ -60,26 +60,26 @@
         </div>
         <van-row class="user-links">
           <van-col span="6" >
-            <div class="modulearea school" @click="perimeterinformation(school)">
+            <div class="modulearea school" @click="perimeterinformation(detail,school)">
               <i class="iconfont  icon-icon-test2 icontype"></i>
               <span class="characters">学校</span>
             </div>
           </van-col> 
           <van-col span="6">
-            <div class="modulearea histoptal" @click="perimeterinformation(histoptal)">
+            <div class="modulearea histoptal" @click="perimeterinformation(detail,hospital)">
               <i class="iconfont icon-icon-test4 icontype"></i>
               <span class="characters">医院</span>
             </div>
           </van-col>
 
           <van-col span="6">
-            <div class="modulearea taxi" @click="perimeterinformation(taxi)">
+            <div class="modulearea taxi" @click="perimeterinformation(detail,traffic)">
               <i class="iconfont icon-icon-test1 icontype"></i>
               <span class="characters">交通</span>
             </div>
           </van-col>
           <van-col span="6">
-            <div class="modulearea sround" @click="perimeterinformation(sround)">
+            <div class="modulearea sround" @click="perimeterinformation(detail,business)">
               <i class="iconfont icon-icon-test3 icontype"></i>
               <span class="characters">商业</span>
             </div>
@@ -118,6 +118,7 @@ const {mapState: mapbuildState, mapActions:mapbuildActions} = createNamespacedHe
 const {mapState: mapcollectState, mapActions:mapcollectActions} = createNamespacedHelpers('collect')
 const {mapState: mapdelectState, mapActions:mapdelectActions} = createNamespacedHelpers('delete')
 const {mapState: mapvisitState, mapActions:mapvisitActions} = createNamespacedHelpers('visitors')
+const { mapState: mapareaState, mapActions: mapareaActions} = createNamespacedHelpers("map");
 
 export default {
   name: "BuildingDetail",
@@ -127,6 +128,10 @@ export default {
       activeName: "",
       collect:'',
       id:'',
+      school:"学校",
+      hospital:"医院",
+      traffic:"交通",
+      business:"商业",
       isopen:false,
       swiperOption: {
           pagination: {
@@ -155,6 +160,9 @@ export default {
     ...mapvisitState({
       browsingnum: s => s.browsingnum
     }),
+    ...mapareaState({
+      mapinfo: s => s.mapinfo
+    }),
 
     pages () {
       const pages = []
@@ -180,6 +188,7 @@ export default {
     ...mapvisitActions(['postVisitors']),
     ...mapdelectActions(['getDeleteCollect']),
     ...mapbuildActions(['numadd']),
+    ...mapareaActions(['getMap']),
     //跳转到预约看房页面
     gotoLookHouse () {
       this.$router.push({ 
@@ -218,30 +227,45 @@ export default {
         collect :this.$route.query.collect},
         this.$toast("取消收藏成功"))
       }
-      window.console.log(buildingid)
       },
       //浏览人数
       addvistornum(element){
-      window.console.log(333)
-      let self = this;
-      if(!this.isopen){
-        this.postVisitors({
-            id: element.id,
-            browsingnu:element.browsingnum+1,
-          }).then(()=>{
-            self.numadd({id:element.id});
-          });
-      }
-       this.isopen = !this.isopen; 
-      },
+        let self = this;
+        if(!this.isopen){
+          this.postVisitors({
+              id: element.id,
+              browsingnu:element.browsingnum+1,
+            }).then(()=>{
+              self.numadd({id:element.id});
+            });
+        }
+        this.isopen = !this.isopen; 
+        },
 
 //周边配套信息
-    perimeterinformation () {
-       this.$router.push({ 
+    perimeterinformation (element,tag) {
+      let self = this;
+      this.getMap({
+        id: element.buildingid,
+        buildingname:element.buildingname,
+        areaname:element.areaname,
+        tag:tag,
+      }).then( ()=>{
+      this.$router.push({ 
         name: "perimetertype",
-        query: { id: this.detail.buildingid }
+        query: {
+        id: element.buildingid ,
+        lat:this.mapinfo.latitude,
+        lng:this.mapinfo.longitude,
+        buildingname:element.buildingname,
+        areaname:element.areaname,
+        tag:tag,
+        // hospital:hospital,
+        // traffic:traffic,
+        // business:business
+        }
       });
-      window.console.log(111)
+      })
     }
   }
 };

src/pages/building/buildingimage.vue

@@ -3,7 +3,7 @@
     <vue-headful title="楼盘相册"  />
     <div class="houseimagecontent">
       <div class="houseimage">
-        <swiper ref='mySwiper' class="slidewrapper">
+        <swiper :options="swiperOption" ref="mySwiper" class="slidewrapper">
             <swiper-slide class="slideimg" v-for="(list1, index1) in detail.imageLst1" :key="index1">
                 <img class="lazyimage" :src="list1.fileurl" />
                 <div class="houseindex">
@@ -118,7 +118,7 @@
       </div>
     </div>
     <div class="imageboxtype" >
-      <div class="drawingimpress" v-for="(list, index) in lists" :key="index"  @click="toggle(index)" :class='{active:list.active}'>
+      <div class="drawingimpress" v-for="(list, index) in lists" :key="index"  @click="toggle(index,detail)" :class='{active:list.active}'>
         <span class="boxcharacters" :class='{active:list.active}'>{{list.imagetypename}}</span>
       </div>
     </div>
@@ -127,8 +127,8 @@
 
 <script>
 import { mapState, mapActions } from "vuex";
-import bottomDrawing from '../../img/bottomdrawing.png'
-import Swiper from 'swiper'; 
+import bottomDrawing from "../../img/bottomdrawing.jpg";
+import Swiper from "swiper";
 
 export default {
   name: "BuildingImage",
@@ -136,7 +136,8 @@ export default {
     return {
       lists: [],
       bottomDrawing,
-      showPage:false
+      showPage: false,
+      swiperOption: {}
     };
   },
   components: {
@@ -145,11 +146,14 @@ export default {
   computed: {
     ...mapState({
       detail: s => s.buildingimage.detail
-    }),
+    })
+    // swiper() {
+    //     return this.$refs.mySwiper.swiper;
+    //   }
   },
   created() {
     this.getBuildingimage({ buildingid: this.$route.query.id }).then(() => {
-      this.showPage = true
+      this.showPage = true;
       this.lists = this.detail.imageTypeLst;
       this.lists.forEach((curr, index) => {
         curr.active = false;
@@ -158,25 +162,78 @@ export default {
         }
       });
     });
+    let config = {
+      on: {
+        slideChangeTransitionEnd: () => {
+          console.log(this.detail);
+          let swiper = this.$refs.mySwiper.swiper;
+          console.log(swiper.activeIndex);
+          console.log(parseInt(this.detail.imageLstCount1));
+              // debugger;
+          if (swiper.activeIndex <parseInt(this.detail.imageLstCount1)) {
+            this.detail.imageTypeLst[0].active = true;
+            console.log( this.detail.imageTypeLst[0])
+          }else if(swiper.activeIndex <(parseInt(this.detail.imageLstCount1)+parseInt(this.detail.imageLstCount2))){
+            this.detail.imageTypeLst[1]
+          }else if(swiper.activeIndex <(parseInt(this.detail.imageLstCount1)+parseInt(this.detail.imageLstCount2)+parseInt(this.detail.imageLstCount3))){
+            this.detail.imageTypeLst[2]
+          }else if(swiper.activeIndex <(parseInt(this.detail.imageLstCount1)+parseInt(this.detail.imageLstCount2)+parseInt(this.detail.imageLstCount3)+parseInt(detail.imageLstCount4))){
+            this.detail.imageTypeLst[3]
+          }else if(swiper.activeIndex <(parseInt(detail.imageLstCount1)+parseInt(detail.imageLstCount2)+parseInt(detail.imageLstCount3)+parseInt(detail.imageLstCount4)+parseInt(detail.imageLstCount5))){
+            this.detail.imageTypeLst[4]
+          }
+        }
+      }
+    };
+    this.swiperOption = { ...config };
   },
   methods: {
     ...mapActions(["getBuildingimage"]),
-    toggle(ind) {
-      this.swiper().slideTo(ind, 1000, false)
-        let list = []
-        this.lists.forEach((curr, index) => {
+    toggle(ind, detail) {
+      // debugger
+      // this.swiper().slideTo(ind, 1000, false);
+      let list = [];
+      this.lists.forEach((curr, index) => {
         curr.active = false;
         if (index === ind) {
           curr.active = true;
         }
-        list.push(curr)
+        list.push(curr);
       });
-      this.lists = []
-      this.lists = list
+      this.lists = [];
+      this.lists = list;
+      if (ind == 0) {
+        this.swiper().slideTo(0, 1000, false);
+      } else if (ind == 1) {
+        this.swiper().slideTo(parseInt(detail.imageLstCount1), 1000, false);
+      } else if (ind == 2) {
+        this.swiper().slideTo(
+          parseInt(detail.imageLstCount1) + parseInt(detail.imageLstCount2),
+          1000,
+          false
+        );
+      } else if (ind == 3) {
+        this.swiper().slideTo(
+          parseInt(detail.imageLstCount1) +
+            parseInt(detail.imageLstCount2) +
+            parseInt(detail.imageLstCount3),
+          1000,
+          false
+        );
+      } else if (ind == 4) {
+        this.swiper().slideTo(
+          parseInt(detail.imageLstCount1) +
+            parseInt(detail.imageLstCount2) +
+            parseInt(detail.imageLstCount3) +
+            parseInt(detail.imageLstCount4),
+          1000,
+          false
+        );
+      }
     },
     swiper() {
-        return this.$refs.mySwiper.swiper
-      }
+      return this.$refs.mySwiper.swiper;
+    }
   }
 };
 </script>

src/pages/building/perimetertype.vue

@@ -1,97 +1,176 @@
 <template>
-    <div class=context>
+    <div class="context" >
             <vue-headful title="周边配套"  />
             <div class="mapId">
                 <div id='mapcointainer'></div>
             </div>
-            <van-row class="user-links">
-                <van-col span="6">
-                    <i class="iconfont  icon-icon-test2 icontype"></i>
-                    <span class="characters">学校</span>
-                </van-col>
-                <van-col span="6">
-                    <i class="iconfont icon-icon-test4 icontype"></i>
-                    <span class="characters">医院</span>
-                </van-col>
-                <van-col span="6">
-                    <i class="iconfont icon-icon-test1 icontype"></i>
-                    <span class="characters">交通</span>
-                </van-col>
-                <van-col span="6">
-                    <i class="iconfont icon-icon-test3 icontype"></i>
-                    <span class="characters">商业</span>
-                </van-col>
-            </van-row>
+             <van-row class="user-links">
+          <van-col span="6" >
+            <div class="modulearea school" @click="searchContent('学校')" >
+              <i class="iconfont  icon-icon-test2 icontype" :class='{active:active}'></i>
+              <span class="characters" :class='{active:active}'>学校</span>
+            </div>
+          </van-col> 
+          <van-col span="6">
+            <div class="modulearea histoptal" @click="searchContent('医院')" >
+              <i class="iconfont icon-icon-test4 icontype" :class='{active:active}'></i>
+              <span class="characters" :class='{active:active}'>医院</span>
+            </div>
+          </van-col>
+
+          <van-col span="6">
+            <div class="modulearea taxi" @click="searchContent('交通')" >
+              <i class="iconfont icon-icon-test1 icontype" :class='{active:active}'></i>
+              <span class="characters" :class='{active:active}'>交通</span>
+            </div>
+          </van-col>
+          <van-col span="6">
+            <div class="modulearea sround" @click="searchContent('商业')" >
+              <i class="iconfont icon-icon-test3 icontype" :class='{active:active}'></i>
+              <span class="characters" :class='{active:active}'>商业</span>
+            </div>
+          </van-col>
+        </van-row>
     </div>
 </template>
 
 <script>
-import {lazyAmapApiLoaderInstanse} from 'vue-amap';
+import { lazyAmapApiLoaderInstanse } from "vue-amap";
+import { createNamespacedHelpers } from "vuex";
+// const { mapState: mapareaState, mapActions: mapareaActions} = createNamespacedHelpers("map");
+
+let map;
+let routerParams;
+let marker;
 export default {
-  name:'perimetertype',
+  name: "perimetertype",
+  data(){
+      return{
+          keyword:String,
+        //   active:false
+      }
+  },
   components: {
-    'vue-headful': () => import('vue-headful'),
+    "vue-headful": () => import("vue-headful")
+  },
+  //    computed: {
+  //     ...mapareaState({
+  //       mapinfo: s => s.mapinfo
+  //     }),
+  //   },
+  created() {
+    // 取到路由带过来的参数 
+    routerParams = this.$route.query;
   },
-  data () {
-        return {
-    
-        }
-    },
   mounted() {
-    this.map = new AMap.Map('mapcointainer', {
-        resizeEnable:true,
-        zoom:11,
-        center:[118.915671,32.075366]
-    })
-   }
-}
+    this.init();
+  },
+  methods: {
+    //    ...mapareaActions(["getMap"]),
+    init() {
+      map = new AMap.Map("mapcointainer", {
+        resizeEnable: true,
+        zoom: 15,
+        center: [routerParams.lng, routerParams.lat],
+        scrollWheel: false
+      });
+       AMap.plugin(['AMap.ToolBar','AMap.Scale'],
+         ()=>{
+             map.addControl(new AMap.ToolBar());
+           map.addControl(new AMap.Scale());
+        });
+      marker = new AMap.Marker({
+        position: [routerParams.lng, routerParams.lat],
+        title: "routerParams.buildingname",
+        map: map
+      });
+      this.searchAround(routerParams.tag);
+    },
+
+    searchAround(keywords){
+        AMap.service(["AMap.PlaceSearch"], ()=> {
+        var placeSearch = new AMap.PlaceSearch({
+            pageSize: 200, // 单页显示结果条数
+            pageIndex: 1, // 页码
+            // city: "南京", // 兴趣点城市\
+            type:keywords,
+            // citylimit: true,  //是否强制限制在设置的城市内搜索
+            map: map, // 展现结果的地图实例
+            // autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
+        });
+        //关键字查询
+        var cpoint = [routerParams.lng, routerParams.lat]; //中心点坐标
+        placeSearch.searchNearBy(keywords, cpoint, 5000, (status, result)=> {
+
+        });
+    });
+    },
+    searchContent (val) {
+        this.searchAround(val);
+        this.active = val;
+    },
+  }
+};
 </script>
 
 <style lang="postcss" scoped>
-.context{
+.active{
+    color:rgba(59,153,252,1)!important;
+}
+.context {
+  width: 100%;
+  height: 100%;
+
+  .mapId {
+    width: 100%;
+    height: 587px;
+
+    #mapcointainer {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  .user-links {
     width: 100%;
-    height: 100%;
+    height: 80px;
+    display: flex;
 
-    .mapId{
-        width: 100%;
-        height: 587px;
+    /* .icontype {
+      font-size: 16px !important;
+      color: #babdc0;
+    } */
 
-        #mapcointainer{
-            width: 100%;
-            height: 100%;
-        }
+    .linevertical {
+      border: 1px solid #ededed;
     }
-    .user-links{
-        width: 100%;
-        height: 80px;
-        display: flex;
 
-        .icontype{
-            font-size: 16px!important;
-            color:#BABDC0!important;
-        }
-        
-        .linevertical{
-        border:1px solid #EDEDED;
-        }
+    .van-col--6 {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
 
-        .van-col--6{
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          justify-content: center;
-        }
+      .modulearea {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
 
-        .characters{
-            font-size:16px;
-            font-family:PingFangSC-Regular;
-            font-weight:400;
-            color:rgba(102,102,102,1);
-            line-height:22px;
+        .icontype {
+          font-size: 16px !important;
+          color: #babdc0 ;
         }
+      }
     }
-}
 
+    .characters {
+      font-size: 16px;
+      font-family: PingFangSC-Regular;
+      font-weight: 400;
+      color: rgba(102, 102, 102, 1);
+      line-height: 22px;
+    }
+  }
+}
 </style>
 
 

src/pages/reservation/lookhouse.vue

@@ -6,11 +6,12 @@
           <van-cell class="field_name" is-link arrow-direction="down" @click="showName(detail.buildingList)">楼盘名称：<span class="buildingnamelist">{{detail.buildingName}}</span>
               <van-popup v-model="inside" position="bottom" :overlay="false">
                 <ul class="housenamelist">
-                  <li @click.stop class="namelist" 
+                  <li @click.stop class="namelists" 
                     v-for="list in namelist.buildingList"
                     :key="list.buildingid"   
                     @click="clicknamelist(list.buildingid)">
                     <span class="namelist">{{list.buildingname}}</span>
+                    <i class="iconfont icon-gou select_icon"></i>
                   </li>
                 </ul>
               </van-popup>
@@ -82,25 +83,6 @@ export default {
       }
     };
   },
-
-  filters: {
-    formatDate(value) {
-      let date = new Date(value);
-      let y = date.getFullYear();
-      let MM = date.getMonth() + 1;
-      MM = MM < 10 ? "0" + MM : MM;
-      let d = date.getDate();
-      d = d < 10 ? "0" + d : d;
-      let h = date.getHours();
-      h = h < 10 ? "0" + h : h;
-      let m = date.getMinutes();
-      m = m < 10 ? "0" + m : m;
-      let s = date.getSeconds();
-      s = s < 10 ? "0" + s : s;
-      return y + "-" + MM + "-" + d + " " + h + ":" + m + ":" + s;
-    }
-  },
-
   computed: {
     desc() {
       return this.desc.length;
@@ -155,10 +137,26 @@ export default {
     },
     //点击确定按钮选中时间并收起日历
     confirm(val) {
-      this.formdata.booktime = val;
+      this.formdata.booktime = this.formatDate(val);
       window.console.log(val);
       this.show = false; //点击确认后，show=false，组件隐藏掉，值已经传过去了
     },
+    formatDate(value) {
+      let date = new Date(value);
+      console.log(date)
+      let y = date.getFullYear();
+      let MM = date.getMonth() + 1;
+      MM = MM < 10 ? "0" + MM : MM;
+      let d = date.getDate();
+      d = d < 10 ? "0" + d : d;
+      let h = date.getHours();
+      h = h < 10 ? "0" + h : h;
+      let m = date.getMinutes();
+      m = m < 10 ? "0" + m : m;
+      let s = date.getSeconds();
+      s = s < 10 ? "0" + s : s;
+      return y + "-" + MM + "-" + d + " " + h + ":" + m + ":" + s;
+    },
     //点击楼盘名称栏获取楼盘名称列表
     showName(buildingid) {
       this.inside = true;
@@ -297,17 +295,32 @@ export default {
       height: 224px;
       overflow: scroll;
 
-      .namelist {
+      .namelists {
         width: 90%;
         border-bottom: 1px solid #ebebeb;
         text-align: center;
         padding: 10px 0;
-        font-size: 18px;
+        /* font-size: 18px;
         font-family: PingFangSC-Regular;
         font-weight: 400;
         color: rgba(51, 51, 51, 1);
-        line-height: 25px;
+        line-height: 25px; */
         margin-left: 20px;
+
+        .namelist{
+          font-size:18px;
+          font-family:PingFangSC-Regular;
+          font-weight:400;
+          color:rgba(51,51,51,1);
+          line-height:25px;
+        }
+
+        .select_icon{
+              position: absolute;
+              top: 12px;
+              right: 15px;
+              font-size: 20px !important;
+        }
       }
     }
   }

src/store/building.js

@@ -22,7 +22,6 @@ export default {
     },
     actions: {
       getBuilding({ commit }, params) {
-        window.console.log(888)
         return new Promise((resolve, reject) => {
           request({ ...getAPI('building.getbuilding', { project_id: params.project_id }) }).then((data) => {
             commit('updateBuilding', data)

src/store/map.js

@@ -2,18 +2,19 @@ import request from '../utils/request'
 import getAPI from '../config/apis'
 
 export default {
+    namespaced: true,
     state: {
-      detail: {},
+      mapinfo: {},
     },
     mutations: {
-      updateMap(state, detail) {
-        state.detail = detail
+      updateMap(state, mapinfo) {
+        state.mapinfo = mapinfo
       }
     },
     actions: {
       getMap({ commit }, params) {
         return new Promise((resolve, reject) => {
-          request({ ...getAPI('map.getmapinformation', { buildingid: params.buildingid }) }).then((data) => {
+          request({ ...getAPI('map.getmapinformation', { buildingid: params.id }) }).then((data) => {
             commit('updateMap', data)
             resolve()            
           }).catch(reject)