1/pages/customerCS/completeClaimsInfo.vue

<template>
	<view class="complete-claims">
		<u-navbar title="完善理赔信息" titleStyle="{'font-weight':'500','font-size':'32rpx'}" height="108rpx" placeholder="true"></u-navbar>
		<view class="complete-body">
			<!-- 顶部提示 -->
			<view class="tips">
				<image src="../../static/img/complete-tips.png" class="tips-img"></image>
				<text class="tips-text">需扫描绑于螃蟹身上的验蟹师吊牌码添加哦</text>
			</view>
			<!-- 已申请的理赔 -->
			<view class="item">
				<view class="item-left">
					<image src="https://wx3.sinaimg.cn/large/0060qb9Xgy1hsby36rqrxj335s35snpd.jpg"></image>
				</view>
				<view class="item-right">
					<image src="../../static/img/item-img.png"></image>
					<view class="item-num">YXS234568798097871</view>
					<view class="item-con">死蟹｜2 两 公蟹</view>
					<view class="item-price">
						预计理赔<text>12.1222222</text>
					</view>
				</view>
			</view>
			<view class="item">
				<view class="item-left">
					<image src="https://wx3.sinaimg.cn/large/0060qb9Xgy1hsby36rqrxj335s35snpd.jpg"></image>
				</view>
				<view class="item-right">
					<image src="../../static/img/item-img.png"></image>
					<view class="item-num">YXS234568798097871</view>
					<view class="item-con">死蟹｜2 两 公蟹</view>
					<view class="item-price">
						预计理赔<text>12.1222222</text>
					</view>
				</view>
			</view>
			<!-- 添加新的理赔 -->
			<view class="add-btn"  @click="show = true">
				<view class="btn-bgColor">
					<image src="../../static/img/add-scan.png"></image>
					<button>扫码添加</button>
				</view>
			</view>
		</view>
		<!-- 底部按钮 -->
		<view class="complete-bottom" >
			<view class="bottom-left">
				<view>共<text>288888</text>只</view>
				<view>预计赔付</view>
			</view>
			<view class="bottom-price">
				32.12222222
			</view>
			<view class="bottom-btn">
				完成理赔
			</view>
		</view>
		<u-popup ref="popup" :show="show" mode="bottom" @open="open" :safeAreaInsetBottom="false" :round="16" :closeOnClickOverlay="false">
			<scroll-view scroll-y="true"> <!-- 允许上下滚动 -->
				<view class="complete-popup">
					<image src="../../static/img/popup-close.png" @click="close"></image>
					<view class="popup-title">补充理赔规格信息</view>
					<view class="popup-tips">
						<image src="../../static/img/complete-tips.png" class="tips-img"></image>
						<text class="tips-text">规格信息可在包装外侧或购买订单中查看</text>
					</view>
					<view class="popup-item">
						<view class="popup-item-title">
							螃蟹类型
						</view>
						<view class="popup-item-box">
							<view :class="['box-con',{'act': maleIsAct==true}]" @click="isActive">
								<view class="box-left">
									<image src="../../static/img/w1.png"></image>
								</view>
								<view class="box-right">
									<view class="name">公蟹</view>
									<view class="type">尖脐 钳大蟹钳毛多</view>
								</view>
							</view>
							<view :class="['box-con',{'act': maleIsAct==false}]" @click="isActive">
								<view class="box-left">
									<image src="../../static/img/w1.png"></image>
								</view>
								<view class="box-right">
									<view class="name">母蟹</view>
									<view class="type">圆脐 钳小蟹钳毛少</view>
								</view>
							</view>
						</view>
					</view>
					<view class="popup-item">
						<view class="popup-item-title">
							螃蟹规格
						</view>
						<view class="popup-item-box">
							<view :class="['type-item',{'act': item.checked}]" v-for="item in typeList" @click="isTypeActive" :data-id='item.num'>{{item.name}}</view>
						</view>		
					</view>
					<view class="popup-item">
						<view class="popup-item-title img">
							单只蟹称重照片
						</view>
						<view class="item-addition">
							漏出清晰的重量数字及溯源二维码。
						</view>
						<view class="image-box">
							<view class="image-item">
								<image src="https://wx2.sinaimg.cn/large/006WYq6ngy1hsd6nwzzj8j30u00u2dip.jpg"></image>
								<view class="image-tip">
									<image class="tip-icon" src="../../static/img/image-icon.png"></image>
									示例
								</view>
								<view class="image-bottom">需要 1 张</view>
							</view>
							<view class="image-item">
								<image src="https://wx2.sinaimg.cn/large/006WYq6ngy1hsd6nwzzj8j30u00u2dip.jpg"></image>
								<view class="image-tip">
									<image class="tip-icon" src="../../static/img/image-icon.png"></image>
									示例
								</view>
								<view class="image-bottom">需要 1 张</view>
							</view>
							<view class="image-item">
								<image src="https://wx2.sinaimg.cn/large/006WYq6ngy1hsd6nwzzj8j30u00u2dip.jpg"></image>
								<view class="image-tip">
									<image class="tip-icon" src="../../static/img/image-icon.png"></image>
									示例
								</view>
								<view class="image-bottom">需要 1 张</view>
							</view>
							<view class="image-item">
								<image src="https://wx2.sinaimg.cn/large/006WYq6ngy1hsd6nwzzj8j30u00u2dip.jpg"></image>
								<view class="image-tip">
									<image class="tip-icon" src="../../static/img/image-icon.png"></image>
									示例
								</view>
								<view class="image-bottom">需要 1 张</view>
							</view>
							<view class="image-item">
								<image class="image-add" src="../../static/img/image-add.png"></image>
								
							</view>
						</view>
					</view>
					<view class="popup-btn">
						<view class="input-btn">确认提交</view>
					</view>
				</view>
			</scroll-view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				show:false,
				typeList:
					[{
						name:'1.5两以下',
						num:0,
						checked:false
					},{
						name:'1.5 两',
						num:1,
						checked:false
					},{
						name:'2 两',
						num:2,
						checked:false
					},{
						name:'2.5 两',
						num:3,
						checked:false
					},{
						name:'3 两',
						num:4,
						checked:false
					},{
						name:'3.5两',
						num:5,
						checked:false
					},{
						name:'4 两',
						num:6,
						checked:false
					},{
						name:'4.5 两',
						num:7,
						checked:false
					},{
						name:'5 两',
						num:8,
						checked:false
					},{
						name:'5 两以上',
						num:9,
						checked:false
					}],
				maleIsAct:false,
			}
		},
		methods:{
			open(){
				this.show = true
			},
			close(){
				this.show = false
			},
			isActive(){
				if(this.maleIsAct == true){
					this.maleIsAct = false
				}else{
					this.maleIsAct = true
				}
				
			},
			isTypeActive:function(e){
				var index = e.currentTarget.dataset.id
				var list = this.typeList
				console.log(index)
				console.log(list[index].checked)
				if(list[index].checked == true){
					list[index].checked = false
				}else{
					for (var item of this.typeList){
						item.checked = false
					}
					list[index].checked = true
				}
				this.typeList = list
			}
		}
	}
