zlpt_app/pages/subLoanInfo/subLoanInfo.vue

<template>
	<view>
		<view class="loan-info">
			<view class="loan-upper">
				<view class="upper-lef">
					<image src="../../static/bg1.jpg" mode=""></image>
				</view>
				<view class="upper-rig">
					<h3 style="margin-bottom: 10rpx;">522单杠震动压路机</h3>
					<view>
						<h4>装备编号：330</h4>
						<h4>品牌：志高</h4>
					</view>
					<view>
						<h4>装备组别：330</h4>
						<h4>操作重量：10吨</h4>
					</view>
					<view>
						<h4>设备规格：330</h4>
						<h4>铲斗容量：10吨</h4>
					</view>
					<view>
						<h4>设备位置：安徽省合肥市</h4>
					</view>
				</view>
			</view>
			<view class="loan-lower">
				<view class="lower-lef">供应商：安徽省博诺思科技有限公司</view>
				<view class="lower-rig">租金：<view>￥20000</view><span>/月</span></view>
			</view>
		</view>
		<view class="loan-form">
			<uni-forms ref="loanForm" :rules="rules" :modelValue="loanFormData" label-position="top">
				<uni-forms-item required name="timeIn" label="进场时间" label-width="150">
					<uni-datetime-picker type="date" :clear-icon="false" v-model="loanFormData.timeIn" />
				</uni-forms-item>
				<uni-forms-item required name="workTime" label="工期时长/天" label-width="150">
					<uni-easyinput placeholder="请输入" type="number" v-model="loanFormData.workTime"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item required name="needDriver" label="需要机手" label-width="150">
					<uni-data-checkbox v-model="loanFormData.needDriver" :localdata="driverRange"></uni-data-checkbox>
				</uni-forms-item>
				<uni-forms-item required name="receiptType" label="发票类型" label-width="150">
					<uni-data-checkbox v-model="loanFormData.receiptType" :localdata="receiptRange"></uni-data-checkbox>
				</uni-forms-item>
				<uni-forms-item required name="projExplain" label="项目说明" label-width="150">
					<uni-easyinput type="textarea" v-model="loanFormData.projExplain" placeholder="请输入"></uni-easyinput>
				</uni-forms-item>
				<button style="background-color: #043e71; color: #fff;" @click="subForm">提交</button>
			</uni-forms>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loanFormData: {
					timeIn: '',
					workTime: '',
					needDriver: '',
					receiptType: '',
					projExplain: ''
				},
				driverRange: [
					{ text: '需要', value: '0' },
					{ text: '不需要', value: '1' }
				],
				receiptRange: [
					{ text: '不需要', value: '0' },
					{ text: '增值税普票', value: '1' },
					{ text: '增值税专票', value: '2' }
				],
				rules: {
					timeIn: {
						rules: [
							{
								required: true,
								errorMessage: '请选择进场时间！'
							}
						]
					},
					workTime: {
						rules: [
							{
								required: true,
								errorMessage: '请填写工期时长！'
							}
						]
					},
					needDriver: {
						rules: [
							{
								required: true,
								errorMessage: '请选择是否需要机手！'
							}
						]
					},
					receiptType: {
						rules: [
							{
								required: true,
								errorMessage: '请选择发票类型！'
							}
						]
					},
					projExplain: {
						rules: [
							{
								required: true,
								errorMessage: '请填写项目说明！'
							}
						]
					}
				}
			}
		},
		methods: {
			subForm () {
				this.$refs.loanForm.validate().then(formData => {
					console.log(formData);
				})
			}
		}
	}
</script>

<style lang="scss">
	body{
		background-color: #F8F8F8;
	}
	.loan-info, .loan-form{
		width: 95%;
		margin: 20rpx auto;
		box-sizing: border-box;
		padding: 30rpx;
		background-color: #fff;
		border-radius: 15rpx;
	}
	.loan-info{
		display: flex;
		flex-direction: column;
		.loan-upper{
			width: 100%;
			height: 18vh;
			box-sizing: border-box;
			padding: 0 0 25rpx 0;
			border-bottom: 1px solid #EEEEEE;
			display: flex;
			.upper-lef{
				width: 35%;
				height: 100%;
				border-radius: 15rpx;
				overflow: hidden;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.upper-rig{
				flex: 1;
				box-sizing: border-box;
				padding: 15rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				view{
					width: 100%;
					display: flex;
					justify-content: space-between;
					margin-bottom: 10rpx;
					h4{
						width: 50%;
						font-weight: normal;
						font-size: 12px;
					}
				}
				view:last-child{
					margin-bottom: 0;
				}
			}
		}
		.loan-lower{
			width: 100%;
			box-sizing: border-box;
			padding: 25rpx 0 0 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.lower-lef{
				font-size: 20rpx;
			}
			.lower-rig{
				font-size: 14px;
				display: flex;
				align-items: center;
				view{
					font-size: 22px;
					font-weight: bold;
					color: #FF4901;
				}
				span{
					font-size: 12px;
					color: #FF4901;
				}
			}
		}
	}
</style>