详情改影像

src/views/Core/components/detailsDialog.vue

@@ -11,19 +11,22 @@
           <ul class="tabLeft">
             <li :class="{ 'li-selected': selectedItem === 'gsxx' }" @click="selectItem('gsxx')">归属信息</li>
             <li :class="{ 'li-selected': selectedItem === 'cjxx' }" @click="selectItem('cjxx')">投保信息</li>
-            <li :class="{ 'li-selected': selectedItem === 'bfys' }" @click="selectItem('bfys')">保费因素</li>
             <li :class="{ 'li-selected': selectedItem === 'clxx' }" @click="selectItem('clxx')">车辆信息</li>
             <li :class="{ 'li-selected': selectedItem === 'czxx' }" @click="selectItem('czxx')">车主信息</li>
             <li :class="{ 'li-selected': selectedItem === 'tbrxx' }" @click="selectItem('tbrxx')">投保人信息</li>
             <li :class="{ 'li-selected': selectedItem === 'bbrxx' }" @click="selectItem('bbrxx')">被保人信息</li>
             <li v-if="orderInfo.kindinfo && orderInfo.kindinfo.length > 0"
               :class="{ 'li-selected': selectedItem === 'xzxx' }" @click="selectItem('xzxx')">险种信息</li>
-            <li v-if="orderInfo.accidentInfo && orderInfo.accidentInfo.length > 0"
-              :class="{ 'li-selected': selectedItem === 'jyx' }" @click="selectItem('jyx')">驾意险</li>
             <li v-if="orderInfo.taxArrears && orderInfo.taxArrears.length > 0"
               :class="{ 'li-selected': selectedItem === 'qsxx' }" @click="selectItem('qsxx')">欠税信息</li>
-            <li :class="{ 'li-selected': selectedItem === 'yxzl' }" @click="selectItem('yxzl')"
-              v-if="Object.keys(obj).length != 0">影像资料</li>
+            <li :class="{ 'li-selected': selectedItem === 'bfys' }" @click="selectItem('bfys')">保费因素</li>
+
+
+            <!-- <li v-if="orderInfo.accidentInfo && orderInfo.accidentInfo.length > 0"
+              :class="{ 'li-selected': selectedItem === 'jyx' }" @click="selectItem('jyx')">驾意险</li> -->
+
+            <!-- <li :class="{ 'li-selected': selectedItem === 'yxzl' }" @click="selectItem('yxzl')"
+              v-if="Object.keys(obj).length != 0">影像资料</li> -->
             <li :class="{ 'li-selected': selectedItem === 'fymx' }" @click="selectItem('fymx')"
               v-if="orderInfo.feeOrderNewVo && orderInfo.feeOrderNewVo.exportFee && Feepermissions">费用明细</li>
             <li v-if="isAuditing && orderInfo.feeOrderNewVo && orderInfo.feeOrderNewVo.deptManagerFee.length > 0"
@@ -136,38 +139,11 @@
               </div>
             </div>
           </OpenCloseBox>
