Skip to content

M
mayi-mp-shop
Commit a5de42a2 by 李嘉林
Options

生成海报

parent 74106942
Showing with 89 additions and 55 deletions
src/api/live.js
...@@ -57,4 +57,8 @@ export default { ...@@ -57,4 +57,8 @@ export default {
addLiveNoticeByCustomer(options) { addLiveNoticeByCustomer(options) {
return requestPOST(`${process.env.OLSHOP_URL}/broadcastReminderRecord/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 @@ ...@@ -29,7 +29,7 @@
@changeStatus="changeStatus" @changeStatus="changeStatus"
></livedGoodsDia> ></livedGoodsDia>
<!-- 分享弹层 --> <!-- 分享弹层 -->
<livedShareDia :showShareDia="showShareDia" @closeShareDia="closeShareDia" :info="info"></livedShareDia> <livedShareDia v-if="loadingShare" :showShareDia="showShareDia" @closeShareDia="closeShareDia" :info="info"></livedShareDia>
<!-- 底部控制层 --> <!-- 底部控制层 -->
<div class="control flex"> <div class="control flex">
<template v-if="!isSend"> <template v-if="!isSend">
...@@ -115,6 +115,7 @@ export default { ...@@ -115,6 +115,7 @@ export default {
getFocus: false, //获取焦点 getFocus: false, //获取焦点
imgAni: false, //给点赞元素加动画 imgAni: false, //给点赞元素加动画
getBottom:0,//动态绑定输入框位置 getBottom:0,//动态绑定输入框位置
loadingShare:false,
}; };
}, },
components: { components: {
...@@ -152,6 +153,16 @@ export default { ...@@ -152,6 +153,16 @@ export default {
onLoad(options) { onLoad(options) {
let params = JSON.parse(options.params); let params = JSON.parse(options.params);
this.liveId = params.liveId; this.liveId = params.liveId;
let _this=this;
wx.getStorage({
key: "sessionid",
success(res) {
_this.loadingShare=true;
},
fail(res) {
_this.loadingShare=false;
}
});
}, },
mounted() {}, mounted() {},
methods: { methods: {
...@@ -215,6 +226,7 @@ export default { ...@@ -215,6 +226,7 @@ export default {
this.showDia = false; this.showDia = false;
}, },
showShare() { showShare() {
this.loadingShare=true;
this.showShareDia = true; this.showShareDia = true;
}, },
closeShareDia() { closeShareDia() {
......
src/components/livedModel/livedShareDia.vue
...@@ -26,12 +26,18 @@ ...@@ -26,12 +26,18 @@
</div> </div>
<div class="cancel" @click="closeDia">取消</div> <div class="cancel" @click="closeDia">取消</div>
</van-popup> </van-popup>
<livedposterDia :showPosterDia="showPosterDia" :posterInfo="posterInfo" @closePosterDia="closePosterDia"></livedposterDia> <livedposterDia
v-if="againLoadingPoster"
:showPosterDia="showPosterDia"
:posterInfo="posterInfo"
@closePosterDia="closePosterDia"
></livedposterDia>
</div> </div>
</template> </template>
<script type="text/ecmascript-6"> <script type="text/ecmascript-6">
import livedposterDia from "@/components/livedModel/livedposterDia"; import livedposterDia from "@/components/livedModel/livedposterDia";
import live from "@/api/live";
import { DFSImg } from "@/utils/index"; import { DFSImg } from "@/utils/index";
export default { export default {
props: ["showShareDia", "info"], props: ["showShareDia", "info"],
...@@ -43,7 +49,8 @@ export default { ...@@ -43,7 +49,8 @@ export default {
shopLogo: "", shopLogo: "",
backPath: "", backPath: "",
showPosterDia: false, showPosterDia: false,
posterInfo: {} posterInfo: {},
againLoadingPoster: false // 是否开始加载海报
}; };
}, },
components: { components: {
...@@ -58,29 +65,41 @@ export default { ...@@ -58,29 +65,41 @@ export default {
this.backPath = params.fromPagePath || "/"; this.backPath = params.fromPagePath || "/";
this.shopLogo = DFSImg(params.shopLogo, 40, 40); this.shopLogo = DFSImg(params.shopLogo, 40, 40);
this.init(); this.init();
let query = { console.log(this.info, "--------------------------67");
liveId: this.liveId,
livedTitle: this.info.title,
livedStatus: this.info.liveBroadcastState
};
let cImg = DFSImg(this.info.coverUrl);
if (cImg.indexOf("https") == -1) {
query.coverUrl = 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");
this.posterInfo = query;
}, },
onUnload() {}, onUnload() {},
mounted() {}, mounted() {},
methods: { methods: {
closePosterDia(){ closePosterDia() {
this.showPosterDia=false; this.showPosterDia = false;
}, },
// 初始化信息 // 初始化信息
init() {}, 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.posterCoverUrl);
if (cImg.indexOf("https") == -1) {
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()}`;
let qrCode = DFSImg(res.data.data);
if (qrCode.indexOf("https") == -1) {
query.qrCode = qrCode.replace("http", "https");
}
this.posterInfo = query;
this.againLoadingPoster = true;
}
});
},
initShare() {}, initShare() {},
// 关闭 // 关闭
closeDia() { closeDia() {
...@@ -95,6 +114,7 @@ export default { ...@@ -95,6 +114,7 @@ export default {
_this.toCreatePoster(); _this.toCreatePoster();
}, },
fail(res) { fail(res) {
_this.$emit("closeShareDia");
console.log("未登录------150"); console.log("未登录------150");
// 跳转登录页 // 跳转登录页
let backUrl = "/lived/main"; let backUrl = "/lived/main";
......
src/components/livedModel/livedposterDia.vue
...@@ -7,8 +7,8 @@ ...@@ -7,8 +7,8 @@
@close="closeDia" @close="closeDia"
> >
<div class="posterWrap" @click="closeDia"> <div class="posterWrap" @click="closeDia">
<canvas canvas-id="posterCanvas" class="myCanvas" @click="getImg"></canvas> <canvas canvas-id="posterCanvas" class="myCanvas"></canvas>
<div class="saveBtn" @click="closeDia">点击保存海报</div> <div class="saveBtn" @click="getImg">点击保存海报</div>
</div> </div>
</van-popup> </van-popup>
</div> </div>
...@@ -25,7 +25,7 @@ export default { ...@@ -25,7 +25,7 @@ export default {
params: {}, params: {},
// 海报中信息 // 海报中信息
info: { info: {
coverUrl: "", posterCoverUrl: "",
livedStatus: 1, //直播状态 0未开播 1一开播 livedStatus: 1, //直播状态 0未开播 1一开播
livedTime: "3月21日 20:20", livedTime: "3月21日 20:20",
livedTitle: "", livedTitle: "",
...@@ -51,7 +51,9 @@ export default { ...@@ -51,7 +51,9 @@ export default {
this.$emit("closePosterDia"); this.$emit("closePosterDia");
}, },
init() { init() {
let liveBroadcastId = this.liveId; // wx.showLoading({
// title: "生成中..."
// });
let _this = this; let _this = this;
wx.getUserInfo({ wx.getUserInfo({
//获取微信用户信息 //获取微信用户信息
...@@ -64,48 +66,31 @@ export default { ...@@ -64,48 +66,31 @@ export default {
_this.initPoster(_this.info); _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) { initPoster(info) {
console.log(info, "---------------------71"); console.log(info, "---------------------71");
const InfoSync = wx.getSystemInfoSync(); const InfoSync = wx.getSystemInfoSync();
this.InfoSync = InfoSync; this.InfoSync = InfoSync;
let bili = InfoSync.windowWidth / 375 * 1; let bili = InfoSync.windowWidth / 375 * 1;
console.log(bili,'---------------------------------bili88');
// let bili = 1; // let bili = 1;
const ctx = wx.createCanvasContext("posterCanvas"); const ctx = wx.createCanvasContext("posterCanvas");
ctx.setFillStyle("#fff"); ctx.setFillStyle("#fff");
ctx.fillRect(0, 0, 310 * bili, 520 * bili); ctx.fillRect(0, 0, 310 * bili, 520 * bili);
//封面 //封面
this.saveThe(info.coverUrl, path => { this.saveThe(info.posterCoverUrl, path => {
console.log(path,'---------------------94')
ctx.drawImage(path, 0, 0, 310 * bili, 370 * bili); ctx.drawImage(path, 0, 0, 310 * bili, 370 * bili);
ctx.save(); ctx.save();
// 微信昵称 // 微信昵称
ctx.setTextAlign("left"); ctx.setTextAlign("left");
ctx.setFillStyle("#3F2F00"); ctx.setFillStyle("#3F2F00");
ctx.setFontSize(15); ctx.setFontSize(15);
ctx.fillText(info.nickName, 80 * bili, 420 * bili); ctx.fillText(info.nickName, 70 * bili, 410 * bili);
ctx.setTextAlign("left"); ctx.setTextAlign("left");
ctx.setFillStyle("#3F2F00"); ctx.setFillStyle("#3F2F00");
ctx.setFontSize(14); ctx.setFontSize(14);
ctx.fillText("邀你一起看直播", 10 * bili, 460 * bili); ctx.fillText("邀你一起看直播", 10 * bili, 450 * bili);
// 直播名 // 直播名
ctx.setTextAlign("left"); ctx.setTextAlign("left");
ctx.setFillStyle("#3F2F00"); ctx.setFillStyle("#3F2F00");
...@@ -113,15 +98,20 @@ export default { ...@@ -113,15 +98,20 @@ export default {
ctx.fillText(info.livedTitle, 10 * bili, 500 * bili); ctx.fillText(info.livedTitle, 10 * bili, 500 * bili);
//圆形头像框 //圆形头像框
ctx.setStrokeStyle("rgba(0,0,0,0)"); 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(); ctx.fill();
//头像 this.saveThe(info.qrCode, path => {
this.saveThe(info.avatarUrl, path => { ctx.drawImage(path, 200 * bili, 390 * bili, 100 * bili, 100 * bili);
ctx.clip();
ctx.drawImage(path, 10 * bili, 380 * bili, 70 * bili, 70 * bili);
ctx.save(); ctx.save();
ctx.stroke(); //头像
ctx.draw(); this.saveThe(info.avatarUrl, path => {
ctx.clip();
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 { ...@@ -130,7 +120,7 @@ export default {
wx.getImageInfo({ wx.getImageInfo({
src: url, //服务器返回的图片地址 src: url, //服务器返回的图片地址
success: res => { success: res => {
console.log(res.path,'--------------------131') console.log(res.path, "--------------------131");
callback(res.path); callback(res.path);
}, },
fail: function(res) {} fail: function(res) {}
...@@ -279,9 +269,16 @@ export default { ...@@ -279,9 +269,16 @@ export default {
margin: 0 auto; margin: 0 auto;
background: #fff; background: #fff;
} }
.saveBtn{ .saveBtn {
background: #F82F31; margin: 0 auto;
margin-top: 20px;
background: #f82f31;
width: 50vw;
height: 40px;
border-radius: 40px;
text-align: center;
line-height: 40px;
color: #fff;
} }
} }
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment