heating-pay/pages/selfCenter/with_house.vue

<template>
  <view class="content">
    <view class="supplyInfo">
	  <view class="tel flex">
		<label>小区名称：</label>
		<view class="picker card input">
 		  <picker
		    @change="hoodChangeOld"
		    :value="hoodIndex"
		    :range="hoodList"
		    range-key="name"
		    class="pick"
		  >
		    <view class="picker_title">
		      <view class="pickername">
		        <view>
		          {{ hoodList[hoodIndex].name || '请选择小区'}}
		        </view>
		      </view>
		      <view class="triangle-down"></view>
		    </view>
		  </picker>
		<!--  <jPicker  class="cont"  position="top" @sure="hoodChange" showKey="name" valKey="name"
		   :val="hoodList.name" :options="hoodList" />
		-->
		</view>
	  </view>
	  <view class="tel flex"  style="margin-top:30rpx;">
	    <label style="text-align: center;">楼栋：</label>
	    <view class="picker card input">
	      <picker
	        @change="buildingChange"
	        :value="buildIndex"
	        :range="buildList"
	        range-key="name"
	        class="pick"
	      >
	        <view class="picker_title">
	          <view class="pickername">
	            <view>
	              {{ buildList[buildIndex].name || '请选择楼栋'}}
	            </view>
	          </view>
	          <view class="triangle-down"></view>
	        </view>
	      </picker>
	    </view>
	  </view>
	  <view class="tel flex">
	    <label   style="text-align: center;">单元：</label>
	    <view class="picker card input">
	      <picker
	        @change="unitChange"
	        :value="unitIndex"
	        :range="unitList"
	        range-key="name"
	        class="pick"
	      >
	        <view class="picker_title">
	          <view class="pickername">
	            <view>
	              {{ unitList[unitIndex].name || '请选择单元'}}
	            </view>
	          </view>
	          <view class="triangle-down"></view>
	        </view>
	      </picker>
	    </view>
	  </view>
	  <view class="tel flex">
			<label   style="text-align: center;">房号：</label>
			<view class="picker card input">
			  <picker
				@change="numChange"
				:value="numIndex"
				:range="numList"
				range-key="name"
				class="pick"
			  >
				<view class="picker_title">
				  <view class="pickername">
					<view>
					  {{ numList[numIndex].name || '请选择房号'}}
					</view>
				  </view>
				  <view class="triangle-down"></view>
				</view>
			  </picker>
			</view>
	  </view>
	  <view class="tel flex" style="margin-top: 100rpx;">
	    <label>户主姓名：</label>
	    <input type="text" class="card input" v-model="house.master" disabled/>
	  </view>
	  <view class="tel flex">
		<label>住宅面积：</label>
		<input type="text" class="card input" v-model="house.area" disabled/>
	  </view>
    </view>
    <button class="submit" @tap="houseSubmit">提交</button>
	<uni-popup ref="popup" :mask-click="false">
		  <view class="popup-box" style="height: 400rpx;">
			  <view>
				  <view class="popup-title">确认</view>
				  <view class="popup-content-box">
				  		  <view class="popup-content">
				  			  <view class="popup-type">
				  			  	  确定关联此住房信息吗？
				  			  </view>
				  		  </view>
				  </view>
			  </view>
			  <view class="popup-footer">
				<button class="popup-cancel" @click="closePop">取消</button>
			  	<button class="popup-submit" @click="submitPop">确定</button>
			  </view>
		  </view>
		</uni-popup>
  </view>
