生成海报

src/api/live.js

@@ -57,4 +57,8 @@ export default {
   addLiveNoticeByCustomer(options) {
     return requestPOST(`${process.env.OLSHOP_URL}/broadcastReminderRecord/addLiveNoticeByCustomer`,options);
   },
+  // 获取小程序码
+  getLiveQRCode(options) {
+    return requestGET(`${process.env.OLSHOP_URL}/liveBroadcastInfo/getLiveQRCode?id=${options}`);
+  },
 };
\ No newline at end of file

src/components/livedModel/livedControls.vue

@@ -29,7 +29,7 @@
       @changeStatus="changeStatus"
     ></livedGoodsDia>
     <!-- 分享弹层 -->
-    <livedShareDia :showShareDia="showShareDia" @closeShareDia="closeShareDia" :info="info"></livedShareDia>
+    <livedShareDia v-if="loadingShare"  :showShareDia="showShareDia" @closeShareDia="closeShareDia" :info="info"></livedShareDia>
     <!-- 底部控制层 -->
     <div class="control flex">
       <template v-if="!isSend">
@@ -115,6 +115,7 @@ export default {
       getFocus: false, //获取焦点
       imgAni: false, //给点赞元素加动画
       getBottom:0,//动态绑定输入框位置
+      loadingShare:false,
     };
   },
   components: {
@@ -152,6 +153,16 @@ export default {
   onLoad(options) {
     let params = JSON.parse(options.params);
     this.liveId = params.liveId;
+    let _this=this;
+    wx.getStorage({
+        key: "sessionid",
+        success(res) {
+          _this.loadingShare=true;
+        },
+        fail(res) {
+          _this.loadingShare=false;
+        }
+      });
   },
   mounted() {},
   methods: {
@@ -215,6 +226,7 @@ export default {
       this.showDia = false;
     },
     showShare() {
+      this.loadingShare=true;
       this.showShareDia = true;
     },
     closeShareDia() {

src/components/livedModel/livedShareDia.vue

@@ -26,12 +26,18 @@
       </div>
       <div class="cancel" @click="closeDia">取消</div>
     </van-popup>
-    <livedposterDia :showPosterDia="showPosterDia" :posterInfo="posterInfo" @closePosterDia="closePosterDia"></livedposterDia>
+    <livedposterDia
+      v-if="againLoadingPoster"
+      :showPosterDia="showPosterDia"
+      :posterInfo="posterInfo"
+      @closePosterDia="closePosterDia"
+    ></livedposterDia>
   </div>
 </template>
 
 <script type="text/ecmascript-6">
 import livedposterDia from "@/components/livedModel/livedposterDia";
+import live from "@/api/live";
 import { DFSImg } from "@/utils/index";
 export default {
   props: ["showShareDia", "info"],
@@ -43,7 +49,8 @@ export default {
       shopLogo: "",
       backPath: "",
       showPosterDia: false,
-      posterInfo: {}
+      posterInfo: {},
+      againLoadingPoster: false // 是否开始加载海报
     };
   },
   components: {
@@ -58,29 +65,41 @@ export default {
     this.backPath = params.fromPagePath || "/";
     this.shopLogo = DFSImg(params.shopLogo, 40, 40);
     this.init();
+    console.log(this.info, "--------------------------67");
+  },
+  onUnload() {},
+  mounted() {},
+  methods: {
+    closePosterDia() {
+      this.showPosterDia = false;
+    },
+    // 初始化信息
+    init() {
+      // 获取小程序码
+      let id = Number(this.liveId);
+      live.getLiveQRCode(id).then(res => {
+        if (res.data.code == 200) {
           let query = {
             liveId: this.liveId,
             livedTitle: this.info.title,
             livedStatus: this.info.liveBroadcastState
           };
-    let cImg = DFSImg(this.info.coverUrl);
+          let cImg = DFSImg(this.info.posterCoverUrl);
           if (cImg.indexOf("https") == -1) {
-      query.coverUrl = cImg.replace("http", "https");
+            query.posterCoverUrl = cImg.replace("http", "https");
           }
           let newTime = new Date(this.info.startTime.replace(/-/g, "/"));
           query.livedTime = `${newTime.getMonth() + 1}月${newTime.getDate() -
             1}日  ${newTime.getHours()}:${newTime.getMinutes()}`;
-    console.log(this.info, "--------------96");
+          let qrCode = DFSImg(res.data.data);
+          if (qrCode.indexOf("https") == -1) {
+            query.qrCode = qrCode.replace("http", "https");
+          }
           this.posterInfo = query;
+          this.againLoadingPoster = true;
+        }
+      });
     },
-  onUnload() {},
-  mounted() {},
-  methods: {
-    closePosterDia(){
-      this.showPosterDia=false;
-    },
-    // 初始化信息
-    init() {},
     initShare() {},
     //   关闭
     closeDia() {
@@ -95,6 +114,7 @@ export default {
           _this.toCreatePoster();
         },
         fail(res) {
+          _this.$emit("closeShareDia");
           console.log("未登录------150");
           // 跳转登录页
           let backUrl = "/lived/main";

src/components/livedModel/livedposterDia.vue

@@ -7,8 +7,8 @@
       @close="closeDia"
     >
       <div class="posterWrap" @click="closeDia">
-        <canvas canvas-id="posterCanvas" class="myCanvas" @click="getImg"></canvas>
-        <div class="saveBtn" @click="closeDia">点击保存海报</div>
+        <canvas canvas-id="posterCanvas" class="myCanvas"></canvas>
+        <div class="saveBtn" @click="getImg">点击保存海报</div>
       </div>
     </van-popup>
   </div>
@@ -25,7 +25,7 @@ export default {
       params: {},
       // 海报中信息
       info: {
-        coverUrl: "",
+        posterCoverUrl: "",
         livedStatus: 1, //直播状态  0未开播 1一开播
         livedTime: "3月21日 20:20",
         livedTitle: "",
@@ -51,7 +51,9 @@ export default {
       this.$emit("closePosterDia");
     },
     init() {
-      let liveBroadcastId = this.liveId;
+      // wx.showLoading({
+      //   title: "生成中..."
+      // });
       let _this = this;
       wx.getUserInfo({
         //获取微信用户信息
@@ -64,48 +66,31 @@ export default {
           _this.initPoster(_this.info);
         }
       });
-      // live.getLiveInfo(liveBroadcastId).then(res => {
-      //   if (res.data.code == 200) {
-      //     let resData = res.data.data;
-      //     this.info.livedTitle = resData.title;
-      //     this.info.livedStatus = resData.liveBroadcastState;
-      //     let cImg = DFSImg(resData.coverUrl);
-      //     if (cImg.indexOf("https") == -1) {
-      //       this.info.coverUrl = cImg.replace("http", "https");
-      //     }
-      //     let newTime = new Date(resData.startTime.replace(/-/g, "/"));
-      //     this.info.livedTime = `${newTime.getMonth() +
-      //       1}月${newTime.getDate() -
-      //       1}日  ${newTime.getHours()}:${newTime.getMinutes()}`;
-      //   }
-      // });
     },
     initPoster(info) {
       console.log(info, "---------------------71");
       const InfoSync = wx.getSystemInfoSync();
       this.InfoSync = InfoSync;
       let bili = InfoSync.windowWidth / 375 * 1;
-      console.log(bili,'---------------------------------bili88');
       // let bili = 1;
       const ctx = wx.createCanvasContext("posterCanvas");
       ctx.setFillStyle("#fff");
       ctx.fillRect(0, 0, 310 * bili, 520 * bili);
 
       //封面
-      this.saveThe(info.coverUrl, path => {
-        console.log(path,'---------------------94')
+      this.saveThe(info.posterCoverUrl, path => {
         ctx.drawImage(path, 0, 0, 310 * bili, 370 * bili);
         ctx.save();
         // 微信昵称
         ctx.setTextAlign("left");
         ctx.setFillStyle("#3F2F00");
         ctx.setFontSize(15);
-        ctx.fillText(info.nickName, 80 * bili, 420 * bili);
+        ctx.fillText(info.nickName, 70 * bili, 410 * bili);
 
         ctx.setTextAlign("left");
         ctx.setFillStyle("#3F2F00");
         ctx.setFontSize(14);
-        ctx.fillText("邀你一起看直播", 10 * bili, 460 * bili);
+        ctx.fillText("邀你一起看直播", 10 * bili, 450 * bili);
         // 直播名
         ctx.setTextAlign("left");
         ctx.setFillStyle("#3F2F00");
@@ -113,15 +98,20 @@ export default {
         ctx.fillText(info.livedTitle, 10 * bili, 500 * bili);
         //圆形头像框
         ctx.setStrokeStyle("rgba(0,0,0,0)");
-        ctx.arc(40 * bili, 410 * bili, 30 * bili, 0, 2 * Math.PI);
+        ctx.arc(40 * bili, 400 * bili, 25 * bili, 0, 2 * Math.PI);
         ctx.fill();
+        this.saveThe(info.qrCode, path => {
+          ctx.drawImage(path, 200 * bili, 390 * bili, 100 * bili, 100 * bili);
+          ctx.save();
           //头像
           this.saveThe(info.avatarUrl, path => {
             ctx.clip();
-          ctx.drawImage(path, 10 * bili, 380 * bili, 70 * bili, 70 * bili);
+            ctx.drawImage(path, 10 * bili, 370 * bili, 54 * bili, 54 * bili);
             ctx.save();
             ctx.stroke();
             ctx.draw();
+            console.log("--------海报生成成功");
+          });
         });
       });
     },
@@ -130,7 +120,7 @@ export default {
       wx.getImageInfo({
         src: url, //服务器返回的图片地址
         success: res => {
-          console.log(res.path,'--------------------131')
+          console.log(res.path, "--------------------131");
           callback(res.path);
         },
         fail: function(res) {}
@@ -279,9 +269,16 @@ export default {
       margin: 0 auto;
       background: #fff;
     }
-    .saveBtn{
-      background: #F82F31;
-      
+    .saveBtn {
+      margin: 0 auto;
+      margin-top: 20px;
+      background: #f82f31;
+      width: 50vw;
+      height: 40px;
+      border-radius: 40px;
+      text-align: center;
+      line-height: 40px;
+      color: #fff;
     }
   }
 }