修改申请

pagesHome/notarization/detail.vue

@@ -1,10 +1,56 @@
 <template>
 	<view class="content">
-		<view class="one">
-			业务详情
+		<view class="info">
+			<scroll-view scroll-y="true" class="scroll-view">
+				<view class="list-scroll-view">
+					<view class="one">
+						<view class="one_1">申请材料</view>
+						<view class="one_2">
+							<u--form :model="form" ref="uForm" :rules="{}" labelWidth="500" label-position="top">
+								<u-form-item v-for="(item, index) in info.material" :key="index"
+									:label="index+1+'.'+item.label" :prop="index">
+									<u-upload v-if="item.type=='0'" :fileList="form[index]" @afterRead="afterRead"
+										@delete="deletePic" :name="index" multiple :maxCount="10" width="250"
+										height="150"></u-upload>
+									<input v-else-if="item.type=='1'" class="input" v-model="form[index]"
+										:placeholder="text+item.label" />
+								</u-form-item>
+							</u--form>
+						</view>
+					</view>
+					<view class="two">
+						<view class="two_1">费用信息</view>
+						<view class="two_2">
+							<view class="left">是否需要邮寄</view>
+							<view class="right">
+								<u-switch v-model="is_open" size="20"></u-switch>
+							</view>
+						</view>
+						<view class="two_2" v-if="is_open">
+							<view class="left">收货地址</view>
+							<view class="right">1</view>
+						</view>
+						<view class="two_2" v-if="is_open">
+							<view class="left">邮费</view>
+							<view class="right">1</view>
+						</view>
+					</view>
+					<view class="thr">
+						<view class="thr_1">
+							收费标准： <text class="moeny">￥{{info.money||'0'}}</text>
+						</view>
+						<view class="thr_1">
+							收费依据：{{info.basic||'暂无'}}
+						</view>
+						<view class="thr_1">
+							简介：<rich-text :nodes="info.content"></rich-text>
+						</view>
+					</view>
+				</view>
+			</scroll-view>
 		</view>
-		<view class="two">
-			1
+		<view class="foot">
+			<button class="btn" @tap="formSubmit">确认无误并签字</button>
 		</view>
 	</view>
 </template>
@@ -19,6 +65,10 @@
 	const config = ref({ logo: [], file: [] });
 	const id = ref('');
 	const info = ref({});
+	const form = ref({});
+	const text = ref('请输入');
+	// 是否需要邮寄
+	const is_open = ref(false);
 	// 字典表
 	const businessList = ref([]);
 	onLoad(async (options) => {
@@ -69,53 +119,111 @@
 		const res = list.find((f) => f.value == data);
 		return res?.label || '暂无';
 	};
+	// 删除图片
+	const deletePic = (event) => {
+		console.log(event);
+	};
+	// 新增图片
+	const afterRead = async (event) => {
+		console.log(event);
+	};
 </script>
 <style lang="scss" scoped>
 	.content {
 		display: flex;
 		flex-direction: column;
+		width: 100vw;
+		height: 100vh;
 
-		.one {
-			display: flex;
-			justify-content: center;
-			margin: 2vw;
-		}
+		.info {
+			position: relative;
+			flex-grow: 1;
+			background-color: var(--f1Color);
 
-		.two {
-			padding: 2vw;
 
-			.name {
-				margin: 2vw 0;
-				font-size: var(--font16Size);
-			}
+			.one {
+				margin: 2vw;
+				border: 1px solid var(--f5Color);
+				border-radius: 5px;
 
-			.other {
-				margin: 2vw 0;
-				font-size: var(--font14Size);
+				.one_1 {
+					text-align: center;
+					font-weight: bold;
+					color: var(--mainColor);
+					background-color: var(--fFFColor);
+					border-radius: 5px 5px 0 0;
+					padding: 2vw 0;
+				}
 
-				text {
-					color: var(--f85Color);
+				.one_2 {
+					padding: 2vw;
+					background-color: var(--mainColor);
+					border-radius: 0 0 5px 5px;
 				}
 			}
 
-			.list {
-				text {
-					margin: 2vw 0;
-					font-size: var(--font14Size);
+			.two {
+				margin: 2vw;
+				border: 1px solid var(--f5Color);
+				border-radius: 5px;
+
+				.two_1 {
+					text-align: center;
+					font-weight: bold;
+					color: var(--mainColor);
+					background-color: var(--fFFColor);
+					border-radius: 5px 5px 0 0;
+					padding: 2vw 0;
 				}
 
-				.list_1 {
+				.two_2 {
 					display: flex;
-					font-size: var(--font12Size);
-					color: var(--f85Color);
-					margin: 1vw;
+					justify-content: space-between;
+					padding: 3vw;
+					background-color: var(--mainColor);
+					font-size: var(--font14Size);
 				}
+			}
+
+
+			.thr {
+				margin: 2vw;
+				padding: 2vw;
+				background-color: var(--mainColor);
 
-				.content {
-					margin: 1vw;
+				.thr_1 {
 					font-size: var(--font14Size);
+					padding: 1vw;
+
+					.moeny {
+						color: var(--fF0Color);
+					}
 				}
 			}
+
+		}
+
+		.foot {
+			padding: 2vw;
+
+			.btn {
+				font-size: var(--font14Size);
+				color: var(--mainColor);
+				background-color: var(--fFFColor);
+			}
+		}
+	}
+
+	.scroll-view {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+
+		.list-scroll-view {
+			display: flex;
+			flex-direction: column;
 		}
 	}
 </style>