-          <OpenCloseBox id="bfys">
-            <span slot="title">保费因素</span>
-            <div slot="boby">
-              <el-row class="premium-style " :gutter="20">
-                <el-col :span="6"><span>评分：</span>{{ orderInfo.extendInfo.score ? orderInfo.extendInfo.score : ''
-                }}</el-col>
-                <el-col :span="6"><span>总赔付率：</span>{{ orderInfo.extendInfo.lossRation }}</el-col>
-                <el-col :span="6"><span>总折扣率：</span>{{ orderInfo.extendInfo.totalAdjustRate }}</el-col>
-              </el-row>
-              <el-row class="premium-style " :gutter="20">
-                <el-col :span="6"><span>交强类型评分：</span>{{ orderInfo.extendInfo.jqScore }}</el-col>
-                <el-col :span="6"><span>交强赔付率：</span>{{ orderInfo.extendInfo.jqLossRation }}</el-col>
-                <el-col :span="6"><span>交强险折扣：</span>{{ orderInfo.extendInfo.jqAdjustRate }}</el-col>
-              </el-row>
-              <el-row class="premium-style " :gutter="20">
-                <el-col :span="6"><span>商业类型评分：</span>{{ orderInfo.extendInfo.syScore }}</el-col>
-                <el-col :span="6"><span>商业赔付率：</span>{{ orderInfo.extendInfo.syLossRation }}</el-col>
-                <el-col :span="6"><span>商业险折扣：</span>{{ orderInfo.extendInfo.syAdjustRate }}</el-col>
-              </el-row>
-              <el-row class="premium-style " :gutter="20">
-                <el-col :span="6"><span>交强续保：</span>{{ orderInfo.extendInfo.jqRenewal }}</el-col>
-                <el-col :span="6"><span>商业续保：</span>{{ orderInfo.extendInfo.syRenewal }}</el-col>
-                <el-col :span="6"><span>交强出险次数：</span>{{ orderInfo.extendInfo.jqClaims }}</el-col>
-                <el-col :span="6"><span>商业出险次数：</span>{{ orderInfo.extendInfo.syClaims }}</el-col>
-              </el-row>
-              <el-row class="premium-style " :gutter="20" v-if="orderInfo.ubiPredictedInfoScore">
-                <el-col :span="6"><span>紫金能源车（鼎然-车辆风险评分）：</span>{{ orderInfo.ubiPredictedInfoScore }}</el-col>
-              </el-row>
-            </div>
-          </OpenCloseBox>
+
           <OpenCloseBox id="clxx">
             <span slot="title">车辆信息</span>
+            <span slot="extension" style="color: #2D4D89;margin-right: 10px;"
+              @click="imageQuery('carImageVisible')">影像信息</span>
             <div slot="boby">
               <el-row class="premium-style " :gutter="20">
                 <el-col :span="6"><span>车牌号：</span>{{ orderInfo.carinfo.licenseNo }}</el-col>
@@ -180,7 +156,6 @@
                 <el-col :span="6"><span>座位数：</span>{{ orderInfo.carinfo.seatCount }}</el-col>
                 <el-col :span="6"><span>整备质量：</span>{{ orderInfo.carinfo.completeKerbMass }}</el-col>
                 <el-col :span="6"><span>核定载质量：</span>{{ orderInfo.carinfo.limitLoad }}</el-col>
-
               </el-row>
               <el-row class="premium-style " :gutter="20">
                 <el-col :span="6"><span>排量：</span>{{ orderInfo.carinfo.enginedesc }}</el-col>
@@ -209,6 +184,8 @@
           </OpenCloseBox>
           <OpenCloseBox id="czxx">
             <span slot="title">车主信息</span>
+            <span slot="extension" style="color: #2D4D89;margin-right: 10px;"
+              @click="imageQuery('ownerImageVisible')">影像信息</span>
             <div slot="boby">
               <el-row class="premium-style" :gutter="20">
                 <el-col :span="6"><span>车主姓名：</span>{{ orderInfo.ownerinfo.name }}</el-col>
@@ -228,6 +205,8 @@
           </OpenCloseBox>
           <OpenCloseBox id="tbrxx">
             <span slot="title">投保人信息</span>
+            <span slot="extension" style="color: #2D4D89;margin-right: 10px;"
+              @click="imageQuery('applyImageVisible')">影像信息</span>
             <div slot="boby">
               <el-row class="premium-style" :gutter="20">
                 <el-col :span="6"><span>投保人姓名：</span>{{ orderInfo.applyinfo.name }}</el-col>
@@ -247,6 +226,8 @@
           </OpenCloseBox>
           <OpenCloseBox id="bbrxx">
             <span slot="title">被保人信息</span>
+            <span slot="extension" style="color: #2D4D89;margin-right: 10px;"
+              @click="imageQuery('insureImageVisible')">影像信息</span>
             <div slot="boby">
               <el-row class="premium-style" :gutter="20">
                 <el-col :span="6"><span>被保人姓名：</span>{{ orderInfo.insureinfo.name }}</el-col>
@@ -264,26 +245,63 @@
               </el-row>
             </div>
           </OpenCloseBox>
-          <OpenCloseBox id="xzxx" v-if="orderInfo.kindinfo && orderInfo.kindinfo.length > 0">
+          <OpenCloseBox id="xzxx">
             <span slot="title">险种信息</span>
+            <span slot="extension" style="color: #2D4D89;margin-right: 10px;"
+              @click="imageQuery('allImageVisible')">全部影像</span>
             <div slot="boby">
               <div class="quotation-style kind-arrears">
-                <b>商业险险别</b>
+                <b>产品类型</b>
+                <b>险别/险种</b>
                 <b>保额（元）</b>
                 <b>保费（元）</b>
-                <div v-for="(kindinfoitem, kindinfoindex) in orderInfo.kindinfo" :key="kindinfoindex">
-                  <span>{{ kindinfoitem.kindName }}</span>
-                  <span v-if="['D4', 'SY_FJ_YBW2'].includes(kindinfoitem.kindCode)">{{ kindinfoitem.unitAmount }}</span>
-                  <span v-else-if="['MJ1', 'MJ2', 'MJ3', 'MJ4'].includes(kindinfoitem.kindCode)
-                    ">
-                    {{ kindinfoitem.deductibleRate }}
-                  </span>
-                  <span v-else>{{ kindinfoitem.amount }}</span>
-                  <span>{{ kindinfoitem.coveragePremium ? kindinfoitem.coveragePremium : '-' }}</span>
+                <b>总计（元）</b>
+                <div class="flex body" v-if="orderInfo.jqInsuranceType && orderInfo.jqInsuranceType.length > 0">
+                  <span style="width: 10%;">交强险</span>
+                  <div class="flex f-c j-s " style="width: 80%;">
+                    <div v-for="(jqInsuranceitem, jqInsuranceindex) in orderInfo.jqInsuranceType" :key="jqInsuranceindex"
+                      class="insuranceType">
+                      <span>{{ jqInsuranceitem.name }}</span>
+                      <span>￥{{ jqInsuranceitem.amount }}</span>
+                      <span>-</span>
+                    </div>
+                  </div>
+                  <span style="width: 10%;">￥{{ orderInfo.jqpremium }}</span>
+                </div>
+                <div class="flex body" v-if="orderInfo.kindinfo && orderInfo.kindinfo.length > 0">
+                  <span style="width: 10%;">商业险</span>
+                  <div class="flex f-c j-s " style="width: 80%;">
+                    <div v-for="(kindinfoitem, kindinfoindex) in orderInfo.kindinfo" :key="kindinfoindex"
+                      class="insuranceType">
+                      <span>{{ kindinfoitem.kindName }}</span>
+                      <span v-if="['D4', 'SY_FJ_YBW2'].includes(kindinfoitem.kindCode)">￥{{ kindinfoitem.unitAmount
+                      }}</span>
+                      <span v-else-if="['MJ1', 'MJ2', 'MJ3', 'MJ4'].includes(kindinfoitem.kindCode)
+                        ">
+                        {{ kindinfoitem.deductibleRate }}
+                      </span>
+                      <span v-else>￥{{ kindinfoitem.amount }}</span>
+                      <span>￥{{ kindinfoitem.coveragePremium ? kindinfoitem.coveragePremium : '-' }}</span>
+                    </div>
+                  </div>
+                  <span style="width: 10%;">￥{{ orderInfo.sypremium }}</span>
+                </div>
+                <div class="flex body" v-if="orderInfo.accidentInfo && orderInfo.accidentInfo.length > 0">
+                  <span style="width: 10%;">驾意险</span>
+                  <div class="flex f-c j-s " style="width: 80%;">
+                    <div v-for="(accidentInfoitem, accidentInfoindex) in orderInfo.accidentInfo" :key="accidentInfoindex"
+                      class="insuranceType">
+                      <span>{{ accidentInfoitem.name }}</span>
+                      <span>￥{{ accidentInfoitem.amount }}</span>
+                      <span>￥{{ accidentInfoitem.premium ? accidentInfoitem.premium : '-' }}</span>
+                    </div>
+                  </div>
+                  <span style="width: 10%;">￥{{ orderInfo.jypremium }}</span>
                 </div>
               </div>
             </div>
           </OpenCloseBox>
