uniapp 合同 from表单模版

已于 2023-11-16 16:40:54 修改
阅读量184 收藏
点赞数
文章标签： uni-app java 前端
于 2023-11-16 13:30:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_59727199/article/details/134439743
版权 
<template>
	<view class="wrap">
		<!-- <view style="width: 750rpx;height: 20rpx;background-color: aliceblue;"> -->
		<!-- </view> -->
		<form @submit="formSubmit" @reset="formReset">
			<view class="form_item_h">
				<view class="h">
					合同签约
				</view>
			</view>
			<view class="form_item">
				<view class="label">
					<text class="label_text"></text><text>门店名称</text>
				</view>
				<view class="input">
					{{deptName}}
				</view>
			</view>
			<view class="form_item">
				<view class="label">
					<text class="label_text"></text><text>户型类型</text>
				</view>
				<view class="input">
					{{modelName}}
				</view>
			</view>
			<view class="form_item">
				<view class="label">
					<text class="label_text"></text><text>房源号</text>
				</view>
				<view class="input">
					{{roomNum}}
				</view>
			</view>
			<view class="form_item">
				<view class="label">
					<text class="label_text"></text><text>租金</text>
				</view>
				<view class="input" style="color: #ff5a00;">
					{{mon}}
				</view>
			</view>

			<!-- 	<view class="form_item">
				<view class="label">
					<text class="label_text"></text><text>押金</text>
				</view>
				<picker class="input" :value="payTypeIndex" :range="payType" @change="payTypePciker">
					<view v-if="payTypeIndex==''">
						请选择租赁时长
					</view>
					<view v-else>
						{{payType[payTypeIndex]}}
					</view>
				</picker>
			</view> -->

			<!-- 	<view class="form_item">
				<view class="label">
					<text class="label_text">*</text><text>缴纳类型</text>
				</view>
				<picker class="input" :value="payTypeIndex" :range="payType" @change="payTypePciker">
					<view v-if="payTypeIndex==''">
						请选择缴纳类型
					</view>
					<view v-else>
						{{payType[payTypeIndex]}}
					</view>
				</picker>
			</view> -->
			<view class="form_item">
				<view class="label">
					<text class="label_text">*</text><text>主体</text>
				</view>
				<picker class="input" :value="entityIndex" :range="entity" @change="entityPciker">
					<!-- <view v-if="entityIndex==''">
						请选择主体
					</view>
					<view v-else> -->
					<view>
						{{entity[entityIndex]}}
					</view>
				</picker>
			</view>

			<view class="form_item">
				<view class="label">
					<text class="label_text">*</text><text>合同生效日期</text>
				</view>
				<picker class="input" mode="date" :value="date" :start="startDate" :end="endDate"
					@change="bindDateChange">
					<view v-if="date==''" style="color: #AAACAB;">
						请选择合同生效日期
					</view>
					<view v-else>
						{{date}}
					</view>
				</picker>
			</view>

			<view class="form_item">
				<view class="label">
					<text class="label_text">*</text><text>租赁时长</text>
				</view>
				<picker class="input" :value="timeIndex" :range="time" :range-key="'dictLabel'" @change="timePciker">
					<!-- <picker class="input" :value="timeIndex" :range="time" @change="timePciker"> -->
					<view v-if="timeIndex==''" style="color: #AAACAB;">
						请选择租赁时长
					</view>
					<view v-else>
						{{time[timeIndex].dictLabel}}
					</view>
				</picker>
			</view>

			<view class="form_item" v-if="timeIndex!=''&&date!=''">
				<view class="label">
					<text class="label_text"></text><text>合同结束日期</text>
				</view>
				<view class="input">
					{{all.endTime}}
				</view>
			</view>
			<view class="form_item" v-if="timeIndex!=''&&date!=''">
				<view class="label">
					<text class="label_text"></text><text>押金</text>
				</view>
				<view class="input" style="color: #ff5a00;">
					{{all.contractDeposit}}
				</view>
			</view>
			<view class="form_item" v-if="timeIndex!=''&&date!=''">
				<view class="label">
					<text class="label_text"></text><text>租赁总额</text>
				</view>
				<view class="input" style="color: #ff5a00;">
					{{all.rentalAmount}}
				</view>
			</view>

			<view class="form_item">
				<view class="label">
					<text class="label_text">*</text><text>缴纳方式</text>
				</view>
				<picker class="input" :value="payIndex" :range="pay" :range-key="'dictLabel'" @change="payPciker">
					<view v-if="payIndex==''" style="color: #AAACAB;">
						请选择缴纳方式
					</view>
					<view v-else>
						{{pay[payIndex].dictLabel}}
					</view>
				</picker>
			</view>

			<!-- <view class="form_item_logo" v-if="entityIndex==1">
				<view class="label">
					<text class="label_text">*</text><text>主体证明</text>
				</view>
				<view v-if="logo == ''" class="input flex" @click="upload">
					<view>
						请上传主体证明照片
					</view>
					<image class="flex_logo" src="/static/arrow_right.png">
					</image>
				</view>
			</view> -->
			<view v-if="entityIndex==1">
				<view class="from_file" style="border: none;">
					<view class="label">
						<text class="label_text">*</text><text>营业执照</text>
					</view>
				</view>
				<uni-file-picker class="file" v-model="entityFile" fileMediatype="image" limit="1" mode="grid"
					@select="entitySelect" @progress="entityProgress" @success="entitySuccess" @fail="entityFail"
					@delete="entityDel" />
			</view>

			<view class="form_item" v-if="entityIndex==1">
				<view class="label">
					<text class="label_text">*</text><text>单位名称</text>
				</view>
				<input type="text" placeholder-class="font_size" placeholder="请输入单位名称" v-model="enterpriseName">
			</view>

			<view class="form_item" v-if="entityIndex==1">
				<view class="label">
					<text class="label_text">*</text><text>单位地址</text>
				</view>
				<input type="text" placeholder-class="font_size" placeholder="请输入单位地址" v-model="enterpriseAddress">
			</view>

			<!-- 	<view class="form_item" v-if="entityIndex==1">
				<view class="label">
					<text class="label_text">*</text><text>企业代码</text>
				</view>
				<input type="text" placeholder-class="font_size" placeholder="请输入单位代码" v-model="enterpriseCode">
			</view> -->

			<view class="form_item" v-if="entityIndex==1">
				<view class="label">
					<text class="label_text">*</text><text>开户行</text>
				</view>
				<input type="text" placeholder-class="font_size" placeholder="请输入单位开户行" v-model="bankAddress">
			</view>
			<view class="form_item" v-if="entityIndex==1">
				<view class="label">
					<text class="label_text">*</text><text>账号</text>
				</view>
				<input type="text" placeholder-class="font_size" placeholder="请输入单位对公账号" v-model="bank">
			</view>
			<view class="form_item" v-if="entityIndex==1">
				<view class="label">
					<text class="label_text">*</text><text>税号</text>
				</view>
				<input type="text" placeholder-class="font_size" placeholder="请输入单位税号" v-model="validCode">
			</view>

			<!-- 	<view class="form_item_logo">
				<view class="label">
					<text class="label_text">*</text><text>银行卡照片</text>
				</view>
				<view v-if="logo == ''" class="input flex" @click="upload">
					<view>
						请上传银行卡照片
					</view>
					<image class="flex_logo" src="/static/arrow_right.png">
					</image>
				</view>
			
				<image v-else class="logo" :src="utils.imgUrl(list.image)" @click="upload"></image>
			</view> -->

			<view class="from_file" style="border: none;" v-if="entityIndex==0">
				<view class="label">
					<text class="label_text">*</text><text>身份证正面</text>
				</view>
			</view>
			<uni-file-picker class="file" v-if="entityIndex==0" v-model="idFrontFile" fileMediatype="image" limit="1"
				mode="grid" @select="idFrontSelect" @progress="idFrontProgress" @success="idFrontSuccess"
				@fail="idFrontFail" @delete="idFrontDel" />

			<view class="from_file" style="border: none;" v-if="entityIndex==0">
				<view class="label">
					<text class="label_text">*</text><text>身份证反面</text>
				</view>
			</view>
			<uni-file-picker class="file" v-if="entityIndex==0" v-model="idOppositeFile" fileMediatype="image" limit="1"
				mode="grid" @select="idOppositeSelect" @progress="idOppositeProgress" @success="idOppositeSuccess"
				@fail="idFail" @delete="idDel" />

			<view class="form_item" v-if="entityIndex==0">
				<view class="label">
					<text class="label_text">*</text><text>身份证</text>
				</view>
				<input type="text" placeholder-class="font_size" placeholder="请输入身份证" v-model="id">
			</view>

			<view class="form_item" v-if="entityIndex==0">
				<view class="label">
					<text class="label_text">*</text><text>姓名</text>
				</view>
				<input type="text" placeholder-class="font_size" placeholder="请输入姓名" v-model="name">
			</view>

			<view class="form_item" v-if="entityIndex==0">
				<view class="label">
					<text class="label_text">*</text><text>户籍所在地</text>
				</view>
				<input type="text" placeholder-class="font_size" placeholder="请输入户籍所在地" v-model="address">
			</view>

			<view class="form_item">
				<view class="label">
					<text class="label_text">*</text><text>联系电话</text>
				</view>
				<input type="text" placeholder-class="font_size" placeholder="请输入联系电话" v-model="phoneNum">
			</view>
			<!-- <view class="form_item">
				<view class="label">
					<text class="label_text">*</text><text>收件人</text>
				</view>
				<input type="text" placeholder-class="font_size" placeholder="请输入收件人" v-model="list.address">
			</view> -->



			<!-- 	<view class="form_item">
				<view class="label">
					<text class="label_text"></text><text>企业宣传语</text>
				</view>
				<input type="text" placeholder-class="font_size" placeholder="请输入企业宣传语" v-model="list.propaganda">
			</view> -->
			<!-- <view class="form_item">
				<view class="label">
					<text class="label_text"></text><text>企业网址</text>
				</view>
				<input type="text" placeholder-class="font_size" placeholder="请输入企业网址" v-model="list.website">
			</view> -->

			<!-- <view class="form_item">
				<view class="label">
					<text class="label_text">*</text><text>紧急联系人</text>
				</view>
				<input type="text" placeholder-class="font_size" placeholder="请输入紧急联系人" v-model="emergencyContact">
			</view>

			<view class="form_item">
				<view class="label">
					<text class="label_text">*</text><text>紧急联系电话</text>
				</view>
				<input type="text" placeholder-class="font_size" placeholder="请输入紧急联系电话" v-model="emergencyTel">
			</view> -->

			<view class="form_item" v-if="entityIndex==0">
				<view class="label">
					<text class="label_text"></text><text>个人邮箱</text>
				</view>
				<input type="text" placeholder-class="font_size" placeholder="请输入个人邮箱" v-model="mailbox">
			</view>
			<view v-if="entityIndex==1">
				<view class="from_file" style="border: none;">
					<view class="label">
						<text class="label_text">*</text><text>法人身份证正面</text>
					</view>
				</view>
				<uni-file-picker class="file" v-model="fridFrontFile" fileMediatype="image" limit="1" mode="grid"
					@select="fridFrontSelect" @progress="fridFrontProgress" @success="fridFrontSuccess"
					@fail="fridFrontFail" @delete="fridFrontDel" />
			</view>
			<view v-if="entityIndex==1">
				<view class="from_file" style="border: none;">
					<view class="label">
						<text class="label_text">*</text><text>法人身份证反面</text>
					</view>
				</view>
				<uni-file-picker class="file" v-model="fridOppositeFile" fileMediatype="image" limit="1" mode="grid"
					@select="fridOppositeSelect" @progress="fridOppositeProgress" @success="fridOppositeSuccess"
					@fail="fridOppositeFail" @delete="fridOppositeDel" />
			</view>
			<view class="form_item" v-if="entityIndex==1">
				<view class="label">
					<text class="label_text">*</text><text>法人身份证</text>
				</view>
				<input type="text" placeholder-class="font_size" placeholder="请输入法人身份证" v-model="frid">
			</view>

			<view class="form_item" v-if="entityIndex==1">
				<view class="label">
					<text class="label_text">*</text><text>法人姓名</text>
				</view>
				<input type="text" placeholder-class="font_size" placeholder="请输入法人姓名" v-model="frname">
			</view>

			<view class="form_item" v-if="entityIndex==1">
				<view class="label">
					<text class="label_text">*</text><text>法人户籍所在地</text>
				</view>
				<input type="text" placeholder-class="font_size" placeholder="请输入法人户籍所在地" v-model="fraddress">
			</view>

			<!-- 承租人 -->
			<view class="form_item_h" v-if="entityIndex==1">
				<view class="h">
					承租人信息
				</view>
			</view>
			<view v-if="entityIndex==1">
				<view class="from_file" style="border: none;">
					<view class="label">
						<text class="label_text">*</text><text>承租人身份证正面</text>
					</view>
				</view>
				<uni-file-picker class="file" v-model="czridFrontFile" fileMediatype="image" limit="1" mode="grid"
					@select="czridFrontFileSelect" @progress="czridFrontFileProgress" @success="czridFrontFileSuccess"
					@fail="czridFrontFileFail" @delete="czridFrontFileDel" />
			</view>
			<view v-if="entityIndex==1">
				<view class="from_file" style="border: none;">
					<view class="label">
						<text class="label_text">*</text><text>承租人身份证反面</text>
					</view>
				</view>
				<uni-file-picker class="file" v-model="czridOppositeFile" fileMediatype="image" limit="1" mode="grid"
					@select="czridOppositeSelect" @progress="czridOppositeProgress" @success="czridOppositeSuccess"
					@fail="czridOppositeFail" @delete="czridOppositeDel" />
			</view>
			<view class="form_item" v-if="entityIndex==1">
				<view class="label">
					<text class="label_text">*</text><text>姓名</text>
				</view>
				<input type="text" placeholder-class="font_size" placeholder="请输入承租人姓名" v-model="czrtogetherName">
			</view>
			<view class="form_item" v-if="entityIndex==1">
				<view class="label">
					<text class="label_text">*</text><text>身份证</text>
				</view>
				<input type="text" placeholder-class="font_size" placeholder="请输入承租人身份证" v-model="czrtogetherNum">
			</view><!-- 授权委托书 -->
			<view v-if="entityIndex==1">
				<view class="from_file" style="border: none;">
					<view class="label">
						<text class="label_text">*</text><text>授权委托书</text>
					</view>
				</view>
				<uni-file-picker class="file" v-model="sqwtFile" fileMediatype="image" limit="1" mode="grid"
					@select="sqwtSelect" @progress="sqwtProgress" @success="sqwtSuccess" @fail="sqwtFail"
					@delete="sqwtDel" />
			</view>



			<!-- 同住人信息 -->
			<view class="form_item_h" v-if="entityIndex==0">
				<view class="h">
					同住人信息
				</view>
			</view>
			<view v-if="entityIndex==0">
				<view class="from_file" style="border: none;">
					<view class="label">
						<text class="label_text"></text><text>同住人身份证正面</text>
					</view>
				</view>
				<uni-file-picker class="file" v-model="tzridFrontFile" fileMediatype="image" limit="1" mode="grid"
					@select="tzridFrontFileSelect" @progress="tzridFrontFileProgress" @success="tzridFrontFileSuccess"
					@fail="tzridFrontFileFail" @delete="tzridFrontFileDel" />
			</view>
			<view v-if="entityIndex==0">
				<view class="from_file" style="border: none;">
					<view class="label">
						<text class="label_text"></text><text>同住人身份证反面</text>
					</view>
				</view>
				<uni-file-picker class="file" v-model="tzridOppositeFile" fileMediatype="image" limit="1" mode="grid"
					@select="tzridOppositeSelect" @progress="tzridOppositeProgress" @success="tzridOppositeSuccess"
					@fail="tzridOppositeFail" @delete="tzridOppositeDel" />
			</view>
			<view class="form_item" v-if="entityIndex==0">
				<view class="label">
					<text class="label_text"></text><text>姓名</text>
				</view>
				<input type="text" placeholder-class="font_size" placeholder="请输入同住人姓名" v-model="togetherName">
			</view>
			<view class="form_item" v-if="entityIndex==0">
				<view class="label">
					<text class="label_text"></text><text>身份证</text>
				</view>
				<input type="text" placeholder-class="font_size" placeholder="请输入同住人身份证" v-model="togetherNum">
			</view>


			<button id="submit" @click="submit">提交保存</button>
		</form>
		<view style="width: 750rpx;height: 30rpx;">
		</view>
	</view>
