回执单下载

杨泽宇
1 parent d05f6949
Showing 3 changed files with 150 additions and 27 deletions
src/views/fee/index.vue
src/views/fee/paper.vue
src/views/user/cnlive_login.vue
@@ -158,11 +158,11 @@ const handleChange = (value: number, pageSize: number) =&gt; {
  * @param {object} obj 缴费状态改变
  */
 const handlePay = (value: number | null) => {
-  if(!value) {
-    data.params.query.payType = null
+  if (!value) {
+    data.params.query.payType = null;
   }
-  getList()
-}
+  getList();
+};
 /**
  * 查看回执单
  * @param {object} obj 一条表格对象
@@ -410,13 +410,6 @@ const handleCancel = () =&gt; {
   form.visible = false;
 };
 /**
- * 表格每一行是否可选中
- * @param {array} row 每一行数据对象
- */
-// const isSelectable = (row: any) => {
-//   return ~~row.status === 0 && ~~row.payStatus === 0;
-// };
-/**
  * 表单提交
  */
 const submitForm = (formEl: InstanceType<typeof ElForm> | undefined) => {
 <script setup lang="ts">
-import { reactive, ref, getCurrentInstance } from "vue";
+import { reactive, ref, getCurrentInstance, onMounted } from "vue";
 import { parseTime, globalFilters } from "@/utils/tool";
 import { bankType } from "./config";
 /**
@@ -17,10 +17,127 @@ const props = withDefaults(defineProps&lt;Props&gt;(), {
     },
   },
 });
+/**
+ * @method getPic
+ * @description 下载回执单响应
+ */
+const getPic = () => {
+  let can: any = document.querySelector("#fee-canv");
+  let url = can.toDataURL("image/png");
+  let aDom = document.createElement("a");
+  aDom.download = "物业费回执单.png";
+  aDom.href = url;
+  document.body.appendChild(aDom);
+  aDom.click();
+  document.body.removeChild(aDom);
+};
+/**
+ * @method drawCanvas
+ * @description 数据生成canvas
+ */
+const drawCanvas = () => {
+  let canvas: any = document.querySelector("#fee-canv");
+  let ctx: any = canvas.getContext("2d");
+  canvas.width = 1000;
+  canvas.height = 360;
+  canvas.style.border = "2px solid #000";
+  let rectH: number = 45,
+    rectW: number = 500,
+    labelW: number = 150;
+  ctx.lineWidth = 2;
+
+  // 画横线
+  for (let i = 1; i < canvas.height; i++) {
+    ctx.moveTo(0, rectH * i);
+    ctx.lineTo(canvas.width, rectH * i);
+  }
+  // 画左侧label右侧边框
+  let ind = 1;
+  ctx.moveTo(labelW, 45);
+  while (ind <= canvas.height / rectH) {
+    ctx.lineTo(labelW, rectH * ind);
+    ind++;
+  }
+  // 画右侧label边框
+  ctx.moveTo(rectW, 45);
+  ctx.lineTo(rectW, rectH * 2);
+  ctx.moveTo(rectW, 135);
+  ctx.lineTo(rectW, rectH * 5);
+
+  ctx.moveTo(rectW + labelW, 45);
+  ctx.lineTo(rectW + labelW, rectH * 2);
+  ctx.moveTo(rectW + labelW, 135);
+  ctx.lineTo(rectW + labelW, rectH * 5);
+
+  // 画四周边框
+  ctx.moveTo(0, 45);
+  ctx.lineTo(0, rectH * 8);
+
+  ctx.moveTo(canvas.width, 45);
+  ctx.lineTo(canvas.width, rectH * 8);
+
+  // 填入内容
+  ctx.font = "18px bold 黑体";
+  ctx.fillStyle = "#000000";
+  ctx.textBaseline = "middle";
+  ctx.fillText("回单类型", 38, 69);
+  ctx.fillText(props.paperData.receiptType, 170, 69);
+
+  ctx.fillText("缴费项目", 538, 69);
+  ctx.fillText(props.paperData.receiptName, 670, 69);
+
+  ctx.fillText("收费单位", 38, 114);
+  ctx.fillText(props.paperData.propertyName, 170, 114);
+
+  ctx.fillText("缴费房屋", 38, 159);
+  ctx.fillText(props.paperData.locality, 170, 159);
+  ctx.fillText("缴费人", 538, 159);
+  ctx.fillText(props.paperData.payerName, 670, 159);
+
+  ctx.fillText("金额(大写)", 38, 204);
+  ctx.fillText(props.paperData.rmb, 170, 204);
+  ctx.fillText("金额(小写)", 538, 204);
+  ctx.fillText((props.paperData.totalFee / 100).toFixed(2), 670, 204);
+
+  ctx.fillText("支付方式", 38, 249);
+  ctx.fillText(globalFilters(props.paperData.bankPayType, bankType), 170, 249);
+
+  ctx.fillText("账单周期", 38, 294);
+  ctx.fillText(
+    `${parseTime(new Date(props.paperData.beginTime).getTime(), "", "/").slice(
+      0,
+      7
+    )} - ${parseTime(
+      new Date(props.paperData.endTime).getTime(),
+      "",
+      "/"
+    ).slice(0, 7)}`,
+    170,
+    294
+  );
+
+  ctx.fillText("支付时间", 38, 339);
+  ctx.fillText(
+    parseTime(new Date(props.paperData.payTime).getTime(), "", "/"),
+    170,
+    339
+  );
+
+  ctx.fillText(`电子回执单号码：${props.paperData.receiptId}`, 0, 24);
+  ctx.stroke();
+};
+onMounted(() => {
+  drawCanvas();
+});
 </script>
  
 <template>
-  <p>电子回执单号码：{{ paperData.receiptId }}</p>
+  <el-row
+    style="display: flex; justify-content: space-between; padding-bottom: 10px"
+  >
+    <p>电子回执单号码：{{ paperData.receiptId }}</p>
+    <el-button type="success" @click="getPic">下载</el-button>
+  </el-row>
   <div class="paper-table">
     <el-row class="paper-table-line">
       <el-col :span="12">
@@ -110,9 +227,18 @@ const props = withDefaults(defineProps&lt;Props&gt;(), {
         <el-col :span="20">
           <div class="paper-table-content">
             {{
-              parseTime(new Date(paperData.beginTime).getTime(), "", "/").slice(0, 7)
+              parseTime(new Date(paperData.beginTime).getTime(), "", "/").slice(
+                0,
+                7
+              )
+            }}
+            -
+            {{
+              parseTime(new Date(paperData.endTime).getTime(), "", "/").slice(
+                0,
+                7
+              )
             }}
-            - {{ parseTime(new Date(paperData.endTime).getTime(), "", "/").slice(0, 7) }}
           </div>
         </el-col>
       </el-col>
@@ -130,6 +256,12 @@ const props = withDefaults(defineProps&lt;Props&gt;(), {
       </el-col>
     </el-row>
   </div>
+  <template style="z-index: -1">
+    <canvas
+      id="fee-canv"
+      style="padding: 40px; margin-top: -500px; opacity: 0"
+    ></canvas>
+  </template>
 </template>
  
 <style lang="scss" scoped>
@@ -137,6 +269,7 @@ const props = withDefaults(defineProps&lt;Props&gt;(), {
   border-top: 2px solid #000;
   border-left: 2px solid #000;
   border-right: 2px solid #000;
+  z-index: 1000;
   &-line {
     border-bottom: 2px solid #000;
     display: flex;
@@ -28,6 +28,7 @@ let loading = ref(false);
 let errorMsg = reactive({
   text: "手机号或密码错误",
   show: false,
+  downLoadUrl: 'http://systk.cnlive.com/download.html'
 });
 let menu = reactive({
   data: [],
@@ -146,7 +147,7 @@ onMounted(() =&gt; {
           </div>
  
           <div class="cnlive-download">
-            <a href="http://www.cnlive.com/download.html">下载网家家APP</a>
+            <a href="http://systk.cnlive.com/download.html">下载网家家APP</a>
           </div>
         </div>
       </nav>
@@ -156,7 +157,7 @@ onMounted(() =&gt; {
       <div class="cnlive-main-board">
         <div class="cnlive-main-board-form">
           <div class="cnlive-main-board-form-title">
-            <h3>智慧社区平台</h3>
+            <h3>数字社区平台</h3>
           </div>
           <div class="cnlive-main-board-form-input">
             <el-form
@@ -228,12 +229,9 @@ onMounted(() =&gt; {
  
     <div class="cnlive-footer">
       <p>
-        网家家APP、Cnlive.com 《信息网络传播视听节目许可证》，许可证号：0105123
-      </p>
-      <p>京ICP证090477号、京ICP备11041453号-1、京公网安备11010802024488号</p>
-      <p>
-        社会信用代码91110000667507432R
+        网家家APP、Cnlive.com 《信息网络传播视听节目许可证》、许可证号：0105123
       </p>
+      <p>京ICP证090477号、京ICP备11041453号-1、京公网安备11010802024488号、联系电话：010-65832485</p>
     </div>
   </div>
 </template>
@@ -305,18 +303,17 @@ onMounted(() =&gt; {
         width: 658px;
         padding-left: 151px;
         &-title {
-          color: cyan;
           h3 {
             padding-bottom: 45px;
             margin-top: 190px;
             line-height: 42px;
             font-weight: 600;
-            color: #171717;
+            color: #333333;
             font-size: 30px;
             text-align: left;
-            background: url(https://cnlive-resweb.ks3-cn-beijing.ksyuncs.com/sites/cnlive_web/new-images/huang-icon.png)
-              0 50px no-repeat;
-            background-size: 27px 5px;
+            // background: url(https://cnlive-resweb.ks3-cn-beijing.ksyuncs.com/sites/cnlive_web/new-images/huang-icon.png)
+            //   0 50px no-repeat;
+            // background-size: 27px 5px;
           }
         }
         &-input {