支付码增加保费信息

src/views/insurancePolicy/order.vue

@@ -81,7 +81,7 @@
       <el-table-column label="车架号" prop="vinNo" width="200"></el-table-column>
       <el-table-column label="状态" prop="orderStatus" width="200">
         <template #default="scope">
-          {{ orderStatusList.find(v=>v.value===Number(scope.row.orderStatus))?.label ?? '--'  }}
+          {{orderStatusList.find(v => v.value === Number(scope.row.orderStatus))?.label ?? '--'}}
         </template>
       </el-table-column>
       <el-table-column label="报价时间" prop="createTime" width="200"></el-table-column>
@@ -130,8 +130,8 @@
             v-if="scope.row.orderStatus === '7' || scope.row.orderStatus === '1' || scope.row.orderStatus === '4'"
             @click="updateOrderStatus(scope.row.orderNo)">更新订单</el-button>
           <!-- 模拟接口，正式上线后，删除 -->
-          <el-button link type="primary" :loading="scope.row.loading"
-            v-if="scope.row.orderStatus === '4'" @click="mockUnderwited(scope.row)">模拟承保</el-button>
+          <el-button link type="primary" :loading="scope.row.loading" v-if="scope.row.orderStatus === '4'"
+            @click="mockUnderwited(scope.row)">模拟承保</el-button>
           <el-button link type="primary" v-if="scope.row.orderStatus === '3'"
             @click="updateOrderStatus(scope.row.orderNo)">同步订单</el-button>
           <el-button link type="primary" v-if="scope.row.orderStatus === '6'"
@@ -166,12 +166,57 @@
         @current-change="handleCurrentChange"></el-pagination>
     </div>
     <!-- 支付码 -->
-    <el-dialog v-model="payCodeShow" width="400" title="支付码">
+    <el-dialog v-model="payCodeShow" width="380" title="支付码">
       <img class="payCode" :src="payCodeUrl">
+      <div class="payCodeInfo flex f-c ">
+        <span class="text-[24px] font-bold text-center m-[20px] text-[#d42426]">{{ payCodeInfo?.sumPremium }}</span>
+        <div class="ORtitle">
+          <div v-if="payCodeInfo?.company">
+            <span>保险公司：</span>
+            <span>{{ payCodeInfo?.company }}</span>
+          </div>
+          <div v-if="payCodeInfo?.licenseNo">
+            <span>车牌号：</span>
+            <span>{{ payCodeInfo?.licenseNo }}</span>
+          </div>
+          <div v-if="payCodeInfo?.policyName">
+            <span>投保人：</span>
+            <span>{{ payCodeInfo?.policyName }}</span>
+          </div>
+          <div v-if="payCodeInfo?.jqPremium">
+            <span>交强：</span>
+            <span>{{ payCodeInfo?.jqPremium }}</span>
+          </div>
+
+          <div v-if="payCodeInfo?.syPremium">
+            <span>商业：</span>
+            <span>{{ payCodeInfo?.syPremium }}</span>
+          </div>
+          <div v-if="payCodeInfo?.taxPremium">
+            <span>车船税：</span>
+            <span>{{ payCodeInfo?.taxPremium }}</span>
+          </div>
+
+          <div v-if="payCodeInfo?.jqStartTime">
+            <span>交强险起保日期：</span>
+            <span>{{ payCodeInfo?.jqStartTime }}</span>
+          </div>
+          <div v-if="payCodeInfo?.syStartTime">
+            <span>商业险起保日期：</span>
+            <span>{{ payCodeInfo?.syStartTime }}</span>
+          </div>
+          <div v-if="payCodeInfo?.jyPremium">
+            <span>驾意险：</span>
+            <span>{{ payCodeInfo?.jyPremium }}</span>
+          </div>
+        </div>
+      </div>
       <template #footer>
-        <el-button plain type="danger">撤销二维码</el-button>
-        <el-button plain type="primary">保存二维码</el-button>
-        <el-button plain type="primary">复制链接</el-button>
+        <div class="flex justify-center">
+          <el-button plain type="danger">撤销二维码</el-button>
+          <el-button plain type="primary">保存二维码</el-button>
+          <el-button plain type="primary">复制链接</el-button>
+        </div>
       </template>
     </el-dialog>
     <!-- 批改 -->
@@ -603,10 +648,12 @@ const deleteOrder = (id: string): void => {
 // 支付码
 let payCodeShow = ref(false)
 let payCodeUrl = ref('')
+const payCodeInfo = ref()//支付码信息
 const payCode = (scope: any) => {
-  payCodeShow.value = true
   api.insurancePolicyApi.getQrCode(scope.row.orderNo).then((res: any) => {
     if (res.code == 200) {
+      payCodeInfo.value = res.data
+      payCodeShow.value = true
       initPayCode(res.data?.qrcode)
     } else {
       payCodeUrl.value = ''
@@ -715,10 +762,27 @@ const openDetail = (e: any) => {
 }
 
 :deep(.el-dialog__body) {
-  height: 500px;
+  max-height: 500px;
   overflow: auto;
 }
 
+.payCodeInfo {
+  .ORtitle>div {
+    margin-bottom: 10px;
+
+    :first-child {
+      font-size: 14px;
+      color: #999;
+    }
+
+    :last-child {
+      font-size: 14px;
+      color: #333;
+    }
+
+  }
+}
+
 .enumValues {
   flex: 1;
   min-width: 0;