zhapp/pages/tool/selfReport.vue

<template>
	<view class="page">
		<view class="bg-header">
			<view class="item" v-for="(item,index) in itemlist" :key="index" @click="itemclick(item)">
				<image :src="item.image" mode=""></image>
				<text>{{item.Text}}</text>
			</view>
		</view>
		<view class="report-phone mt-2">
			<view class="header">
				<view class="title dis a-c j-s mb-3">
					<text>电话报案</text>
					<text>102家保险公司报案电话</text>
				</view>
				<u-search placeholder="请输入保险公司名称查找" v-model="keyword" bgColor="#f7f7f7"
					:actionStyle="{position: 'absolute',right:'20px',background:'#FDE935',padding:'8rpx 24rpx',borderRadius:'100rpx'}"
					actionText="搜索" @search="search" @custom="custom"></u-search>
			</view>
			<view style="overflow-y: auto;height:calc(100vh - 372px) ;">
				<view class="item dis a-c j-s" v-for="(item,index) in claimmobiles" :key="index">
					<view class="dis a-c ">
						<image :src="item.icon" mode=""></image>
						<text>{{item.name}}</text>
					</view>
					<image src="/static/icon/tool/phone.png" mode="" @click="makecall(item.mobile)"></image>
				</view>
			</view>
		</view>
		<uni-Popup :show="show" @close='show=false' :headerTitle="info.Text">
			<template #content>
				<view class="introduction dis f-c">
					<text>{{info.content}}</text>
					<ul>
						<li v-for="(item,index) in info.point" :key="index">{{item}}</li>
					</ul>
					<view class="btn dis a-c j-c " @click="show=false">
						关闭
					</view>
				</view>
			</template>
		</uni-Popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				info: {},
				keyword: '',
				itemlist: [{
						image: '/static/image/tool/report-bg1.png',
						Text: "单方事故",
						content: '在驾驶过程中，由于驾驶员意外碰撞外界物体，如地下车库、墙、花坛等，造成的车辆的损失或自己的受伤。单方事故是不需要赔偿对方人员伤亡或财产损失。',
						point: [
							'事故发生后，在确保人身安全和不阻碍交通的情况下，第一时间先拨打交警或保司的电话',
							'尽量取证，自行拍摄一些简单的视频、照片等能说明情况的录影录像',
							'等待查勘员到来，根据案件情况进行处理',
							'轻微案件:由于第二年保费是和出险次数(实际理赔)有关，如果别蹭情况不严重，建议用户自行修复',
							'需理赔案件:送至保险公司指定的合规维修单位进行修理，一般保司定损需要1-3个工作日，请耐心等待即可取回爱车',
						]
					},
					{
						image: '/static/image/tool/report-bg2.png',
						Text: "代驾事故",
						content: '代驾行为无论是朋友、还是免费代驾、付费代驾，途中发生事故，责任主要都由车主或车主投保的车险来进行承担',
						point: [
							'事故发生后，在确保人身安全和不阻碍交通的情况下，第一时间先拨打交警或保司的电话 ',
							'如果是车主同意的好友代驾:所有赔付由车主本人投保的车险来承担:如果是免费/收费的代驾服务:赔付由车主本人投保的车险来承担，不足的部分由代驾方公司承担 ',
							'轻微案件:由于第二年保费是和出险次数(实际理赔)有关，如果别蹭情况不严重，建议用户自行修复',
							'需理赔案件:送至保险公司指定的合规维修单位进行修理，一般保司定损需要1-3个工作日，请耐心等待即可取回爱车'
						]
					},
					{
						image: '/static/image/tool/report-bg3.png',
						Text: "人伤事故",
						content: '在驾驶过程中，由于驾驶员意外碰撞外界物体，如地下车库、墙、花坛等，造成的车辆的损失或自己的受伤。单方事故是不需要赔偿对方人员伤亡或财产损失。',
						point: [
							'打120:伤势严重一定先打医院电话',
							'打122(交警电话):联系交警，判定责任保留现场',
							'致电所在保险公司电话:尽快联系，获得帮助'
						]
					},
					{
						image: '/static/image/tool/report-bg4.png',
						Text: "车辆停车受损",
						content: '车辆在停放过程中发生损坏，主要分为“自然灾害原因”与“人为过失原因”。人为包括第三方逃逸的情况。自然灾害原因:①大风刮倒大树、冰雹砸到车辆:②暴雨洪水毁淹车辆:③台风、地震等导致露天停放车辆受损;④第三方管理不善，造成车辆损失，如停车场',
						point: [
							'如果车泡水，千万不要二次发动',
							'保护好现场，拍照拍视频取证',
							'如能找到责任方，如停车场则尽快取得联系若不能或对方不配合，致电所在保险公司，尽快联系，获得帮助',
							'若无法找到第三者，不必担心，保险中“车险损失保险”可覆盖责任，进行全额理赔'
						]
					}
				],
				claimmobiles: [{
						icon: "/static/image/insuranceicon/ansheng.png",
						name: "安盛天平",
						mobile: "95550"
					},
					{
						icon: "/static/image/insuranceicon/dadi.png",
						name: "大地保险",
						mobile: "95590"
					},
					{
						icon: "/static/image/insuranceicon/zijin.png",
						name: "紫金财险",
						mobile: "400-828-0018"
					},
					{
						icon: "/static/image/insuranceicon/libao.png",
						name: "利宝保险",
						mobile: "400-888-2008"
					},
					{
						icon: "/static/image/insuranceicon/sanxing.png",
						name: "三星保险",
						mobile: "400-933-3000"
					},
					{
						icon: "/static/image/insuranceicon/pingan.png",
						name: "平安保险",
						mobile: "95511"
					},
					{
						icon: "/static/image/insuranceicon/huatai.png",
						name: "华泰保险",
						mobile: "400-609-5509"
					},
					{
						icon: "/static/image/insuranceicon/huaan.png",
						name: "华安保险",
						mobile: "95556"
					},
					{
						icon: "/static/image/insuranceicon/bohai.png",
						name: "渤海财产",
						mobile: "400-611-6666"
					},
					{
						icon: "/static/image/insuranceicon/zhongmei.png",
						name: "中煤保险",
						mobile: "400-653-6888"
					},
					{
						icon: "/static/image/insuranceicon/dinghe.png",
						name: "鼎和保险",
						mobile: "95393"
					},
					{
						icon: "/static/image/insuranceicon/dajia.png",
						name: "大家保险",
						mobile: "95569"
					},
					{
						icon: "/static/image/insuranceicon/fude.png",
						name: "福德保险",
						mobile: "400-669-5535"
					},
					{
						icon: "/static/image/insuranceicon/taiping.png",
						name: "太平保险",
						mobile: "95589"
					},
					{
						icon: "/static/image/insuranceicon/anhua.png",
						name: "安华农业",
						mobile: "95540"
					},
					{
						icon: "/static/image/insuranceicon/dubang.png",
						name: "都邦保险",
						mobile: "95586"
					},
					{
						icon: "/static/image/insuranceicon/zhongan.png",
						name: "众安保险",
						mobile: "1010-9955"
					},
					{
						icon: "/static/image/insuranceicon/yongan.png",
						name: "永安保险",
						mobile: "95502"
					},
					{
						icon: "/static/image/insuranceicon/xiandai.png",
						name: "现代保险",
						mobile: "400-608-0808"
					},
					{
						icon: "/static/image/insuranceicon/renshou.png",
						name: "中国人寿",
						mobile: "95519"
					},
					{
						icon: "/static/image/insuranceicon/guotai.png",
						name: "国泰财险",
						mobile: "400-820-2288"
					},
					{
						icon: "/static/image/insuranceicon/zhonghua.png",
						name: "中华联合",
						mobile: "95585"
					},
					{
						icon: "/static/image/insuranceicon/zhongyin.png",
						name: "中银保险",
						mobile: "400-699-5566"
					},
					{
						icon: "/static/image/insuranceicon/hezhong.png",
						name: "合众保险",
						mobile: "95515"
					},
					{
						icon: "/static/image/insuranceicon/yongcheng.png",
						name: "永诚保险",
						mobile: "95552"
					},
					{
						icon: "/static/image/insuranceicon/zhufeng.png",
						name: "珠峰财险",
						mobile: "1010-8848"
					},
					{
						icon: "/static/image/insuranceicon/anxin.png",
						name: "安心保险",
						mobile: "95303"
					},
					{
						icon: "/static/image/insuranceicon/huanong.png",
						name: "华农保险",
						mobile: "95540"
					},
					{
						icon: "/static/image/insuranceicon/ancheng.png",
						name: "安诚保险",
						mobile: "95544"
					},
					{
						icon: "/static/image/insuranceicon/renbao.png",
						name: "人保保险",
						mobile: "95518"
					},
					{
						icon: "/static/image/insuranceicon/guoren.png",
						name: "国任财险",
						mobile: "400-866-7788"
					},
					{
						icon: "/static/image/insuranceicon/yangguang.png",
						name: "阳光保险",
						mobile: "95510"
					},
					{
						icon: "/static/image/insuranceicon/yatai.png",
						name: "亚太财险",
						mobile: "95506"
					},
					{
						icon: "/static/image/insuranceicon/yingda.png",
						name: "英大保险",
						mobile: "400-018-8688"
					},
					{
						icon: "/static/image/insuranceicon/zheshang.png",
						name: "浙商保险",
						mobile: "400-866-6777"
					},
					{
						icon: "/static/image/insuranceicon/taipingyang.png",
						name: "太平洋保险",
						mobile: "95500"
					},
					{
						icon: "/static/image/insuranceicon/tianan.png",
						name: "天安财险",
						mobile: "95505"
					}

				],
				companyList: [],
			}
		},
		onShow() {

		},
		onLoad() {
			this.companyList = [...this.claimmobiles]
		},
		methods: {
			itemclick(item) {
				this.info = item;
				this.show = true;
			},
			search(value) {
				this.onConfirm(value)
			},
			custom(value) {
				this.onConfirm(value)
			},
			//打电话
			makecall(value) {
				// 获取宿主上下文  
				var main = plus.android.runtimeMainActivity();
				var Uri = plus.android.importClass("android.net.Uri");
				// 通过反射获取Android的Intent对象  
				var Intent = plus.android.importClass("android.content.Intent");
				// 创建Intent，设置Action为ACTION_DIAL  
				var intent = new Intent("android.intent.action.DIAL");
				// 设置要拨打的电话号码  
				intent.setData(Uri.parse("tel:" + value));
				// 启动Intent  
				main.startActivity(intent);
			},
			// 搜索电话
			onConfirm(e) {
				let arr = [...this.companyList]
				let newAarr = []

				arr.forEach((v, i) => {
					if (v.name.includes(e)) {
						newAarr.push(v)
					}
				})
				this.claimmobiles = e != '' ? [...newAarr] : [...this.companyList]
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {

		background-color: #F8F8F8;

		height: 100vh;

	}

	.bg-header {
		background-color: #fff;
		padding: 30rpx;
		box-sizing: border-box;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: auto;
		row-gap: 30rpx;
		column-gap: 30rpx;

		.item {
			height: 163rpx;
			background: #FFFEF3;
			border-radius: 4rpx 4rpx 4rpx 4rpx;
			position: relative;

			image {
				width: 100%;
				height: 100%;
				background: linear-gradient(117deg, rgba(255, 254, 243, 0) 0%, #FFFEF3 100%);
				border-radius: 0rpx 0rpx 0rpx 0rpx;
			}

			text {
				position: absolute;
				bottom: 20rpx;
				right: 20rpx;
				font-size: 30rpx;
				color: #333;
				font-weight: bold;
			}
		}
	}

	.report-phone {
		background-color: #fff;
		padding-bottom: 20rpx;

		.header {
			padding: 30rpx;
			box-sizing: border-box;

			.title {
				text:first-child {
					font-size: 34rpx;
					color: #333;
					font-weight: bold;
				}

				text:last-child {
					font-size: 26rpx;
					color: #999;
				}
			}
		}

		.item {
			padding: 21rpx 35rpx;
			box-sizing: border-box;
			border-bottom: 1rpx solid #eee;

			text {
				font-size: 30rpx;
				color: #333;
				font-weight: bold;
				margin-left: 10rpx;
			}

			image {
				width: 48rpx;
				height: 48rpx;
			}
		}

	}

	.introduction {
		padding: 30rpx 40rpx 20rpx;
		box-sizing: border-box;
		font-size: 30rpx;
		color: #333;

		ul {
			padding-left: 60rpx;

			li {
				margin-top: 40rpx;
			}
		}

		.btn {
			width: 100%;
			height: 88rpx;
			background: rgba(253, 233, 53, 0.2);
			border-radius: 45rpx 45rpx 45rpx 45rpx;
			border: 1rpx solid #FDE935;
			margin-top: 60rpx;
		}
	}
</style>