Skip to content

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

修改

parent 14dc6e00
Showing with 350 additions and 27 deletions
src/components/livedModel/livedShareDia.vue
......@@ -26,23 +26,29 @@
</div>
<div class="cancel" @click="closeDia">取消</div>
</van-popup>
<livedposterDia :showPosterDia="showPosterDia" :posterInfo="posterInfo" @closePosterDia="closePosterDia"></livedposterDia>
</div>
</template>
<script type="text/ecmascript-6">
import livedposterDia from "@/components/livedModel/livedposterDia";
import { DFSImg } from "@/utils/index";
export default {
props: ["showShareDia"],
props: ["showShareDia", "info"],
name: "",
data() {
return {
liveId: "",
shopName: "",
shopLogo: "",
backPath: ""
backPath: "",
showPosterDia: false,
posterInfo: {}
};
},
components: {},
components: {
livedposterDia
},
computed: {},
created() {},
onLoad(options) {
......@@ -52,10 +58,27 @@ export default {
this.backPath = params.fromPagePath || "/";
this.shopLogo = DFSImg(params.shopLogo, 40, 40);
this.init();
let query = {
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() {},
mounted() {},
methods: {
closePosterDia(){
this.showPosterDia=false;
},
// 初始化信息
init() {},
initShare() {},
......@@ -90,13 +113,25 @@ export default {
},
// 去海报页面
toCreatePoster() {
let query = {
liveId: this.liveId
};
let url = `/pages/livedPoster/main?params=${JSON.stringify(query)}`;
wx.navigateTo({
url: url
});
// let query = {
// 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;
this.showPosterDia = true;
// let url = `/pages/livedPoster/main?params=${JSON.stringify(query)}`;
// wx.navigateTo({
// url: url
// });
}
}
};
......@@ -128,7 +163,7 @@ img {
}
.tit {
font-size: 16px;
color: #000;;
color: #000;
}
}
.wxShare {
......
src/components/livedModel/livedposterDia.vue 0 → 100644
<template>
<div class="livedposterDia">
<van-popup
:show="showPosterDia"
custom-style="width:100vw;height:100vh;background:transparent;"
:close-on-click-overlay="true"
@close="closeDia"
>
<div class="posterWrap" @click="closeDia">
<canvas canvas-id="posterCanvas" class="myCanvas" @click="getImg"></canvas>
<div class="saveBtn" @click="closeDia">点击保存海报</div>
</div>
</van-popup>
</div>
</template>
<script type="text/ecmascript-6">
export default {
props: ["showPosterDia", "posterInfo"],
name: "",
data() {
return {
InfoSync: {},
liveId: 0,
params: {},
// 海报中信息
info: {
coverUrl: "",
livedStatus: 1, //直播状态 0未开播 1一开播
livedTime: "3月21日 20:20",
livedTitle: "",
nickName: "",
avatarUrl: "",
miniCode: ""
}
};
},
components: {},
computed: {},
onLoad(options) {
this.params = JSON.parse(options.params);
this.liveId = this.params.liveId;
Object.assign(this.info, this.info, this.posterInfo);
console.log(this.info, "--------------------35");
this.init();
},
created() {},
mounted() {},
methods: {
closeDia() {
this.$emit("closePosterDia");
},
init() {
let liveBroadcastId = this.liveId;
let _this = this;
wx.getUserInfo({
//获取微信用户信息
success: function(res) {
(_this.info.nickName = res.userInfo.nickName),
(_this.info.avatarUrl = res.userInfo.avatarUrl),
_this.initPoster(_this.info);
},
fail: function(res) {
_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;
const ctx = wx.createCanvasContext("posterCanvas");
ctx.setFillStyle("#fff");
ctx.fillRect(0, 0, 310 * bili, 520 * bili);
//封面
this.saveThe(info.coverUrl, 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.setTextAlign("left");
ctx.setFillStyle("#3F2F00");
ctx.setFontSize(14);
ctx.fillText("邀你一起看直播", 10 * bili, 460 * bili);
// 直播名
ctx.setTextAlign("left");
ctx.setFillStyle("#3F2F00");
ctx.setFontSize(18);
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.fill();
//头像
this.saveThe(info.avatarUrl, path => {
ctx.clip();
ctx.drawImage(path, 10 * bili, 380 * bili, 70 * bili, 70 * bili);
ctx.save();
ctx.stroke();
ctx.draw();
});
});
},
// 小程序需要将图片下载下来，然后才能绘制到画布上
saveThe(url, callback) {
wx.getImageInfo({
src: url, //服务器返回的图片地址
success: res => {
callback(res.path);
},
fail: function(res) {}
});
},
getImg() {
this.handleSave();
},
// 点击保存时，将画布生成海报
handleSave() {
var that = this;
wx.showLoading({
title: "正在保存...",
mask: true
});
wx.getSetting({
success(res) {
if (res.authSetting["scope.writePhotosAlbum"]) {
that.saveImg();
} else if (res.authSetting["scope.writePhotosAlbum"] === undefined) {
wx.authorize({
scope: "scope.writePhotosAlbum",
success() {
that.saveImg();
},
fail() {
wx.hideLoading();
wx.showToast({
title: "您没有授权，无法保存到相册",
icon: "none"
});
}
});
} else {
wx.openSetting({
success(res) {
if (res.authSetting["scope.writePhotosAlbum"]) {
that.saveImg();
} else {
wx.showToast({
title: "您没有授权，无法保存到相册",
icon: "none"
});
}
}
});
}
},
fail: err => {
wx.hideLoading();
wx.showToast({
title: "出现了错误，请稍后再试",
icon: "none"
});
}
});
},
saveImg() {
// 按照设备比例去计算图片和画布尺寸
let bili = this.InfoSync.windowWidth / 375 * 1;
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: 310 * bili,
height: 520 * bili,
destWidth: 310 * bili * this.InfoSync.pixelRatio,
destHeight: 520 * bili * this.InfoSync.pixelRatio,
fileType: "png",
quality: 1,
canvasId: "posterCanvas",
success: function(res) {
wx.hideLoading();
var tempFilePath = res.tempFilePath;
// 需要权限
wx.saveImageToPhotosAlbum({
filePath: tempFilePath,
success(res) {
wx.showModal({
content: "图片已保存到相册，赶紧晒一下吧~",
showCancel: false,
confirmText: "好的",
confirmColor: "#333"
});
},
fail: function(res) {
wx.hideLoading();
wx.showToast({
title: "没有相册权限",
icon: "none",
duration: 2000
});
}
});
},
fail: err => {
wx.hideLoading();
wx.showToast({
title: "出现了错误，请稍后再试",
icon: "none"
});
}
});
},
// 发送给朋友，以图片的方式，先生成临时图片地址，然后调用微信api显示转发
handleShowImg() {
let bili = this.InfoSync.windowWidth / 375 * 1;
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: 310 * bili,
height: 520 * bili,
destWidth: 310 * bili * this.InfoSync.pixelRatio,
destHeight: 520 * bili * this.InfoSync.pixelRatio,
fileType: "png",
quality: 1,
canvasId: "posterCanvas",
success: function(res) {
wx.hideLoading();
wx.previewImage({
urls: [res.tempFilePath],
current: res.tempFilePath
});
},
fail: err => {
wx.hideLoading();
wx.showToast({
title: "出现了错误，请稍后再试",
icon: "none"
});
}
});
}
}
};
</script>
<style lang="scss" scoped>
.livedposterDia {
.posterWrap {
min-height: calc(100vh - 80px);
padding-top: 80px;
// background-color: #f1f1f1;
.myCanvas {
width: 310px;
height: 520px;
margin: 0 auto;
background: #fff;
}
.saveBtn{
background: #F82F31;
}
}
}
</style>
src/pages/livedPoster/index.vue
......@@ -31,6 +31,8 @@ export default {
onLoad(options) {
this.params = JSON.parse(options.params);
this.liveId = this.params.liveId;
Object.assign(this.info,this.info,this.params);
console.log(this.info,'--------------------35');
this.init();
},
onUnload() {},
......@@ -41,21 +43,9 @@ export default {
});
},
init() {
wx.showLoading({title: '加载中…'})
let liveBroadcastId = this.liveId;
let _this = this;
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()}`;
wx.getUserInfo({
//获取微信用户信息
success: function(res) {
......@@ -67,11 +57,24 @@ 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')
console.log(info, "---------------------71");
const InfoSync = wx.getSystemInfoSync();
this.InfoSync = InfoSync;
let bili = InfoSync.windowWidth / 375 * 1;
......@@ -110,6 +113,7 @@ export default {
ctx.stroke();
ctx.draw();
});
wx.hideLoading();
});
},
// 小程序需要将图片下载下来，然后才能绘制到画布上
......
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