JP-Equipment-Jingli/pages/storeManagement/equipmentInspection/planDetail.vue

<template>
	<view>
		<u-navbar title="计划详情"></u-navbar>
		<view class="head">
			<view class="title">
				接地线
			</view>
			<view class="item">
				<view class="name">
					数量：
				</view>
				<view class="value">
					7根
				</view>
			</view>
			<view class="item">
				<view class="name">
					领用人：
				</view>
				<view class="value">
					孙斌
				</view>
			</view>
			<view class="item">
				<view class="name">
					计划日期：
				</view>
				<view class="value">
					2023/03/15-2023/03/20
				</view>
				<view class="unfold" @click="changeShow()">
					展开<u-icon size="28" name="arrow-down"></u-icon>
				</view>
				<view class="options" v-if="this.show==true" @click="changeShow()">
					选项3
				</view>
			</view>
		</view>
		<view class="container">
			<view class="main">
				<view class="list-item" v-for="item in 2">
					<!--信息 -->
					<view class="list-infos">
						<view class="infos-head">
							<view class="name">
								50KV直流高压电缆
							</view>
							
						</view>
						<view class="infos">
							<view class="infos-1">
								<view class="infos-item">
									<view class="item-name">
										型号：
									</view>
									<view class="item-value">
										GZYV GYVZ-50
									</view>
								</view>
		
							</view>
							<view class="infos-2">
								<view class="infos-item">
									<view class="item-name">
										设备编号：
									</view>
									<view class="item-value">
										ND920182001511
									</view>
								</view>
		
							</view>
		
						</view>
		
					</view>
					<view class="receive-options">
						<view class="title">
							巡检结果
						</view>
						<view class="receive-radio">
							<u-radio-group v-model="value" @change="radioGroupChange">
								<u-radio @change="radioChange" v-for="(item, index) in list" :key="index"
									:name="item.name" :disabled="item.disabled">
									{{item.name}}
								</u-radio>
							</u-radio-group>
						</view>
					</view>
					<!-- 备注 -->
					<textarea placeholder="备注" name="" id="" cols="30" rows="10"></textarea>
				
				<!-- 上传图片 -->
					<view class="upload-img">
						<u-upload width="144" height="144"  upload-text="" del-bg-color="#0051FF"   :before-upload="beforeUpload"></u-upload>
					</view>
				</view>
		
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						name: '合格',
						disabled: false
					},
					{
						name: '不合格',
						disabled: false
					},

				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				value: '合格',
				show:false
			};
		},
		methods: {
			// 选中某个单选框时，由radio时触发
			radioChange(e) {
				// console.log(e);
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				// console.log(e);
			},
			beforeUpload(index, list) {
							// 只上传偶数索引的文件
							if(index % 2 == 0) return true;
							else return false;
						},
						changeShow(){
							this.show=!this.show
						}
						
		},
		
	};
</script>

<style scoped lang="scss">
	.head{
		background-color: #fff;
		padding: 32rpx;
		.title{
			color: rgba(51, 51, 51, 1);
			font-size: 36rpx;
			margin-bottom: 16rpx;
		}
		.item{
			display: flex;
			color: #777777 ;
			margin-top: 16rpx;
			
			.name,.value{
				font-weight: bold;
			}
			.unfold{
				margin-left: auto;
				position: relative;
			color:#929EA5;
			font-family: Microsoft Yahei;
			/deep/.uicon-arrow-down{
				margin-left: 8rpx;
			}
			}
			.options{
				width: 120rpx;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				background-color: #fff;
				color: rgba(65, 80, 88, 1);
				font-family: Microsoft Yahei;
				position: absolute;
				top: 320rpx;
				right: 24rpx;
				box-shadow:5px 5px 10px gray;
			}
		}
	}
.container {
		.main {
			padding: 0 24rpx;

			.list-item {
				border-radius: 8px;
				padding: 24rpx;
				background-color: #fff;
				margin-top: 24rpx;
			}

			// 信息
			.list-infos {
				padding-bottom: 24rpx;
				border-bottom: 1px solid rgba(232, 232, 232, 1);

				.infos-head {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 24rpx;

					.name {
						color: rgba(51, 51, 51, 1);
						font-size: 32rpx;
					}

					.state {
						border: 1px solid rgba(69, 186, 69, 1);
						border-radius: 4px;
						color: rgba(69, 186, 69, 1);
						font-size: 24rpx;
						line-height: 48rpx;
						width: 160rpx;
						text-align: center;

						text {
							img {
								vertical-align: middle;
								margin-right: 4rpx;
							}
						}
					}

					
				}

				.infos {
					margin-top: 16rpx;
					display: flex;
					justify-content: space-between;
					color: #777777;
					font-size: 24rpx;

					

					.infos-item {
						display: flex;
						margin-bottom: 8rpx;
						.item-value{
							width: 200rpx;
							overflow: hidden;
							 white-space: nowrap;
							 text-overflow: ellipsis;
						}
					}
				}
			}

			// 接收选项
			.receive-options {
			 display: flex;
				align-items: center;
				padding: 24rpx 0;

				.title {
					color: #333333;
					margin-right: 24rpx;
					font-weight: bold;
				}

				.receive-radio {
					flex: 1;

					/deep/.u-radio-group {
						width: 100%;

					}

					/deep/.u-radio {
						margin-right: 48rpx;
					}
				}

			}

			// 备注
			uni-textarea {
				width: 100%;
				height: 80rpx;
				line-height: 80rpx;
				text-indent: 24rpx;
				background-color: rgba(241, 242, 245, 1);
				color: rgba(136, 136, 136, 1);
				border-radius: 8px;
				font-family: Microsoft Yahei;
				font-size: 28rpx;
			}
			// 上传图片
			.upload-img{
				margin-top: 24rpx;
				/deep/.u-add-tips{
					margin-top: 0;
				}
				// 右上角删除图标
				/deep/.u-delete-icon{
					top: -8rpx;
					right: -8rpx;
					width: 36rpx;
					height: 36rpx;
				}
				/deep/.u-list-item{
					overflow: inherit;
				}
				/deep/.u-list-item{
					margin-right: 8rpx;
				}
			}

		}



	}
</style>