将区域等数据对接口，并将值传到后端

src/main/resources/static/main/mobilepage/js/housepurchase.js

@@ -10,195 +10,32 @@ Vue.component('cqu-check', {
                 id: 'core',
                 title: '中心城区',
                 active: true
-            }, {
+				}, {
                 id: 'new',
                 title: '都市新区',
                 active: false
-            }, {
+				}, {
                 id: 'eastnorth',
                 title: '渝东北',
                 active: false
-            }, {
+				}, {
                 id: 'eastsouth',
                 title: '渝东南',
                 active: false
             }],
             // 中心城区
-            coreList: [{
-                id: 'yz',
-                title: '渝中',
-                active: false
-            }, {
-                id: 'jb',
-                title: '江北',
-                active: false
-            }, {
-                id: 'yb',
-                title: '渝北',
-                active: false
-            }, {
-                id: 'na',
-                title: '南岸',
-                active: false
-            }, {
-                id: 'bb',
-                title: '北碚',
-                active: false
-            }, {
-                id: 'bn',
-                title: '巴南',
-                active: false
-            }, {
-                id: 'ddk',
-                title: '大渡口',
-                active: false
-            }, {
-                id: 'spb',
-                title: '沙坪坝',
-                active: false
-            }, {
-                id: 'jlp',
-                title: '九龙坡',
-                active: false
-            }, {
-                id: 'wsjk',
-                title: '万盛经开区',
-                active: false
-            }, {
-                id: 'ljxq',
-                title: '两江新区',
-                active: false
-            }, {
-                id: 'gxq',
-                title: '高新区',
-                active: false
-            },],
+            coreList: [],
             // 渝东北
-            northeastList: [{
-                id: 'fd',
-                title: '丰都',
-                active: false
-            }, {
-                id: 'dj',
-                title: '垫江',
-                active: false
-            }, {
-                id: 'wz',
-                title: '万州',
-                active: false
-            }, {
-                id: 'ws',
-                title: '巫山',
-                active: false
-            }, {
-                id: 'wx',
-                title: '巫溪',
-                active: false
-            }, {
-                id: 'yy',
-                title: '云阳',
-                active: false
-            }, {
-                id: 'fj',
-                title: '奉节',
-                active: false
-            }, {
-                id: 'ck',
-                title: '城口',
-                active: false
-            }, {
-                id: 'kz',
-                title: '开州',
-                active: false
-            }, {
-                id: 'zx',
-                title: '忠县',
-                active: false
-            }, {
-                id: 'lp',
-                title: '梁平',
-                active: false
-            },],
+            northeastList: [],
             // 渝东南
-            southeastList: [{
-                id: 'qj',
-                title: '黔江',
-                active: false
-            }, {
-                id: 'sz',
-                title: '石柱',
-                active: false
-            }, {
-                id: 'wl',
-                title: '武隆',
-                active: false
-            }, {
-                id: 'xs',
-                title: '秀山',
-                active: false
-            }, {
-                id: 'qy',
-                title: '酉阳',
-                active: false
-            }, {
-                id: 'ps',
-                title: '彭水',
-                active: false
-            }],
+            southeastList: [],
             // 都市新区
