|
|
@@ -1,108 +1,176 @@
|
|
|
<template>
|
|
|
- <view style="height: 100vh;">
|
|
|
+ <view style="height: 100vh;position: relative;">
|
|
|
<view class="page" id="panelcanvas">
|
|
|
+ <image src="../../static/image/car-insure/baojiadan.png" mode=""
|
|
|
+ style="width: 100%;height: 450px;position: absolute;"></image>
|
|
|
<view class="content">
|
|
|
<view class="price dis a-c j-c">
|
|
|
- <image :src=" logoimg" mode="" style="width: 20px;height: 20px;">
|
|
|
+ <image :src="logoimg" mode="" style="width: 20px;height: 20px;">
|
|
|
</image>
|
|
|
<text style="font-weight: bold;margin-left: 6px; font-size: 16px;">{{dataInfo.inscompany}}报价单</text>
|
|
|
</view>
|
|
|
- <view style="background-color: #fff;border-radius:0 0 6px 6px ;" class="dis f-c p-2 ">
|
|
|
- <view class="" style="border-bottom: 1px dashed #EFEFEF;padding-bottom: 10px;">
|
|
|
- <view style="font-size: 16px;font-weight: bold;" class="dis j-s a-c ">
|
|
|
- <text style="color: #232832;">{{dataInfo.licenseno}}</text>
|
|
|
- <text style="color: #FF5600;">￥{{dataInfo.sumpremium}}</text>
|
|
|
- </view>
|
|
|
- <text
|
|
|
- style="color: rgba(51,51,51,0.8);font-size: 14px;font-weight: bold;letter-spacing:2px;">{{carinfo.modelcname}}</text>
|
|
|
- </view>
|
|
|
- <view class="dis Circle" style="padding-top: 10px;">
|
|
|
- <view style="width: 49%;font-weight: bold;border-right: 1px dashed #EFEFEF;"
|
|
|
- v-if="dataInfo.jqstartdate" class="dis f-c a-start ">
|
|
|
- <text style="font-size: 14px;">{{ dataInfo.jqstartdate }}</text>
|
|
|
- <text style="font-size: 12px;color: rgba(51,51,51,0.8);">交强险起保日期</text>
|
|
|
- </view>
|
|
|
- <view style="width: 49%;font-weight: bold;" class="dis f-c a-end" v-if="dataInfo.systartdate">
|
|
|
- <text style="font-size: 14px;">{{ dataInfo.systartdate }}</text>
|
|
|
- <text style="font-size: 12px;color: rgba(51,51,51,0.8);">商业险起保日期</text>
|
|
|
- </view>
|
|
|
+ <view
|
|
|
+ style="background-color: #fff;border-radius:0 0 6px 6px ; box-shadow: 0px 4px 10px 0px rgba(123,160,239,0.2);"
|
|
|
+ class="dis a-c j-c p-2 ">
|
|
|
+ <view style="font-size: 15px;font-weight: bold;" class="dis j-s a-c ">
|
|
|
+ <text style="color: #232832;">订单编号：{{dataInfo.orderno}}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view style="padding:0 16px;margin-top: -20px;">
|
|
|
+ <view style="padding:0 16px;position: relative;">
|
|
|
<view class="information">
|
|
|
+ <text class="title">车辆信息</text>
|
|
|
<view class="dis j-s a-c">
|
|
|
- <text>订单号：</text>
|
|
|
+ <text>车牌号：</text>
|
|
|
<text>{{dataInfo.orderno}}</text>
|
|
|
</view>
|
|
|
+ <view class="dis j-s a-c">
|
|
|
+ <text>品牌型号：</text>
|
|
|
+ <text>{{dataInfo.orderno}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="dis j-s a-c">
|
|
|
+ <text>发动机号：</text>
|
|
|
+ <text>{{carinfo.engineNo}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="dis j-s a-c">
|
|
|
+ <text>座位数：</text>
|
|
|
+ <text>{{carinfo.seatCount}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="information">
|
|
|
+ <text class="title">人员信息</text>
|
|
|
<view class="dis j-s a-c">
|
|
|
<text>车主姓名：</text>
|
|
|
<text>{{ownerinfo.name}}</text>
|
|
|
</view>
|
|
|
<view class="dis j-s a-c">
|
|
|
- <text>投保人姓名：</text>
|
|
|
- <text>{{applyinfo.name}}</text>
|
|
|
+ <text>车主身份证号：</text>
|
|
|
+ <text>{{ownerinfo.identifyNumber}}</text>
|
|
|
</view>
|
|
|
<view class="dis j-s a-c">
|
|
|
- <text>被保人姓名：</text>
|
|
|
- <text>{{insureinfo.name}}</text>
|
|
|
+ <text>投保人姓名：</text>
|
|
|
+ <text>{{applyinfo.name}}</text>
|
|
|
</view>
|
|
|
<view class="dis j-s a-c">
|
|
|
- <text>发动机号：</text>
|
|
|
- <text>{{carinfo.engineNo}}</text>
|
|
|
+ <text>投保人身份证号：</text>
|
|
|
+ <text>{{ownerinfo.identifyNumber}}</text>
|
|
|
</view>
|
|
|
<view class="dis j-s a-c">
|
|
|
- <text>车架号：</text>
|
|
|
- <text>{{carinfo.vinNo}}</text>
|
|
|
+ <text>被保人姓名：</text>
|
|
|
+ <text>{{insureinfo.name}}</text>
|
|
|
</view>
|
|
|
<view class="dis j-s a-c">
|
|
|
- <text>座位数：</text>
|
|
|
- <text>{{carinfo.seatCount}}</text>
|
|
|
+ <text>被保人身份证号：</text>
|
|
|
+ <text>{{ownerinfo.identifyNumber}}</text>
|
|
|
</view>
|
|
|
- <view class="dis j-s a-c" v-if="dataInfo.jqpremium">
|
|
|
- <text>交强险</text>
|
|
|
- <text>￥{{dataInfo.jqpremium}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="information">
|
|
|
+ <text class="title">保费信息</text>
|
|
|
+ <view class="dis j-s f-c" v-if="dataInfo.jqpremium">
|
|
|
+ <view class="dis j-s a-c">
|
|
|
+ <text>交强险：</text>
|
|
|
+ <text>￥{{dataInfo.jqpremium}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="dis f-c">
|
|
|
+ <text style="color: rgba(35,40,50,0.9);">起保日期：{{dataInfo.jqstartdate}}</text>
|
|
|
+ <text style="color: rgba(35,40,50,0.9);">终保日期：{{dataInfo.jqenddate}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="dis f-c" style="background-color: #F9F9F9;border-radius: 10px;padding: 6px;">
|
|
|
+ <view class="dis j-s a-c" style="border-bottom: 1px solid #f2f2f2;">
|
|
|
+ <text style="color: rgba(35,40,50,0.8)">险别/名称</text>
|
|
|
+ <text style="color: rgba(35,40,50,0.8)">保额</text>
|
|
|
+ </view>
|
|
|
+ <view class="dis j-s a-c" v-for="(item,index) in dataInfo.jqInsuranceType" :key="index"
|
|
|
+ style="margin-top: 6px;">
|
|
|
+ <text>{{item.name}}</text>
|
|
|
+ <text>{{item.amount}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
<view class="dis j-s a-c">
|
|
|
- <text>车船税</text>
|
|
|
- <text v-if="dataInfo.taxamount">￥{{dataInfo.taxamount}}</text>
|
|
|
+ <text>车船税：</text>
|
|
|
+ <text>{{ownerinfo.identifyNumber}}</text>
|
|
|
</view>
|
|
|
- <view class="dis j-s a-c" v-if="dataInfo.jypremium">
|
|
|
- <text>驾意险</text>
|
|
|
- <text>￥{{dataInfo.jypremium}}</text>
|
|
|
- </view>
|
|
|
- <view class="dis f-c " v-if="dataInfo.sypremium">
|
|
|
+ <view class="dis f-c j-s " v-if="dataInfo.sypremium">
|
|
|
<view class="dis j-s a-c">
|
|
|
<text>商业险</text>
|
|
|
<text>￥{{dataInfo.sypremium}}</text>
|
|
|
</view>
|
|
|
+ <view class="dis f-c">
|
|
|
+ <text style="color: rgba(35,40,50,0.9);">起保日期：{{dataInfo.systartdate}}</text>
|
|
|
+ <text style="color: rgba(35,40,50,0.9);">终保日期：{{dataInfo.syenddate}}</text>
|
|
|
+ </view>
|
|
|
<view class=" dis j-s f-c p-2"
|
|
|
style="border: none;background-color: #F9F9F9;border-radius: 10px;">
|
|
|
- <view class="coverage-sum dis j-s" v-for="(item,index) in dataInfo.kindinfo" :key="index">
|
|
|
- <view style="width: 33.33%;" class="dis a-c j-start">
|
|
|
+ <view class="dis j-s a-c" style="border-bottom: 1px solid #f2f2f2;">
|
|
|
+ <view class="dis j-start" style="width: 50%;">
|
|
|
+ <text style="color: rgba(35,40,50,0.8)">险别/名称</text>
|
|
|
+ </view>
|
|
|
+ <view class="dis j-c" style="width: 25%;">
|
|
|
+ <text style="color: rgba(35,40,50,0.8)">保额</text>
|
|
|
+ </view>
|
|
|
+ <view class="dis j-end" style="width: 25%;">
|
|
|
+ <text style="color: rgba(35,40,50,0.8)">保费(元)</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="coverage-sum dis j-s" v-for="(item,index) in dataInfo.kindinfo" :key="index"
|
|
|
+ style="margin-top: 6px;">
|
|
|
+ <view style="width: 50%;" class="dis a-c j-start">
|
|
|
<text>{{item.kindName}}</text>
|
|
|
</view>
|
|
|
- <view style="width: 33.33%;" class="dis a-c j-c"
|
|
|
+ <view style="width: 25%;" class="dis a-c j-c"
|
|
|
v-if="['D4', 'SY_FJ_YBW2'].includes(item.kindCode)">
|
|
|
<text>{{item.unitAmount}}/座*{{dataInfo.carinfo.seatCount-1}}</text>
|
|
|
</view>
|
|
|
- <view style="width: 33.33%;" class="dis a-c j-c"
|
|
|
+ <view style="width: 25%;" class="dis a-c j-c"
|
|
|
v-else-if="['MJ1', 'MJ2', 'MJ3', 'MJ4'].includes(item.kindCode)">
|
|
|
<text>{{item.deductibleRate}}</text>
|
|
|
</view>
|
|
|
- <view style="width: 33.33%;" class="dis a-c j-c"
|
|
|
+ <view style="width: 25%;" class="dis a-c j-c"
|
|
|
v-else-if="['TY1', 'TY2', 'TY3', 'TY4'].includes(item.kindCode)">
|
|
|
<text>{{item.serviceTimes}}/次</text>
|
|
|
</view>
|
|
|
- <view style="width: 33.33%;" class="dis a-c j-c" v-else>
|
|
|
+ <view style="width: 25%;" class="dis a-c j-c" v-else>
|
|
|
<text>{{item.amount}}</text>
|
|
|
</view>
|
|
|
- <view style="width: 33.33%;" class="dis a-c j-end">
|
|
|
+ <view style="width: 25%;" class="dis a-c j-end">
|
|
|
<text>￥{{item.coveragePremium}}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
+ <view class="dis f-c j-s " v-if="dataInfo.jypremium">
|
|
|
+ <view class="dis j-s a-c">
|
|
|
+ <text>附加险：意外险</text>
|
|
|
+ <text>￥{{dataInfo.jypremium}}</text>
|
|
|
+ </view>
|
|
|
+ <view class=" dis j-s f-c p-2" v-if="dataInfo.accidentInfo.length>0"
|
|
|
+ style="border: none;background-color: #F9F9F9;border-radius: 10px;">
|
|
|
+ <view class="dis j-s a-c" style="border-bottom: 1px solid #f2f2f2;">
|
|
|
+ <view class="dis j-start" style="width: 50%;">
|
|
|
+ <text style="color: rgba(35,40,50,0.8)">险别/名称</text>
|
|
|
+ </view>
|
|
|
+ <view class="dis j-c" style="width: 25%;">
|
|
|
+ <text style="color: rgba(35,40,50,0.8)">保额</text>
|
|
|
+ </view>
|
|
|
+ <view class="dis j-end" style="width: 25%;">
|
|
|
+ <text style="color: rgba(35,40,50,0.8)">保费(元)</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="coverage-sum dis j-s" v-for="(item,index) in dataInfo.accidentInfo"
|
|
|
+ :key="index" style="margin-top: 6px;">
|
|
|
+ <view style="width: 50%;" class="dis a-c j-start">
|
|
|
+ <text>{{item.name}}</text>
|
|
|
+ </view>
|
|
|
+ <view style="width: 25%;" class="dis a-c j-c">
|
|
|
+ <text>{{item.amount}}</text>
|
|
|
+ </view>
|
|
|
+ <view style="width: 25%;" class="dis a-c j-c">
|
|
|
+ <text>{{item.premium}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
<view class="dis j-s a-c">
|
|
|
<text>应缴金额：</text>
|
|
|
<text style="color: #0052FF;font-weight: bold;">￥{{dataInfo.sumpremium}}</text>
|
|
|
@@ -400,9 +468,9 @@
|
|
|
|
|
|
.content {
|
|
|
width: 100%;
|
|
|
- height: 214px;
|
|
|
- background: linear-gradient(180deg, #0052FF 0%, #F8FAFE 100%);
|
|
|
- padding: 10px 16px 150px 16px;
|
|
|
+ height: auto;
|
|
|
+ padding: 16px 16px 0;
|
|
|
+ position: relative;
|
|
|
|
|
|
.price {
|
|
|
width: 100%;
|
|
|
@@ -419,7 +487,8 @@
|
|
|
box-shadow: 0px 4px 10px 0px #DAE3F4;
|
|
|
border-radius: 6px;
|
|
|
margin-top: 10px;
|
|
|
- padding: 0 10px;
|
|
|
+ padding: 10px 10px 0;
|
|
|
+
|
|
|
|
|
|
>view {
|
|
|
padding: 10px 0;
|
|
|
@@ -432,6 +501,12 @@
|
|
|
|
|
|
}
|
|
|
|
|
|
+ .title {
|
|
|
+ font-size: 15px;
|
|
|
+ color: #232832;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
:last-child {
|
|
|
border: none;
|
|
|
}
|
|
|
@@ -532,13 +607,11 @@
|
|
|
width: 100%;
|
|
|
|
|
|
view {
|
|
|
- width: 33.33%;
|
|
|
font-size: 12px;
|
|
|
padding: 6px 16px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
|
|
|
.Circle {
|
