zhywpt-sp/subpackage/orders/cardAmount.vue

<template>
	<!-- 补卡额申请 -->
	<view class="wrapper">
		<!-- 背景颜色充满屏 -->
		<view class="bg-color"></view>
		<view class="card-info">
			<view class="info-wrap">
				<view class="info-left">
					<view class="info-left-text">
						<text class="label">流水单号：</text>
						<text class="val">MA89200010</text>
					</view>
					<view>
						<text class="label">ETC卡号：</text>
						<text class="val">0110200001</text>
					</view>
				</view>
				<view class="info-right">
					<view class="price-label">
						交易金额
					</view>
					<view class="price-val">
						<u-icon name="rmb"></u-icon>
						<text class="price-val-text">104.00</text>
					</view>
				</view>
			</view>
			<view class="card-text-wrap">
				<view class="text-box">
					<text class="name-text">贵阳西</text>
					<text class="time-text">12:09</text>
					<text class="date-text">2023-01-08</text>
				</view>
				<view class="arrow-wrap">
					<text class="arrow-text">粤A12345</text>
					<image class="d-img" :src="`${$imgUrl}order/arrowCard.png`"></image>
				</view>
				<view class="text-box">
					<text class="name-text">XXXXX</text>
					<text class="time-text">18:52</text>
					<text class="date-text">2023-01-08</text>
				</view>
			</view>
		</view>
		<view class="form-wrap">
			<u-form :model="form" ref="uForm">
				<u-form-item label="补卡金额" prop="price" label-width="130" required>
					<u-input v-model="form.price" />
				</u-form-item>
				<u-form-item label="上传凭证" prop="fileList" label-width="130" required label-position="top">
					<view class="tips-wrap">
						<text class="tips-pos">（最多上传3张）</text>
					</view>
					<u-upload :action="action" :file-list="form.fileList" upload-text="" :custom-btn="true">
						<view class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
							<view class="v-bord">
								<image class="addImg" :src="`${$imgUrl}order/addBtn.png`"></image>
							</view>
						</view>
					</u-upload>
				</u-form-item>
			</u-form>
		</view>
		<view class="btn" @click="submitHandle">补卡额申请</view>
	</view>
</template>

<script lang="ts">
	import {
		onReady
	} from "@dcloudio/uni-app";
	import {
		defineComponent,
		reactive,
		ref
	} from "vue";
	export default defineComponent({
		setup() {
			const action = "";
			const uForm = ref(null);
			const form = reactive({
				price: "",
				fileList: []
			})
			const rules = {
				price: [{
					required: true,
					type: "number",
					message: '请输入补卡额',
					trigger: ['change', 'blur'],
				}],
				fileList: [{
					required: true,
					type: "array",
					message: '请上传凭证',
					trigger: ['change', 'blur'],
				}],
			}
			onReady(() => {
				console.log("uform", uForm.value)
				uForm.value.setRules(rules);
			})

			const submitHandle = () =>{
				console.log("uForm", uForm);
				uForm.value.validate(valid => {
					if (valid) {
						console.log('验证通过');
					} else {
						console.log('验证失败');
					}
				});
			}
			return {
				form,
				uForm,
				action,
				submitHandle
			}
		}

	})
</script>

<style lang="scss" scoped>
	.bg-color {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: #EEF7F7;
		z-index: -1;
	}

	.card-info {
		background: #FFFFFF;
		box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(223, 223, 223, 0.8);
		border-radius: 20rpx;
		margin: 30rpx;

		.info-wrap {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30px;
			border-bottom: 1px solid #dcdcdc;

			.info-left-text {
				margin-bottom: 39rpx;
			}

			.label {
				color: #999999;
				font-size: 26rpx;
				font-weight: 400;
			}

			.val {
				color: #333333;
				font-size: 26rpx;
				font-weight: 400;
			}

			.price-label {
				color: #999999;
				font-size: 24rpx;
				font-weight: 400;
				margin-bottom: 22rpx;
				text-align: center;
			}

			.price-val-text {
				font-size: 36rpx;
				font-weight: 700;
				color: #333333;
				margin-left: 9rpx;
			}

			.price-val {
				font-size: 26rpx;
				color: #333333;
			}

		}

		.card-text-wrap {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 39rpx 60rpx;

			.text-box {
				display: flex;
				flex-direction: column;
				align-items: center;

				.name-text {
					font-size: 30rpx;
					font-weight: 400;
					color: #333333;
				}

				.time-text {
					font-size: 30rpx;
					color: #333333;
					font-weight: 400;
					margin-top: 8rpx;
				}

				.date-text {
					font-size: 24rpx;
					color: #999999;
					font-weight: 400;
					margin-top: 8rpx;
				}
			}

			.arrow-wrap {
				display: flex;
				flex-direction: column;
				align-items: center;

				.d-img {
					width: 186rpx;
					height: 12rpx;
				}

				.arrow-text {
					color: #666666;
					font-size: 26rpx;
				}
			}
		}
	}

	.form-wrap {
		height: 450rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(223, 223, 223, 0.8);
		border-radius: 20rpx;
		margin: 30rpx 30rpx 0 30rpx;
		padding: 30rpx;

		.slot-btn {
			width: 161rpx;
			height: 161rpx;
			background: #F3F3F3;
			border: 1px solid #DCDCDC;
			border-radius: 6rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.v-bord {
				width: 74rpx;
				height: 74rpx;
				border: 1px dashed #dcdcdc;
			}

			.addImg {
				width: 74rpx;
				height: 74rpx;
			}
		}
	}

	.btn {
		margin: 60rpx auto 0;
		width: 670rpx;
		height: 80rpx;
		background: linear-gradient(-90deg, #43A1E0 0%, #13E7C1 100%);
		box-shadow: 0rpx 4rpx 11rpx 1rpx rgba(223, 223, 223, 0.5);
		border-radius: 40rpx;
		text-align: center;
		line-height: 80rpx;
		color: #FFFFFF;
		font-size: 32rpx;
	}
	.tips-wrap {
		position: relative;
		.tips-pos {
			position: absolute;
			left: 110rpx;
			top: -75rpx;
			color: #999999;
			font-size: 22rpx;
		}
	}
</style>