partnerApp/pages/tools/insuranceClaims/insuranceClaims.vue

<template>
	<view class="pagebody">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<z-paging auto-show-back-to-top :style="getHeight">
			<view class="claimimg">
				<image src="/static/image/claim/claimtop.png" mode="widthFix"></image>
			</view>
			<view class="claimsteps">
				<view class="claimstep d-flex j-end" v-for="(step,stepIndex) in steps" :key="stepIndex">
					<view class="stepimg d-flex a-center j-center" v-if="step.imgposition == 'left'">
						<image lazy-load :src="step.img" mode="widthFix"></image>
					</view>
					<view class="stepinfo d-flex flex-column ">
						<view class="stepindex d-flex a-center j-center">{{stepIndex+1}}</view>
						<view class="steptitle d-flex a-center">{{step.tit}}</view>
						<view class="stepcontent">{{step.content}}</view>
					</view>
					<view class="stepimg  d-flex a-center j-center" v-if="step.imgposition == 'right'">
						<image lazy-load :src="step.img" mode="widthFix"></image>
					</view>
				</view>
			</view>
			<view class="claimmobile">
				<view class="claimmobiletitle  d-flex a-center">
					<p>各大保险公司理赔报案电话</p>
					
				</view>
				<view class=" search-input d-flex a-center">
					<u-input v-model="value" type="text" :border="true" @confirm="onConfirm"/>
					
				</view>
				
				<view class="claimmobilecontent">
					<view class="claimmobileitem d-flex a-center j-center" v-for="(item,index) in claimmobiles" :key="index">
						<view class="companyicon  d-flex a-center j-center">
							<image :src="item.icon" lazy-load></image>
						</view>
						<view class="companyname flex-1">{{item.name}}</view>
						<view class="companymobile d-flex j-end">
							<span class="d-flex" @tap="mobileCall(item.mobile)">
								{{item.mobile}}
								<view class="icon iconfont icon-dianhua1 main-text-color"></view>
							</span>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				steps:[
					{
						img:"/static/image/claim/claim1.png",
						imgposition:"left",
						tit:"电话报案",
						content:"出险后，客户向保险公司理赔部门报案；一般保险公司要求在事发48小时内报案。"
					},
					{
						img:"/static/image/claim/claim2.png",
						imgposition:"right",
						tit:"勘察定损",
						content:"检查人员在接保险公司内勤通知后1个工作日内完成现场查勘和检验工作(受损标的在外地的检验，可委托当地保险公司在3个工作日内完成)。"
					},
					{
						img:"/static/image/claim/claim3.png",
						imgposition:"left",
						tit:"金额赔付",
						content:"(1)核赔科经办人将已完成审批手续的赔案编号，将赔款收据和计算书交财务划款(2)财务对赔付确认后，除赔款收据和计算书红色联外，其余取回。"
					},
					{
						img:"/static/image/claim/claim4.png",
						imgposition:"right",
						tit:"车辆维修",
						content:"根据与保险公司确认后前往指定或其他修理厂进行修车；修理好后童话之车主提车。"
					}
				],
				claimmobiles:[
					{
						icon:"/static/image/claim/icon/ansheng.png",
						name:"安盛天平",
						mobile:"95550"
					},
					{
						icon:"/static/image/claim/icon/dadi.png",
						name:"大地保险",
						mobile:"95590"
					},
					{
						icon:"/static/image/claim/icon/zijin.png",
						name:"紫金财险",
						mobile:"400-828-0018"
					},
					{
						icon:"/static/image/claim/icon/libao.png",
						name:"利宝保险",
						mobile:"400-888-2008"
					},
					{
						icon:"/static/image/claim/icon/sanxing.png",
						name:"三星保险",
						mobile:"400-933-3000"
					},
					{
						icon:"/static/image/claim/icon/pingan.png",
						name:"平安保险",
						mobile:"95511"
					},
					{
						icon:"/static/image/claim/icon/huatai.png",
						name:"华泰保险",
						mobile:"400-609-5509"
					},
					{
						icon:"/static/image/claim/icon/huaan.png",
						name:"华安保险",
						mobile:"95556"
					},
					{
						icon:"/static/image/claim/icon/bohai.png",
						name:"渤海财产",
						mobile:"400-611-6666"
					},
					{
						icon:"/static/image/claim/icon/zhongmei.png",
						name:"中煤保险",
						mobile:"400-653-6888"
					},
					{
						icon:"/static/image/claim/icon/dinghe.png",
						name:"鼎和保险",
						mobile:"95393"
					},
					{
						icon:"/static/image/claim/icon/dajia.png",
						name:"大家保险",
						mobile:"95569"
					},
					{
						icon:"/static/image/claim/icon/fude.png",
						name:"福德保险",
						mobile:"400-669-5535"
					},
					{
						icon:"/static/image/claim/icon/taiping.png",
						name:"太平保险",
						mobile:"95589"
					},
					{
						icon:"/static/image/claim/icon/anhua.png",
						name:"安华农业",
						mobile:"95540"
					},
					{
						icon:"/static/image/claim/icon/dubang.png",
						name:"都邦保险",
						mobile:"95586"
					},
					{
						icon:"/static/image/claim/icon/zhongan.png",
						name:"众安保险",
						mobile:"1010-9955"
					},
					{
						icon:"/static/image/claim/icon/yongan.png",
						name:"永安保险",
						mobile:"95502"
					},
					{
						icon:"/static/image/claim/icon/xiandai.png",
						name:"现代保险",
						mobile:"400-608-0808"
					},
					{
						icon:"/static/image/claim/icon/renshou.png",
						name:"中国人寿",
						mobile:"95519"
					},
					{
						icon:"/static/image/claim/icon/guotai.png",
						name:"国泰财险",
						mobile:"400-820-2288"
					},
					{
						icon:"/static/image/claim/icon/zhonghua.png",
						name:"中华联合",
						mobile:"95585"
					},
					{
						icon:"/static/image/claim/icon/zhongyin.png",
						name:"中银保险",
						mobile:"400-699-5566"
					},
					{
						icon:"/static/image/claim/icon/hezhong.png",
						name:"合众保险",
						mobile:"95515"
					},
					{
						icon:"/static/image/claim/icon/yongcheng.png",
						name:"永诚保险",
						mobile:"95552"
					},
					{
						icon:"/static/image/claim/icon/zhufeng.png",
						name:"珠峰财险",
						mobile:"1010-8848"
					},
					{
						icon:"/static/image/claim/icon/anxin.png",
						name:"安心保险",
						mobile:"95303"
					},
					{
						icon:"/static/image/claim/icon/huanong.png",
						name:"华农保险",
						mobile:"95540"
					},
					{
						icon:"/static/image/claim/icon/ancheng.png",
						name:"安诚保险",
						mobile:"95544"
					},
					{
						icon:"/static/image/claim/icon/renbao.png",
						name:"人保保险",
						mobile:"95518"
					},
					{
						icon:"/static/image/claim/icon/guoren.png",
						name:"国任财险",
						mobile:"400-866-7788"
					},
					{
						icon:"/static/image/claim/icon/yangguang.png",
						name:"阳光保险",
						mobile:"95510"
					},
					{
						icon:"/static/image/claim/icon/yatai.png",
						name:"亚太财险",
						mobile:"95506"
					},
					{
						icon:"/static/image/claim/icon/yingda.png",
						name:"英大保险",
						mobile:"400-018-8688"
					},
					{
						icon:"/static/image/claim/icon/zheshang.png",
						name:"浙商保险",
						mobile:"400-866-6777"
					},
					{
						icon:"/static/image/claim/icon/taipingyang.png",
						name:"太平洋保险",
						mobile:"95500"
					},
					{
						icon:"/static/image/claim/icon/tianan.png",
						name:"天安财险",
						mobile:"95505"
					}
					
				],
				companyList:[],
			}
		},
		created() {
			this.companyList=[...this.claimmobiles]
		},
		computed: {
			getHeight() {
				let height = uni.getSystemInfoSync().windowHeight;
				return `height: ${height}px;`;
			}
		},
		onNavigationBarButtonTap(e) {
			// 分享图片
			let shareImg = '/static/image/claim/shareclaim.jpg';
			// 转换分享图片为file开头
			let shareImgs = 'file://' + plus.io.convertLocalFileSystemURL(shareImg);
			// #ifdef APP-PLUS
			let shareOPtions = {
				provider: "weixin",
				scene: "WXSceneSession",
				type: 2,
				imageUrl: shareImgs,
				success: (e) => {
					console.log('success', e);
				},
				fail: (e) => {
					console.log('fail', e)
				},
				complete: function() {
					console.log('分享操作结束!')
				}
			};
			uni.share(shareOPtions);
			// #endif
			
		},
		methods: {
			// 搜索电话
			onConfirm(e){
				// console.log(e)
				let arr=[...this.companyList]
				let newAarr=[]
					
				arr.forEach((v,i)=>{
					if(v.mobile.includes(e)){
						newAarr.push(v)
					}
				})
				this.claimmobiles=e!=''?[...newAarr]:[...this.companyList]
			},
			// 电话咨询
			mobileCall(mobile){
				// #ifdef APP-PLUS
				uni.authorize({
					scope: 'scope.makePhoneCall',
					success: () => {
					  uni.makePhoneCall({
						phoneNumber: mobile,
						success: () => {
							console.log("成功拨打电话")
						}
					  })
					},
					fail: () => {
					  console.error('授权失败，请允许拨打电话权限！');
					}
				  });
				
				// #endif
			},
		}
	}