+          <!--
           <OpenCloseBox id="jyx" v-if="orderInfo.accidentInfo && orderInfo.accidentInfo.length > 0">
             <span slot="title">驾意险</span>
             <div slot="boby">
@@ -305,7 +323,7 @@
                   </template>
                 </el-table-column>
               </el-table>
-              <!-- <div class="quotation-style driving-style">
+              <div class="quotation-style driving-style">
                 <b>产品</b>
                 <b>份数</b>
                 <b>价格</b>
@@ -314,9 +332,9 @@
                   <span>{{ kindinfoitem.quantity ? kindinfoitem.quantity : '1' }}</span>
                   <span>{{ kindinfoitem.actualPremium }}/份</span>
                 </div>
-              </div> -->
+              </div>
             </div>
-          </OpenCloseBox>
+          </OpenCloseBox> -->
           <OpenCloseBox id="qsxx" v-if="orderInfo.taxArrears && orderInfo.taxArrears.length > 0">
             <span slot="title">欠税信息</span>
             <div slot="boby">
@@ -334,7 +352,37 @@
               </div>
             </div>
           </OpenCloseBox>
-          <OpenCloseBox id="yxzl" v-if="Object.keys(obj).length != 0">
+          <OpenCloseBox id="bfys">
+            <span slot="title">保费因素</span>
+            <div slot="boby">
+              <el-row class="premium-style " :gutter="20">
+                <el-col :span="6"><span>评分：</span>{{ orderInfo.extendInfo.score ? orderInfo.extendInfo.score : ''
+                }}</el-col>
+                <el-col :span="6"><span>总赔付率：</span>{{ orderInfo.extendInfo.lossRation }}</el-col>
+                <el-col :span="6"><span>总折扣率：</span>{{ orderInfo.extendInfo.totalAdjustRate }}</el-col>
+              </el-row>
+              <el-row class="premium-style " :gutter="20">
+                <el-col :span="6"><span>交强类型评分：</span>{{ orderInfo.extendInfo.jqScore }}</el-col>
+                <el-col :span="6"><span>交强赔付率：</span>{{ orderInfo.extendInfo.jqLossRation }}</el-col>
+                <el-col :span="6"><span>交强险折扣：</span>{{ orderInfo.extendInfo.jqAdjustRate }}</el-col>
+              </el-row>
+              <el-row class="premium-style " :gutter="20">
+                <el-col :span="6"><span>商业类型评分：</span>{{ orderInfo.extendInfo.syScore }}</el-col>
+                <el-col :span="6"><span>商业赔付率：</span>{{ orderInfo.extendInfo.syLossRation }}</el-col>
+                <el-col :span="6"><span>商业险折扣：</span>{{ orderInfo.extendInfo.syAdjustRate }}</el-col>
+              </el-row>
+              <el-row class="premium-style " :gutter="20">
+                <el-col :span="6"><span>交强续保：</span>{{ orderInfo.extendInfo.jqRenewal }}</el-col>
+                <el-col :span="6"><span>商业续保：</span>{{ orderInfo.extendInfo.syRenewal }}</el-col>
+                <el-col :span="6"><span>交强出险次数：</span>{{ orderInfo.extendInfo.jqClaims }}</el-col>
+                <el-col :span="6"><span>商业出险次数：</span>{{ orderInfo.extendInfo.syClaims }}</el-col>
+              </el-row>
+              <el-row class="premium-style " :gutter="20" v-if="orderInfo.ubiPredictedInfoScore">
+                <el-col :span="6"><span>紫金能源车（鼎然-车辆风险评分）：</span>{{ orderInfo.ubiPredictedInfoScore }}</el-col>
+              </el-row>
+            </div>
+          </OpenCloseBox>
+          <!-- <OpenCloseBox id="yxzl" v-if="Object.keys(obj).length != 0">
             <span slot="title">影像资料</span>
             <div slot="boby">
               <el-row :gutter="20">
@@ -397,7 +445,7 @@
                 </el-col>
               </el-row>
             </div>
-          </OpenCloseBox>
+          </OpenCloseBox> -->
 
           <OpenCloseBox id="jgglf" v-if="isAuditing && orderInfo.feeOrderNewVo && orderInfo.feeOrderNewVo.deptManagerFee">
             <span slot="title">机构管理费</span>
