newTianLi/pages/test/test.vue

<template>
	<view class="center">
		<view class="img">
			<image src="../../static/img/logo.png" mode=""></image>
		</view>
			<view class="test_title">
				节水测试
			</view>
			<view class="form">
				<view class="form-item">
					<view class="form-left">姓名：</view>
					<text class="tip">*</text>
					<view class="form-right">
						<input type="text" @input="onAction" class="list-input" v-model="name" placeholder="请填写姓名" />
					</view>
				</view>
				<view class="form-item">
					<view class="form-left">地址：</view>
					<text class="tip"></text>
					<view class="form-right">
						<input @input="onAction" type="text" class="list-input" v-model="address" placeholder="请填写地址" />
					</view>
				</view>
				<view class="form-item">
					<view class="form-left">
						联系电话：
					</view>
					<text class="tip">*</text>
					<view class="form-right">
						<input @input="onAction" class="list-input" type="text" v-model="address"
							placeholder="请填写联系方式" />
					</view>
				</view>
				<view class="form-item">
					<view class="form-left">
						生产线类型：
					</view>
					<text class="tip">*</text>
					<view class="form-right">
						<picker :value="index" :range="array" @change="bindPickerType" class="list-input1">
							<text style="color: #C7C9D1;">{{line_type || '请选择生产类型'}}</text>
						</picker>
					</view>
				</view>
				<view class="form-item">
					<view class="form-left">
						生产线数量：
					</view>
					<text class="tip">*</text>
					<view class="form-right">
						<input class="list-input" type="number" @input="onAction" v-model="line_num"
							placeholder="请填写生产线数量" />
					</view>
				</view>
				<view class="form-item">
					<view class="form-left">
						目前用水量(吨/小时)：
					</view>
					<text class="tip">*</text>
					<view class="form-right">
						<input class="list-input" type="number" @input="onAction" v-model="water_using"
							placeholder="请填写目前用水量" />
					</view>
				</view>
				<view class="form-item">
					<view class="form-left">工作时长(小时)：</view>
					<text class="tip"></text>
					<view class="form-right">
						<input @input="onAction" class="list-input" v-model="day_work_times" type="number"
							placeholder="请填写每日工作时长,默认为12小时" />
					</view>
				</view>
				<view class="form-item">
					<view class="form-left">年工作日数：</view>
					<text class="tip"></text>
					<view class="form-right">
						<input @input="onAction" class="list-input" v-model="year_work_day" type="number"
							placeholder="请填写每年工作日数,默认为330天" />
					</view>
				</view>
				<view class="form-item">
					<view class="form-left">废水处理成本(元/吨)：</view>
					<text class="tip">*</text>
					<view class="form-right">
						<input @input="onAction" class="list-input" v-model="deal_cost" type="number"
							placeholder="请填写废水处理成本" />
					</view>
				</view>
			</view>
			<view class="btn" @click="next">
				<view class="btn-left">
					提交
				</view>
			</view>
			<view class="result">
				<view class="result-title">
					测试结果
				</view>
				<view class="border">

				</view>
				<view class="result-box">

				</view>
			</view>
			<view class="tanchang">
				
			</view>
		<aboutUs class="aboutUs"></aboutUs>

	</view>