</template>
<script>
import md5 from "@/common/md5.js";
import jPicker from '../../components/J-Picker/jPicker.vue';
export default {
  components: {
	jPicker
  },
  data() {
    return {
      house: {
        name: "",
        num: "",
		master:'',
		area:'',
      },
	  hoodList: [],
	  buildList: [],
	  unitList: [],
	  numList: [],
	  hoodIndex: 0,
	  hoodName:'',
	  buildIndex:0,
	  unitIndex:0,
	  numIndex:0,
    };
  },
  onLoad() {

  	
  },
  onShow() {
    this.searchHood()
  },
  methods: {
	searchHood(){
		let that = this;
		this.hoodList = [];
		this.hoodIndex = 0;
		// let result = e.detail.value;
		let md5Sign = md5(
		  "method=" +
		    "user" +
		    "&timestamp=" +
		    getApp().globalData.globalTimestamp +
		    "&secret=" +
		    getApp().globalData.secret
		);
		let url =
		  getApp().globalData.shareUrl +
		  "api/api.php" +
		  "?method=user&source=user&action=search_estate&timestamp=" +
		  getApp().globalData.globalTimestamp +
		  "&sign=" +
		  md5Sign;
		let postData = {
          keyword:'',
		  openId: getApp().globalData.open_id,
		};
		uni.request({
		  url: url,
		  method: "POST",
		  header: {
		    "content-type": "application/x-www-form-urlencoded",
		  },
		  data: postData,
		  success: (res) => {
		    if (res.data.code === 200) {
				let obj = res.data.data;
				let c = {
						name:"请选择小区",
				}
				this.hoodList.push(c);
				for (let key in obj) {
					let child = {
						name:obj[key]
					}
				 this.hoodList.push(child)
				}		
		    } 
		  },
		  fail: () => {
		    console.log("连接失败");
		  },
		});
	},
	searchDetail(hood,build,unit,room){
		let that = this, addressResult,searchType;
		// let result = e.detail.value;
		that.house.master = '';
		that.house.area = '';
		
		if (room)
		{
			if (hood === "请选择小区")
			{
				return;
			}
			searchType = 'houseRoom'
			addressResult = hood + '/' + build + '/' + unit + '/' + room
		}
		if(build && unit && !room){
			if (build === "请选择房号")
			{
				return;
			}
			searchType = 'houseNumber'
			addressResult = hood + '/' + build + '/' + unit
		}
		if(build && !unit){
			if (build === "请选择单元")
			{
				return;
			}
			searchType = 'houseUnit'
			addressResult = hood + '/' + build
		}
		if(!build && !unit){
			if (build === "请选择楼栋")
			{
				return;
			}
			searchType = 'houseBuilding'
			addressResult = hood
		}
		
		let md5Sign = md5(
		  "method=" +
		    "user" +
		    "&timestamp=" +
		    getApp().globalData.globalTimestamp +
		    "&secret=" +
		    getApp().globalData.secret
		);
		let url =
		  getApp().globalData.shareUrl +
		  "api/api.php" +
		  "?method=user&source=user&action=get_address&timestamp=" +
		  getApp().globalData.globalTimestamp +
		  "&sign=" +
		  md5Sign;
		let postData = {
          address:addressResult,
		  openId: getApp().globalData.open_id,
		};
		uni.request({
		  url: url,
		  method: "POST",
		  header: {
		    "content-type": "application/x-www-form-urlencoded",
		  },
		  data: postData,
		  success: (res) => {
		    if (res.data.code === 200) {
                   if(res.data.data.length === 0){
					     uni.showToast({
					       title: hood+"暂无数据",
					       icon: "error",
					     });
				   }else{
					   that.makeHouseData(searchType,res.data.data)
				   } 	
		    } 
		  },
		  fail: () => {
		    console.log("连接失败");
		  },
		});		
	},
	resetLevels(level){
		//重置下一层
		let that = this;
		
		switch (level){
			case 1:
				that.buildList = [];
				let a = {
					name : '请选择楼栋'
				};
				that.buildList.push(a);
				that.buildIndex = 0;
			case 2:
				that.unitList = [];
				let b = {
					name : '请选择单元'
				};
				that.unitList.push(b);
				that.unitIndex = 0;
			case 3:
				that.numList = [];
				let c = {
					name : '请选择房号'
				};
				that.numList.push(c);
				that.numIndex = 0;
			case 4:
				that.house.master = '';
				that.house.area = '';
				
		}
	},
	makeHouseData(type,dataList){
		let that = this , obj = dataList;	
		switch (type){
			case 'houseBuilding':
				this.resetLevels(1);

				for (let key in obj) {
					let child = {
						name:obj[key]
					}
					that.buildList.push(child)
				}
				//that.searchDetail(that.hoodName,that.buildList[0].name)
				break;
			case 'houseUnit':
				this.resetLevels(2);
				for (let key in obj) {
					let child = {
						name:obj[key]
					}
					that.unitList.push(child)
				}	
				//that.searchDetail(that.hoodName,that.buildList[that.buildIndex].name,that.unitList[0].name)
				break;
			case 'houseNumber':
				this.resetLevels(3);
				for (let key in obj) {
						let child = {
							name:obj[key]
						}
						that.numList.push(child)
					}
				//that.searchDetail(that.hoodName,that.buildList[that.buildIndex].name,that.unitList[that.unitIndex].name,that.numList[0].name);
				break;	
			case 'houseRoom':
				that.house.master = obj.name;
				that.house.area = obj.area;
			default:
				break;
		}
	},
	houseSubmit(){
	  //uni.navigateBack({});
	  //this.open()
	  let that = this;
	  uni.showModal({
	    title: "确定关联此住房信息吗？",
	    success(res) {
			if (res.confirm) {
			//确定继续后续操作。
				that.submit();
			}else if (res.cancel) {
				return;
			}
	    },
	  });
	},
	hoodChange(e){
	  console.log("e.pickerVal="+e.pickerVal);
	  this.hoodName = e.pickerVal;
	  this.searchDetail(this.hoodName);
	},
	hoodChangeOld(e){
		let name = this.hoodList[e.detail.value].name;
		if (name === "请选择小区")
		{
			return;
		}
		this.hoodName = name;
		this.hoodIndex = e.detail.value;
		this.searchDetail(this.hoodName);
	},
    buildingChange(e) {
	  if(!this.hoodName){
		    uni.showToast({
		      title: "请先选择小区",
		      icon: "error",
		    });
			return;
	  }
      this.buildIndex = e.detail.value;
	  this.searchDetail(this.hoodName,this.buildList[this.buildIndex].name)
    },
    unitChange(e) {
	  if(!this.buildList.length){
		    uni.showToast({
		      title: "请先选择楼栋",
		      icon: "error",
		    });
			return
	  }		
      this.unitIndex = e.detail.value;
	  this.searchDetail(this.hoodName,this.buildList[this.buildIndex].name,this.unitList[this.unitIndex].name)
    },	
    numChange(e) {
	  if(!this.unitList.length){
		    uni.showToast({
		      title: "请先选择单元",
		      icon: "error",
		    });
			return
	  }			
      this.numIndex = e.detail.value;
	  this.searchDetail(this.hoodName,this.buildList[this.buildIndex].name,this.unitList[this.unitIndex].name,this.numList[this.numIndex].name);
    },	
	submitPop(){
		//this.closePopup()
		this.submit()
	},
	closePop(){
		this.closePopup()
	},
	open() {
		  this.$refs.popup.open('center')
	  },
	closePopup() {
		  this.$refs.popup.close()
	  },
    submit() {
      if (
        !this.buildList.length ||
        !this.unitList.length ||
        !this.numList.length
      ) {
        uni.showToast({
          title: "小区信息不完善",
          icon: "error",
        });
        return;
      }
	  let addressResult = this.hoodName + '/' + this.buildList[this.buildIndex].name + '/' + this.unitList[this.unitIndex].name + '/' + this.numList[this.numIndex].name
      let md5Sign = md5(
        "method=" +
          "user" +
          "&timestamp=" +
          getApp().globalData.globalTimestamp +
          "&secret=" +
          getApp().globalData.secret
      );
      let url =
        getApp().globalData.shareUrl +
        "api/api.php" +
        "?method=user&source=user&action=band_owner&timestamp=" +
        getApp().globalData.globalTimestamp +
        "&sign=" +
        md5Sign;
      let postData = {
        address:addressResult, 
        openId: getApp().globalData.open_id,
      };
      uni.request({
        url: url,
        method: "POST",
        header: {
          "content-type": "application/x-www-form-urlencoded",
        },
        data: postData,
        success: (res) => {
          if (res.data.code === 200) {
			  uni.showToast({
			    title: "绑定成功",
			    icon: "success",
			  });
			setTimeout(function() {
				uni.navigateBack({
				});
			}, 500)
          }
        },
        fail: () => {
          console.log("连接失败");
        },
      });
    },		  
  },
};
</script>
<style lang="scss" scoped>

