zd_wechatApp/pages/oldrenovation/indoor/tearOldPipe.vue

	<template>
		<view class="background">
			<view class="uni-list">
				<view class="container">
					<view>
						小区
					</view>
					<view class="uni-list-cell-db" style="margin-top: 10;" @click="pickerShow('xq')">
						<span>{{attributeXQ}}</span>
					</view>
				</view>
			</view>
			<view class="uni-list">
				<view class="container">
					<view class="uni-list-cell-left">
						楼栋
					</view>
					<view class="uni-list-cell-db" style="margin-top: 10;" @click="pickerShow('ld')">
						<span>{{attributeLD}}</span>
					</view>
				</view>
			</view>
			<view class="uni-list" style="margin-top: 10;">
				<view class="container">
					<view class="uni-list-cell-left">
						单元
					</view>
					<view class="uni-list-cell-db" style="margin-top: 10;" @click="pickerShow('dy')">
						<span>{{attributeDY}}</span>
					</view>
				</view>
			</view>
			<view class="uni-list">
				<view class="container">
					<view class="uni-list-cell-left">
						房间
					</view>
					<view class="uni-list-cell-db" style="margin-top: 10;" @click="pickerShow('fj')">
						<span>{{attributeFJ}}</span>
					</view>
				</view>
			</view>
			<view class="container">

				<view class="title">是否按照施工图纸施工</view>
				<switch checked @change="switch2Change" />

			</view>
			<SelectPicker :list="selectList" @change="changeSelect" v-if="open" @close="close" titleKey="name"
				subtitleKey="id" v-model="name"></SelectPicker>
		</view>
	</template>



	<script>
		import SelectPicker from '../../../components/selectPicker/select_picker.vue'
		import {
			getAreaList,
			getBuildingList,
			getUnitList,
			getHousesList
		} from '@/api/common'

		export default {
			components: {
				SelectPicker
			},
			data() {

				return {

					type: '',
					open: false,
					selectList: [],

					XQValue: {},
					LDValue: {},
					DYValue: {},
					FJValue: {},
					XQList: '',
					index: 0,
					address: null,
					title: 'picker',
					transformerValue: '请选择楼栋',

					LDList: '',
					DYList: '',
					FJList: '',


				}
			},
			created() {
				getAreaList().then(res => {
					this.XQList = res;
				})

			},
			onLoad() {
				uni.setNavigationBarTitle({
					title: '旧改工程-室内'
				})
			},
			computed: {
				attributeXQ() {
					return this.XQValue.name ? this.XQValue.name : "请选择小区"

				},
				attributeLD() {
					return this.LDValue.name ? this.LDValue.name : "请选择楼栋"
				},
				attributeDY() {
					return this.DYValue.name ? this.DYValue.name : "请选择单元"
				},
				attributeFJ() {
					return this.FJValue.name ? this.FJValue.name : "请选择房间"
				}
			},
			methods: {
				//判断是否选择
				isEmpty(str) {

					return (!str || 0 === str.length);

				},
				pickerShow(e) {


					this.type = e; //赋值类型
					if (e == 'xq') {
						this.open = true;
						this.selectList = this.XQList;
					} else if (e == 'ld') {

						if (this.isEmpty(this.XQValue.id)) {
							uni.showToast({
								title: '请选择小区',
								icon: 'error',
								duration: 1000
							});

						} else {
							this.open = true;
							this.selectList = this.LDList;
						}

					} else if (e == 'dy') {
						if (this.isEmpty(this.LDValue.id)) {
							uni.showToast({
								title: '请选择楼栋',
								icon: 'error',
								duration: 1000

							});
						} else {
							this.open = true;
							this.selectList = this.DYList;
						}
					} else if (e == 'fj') {
						if (this.isEmpty(this.DYValue.id)) {
							uni.showToast({
								title: '请选择单元',
								icon: 'error',
								duration: 1000

							});
						} else {
							this.open = true;
							this.selectList = this.FJList;
						}
					}

				},
				bindPickerChange(e) {
					console.log('picker发送选择改变，携带值为', e.detail.value)
					this.index = e.detail.value
				},
				bindDateChange(e) {
					this.date = e.detail.value
				},
				switch2Change(e) {
					console.log('switch2 发生 change 事件，携带值为', e.detail.value)
				},
				changeSelect(item, index) {
					this.index = index;
					this.address = item.communityName;
					this.open = false;
					if (this.type == 'xq') {
						this.XQValue = item;
						//根据小区id 获取楼栋数据
						this.LDValue.name = ''; //重置楼栋数据
						this.DYValue.name = ''; //重置单元数据
						this.FJValue.name = ''; //重置房间数据
						getBuildingList(item.id).then(res => {
							this.LDList = res
							// console.log("楼栋=", res)
						})
					} else if (this.type == 'ld') {
						this.LDValue = item;
						//根据楼栋ID 获取单元数据
						this.DYValue.name = ''; //重置单元数据
						this.FJValue.name = ''; //重置房间数据
						getUnitList(item.id).then(res => {
							this.DYList = res
							// console.log("单元=", res)
						})
					} else if (this.type == 'dy') {
						this.DYValue = item;
						//根据单元数据 获取房间数据 
						this.FJValue.name = ''; //重置房间数据
						getHousesList(item.id).then(res => {
							this.FJList = res
							// console.log("房间=", res)
						})
					} else if (this.type == 'fj') {
						this.FJValue = item;
					}

				},
				//关闭弹窗
				close(e) {
					this.open = false
				}
			}
		}
	</script>

	<style>
		.container {
			display: flex;
			margin-left: 10px;
			margin-top: 10px;
			margin-right: 10px;
			align-items: flex-start;
			justify-content: space-between;
		}

		.text {
			font-size: 16px;
			color: #333;
		}

		.background {
			border: 15px solid hsla(0, 0%, 100%, .5);
			background: white;
			background-clip: padding-box;
			/*从padding开始往外面裁剪背景*/


		}
	</style>