partnerApp/pages/carInsure/entry.vue

<template>
	<view class="body">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<!-- 轮播图 -->
		<swiper-image :resdata="swiperList"></swiper-image>

		<!-- 车牌信息输入区域Start -->
		<view style="background-color: #FFFFFF;">
			<view class="licenseNoEnter">
				<view class="row entryTitle d-flex a-center j-sb">
					<view class="left">车险投保</view>
					<view class="right"><text>*</text>仅支持9座以下家庭自用车投保</view>
				</view>
				<view class="row entryLicenseNo d-flex a-center">
					<text class="left">车牌号码</text>
					<view class="middle d-flex a-center">
						<input placeholder="请点此输入" @tap="plateShow=true" v-model.trim="licenseNo" />
						<plate-input v-if="plateShow" :plate="licenseNo" @export="setPlate" @close="plateShow=false" />
					</view>
					<view class="right">
						<switch :checked="noLicence" @click="licencePlate" style="transform:scale(0.5)"></switch>
					</view>
				</view>
				<view class="agree d-flex a-center">
					<!-- <label @click="agreed">
						<checkbox :checked="agree" />本人已阅读并同意
					</label>
					<label @click="baoxin">
						<checkbox :checked="baoxinqudao" />保信渠道
					</label> -->
				</view>
				<view class="insureBtn d-flex a-center j-sb">
					<button class="main-bg-color" type="primary" @click="generalGetCarInfo">普通投保</button>
				</view>
			</view>
		</view>
		<!-- 车牌信息输入区域End -->

		<view class="pane">
			<view class="paneHeader d-flex a-center">
				<view class="titleBefore"></view>
				<text class="title">保险专区</text>
			</view>
			<view class="ads d-flex a-center">
				<view class="flex-1 d-flex a-center j-center">
					<image src="/static/image/car-insure/tools1.png" mode="widthFix" lazy-load></image>
				</view>
				<view class="flex-1 d-flex a-center j-center">
					<image src="/static/image/car-insure/tools2.png" mode="widthFix" lazy-load></image>
				</view>
			</view>
		</view>
		<view class="pane">
			<view class="paneHeader d-flex a-center">
				<view class="titleBefore"></view>
				<text class="title">小工具</text>
			</view>
			<view class="ads d-flex a-center">
				<view class="d-flex a-center j-center flex-1">
					操作指南
				</view>
				<view class="d-flex a-center j-center flex-1">
					常见问题
				</view>
			</view>
		</view>

		<view class="pane">
			<view class="paneHeader d-flex a-center">
				<text style="font-size: 26upx; font-weight: bold;">实时报案</text>
			</view>

			<marquee broadcastType='mould' :viewHeight="170" direction="left" :broadcastStyle='broadcastStyle'
				:touchEvent="true" style="width: 100%">
				<view v-for="(item,ind) in companyList" :key="ind" class="img_item2 u-f-ajc u-f-column"
					@tap="mobileCall(item.mobile)">
					<image :src="item.src" mode=""></image>
					<view class="imageTitle">{{item.name}}</view>
				</view>
			</marquee>
		</view>

	</view>
</template>