@@ -832,6 +880,218 @@
         <el-button :size="overSize" @click="productCostAddVehicleFactorVisible = false">取 消</el-button>
       </span>
     </el-dialog>
+    <el-dialog title="影像信息" :visible.sync="carImageVisible" width="50%">
+      <div>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <h4>行驶证主页</h4>
+            <viewer :images="obj.carImageList">
+              <img v-if="obj.carImageList[0]" class="imageStyle" :src="obj.carImageList[0]" />
+              <div v-else class="imageStyle flex j-c a-c ">
+                <span style="margin: 10px;">暂无影像资料 请返回订单查询页“补全影像”</span>
+              </div>
+            </viewer>
+          </el-col>
+          <el-col :span="12">
+            <div>
+              <h4>行驶证副本</h4>
+              <viewer :images="obj.ownerImageList">
+                <img v-if="obj.carImageList[1]" class="imageStyle" :src="obj.carImageList[1]" />
+                <div v-else class="imageStyle flex j-c a-c ">
+                  <span style="margin: 10px;">暂无影像资料 请返回订单查询页“补全影像”</span>
+                </div>
+              </viewer>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button size="small" @click="carImageVisible = false"
+          style="background: #EAEDF1;color:#D42426;border-color:#EAEDF1">关闭</el-button>
+      </span>
+    </el-dialog>
+    <el-dialog title="影像信息" :visible.sync="ownerImageVisible" width="50%">
+      <div>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <h4>车主身份证正面</h4>
+            <viewer :images="obj.ownerImageList">
+              <img v-if="obj.ownerImageList[0]" class="imageStyle" :src="obj.ownerImageList[0]" />
+              <div v-else class="imageStyle flex j-c a-c ">
+                <span style="margin: 10px;">暂无影像资料 请返回订单查询页“补全影像”</span>
+              </div>
+            </viewer>
+          </el-col>
+          <el-col :span="12">
+            <h4>车主身份证反面</h4>
+            <viewer :images="obj.ownerImageList">
+              <img v-if="obj.ownerImageList[1]" class="imageStyle" :src="obj.ownerImageList[1]" />
+              <div v-else class="imageStyle flex j-c a-c ">
+                <span style="margin: 10px;">暂无影像资料 请返回订单查询页“补全影像”</span>
+              </div>
+            </viewer>
+          </el-col>
+        </el-row>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button size="small" @click="ownerImageVisible = false"
+          style="background: #EAEDF1;color:#D42426;border-color:#EAEDF1">关闭</el-button>
+      </span>
+    </el-dialog>
+    <el-dialog title="影像信息" :visible.sync="applyImageVisible" width="50%">
+      <div>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <h4>投保人身份证正面</h4>
+            <viewer :images="obj.policyImageList">
+              <img v-if="obj.policyImageList[0]" class="imageStyle" :src="obj.policyImageList[0]" />
+              <div v-else class="imageStyle flex j-c a-c ">
+                <span style="margin: 10px;">暂无影像资料 请返回订单查询页“补全影像”</span>
+              </div>
+            </viewer>
+          </el-col>
+          <el-col :span="12">
+            <h4>投保人身份证反面</h4>
+            <viewer :images="obj.policyImageList">
+              <img v-if="obj.policyImageList[1]" class="imageStyle" :src="obj.policyImageList[1]" />
+              <div v-else class="imageStyle flex j-c a-c ">
+                <span style="margin: 10px;">暂无影像资料 请返回订单查询页“补全影像”</span>
+              </div>
+            </viewer>
+          </el-col>
+        </el-row>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button size="small" @click="applyImageVisible = false"
+          style="background: #EAEDF1;color:#D42426;border-color:#EAEDF1">关闭</el-button>
+      </span>
+    </el-dialog>
+    <el-dialog title="影像信息" :visible.sync="insureImageVisible" width="50%">
+      <div>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <h4>被保人身份证正面</h4>
+            <viewer :images="obj.insuredImageList">
+              <img v-if="obj.insuredImageList[0]" class="imageStyle" :src="obj.insuredImageList[0]" />
+              <div v-else class="imageStyle flex j-c a-c ">
+                <span style="margin: 10px;">暂无影像资料 请返回订单查询页“补全影像”</span>
+              </div>
+            </viewer>
+          </el-col>
+          <el-col :span="12">
+            <h4>被保人身份证反面</h4>
+            <viewer :images="obj.insuredImageList">
+              <img v-if="obj.insuredImageList[1]" class="imageStyle" :src="obj.insuredImageList[1]" />
+              <div v-else class="imageStyle flex j-c a-c ">
+                <span style="margin: 10px;">暂无影像资料 请返回订单查询页“补全影像”</span>
+              </div>
+            </viewer>
+          </el-col>
+        </el-row>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button size="small" @click="insureImageVisible = false"
+          style="background: #EAEDF1;color:#D42426;border-color:#EAEDF1">关闭</el-button>
+      </span>
+    </el-dialog>
+    <el-dialog title="全部影像" :visible.sync="allImageVisible" width="50%">
+      <el-row>
+        <el-col :span="4">
+          <div class="tab-style">
+            <li class="liMenu" :class="idx == tabLiIndex ? 'tabLi-style' : ''" @click="tabLiScroll(item.scroll,idx)"
+              v-for="(item, idx) in tabLimenu" :key="idx">
+              {{ item.name }}
+            </li>
+          </div>
+        </el-col>
+        <el-col :span="20" style="height: 320px; overflow-y: auto">
+          <div class="flex f-wrap m-btn-15"  id="vehicle">
+            <div class="aaa">
+              <span>1.行驶证主页</span>
+              <viewer :images="obj.carImageList">
+                <img v-if="obj.carImageList[0]" class="imageStyle" :src="obj.carImageList[0]" />
+                <div v-else class="imageStyle flex j-c a-c ">
+                  <span style="margin: 10px;">暂无影像资料 请返回订单查询页“补全影像”</span>
+                </div>
+              </viewer>
+            </div>
+            <div class="aaa">
+              <span>2.行驶证副页</span>
+              <viewer :images="obj.ownerImageList">
+                <img v-if="obj.carImageList[1]" class="imageStyle" :src="obj.carImageList[1]" />
+                <div v-else class="imageStyle flex j-c a-c ">
+                  <span style="margin: 10px;">暂无影像资料 请返回订单查询页“补全影像”</span>
+                </div>
+              </viewer>
+            </div>
+          </div>
+          <div class="flex f-wrap m-btn-15" id="owner">
+            <div class="aaa">
+              <span>1.车主身份证（正面）</span>
+              <viewer :images="obj.ownerImageList">
+                <img v-if="obj.ownerImageList[0]" class="imageStyle" :src="obj.ownerImageList[0]" />
+                <div v-else class="imageStyle flex j-c a-c ">
+                  <span style="margin: 10px;">暂无影像资料 请返回订单查询页“补全影像”</span>
+                </div>
+              </viewer>
+            </div>
+            <div class="aaa">
+              <span>2.车主身份证（反面）</span>
+              <viewer :images="obj.ownerImageList">
+                <img v-if="obj.ownerImageList[1]" class="imageStyle" :src="obj.ownerImageList[1]" />
+                <div v-else class="imageStyle flex j-c a-c ">
+                  <span style="margin: 10px;">暂无影像资料 请返回订单查询页“补全影像”</span>
+                </div>
+              </viewer>
+            </div>
+          </div>
+          <div class="flex f-wrap m-btn-15" id="applicant">
+            <div class="aaa">
+              <span>1.投保人身份证（正面）</span>
+              <viewer :images="obj.policyImageList">
+              <img v-if="obj.policyImageList[0]" class="imageStyle" :src="obj.policyImageList[0]" />
+              <div v-else class="imageStyle flex j-c a-c ">
+                <span style="margin: 10px;">暂无影像资料 请返回订单查询页“补全影像”</span>
+              </div>
+            </viewer>
+            </div>
+            <div class="aaa">
+              <span>2.投保人身份证（反面）</span>
+              <viewer :images="obj.policyImageList">
+              <img v-if="obj.policyImageList[1]" class="imageStyle" :src="obj.policyImageList[1]" />
+              <div v-else class="imageStyle flex j-c a-c ">
+                <span style="margin: 10px;">暂无影像资料 请返回订单查询页“补全影像”</span>
+              </div>
+            </viewer>
+            </div>
+          </div>
+          <div class="flex f-wrap m-btn-15" id="insured">
+            <div class="aaa">
+              <span >1.被保人身份证（正面）</span>
+              <viewer :images="obj.insuredImageList">
+              <img v-if="obj.insuredImageList[0]" class="imageStyle" :src="obj.insuredImageList[0]" />
+              <div v-else class="imageStyle flex j-c a-c ">
+                <span style="margin: 10px;">暂无影像资料 请返回订单查询页“补全影像”</span>
+              </div>
+            </viewer>
+            </div>
+            <div class="aaa">
+              <span>2.被保人身份证（反面）</span>
+              <viewer :images="obj.insuredImageList">
+              <img v-if="obj.insuredImageList[1]" class="imageStyle" :src="obj.insuredImageList[1]" />
+              <div v-else class="imageStyle flex j-c a-c ">
+                <span style="margin: 10px;">暂无影像资料 请返回订单查询页“补全影像”</span>
+              </div>
+            </viewer>
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+      <span slot="footer" class="dialog-footer">
+        <el-button size="small" @click="allImageVisible = false"
+          style="background: #EAEDF1;color:#D42426;border-color:#EAEDF1">关闭</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 <script>
@@ -910,9 +1170,46 @@ export default {
         ],
       },
       dynamicFormArray: [],