</script>

<style lang="scss">
	.complete-body{
		width: 750rpx;
		min-height: 100vh;
		background: #F5F5F5;
		.tips{
			width: 750rpx;
			height: 60rpx;
			background: #FFFAEE;
			display: flex;
			justify-content: center;
			padding-top: 15rpx;
			box-sizing: border-box;
		}
		.item{
			width: 678rpx;
			height: 180rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			margin: 24rpx 36rpx;
			display: flex;
			padding: 24rpx;
			box-sizing: border-box;
			position: relative;
			.item-left{
				width: 120rpx;
				height: 120rpx;
				border-radius: 12rpx;
				overflow: hidden;
				margin-right: 20rpx;
				>image{
					width: 100%;
					height: 100%;
				}
			}
			.item-right{
				.item-num{
					font-weight: 400;
					font-size: 28rpx;
					color: rgba(0,0,0,0.6);
					line-height: 39rpx;
				}
				.item-con{
					font-weight: 500;
					font-size: 32rpx;
					color: #000000;
					line-height: 45rpx;
					text-align: left;
				}
				.item-price{
					width: 490rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: rgba(0,0,0,0.3);
					line-height: 34rpx;
					text-align: right;
					box-sizing: border-box;
					>text{
						font-weight: 500;
						font-size: 40rpx;
						color: #000000;
						line-height: 56rpx;
						text-align: right;
						&::before{
							content: '¥';
							font-size: 24rpx;
							margin-right: 6rpx;
							margin-left: 8rpx;
						}
					}
				}
				>image{
					width: 32rpx;
					height: 32rpx;
					position: absolute;
					right: 24rpx;
					top: 24rpx;
				}
			}
		}
		.add-btn{
			margin-left: 36rpx;
			.btn-bgColor{
				width: 678rpx;
				height: 92rpx;
				border-radius: 24rpx;
				padding: 2rpx;
				background-image: linear-gradient(91deg, rgba(67, 161, 255, 1), rgba(47, 128, 249, 1));
				box-sizing: border-box;
				position: relative;
				z-index: 5;
				>image{
					position: absolute;
					width: 36rpx;
					height: 36rpx;
					z-index: 10;
					left: 260rpx;
					top: 30rpx;
				}
				>button{
					width: 100%;
					height: 100%;
					border-radius: 24rpx;
					background: #F5F5F5;
					font-weight: 500;
					font-size: 28rpx;
					color: #2388FF;
					line-height: 39rpx;
					padding-left: 60rpx;
					padding-top: 24rpx;
				}
			}
		}
	}
	.complete-bottom{
		width: 750rpx;
		height: 184rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
		display: flex;
		justify-content: space-around;
		padding: 24rpx;
		box-sizing: border-box;
		.bottom-left{
			font-weight: 400;
			font-size: 24rpx;
			color: rgba(0,0,0,0.3);
			text-align-last: justify;
			>view{
				white-space: nowrap; //强制禁止换行
				>text{
					color: #000000 ;
					font-size: 28rpx;
				}
			}
		}
		.bottom-price{
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 48rpx;
			color: #FF2D46;
			line-height: 67rpx;
			&::before{
				content: '¥';
				font-size: 24rpx;
				margin-right: 6rpx;
			}
		}
			
		.bottom-btn{
			width: 346rpx;
			height: 92rpx;
			background: linear-gradient( 91deg, #43A1FF 0%, #2F80F9 100%), #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 39rpx;
			text-align: center;
			padding-top: 26rpx;
			box-sizing: border-box;
		}
	}
	.complete-popup{
		width: 750rpx;
		height: 1428rpx;
		background: #FFFFFF;
		padding: 32rpx 36rpx;
		position: relative;
		box-sizing: border-box;
		//关闭图标
		>image{
			width: 48rpx;
			height: 48rpx;
			position: absolute;
			right: 36rpx;
			top: 24rpx;
		}
		//标题
		.popup-title{
			font-weight: 600;
			font-size: 32rpx;
			color: #000000;
			line-height: 45rpx;
		}
		//提示
		.popup-tips{
			width: 678rpx;
			height: 60rpx;
			background: #FFFAEE;
			border-radius: 16rpx;
			margin-top: 20rpx;
			padding: 14rpx 24rpx;
			box-sizing: border-box;
			display: flex;
			
		}
		.popup-item{
			.popup-item-title{
				font-weight: 600;
				font-size: 28rpx;
				color: #000000;
				line-height: 39rpx;
				margin-bottom: 20rpx;
				margin-top: 24rpx;
				&.img{
					margin-top: 10rpx;
					margin-bottom: 12rpx;
				}
			}
			.popup-item-box{
				width: 678rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
					
			}
			.box-con{
				width: 332rpx;
				height: 120rpx;
				background: #F8F8F8;
				border-radius: 10rpx;
				display: flex;
				justify-content: space-around;
				padding-top: 20rpx;
				box-sizing: border-box;
				.box-left{
					width: 110rpx;
					height: 80rpx;
					overflow: hidden;
					>image{
						width: 100%;
						height: 100%;
					}
				}
				.box-right{
					width: 184rpx;
					height: 70rpx;
					margin-top: 6rpx;
					.name{
						font-weight: 400;
						font-size: 28rpx;
						color: #000000;
					}
					.type{
						font-weight: 400;
						font-size: 22rpx;
						color: rgba(34,34,34,0.6);
						line-height: 31rpx;
					}
				}
				&.act{
					z-index: 15;
					background: rgba(35,136,255,0.1);
					border: 2rpx solid #2388FF;
				}
			}
			.type-item{
				width: 332rpx;
				height: 72rpx;
				background: #F8F8F8;
				border-radius: 8rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #000000;
				line-height: 39rpx;
				text-align: center;
				padding-top: 16rpx;
				box-sizing: border-box;
				margin-bottom: 14rpx;
				&.act{
					z-index: 15;
					background: rgba(35,136,255,0.1);
					border: 2rpx solid #2388FF;
				}
			}
			.item-addition{
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
				line-height: 34rpx;
				text-align: left;
			}
			.image-box{
				display: flex;
				flex-wrap: wrap;
				justify-content: left;
				.image-item{
					width: 226rpx;
					height: 226rpx;
					background: #F3F4F5;
					border-radius: 10rpx;
					box-sizing: border-box;
					overflow: hidden;
					margin-top: 20rpx;
					position: relative;
					text-align: center;
					margin-right: 12rpx;
					>image{
						width: 100%;
						height: 100%;
						z-index: 5;
					}
					.image-tip{
						width: 100rpx;
						height: 38rpx;
						background: rgba(0,0,0,0.6);
						border-radius: 0rpx 0rpx 8rpx 0rpx;
						position: absolute;
						left: 0;
						top: 0;
						z-index: 10;
						font-weight: 400;
						font-size: 22rpx;
						color: #FFFFFF;
						line-height: 31rpx;
						text-align: left;
						padding: 4rpx 12rpx;
						box-sizing: border-box;
						display: flex;
						.tip-icon{
							width: 24rpx;
							height: 24rpx;
							margin-right: 8rpx;
							margin-top: 4rpx;
						}
					}
					.image-bottom{
						width: 226rpx;
						height: 38rpx;
						background: rgba(0,0,0,0.6);
						border-radius: 0rpx 0rpx 8rpx 0rpx;
						position: absolute;
						left: 0;
						right: 0;
						bottom: 0;
						font-weight: 400;
						font-size: 22rpx;
						color: #FFFFFF;
						line-height: 31rpx;
						text-align: center;
					}
					.image-add{
						margin-top: 90rpx;
						width: 48rpx;
						height: 48rpx;
					}
				}
			}
		}
		.popup-btn{
			margin-top: 52rpx;
			height:160rpx;
			.input-btn{
				width: 678rpx;
				height: 92rpx;
				background: linear-gradient( 91deg, #43A1FF 0%, #2F80F9 100%), #FFFFFF;
				border-radius: 24rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 39rpx;
				text-align: center;
				padding: 26rpx;
				box-sizing: border-box;
			}
		}
	}
	.tips-img{
		width: 86rpx;
		height: 30rpx;
	}
	.tips-text{
		font-weight: 400;
		font-size: 24rpx;
		color: #F0A941;
		line-height: 34rpx;
		margin-left: 12rpx;
	}
</style>