vue-insagent-app/pages/tools/insuranceClaims/insuranceClaims.vue

<template>
	<view class="pagebody">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<service-widget @btnClick="btn_click"></service-widget>
		<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" placeholder="请输入保险公司名称" />

				</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: {
			btn_click() {
				uni.navigateTo({
					url: '/pages/chat/chat'
				})
			},
			// 搜索电话
			onConfirm(e) {
				// console.log(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]
			},
			// 电话咨询
			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>