</template>
<script>
	import {
		addForm
	} from '@/api/index.js';
	import aboutUs from "@/components/introduce/introduce.vue"
	import {changeTaber} from "@/utils/tarberChange.js"
	export default {
		components: {
			aboutUs
		},
		data() {
			return {
				name: '',
				address: '',
				telephone: '',
				line_type: '',
				line_num: '',
				water_using: '',
				day_work_times: '',
				year_work_day: '',
				deal_cost: '',
			}
		},
		onLoad() {
			// this.loadData();
			changeTaber(4);
		},
		methods: {
			//表单提交
			next() {
				if (this.name == '') {
					//消息提醒
					uni.showToast({
						title: '请输入您的姓名',
						//是否展示图标
						icon: 'none',
						//显示时间
						duration: 2000
					});
					this.$api.msg('');
					return;
				}
				if (this.address == '') {
					uni.showToast({
						title: '请填写详细地址',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				if (this.address == '') {
					uni.showToast({
						title: '请填写联系电话',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				const reg = /^(\+?0?86-?)?1[\d]\d{9}$/;
				if (!reg.test(this.telephone)) {
					uni.showToast({
						title: '请填写正确的手机格式',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				if (this.line_type == '') {
					uni.showToast({
						title: '请填写生产线类型',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				if (this.line_num == '') {
					uni.showToast({
						title: '请填写生产线数量',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				if (this.water_using == '') {
					uni.showToast({
						title: '请填写目前用水量',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				if (this.deal_cost == '') {
					uni.showToast({
						title: '请填写废水处理成本',
						icon: 'none',
						duration: 2000
					});
					return;
				}
			},
			//选择生产线类型
			bindPickerType: function(e) {
				console.log(this.array[e.target.value])
			},
			// async loadData() {
			// 	const obj = this;
			// 	// banner({}).then(e => {
			// 	// 	obj.carouselList = obj.carouselList.concat(e.data.banner);
			// 	// 	console.log(obj.carouselList)
			// 	// // });
			// 	// category({
			// 	// 	page: 1,
			// 	// 	limit: 1000
			// 	// }, 2).then(({
			// 	// 	data
			// 	// }) => {
			// 	// 	console.log(data)
			// 	// 	obj.dataList = data
			
			// 	// });
			// },
		}
	};
</script>

<style lang="scss">
	.center {
		height: 100%;
		background: #FFFFFF;
		position: relative;

	}
	.img {
		margin: 17rpx 0 17rpx 41rpx;
		width: 208rpx;
		height: 52rpx;
	
		image {
			width: 100%;
			height: 100%;
		}
	}

	.test_title {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 60rpx;
		font-size: 22rpx;
		font-family: Adobe Heiti Std;
		font-weight: normal;
		color: #FFFFFF;
		background-color: #0165B5;
	}

	.test_table {

		font-size: 22rpx;
		font-family: Adobe Heiti Std;
		font-weight: normal;
		color: #000000;
		display: flex;
		justify-content: space-between;
		padding: 10rpx 30rpx;

		input {
			width: 340rpx;
			height: 40rpx;
			background: #FFFFFF;
			border: 1px solid #B9B7B7;
			border-radius: 2rpx;
			font-size: 16rpx;
			padding-left: 16rpx;
		}
	}

	.form {
		background: #FFFFFF;
		width: 100%;
		padding: 14rpx;
		// margin-top: 54rpx;

		.form-item {

			width: 98%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 10rpx;

			.form-left {

				color: #212121;
				font-size: 22rpx;
				width: 250rpx;
				flex-shrink: 0;
			}

			.tip {
				margin-left: 0rpx;
				color: #ff0000;
				width: 34rpx;
				height: 34rpx;
			}

			.form-right {
				margin-left: 2rpx;
				padding: 12rpx;
				width: 100%;
				background-color: #FFFFFF;
				border: 2rpx solid #bdbdbd;
				border-radius: 6rpx;

				.list-input {


					font-size: 18rpx;

					.input-placeholder {
						color: #C7C9D1;
						font-size: 18rpx;
					}
				}

				.list-input1 {
					color: #757575;
					font-size: 18rpx;
				}
			}
		}
	}

	.btn {
		margin-top: 34rpx;
		width: 100%;
		height: 70rpx;
		display: flex;
		justify-content: center;
		color: #ffffff;
		font-size: 26rpx;

		.btn-left {
			width: 88%;
			height: 70rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			// margin-left: 44rpx;
			background-color: #3874cb;
			border-radius: 8rpx;
		}
	}



	.result {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.result-title {

			margin-top: 50rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 180rpx;
			height: 35rpx;
			font-size: 26rpx;
			font-family: Adobe Heiti Std;
			font-weight: normal;
			color: #000000;
			position: relative;
			top: 15rpx;
			z-index: 99;
			background-color: #FFFFFF;

		}

		.border {
			width: 100%;
			height: 1rpx;
			border: 1rpx solid #EEE9E9;

		}

		.result-box {
			width: 100%;
			height: 360rpx;
			background: #0165B5;
			margin-top: 24rpx;
		}

	}
	.tanchang {
		height: 132rpx;
	}
	.aboutUs {
		width: 100%;
		position: fixed;
		bottom: 100rpx;
	}
</style>