-            newList: [{
-                id: 'jj',
-                title: '江津',
-                active: false
-            }, {
-                id: 'hc',
-                title: '合川',
-                active: false
-            }, {
-                id: 'yc',
-                title: '永川',
-                active: false
-            }, {
-                id: 'dz',
-                title: '大足',
-                active: false
-            }, {
-                id: 'bs',
-                title: '璧山',
-                active: false
-            }, {
-                id: 'tl',
-                title: '铜梁',
-                active: false
-            }, {
-                id: 'tn',
-                title: '潼南',
-                active: false
-            }, {
-                id: 'rc',
-                title: '荣昌',
-                active: false
-            }, {
-                id: 'nc',
-                title: '南川',
-                active: false
-            }, {
-                id: 'cqj',
-                title: '綦江',
-                active: false
-            }, {
-                id: 'pl',
-                title: '涪陵',
-                active: false
-            }, {
-                id: 'cs',
-                title: '长寿',
-                active: false
-            }],
+            newList: [],
             curIndex: 0
         }
     },
     created() {
+		this.getSearchCondition();
         this.regAllList = [this.coreList, this.newList, this.northeastList, this.southeastList]
     },
     watch: {
@@ -237,7 +74,67 @@ Vue.component('cqu-check', {
                 item.active = this.buxQ
             })
             this.buxQ = !this.buxQ
-        }
+        },
+		getSearchCondition() {
+			var _this = this;
+			$.ajax({
+				type: 'GET',
+				url: PATH + '/front/getSearchCondition',
+				async: false,
+				success: function (json) {
+					console.log(json)
+					var index = 1;
+					var Area = json.data.area;
+					console.log(Area)
+					// 区域 中心城区
+					for (var i = 0; i < Area.zxcq.length; i++) {
+						_this.coreList.push({
+							id: index++,
+							title: Area.zxcq[i].areaName,
+							active: false,
+							dis: false,
+							value: Area.zxcq[i].code
+						})
+					}
+		
+					// 区域 都市新区
+					for (var i = 0; i < Area.dsxq.length; i++) {
+						_this.newList.push({
+							id: index++,
+							title: Area.dsxq[i].areaName,
+							active: false,
+							dis: false,
+							value: Area.dsxq[i].code
+						})
+					}
+		
+					// 区域 渝东北
+					for (var i = 0; i < Area.ydbq.length; i++) {
+						_this.northeastList.push({
+							id: index++,
+							title: Area.ydbq[i].areaName,
+							active: false,
+							dis: false,
+							value: Area.ydbq[i].code
+						})
+					}
+		
+					// 区域 渝东南
+					for (var i = 0; i < Area.ydnq.length; i++) {
+						_this.southeastList.push({
+							id: index++,
+							title: Area.ydnq[i].areaName,
+							active: false,
+							dis: false,
+							value: Area.ydnq[i].code
+						})
+					}
+				},
+				error: function (err) {
+					layer.msg('网络错误！');
+				}
+			})
+		},
     },
     template: `
         <div style="display:flex;">
@@ -245,7 +142,7 @@ Vue.component('cqu-check', {
 			    <span :class="{'ts-active':buxQ}" @click="buxQhan">不限</span>
 			    <span v-for="(item,index) in tabQuList" :key="item.id" :class="{'ts-active':item.active}" @click="swArea(index,item.id)">{{item.title}}</span>
             </div>
-            <ul class="check-scr" style="height:72vw;flex:3;">
+            <ul class="check-scr qy" style="height:72vw;flex:3;">
                 <li class="check-item" v-for="(item,index) in regAllList[curIndex]" :key="item.id">
                     <label :for="item.id" style="width:80vw;" :style="{'color':item.active?'#0060C3':'#333333'}">{{item.title}}</label>
                     <input type="checkbox" :name="item.title" :id="item.id" :checked="item.active" v-model="item.active" />
@@ -254,7 +151,7 @@ Vue.component('cqu-check', {
         </div>
     `
 })
