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

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",

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",

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.signDate }}</td>
-            <td>{{item.appnt_date}}</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 {
+    return {}
-    }
-  },
-  created(){
   },
+  created() {},
   methods: {
-    double_click(index, fn) {
+    double_click(index, fn, data) {
-      // console.log(this.$refs['th'+index]);
+      console.log(this.tableData[index], 'data')
-      let timestamp = 0;
+      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>
 

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: '业绩贺报'
+    }
   }
 ]

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) {
+    double_click(data) {
-      console.log('元素' + el + '发生了点击')
+      console.log(JSON.parse(JSON.stringify(data)), '发生了点击')
+      this.$router.push({
+        path: '/generateImg'
+      })
+      localStorage.setItem('orderList', JSON.stringify(data))
     },
 
     currentChange(page) {

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>