fangtanhua/pages/baobei/baobei.vue

<template>
	<view class="baobei">
		<u-navbar :title="config.store_title" title-color="#fff" :background="{background:'#1F7EFF'}" :border-bottom="false" :isBack="false">
			<view class="u-flex nav-left" slot="left">
				<u-icon name="map-fill" size="34" color="#fff"></u-icon>
				<text class="text">{{city || '定位中'}}</text>
			</view>
		</u-navbar>
		<view class="" style="padding: 0 24rpx;">
			<view class="broker-title">
				基本信息
			</view>
			<view class="broker-row u-flex" @click="quyushow = true">
				<view class="broker-row-left u-flex">
					<text>意向区域</text>
					<!-- <text>*</text> -->
				</view>
				<input type="text" placeholder="请选择您的意向区域" class="input-right" :disabled="true" v-model="quyuname">
				<u-icon name="arrow-right" color="#CCCCCC"></u-icon>
			</view>
			<view class="broker-row u-flex" @click="loupanshow = true">
				<view class="broker-row-left u-flex">
					<text>意向项目</text>
				</view>
				<input type="text" placeholder="请选择您的意向楼盘" class="input-right" :disabled="true" v-model="loupanname">
				<u-icon name="arrow-right" color="#CCCCCC"></u-icon>
			</view>
			<view class="broker-row u-flex">
				<view class="broker-row-left u-flex">
					<text>客户姓名</text>
					<!-- <text>*</text> -->
				</view>
				<input type="text" placeholder="请输入" class="input-right" v-model="kehuname">
			</view>
			<view class="broker-row u-flex">
				<view class="broker-row-left u-flex">
					<text>联系方式</text>
					<!-- <text>*</text> -->
				</view>
				<input type="number" placeholder="请输入" class="input-right" v-model="kehutel">
			</view>
		</view>
		<u-gap bg-color="#F5F5F5" height="20"></u-gap>
		<view class="" style="padding: 0 24rpx;">
			<view class="broker-title">
				其他信息
			</view>
			<view class="broker-row u-flex">
				<view class="broker-row-left u-flex">
					<text>带看人姓名</text>
					<!-- <text>*</text> -->
				</view>
				<input type="text" placeholder="请输入" class="input-right" v-model="name">
			</view>
			<view class="broker-row u-flex">
				<view class="broker-row-left u-flex">
					<text>联系方式</text>
					<!-- <text>*</text> -->
				</view>
				<input type="number" placeholder="请输入" class="input-right" v-model="tel">
			</view>
			<view class="broker-row u-flex" v-if="certification_type == 1">
				<view class="broker-row-left u-flex">
					<text>中介门店</text>
				</view>
				<input type="text" placeholder="请输入" class="input-right" v-model="shop">
			</view>
			<view class="broker-row u-flex">
				<view class="broker-row-left u-flex">
					<text>预约看房日期</text>
				</view>
				<biaofunDatetimePicker ref="biaofunDatetimePicker" placeholder="请选择看房日期" class="input-right" :start="$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd hh:MM')" @change="changetime"></biaofunDatetimePicker>
				<!-- <input type="text" placeholder="请选择看房日期" class="input-right" :disabled="true" v-model="time"> -->
				<u-icon name="arrow-right" color="#CCCCCC"></u-icon>
			</view>
		</view>
		<view class="baobei-down u-flex-col u-col-center">
			<view class="xieyi u-flex u-row-center">
				<u-checkbox v-model="xieyi" active-color="#1F7EFF" size="26"></u-checkbox>
				<view class="text" @click="xieyi = !xieyi">
					勾选并同意<text @click.stop="totext(3)">《报备活动规则》</text>
				</view>
			</view>
			<view class="tijiao" @click="save">
				确认
			</view>
		</view>
		<u-popup v-model="show" :maskCloseAble="false" mode="center" border-radius="20">
			<view class="baobei-popup u-flex-col u-col-center">
				<image src="../../static/images/baobei-img.png" class="image" mode=""></image>
				<view class="baobei-tips u-flex-col u-col-center">
					<text>您还未进行信息认证</text>
					<text>请您前去认证</text>
				</view>
				<view class="baobei-btn u-flex u-row-center">
					<!-- <text @click="toshenqing(1)">全民经纪人</text> -->
					<text @click="toshenqing(2)">中介经纪人</text>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="showover" :closeable="true" mode="center" border-radius="20">
			<view class="over-popup u-flex-col u-col-center u-row-center">
				<u-icon name="checkmark-circle-fill" color="#14CB30" size="168"></u-icon>
				<view class="over-text u-flex-col u-col-center">
					<text>已提交客户资料，开发商审核中</text>
					<text>防截客锁定中，请耐心等待</text>
				</view>
			</view>
		</u-popup>
		<u-select v-model="quyushow" :list="quyulist" label-name="name" value-name="id" @confirm="changequyu"></u-select>
		<u-select v-model="loupanshow" :list="loupanlist" label-name="name" value-name="id" @confirm="changeloupan"></u-select>
	</view>
</template>

