支付码弹窗加保费信息

src/views/insurancePolicy/index.vue

@@ -1038,7 +1038,7 @@
                           <el-table-column label="产品名称" prop="productName" align="center">
                             <template #default="props">
                               <el-button link type="primary" @click="getJYXDetail(props.row)">{{ props.row.productName
-                              }}</el-button>
+                                }}</el-button>
                             </template>
                           </el-table-column>
                           <el-table-column label="数量" align="center">
@@ -1238,10 +1238,12 @@
                     @click="handleShare(scope.row.quoteResult.ordersNo)">分享</el-button>
                   <el-button v-if="scope.row.quoteCode == 200" link type="primary" :loading="scope.row.loading"
                     @click="handleUnderwriting(scope)">核保</el-button>
-                  <el-button v-if="scope.row.quoteResult?.quoteStatus == 4 || scope.row.quoteResult?.order?.orderStatus == 4" link type="primary"
-                    @click="handlePayment(scope.row.quoteResult.ordersNo)">支付码</el-button>
-                  <el-button v-if="scope.row.quoteResult?.quoteStatus == 4 || scope.row.quoteResult?.order?.orderStatus == 4" link type="primary"
-                    @click="handleCancelPayment(scope.row.quoteResult.ordersNo)">撤销支付码</el-button>
+                  <el-button
+                    v-if="scope.row.quoteResult?.quoteStatus == 4 || scope.row.quoteResult?.order?.orderStatus == 4"
+                    link type="primary" @click="handlePayment(scope.row.quoteResult.ordersNo)">支付码</el-button>
+                  <el-button
+                    v-if="scope.row.quoteResult?.quoteStatus == 4 || scope.row.quoteResult?.order?.orderStatus == 4"
+                    link type="primary" @click="handleCancelPayment(scope.row.quoteResult.ordersNo)">撤销支付码</el-button>
                 </div>
               </template>
             </el-table-column>
@@ -1365,6 +1367,49 @@
       <div class="imageCode flex flex-col">
         <img :src="payCodeUrl" />
       </div>
+      <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>
         <div class="flex justify-center">
           <el-button plain type="danger" @click="handleCancelPayment">撤销支付码</el-button>
@@ -2908,7 +2953,7 @@ const handleCopyLink = async () => {
 const handleCopyPaymentLink = async () => {
   paymentShow.value = false
   try {
-    await navigator.clipboard.writeText(paymentCodeUrl.value);
+    await navigator.clipboard.writeText(payCodeInfo.value?.qrcode);
 
     ElMessage({
       message: '复制成功！',
@@ -2923,16 +2968,16 @@ const handleCopyPaymentLink = async () => {
 }
 // 支付码
 let paymentShow = ref(false)
-let paymentCodeUrl = ref('')
+const payCodeInfo = ref()//支付码信息
 const handlePayment = (scope: any) => {
   ordersNo.value = scope;
   api.insurancePolicyApi.getQrCode(scope).then(async (res: any) => {
     if (res.code == 200) {
+      payCodeInfo.value = res.data
       payCodeUrl.value = await QRCode.toDataURL(res.data?.qrcode, {
         width: 150,
         margin: 2
       });
-      paymentCodeUrl.value = res.data?.qrcode
       paymentShow.value = true
     } else {
 
@@ -2990,20 +3035,6 @@ const handleImageSave = (scope: any) => {
   }
 }
 
-//支付码
-const getPayCode = (orderNo: any) => {
-  api.insurancePolicyApi.getQrCode(orderNo).then((res: any) => {
-    if (res.code == 200) {
-      payCodeUrl.value = res.data?.qrcode
-    } else {
-      payCodeUrl.value = ''
-      ElMessage({
-        message: res.msg,
-        type: 'warning'
-      })
-    }
-  })
-}
 
 //分享
 let qrImageUrl = ref('')
@@ -4098,6 +4129,21 @@ onMounted(() => {
     }
   }
 
+  .payCodeInfo {
+    .ORtitle>div {
+      margin-bottom: 10px;
+      :first-child {
+        font-size: 14px;
+        color: #999;
+      }
+      :last-child {
+        font-size: 14px;
+        color: #333;
+      }
+
+    }
+  }
+
   .expandFlex {
     display: flex;
 
@@ -4260,4 +4306,4 @@ onMounted(() => {
     }
   }
 }
-</style>
+</style>