出单详情生成图片下载分享

2025-12-07 01:56:44 +08:00 · 2024-10-23 16:39:31 +08:00
parent 53abc65565
commit 6a248932e7
7 changed files with 328 additions and 88 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -3216,6 +3216,11 @@
        }
      }
    },
+    "base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ=="
+    },
    "base64-js": {
      "version": "1.5.1",
      "resolved": "https://registry.npmmirror.com/base64-js/-/base64-js-1.5.1.tgz",
@@ -4783,6 +4788,14 @@
        }
      }
    },
+    "css-line-break": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/css-line-break/-/css-line-break-2.1.0.tgz",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "requires": {
+        "utrie": "^1.0.2"
+      }
+    },
    "css-loader": {
      "version": "1.0.1",
      "resolved": "https://registry.npmmirror.com/css-loader/-/css-loader-1.0.1.tgz",
@@ -7879,6 +7892,15 @@
        }
      }
    },
+    "html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmmirror.com/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "requires": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      }
+    },
    "htmlparser2": {
      "version": "6.1.0",
      "resolved": "https://registry.npmmirror.com/htmlparser2/-/htmlparser2-6.1.0.tgz",
@@ -15689,6 +15711,14 @@
        }
      }
    },
+    "text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "requires": {
+        "utrie": "^1.0.2"
+      }
+    },
    "text-table": {
      "version": "0.2.0",
      "resolved": "https://registry.npmmirror.com/text-table/-/text-table-0.2.0.tgz",
@@ -16274,6 +16304,14 @@
      "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==",
      "dev": true
    },
+    "utrie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "requires": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
    "uuid": {
      "version": "3.4.0",
      "resolved": "https://registry.npmmirror.com/uuid/-/uuid-3.4.0.tgz",
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
    "crypto-js": "^4.1.1",
    "echarts": "^4.2.1",
    "fastclick": "^1.0.6",
+    "html2canvas": "^1.4.1",
    "js-base64": "^2.5.1",
    "js-md5": "^0.7.3",
    "js-sha256": "^0.9.0",
--- a/src/assets/images/list_img.jpg
+++ b/src/assets/images/list_img.jpg
--- a/src/components/ebiz/billingDetail/tableDetail2.vue
+++ b/src/components/ebiz/billingDetail/tableDetail2.vue
@@ -9,14 +9,15 @@
            </tr>
          </thead>
          <tbody>
-          <tr v-for="(item, index) in tableData" :key="index" :ref="'th'+ index" @click="(e)=>double_click(index)"   >
+            <tr v-for="(item, index) in tableData" :key="index" :ref="'th' + index" @click="(e) => double_click(index, item)">
              <td class="th-fixed" @click="goLink(item)">{{ Number(index) + 1 }}</td>
-            <td>{{item.sign_date}}</td>
-            <td>{{item.appnt_date}}</td>
+              <td>{{ item.signDate }}</td>
+              <td>{{ item.appntDate }}</td>
              <td>{{ item.productName }}</td>
              <td>{{ item.prem }}</td>
              <td>{{ item.name }}</td>
-            <td>{{item.appntDate}}</td>
+              <td>{{ item.manageComName }}</td>
+              <td>{{ item.branchTypeName }}</td>
            </tr>
          </tbody>
        </table>
@@ -24,7 +25,7 @@
    </div>

    <div class="pagination" v-if="total > 5">
-      <div type="text" @click="pageUp"  :style="pageNum>1?'color:red':''">< 上一页</div>
+      <div type="text" @click="pageUp" :style="pageNum > 1 ? 'color:red' : ''">上一页</div>
      <div style="color: red">{{ pageNum }}/{{ Math.ceil(total / pageSize) }}</div>
      <div @click="pageDown" :style="pageNum < Math.ceil(total / pageSize) ? 'color:red' : ''">下一页 ></div>
    </div>
@@ -41,19 +42,19 @@ export default {
    },
    isLink: {
      type: Boolean,
-          default:false,
+      default: false
    },
    total: {
      type: Number,
-      default:false,
+      default: false
    },
    pageSize: {
      type: Number,
-      default:false,
+      default: false
    },
    pageNum: {
      type: Number,
-      default:false,
+      default: false
    },
    tableData: {
      type: Array,
@@ -61,25 +62,24 @@ export default {
    }
  },
  data() {
-    return {
-    }
-  },
-  created(){
+    return {}
  },
+  created() {},
  methods: {
-    double_click(index, fn) {
-      // console.log(this.$refs['th'+index]);
-      let timestamp = 0;
+    double_click(index, fn, data) {
+      console.log(this.tableData[index], 'data')
+      console.log(this.$refs['th' + index], 6)
+      let timestamp = 0
      this.$refs['th' + index][0].addEventListener('click', () => {
-        const now = +new Date();
+        const now = new Date()
        if (now - timestamp <= 300) {
-          this.$emit('double_click',  this.$refs['th'+index][0])
+          this.$emit('double_click', this.tableData[index])
          // fn();
-          timestamp = 0;
+          timestamp = 0
        } else {
-          timestamp = now;
+          timestamp = now
        }
-      });
+      })
    },
    pageUp() {
      if (this.pageNum <= 1) {
@@ -100,8 +100,8 @@ export default {
      if (this.isLink) {
        this.$emit('goLink', item)
      }
-      },
-  },
+    }
+  }
 }
 </script>

