完成1.3

.env.development

@@ -1,5 +1,5 @@
 # 接口地址http://8.136.199.33:8610/v1   https://rddptest.hzinsights.com/adminapi
-VITE_APP_API_URL="https://rddptest.hzinsights.com/adminapi"
+VITE_APP_API_URL="http://8.136.199.33:8610/v1"
 # 路由根地址
 VITE_APP_BASE_URL="/"
 # 打包输入文件名

package.json

@@ -10,12 +10,15 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@vant/touch-emulator": "^1.4.0",
     "@vueuse/components": "^9.13.0",
     "@vueuse/core": "^9.13.0",
     "ali-oss": "^6.17.1",
     "axios": "^1.3.4",
+    "file-saver": "^2.0.5",
     "highcharts": "^9.3.2",
     "himalaya": "^1.1.0",
+    "html-to-image": "^1.11.11",
     "js-base64": "^3.7.5",
     "js-md5": "^0.7.3",
     "lodash": "^4.17.21",

src/api/common.js

@@ -22,4 +22,13 @@ export function apiReportingErrInfo(params){
  */
 export function apiGetOSSSign(){
     return get('/resource/oss/get_sts_token',{})
+}
+
+/**
+ * 获取报告微信小程序太阳码
+ * @param CodeScene 页面所需参数
+ * @param CodePage eg:pages-report/chapterDetail 小程序中的页面路径
+ */
+export function apiGetWXQRCodeImg(params){
+    return post('/report/getSunCode',params)
 }

src/api/report.js

@@ -116,5 +116,4 @@ export default {
     publishDayOrWeekReport:params=>{
         return post('/report/publishDayWeekReport',params)
     }
-
 }

src/directives/Index.js

@@ -0,0 +1,6 @@
+// 注册自定义指令
+import ScreenshotDirective from './Screenshot'
+
+export function RegisterDirective(app){
+    app.directive('screenshot', ScreenshotDirective);
+}

src/directives/Screenshot.js

@@ -0,0 +1,43 @@
+// 将页面dom生成图片并保存在本地
+import * as htmlToImage from 'html-to-image';
+import FileSaver from 'file-saver';
+
+export default {
+  mounted(el, binding) {
+    const options = binding.value;
+    let pressTimer = null;
+
+    const cancelTimer = () => {
+      if (pressTimer !== null) {
+        clearTimeout(pressTimer);
+        pressTimer = null;
+      }
+    };
+
+    el.addEventListener('mousedown', () => {
+      pressTimer = setTimeout(() => {
+        const targetEl = document.querySelector(options.target);
+        if (targetEl) {
+          htmlToImage.toBlob(targetEl, options).then(function (blob) {
+            FileSaver.saveAs(blob, options.filename);
+          });
+        }
+      }, 1000);
+    });
+
+    el.addEventListener('touchstart', () => {
+      pressTimer = setTimeout(() => {
+        const targetEl = document.querySelector(options.target);
+        if (targetEl) {
+          htmlToImage.toBlob(targetEl, options).then(function (blob) {
+            FileSaver.saveAs(blob, options.filename);
+          });
+        }
+      }, 1000);
+    });
+
+    el.addEventListener('mouseup', cancelTimer);
+    el.addEventListener('touchend', cancelTimer);
+  }
+};
+

src/main.js

@@ -5,6 +5,8 @@ import {registerVant} from './plugin/vant'
 import 'normalize.css'
 import './assets/styles/common.scss'
 import reportErr from '@/utils/reportErr'
+import '@vant/touch-emulator';
+import {RegisterDirective} from '@/directives/Index.js'
 
 
 const app= createApp(App)
@@ -12,5 +14,6 @@ const app= createApp(App)
 reportErr(app)//设置全局错误上报
 
 registerVant(app)
+RegisterDirective(app)
 app.use(router)
 app.mount('#app')

src/views/report/chapter/List.vue

@@ -2,6 +2,7 @@
 import {reactive, ref} from 'vue'
 import { useRoute, useRouter } from "vue-router";
 import apiReport from '@/api/report'
+import {apiGetWXQRCodeImg} from '@/api/common'
 import moment from 'moment';
 import { showToast,showDialog } from 'vant';
 import { useWindowSize } from '@vueuse/core'
@@ -210,6 +211,23 @@ function handlePublishCancel(){
     })
 }
 
+// 显示海报
+const showChapterItemPoster=ref(false)
+const chapterItemPosterInfo=ref(null)
+async function handleShowPoster(item){
+    if(!item.QRCodeImg){//获取二维码
+        const res=await apiGetWXQRCodeImg({
+            CodeScene:JSON.stringify({chapterId:item.ReportChapterId.toString()}),
+            CodePage:'pages-report/chapterDetail'
+        })
+        if(res.Ret===200){
+            item.QRCodeImg=res.Data
+        }
+    }
+    chapterItemPosterInfo.value=item
+    showChapterItemPoster.value=true
+}
+
 </script>
 
 <template>
@@ -271,7 +289,7 @@ function handlePublishCancel(){
 
                         <div :class="['status',item.PublishState!=1&&'status-success']">{{item.PublishState==1?'未发布':'已发布'}}</div>
                         <img @click.stop="handleShowTrendTag(item)" class="icon icon-tag" src="@/assets/imgs/report/icon_tag.png" alt="">
-                        <img v-if="item.PublishState==2" @click.stop="handleShowTrendTag(item)" class="icon icon-wx" src="@/assets/imgs/report/icon_wx.png" alt="">
+                        <img v-if="item.PublishState==2" @click.stop="handleShowPoster(item)" class="icon icon-wx" src="@/assets/imgs/report/icon_wx.png" alt="">
                     </div>
                 </li>
             </ul>
@@ -309,6 +327,19 @@ function handlePublishCancel(){
             @cancel="showDate=false"
         />
     </van-popup>
+
+    <!-- 海报 -->
+    <van-popup 
+        v-model:show="showChapterItemPoster" 
+        round
+    >
+        <div class="chapter-poster-box" v-screenshot="{target: '.chapter-poster-box', filename: 'my-screenshot.png'}">
+            <img class="bg" :src="chapterItemPosterInfo.TypeEditImg" alt="">
+            <h2 class="title">【第{{reportInfo.Stage}}期|{{reportInfo.ClassifyNameFirst}}|{{chapterItemPosterInfo.TypeName}}】{{chapterItemPosterInfo.Title}}</h2>
+            <img class="code-img" :src="chapterItemPosterInfo.QRCodeImg" alt="">
+            <p class="tips">长按保存图片，发送给好友</p>
+        </div>
+    </van-popup>
 </template>
 
 <style lang="scss" scoped>
@@ -448,6 +479,30 @@ function handlePublishCancel(){
     }
 }
 
+.chapter-poster-box{
+    width: 300PX;
+    border-radius: 6PX;
+    padding: 10PX;
+    .bg{
+        width: 280PX;
+        height: 280PX;
+        display: block;
+    }
+    .title{
+        font-size: 16PX;
+    }
+    .code-img{
+        width: 140PX;
+        height: 140PX;
+        display: block;
+    }
+    .tips{
+        color: $font-grey;
+        font-size: 14PX;
+        margin-top: 5PX;
+    }
+}
+
 @media screen and (min-width:$media-width){
     .top-form-wrap{
         padding: 16px 30px;