<script>
	import { mapState } from "vuex"
	import biaofunDatetimePicker from "../../components/biaofun-datetime-picker/biaofun-datetime-picker.vue"
	export default {
		data() {
			return {
				show: false,
				xieyi: false,
				showover: false,

				quyulist: [],
				quyushow: false,
				quyuname: '',
				quyuid: '',

				loupanlist: [],
				loupanshow: false,
				loupanname: '',
				loupanid: '',

				kehuname: '',
				kehutel: '',
				name: '',
				tel: '',
				shop: '',
				time: '',
				certification_type:''
			}
		},
		onLoad() {
			this.getquyu()
		},
		onShow() {
			uni.setNavigationBarTitle({
				title: this.config.store_title
			})
			if (this.$islogin()) {
				this.show = true
			} else {
				this.getuser()
			}
		},
		computed: {
			...mapState(['config','city'])
		},
		components: {
			biaofunDatetimePicker
		},
		methods: {
			totext(type){
				uni.navigateTo({
					url:"/pages/mine/xieyi?type=" + type
				})
			},
			save() {
				if (!this.quyuname) {
					this.$u.toast('请选择您的意向区域')
					return
				}
				if (!this.loupanname) {
					this.$u.toast('请选择您的意向楼盘')
					return
				}
				if (!this.kehuname) {
					this.$u.toast('请输入客户姓名')
					return
				}
				if (!this.$u.test.mobile(this.kehutel)) {
					this.$u.toast('请输入正确的客户联系方式')
					return
				}
				if (!this.name) {
					this.$u.toast('请输入带看人姓名')
					return
				}
				if (!this.$u.test.mobile(this.tel)) {
					this.$u.toast('请输入正确的带看人联系方式')
					return
				}
				if (!this.shop && this.certification_type == 1) {
					this.$u.toast('请输入中介门店')
					return
				}
				if (!this.time) {
					this.$u.toast('请选择看房日期')
					return
				}
				if (this.time < this.$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd hh:MM:ss')) {
					this.$u.toast('看房日期不得小于当前时间')
					return
				}
				if (!this.xieyi) {
					this.$u.toast("请勾选协议")
					return
				}
				this.$u.post('/api/Report/submit_report', {
					area_id: this.quyuid,
					property_id: this.loupanid,
					client_name: this.kehuname,
					client_phone: this.kehutel,
					report_name: this.name,
					report_phone: this.tel,
					shop: this.shop,
					time: this.time
				}).then(res => {
					if (res.code == 1) {
						this.showover = true
						this.quyuid = ''
						this.quyuname = ''
						this.loupanid = ''
						this.loupanname = ''
						this.kehuname = ''
						this.kehutel = ''
						this.name = ''
						this.tel = ''
						this.shop = ''
						this.time = ''
						this.xieyi = false
						this.$refs.biaofunDatetimePicker.clearTime()
					} else {
						this.$u.toast(res.msg)
					}
				})
			},
			changetime(e) {
				this.time = `${e.f1} ${e.f8}:00`
			},
			changeloupan(e) {
				this.loupanid = e[0].value
				this.loupanname = e[0].label
			},
			changequyu(e) {
				this.quyuid = e[0].value
				this.quyuname = e[0].label
				this.$u.post('/api/Report/area_property_list', {
					area_id: this.quyuid
				}).then(res => {
					this.loupanlist = res.data
				})
			},
			getquyu() {
				this.$u.post('/api/Index/area_list').then(res => {
					this.quyulist = res.data
				})
			},
			toshenqing(type) {
				if (this.$islogin()) return
				uni.navigateTo({
					url: "/pages/index/broker?type=" + type
				})
			},
			getuser() {
				uni.showLoading({
					mask: true,
					title: "请稍后"
				})
				this.$u.post('/api/Member/member_info').then(res => {
					this.certification_type = res.data.certification_type
					if (res.data.certification_type == 0) {
						this.show = true
					} else {
						this.show = false
					}
				})
			}
		}
	}

</script>

<style lang="scss">
	.baobei {
		.over-popup {
			width: 650rpx;
			height: 564rpx;
			background: #FFFFFF;
			border-radius: 20rpx;

			.over-text {
				margin-top: 32rpx;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
			}
		}

		.baobei-down {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 750rpx;

			.tijiao {
				margin: 30rpx auto;
				width: 702rpx;
				line-height: 82rpx;
				background: #1F7EFF;
				border-radius: 8rpx;
				text-align: center;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			}

			.xieyi {
				.text {
					font-size: 20rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;

					text {
						color: #1F7EFF;
					}
				}
			}
		}

		.broker-row {
			height: 82rpx;
			border-bottom: 2rpx solid #F5F5F5;

			.input-right {
				flex: 1;
				font-size: 24rpx;
			}

			.broker-row-left {
				width: 252rpx;

				text:first-child {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
				}

				text:nth-child(2) {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #F83838;
				}
			}
		}

		.broker-title {
			padding: 24rpx 0;
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
		}

		.baobei-popup {
			width: 650rpx;
			height: 806rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			padding-top: 126rpx;

			.baobei-btn {
				width: 100%;
				padding: 0 44rpx;

				text:first-child {
					width: 262rpx;
					line-height: 100rpx;
					background: #FFA120;
					border-radius: 20rpx;
					text-align: center;
					font-size: 34rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
				}

				text:last-child {
					width: 262rpx;
					line-height: 100rpx;
					background: #1F7EFF;
					border-radius: 20rpx;
					text-align: center;
					font-size: 34rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
				}
			}

			.baobei-tips {
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #C5C5C5;
				margin-bottom: 98rpx;
			}

			.image {
				width: 214rpx;
				height: 242rpx;
				margin-bottom: 72rpx;
			}
		}

		.nav-left {
			padding: 0 20rpx;

			.text {
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				margin-left: 5rpx;
			}
		}
	}

</style>