<script>
	import marquee from '@/components/modules/carInsure/marquee/marquee.vue'
	import plateInput from '@/components/modules/carInsure/uni-plate-input/uni-plate-input.vue';
	import swiperImage from "@/components/modules/index/swiper-image.vue"
	export default {
		components: {
			swiperImage,
			marquee,
			plateInput
		},
		data() {
			return {
				companyList: [{
						src: "/static/image/company/picc.png",
						name: "人保财险",
						mobile: "95518"
					},
					{
						src: "/static/image/company/huanong.png",
						name: "华农财险",
						mobile: "95540"
					},
					{
						src: "/static/image/company/hengbang.png",
						name: "恒邦财险",
						mobile: "4009895999"
					},
					{
						src: "/static/image/company/taiping.png",
						name: "太平财险",
						mobile: "95589"
					},
					{
						src: "/static/image/company/taipingyang.png",
						name: "太平洋财险",
						mobile: "95500"
					},
					{
						src: "/static/image/company/zhongmei.png",
						name: "中煤财险",
						mobile: "4006536388"
					},
					{
						src: "/static/image/company/guoren.png",
						name: "国任财险",
						mobile: "4008667788"
					},
					{
						src: "/static/image/company/zhonghua.png",
						name: "中华财险",
						mobile: "95585"
					},
					{
						src: "/static/image/company/guoshou.png",
						name: "国寿财险",
						mobile: "95519"
					}
				],

				// 轮播图数据Start
				swiperList: [],
				// 轮播图数据Start

				licenseNo: "",
				plateShow: false,

				noLicence: false,
				agree: false,
				baoxinqudao: false,

				broadcastStyle: {
					speed: 40, //每秒100px
				},
			}
		},
		// 监听导航栏的按钮
		onNavigationBarButtonTap(e) {
			if (e.index == 0) {
				this.navigate({
					url: '/pages/index/index'
				}, "switchTab", true);
			}
		},
		async onLoad() {
			let banner = await this.$http.get('/apps/getCarousel');
			this.swiperList = banner.data;

		},
		methods: {
			setPlate(plate) {
				if (plate.length >= 7) this.licenseNo = plate
				this.plateShow = false
			},

			// 未上牌照
			licencePlate() {
				if (this.noLicence == false) {
					this.licenseNo = "******";
					this.noLicence = true;
				} else {
					this.licenseNo = "";
					this.noLicence = false;
				}
			},
			//阅读并同意协议
			agreed() {
				if (this.agree == false) {
					this.agree = true;
				} else {
					this.agree = false;
				}
			},
			//报信渠道
			baoxin() {
				if (this.baoxinqudao == false) {
					this.baoxinqudao = true;
				} else {
					this.baoxinqudao = false;
				}
			},
			// 校验车牌号
			islicense(val) {
				let mPattern = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4,5}[A-Z0-9挂学警港澳]{1}$/;
				return mPattern.test(val);
			},
			//普通投保
			generalGetCarInfo() {
				if (!this.noLicence && !this.islicense(this.licenseNo)) {
					return uni.showToast({
						icon: "none",
						title: '请填写正确的车牌号码',
						duration: 1500
					});
				}
				// if (this.agree == false) {
				// 	return uni.showToast({
				// 		icon: "none",
				// 		title: '请阅读并同意协议',
				// 		duration: 1500
				// 	});
				// }
				this.navigate({
					url: "/pages/carInsure1/carInfo1?licenseNo=" + encodeURIComponent(this.licenseNo)
				}, "navigateTo", true)
				// this.navigate({
				// 	url: "/pages/carInsure1/quote1?licenseNo=" + encodeURIComponent(this.licenseNo)
				// }, "navigateTo", true)
			},
			// 电话咨询
			mobileCall(mobile) {
				uni.makePhoneCall({
					phoneNumber: mobile,
					success: () => {
						console.log("成功拨打电话")
					}
				})
			},
		}
	}
</script>

<style>
	.body {
		max-width: 750upx;
		min-height: 100vh;
		background: #f5f5f5;
		font-size: 26upx;
		font-family: "Arial,Helvetica,sans-serif,PingFangSC";
	}

	/* 车牌信息输入区域Start */
	.licenseNoEnter {
		padding: 30upx 15upx;
		position: relative;
		top: -24upx;
		background: rgba(255, 255, 255, 0.4);
		width: 600upx;
		margin: 0 auto;
		box-shadow: 0px 0px 8px 1.5px #ddd;
		border-radius: 10upx;
	}

	.row {
		padding: 0upx 10upx;
		height: 80upx;
		border-bottom: 1px solid #F9F7F7;
	}

	.entryTitle {
		margin-top: 20upx;
	}

	.entryTitle .left {
		font-weight: bold;
	}

	.entryTitle .right {
		color: #6091f5;
		font-size: 24upx;
	}

	.entryTitle .right text {
		color: red;
	}

	.entryCity .left,
	.entryLicenseNo .left {
		width: 120upx;
		margin-right: 40upx;
		flex-shrink: 0;
	}

	.entryCity .right {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.entryLicenseNo .middle .uni-input {
		margin-right: 10upx;
		padding: 0;
	}

	.entryLicenseNo .middle input {
		width: 180upx;
		font-size: 28upx;
	}

	.agree {
		margin: 20upx 0 40upx;
		font-size: 24upx;
	}

	.agree checkbox {
		color: "#FFCC33";
		transform: scale(0.6);
	}

	.insureBtn button {
		flex: 1;
		color: #FFFFFF;
		margin: 0 30upx;
		font-size: 30upx;
		background: #337ab7;
	}

	/* 车牌信息输入区域End */

	/* 保险专区和小工具Start */
	.pane {
		margin-top: 20upx;
		padding: 10upx 25upx;
		background-color: #FFFFFF;
	}

	.paneHeader {
		height: 60upx;
	}

	.paneHeader .titleBefore {
		width: 10upx;
		background: #6091f5;
		height: 50%;
		margin: 0 20upx 0 10upx;
	}

	.paneHeader .title {
		font-size: 32upx;
		font-weight: bold;
	}

	.pane .ads {
		padding: 10upx 10upx;
		margin-bottom: 20upx;
	}

	.pane .ads>view {
		flex: 1;
		margin: 0upx 10upx;
	}

	.pane .ads>view image {
		width: 100%;
	}

	/* 保险专区和小工具End */

	.img_item2 {
		width: 100upx;
		height: 120upx;
		padding: 10px;
	}

	.img_item2 image {
		width: 70upx;
		height: 70upx;
		box-sizing: border-box;
	}

	.img_item2 .imageTitle {
		font-size: 22upx;
		width: 100upx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
</style>