-      operator:{
-        label:'agreement_operator'
-      }
+      operator: {
+        label: 'agreement_operator'
+      },
+      carImageVisible: false,
+      ownerImageVisible: false,
+      applyImageVisible: false,
+      insureImageVisible: false,
+      allImageVisible: false,
+      tabLiIndex: 0,
+      tabLimenu: [
+        {
+          name: "车辆信息",
+          scroll: "vehicle",
+        },
+        {
+          name: "车主信息",
+          scroll: "owner",
+        },
+        {
+          name: "投保人信息",
+          scroll: "applicant",
+        },
+        {
+          name: "被保人信息",
+          scroll: "insured",
+        },
+        {
+          name: "关系证明",
+          scroll: "relationship",
+        },
+        {
+          name: "验车照",
+          scroll: "yanchezhao",
+        },
+        {
+          name: "上年商业险保单",
+          scroll: "snbaodan",
+        },
+
+      ],
     };
   },
   props: {
@@ -955,6 +1252,13 @@ export default {
   },
   components: { OpenCloseBox, ProductCostForm },
   methods: {
+    tabLiScroll(id, idx) {
+      this.tabLiIndex = idx;
+      document.getElementById(id).scrollIntoView({ behavior: "smooth" });
+    },
+    imageQuery(Visible) {
+      this[Visible] = true;
+    },
     feeOrderNewVomergeRows({ row, column, rowIndex, columnIndex }) {
       if (columnIndex === 0) {
         if (rowIndex === 0 || this.feeOrderNewVoList.list[rowIndex].type !== this.feeOrderNewVoList.list[rowIndex - 1].type) {
@@ -1080,6 +1384,7 @@ export default {
       this.dialogVisible = backupVisible
     },
     imageFun(param) {
+      console.log(param)
       this.obj = param
     },
     warrantyFun(param) {
@@ -1110,6 +1415,31 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
+.tab-style {
+  width: 120px;
+
+  li {
+    text-align: right;
+    padding-right: 20px;
+    line-height: 40px;
+    cursor: pointer;
+    box-sizing: border-box;
+    border-right: 1px solid #e2e5eb;
+  }
+
+  li:focus {
+    background: rgba(212, 36, 38, 0.1);
+    border-right: 2px solid var(--themeColor);
+    color: var(--themeColor);
+  }
+}
+
+.tabLi-style {
+  background: rgba(212, 36, 38, 0.1);
+  border-right: 2px solid var(--themeColor);
+  color: var(--themeColor);
+}
+
 .details-body {
   .tabLeft {
     list-style: none;
@@ -1134,7 +1464,7 @@ export default {
     color: var(--themeColor);
     background-color: rgba(212, 36, 38, 0.06);
   }
-  
+
   .fixedTop {
     width: 100%;
     height: auto;
@@ -1252,20 +1582,63 @@ export default {
 }
 
 .kind-arrears {
+  b:nth-child(1) {
+    width: 10%;
 
-  b,
-  span {
-    width: 33.33%;
   }
+
+  b:nth-child(2) {
+    width: 40%;
+
+  }
+
+  b:nth-child(3) {
+    width: 20%;
+
+  }
+
+  b:nth-child(4) {
+    width: 20%;
+
+  }
+
+  b:nth-child(5) {
+    width: 10%;
+  }
+
+  .body {
+    >span {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+
+  .insuranceType {
+    >span {
+      width: 25%;
+    }
+
+    :nth-child(1) {
+      width: 50%;
+    }
+
+
+  }
+
+  .insuranceType:nth-child(even) {
+    background: #F9FAFA;
+  }
+
 }
 
 .imageStyle {
-  display: inline-block;
-  width: 120px;
-  height: 120px;
+  width: 260px;
+  height: 160px;
   // box-shadow: #ddd 0px 0px 5px;
   margin-right: 86px;
-  border: 1px dashed #CED4DA;
+  border: 2px dashed #CED4DA;
+  border-radius: 4px;
   background: #F7F7F9;
 }
 
@@ -1283,6 +1656,12 @@ export default {
   }
 }
 
+/deep/ {
+  .el-dialog__header {
+    font-weight: bold;
+  }
+}
+
 .products>div {
   margin: 5px;
 }

src/views/Core/components/openclose.vue

@@ -1,60 +1,65 @@
 <template>
-	<div class="openclose-box" >
-        <div  class="openclose">
-            <div class="openclose-btn" >
-                <slot name="title"></slot>
-            </div>
-		</div>
-		<div class="openclose-boby">
-			<slot name="boby"></slot>
-		</div>
-	</div>
+  <div class="openclose-box">
+    <div class="openclose">
+      <div class="openclose-btn">
+        <slot name="title"></slot>
+        <slot name="extension"></slot>
+
+      </div>
+    </div>
+    <div class="openclose-boby">
+      <slot name="boby"></slot>
+    </div>
+  </div>
 </template>
 <script>
-export default{
-	name:'OpenCloseBox',
-	props:{
-		open:{
-			type:Boolean,
-			default:false,
-		}
-	},
-	data(){
-		return{
-			isOpen:this.open
-		}
-	}
+export default {
+  name: 'OpenCloseBox',
+  props: {
+    open: {
+      type: Boolean,
+      default: false,
+    }
+  },
+  data() {
+    return {
+      isOpen: this.open
+    }
+  }
 }
 </script>
 <style lang="scss" scoped>
-.openclose-box{
-	margin-bottom: 20px;
-	.openclose-btn{
-		font-size:15px;
-		line-height:30px;
-		font-weight: bold;
-		display:flex;
-		color: #000;
-		align-items:center;
-		cursor:pointer;
-        justify-content: space-between;
-        padding-left: 10px;
-        //border-left: 4px solid;
-       
-        img{
-            margin-right: 10px;
-        }
-	}
+.openclose-box {
+  margin-bottom: 20px;
+
+  .openclose-btn {
+    font-size: 15px;
+    line-height: 30px;
+    font-weight: bold;
+    display: flex;
+    color: #000;
+    align-items: center;
+    cursor: pointer;
+    justify-content: space-between;
+    padding-left: 10px;
+    //border-left: 4px solid;
+
+    div {
+      margin-right: 10 px;
+    }
+
+  }
 }
-.openclose{
-    padding: 3px 0;
-    background: rgba(255, 255, 255, 0.4);
+
+.openclose {
+  padding: 3px 0;
+  background: rgba(255, 255, 255, 0.4);
 }
+
 // .retract{
 //     transform: rotate(-90deg);
 // }
-.openclose-boby{
-    padding: 10px;
-	background-color: #fff;
-}
-</style>
+.openclose-boby {
+  padding: 10px;
+  background-color: #fff;
+}</style>