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 class="tel flex">
		<label>{{ conf.nameRequired ? '*' : '' }}姓名：</label>
		<input type="text" class="card input" v-model="band_name" placeholder="请输入姓名" maxlength="20"/>
	  </view>
	  <view class="tel flex">
		<label>{{ conf.phoneRequired ? '*' : '' }}手机号：</label>
		<input type="number" class="card input" v-model="band_phone" placeholder="请输入手机号" maxlength="11"/>
	  </view>
	  <view class="tel flex">
		<label>{{ conf.idRequired ? '*' : '' }}身份证号：</label>
		<input type="idcard" class="card input" v-model="band_id" placeholder="请输入身份证号" maxlength="18"/>
	  </view>
    </view>
	<view class="agree-row" v-if="conf.agreeContent" @tap="agreed = !agreed">
	  <checkbox :checked="agreed" color="#02a7f0" style="transform: scale(0.8);" />
	  <text>我已阅读并同意</text>
	  <text class="agree-link" @tap.stop="showAgreement">《{{ conf.agreeTitle || '供暖缴费协议' }}》</text>
	</view>
    <button class="submit" @tap="houseSubmit">提交</button>
	<view class="agree-mask" v-if="showAgree" @tap="showAgree = false" @touchmove.stop.prevent>
	  <view class="agree-box" @tap.stop>
		<view class="agree-title">{{ conf.agreeTitle || '供暖缴费协议' }}</view>
		<scroll-view scroll-y class="agree-content">
		  <u-parse :content="conf.agreeContent" />
		</scroll-view>
		<button class="agree-close" @tap="showAgree = false">关闭</button>
	  </view>
	</view>
	<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';
import uParse from '@/components/gaoyia-parse/parse.vue';
import validate from '@/common/ys-validate.js';
export default {
  components: {
	jPicker,
	uParse
  },
  data() {
    return {
	  band_name: '',
	  band_phone: '',
	  band_id: '',
	  agreed: false,
	  showAgree: false,
	  conf: {
		nameRequired: false,
		phoneRequired: false,
		idRequired: false,
		agreeTitle: '',
		agreeContent: '',
	  },
      house: {
        name: "",
        num: "",
		master:'',
		area:'',
      },
	  hoodList: [],
	  buildList: [],
	  unitList: [],
	  numList: [],
	  hoodIndex: 0,
	  hoodName:'',
	  buildIndex:0,
	  unitIndex:0,
	  numIndex:0,
    };
  },
  onLoad() {

  	
  },
  onShow() {
    this.searchHood()
    this.loadConf()
  },
  methods: {
	// 解析 conf 接口返回：*_flag 为 "1" 表示必填
	applyConf(d){
		if (!d || typeof d !== 'object') return;
		const pick = (...keys) => {
			for (let k of keys) {
				if (d[k] !== undefined && d[k] !== null) return d[k];
			}
			return '';
		};
		const isOn = (v) => v === true || v === 1 || v === '1' || v === 'true' || v === 'yes';
		this.conf = {
			nameRequired: isOn(pick('band_name_flag')),
			phoneRequired: isOn(pick('band_phone_flag')),
			idRequired: isOn(pick('band_id_flag')),
			agreeTitle: pick('band_title'),
			agreeContent: pick('band_content'),
		};
	},
	loadConf(){
		let md5Sign = md5(
		  "method=" +
		    "conf" +
		    "&timestamp=" +
		    getApp().globalData.globalTimestamp +
		    "&secret=" +
		    getApp().globalData.secret
		);
		let url =
		  getApp().globalData.shareUrl +
		  "api/api.php" +
		  "?method=conf&timestamp=" +
		  getApp().globalData.globalTimestamp +
		  "&sign=" +
		  md5Sign;
		uni.request({
		  url: url,
		  method: "GET",
		  success: (res) => {
		    if (res.data && res.data.code === 200) {
				this.applyConf(res.data.data);
		    }
		  },
		  fail: () => {
		    console.log("连接失败");
		  },
		});
	},
	showAgreement(){
		this.showAgree = true;
	},
	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()
		  if (!this.numList.length || !this.numList[this.numIndex].name || this.numList[this.numIndex].name === '请选择房号') {
			uni.showToast({ title: "请选择房号", icon: "none" });
			return;
		  }
		  let name = this.band_name.trim(), phone = this.band_phone.trim(), id = this.band_id.trim();
		  if (this.conf.nameRequired && !name) {
			uni.showToast({ title: "请输入姓名", icon: "none" });
			return;
		  }
		  if (this.conf.phoneRequired && !phone) {
			uni.showToast({ title: "请输入手机号", icon: "none" });
			return;
		  }
		  if (phone && !validate.isPhone(phone)) {
			uni.showToast({ title: "请输入正确的手机号", icon: "none" });
			return;
		  }
		  if (this.conf.idRequired && !id) {
			uni.showToast({ title: "请输入身份证号", icon: "none" });
			return;
		  }
		  if (id && !validate.isIdCard(id)) {
			uni.showToast({ title: "请输入正确的身份证号", icon: "none" });
			return;
		  }
		  if (this.conf.agreeContent && !this.agreed) {
			uni.showToast({ title: "请先阅读并同意供暖缴费协议", icon: "none" });
			return;
		  }
	  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,
        band_name: this.band_name.trim(),
        band_phone: this.band_phone.trim(),
        band_id: this.band_id.trim().toUpperCase(),
      };
      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: 30rpx auto 120rpx;
  }
}
 .agree-row {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26rpx;
	margin-top: 20rpx;
	.agree-link {
		color: #02a7f0;
	}
 }
 .agree-mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 999;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
 }
 .agree-box {
	width: 620rpx;
	max-height: 80vh;
	box-sizing: border-box;
	background: #fff;
	border-radius: 20rpx;
	padding: 24rpx;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	.agree-title {
		text-align: center;
		font-weight: bold;
		padding-bottom: 16rpx;
		border-bottom: 1px solid #d8d8d8;
	}
	.agree-content {
		flex: 1;
		min-height: 300rpx;
		max-height: 60vh;
		margin: 20rpx 0;
		font-size: 26rpx;
		box-sizing: border-box;
		overflow-x: hidden;
		word-break: break-all;
	}
	.agree-close {
		width: 100%;
		flex-shrink: 0;
		font-size: 28rpx;
		color: #fff;
		background-color: #02a7f0;
	}
 }
 .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>