hxj/src/pages/index/binding/binding.vue

<template>
	<view>
		<view class="main-between cross-center lp">
			<view class="name">世龙广场</view>
			<image src="https://t17.9026.com/web/statics/image/index/arrow-down-bottom.png" mode=""></image>
		</view>
		<view class="form-box">
			<view class="title">楼盘信息</view>
			<view class="main-between cross-center item" @click="selectBuild">
				<view class="title_1">楼盘名称</view>
				<view class="main-right cross-center">
					<text class="pla">请选择</text>
					<image class="arrow-right" src="https://t17.9026.com/web/statics/image/index/arrow-right-gray.png" mode=""></image>
				</view>
			</view>
			<view class="line"></view>
			<picker mode="region" @change="bindPickerRegion">
				<view class="main-between cross-center item">
					<view class="title_1">区域信息</view>
					<view class="main-right cross-center">
						<text :class="{'val':region!=='请选择','pla':region==='请选择'}">{{region}}</text>
						<image class="arrow-right" src="https://t17.9026.com/web/statics/image/index/arrow-right-gray.png" mode="">
						</image>
					</view>
				</view>
			</picker>
			<view class="line"></view>
			<picker mode="selector" @change="bindPickerNature" :range="natureList">
				<view class="main-between cross-center item">
					<view class="title_1">楼盘性质</view>
					<view class="main-right cross-center">
						<text :class="{'val':nature!=='请选择','pla':nature==='请选择'}">{{nature}}</text>
						<image class="arrow-right" src="https://t17.9026.com/web/statics/image/index/arrow-right-gray.png" mode="">
						</image>
					</view>
				</view>
			</picker>
			<view class="line"></view>
			<view class="main-between cross-center item" @click="selectSale">
				<view class="title_1">绑定销售</view>
				<view class="main-right cross-center" >
					<text class="pla">请选择</text>
					<image class="arrow-right" src="https://t17.9026.com/web/statics/image/index/arrow-right-gray.png" mode=""></image>
				</view>
			</view>
		</view>
		<button type="default" :class="{'add':true, 'allow-add':true, 'not-add':false}" :disabled="fasle">添加楼盘</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				region: '请选择',
				nature: '请选择',

				natureList: ['住宅用房', '非住宅用房']
			};
		},
		methods: {
			selectBuild() {
				uni.navigateTo({
					url: '/pages/sale/properties/addProperties'
				})
			},
			selectSale() {
				uni.navigateTo({
					url: '/pages/index/binding/bindingSale'
				})
			},
			bindPickerRegion(e) {
				console.log('地区',e)
				this.region = e.target.value.join('')
			},
			bindPickerNature(e) {
				this.nature = this.natureList[e.target.value]
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		min-height: 100vh;
		background: #F8F8F8;
		padding-top: 21rpx;
	}

	.lp {
		width: 678rpx;
		height: 100rpx;
		background: #FFFFFF;
		border-radius: 6rpx;
		padding: 0 43rpx 0 34rpx;
		margin: 0 auto;

		.name {
			font-size: 32rpx;
			font-weight: bold;
			color: #000000;
		}

		image {
			width: 18rpx;
			height: 11rpx;
		}
	}

	.form-box {
		width: 678rpx;
		height: auto;
		background: #FFFFFF;
		border-radius: 6rpx;
		margin: 21rpx auto;

		.title {
			font-size: 32rpx;
			font-weight: bold;
			color: #000000;
			border-bottom: 1rpx solid #E4E2E2;
			height: 99rpx;
			padding-left: 34rpx;
			line-height: 99rpx;
		}

		.item {
			height: 89rpx;
			padding: 0 32rpx 0 30rpx;
		}

		.title_1 {
			font-size: 28rpx;
			font-weight: bold;
			color: #000000;
		}

		.pla {
			font-size: 28rpx;
			font-weight: 500;
			color: #999999;
			margin-right: 20rpx;
		}

		.val {
			font-size: 28rpx;
			font-weight: 500;
			color: #232323;
			margin-right: 20rpx;
		}
	}

	.add {
		width: 678rpx;
		height: 90rpx;
		border-radius: 6rpx;
		margin: 0 auto;
		font-size: 32rpx;
		font-weight: bold;
		color: #FFFFFF;
	}

	.allow-add {
		background: #A18353;
	}

	.not-add {
		background-color: #bab994;
	}

	.line {
		width: 618rpx;
		height: 1rpx;
		background-color: #EAEAEA;
		margin: 0 auto;
	}

	.arrow-right {
		width: 12.8rpx;
		height: 22.8rpx;
	}
</style>