miniapp/pages/handlecase/component/chooseMethod.vue

<template>
	<view class="assignrbitrators">
		<view class="from">
			<uni-forms ref="form" :modelValue="formData" :rules="rules">
				<view class="title">案件详情</view>
				<view class="box">
					<uni-forms-item label="案件编号：" name="taskname" label-width="120px" required>
						<uni-easyinput :inputBorder="false" :disabled='true' v-model="formData.taskname"
							placeholder="" />
					</uni-forms-item>
					<uni-forms-item label="申请人：" name="taskname" label-width="120px" required>
						<uni-easyinput :inputBorder="false" :disabled='true' v-model="formData.taskname"
							placeholder="" />
					</uni-forms-item>
					<uni-forms-item label="被申请人：" name="taskname" label-width="120px" required>
						<uni-easyinput :inputBorder="false" :disabled='true' v-model="formData.taskname"
							placeholder="" />
					</uni-forms-item>
					<uni-forms-item label="借款开始日期：" name="taskname" label-width="120px" required>
						<uni-easyinput :inputBorder="false" :disabled='true' v-model="formData.taskname"
							placeholder="" />
					</uni-forms-item>
					<uni-forms-item label="借款结束日期：" name="taskname" label-width="120px" required>
						<uni-easyinput :inputBorder="false" :disabled='true' v-model="formData.taskname"
							placeholder="" />
					</uni-forms-item>
					<uni-forms-item label="案件标的：" name="taskname" label-width="120px" required>
						<uni-easyinput :inputBorder="false" :disabled='true' v-model="formData.taskname"
							placeholder="" />
					</uni-forms-item>
					<uni-forms-item label="申请人主张欠本金：" name="taskname" label-width="120px" required>
						<uni-easyinput :inputBorder="false" :disabled='true' v-model="formData.taskname"
							placeholder="" />
					</uni-forms-item>
					<uni-forms-item label="申请人主张欠利息：" name="taskname" label-width="120px" required>
						<uni-easyinput :inputBorder="false" :disabled='true' v-model="formData.taskname"
							placeholder="" />
					</uni-forms-item>
					<uni-forms-item label="申请人主张违约金：" name="taskname" label-width="120px" required>
						<uni-easyinput :inputBorder="false" :disabled='true' v-model="formData.taskname"
							placeholder="" />
					</uni-forms-item>
					<uni-forms-item label="证据材料" name="headImage" required :disabled='true'>
						<!-- <img-upload :limit='3' :value.sync="formData.headImage" ></img-upload> -->
						<view  class="imagearea">
							<image class="image" v-for="(item,index) in formData.headImage" :key="index" :src="formData.headImage[index].pics_small_url"
								@click="getImgIndex(index)"></image>
						</view>
					</uni-forms-item>
					<uni-forms-item label="是否指派仲裁员" label-width="120px" name="maintenancetype" required>
						<uni-data-checkbox class='checkbox' :disabled='true' v-model="formData.maintenancetype"
							:localdata="maintenancetypeArr" @change='maintenancetypeChange'></uni-data-checkbox>
					</uni-forms-item>
					<uni-forms-item label="选择仲裁方式" label-width="120px" name="arbitrationmethod" required>
						<uni-data-checkbox class='checkbox' v-model="formData.arbitrationmethod"
							:localdata="arbitrationmethodArr" @change='arbitrationmethod'></uni-data-checkbox>
					</uni-forms-item>
				</view>
			</uni-forms>
			<view>
			</view>
		</view>

	</view>
</template>

<script>
	import ImgUpload from '@/components/imgUpload.vue'
	export default {
		data() {
			return {
				formData: {
					headImage: [{
							index: 1,
							pics_small_url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg'
						},
						{
							index: 2,
							pics_small_url: 'https://img1.baidu.com/it/u=1310564963,1641173348&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800'
						},
						{
							index: 3,
							pics_small_url: 'https://img1.baidu.com/it/u=1310564963,1641173348&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800'
						},
						{
							index: 4,
							pics_small_url: 'https://img1.baidu.com/it/u=1310564963,1641173348&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800'
						}
					]
				},
				rules: {},
				maintenancetypeArr: [{
					text: '是',
					value: 0
				}, {
					text: '否',
					value: 1
				}, ],
				arbitrationmethodArr: [{
					text: '书面仲裁',
					value: 0
				}, {
					text: '视频仲裁',
					value: 1
				}]
			}
		},
		methods: {
			maintenancetypeChange(val) {
				console.log(val, "PPPPPPPPPPPPPPPPPP");
			},
			// 仲裁方式
			arbitrationmethod(val) {
				console.log(val, "仲裁方式");
			},
			getImgIndex(index) {
				// console.log(index);
				//准备一个装图片路径的  数组imgs
				let imgs = this.formData.headImage.map(item => {
					// console.log(item, 'item');
					//只返回图片路径
					return item.pics_small_url
				})
				// console.log(imgs);
				//调用预览图片的方法
				uni.previewImage({
					urls: imgs,
					current: index,
					loop: true,
				})
			},
		},
		components: {
			// 'img-upload': ImgUpload,
		},
	}
</script>

<style lang="scss">
	.assignrbitrators {
		// text-align: center;
		padding: 20rpx;

		.box {
			background-color: #fff;
			padding: 20rpx;
			border-radius: 20rpx;
			.imagearea {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				justify-content: space-evenly;
				.image {
					width: 40%;
					height: 200rpx;
					margin-top: 15rpx;
				}
			}

		}

		.flexd {
			padding-top: 20rpx;

			.btn {
				width: 80%;
				font-size: 26rpx;
				border-radius: 60rpx;
			}
		}

		.btn {
			margin-top: 20rpx;
		}

		.select-picker {
			display: flex;
			box-sizing: border-box;
			flex-direction: row;
			align-items: center;
			border: 1px solid #DCDFE6;
			border-radius: 8rpx;
			width: 100%;
			height: 100%;
			padding: 0 24rpx;
			font-size: 28rpx;
		}

		.table-content {
			background-color: #fff;
			padding: 20rpx;
			border-radius: 20rpx;

			.none {
				font-size: 24rpx;
				height: 60rpx;
				line-height: 60rpx;
			}
		}

		.box {
			/deep/.title {
				font-size: 28rpx;
				height: 60rpx;
				line-height: 60rpx;
			}
		}

		.htmltitle {
			font-size: 30rpx;
			height: 80rpx;
			line-height: 80rpx;
			display: flex;
			justify-content: space-between;

			.look {
				color: #0D91F9;
			}
		}

		.title {
			font-size: 30rpx;
			height: 80rpx;
			line-height: 80rpx;
		}

		.adsTitle {
			font-size: 30rpx;
		}

		.multiple {
			width: 75%;
			height: 72rpx;
			line-height: 72rpx;
			font-size: 24rpx;
			// @include text-overflow($width: 100%)
		}
	}
</style>