</template>

<script module="utils" lang="wxs" src="../../utils/imgSrc.wxs"></script>

<script>
	import config from '../../config.js';

	import {
		throttle
	} from "@/utils/throttle.js"

	export default {
		data() {
			return {
				deptName: uni.getStorageSync('deptName'),
				modelName: uni.getStorageSync('modelName'),
				roomNum: uni.getStorageSync('roomNum'),
				mon: uni.getStorageSync('mon'),

				all: '',

				// 合同生效日期
				date: '',
				startDate: '',
				endDate: '',

				sex: ['男', '女'],
				sexIndex: '',
				entity: ['个人', '单位'],
				entityIndex: 0,
				pay: [],
				payIndex: '',
				payType: ['线上', '线下'],
				payTypeIndex: '',
				time: [],
				timeIndex: '',

				entityFile: [],
				sqwtFile: [],
				idFrontFile: [],
				tzridFrontFile: [],
				czridFrontFile: [],
				fridFrontFile: [],

				idOppositeFile: [],
				tzridOppositeFile: [],
				czridOppositeFile: [],
				fridOppositeFile: [],

				idFrontFileUrl: '',
				tzridFrontFileUrl: '',
				czridFrontFileUrl: '',
				fridFrontFileUrl: '',
				sqwtFileUrl: '',

				idOppositeFileUrl: '',
				tzridOppositeFileUrl: '',
				czridOppositeFileUrl: '',
				fridOppositeFileUrl: '',

				enterpriseName: '',
				// enterpriseCode: '',
				bank: '',
				bankAddress: '',
				validCode: '',
				enterpriseAddress: '',

				cardBirth: '',
				frBirth: '',
				name: '',
				frname: '',
				id: '',
				frid: '',
				address: '',
				fraddress: '',
				phoneNum: '',
				emergencyContact: '',
				emergencyTel: '',
				mailbox: '',

				togetherNum: '',
				togetherName: '',

				czrtogetherNum: '',
				czrtogetherName: '',

				entityFileUrl: '',
			};
		},
		methods: {
			payArray() {
				this.api.get('system/dict/data/list?pageNum=1&pageSize=50&dictType=contract_type', '').then(res => {
					if (res.data.code == 200) {
						this.pay = res.data.rows
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							duration: 1500
						});
					}
				})
			},

			timeArray() {
				this.api.get('system/dict/data/list?pageNum=1&pageSize=50&dictType=yuefen', '').then(res => {
					if (res.data.code == 200) {
						this.time = res.data.rows
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							duration: 1500
						});
					}
				})
			},

			maskClick(e) {
				console.log('maskClick事件:', e);
			},
			
			submit: throttle(function() {
				// null
				// if 
				// (this.entityIndex >=0 ) {
				// 	uni.showToast({
				// 		title: '请选择主体',
				// 		icon: 'none',
				// 		duration: 1500
				// 	});
				// } else
				if (this.date == '') {
					uni.showToast({
						title: '请选择合同生效日期',
						icon: 'none',
						duration: 1500
					});
				} else if (this.timeIndex == '') {
					uni.showToast({
						title: '请选择租赁时长',
						icon: 'none',
						duration: 1500
					});
				}
				// else if (this.payTypeIndex == '') {
				// 	uni.showToast({
				// 		title: '请选择缴纳类型',
				// 		icon: 'none',
				// 		duration: 1500
				// 	});
				// }
				else if (this.payIndex == '') {
					uni.showToast({
						title: '请选择缴纳方式',
						icon: 'none',
						duration: 1500
					});
				} else if (this.entityFileUrl == '' && this.entityIndex == 1) {
					uni.showToast({
						title: '请上传营业执照',
						icon: 'none',
						duration: 1500
					});
				} else if (this.enterpriseName == '' && this.entityIndex == 1) {
					uni.showToast({
						title: '请输入单位名称',
						icon: 'none',
						duration: 1500
					});
				} else if (this.enterpriseAddress == '' && this.entityIndex == 1) {
					uni.showToast({
						title: '请输入单位所在地',
						icon: 'none',
						duration: 1500
					});
				} else if (this.bankAddress == '' && this.entityIndex == 1) {
					uni.showToast({
						title: '请输入开户行',
						icon: 'none',
						duration: 1500
					});
				} else if (this.bank == '' && this.entityIndex == 1) {
					uni.showToast({
						title: '请输入对公账号',
						icon: 'none',
						duration: 1500
					});
				} else if (this.validCode == '' && this.entityIndex == 1) {
					uni.showToast({
						title: '请输入税号',
						icon: 'none',
						duration: 1500
					});
				} else if (this.idFrontFileUrl == '' && this.entityIndex == 0) {
					uni.showToast({
						title: '请上传身份证正面',
						icon: 'none',
						duration: 1500
					});
				} else if (this.idOppositeFileUrl == '' && this.entityIndex == 0) {
					uni.showToast({
						title: '请上传身份证反面',
						icon: 'none',
						duration: 1500
					});
				} else if (this.id == '' && this.entityIndex == 0) {
					uni.showToast({
						title: '请输入身份证',
						icon: 'none',
						duration: 1500
					});
				} else if (this.name == '' && this.entityIndex == 0) {
					uni.showToast({
						title: '请输入姓名',
						icon: 'none',
						duration: 1500
					});
				} else if (this.address == '' && this.entityIndex == 0) {
					uni.showToast({
						title: '请输入户籍所在地',
						icon: 'none',
						duration: 1500
					});
				} else if (this.phoneNum == '') {
					uni.showToast({
						title: '请输入联系电话',
						icon: 'none',
						duration: 1500
					});
				} else if (this.fridFrontFileUrl == '' && this.entityIndex == 1) {
					uni.showToast({
						title: '请上传法人身份证正面',
						icon: 'none',
						duration: 1500
					});
				} else if (this.fridOppositeFileUrl == '' && this.entityIndex == 1) {
					uni.showToast({
						title: '请上传法人身份证反面',
						icon: 'none',
						duration: 1500
					});
				} else if (this.frid == '' && this.entityIndex == 1) {
					uni.showToast({
						title: '请输入法人身份证',
						icon: 'none',
						duration: 1500
					});
				} else if (this.frname == '' && this.entityIndex == 1) {
					uni.showToast({
						title: '请输入法人姓名',
						icon: 'none',
						duration: 1500
					});
				} else if (this.fraddress == '' && this.entityIndex == 1) {
					uni.showToast({
						title: '请输入法人户籍所在地',
						icon: 'none',
						duration: 1500
					});
				} else if (this.czridFrontFileUrl == '' && this.entityIndex == 1) {
					uni.showToast({
						title: '请上传承租人身份证正面',
						icon: 'none',
						duration: 1500
					});
				} else if (this.czridOppositeFileUrl == '' && this.entityIndex == 1) {
					uni.showToast({
						title: '请上传承租人身份证反面',
						icon: 'none',
						duration: 1500
					});
				} else if (this.czrid == '' && this.entityIndex == 1) {
					uni.showToast({
						title: '请输入承租人身份证',
						icon: 'none',
						duration: 1500
					});
				} else if (this.czrname == '' && this.entityIndex == 1) {
					uni.showToast({
						title: '请输入承租人姓名',
						icon: 'none',
						duration: 1500
					});
				} else if (this.czraddress == '' && this.entityIndex == 1) {
					uni.showToast({
						title: '请输入承租人户籍所在地',
						icon: 'none',
						duration: 1500
					});
				} else if (this.sqwt == '' && this.entityIndex == 1) {
					uni.showToast({
						title: '请上传授权委托书',
						icon: 'none',
						duration: 1500
					});
				}
				// else if (this.emergencyContact == '') {
				// 	uni.showToast({
				// 		title: '请输入紧急联系人',
				// 		icon: 'none',
				// 		duration: 1500
				// 	});
				// } else if (this.emergencyTel == '') {
				// 	uni.showToast({
				// 		title: '请输入紧急联系电话',
				// 		icon: 'none',
				// 		duration: 1500
				// 	});
				// }

				// ！null
				else if (this.phoneNumReg(this.phoneNum) == false) {
					uni.showToast({
						title: '请输入正确的电话',
						icon: 'none',
						duration: 1500
					});
				} else if (this.IsChinese(this.enterpriseName) == false && this.entityIndex == 1) {
					uni.showToast({
						title: '企业名称必须全中文',
						icon: 'none',
						duration: 1500
					});
				} else if (this.addressReg(this.enterpriseAddress) == false && this.entityIndex == 1) {
					uni.showToast({
						title: '请输入正确的单位地址',
						icon: 'none',
						duration: 1500
					});
				} else if (this.addressReg(this.bankAddress) == false && this.entityIndex == 1) {
					uni.showToast({
						title: '请输入正确的开户行地址',
						icon: 'none',
						duration: 1500
					});
				} else if (this.validBank(this.bank) == false && this.entityIndex == 1) {
					uni.showToast({
						title: '请输入正确的对公账号',
						icon: 'none',
						duration: 1500
					});
				} else if (this.validCodeReg(this.validCode) == false && this.entityIndex == 1) {
					uni.showToast({
						title: '请输入正确的税号',
						icon: 'none',
						duration: 1500
					});
				}

				// } else if (this.IsChinese(this.emergencyContact) == false) {
				// 	uni.showToast({
				// 		title: '紧急联系人必须全汉字',
				// 		icon: 'none',
				// 		duration: 1500
				// 	});
				// } 
				// else if (this.phoneNumReg(this.emergencyTel) == false) {
				// 	uni.showToast({
				// 		title: '请输入正确的电话号码',
				// 		icon: 'none',
				// 		duration: 1500
				// 	});
				// } else if (this.emergencyTel == this.phoneNum) {
				// 	uni.showToast({
				// 		title: '紧急联系不能为个人电话',
				// 		icon: 'none',
				// 		duration: 1500
				// 	});
				// }
				let contractForm = Number(this.entityIndex) + 1

				if (this.entityIndex == 0) {
					// 个人
				
				} else {
					// 企业

				}
			}, 1500),

			getSubmit(data) {
				if (uni.getStorageSync('openId')) {
					if (this.phoneNum != '' && this.phoneNumReg(this.phoneNum) != false) {
						this.api.post('hetong/contract/app/insert', data).then(res => {
							if (res.data.code == 200) {
								uni.navigateTo({
									url: '/pages/contract/payment',
								});
							} else {
								uni.showToast({
									title: res.data.msg,
									icon: 'none',
									duration: 1500
								});
							}
						})
					}
				} else {
					this.loginTip()
				}

			},

			loginTip() {
				uni.showToast({
					title: '请登陆',
					icon: 'none',
					duration: 2000
				});
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}, 2000);
			},

			timePciker(index) {
				this.timeIndex = index.detail.value
				if (this.date != '') {
					// this.timeIndex = index.detail.value
					let data = {
						roomId: uni.getStorageSync("roomId"),
						monthSum: this.time[this.timeIndex].dictValue,
						startTime: this.date,
					}
					this.api.get('hetong/contract/app/selContractPrice', data).then(res => {
						// console.log(res);
						if (res.data.code == 200) {
							this.all = res.data.data
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								duration: 2000
							});
						}
					})
				} else {
					uni.showToast({
						title: '请优先选择合同生效日期',
						icon: 'none',
						duration: 2000
					});
				}
			},
			payTypePciker(index) {
				this.payTypeIndex = index.detail.value
			},
			payPciker(index) {
				this.payIndex = index.detail.value
			},
			entityPciker(index) {
				this.entityIndex = index.detail.value
			},

			phoneNumReg(value) {
				return /^1[3-9]\d{9}$/.test(value);
			},
			email(value) {
				return /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/.test(value);
			},
			IsChinese(value) {
				let reg = /^[\u4e00-\u9fa5]+$/gi;
				return reg.test(value);
			},
			addressReg(value) {
				let reg =
					/(\w+省|\w+自治区)?(\w+市|\w+自治州|\w+地区)?(\w+区|\w+县|\w+市|\w+镇|\w+乡|\w+街道)?(\w+路|\w+街|\w+巷|\w+村)?(\d+号|(\w+号)(\d+单元)?(\d+室)?)/
				return reg.test(value);
			},
			IDCard(value) {
				let reg = /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
				return reg.test(value)

				// 引入 IDCard.js
				// var IDCard = new IdCardValidate(value);
				// if(!checkIdCard.IsValid()){
				//   alert('您输入的身份证格式不正确！');
				//   return;
				// }
			},

			money(value) {
				return /^[1-9]\d*(,\d{3})*(\.\d{1,2})?$|^0\.\d{1,2}$/.test(value);
			},

			validBank(value) {
				return /^[1-9]\d{9,29}$/.test(value);
			},

			validCodeReg(value) {
				return /^[A-Z0-9]{15}$|^[A-Z0-9]{17}$|^[A-Z0-9]{18}$|^[A-Z0-9]{20}$/.test(value)
			},

			// 获取上传状态
			entitySelect(e) {
				uni.uploadFile({
					url: config.apiUrl + 'hetong/contract/app/upload',
					// header: {
					// 	'Content-Type': 'application/x-www-form-urlencoded'
					// },
					method: 'POST',
					dataType: 'json',
					filePath: e.tempFilePaths[0],
					name: 'file',
					success: uploadFileRes => {
						let data = JSON.parse(uploadFileRes.data)
						// console.log(data);
						console.log(data);
						if (data.code == 200) {
							this.entityFileUrl = data.data.ossId
						} else {
							uni.showToast({
								title: data.msg,
								icon: 'none',
								duration: 1500
							});
						}
					},
					fail(err) {
						console.log(err);
					}
				});
			},
			entityFail() {
				uni.showToast({
					title: '操作失败，请稍后再试',
					icon: 'none',
					duration: 1500
				});
			},
			entityDel(e) {
				this.entityFileUrl = ''
			},

			// 身份证正面 idOpposite
			// 获取上传状态
			idFrontSelect(e) {
				console.log(e)
				uni.uploadFile({
					url: config.apiUrl + 'hetong/contract/app/idCard',
					// header: {
					// 	'Content-Type': 'application/x-www-form-urlencoded'
					// },
					method: 'POST',
					dataType: 'json',
					filePath: e.tempFilePaths[0],
					name: 'file',
					success: uploadFileRes => {
						let data = JSON.parse(uploadFileRes.data)
						console.log(data);
						if (data.code == 200) {
							this.name = data.data.cardName
							this.cardBirth = data.data.cardBirth
							this.id = data.data.cardNum
							this.address = data.data.cardSite
							// idFrontFileUrl: '',
							// idOppositeFileUrl: '',
							this.idFrontFileUrl = data.data.ossId
						} else {
							uni.showToast({
								title: '格式错误，请重新上传',
								icon: 'none',
								duration: 1500
							});
						}
					},
					fail(err) {
						console.log(err);
					}
				});
			},
			idFrontFail() {
				uni.showToast({
					title: '操作失败，请稍后再试',
					icon: 'none',
					duration: 1500
				});
			},
			idFrontDel(e) {
				this.idFrontFileUrl = ''
				this.cardBirth = ''
				this.id = ''
				this.address = ''
				this.name = ''
			},

			// 身份证反面 idOpposite
			// 获取上传进度
			idOppositeSelect(e) {
				uni.uploadFile({
					url: config.apiUrl + 'hetong/contract/app/upload',
					// header: {
					// 	'Content-Type': 'application/x-www-form-urlencoded'
					// },
					method: 'POST',
					dataType: 'json',
					filePath: e.tempFilePaths[0],
					name: 'file',
					success: uploadFileRes => {
						let data = JSON.parse(uploadFileRes.data)
						// console.log(data);
						console.log(data);
						if (data.code == 200) {
							this.idOppositeFileUrl = data.data.ossId
						} else {
							uni.showToast({
								title: data.msg,
								icon: 'none',
								duration: 1500
							});
						}
					},
					fail(err) {
						console.log(err);
					}
				});
			},
			idOppositeFail() {
				uni.showToast({
					title: '操作失败，请稍后再试',
					icon: 'none',
					duration: 1500
				});
			},
			idOppositeDel(e) {
				this.idOppositeFileUrl = ''
			},
		},

		onLoad() {
			
		},
		onShow() {

		},
		onReady() {

		},
	};
