Skip to content

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

生成海报

parent 74106942
Showing with 78 additions and 44 deletions
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;
}
}
}
......
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