xafc.vue

<template>
	<view>


		<view class=""
			style="background-color: #fff;width: 96%;margin: 0 auto;box-sizing: border-box;padding: 10px 0;border-radius: 8px;">
			<view class="" style="display: flex;justify-content:space-around;align-items: center;flex-wrap: wrap;">
				<view class="lc" style="" v-for="(item,index) in list" :key="index" :class="tab==item?'ac':''"
					@click="change(item)">
					{{item}}幢
				</view>
				<view class="lc">
				</view>
				<view class="lc">
				</view>
				<view class="lc">
				</view>
				<view class="lc">
				</view>
			</view>


			<view class=""
				style="display: flex;align-items: center;font-size: 14px;font-weight: bold;justify-content: center;margin-top: 28px;">
				<view class="">
					预选楼房
				</view>
				<view class=""
					style="border-bottom: 1px solid #000;box-sizing: border-box;width: 22px;text-align: center;line-height: 14px;font-size: 14px;">
					{{tab}}
				</view>
				幢
				<view class=""
					style="border-bottom: 1px solid #000;box-sizing: border-box;width: 22px;text-align: center;line-height: 14px;font-size: 14px;">
					1
				</view>
				单元
				<view class="" style="">
					<input type="text" v-model="lc"
						style="width: 60px;border-bottom: 1px solid #000;box-sizing: border-box;line-height: 14px;font-size: 14px;"
						:disabled="pd" />
				</view>
				(101~2502)
			</view>
			<view class="" style="box-sizing: border-box;padding: 0 8px;color: red;margin-top: 10px;">
				注：1楼~25楼房号根据自身需求填写
			</view>
			<view class="" style="box-sizing: border-box;padding: 0 8px;color: red;">
				示例：每层楼为两梯两户业主 第一层101-102号第二层201-202号，依次排序到25楼2501-2502号
			</view>
			<view class=""
				style="display: flex;align-items: center;width: 80%;margin: 0 auto;border: 1px solid #ccc;border-radius:20px;text-indent: 15px;margin-top: 8px;">
				<view class="">
					业主姓名：
				</view>
				<input type="text" v-model="xm" placeholder="请输入姓名" style="height: 30px;" :disabled="pd" />
			</view>
			<view class=""
				style="display: flex;align-items: center;width: 80%;margin: 10px auto;border: 1px solid #ccc;border-radius:20px;text-indent: 15px;">
				<view class="">
					业主电话：
				</view>
				<input type="text" v-model="sjh" placeholder="请输入手机号" style="height: 30px;" :disabled="pd" />
			</view>
			<view class=""
				style="display: flex;align-items: center;width: 80%;margin: 0 auto;border: 1px solid #ccc;border-radius:20px;text-indent: 15px;">
				<view class="">
					身份证号：
				</view>
				<input type="text" v-model="sfz" placeholder="请输入身份证号码" style="height: 30px;" :disabled="pd" />
			</view>
		</view>

		<view class=""
			style="background-color:red;color: #fff;font-weight: bold;width: 85%;text-align: center;font-size: 18px;height: 35px;line-height: 35px;border-radius: 28px;margin: 20px auto;"
			@click="submit" v-if="xs<0">
			点击预选
		</view>
		<view class=""
			style="background-color: red;color: #fff;font-weight: bold;width: 85%;text-align: center;font-size: 18px;height: 35px;line-height: 35px;border-radius: 28px;margin: 20px auto;"
			v-if="xs==0">
			楼层房号预选中，请耐心等待
		</view>
		<view class=""
			style="background-color: red;color: #fff;font-weight: bold;width: 95%;text-align: center;font-size: 16px;height: 35px;line-height: 35px;border-radius: 28px;margin: 20px auto;"
			v-if="xs==1" @click="payshow=true">
			预选成功，请缴纳房产落户费500元
		</view>
		<view class=""
			style="background-color: red;color: #fff;font-weight: bold;width: 95%;text-align: center;font-size: 16px;border-radius: 8px;margin: 20px auto;box-sizing: border-box;padding: 15px;"
			v-if="xs==2">
			恭喜您的房产预选成功，已为您落户完毕，等待出发前往房产地区办理入住即可
		</view>
		<view class="">
			<Payup @close='payclose' :show="payshow" :url="urls" wechat="1" zfb="1" :mony=paymony :title="paytitle"
				:type="paytype" payway="0" :zfsm="paysm" btn="立即缴纳" :ysf="ysf">
			</Payup>
		</view>
	</view>