--- a/src/router/ebiz/billingDetail.js
+++ b/src/router/ebiz/billingDetail.js
@@ -1,5 +1,5 @@
 const billingDetail = () => import('@/views/ebiz/billingDetail/billingDetail')
-
+const generateImg = () => import('@/views/ebiz/generateImg/generateImg')

 export default [
  {
@@ -10,5 +10,13 @@ export default [
      title: '出单详情',
      index: 1
    }
+  },
+  {
+    path: '/generateImg',
+    name: 'generateImg',
+    component: generateImg,
+    meta: {
+      title: '业绩贺报'
+    }
  }
 ]
--- a/src/views/ebiz/billingDetail/billingDetail.vue
+++ b/src/views/ebiz/billingDetail/billingDetail.vue
@@ -225,7 +225,7 @@
 </template>

 <script>
-import { Icon, RadioGroup, Radio, DatetimePicker, DropdownMenu, DropdownItem } from 'vant'
+import { Icon, RadioGroup, Radio, DatetimePicker } from 'vant'
 import tableDetail2 from '@/components/ebiz/billingDetail/tableDetail2'
 import { getMisBranchComList2 } from '@/api/ebiz/branchOffice/branchOffice'
 import FieldDatePicter from '@/components/ebiz/FieldDatePicter'
@@ -242,8 +242,6 @@ export default {
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    [DatetimePicker.name]: DatetimePicker,
-    [DropdownMenu.name]: DropdownMenu,
-    [DropdownItem.name]: DropdownItem,

    FieldDatePicter
  },
@@ -295,7 +293,7 @@ export default {
      dateFlag: '',
      style02: 'style02', //style02 时，显示红字红三角的样式，不写的话展示默认样式
      currentIndex: 0, //0 当月 1当天
-      theads: ['序号', '承保时间', '预售时间', '产品（显示产品简称）', '保费（万元）', '业务员姓名', '机构'],
+      theads: ['序号', '承保时间', '预收时间', '产品名称', '保费（万元）', '业务员姓名', '机构', '渠道'],
      tableData: [],
      total: 0,
      maxDate: new Date(),
@@ -545,7 +543,7 @@ export default {
        startDate: this.startDate, // "2024-09-01",
        endDate: this.endDate, //"2024-09-30",
        dateFlag: this.dateFlag, //  -最近一月-m,最近一年y  ,全部-all
-        appntDate: this.postDate,
+        // appntDate: this.postDate,
        distCode: this.OrgLv2Code,
        depCode: this.OrgLv3Code,
        orgCode: this.OrgLv4Code,
@@ -571,8 +569,12 @@ export default {
      })
    },
    // 双击事件
