星星系统

config/dev.env.js

@@ -4,7 +4,7 @@ const prodEnv = require('./prod.env');
 
 module.exports = merge(prodEnv, {
   NODE_ENV: '"development"',
-  API_URL: '"/"',
+  API_URL: '"http://192.168.31.242:8085/"',
   MAX_FILESIZE:'1024*1024*10',
   IMAGE_URL_HEAD:'"http://cdn.changchangenglish.com/"',
   BUY_URL:'"http://wechat.test.changchangenglish.com/#/buyDetail?"',

config/prod.env.js

@@ -2,7 +2,7 @@
 module.exports = {
   NODE_ENV: '"production"',
   IMAGE_URL_HEAD:'"https://cdn.singsingenglish.com/"',
-  API_URL: '"/"',
+  API_URL: '"https://wechat.changchangenglish.com/"',
   MAX_FILESIZE:'1024*1024*10',
   BUY_URL:'"https://wechat.changchangenglish.com/#/buyDetail?"',
   AUTHOR_UEL:'"https://wechat.changchangenglish.com/api/client/login?redirect_url=https://wechat.changchangenglish.com"'

config/test.env.js

@@ -2,7 +2,7 @@
 module.exports = {
   NODE_ENV: '"testing"',
   IMAGE_URL_HEAD:'"http://cdn.singsingenglish.com/"',
-  API_URL: '"/"',
+  API_URL: '"https://wechat-test.changchangenglish.com/"',
   MAX_FILESIZE:'1024*1024*10',
   BUY_URL:'"https://wechat-test.changchangenglish.com/#/buyDetail?"',
   AUTHOR_UEL:'"https://wechat-test.changchangenglish.com/api/client/login?redirect_url=https://wechat-test.changchangenglish.com"'

src/components/newLesson/share.vue

@@ -5,7 +5,8 @@
       </div>
       <div class="bg-desc">
       </div>
-      <div class="content" v-if="userDetail" :style="{backgroundImage:`url('${shareConBg}')`}">
+      <img :src="dataURL" class="cvs-img" id="cvs-img"/>
+      <div class="content" v-if="userDetail" :style="{backgroundImage:`url('${shareConBg}')`}"  ref="imageWrapper" id="capture">
         <div class="main-content">
           <div class="head-block">
             <img :src="userDetail.avatar"/>
@@ -29,6 +30,7 @@
         </div>
         <div class="main-content-desc">
           <img :src="share_code_bg">
+          <div id="qrcode" class="qrcode"></div>
         </div>
       </div>
       <div class="share-btn">
@@ -43,7 +45,9 @@
   import shareConBg from '../../assets/newLesson/shareConBg.png'
   import shareTitle from '../../assets/newLesson/shareTitle.png'
   import shareBtn from '../../assets/newLesson/share_button.png'
-  import {getUserDetailApi,getUserWatchApi} from "../../service/api";
+  import  QRCode from 'qrcodejs2'
+  import html2canvas from 'html2canvas'
+  import {getUserDetailApi,getUserWatchApi,getShortApi} from "../../service/api";
   import share_code_bg from '../../assets/newLesson/share-code-bg.png'
 
   export default {
@@ -55,6 +59,7 @@
         shareTitle:shareTitle,
         shareBtn:shareBtn,
         userDetail:null,
+        dataURL:null,
         watchDetail:null,
         share_code_bg:share_code_bg
       }
@@ -65,17 +70,90 @@
     methods:{
       initPage(){
         getUserDetailApi().then(res=>{
-          res.avatar = res.avatar.replace('http://','https://');
           this.userDetail = res;
-          getUserWatchApi().then(res=>{
-            this.watchDetail = res
+          this.toDataURLBase64(res.avatar.replace('http://','https://'),  (avatar) =>{
+            this.userDetail.avatar = avatar;
+            getUserWatchApi().then(res=>{
+              this.watchDetail = res;
+              this.refshow()
+            })
+          });
+        })
+      },
+      toDataURLBase64 (src, callback) {
+        let xhttp = new XMLHttpRequest();
+        xhttp.onload = function () {
+          let fileReader = new FileReader();
+          fileReader.onloadend = function () {
+            callback(fileReader.result)
+          };
+          fileReader.readAsDataURL(xhttp.response)
+        };
+        xhttp.responseType = 'blob';
+        xhttp.open('GET', src, true);
+        xhttp.send()
+      },
+      refshow(){
+        let URL = process.env.API_URL+'#/shareGoods?userID='+ this.userDetail.user_id;
+        getShortApi({url:URL}).then(res=>{
+          this.qrcode(res.url);
+          this.$nextTick(()=>{
+            let {
+              width,
+            } = document.getElementById('capture').getClientRects()[0];
+            document.getElementById('capture').style.width = width + 'px';
+            let {
+              height1,
+              width1
+            } = document.getElementById('capture').getClientRects()[0];
+            html2canvas(document.getElementById('capture'),{
+              async: true,
+              timeout: 500,
+              scrollX:1,
+              scale: 3,
+              width: width1,
+              height: height1,
+              letterRendering: true,
+            }).then((canvas) => {
+              let dataURL = canvas.toDataURL("image/jpg");
+              this.dataURL = dataURL;
+            }).catch(res=>{alert(res);console.log()});
           })
         })
-      }
+
+      },
+      getOffsetRect(ele){
+        var box=ele.getBoundingClientRect();
+        var body=document.body,
+          docElem=document.documentElement;
+        //获取页面的scrollTop,scrollLeft(兼容性写法)
+        var scrollTop=window.pageYOffset||docElem.scrollTop||body.scrollTop,
+          scrollLeft=window.pageXOffset||docElem.scrollLeft||body.scrollLeft;
+        var clientTop=docElem.clientTop||body.clientTop,
+          clientLeft=docElem.clientLeft||body.clientLeft;
+        var top=box.top+scrollTop-clientTop,
+          left=box.left+scrollLeft-clientLeft;
+        return {
+          //Math.round 兼容火狐浏览器bug
+          top:Math.round(top),
+          left:Math.round(left)
+        }
+      },
+      qrcode(data){
+        if(this.QRCodeB){
+          this.QRCodeB.makeCode(data)
+        }else{
+          this.QRCodeB = new QRCode('qrcode', {
+            width: 70,
+            height: 70, // 高度
+            text: data, // 二维码内容
+            image: ''
+          });
+        }
+      },
     }
   }
 </script>
-
 <style scoped lang="less">
   @import "../../util/public";
   .share-page{
@@ -113,6 +191,13 @@
         z-index: -1;
         border-radius: 0 0 8*@toVw 8*@toVw;
       }
+      #cvs-img{
+        position: absolute;
+        width: 291*@toVw;
+        top: 21*@toVw;
+        left: 23*@toVw;
+        z-index: 1;
+      }
       .content{
         width: 291*@toVw;
         height: (422-53)*@toVw;
@@ -211,9 +296,15 @@
         background: white;
         border-radius: 8*@toVw;
         margin-top: 10*@toVw;
+        position: relative;
         img{
           width: 100%;
         }
+        .qrcode{
+          position: absolute;
+          top: 5*@toVw;
+          right: 5*@toVw;
+        }
       }
     }
   }

src/service/api.js

@@ -188,3 +188,9 @@ export const getShareGoodsApi = function () {
   return Vue.prototype.$fetch(getShareGoodsUrl)
 };
 
+// 获取短网址
+const getShortUrl = `/api/public/short/url`;
+export const getShortApi = function (json) {
+  return Vue.prototype.$fetch(getShortUrl,json)
+};
+