</template>

<script>
	import Payup from '@/components/payup/payup.vue'
	export default {
		components: {

			Payup,

		},
		data() {
			return {
				ysf: 0,

				paysm: '缴纳落户费后，所选的楼房将属于您的个人名下房产',
				paytitle: '房产落户费',
				paytype: 0,
				paymony: 500,
				urls: '/ops/daybook',
				payshow: false,
				xm: '',
				sfz: '',

				xs: -1,
				sjh: '',
				pd: false,
				tab: 1,
				lc: '',
				list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27,
					28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50
				]
			}
		},
		onShow() {
			this.$request("/system/config/configKey/use_bankcard", {}, "get", true).then(
				(res) => {

					this.ysf = res.data.msg

				}
			)
			this.$request("/system/xs/1").then(res => {
				if (res.data.data) {
					this.pd = true

					this.tab = res.data.data.mark
					this.lc = res.data.data.xsPhone
					this.sfz = res.data.data.xsId
					this.xm = res.data.data.userName
					this.sjh = res.data.data.userPhone
					// this.qz = res.data.data.mark
				}

				// console.log(res.data.data);
			})
			this.$request("/system/user/", {}, "get").then(res => {
				// this.sjh = res.data.userName
				if (res.data.xsCode || res.data.xsCode == 0) {
					this.xs = res.data.xsCode
				}
			})
		},
		methods: {
			payclose(i) {
				this.payshow = i
			},
			change(i) {
				if (!this.pd) {
					this.tab = i
				}

			},

			submit() {
				console.log();

				// if (this.lc.length <= 3) {

				// 	if (this.lc < 101 || this.lc.substr(-1) > 2 || this.lc.substr(-1) < 1 || this.lc.slice(-2, -1) != 0) {
				// 		uni.showToast({
				// 			title: '请输入正确房号',
				// 			icon: 'none'
				// 		})

				// 		return
				// 	}

				// }
				// if (this.lc.length > 3) {

				// 	if (this.lc < 101 || this.lc.substr(-1) > 2 || this.lc.substr(-1) < 1 || this.lc.slice(-2, -1) != 0 ||
				// 		this.lc
				// 		.substr(0, 2) > 25) {
				// 		uni.showToast({
				// 			title: '请输入正确房号',
				// 			icon: 'none'
				// 		})
				// 		return
				// 	}

				// }
				if (this.sjh === '' || this.lc === '' || this.tab === '' || this.xm === '' || this.sfz === '') {
					uni.showToast({
						title: '内容不能为空!',
						icon: 'none'
					})
					return
				}
				let data = {
					userPhone: this.sjh,
					userName: this.xm,
					xsId: this.sfz,

					xsPhone: this.lc,
					mark: this.tab
				}
				this.$request("/system/xs", data, "post").then(res => {
					if (res.data.code == 200) {
						uni.showToast({
							title: '提交成功',

						})

						this.$request("/system/user/", {}, "get").then((res) => {
							if (res.data.xsCode || res.data.xsCode == 0) {
								this.xs = res.data.xsCode
							}
						})
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}


					console.log(this.lc.slice(-2, -1));

				})

			}
		}
	}
</script>

<style lang="scss" scoped>
	.lc {
		background-image: linear-gradient(to top, #51d4cf 0%, #cff2f4 100%);
		width: 15%;
		text-align: center;
		border-radius: 3px;
		font-weight: bolder;
		margin-top: 6px;
		font-size: 12px;
	}

	.ac {
		color: #fff;
		background-image: linear-gradient(to top, #ea5a82 0%, #cc8392 100%);
	}
</style>