mwims-mini-program/mwims-disposal-app/packagePage/pages/today_plan_trans2/today_plan_trans2.vue

<template>
	<view class="container">
		<form @submit="formSubmit" @reset="formReset">
			<view class="list-view">
				<view class="tui-list-item" hover-class="tui-hover" :hover-stay-time="150">
					<view class="content-box">
						<view class="des-box">
							<view class="time">
								<view>
									<text calss="weight" style="margin-left:14px;font-size:28rpx;">总重量 1568.71kg</text>
									<text calss="box" style="margin-left:20px;font-size:28rpx;">总计数量：72箱</text>
									<view style="margin-top:-20px;"><text style="margin-left:75%;background-color:#bbffd2;border-radius:20px 20px 20px 20px;padding:3px 8px;color:green;"> 待转运 </text></view>
								</view>
								
							</view>
						</view>
					</view>
				</view>
			</view>
			<tui-list-cell :hover="false">
				<view class="tui-line-cell">
					<view class="tui-title">计划批次</view>
					<input placeholder-class="tui-phcolor" class="tui-input" name="name" value="202209020001"
						maxlength="50" type="text" />
				</view>
			</tui-list-cell>
			<tui-list-cell :hover="false">
				<view class="tui-line-cell">
					<view class="tui-title">上报时间</view>
					<input placeholder-class="tui-phcolor" class="tui-input" name="name" value="2022-09-26 16:44:23"
						maxlength="50" type="text" />
				</view>
			</tui-list-cell>
			<tui-list-cell :hover="false">
				<view class="tui-line-cell">
					<view class="tui-title">机构名称</view>
					<input placeholder-class="tui-phcolor" class="tui-input" name="name" value="肿瘤医院"
						maxlength="50" type="text" />
				</view>
			</tui-list-cell>
			<tui-list-cell :hover="false">
				<view class="tui-line-cell">
					<view class="tui-title">暂存点</view>
					<input placeholder-class="tui-phcolor" class="tui-input" name="name" value="肿瘤医院暂存点"
						maxlength="50" type="text" />
				</view>
			</tui-list-cell>
			<tui-list-cell :hover="false">
				<view class="tui-line-cell">
					<view class="tui-title">上报人员</view>
					<input placeholder-class="tui-phcolor" class="tui-input" name="name" value="张宁"
						maxlength="50" type="text" />
				</view>
			</tui-list-cell>
			<view class="bar"></view>
			<!-- 基本信息 -->
			<tui-list-cell :hover="false">
				<view class="tui-line-cell">
					<view class="tui-title">感染性废物</view>
					<input placeholder-class="tui-phcolor" class="tui-input" name="name" value="68kg 1箱"
						maxlength="50" type="text" />
				</view>
			</tui-list-cell>
			<tui-list-cell :hover="false">
				<view class="tui-line-cell">
					<view class="tui-title">损伤新废物</view>
					<input placeholder-class="tui-phcolor" class="tui-input" name="name" value="192kg 2箱"
						maxlength="50" type="text" />
				</view>
			</tui-list-cell>
			<tui-list-cell :hover="false">
				<view class="tui-line-cell">
					<view class="tui-title">病理性废物</view>
					<input placeholder-class="tui-phcolor" class="tui-input" name="name" value="42kg 1箱"
						maxlength="50" type="text" />
				</view>
			</tui-list-cell>
		</form>
		<view class="tui-btn-box"><tui-button shape="circle" @click="detail">全部转运</tui-button></view>
		<view class="tui-btn-box"><tui-button shape="circle" plain type="blue" @click="detail">部分转运</tui-button></view>
	</view>
</template>
<script>
	const form = require("@/components/common/tui-validation/tui-validation.js")

	function checkKeyword(value) {
		if (~value.indexOf("***")) {
			return false;
		}
		return true;
	}
	export default {
		data() {
			return {}
		},
		methods: {
			formSubmit: function(e) {
				//表单规则
				let rules = [{
					name: "name",
					rule: ["required", "isChinese", "minLength:2", "maxLength:6"], //可使用区间，此处主要测试功能
					msg: ["请输入姓名", "姓名必须全部为中文", "姓名必须2个或以上字符", "姓名不能超过6个字符"]
				}];
				//进行表单检查
				let formData = e.detail.value;
				let checkRes = form.validation(formData, rules);
				if (!checkRes) {
					uni.showToast({
						title: "验证通过!",
						icon: "none"
					});
				} else {
					uni.showToast({
						title: checkRes,
						icon: "none"
					});
				}
			},
			formReset: function(e) {
				console.log("清空数据")
			}
		}
	}
</script>

<style>
	.container {
		padding: 20rpx 0 50rpx 0;
	}
	
	.bar{
		background-color: #fafafa;
		height:10px;
		/* border:1px solid red; */
	}
	
	.tui-line-cell {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}

	.tui-title {
		line-height: 32rpx;
		min-width: 120rpx;
		flex-shrink: 0;
	}

	.tui-input {
		font-size: 28rpx;
		color: #333;
		padding-left: 20rpx;
		flex: 1;
		overflow: visible;
	}

	.radio-group {
		margin-left: auto;
		transform: scale(0.8);
		transform-origin: 100% center;
		flex-shrink: 0;
	}

	.tui-radio {
		display: inline-block;
		padding-left: 28rpx;
		font-size: 36rpx;
		vertical-align: middle;
	}


	.tui-btn-box {
		padding: 40rpx 50rpx;
		box-sizing: border-box;
	}

	.tui-button-gray {
		margin-top: 30rpx;
	}

	.tui-tips {
		padding: 30rpx;
		color: #999;
		font-size: 24rpx;
	}
</style>