111

src/App.vue

@@ -1,32 +1,9 @@
 <template>
   <div id="app">
-    <nav>
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
-    </nav>
-    <router-view/>
+    <!-- 路由占位符 -->
+    <router-view></router-view>
   </div>
 </template>
 
-<style lang="scss">
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-}
-
-nav {
-  padding: 30px;
-
-  a {
-    font-weight: bold;
-    color: #2c3e50;
-
-    &.router-link-exact-active {
-      color: #42b983;
-    }
-  }
-}
-</style>
+<style>
+</style>

src/main.js

@@ -2,9 +2,33 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
+import axios from 'axios'
+
+// 引入elementUi组件
+import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
+Vue.use(ElementUI);
 
 Vue.config.productionTip = false
 
+
+Vue.prototype.$axios = axios       
+// axios.defaults.baseURL = '/appointment'
+
+// 挂载axios 
+// axios.defaults.baseURL = 'http://114.135.61.186:8339'
+// 拦截器
+// axios.interceptors.request.use(config=>{
+//   console.log(config);
+//   config.headers.Authorization = window.sessionStorage.getItem('token');
+//   // 在最后必须return config
+//   return config
+// })
+Vue.prototype.$http = axios
+
+
+
+
 new Vue({
   router,
   store,

src/router/index.js

@@ -1,22 +1,19 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 import HomeView from '../views/HomeView.vue'
+import AboutView from '../views/AboutView.vue'
 
 Vue.use(VueRouter)
 
 const routes = [
   {
-    path: '/',
-    name: 'home',
+    path: '/home',
+    name: 'homeview',
     component: HomeView
-  },
-  {
-    path: '/about',
-    name: 'about',
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
+  },{
+    path:'/about',
+    name:'aboutview',
+    component:AboutView
   }
 ]
 

src/views/AboutView.vue

@@ -1,5 +1,311 @@
 <template>
-  <div class="about">
-    <h1>This is an about page</h1>
+  <div>
+    <div class="nav">
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <div class="grid-content bg-purple">
+            <el-button @click="replacePage">我要租</el-button>
+          </div>
+        </el-col>
+        <el-col :span="12">
+          <div class="grid-content bg-purple">
+            <el-button type="primary">我要买</el-button>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+    <!-- 下拉框 -->
+    <div class="screen">
+      <el-row :gutter="25">
+        <el-col :span="8">
+          <el-dropdown trigger="click">
+            <span class="el-dropdown-link">
+              社区项目<i class="el-icon-arrow-down el-icon--right"></i>
+            </span>
+            <el-dropdown-menu slot="dropdown">
+              <!-- <el-dropdown-item> -->
+              <div
+                class="option"
+                v-for="(item,index) in UserList"
+                :key="index"
+              >
+                <span>{{item.cityName}}</span>
+                <el-row>
+                  <el-checkbox-group v-model="checkList"></el-checkbox-group>
+                  <el-col
+                    :span="8"
+                    v-for="(items,indexs) in item.communityList"
+                    :key="indexs"
+                  >
+                    <el-checkbox>{{items.communityName}}</el-checkbox>
+                  </el-col>
+                </el-row>
+
+              </div>
+              <div class="option-button">
+                <el-row :gutter="20">
+                  <el-col :span="12"><span>
+                      <el-button type="info">重置</el-button>
+                    </span></el-col>
+                  <el-col :span="12"><span>
+                      <el-button type="primary">确认</el-button>
+                    </span></el-col>
+                </el-row>
+              </div>
+              <!-- </el-dropdown-item> -->
+            </el-dropdown-menu>
+          </el-dropdown>
+        </el-col>
+        <el-col :span="8">
+          <el-dropdown trigger="click">
+            <span class="el-dropdown-link">
+              房屋类型<i class="el-icon-arrow-down el-icon--right"></i>
+            </span>
+            <el-dropdown-menu slot="dropdown">
+              <!-- <el-dropdown-item> -->
+              <div class="option">
+                <span>住宅</span>
+                <el-row>
+                  <el-checkbox-group v-model="checkList">
+                    <el-col :span="8">
+                      <el-checkbox label="高档住宅"></el-checkbox>
+                    </el-col>
+                    <el-col :span="8">
+                      <el-checkbox label="普通住宅"></el-checkbox>
+                    </el-col>
+                    <el-col :span="8">
+                      <el-checkbox label="公寓"></el-checkbox>
+                    </el-col>
+                    <el-col :span="8">
+                      <el-checkbox label="别墅"></el-checkbox>
+                    </el-col>
+                    <el-col :span="8">
+                      <el-checkbox label="复式"></el-checkbox>
+                    </el-col>
+                  </el-checkbox-group>
+                </el-row>
+
+              </div>
+              <div class="option">
+                <span>商业</span>
+                <el-row>
+                  <el-checkbox-group v-model="checkList">
+                    <el-col :span="8">
+                      <el-checkbox label="办公"></el-checkbox>
+                    </el-col>
+                    <el-col :span="8">
+                      <el-checkbox label="酒店"></el-checkbox>
+                    </el-col>
+                    <el-col :span="8">
+                      <el-checkbox label="厂房"></el-checkbox>
+                    </el-col>
+                    <el-col :span="8">
+                      <el-checkbox label="商城"></el-checkbox>
+                    </el-col>
+                    <el-col :span="8">
+                      <el-checkbox label="综合体"></el-checkbox>
+                    </el-col>
+                    <el-col :span="8">
+                      <el-checkbox label="仓库"></el-checkbox>
+                    </el-col>
+                  </el-checkbox-group>
+                </el-row>
+              </div>
+              <div class="option-button">
+                <el-row :gutter="20">
+                  <el-col :span="12"><span>
+                      <el-button type="info">重置</el-button>
+                    </span></el-col>
+                  <el-col :span="12"><span>
+                      <el-button type="primary">确认</el-button>
+                    </span></el-col>
+                </el-row>
+              </div>
+              <!-- </el-dropdown-item> -->
+            </el-dropdown-menu>
+          </el-dropdown>
+        </el-col>
+        <el-col :span="8">
+          <el-dropdown
+            trigger="click"
+            @click.native="dropdown"
+          >
+            <span class="el-dropdown-link">
+              房屋面积<i class="el-icon-arrow-down el-icon--right"></i>
+            </span>
+            <el-dropdown-menu v-show="hideClick">
+              <!-- <el-dropdown-item> -->
+              <div class="option">
+                <el-row>
+                  <el-checkbox-group v-model="checkList">
+                    <el-col :span="8">
+                      <el-checkbox label="50平米以下"></el-checkbox>
+                    </el-col>
+                    <el-col :span="8">
+                      <el-checkbox label="50-70平米"></el-checkbox>
+                    </el-col>
+                    <el-col :span="8">
+                      <el-checkbox label="70-90平米"></el-checkbox>
+                    </el-col>
+                    <el-col :span="8">
+                      <el-checkbox label="90-120平米"></el-checkbox>
+                    </el-col>
+                    <el-col :span="8">
+                      <el-checkbox label="120-150平米"></el-checkbox>
+                    </el-col>
+                    <el-col :span="8">
+                      <el-checkbox label="150-200平米"></el-checkbox>
+                    </el-col>
+                    <el-col :span="8">
+                      <el-checkbox label="200-300平米"></el-checkbox>
+                    </el-col>
+                    <el-col :span="8">
+                      <el-checkbox label="300平米以上"></el-checkbox>
+                    </el-col>
+                  </el-checkbox-group>
+                </el-row>
+
+              </div>
+              <div class="option-button">
+                <el-row :gutter="20">
+                  <el-col :span="12"><span>
+                      <el-button type="info">重置</el-button>
+                    </span></el-col>
+                  <el-col :span="12"><span>
+                      <el-button
+                        type="primary"
+                        @click="query"
+                      >确认</el-button>
+                    </span></el-col>
+                </el-row>
+              </div>
+              <!-- </el-dropdown-item> -->
+            </el-dropdown-menu>
+          </el-dropdown>
+        </el-col>
+      </el-row>
+    </div>
+    <!-- 内容 -->
+    <div>
+      <el-row
+        v-for="(item,index) in mentList"
+        :key="index"
+      >
+        <el-col
+          :span="24"
+          style="height: 124px;"
+        >
+          <el-row>
+            <el-col :span="11">
+              <el-image
+                style="width: 160px; height: 105px"
+                src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
+                fit="contain"
+              ></el-image>
+            </el-col>
+            <el-col :span="13">
+              <h5>{{item.title}}</h5>
+              <p><span>{{item.buildingType == 1 ? '住宅' : '商用'}}-{{item.residenceType == 1 ? '高档住宅' : item.residenceType == 2 ?  '普通住宅' : item.residenceType == 3 ? '公寓' : item.residenceType == 4 ? '别墅' : item.residenceType == 5 ? '复式' :item.residenceType == 6 ?'办公' : item.residenceType == 7 ? '酒店' : item.residenceType == 8 ? '厂房' : item.residenceType == 9 ? '商城' :item.residenceType == 10 ? '综合体' : item.residenceType == 11 ?'仓库' :'广告位'}}</span> <span>{{item.buildingArea || 0}}㎡</span></p>
+              <p>{{item.monthlyRent || 0}}元/月</p>
+            </el-col>
+          </el-row>
+        </el-col>
+      </el-row>
+
+    </div>
   </div>
+
 </template>
+
+
+<script>
+export default {
+  data () {
+    return {
+      checkList: [],
+      hideClick: false,
+      mentList: [],
+      queryInfo: {
+        appId: 'wx3dafa2cbe0fd954a'
+      },
+      queryInfo2: {
+        type: 2
+      },
+      UserList: [],
+    }
+  },
+
+
+
+  methods: {
+    replacePage () {
+      this.$router.push('/home')
+    },
+    dropdown () {
+      this.hideClick = !this.hideClick;
+    },
+    query () {
+      this.hideClick = !this.hideClick;
+
+    },
+    // 社区名称
+    async getUserList () {
+      const { data: res } = await this.$axios.get('/appointment/getPublicCommunity', { params: this.queryInfo });
+      if (res.status == 0) {
+        this.UserList = res.data;
+      }
+      console.log(this.UserList)
+    },
+    // /appointment/page
+    async getmentList () {
+      const { data: res } = await this.$axios.get('/appointment/page', { params: this.queryInfo2 });
+      if (res.status == 0) {
+        this.mentList = res.data.list;
+      }
+    },
+
+  },
+  created () {
+    this.getUserList();
+    this.getmentList();
+  }
+}
+
+</script>
+
+
+
+<style lang="less" scoped>
+h5 {
+  margin: 0;
+  padding: 0;
+}
+.nav {
+  display: flex;
+  justify-content: center;
+}
+.colpadd {
+  padding: 0 20px;
+}
+.van-button {
+  font-size: 16px !important;
+}
+.screen {
+  height: 50px;
+  margin: 5px 0;
+  padding: 0 20px;
+  background-color: darkgray;
+  line-height: 50px;
+}
+.option {
+  padding: 0 15px;
+  .el-col {
+    line-height: 30px;
+  }
+}
+.option-button {
+  margin-top: 10px;
+  display: flex;
+  justify-content: center;
+}
+</style>

src/views/HomeView.vue

@@ -1,18 +1,324 @@
 <template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+  <div>
+    <div class="nav">
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <div class="grid-content bg-purple">
+            <el-button type="primary">我要租</el-button>
+          </div>
+        </el-col>
+        <el-col :span="12">
+          <div class="grid-content bg-purple">
+            <el-button @click="replacePage">我要买</el-button>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+    <!-- 下拉框 -->
+    <div class="screen">
+      <el-row :gutter="25">
+        <el-col :span="8">
+          <el-dropdown trigger="click">
+            <span class="el-dropdown-link">
+              社区项目<i class="el-icon-arrow-down el-icon--right"></i>
+            </span>
+            <el-dropdown-menu slot="dropdown">
+              <!-- <el-dropdown-item> -->
+              <div
+                class="option"
+                v-for="(item,index) in UserList"
+                :key="index"
+              >
+                <span>{{item.cityName}}</span>
+                <el-row>
+                  <el-checkbox-group v-model="checkListCommunity">
+                    <el-col
+                      :span="8"
+                      v-for="(items,indexs) in item.communityList"
+                      :key="indexs"
+                    >
+                      <el-checkbox :label="items.communityId">{{items.communityName}}</el-checkbox>
+                    </el-col>
+                  </el-checkbox-group>
+                </el-row>
+
+              </div>
+              <div class="option-button">
+                <el-row :gutter="20">
+                  <el-col :span="12"><span>
+                      <el-button type="info">重置</el-button>
+                    </span></el-col>
+                  <el-col :span="12"><span>
+                      <el-button
+                        type="primary"
+                        @click="queryCommunity"
+                      >确认</el-button>
+                    </span></el-col>
+                </el-row>
+              </div>
+              <!-- </el-dropdown-item> -->
+            </el-dropdown-menu>
+          </el-dropdown>
+        </el-col>
+        <el-col :span="8">
+          <el-dropdown trigger="click">
+            <span class="el-dropdown-link">
+              房屋类型<i class="el-icon-arrow-down el-icon--right"></i>
+            </span>
+            <el-dropdown-menu slot="dropdown">
+              <!-- <el-dropdown-item> -->
+              <div class="option">
+                <span>住宅</span>
+                <el-row>
+                  <el-checkbox-group v-model="checkList">
+                    <el-col :span="8">
+                      <el-checkbox label="高档住宅"></el-checkbox>
+                    </el-col>
+                    <el-col :span="8">
+                      <el-checkbox label="普通住宅"></el-checkbox>
+                    </el-col>
+                    <el-col :span="8">
+                      <el-checkbox label="公寓"></el-checkbox>
+                    </el-col>
+                    <el-col :span="8">
+                      <el-checkbox label="别墅"></el-checkbox>
+                    </el-col>
+                    <el-col :span="8">
+                      <el-checkbox label="复式"></el-checkbox>
+                    </el-col>
+                  </el-checkbox-group>
+                </el-row>
+
+              </div>
+              <div class="option">
+                <span>商业</span>
+                <el-row>
+                  <el-checkbox-group v-model="checkList">
+                    <el-col :span="8">
+                      <el-checkbox label="办公"></el-checkbox>
+                    </el-col>
+                    <el-col :span="8">
+                      <el-checkbox label="酒店"></el-checkbox>
+                    </el-col>
+                    <el-col :span="8">
+                      <el-checkbox label="厂房"></el-checkbox>
+                    </el-col>
+                    <el-col :span="8">
+                      <el-checkbox label="商城"></el-checkbox>
+                    </el-col>
+                    <el-col :span="8">
+                      <el-checkbox label="综合体"></el-checkbox>
+                    </el-col>
+                    <el-col :span="8">
+                      <el-checkbox label="仓库"></el-checkbox>
+                    </el-col>
+                  </el-checkbox-group>
+                </el-row>
+              </div>
+              <div class="option-button">
+                <el-row :gutter="20">
+                  <el-col :span="12"><span>
+                      <el-button type="info">重置</el-button>
+                    </span></el-col>
+                  <el-col :span="12"><span>
+                      <el-button type="primary">确认</el-button>
+                    </span></el-col>
+                </el-row>
+              </div>
+              <!-- </el-dropdown-item> -->
+            </el-dropdown-menu>
+          </el-dropdown>
+        </el-col>
+        <el-col :span="8">
+          <el-dropdown
+            trigger="click"
+            @click.native="dropdown"
+          >
+            <span class="el-dropdown-link">
+              房屋面积<i class="el-icon-arrow-down el-icon--right"></i>
+            </span>
+            <el-dropdown-menu v-show="hideClick">
+              <!-- <el-dropdown-item> -->
+              <div class="option">
+                <el-row>
+                  <el-checkbox-group v-model="checkList">
+                    <el-col :span="8">
+                      <el-checkbox label="50平米以下"></el-checkbox>
+                    </el-col>
+                    <el-col :span="8">
+                      <el-checkbox label="50-70平米"></el-checkbox>
+                    </el-col>
+                    <el-col :span="8">
+                      <el-checkbox label="70-90平米"></el-checkbox>
+                    </el-col>
+                    <el-col :span="8">
+                      <el-checkbox label="90-120平米"></el-checkbox>
+                    </el-col>
+                    <el-col :span="8">
+                      <el-checkbox label="120-150平米"></el-checkbox>
+                    </el-col>
+                    <el-col :span="8">
+                      <el-checkbox label="150-200平米"></el-checkbox>
+                    </el-col>
+                    <el-col :span="8">
+                      <el-checkbox label="200-300平米"></el-checkbox>
+                    </el-col>
+                    <el-col :span="8">
+                      <el-checkbox label="300平米以上"></el-checkbox>
+                    </el-col>
+                  </el-checkbox-group>
+                </el-row>
+
+              </div>
+              <div class="option-button">
+                <el-row :gutter="20">
+                  <el-col :span="12"><span>
+                      <el-button type="info">重置</el-button>
+                    </span></el-col>
+                  <el-col :span="12"><span>
+                      <el-button
+                        type="primary"
+                        @click="query"
+                      >确认</el-button>
+                    </span></el-col>
+                </el-row>
+              </div>
+              <!-- </el-dropdown-item> -->
+            </el-dropdown-menu>
+          </el-dropdown>
+        </el-col>
+      </el-row>
+    </div>
+    <!-- 内容 -->
+    <div>
+      <el-row
+        v-for="(item,index) in mentList"
+        :key="index"
+      >
+        <el-col
+          :span="24"
+          style="height: 124px;"
+        >
+          <el-row>
+            <el-col :span="11">
+              <el-image
+                style="width: 160px; height: 105px"
+                src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
+                fit="contain"
+              ></el-image>
+            </el-col>
+            <el-col :span="13">
+              <h5>{{item.title}}</h5>
+              <p><span>{{item.buildingType == 1 ? '住宅' : '商用'}}-{{item.residenceType == 1 ? '高档住宅' : item.residenceType == 2 ?  '普通住宅' : item.residenceType == 3 ? '公寓' : item.residenceType == 4 ? '别墅' : item.residenceType == 5 ? '复式' :item.residenceType == 6 ?'办公' : item.residenceType == 7 ? '酒店' : item.residenceType == 8 ? '厂房' : item.residenceType == 9 ? '商城' :item.residenceType == 10 ? '综合体' : item.residenceType == 11 ?'仓库' :'广告位'}}</span> <span>{{item.buildingArea || 0}}㎡</span></p>
+              <p>{{item.monthlyRent || 0}}元/月</p>
+            </el-col>
+          </el-row>
+        </el-col>
+      </el-row>
+
+    </div>
   </div>
+
 </template>
 
-<script>
-// @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue'
 
+<script>
 export default {
-  name: 'HomeView',
-  components: {
-    HelloWorld
+  data () {
+    return {
+      checkList: [],
+      hideClick: false,
+      mentList: [],
+      queryInfo: {
+        appId: 'wx3dafa2cbe0fd954a'
+      },
+      queryInfo2: {
+        type: 1
+      },
+      UserList: [],
+      // 社区
+      hideClickCommunity: false,
+      checkListCommunity: [],
+    }
+  },
+
+
+
+  methods: {
+    // 社区
+    queryCommunity () {
+      this.hideClickCommunity = !this.hideClickCommunity;
+      console.log(this.checkListCommunity);
+    },
+    replacePage () {
+      this.$router.push('/about')
+    },
+    dropdown () {
+      console.log(this.checkList);
+      this.hideClick = !this.hideClick;
+    },
+    query () {
+      this.hideClick = !this.hideClick;
+
+    },
+    // 社区名称
+    async getUserList () {
+      const { data: res } = await this.$axios.get('/appointment/getPublicCommunity', { params: this.queryInfo });
+      if (res.status == 0) {
+        this.UserList = res.data;
+      }
+      console.log(this.UserList)
+    },
+    // /appointment/page
+    async getmentList () {
+      const { data: res } = await this.$axios.get('/appointment/page', { params: this.queryInfo2 });
+      if (res.status == 0) {
+        this.mentList = res.data.list;
+      }
+    },
+
+  },
+  created () {
+    this.getUserList();
+    this.getmentList();
   }
 }
+
 </script>
+
+
+
+<style lang="less" scoped>
+h5 {
+  margin: 0;
+  padding: 0;
+}
+.nav {
+  display: flex;
+  justify-content: center;
+}
+.colpadd {
+  padding: 0 20px;
+}
+.van-button {
+  font-size: 16px !important;
+}
+.screen {
+  height: 50px;
+  margin: 5px 0;
+  padding: 0 20px;
+  background-color: darkgray;
+  line-height: 50px;
+}
+.option {
+  padding: 0 15px;
+  .el-col {
+    line-height: 30px;
+  }
+}
+.option-button {
+  margin-top: 10px;
+  display: flex;
+  justify-content: center;
+}
+</style>

vue.config.js

@@ -1,4 +1,18 @@
 const { defineConfig } = require('@vue/cli-service')
 module.exports = defineConfig({
-  transpileDependencies: true
+  transpileDependencies: true,
+  devServer: {
+    host: 'localhost', // 本地地址
+    port: 8081, // 端口号
+    open: true, // 配置项目在启动时自动在浏览器打开
+    proxy: {
+        '/appointment' : { // '/api'是代理标识，一般是每个接口前的相同部分
+            target: "http://114.135.61.186:8339", // 请求地址，一般是服务器地址
+            changeOrigin: true, // 是否进行跨域
+            pathRewrite: { // pathRewrite的作用是把请求接口中的 '/api'替换掉，一般是替换为空""
+                
+            }
+        }
+    }
+}
 })