</script>

<style lang="scss">
	.flex_most {
		width: 28rpx;
		height: 28rpx;
		margin-top: 5rpx;
	}

	.flex_logo {
		width: 28rpx;
		height: 28rpx;
		margin-top: 46rpx;
	}

	.logo {
		width: 80rpx;
		height: 80rpx;
		margin-top: 20rpx;
		margin-left: 310rpx;
	}

	.wrap {
		margin: 0 auto 54rpx;
		width: 718rpx;
	}

	.flex {
		display: flex;
		justify-content: flex-end;
	}

	.form_item_h {
		width: 718rpx;
		height: 40rpx;
		border-bottom: 1rpx solid #aaacba;
		display: flex;
		justify-content: flex-start;
		flex-wrap: nowrap;
		overflow: hidden;
		padding: 40rpx 0;
	}

	#submit {
		width: 660rpx;
		height: 112rpx;
		line-height: 112rpx;
		background: #ff6900;
		border-radius: 8rpx;
		text-align: center;
		font-size: 34rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #FFFFFF;
		margin-top: 30rpx;
	}

	.gray_h {
		width: auto;
		height: 40rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #AAACAB;
		line-height: 40rpx;
		margin: 34rpx 0 44rpx 24rpx;
		box-sizing: border-box;
	}

	textarea {
		width: 564rpx;
		height: 190rpx;
		border: 2rpx solid #F7F4F4;
		margin: 0 auto;
		font-size: 28rpx;
		font-weight: 400;
		color: #AAACAB;
		padding: 24rpx 38rpx 14rpx 38rpx;
	}

	.placeholder_textarea {
		font-size: 28rpx;
		font-weight: 400;
		color: #AAACAB;

	}

	.h {
		height: 48rpx;
		font-size: 34rpx;
		font-weight: 400;
		color: #1A1A1A;
		line-height: 48rpx;
		margin-left: 44rpx;
	}

	form {
		width: 718rpx;

		.form_item_logo {
			width: 718rpx;
			height: 120rpx;
			border-bottom: 1rpx solid #F7F4F4;
			display: flex;
			justify-content: flex-start;
			flex-wrap: nowrap;
			overflow: hidden;

			.label {
				width: 40%;
				height: 120rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #AAACAB;
				line-height: 120rpx;

				.label_text {
					color: red;
					margin-left: 28rpx;
					margin-top: 16rpx;
					margin-right: 10rpx;
				}
			}

			.font_size {
				font-size: 28rpx;
				font-weight: 400;
				color: #AAACAB;
			}

			.input {
				width: 55%;
				height: 120rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: black;
				line-height: 120rpx;
				text-align: end;
			}

		}

		.uni-file-picker__container {
			display: flex;
			box-sizing: border-box;
			flex-wrap: wrap;
			margin: -5px;
			width: 660rpx;
			margin: 0 auto;
		}

		.from_file {
			width: 718rpx;
			height: 40rpx;
			border-bottom: 1rpx solid #F7F4F4;
			display: flex;
			justify-content: flex-start;
			flex-wrap: nowrap;
			overflow: hidden;
			padding: 40rpx 0 20rpx;

			.label {
				width: 40%;
				height: 40rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #AAACAB;
				line-height: 40rpx;

				.label_text {
					color: red;
					margin-left: 28rpx;
					margin-top: 16rpx;
					margin-right: 10rpx;
				}
			}

			.input {
				width: 55%;
				height: 40rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: black;
				line-height: 40rpx;
				text-align: end;
			}

			.font_size {
				font-size: 28rpx;
				font-weight: 400;
				color: #AAACAB;
			}

			input {
				width: 55%;
				height: 40rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: black;
				line-height: 40rpx;
				text-align: end;
			}
		}


		.form_item {
			width: 718rpx;
			height: 40rpx;
			border-bottom: 1rpx solid #F7F4F4;
			display: flex;
			justify-content: flex-start;
			flex-wrap: nowrap;
			overflow: hidden;
			padding: 40rpx 0;


			.label {
				width: 40%;
				height: 40rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #AAACAB;
				line-height: 40rpx;

				.label_text {
					color: red;
					margin-left: 28rpx;
					margin-top: 16rpx;
					margin-right: 10rpx;
				}
			}

			.input {
				width: 55%;
				height: 40rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: black;
				line-height: 40rpx;
				text-align: end;
			}

			.font_size {
				font-size: 28rpx;
				font-weight: 400;
				color: #AAACAB;
			}

			input {
				width: 55%;
				height: 40rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: black;
				line-height: 40rpx;
				text-align: end;
			}
		}
	}
