JiangningUrbanManageApp/sub-public/lipei-info/lipei-info.vue

<template>
	<view class="container-main">
		<view class="tabList">
			<view class="" v-for="(item, index) in tabList" :key="index"
				:class="currentIndex == index ? 'activeTab' : ''" @click="clickTab(index)">{{ item.name }}</view>
		</view>
		<view class="data-main" v-show="currentIndex == 0">
			<view class="data-rows" style="padding-top: 0">
				<view class="data-lable">姓 名</view>
				<view class="data-value"> 1</view>
			</view>
			<view class="data-rows">
				<view class="data-lable">身份证号</view>
				<view class="data-value"> 2</view>
			</view>
			<view class="data-rows">
				<view class="data-lable">手机号码</view>
				<view class="data-value">3</view>
			</view>
			<view class="data-rows">
				<view class="data-lable">收款账号</view>
				<view class="data-value">3</view>
			</view>
			<view class="data-rows">
				<view class="data-lable">企业名称</view>
				<view class="data-value">2</view>
			</view>
			<view class="data-rows">
				<view class="data-lable">事故类型</view>
				<view class="data-value">3</view>
			</view>
			<view class="data-rows" style="align-items: flex-start">
				<view class="data-lable">事故描述</view>
				<view class="data-value">
					23 
				</view>
			</view>
		<!-- 	<view class="data-rows" style="flex-direction: column; align-items: flex-start"
				v-show="form.accidentPhotos">
				<view class="data-lable" style="margin-bottom: 20rpx">事故照片</view>
				<view class="data-value data-img">
					<view style="width: 30.33%;" v-for="(item, index) in form.accidentPhotos" :key="index"
						:style="{margin:index == 1 ? '0 5%' : ''}">
						<u-image height="188rpx" :src="baseUrl + '/common/download/downloadmino?filename=' + item"
							mode="" @click="
						  viewIamge(
						    baseUrl + '/common/download/downloadmino?filename=' + item,
						    index
						  )
						"></u-image>
					</view>

				</view>
			</view> -->
			<view class="data-rows" style="border: 0; padding-bottom: 0">
				<view class="data-lable">申请时间</view>
				<view class="data-value">{{ form.appliactionTime || "" }}</view>
			</view>
		</view>
		<view class="data-main" v-show="currentIndex == 1" style="min-height: 200rpx">
			<view class="data-rows" style="padding-top: 0">
				<view class="data-lable">保险公司</view>
				<view class="data-value"> {{ form.company_name || "" }}</view>
			</view>
			<view class="data-rows">
				<view class="data-lable">保险产品</view>
				<view class="data-value"> {{ form.product_name || "" }}</view>
			</view>
			<view class="data-rows">
				<view class="data-lable">处理状态</view>
				<view class="data-value">
					{{
            form.status == 0 ? "处理中" : form.status == 1 ? "已处理" : "已拒绝"
          }}
				</view>
			</view>
			<view class="data-rows">
				<view class="data-lable">赔付金额</view>
				<view class="data-value"> {{ form.amount || "" }}</view>
			</view>
			<view class="data-rows">
				<view class="data-lable">负责人</view>
				<view class="data-value"> {{ form.curator || "" }}</view>
			</view>
			<view class="data-rows">
				<view class="data-lable">联系电话</view>
				<view class="data-value"> {{ form.tel || "" }}</view>
			</view>
			<view class="data-rows" style="align-items: flex-start">
				<view class="data-lable">赔偿说明</view>
				<view class="data-value">
					{{ form.compernsation || "" }}
				</view>
			</view>
			<view class="data-rows" style="flex-direction: column; align-items: flex-start"
				v-show="form.paymentcertificate">
				<view class="data-lable" style="margin-bottom: 20rpx">付款证明</view>
				<view class="data-img">
					<view style="width: 30.33%;" v-for="(item, index) in form.paymentcertificate" :key="index"
						:style="{margin:index == 1 ? '0 5%' : ''}">
						<u-image height="188rpx" :src="baseUrl + '/common/download/downloadmino?filename=' + item"
							mode="" @click="
				  viewIamge(
				    baseUrl + '/common/download/downloadmino?filename=' + item,
				    index
				  )
				"></u-image>
					</view>
				</view>
			</view>
			<view class="data-rows" style="border: 0; padding-bottom: 0">
				<view class="data-lable">处理时间</view>
				<view class="data-value">{{ form.processingTime || "" }}</view>
			</view>
		</view>
	</view>
</template>

<script>

	import config from "@/config.js";
	export default {
		data() {
			return {
				baseUrl: config.baseUrl,
				currentIndex: 0,
				form: {},
				typeState: [{
					lable: "食物中毒",
					value: 0,
				}, ],
				tabList: [{
						name: "申请信息",
					},
					{
						name: "处理信息",
					},
				],
			};
		},
		onLoad(option) {
			this.getInfo(option.id);
		},
		methods: {
			//预览图片
			viewIamge(url, index) {
				uni.previewImage({
					current: index,
					urls: url.split(","),
				});
			},
			// 翻译
			filerDict(value) {
				if (value == undefined) return;
				let name = this.typeState.filter((item) => item.value == value);
				return name[0].lable;
			},
			//详情
			getInfo(id) {
			
			},
			clickTab(index) {
				this.currentIndex = index;
			},
		},
	};
</script>

<style lang="scss" scoped>
	.container-main {
		box-sizing: border-box;
		padding: 20rpx;

		.tabList {
			height: 88rpx;
			border-radius: 16rpx;
			background: #fff;
			display: flex;
			align-items: center;

			&>view {
				flex: 1;
				text-align: center;
				font-size: 30rpx;
				font-weight: 400;
				color: #34373b;
			}

			&>view:nth-child(1) {
				border-right: 1px solid #dce3ec;
			}

			.activeTab {
				font-weight: 600;
				color: #3976f1;
			}
		}

		.data-main {
			min-height: 900rpx;
			border-radius: 16rpx;
			background: #fff;
			box-sizing: border-box;
			padding: 30rpx;
			margin-top: 20rpx;
		}

		.data-rows {
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid #ecf1f7;
			box-sizing: border-box;
			padding: 30rpx 0;

			.data-lable {
				width: 150rpx;
				font-size: 30rpx;
				font-weight: 400;
				color: #34373b;
			}

			.data-value {
				flex: 1;
				font-size: 30rpx;
				font-weight: 400;
				color: #616367;
			}

			.data-img {
				width: 100%;
				display: flex;
				align-items: center;
			}
		}
	}
</style>