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="communityName"
				subtitleKey="address" v-model="communityName"></SelectPicker>
		</view>
	</template>



	<script>
		import SelectPicker from '../../../components/selectPicker/select_picker.vue'

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

				return {

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

					XQValue: {},
					LDValue: {},
					DYValue: {},
					FJValue: {},
					XQList: [{
						"communityName": "乐彩花园",
						"address": "乐彩花园(新华路东100米)",
						"id": "00"
					}, {
						"communityName": "进行蓉城",
						"address": "运河城万佳广场(兴隆桥北街)",
						"id": "01"
					}, {
						"communityName": "万达华府1、2号院",
						"address": "万达华府",
						"id": "02"
					}, {
						"communityName": "万达华府8--10号楼",
						"address": "万达华府",
						"id": "03"
					}, {
						"communityName": "万达华府2--8号楼",
						"address": "万达华府",
						"id": "04"
					}, {
						"communityName": "万达华府1--3号楼",
						"address": "万达华府",
						"id": "05"
					}],
					index: 0,
					address: null,
					title: 'picker',
					transformerValue: '请选择楼栋',

					LDList: [{
						"communityName": "1栋",
						"address": "乐彩花园(新华路东100米)",
						"id": "000"
					}, {
						"communityName": "2栋",
						"address": "运河城万佳广场(兴隆桥北街)",
						"id": "001"
					}, {
						"communityName": "3栋",
						"address": "万达华府",
						"id": "002"
					}, {
						"communityName": "4栋",
						"address": "万达华府",
						"id": "003"
					}, {
						"communityName": "5栋",
						"address": "万达华府",
						"id": "004"
					}, {
						"communityName": "6栋",
						"address": "万达华府",
						"id": "005"
					}],
					DYList: [{
						"communityName": "一单元",
						"address": "乐彩花园(新华路东100米)",
						"id": "011"
					}, {
						"communityName": "二单元",
						"address": "运河城万佳广场(兴隆桥北街)",
						"id": "012"
					}, {
						"communityName": "三单元",
						"address": "万达华府",
						"id": "013"
					}, {
						"communityName": "四单元",
						"address": "万达华府",
						"id": "014"
					}, {
						"communityName": "五单元",
						"address": "万达华府",
						"id": "015"
					}, {
						"communityName": "六单元",
						"address": "万达华府",
						"id": "016"
					}],
					FJList: [{
						"communityName": "101",
						"address": "乐彩花园(新华路东100米)",
						"id": "021"
					}, {
						"communityName": "201",
						"address": "运河城万佳广场(兴隆桥北街)",
						"id": "022"
					}, {
						"communityName": "301",
						"address": "万达华府",
						"id": "023"
					}, {
						"communityName": "401",
						"address": "万达华府",
						"id": "024"
					}, {
						"communityName": "501",
						"address": "万达华府",
						"id": "025"
					}, {
						"communityName": "601",
						"address": "万达华府",
						"id": "026"
					}],


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

				},
				attributeLD() {
					return this.LDValue.communityName ? this.LDValue.communityName : "请选择楼栋"
				},
				attributeDY() {
					return this.DYValue.communityName ? this.DYValue.communityName : "请选择单元"
				},
				attributeFJ() {
					return this.FJValue.communityName ? this.FJValue.communityName : "请选择房间"
				}
			},
			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;
					} else if (this.type == 'ld') {
						this.LDValue = item;
					} else if (this.type == 'dy') {
						this.DYValue = item;
					} 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>