-    double_click(el) {
-      console.log('元素' + el + '发生了点击')
+    double_click(data) {
+      console.log(JSON.parse(JSON.stringify(data)), '发生了点击')
+      this.$router.push({
+        path: '/generateImg'
+      })
+      localStorage.setItem('orderList', JSON.stringify(data))
    },

    currentChange(page) {
--- a/src/views/ebiz/generateImg/generateImg.vue
+++ b/src/views/ebiz/generateImg/generateImg.vue
@@ -0,0 +1,191 @@
+<template>
+  <div>
+    <div id="capture" ref="generateImg" style="height: 100vh; overflow: hidden">
+      <img src="@/assets/images/list_img.jpg" alt="" />
+      <div class="box">
+        <div class="title">
+          <p class="organ">{{ orderList.manageComName }}</p>
+          <p class="name">{{ orderList.name }}</p>
+        </div>
+        <div class="pName">{{ orderList.productName }}</div>
+        <div class="type">{{ orderList.outOrderType == 'accept' ? '承保规保' : '预收规保' }}</div>
+        <div class="yuan">{{ orderList.prem }}<span>元</span></div>
+        <div class="time">{{ orderList.outOrderType == 'accept' ? '承保时间：' : '预收时间：' }}{{ orderList.appntDate }}</div>
+      </div>
+    </div>
+    <div class="flex justify-content-s bottom-btn border-color">
+      <van-button square type="default" size="large" @click="shareImg" v-no-more-click="1000"> 分享 </van-button>
+      <van-button square type="danger" size="large" @click="downLoadImagesFunc" v-no-more-click="1000"> 下载 </van-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import html2canvas from 'html2canvas'
+export default {
+  name: 'generateImg',
+  data() {
+    return {
+      orderList: {}
+    }
+  },
+  mounted() {
+    this.getList()
+  },
+  methods: {
+    getList() {
+      this.orderList = JSON.parse(localStorage.getItem('orderList'))
+    },
+    // 将 Blob转base64
+    blobToBase64(blob) {
+      return new Promise((resolve, reject) => {
+        const reader = new FileReader()
+        reader.onloadend = () => resolve(reader.result)
+        reader.onerror = reject
+        reader.readAsDataURL(blob)
+      })
+    },
+    // 分享
+    shareImg() {
+      // const element = document.getElementById('capture')
+      // const canvas = await html2canvas(element)
+      html2canvas(this.$refs.generateImg, {
+        width: this.$refs.generateImg.offsetWidth,
+        height: this.$refs.generateImg.offsetHeight,
+        backgroundColor: '#fff',
+        scale: 2,
+        dpi: 300
+      }).then((canvas) => {
+        // 将 canvas 转换为 Blob
+        canvas.toBlob((blob) => {
+          this.blobToBase64(blob).then((base64String) => {
+            console.log(base64String, '==')
+            EWebBridge.webCallAppInJs('bridge', {
+              flag: 'share',
+              extra: {
+                shareType: '1',
+                img: base64String
+              }
+            })
+          })
+        }, 'image/png')
+      })
+    },
+    // 生成图片并下载
+    domToImage(domElement, quality, callback) {
+      html2canvas(domElement, {
+        width: domElement.offsetWidth,
+        height: domElement.offsetHeight,
+        backgroundColor: '#fff',
+        scale: 2,
+        dpi: 300
+      }).then((canvas) => {
+        // 转换canvas为PNG图片并压缩
+        canvas.toBlob(
+          function (blob) {
+            const a = document.createElement('a')
+            a.href = URL.createObjectURL(blob)
+            a.download = '业绩贺报.png'
+            a.click()
+            // let newimg = new Image()
+            // newimg.src = URL.createObjectURL(blob)
+            // newimg.onload = function () {
+            //   URL.revokeObjectURL(newimg.src)
+            //   callback(newimg)
+            // }
+          }
+          // 'image/png',
+          // quality
+        )
+      })
+    },
+    downLoadImagesFunc() {
+      this.domToImage(this.$refs.generateImg)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+img {
+  height: 100%;
+  width: 100%;
+  position: relative;
+}
+.box {
+  position: absolute;
+  width: 80%;
+  height: 40%;
+  top: 38%;
+  left: 10%;
+  .title {
+    position: absolute;
+    width: 100%;
+    // left: 30%;
+    top: 24%;
+    font-weight: bold;
+    p {
+      display: flex;
+      justify-content: center;
+    }
+    .organ {
+      font-size: 12px;
+      color: #b7170b;
+    }
+    .name {
+      font-size: 17px;
+      color: #b7170b;
+    }
+  }
+  .pName {
+    position: absolute;
+    top: 44%;
+    font-size: 15px;
+    color: #efbc4f;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+  }
+  .type {
+    font-size: 22px;
+    color: #efbc4f;
+    position: absolute;
+    top: 53%;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+  }
+  .yuan {
+    font-size: 30px;
+    color: #efbc4f;
+    position: absolute;
+    top: 67%;
+    width: 100%;
+    text-align: center;
+    display: inline-block;
+    vertical-align: bottom;
+    span {
+      font-size: 14px;
+      margin-left: 5px;
+    }
+  }
+  .time {
+    font-size: 14px;
+    color: #efbc4f;
+    position: absolute;
+    top: 85%;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+  }
+}
+.border-color {
+  z-index: 9999;
+  border: 2px solid;
+  border-image: radial-gradient(circle, rgba(255, 233, 124, 1), rgba(222, 144, 34, 1)) 2 2;
+}
+/deep/ .van-button--danger {
+  background: linear-gradient(to right, #f26e43, #ac0209) !important; /*设置按钮为渐变颜色*/
+  border: none !important;
+}
+</style>