</script>

<style>
.pagebody{
	background-color: #ededed;
}
.claimimg{
	background-color: #FFFFFF;
	width: 100%;
}
.claimimg>image{
	width: 100%;
}
.claimsteps{
	background-color: #FFFFFF;
	padding: 20upx 30upx;
}
.claimsteps .claimstep{
	padding-bottom: 10upx;
	border-bottom: 1px solid #F5F3F6;
}
.claimsteps .claimstep .stepinfo{
	width: 510upx;
	padding: 30upx 18upx 20upx;
	box-sizing: border-box;
}
.claimsteps .claimstep .stepinfo .stepindex{
	width: 50upx;
	height: 50upx;
	font-size: 32upx;
	font-weight: bold;
	color: #FFFFFF;
	border-radius: 50%;
	background-color: #3C95FE;
}
.claimsteps .claimstep .stepinfo .steptitle{
	line-height: 80upx;
	font-size: 32upx;
	font-weight: bold;
}
.claimsteps .claimstep .stepinfo .stepcontent{
	line-height: 40upx;
	color: #A39FA3;
	font-size: 26upx;
}
.claimsteps .claimstep .stepimg{
	width: 180upx;
	flex-shrink: 1;
}
.claimsteps .claimstep .stepimg>image{
	width: 170upx;
}
.claimmobile{
	margin: 15upx 0;
}
.claimmobile .search-input{
	padding: 10px;
	box-sizing: border-box;
	background: #FFFFFF;
}
.claimmobile .claimmobiletitle{
	height: 80upx;
	background: #FFFFFF;
}
.claimmobile .claimmobiletitle p{
	margin-left: 50upx;
	font-size: 32upx;
	font-weight: bold;
}
.claimmobile .claimmobiletitle p:before{
	width: 8upx;
	height: 34upx;
	margin-top: 15upx;
	position:absolute;
	align-items: center;
	left: 30upx;
	content:'';
	background: #008DF0;
}
.claimmobile .claimmobilecontent{
	
}
.claimmobile .claimmobilecontent .claimmobileitem{
	height: 80upx;
	background: #FFFFFF;
	margin: 10upx 15upx;
	padding: 0upx 20upx;
	border-radius: 10upx;
}
.claimmobile .claimmobilecontent .claimmobileitem .companyicon{
	width: 60upx;
	height: 60upx;
	border: 1px solid #F0F1F3;
	border-radius: 5upx;
	flex-shrink: 1;
}
.claimmobile .claimmobilecontent .claimmobileitem .companyicon>image{
	width: 80%;
	height: 80%;
}
.claimmobile .claimmobilecontent .claimmobileitem .companyname{
	margin: 0upx 20upx;
	font-size: 32upx;
}
.claimmobile .claimmobilecontent .claimmobileitem .companymobile{
	width: 300upx;
	flex-shrink: 1;
}
.claimmobile .claimmobilecontent .claimmobileitem .companymobile .iconfont{
	font-size: 28upx;
	margin:0 20upx 0 30upx;
}
</style>