-// 单价
+// 价格
 Vue.component('pri-check', {
 	props:['clears'],
     data() {
@@ -306,10 +203,40 @@ Vue.component('pri-check', {
             this.priceList.forEach(function (item) {
                 item.active = that.buxPri
             })
-        }
+        },
+		getSearchCondition1() {
+			var _this = this;
+			$.ajax({
+				type: 'GET',
+				url: PATH + '/front/getSearchCondition',
+				async: false,
+				success: function (json) {
+					console.log(json)
+					var index = 45;
+					
+					// 价格
+					_this.priceList = [];
+					for (var i = 0; i < json.data.price.length; i++) {
+					    _this.priceList.push({
+					        id: index++,
+					        title: json.data.price[i],
+					        active: false,
+					        dis: false,
+					        value: json.data.price[i]
+					    })
+					}
+				},
+				error: function (err) {
+					layer.msg('网络错误！');
+				}
+			})
+		},
     },
+	created: function() {
+		this.getSearchCondition1();
+	},
     template: `
-        <ul class="check-scr" style="height:72vw;">
+        <ul class="check-scr jg" style="height:72vw;">
             <li class="check-item">
 		        <label for="buxpri" style="width:80vw;" :style="{'color':buxPri?'#0060C3':'#333333'}">不限</label>
 		        <input type="checkbox" @change="handleH" id="buxpri" :checked="buxPri" v-model="buxPri" />
@@ -390,10 +317,40 @@ Vue.component('hou-check', {
             this.arcList.forEach(function (item) {
                 item.active = that.buxH
             })
-        }
+        },
+		getSearchCondition2() {
+			var _this = this;
+			$.ajax({
+				type: 'GET',
+				url: PATH + '/front/getSearchCondition',
+				async: false,
+				success: function (json) {
+					console.log(json)
+					var index = 54;
+					
+					// 户型
+					_this.arcList = [];
+					for (var i = 0; i < json.data.MJ.length; i++) {
+					    _this.arcList.push({
+					        id: index++,
+					        title: json.data.MJ[i],
+					        active: false,
+					        dis: false,
+					        value: json.data.MJ[i]
+					    })
+					}
+				},
+				error: function (err) {
+					layer.msg('网络错误！');
+				}
+			})
+		},
     },
+	created: function() {
+		this.getSearchCondition2();
+	},
     template: `
-        <ul class="check-scr" style="height:72vw;">
+        <ul class="check-scr hx" style="height:72vw;">
             <li class="check-item">
 		        <label for="buxh" style="width:80vw;" :style="{'color':buxH?'#0060C3':'#333333'}">不限</label>
 		        <input type="checkbox" @change="handleH" id="buxh" :checked="buxH" v-model="buxH" />
@@ -445,10 +402,40 @@ Vue.component('pm-check', {
             this.houseList.forEach(function (item) {
                 item.active = that.buxPm
             })
-        }
+        },
+		getSearchCondition3() {
+			var _this = this;
+			$.ajax({
+				type: 'GET',
+				url: PATH + '/front/getSearchCondition',
+				async: false,
+				success: function (json) {
+					console.log(json)
+					var index = 60;
+					
+					// 面积
+					_this.houseList = [];
+					for (var i = 0; i < json.data.HX.length; i++) {
+					    _this.houseList.push({
+					        id: index++,
+					        title: json.data.HX[i],
+					        active: false,
+					        dis: false,
+					        value: json.data.HX[i]
+					    })
+					}
+				},
+				error: function (err) {
+					layer.msg('网络错误！');
+				}
+			})
+		},
     },
+	created: function() {
+		this.getSearchCondition3();
+	},
     template: `
-        <ul class="check-scr" style="height:72vw;">
+        <ul class="check-scr mj" style="height:72vw;">
             <li class="check-item">
 		        <label for="buxpm" style="width:80vw;" :style="{'color':buxPm?'#0060C3':'#333333'}">不限</label>
 		        <input type="checkbox" @change="handleH" id="buxpm" :checked="buxPm" v-model="buxPm" />
@@ -506,23 +493,23 @@ Vue.component('more-list', {
                 active: false
             }],
             more3: [{ id: 13, title: '精装', active: false }, { id: 23, title: '普通装修', active: false }, { id: 33, title: '毛坯房', active: false }],
-            more4: [{
-                id: 1,
-                title: '近5年',
-                active: false
-            }, {
-                id: 2,
-                title: '5-10年',
-                active: false
-            }, {
-                id: 3,
-                title: '10-15年',
-                active: false
-            }, {
-                id: 4,
-                title: '15年以上',
-                active: false
-            }],
+            // more4: [{
+            //     id: 1,
+            //     title: '近5年',
+            //     active: false
+            // }, {
+            //     id: 2,
+            //     title: '5-10年',
+            //     active: false
+            // }, {
+            //     id: 3,
+            //     title: '10-15年',
+            //     active: false
+            // }, {
+            //     id: 4,
+            //     title: '15年以上',
+            //     active: false
+            // }],
             buxN: false,
             buxZx: false,
             buxF: false,
@@ -531,18 +518,19 @@ Vue.component('more-list', {
         }
     },
 	created() {
-		this.allList = [this.more1,this.more2,this.more3,this.more4,this.fzzList]
+		this.allList = [this.more1,this.more2,this.more3,this.fzzList];
+		this.getSearchCondition4();
 	},
     watch: {
-        more4: {
-            deep: true,
-            handler(newVal) {
-                const bool = newVal.every(function (item) {
-                    return item.active != false
-                })
-                this.buxN = bool
-            }
-        },
+        // more4: {
+        //     deep: true,
+        //     handler(newVal) {
+        //         const bool = newVal.every(function (item) {
+        //             return item.active != false
+        //         })
+        //         this.buxN = bool
+        //     }
+        // },
         more3: {
             deep: true,
             handler(newVal) {
@@ -603,14 +591,14 @@ Vue.component('more-list', {
                 <div class="item-title">住宅</div>
                 <ul class="item-list" >
                 <li class="item-i" :class="{'tabs-active':buxZ}" @click="hanMore2">不限</li>
-                    <li class="item-i" v-for="item in more2" :class="{'tabs-active':item.active}" :key="item.id" @click="hiliteHandle(item.id,'more2')">{{item.title}}</li>
+                    <li class="item-i zz" v-for="item in more2" :class="{'tabs-active':item.active}" :key="item.id" @click="hiliteHandle(item.id,'more2')">{{item.title}}</li>
                 </ul>
             </li>
 			<li class="more-item">
 			    <div class="item-title">非住宅</div>
 			    <ul class="item-list" >
                 <li class="item-i" :class="{'tabs-active':buxF}" @click="hanMoreF">不限</li>
-			        <li class="item-i" v-for="item in fzzList" :class="{'tabs-active':item.active}" :key="item.id" @click="hiliteHandle(item.id,'fzzList')">{{item.title}}</li>
+			        <li class="item-i fzz" v-for="item in fzzList" :class="{'tabs-active':item.active}" :key="item.id" @click="hiliteHandle(item.id,'fzzList')">{{item.title}}</li>
 			    </ul>
 			</li>
             <li class="more-item">
@@ -620,15 +608,15 @@ Vue.component('more-list', {
                     <li class="item-i" v-for="item in more3" :class="{'tabs-active':item.active}" :key="item.id" @click="hiliteHandle(item.id,'more3')">{{item.title}}</li>
                 </ul>
             </li>
-			<li class="more-item">
-			    <div class="item-title">竣工年限</div>
-			    <ul class="item-list" >
-			        <li class="item-i" :class="{'tabs-active':buxN}" @click="hanMore4">不限</li>
-			        <li class="item-i" v-for="item in more4" :class="{'tabs-active':item.active}" :key="item.id" @click="hiliteHandle(item.id,'more4')">{{item.title}}</li>
-			    </ul>
-			</li>
         </ul>
     `,
+	// <li class="more-item">
+	//     <div class="item-title">竣工年限</div>
+	//     <ul class="item-list" >
+	//         <li class="item-i" :class="{'tabs-active':buxN}" @click="hanMore4">不限</li>
+	//         <li class="item-i" v-for="item in more4" :class="{'tabs-active':item.active}" :key="item.id" @click="hiliteHandle(item.id,'more4')">{{item.title}}</li>
+	//     </ul>
+	// </li>
     methods: {
         hiliteHandle(id, name) {
             this[name].forEach(function (item) {
@@ -665,13 +653,53 @@ Vue.component('more-list', {
             })
             this.buxZx = !this.buxZx
         },
-        hanMore4() {
-            var that = this
-            this.more4.forEach(function (item) {
-                item.active = !that.buxN
-            })
-            this.buxN = !this.buxN
-        }
+        // hanMore4() {
+        //     var that = this
+        //     this.more4.forEach(function (item) {
+        //         item.active = !that.buxN
+        //     })
+        //     this.buxN = !this.buxN
+        // }
+		getSearchCondition4() {
+			var _this = this;
+			$.ajax({
+				type: 'GET',
+				url: PATH + '/front/getSearchCondition',
+				async: false,
+				success: function (json) {
+					console.log(json)
+					var index = 60;
+					
+					// 用途
+					_this.more2 = [];
+					console.log(json.data)
+					for (var i = 0; i < json.data.YT.zz.length; i++) {
+					    _this.more2.push({
+					        id: index++,
+					        title: json.data.YT.zz[i],
+					        active: false,
+					        dis: false,
+					        value: json.data.YT.zz[i]
+					    })
+					}
+					
+					// 非住宅
+					_this.fzzList = [];
+					for (var i = 0; i < json.data.YT.fzz.length; i++) {
+					    _this.fzzList.push({
+					        id: index++,
+					        title: json.data.YT.fzz[i],
+					        active: false,
+					        dis: false,
+					        value: json.data.YT.fzz[i]
+					    })
+					}
+				},
+				error: function (err) {
+					layer.msg('网络错误！');
+				}
+			})
+		},
     }
 })
 
@@ -704,7 +732,22 @@ new Vue({
             active: false
         }],
 		// 重置
-		clearData:''
+		clearData:'',
+		getParam: {
+		    page: 1,
+		    limit: 10,
+		    count: 0,
+		    QX: '',
+		    CJJG: '',
+		    HX: '',
+		    JZMJ: '',
+		    FWLX: '',
+		    search: '',
+		    FYLX: 0,
+		    SZC: '',
+		    ZXCD: '',
+		    sort: 0
+		},
     },
     watch: {
         show(newVal) {
@@ -715,7 +758,31 @@ new Vue({
             }
         }
     },
+	created:function(){
+		this.getHouseInfoList()
+	},
     methods: {
+		getHouseInfoList() {
+		    var _this = this;
+		    $.ajax({
+		        type: 'get',
+		        url: PATH + '/front/getHouseSourceTypeList',
+		        data: this.getParam,
+		        success: function (json) {
+		            console.log(json)
+		            if (json.msg == "SUCCESS") {
+		                _this.houseInfoList = JSON.parse(json.data);
+		                _this.getParam.count = json.count;
+		                
+		            } else {
+		                layer.msg('请求错误');
+		            }
+		        },
+		        error: function (err) {
+		            layer.msg('网络错误！');
+		        }
+		    })
+		},
         showCheck(index, id) {
             this.moreShow = id
             this.currentIndex = index
@@ -724,6 +791,81 @@ new Vue({
         hideCheck() {
             this.show = false
             this.currentIndex = 0
+			
+			// 区域
+			var rec = [];
+			$('.qy li input').each(function (i, el) {
+			    if (el.checked) {
+			        rec.push($(el).attr('name'));
+			    }
+			})
+			this.getParam.QX = rec.join(',');
+			
+			// 价格
+			var rea = []
+			$('.jg li input').each(function (i, el) {
+			    if (el.checked) {
+			        rea.push($(el).attr('name'));
+			    }
+			})
+			this.getParam.CJJG = rea.join(',');
+			
+			// 面积
+			var reb = [];
+			$('.hx li input').each(function (i, el) {
+			    if (el.checked) {
+			        reb.push($(el).attr('name'));
+			    }
+			})
+			this.getParam.JZMJ = reb.join(',');
+			
+			// 户型
+			var red = [];
+			$('.mj li input').each(function (i, el) {
+			    if (el.checked) {
+			        red.push($(el).attr('name'));
+			    }
+			})
+			this.getParam.HX = red.join(',');
+			
+			// 用途 住宅
+			var ree = [];
+			$('.zz').each(function () {
+				var zzcolor = $(this).css('color');
+			    if (zzcolor== 'rgb(0, 96, 195)') {
+			        ree.push($(this).text());
+			    }
+				console.log($(this).text())
+			})
+			
+			// 非住宅
+			$('.fzz').each(function () {
+				var fzzcolor = $(this).css('color');
+			    if (fzzcolor== 'rgb(0, 96, 195)') {
+			        ree.push($(this).text());
+			    }
+			})
+			this.getParam.FWLX = ree.join(',');
+			
+			//楼层
+			// var reg = [];
+			// $('.floor li input').each(function (i, el) {
+			//     if (el.checked) {
+			//         reg.push($(el).attr('data-value'));
+			//     }
+			// })
+			// this.getParam.SZC = reg.join(',');
+			
+			// 装修
+			// var reh = [];
+			// $('.renovation li input').each(function (i, el) {
+			//     if (el.checked) {
+			//         reh.push($(el).attr('data-value'));
+			//     }
+			// })
+			// this.getParam.ZXCD = reh.join(',');
+			
+			this.getHouseInfoList();
         },
         tabQH(id) {
             this.tabArr.forEach(function (item) {