</style>

小新的飞天大象
关注
uniapp精美ui模板
05-27
uniapp精美ui模板就是这样的一个工具，它提供了一系列预先设计好的界面组件和布局，包括但不限于导航栏、底部tabbar、弹窗、列表、按钮、表单等，这些组件样式统一且响应式，适应不同设备屏幕尺寸。 【html】，全称...
uniapp---form（4）---from表单的应用
m0_75047254的博客
07-28 3323
第一步：添加一个按钮，并且按钮的form-type属性添加为submit。想要在form表单的submit中得到值。这需要为其添加上name属性。第三歩：在生命周期methods里创建formSubmit方法接受值。第一步：添加一个按钮，并且按钮的form-type属性添加为reset。第三歩：点击reset按钮，即可清空form表单的内容。第二歩：在form表单的组件中添加事件 @submit。第二歩：在form表单的组件中添加事件 @reset。（1）使用submit提交表单获取信息。
《uni-app》表单组件-form表单
Oliver尹的博客
09-21 1万+
From，表单组件，具有数据收集、提交数据的功能，某种程度上说它就是一个容器，这个容器内部可以有 input 、checkbox、radio 、picker 等组件填充，原则上所有的表单组件都必须置入from组件，再通过form组件收集内部组件数据并将内容通过接口发送至后台接收～
开源项目 `uni-form` 使用教程
最新发布
gitblog_00468的博客
08-15 611
开源项目 uni-form 使用教程 uni-formUni-Form is a framework that standardizes form markup and styles it with CSS giving you two most widely used layout options to choose from. Anyone can get nice looking, wel...
uniapp组件-uni-forms表单案例
jxzdezhanhao的博客
03-22 8202
代码实现： <template> <view> <uni-forms :rules="rules" :value="formData" ref="form" validate-trigger="bind" err-show-type="undertext"> <uni-group title="基本信息" top="0"> <uni-forms-item name="name" required label="用户名"&gt..
uniapp-form表单（1）
m0_75047254的博客
07-26 1900
属性说明属性名类型默认值说明生效时机平台差异说明sizeStringdefault按钮的大小typeStringdefault按钮的样式类型plainBooleanfalse按钮是否镂空，背景色透明disabledBooleanfalse是否禁用loadingBooleanfalse名称前是否带 loading 图标H5、App(App-nvue 平台，在 ios 上为雪花，Android上为圆圈)form-typeString用于<form>
uniapp form表单validator函数校验
君君的博客
09-10 3847
尝试了用uniapp的from以及uni-forms发现并不是特别好用，就在插件市场找了一个类似于element-ui的表单验证组件，用法基本上和element-ui一致，使用也比较方便 因为目前是用uni-app做小程序，小程序使用有几个限制，需要注意一下； 一、使用 依赖于async-validator npm install async-validator --save npm下载依赖，插件市场导入插件即可直接使用 先上代码 HTML： <eva...
简单的form表单模板
01-16
本文将深入探讨“简单的form表单模板”及其相关知识点。 首先，我们需要了解HTML中的`<form>`标签。它是创建表单的基础，用于定义用户输入数据的区域。例如： ```html <!-- 表单内容 --> ``` 在这个例子中，`...
uniapp实现答题模板
04-08
【uniapp实现答题模板】是一个基于uni-app框架的答题应用模板，主要针对线上手机答题业务设计，适合开发者快速搭建自己的在线答题系统。该模板具备多种题型，包括单选题、多选题和判断题，并且集成了倒计时功能，以...
个人信息-VUE模板 UNIAPP模板 布局、样式、JS分离
04-21
【个人信息-VUE模板-UNIAPP模板】是一个用于构建个人资料页面的应用模板，适用于Vue.js和UniApp框架。这个模板提供了完整的布局结构，包括头像、姓名、身份证、手机号码和科室岗位等常见个人信息字段，方便开发者...
多步骤表单网页模板
01-22
多步骤表单网页模板是一种设计模式，用于将复杂的表单数据收集过程分解成多个阶段，以提高用户体验。这种模板通常包含几个步骤或阶段，每个阶段专注于一个特定的表单部分，用户逐步完成整个过程。这样的设计有助于...
uniapp使用from表单提交后清空input输入内容的正确方法
君笑尘的技术博客
03-29 8809
做小程序开发的时候，经常使用到from表单提交，但是提交后input输入的内容却没有办法清楚。 搜索了一下后发现大家在微信小程序原生开发的方案都是给input的value设置一个默认值inputName，然后在提交成功后，把inputName通过this.setData 设置为空 //直接将input值设置空 this.setData({ inputName: '' }) 但是在uniapp上这样做，并不会改变input输入的内容，尝试改用了: this.inputNam
uniapp组件-uni-forms表单
热门推荐
03-04 3万+
效果图： 代码实现： <template> <view> <uni-forms :rules="rules" :value="formData" ref="form" validate-trigger="bind" err-show-type="undertext"> <uni-group title="基本信息" top="0"> <uni-forms-item name="name" required label="用户
uniapp 简单表单布局1
盖世小可爱的博客
07-29 3478
uniapp表单
uni-app封装form 表单
leo_5210的博客
01-24 830
封装form 表单，根据表单的input select 类型动态封装BaseForm。
uniapp-Form示例（uviewPlus）
小林的博客
03-24 1418
说明：表单组建、表单验证、提交验证等；组件：uviewPlus（
uniapp使用html2canvas截图，显示合同
weixin_43859097的博客
05-06 943
目前有个uniapp封装app里展示合同的需求，数据都在页面拼接展示，合同是写到页面里的，数据是活的。用到了html2canvas，renderjs后面可能还有一系列优化需求，持续更新附上官网PS（懒得再开文章）附上另一个展示合同需求：1.合同内容是docx形式展示，2.前端实现签名操作，3.后台合成签名图片和docx后在小程序展示。小程序签名，有现成的插件因为后台使用的插件不支持https，但小程序必须https，故后台设计了多步文件转换（这里前端先不考虑）方法思路如下：（有点绕）
避坑指南：uni-forms表单在uni-app中的实践经验
唯见青山不见君
12-19 6393
避坑指南：uni-forms表单在uni-app中的实践经验
uniApp中form表单的小案例
2301_79413719的博客
09-19 405
form表单提交介绍表单组件
uniapp+vue3表单校验
12-29
以下是使用Vue 3和uni-app实现表单校验的示例代码： ```vue <template> <div> <form @submit.prevent="submitForm"> <label for="name">姓名：</label> <input type="text" id="name" v-model="formData.name" /> <p v-if="errors.name" class="error">{{ errors.name }}</p> <label for="email">邮箱：</label> <input type="email" id="email" v-model="formData.email" /> <p v-if="errors.email" class="error">{{ errors.email }}</p> <button type="submit">提交</button> </form> </div> </template> <script> import { ref } from 'vue'; export default { setup() { const formData = ref({ name: '', email: '', }); const errors = ref({}); const validateForm = () => { errors.value = {}; if (!formData.value.name) { errors.value.name = '请输入姓名'; } if (!formData.value.email) { errors.value.email = '请输入邮箱'; } else if (!isValidEmail(formData.value.email)) { errors.value.email = '请输入有效的邮箱地址'; } return Object.keys(errors.value).length === 0; }; const submitForm = () => { if (validateForm()) { // 表单校验通过，提交表单 console.log('表单校验通过，提交表单'); } }; const isValidEmail = (email) => { // 简单的邮箱格式校验 const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; return emailRegex.test(email); }; return { formData, errors, submitForm, }; }, }; </script> <style> .error { color: red; } </style> ``` 这个示例代码演示了如何使用Vue 3和uni-app实现表单校验。在模板中，我们使用`v-model`指令绑定表单输入的值，并使用`v-if`指令根据校验结果显示错误信息。在`setup`函数中，我们定义了`formData`和`errors`的响应式变量，并编写了`validateForm`函数来进行表单校验。最后，在提交表单时，我们调用`validateForm`函数来判断表单是否通过校验，如果通过则提交表单。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值