报价单和支付码弹窗功能

src/views/insurancePolicy/index.vue

@@ -1039,7 +1039,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">
@@ -1235,6 +1235,10 @@
                     @click="handleSubmit(InsurancePolicyRefs, scope)">计算保费</el-button>
                   <el-button v-if="scope.row.quoteResult?.code === 200" link type="primary"
                     @click="handleShare(scope.row.quoteResult.ordersNo)">分享</el-button>
+                  <el-button v-if="scope.row.quoteResult?.quoteStatus == 4" link type="primary"
+                    @click="handlePayment(scope.row.quoteResult.ordersNo)">支付码</el-button>
+                    <el-button v-if="scope.row.quoteResult?.quoteStatus == 4" link type="primary"
+                    @click="handleCancelPayment(scope.row.quoteResult.ordersNo)">撤销支付码</el-button>
                   <el-button v-if="scope.row.quoteResult?.code === 200" link type="primary" :loading="scope.row.loading"
                     @click="handleUnderwriting(scope)">核保</el-button>
                 </div>
@@ -1344,13 +1348,28 @@
     <el-dialog title="选择业务员" v-model="salesmanShow" width="700">
       <salesmanSelect ref="SalesmanSelectRef" fromPage="10" @close="handleSalesmanSelect"></salesmanSelect>
     </el-dialog>
-    <el-dialog v-model="shareShow" width="300" title="分享">
-      <div class="imageCode">
+    <el-dialog v-model="shareShow" width="300" title="分享报价单">
+      <div class="imageCode flex flex-col">
         <img :src="shareImageUrl" />
+        <span class="text-[12px] text-[#333] mt-[5px] ">请使用微信扫码，查看报价单</span>
       </div>
       <template #footer>
-        <el-button plain type="primary" @click="handleSaveImage">保存图片</el-button>
-        <el-button plain type="primary" @click="handleCopyLink">复制链接</el-button>
+        <div class="flex justify-center">
+          <el-button plain type="primary" @click="handleSaveImage">保存二维码</el-button>
+          <el-button plain type="primary" @click="handleCopyLink">复制链接</el-button>
+        </div>
+      </template>
+    </el-dialog>
+    <el-dialog v-model="paymentShow" width="350" title="支付码">
+      <div class="imageCode flex flex-col">
+        <img :src="payCodeUrl" />
+      </div>
+      <template #footer>
+        <div class="flex justify-center">
+          <el-button plain type="danger" @click="handleCancelPayment">撤销支付码</el-button>
+          <el-button plain type="primary" @click="handleSavePaymentImage">保存二维码</el-button>
+          <el-button plain type="primary" @click="handleCopyPaymentLink">复制链接</el-button>
+        </div>
       </template>
     </el-dialog>
     <el-dialog title="优惠测算" v-model="calculatingShow" width="600">
@@ -1399,7 +1418,8 @@
         <el-table-column label="特别约定内容" prop="clauseContent" width="300" align="center"></el-table-column>
       </el-table>
       <div class="footer">
-        <el-button class="border-[#0083FF] color-[#0083FF]" plain type="primary" @click="handleSpecialTableDataCancel">取消</el-button>
+        <el-button class="border-[#0083FF] color-[#0083FF]" plain type="primary"
+          @click="handleSpecialTableDataCancel">取消</el-button>
         <el-button type="primary" @click="handleSpecialTableDataSubmit">确定</el-button>
       </div>
     </el-dialog>
@@ -1437,7 +1457,7 @@ import type { FormInstance, FormRules } from 'element-plus'
 // 导入API接口
 import api from "@/api";
 // 导入Element Plus消息提示组件
-import { ElMessage, ElNotification } from "element-plus";
+import { ElMessage, ElNotification, ElMessageBox } from "element-plus";
 // 导入Vue Router路由相关函数
 import { useRoute, useRouter } from 'vue-router'
 // 导入子组件
@@ -2802,26 +2822,76 @@ let tableData = ref([])
 
 // 分享
 let shareShow = ref(false)
+let ordersNo = ref('')
 let shareImageUrl = ref('')
 const handleShare = async (scope: any) => {
-  shareImageUrl.value = await QRCode.toDataURL(`http://test-tennat.baoxianzhanggui.com/h5/#/pages/quote/paymentCode?ordersNo=${scope}`, {
+  ordersNo.value = scope;
+  shareImageUrl.value = await QRCode.toDataURL(`https://tennat.baoxianzhanggui.com/h5/#/pages/quote/quoteRecordDetail?ordersNo=${scope}&from=share`, {
     width: 150,
     margin: 2
   });
-  console.log(shareImageUrl.value)
   shareShow.value = true
 }
 const handleSaveImage = () => {
   shareShow.value = false
   const link = document.createElement('a');
   link.href = shareImageUrl.value;
-  link.download = '报价.png';
+  link.download = '报价单二维码.png';
   link.click();
 }
+const handleSavePaymentImage = () => {
+  paymentShow.value = false
+  const link = document.createElement('a');
+  link.href = payCodeUrl.value;
+  link.download = '支付码.png';
+  link.click();
+}
+//撤销支付码
+const handleCancelPayment = (scope: any) => {
+  ElMessageBox.confirm(
+    '支付码撤销后，订单将关闭，不在支持任何操作，想要再次报价核保时，需要重新报价。',
+    '确定撤销支付码吗',
+    {
+      confirmButtonText: '确定撤销',
+      type: 'error',
+      center: true,
+      confirmButtonClass: 'el-button--primary',
+    }
+  )
+    .then(() => {
+      api.insurancePolicyApi.destroyQrCode({ orderNo:scope || ordersNo.value }).then(async (res: any) => {
+        if (res.code == 200) {
+          ElMessage({
+            message: '支付码撤销成功！',
+            type: 'success'
+          })
+        } else {
+        }
+      })
+    })
+    .catch(() => {
+    })
+}
 const handleCopyLink = async () => {
   shareShow.value = false
   try {
-    await navigator.clipboard.writeText('你想要复制的文本');
+    await navigator.clipboard.writeText(`https://tennat.baoxianzhanggui.com/h5/#/pages/quote/quoteRecordDetail?ordersNo=${ordersNo.value}&from=share`);
+    ElMessage({
+      message: '复制成功！',
+      type: 'success'
+    })
+  } catch (err) {
+    ElMessage({
+      message: '复制失败！',
+      type: 'error'
+    })
+  }
+}
+const handleCopyPaymentLink = async () => {
+  paymentShow.value = false
+  try {
+    await navigator.clipboard.writeText(`https://tennat.baoxianzhanggui.com/h5/#/pages/quote/paymentCode?ordersNo=${ordersNo.value}`);
+
     ElMessage({
       message: '复制成功！',
       type: 'success'
@@ -2833,7 +2903,23 @@ const handleCopyLink = async () => {
     })
   }
 }
+// 支付码
+let paymentShow = ref(false)
+const handlePayment = (scope: any) => {
+  console.log(scope)
+  ordersNo.value = scope;
+  api.insurancePolicyApi.getQrCode(scope).then(async (res: any) => {
+    if (res.code == 200) {
 
+    } else {
+      payCodeUrl.value = await QRCode.toDataURL(`https://tennat.baoxianzhanggui.com/h5/#/pages/quote/paymentCode?ordersNo=${ordersNo.value}`, {
+        width: 150,
+        margin: 2
+      });
+      paymentShow.value = true
+    }
+  })
+}
 // 优惠测算
 let calculatingShow = ref(false)
 const handleCount = (scope: any) => {