.content {
  font-size: 28rpx;
  font-weight: 200;
  padding: 1% 2%;
  .title {
    font-size: 30rpx;
    margin: 4% 0;
  }
  label {
    display: inline-block;
    width: 25%;
    vertical-align: middle;
  }
  .card {
    background-color: rgb(248, 247, 247);
    border-radius: 10rpx;
  }
  .flex {
    display: flex;
    align-items: center;
    margin-bottom: 2%;
  }
  .input {
    padding: 0 2%;
    margin: 2% 0;
    display: inline-block;
    width: 80%;
    height: 70rpx;
	line-height: 70rpx;
  }
  .supplyInfo {
    border-radius: 40rpx;
    padding: 4%;
    box-shadow: rgba(100, 100, 111, 0.2) 14rpx 14rpx 40rpx 14rpx;
	margin: 30rpx 0 30rpx 0;

  }
  .info {
    margin-top: 2%;
    border-radius: 40rpx;
    padding: 2% 4%;
    box-shadow: rgba(100, 100, 111, 0.2) 14rpx 14rpx 40rpx 14rpx;
  }
  .submit {
    color: white;
    font-weight: normal;
    width: 55%;
    border-radius: 20rpx;
    background-color: #02a7f0;
    margin: 120rpx auto;
  }
}
 .popup-box {
	  height: 100%;
	  display: flex;
	  flex-direction: column;
	  justify-content: space-between;
  }
  .popup-title {
	  text-align: center;
	  font-weight: bold;
	  height: 30px;
	  border-bottom: 1px solid #d8d8d8;
  }
  .popup-content {
	  font-size: 28rpx;
	  padding: 10rpx 0 10rpx 0;
  }
  .popup-type {
	  height: 80rpx;
	 text-align: center;
    margin-top: 100rpx;
  }
  .popup-footer {
	  display: flex;
	  button{
		  font-size: 26rpx;
		  height: 60rpx;
		  width: 150rpx;
		  line-height: 60rpx;
		  color: #FFFFFF;
	  }
  }
  .popup-cancel {
	  background-color: #AAAAAA;
  }
  .popup-submit {
	  background-color: #249CD3;
  }
</style>