动态获取qrcode

packages/qjkankan-editor/.env.testprod

@@ -7,5 +7,5 @@ VUE_APP_PROXY_URL_ROOT='https://test.4dkankan.com'
 VUE_APP_PROXY_URL='https://test.4dkankan.com/qjkankan/'
 VUE_APP_ORIGIN=
 VUE_APP_URL_FILL=/qjkankan
-VUE_APP_DEBBUG_FLAG=0807-01
+VUE_APP_DEBBUG_FLAG=1019-01
 VUE_APP_DEBBUG_NOTIFY=0

packages/qjkankan-editor/src/api/index.js

@@ -813,3 +813,10 @@ export function uploadAttachment(data, ok, no) {
 export function getNoticeApi(data, ok, no) {
   return http.getJson(`${URL_FILL}/manage/work/getServiceUpTip`, data, ok, no)
 }
+
+/**
+ * 动态获取QRcode
+ */
+export function getQrCode(data,ok, no) {
+  return http.postJson(`${URL_FILL}/manage/logo/gerQrCode`, data, ok, no)
+}

packages/qjkankan-editor/src/views/material/popup/share.vue

@@ -20,19 +20,30 @@
               disabled
               type="text"
               maxlength="15"
-              v-model="item.share"
+              :value="item.share + `&vr=${defaultscenesCode}&lang=${$lang}`"
             />
           </li>
           <li>
             <span>{{ work_qrCode }} </span>
-
-            <img :src="item.qrCode + `?${Math.random()}` || $thumb" alt="" />
+            <!-- :src="currentQRcode || 'assets/svg/loading.svg'" -->
+            <div
+              class="qrcode"
+              :style="{
+                backgroundImage: `url(${
+                  currentQRcode || require('@/assets/svg/loading.svg')
+                })`,
+              }"
+            />
           </li>
         </ul>
       </div>
 
       <div class="ui-message-footer footer-material">
-        <button @click="downloadImg(item)" class="ui-button">
+        <button
+          @click="downloadImg(item)"
+          class="ui-button"
+          :class="currentQRcode.length === 0 ? 'disable' : ''"
+        >
           {{ download_qrCode }}
         </button>
         <button
@@ -48,20 +59,9 @@
 
 <script>
 import Popup from "@/components/shared/popup";
+import { getQrCode } from "@/api";
 import { i18n } from "@/lang";
 
-let dataUrlToBold = function (url) {
-  let arr = url.split(","),
-    mime = arr[0].match(/:(.*?);/)[1],
-    bStr = atob(arr[1]),
-    n = bStr.length,
-    u8arr = new Uint8Array(n);
-  while (n--) {
-    u8arr[n] = bStr.charCodeAt(n);
-  }
-  return new Blob([u8arr], { type: mime });
-};
-
 export default {
   props: ["show", "item"],
   components: {
@@ -74,8 +74,8 @@ export default {
       share: i18n.t("material.works.share"),
       download_qrCode: i18n.t("material.works.download_qrCode"),
       copy_link: i18n.t("material.works.copy_link"),
-
       key: "",
+      currentQRcode: "",
     };
   },
   computed: {
@@ -89,37 +89,34 @@ export default {
       }
     },
   },
+  watch: {
+    item: {
+      handler: function (val) {
+        this.currentQRcode = "";
+        if (val.share) {
+          const shareLink =
+            val.share + `&vr=${this.defaultscenesCode}&lang=${this.$lang}`;
+          console.log("当前分享", shareLink);
+          const llogo = val.logo || "";
+          getQrCode({ logo: llogo, text: shareLink }).then((res) => {
+            if (res.code === 0) {
+              this.currentQRcode = res.data.img;
+            }
+          });
+        }
+      },
+    },
+  },
   mounted() {},
   methods: {
     downloadImg(workItem) {
-      let val = workItem.qrCode;
-      // var a = document.createElement("a");
-      // a.download = 'qrcode';
-      // a.href = 'https://4dkk.4dage.com/720yun_fd_manage/620/qrCode.jpg';
-      // a.target
-      // console.log(workItem,11222);
-      // val 为传入的图片地址
-      let _type_index = val.lastIndexOf(".");
-      let _type = val.substr(_type_index + 1); //原始图片类型
-      let image = new Image();
-      image.setAttribute("crossOrigin", "anonymous"); //消除跨域
-      image.src = val;
-      image.onload = function () {
-        //借助canvas实现 消除 图片地址会先直接窗口打开图片地址
-        let canvas = document.createElement("canvas");
-        canvas.width = image.width;
-        canvas.height = image.height;
-        let context = canvas.getContext("2d");
-        context.drawImage(image, 0, 0, image.width, image.height);
-        let url = canvas.toDataURL("image/" + _type);
-        let blob = dataUrlToBold(url);
-        let obj_url = URL.createObjectURL(blob); // 消除Chrome下文件太大 导致下载失败（网络失败）的问题
-        let a = document.createElement("a");
-        let event = new MouseEvent("click");
-        a.download = workItem.name || "qrcode";
-        a.href = obj_url;
-        a.dispatchEvent(event);
-      };
+      if (this.currentQRcode) {
+        var a = document.createElement("a"); //Create <a>
+        a.href = this.currentQRcode; //Image Base64 Goes here
+        const defaultTitle = this.$lang === "zh" ? "无标题" : "No title";
+        a.download = `${workItem.name || defaultTitle}.png`; //File name Here
+        a.click();
+      }
     },
     copy(text) {
       var textArea = document.createElement("textarea");
@@ -179,10 +176,13 @@ export default {
           text-align: right;
           margin-right: 16px;
         }
-        > img {
+        > .qrcode {
           width: 120px;
+          height: 120px;
           border: 1px solid #ebedf0;
           border-radius: 4px;
+          background-size: contain;
+          // background-image: url("~@/assets/svg/loading.svg");
         }
         .ui-input {
           width: 362px;

packages/qjkankan-view/src/hooks/useWxshared.js

@@ -1,11 +1,12 @@
 import wxshare from "@/utils/wxshare";
 import { onMounted } from "vue";
 
-const initWxShare = async () => {
+const initWxShare = async (lang) => {
   // onMounted(async () => {
   try {
     // await new Promise((r) => setTimeout(r, 1000));
-    const title = document.title;
+    const defaultTitle = (lang === 'zh' ? '无标题':'No title')
+    const title = document.title || defaultTitle;
     const link = window.location.href;
     // const desc = '测试微信分享'
     const imgUrl = document.querySelector('meta[name="cover"]').content || "";

packages/qjkankan-view/src/pages/showMobile.vue

@@ -249,7 +249,7 @@ onMounted(async () => {
           app.Tags.initHotspot(hotspots, false);
         });
       }
-      initWxShare();
+      initWxShare(lang);
       // debugger
       console.log("初始化微信分享");
       const { initDefaultAudio } = useAudio();