|
|
@@ -0,0 +1,271 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <el-dialog :visible.sync="codedialogVisible" width="430px" top="10vh" class="saomazhifucodeClass">
|
|
|
+ <div class="ORcodebody" v-watermark="orderId">
|
|
|
+ <div slot="title" class="dialog-title">
|
|
|
+ <span>扫码付款</span>
|
|
|
+ </div>
|
|
|
+ <div class="ORcode">
|
|
|
+ <div style="padding:13px;position: relative;">
|
|
|
+ <img v-if="['太平财险', '华泰财险'].includes(carcodeForm.inscompany)" :src="paycodeimg" alt style="width:100%" />
|
|
|
+ <div v-else id="qrcode" ref="qrcode"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <img style="margin-left: -16px" src="../../../assets/image/divider.png" alt />
|
|
|
+ <div style="font-size:32px;text-align: center;color:#D42426;margin-top:20px">
|
|
|
+ <span style="font-size:24px;font-weight:bold">¥</span>
|
|
|
+ {{ carcodeForm.sumpremium }}
|
|
|
+ </div>
|
|
|
+ <div class="ORtitle">
|
|
|
+ <div>
|
|
|
+ <span>保险公司:</span>
|
|
|
+ <span>{{ carcodeForm.inscompany }}</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span>车牌号:</span>
|
|
|
+ <span>{{ carcodeForm.cPlateNo }}</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span>投保人:</span>
|
|
|
+ <span>{{ carcodeForm.cInsuredNme }}</span>
|
|
|
+ </div>
|
|
|
+ <div v-show="carcodeForm.jqpremium">
|
|
|
+ <span>交强:</span>
|
|
|
+ <span>{{ carcodeForm.jqpremium }}</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div v-show="carcodeForm.sypremium">
|
|
|
+ <span>商业:</span>
|
|
|
+ <span>{{ carcodeForm.sypremium }}</span>
|
|
|
+ </div>
|
|
|
+ <div v-show="carcodeForm.taxamount">
|
|
|
+ <span>车船税:</span>
|
|
|
+ <span>{{ carcodeForm.taxamount }}</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div v-show="carcodeForm.jqStartDate">
|
|
|
+ <span>交强险起保日期:</span>
|
|
|
+ <span>{{ carcodeForm.jqStartDate }}</span>
|
|
|
+ </div>
|
|
|
+ <div v-show="carcodeForm.syStartDate">
|
|
|
+ <span>商业险起保日期:</span>
|
|
|
+ <span>{{ carcodeForm.syStartDate }}</span>
|
|
|
+ </div>
|
|
|
+ <div v-if="carcodeForm.jypremium">
|
|
|
+ <span>非车险:</span>
|
|
|
+ <span>{{ carcodeForm.jypremium }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <span slot="footer" class="dialog-footer display">
|
|
|
+ <el-button size="small" style="width:100px;border-color:#D42426;color:#D42426 "
|
|
|
+ @click="codedialogVisible = false">关闭</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+ <!--第二种 二维码 -->
|
|
|
+ <el-dialog :visible.sync="codedialogVisiblePro" width="660px" class="proSaomazhifucodeClass" top="10vh" title="扫码付款">
|
|
|
+ <div class="flex j-s">
|
|
|
+ <div class="scan-code">
|
|
|
+ <div style="font-weight: bold;">
|
|
|
+ 总金额:
|
|
|
+ <span style="color:#2D4D89 ">{{ carcodeForm.sumpremium }}</span>
|
|
|
+ </div>
|
|
|
+ <div>交强险:{{ carcodeForm.jqpremium }}</div>
|
|
|
+ <div>车船税:{{ carcodeForm.taxamount }}</div>
|
|
|
+ <div>商业险:{{ carcodeForm.sypremium }}</div>
|
|
|
+ <div>非车险:{{ carcodeForm.jypremium }}</div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <img v-if="['太平财险', '华泰财险'].includes(carcodeForm.inscompany)" :src="paycodeimg" alt style="width:200px;height: 200px;" />
|
|
|
+ <div v-else id="qrcode" ref="qrcode"></div>
|
|
|
+ </div>
|
|
|
+ <div class="scan-code">
|
|
|
+ <div>保险公司:{{ carcodeForm.inscompany }}</div>
|
|
|
+ <div>车牌号:{{ carcodeForm.cPlateNo }}</div>
|
|
|
+ <div>投保人:{{ carcodeForm.cInsuredNme }}</div>
|
|
|
+ <div>交强险起保日期:{{ carcodeForm.jqstartdate }}</div>
|
|
|
+ <div>商业险起保日期:{{ carcodeForm.systartdate }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button size="small" style="width:100px;background: #EAEDF1;border-color:#EAEDF1;color:#2D4D89 "
|
|
|
+ @click="codedialogVisiblePro = false">关闭</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import QRCode from "qrcodejs2";
|
|
|
+export default {
|
|
|
+ data(){
|
|
|
+ return{
|
|
|
+ codedialogVisible:false,
|
|
|
+ codedialogVisiblePro:false,
|
|
|
+ carcodeForm:{},
|
|
|
+ paycodeimg:'',
|
|
|
+ qrcode: null,
|
|
|
+ qrcodeWidth: "180",
|
|
|
+ qrcodeHeight: "180",
|
|
|
+ orderId:''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ carcode(row) {
|
|
|
+ console.log(row);
|
|
|
+ this.orderId = row.subOrderId
|
|
|
+ this.$api.letter.getQrCode(row.subOrderId).then(res => {
|
|
|
+ if (res.code == "200") {
|
|
|
+ this.carcodeForm=res.data
|
|
|
+ this.$api.letter.getThemeByUserId().then(res => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ if (res.data[0] == 'GD') {
|
|
|
+ this.codedialogVisiblePro = true;
|
|
|
+ this.qrcodeWidth = "154";
|
|
|
+ this.qrcodeHeight = "154";
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ this.codedialogVisible = true;
|
|
|
+ }
|
|
|
+ this.$nextTick(function () {
|
|
|
+ if (row.inscompany == "太平财险") {
|
|
|
+ let anresult = qrCodeUrl.replace(/[\r\n]/g, "");
|
|
|
+ let animgBase64 = `data:image/png;base64,${anresult}`;
|
|
|
+ base64ToPath(animgBase64).then(path => {
|
|
|
+ this.paycodeimg = path;
|
|
|
+ });
|
|
|
+ } else if (row.inscompany == "华泰财险") {
|
|
|
+ switch (row.apiType) {
|
|
|
+ case 1:
|
|
|
+ this.paycodeimg = qrCodeUrl;
|
|
|
+ break;
|
|
|
+ case 2:
|
|
|
+ let anresult = qrCodeUrl.replace(/[\r\n]/g, "");
|
|
|
+ let animgBase64 = `data:image/png;base64,${anresult}`;
|
|
|
+ base64ToPath(animgBase64).then(path => {
|
|
|
+ this.paycodeimg = path;
|
|
|
+ });
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ this.creatQrCode( this.carcodeForm.qrCodeUrl);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.$message({ message: res.msg, type: "warning" });
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ },
|
|
|
+ //二维码生成插件
|
|
|
+ creatQrCode(text) {
|
|
|
+ if (this.qrcode) {
|
|
|
+ this.qrcode.clear();
|
|
|
+ this.qrcode.makeCode(text);
|
|
|
+ } else {
|
|
|
+ this.qrcode = new QRCode("qrcode", {
|
|
|
+ text: text,
|
|
|
+ width: this.qrcodeWidth,
|
|
|
+ height: this.qrcodeHeight,
|
|
|
+ colorDark: "#000000",
|
|
|
+ colorLight: "#ffffff",
|
|
|
+ correctLevel: QRCode.CorrectLevel.H
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style scoped scoped lang="scss">
|
|
|
+/deep/{
|
|
|
+ .saomazhifucodeClass .el-dialog__body,
|
|
|
+ .saomazhifucodeClass .el-dialog__header,
|
|
|
+ .saomazhifucodeClass .el-dialog__footer {
|
|
|
+ padding: 0;
|
|
|
+ background: #f4e9e9;
|
|
|
+ }
|
|
|
+
|
|
|
+ .saomazhifucodeClass .el-dialog__body {
|
|
|
+ padding: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .saomazhifucodeClass .el-dialog__footer {
|
|
|
+ background: #f4e9e9;
|
|
|
+ padding-bottom: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .saomazhifucodeClass .el-dialog__headerbtn {
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.ORcodebody {
|
|
|
+ height: auto;
|
|
|
+ // background: url(../../../assets/image/group.png) #fff;
|
|
|
+ padding: 16px;
|
|
|
+ background-color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.ORcode {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ padding: 30px;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ &>div {
|
|
|
+ width: 176px;
|
|
|
+ height: 176px;
|
|
|
+ border: 1px solid var(--themeColor);
|
|
|
+ border-radius: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+.ORtitle {
|
|
|
+ width: 100%;
|
|
|
+ padding-bottom: 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ &>div {
|
|
|
+ width: 100%;
|
|
|
+ margin: 10px 0;
|
|
|
+ font-size: 14px;
|
|
|
+
|
|
|
+ &>span {
|
|
|
+ &:nth-child(1) {
|
|
|
+ color: #868b98;
|
|
|
+ text-align: end;
|
|
|
+ width: 150px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(2) {
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+#qrCode {
|
|
|
+ display: inline-block;
|
|
|
+ margin: 0 auto;
|
|
|
+ /*水平居中*/
|
|
|
+ position: relative;
|
|
|
+ top: 15%;
|
|
|
+}
|
|
|
+
|
|
|
+#qrCode img {
|
|
|
+ width: 200px;
|
|
|
+ height: 200px;
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 6px;
|
|
|
+}
|
|
|
+.display {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+</style>
|