Skip to content

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

修改

parent 14dc6e00
Showing with 359 additions and 36 deletions
src/components/livedModel/livedShareDia.vue
...@@ -26,23 +26,29 @@ ...@@ -26,23 +26,29 @@
</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>
</div> </div>
</template> </template>
<script type="text/ecmascript-6"> <script type="text/ecmascript-6">
import livedposterDia from "@/components/livedModel/livedposterDia";
import { DFSImg } from "@/utils/index"; import { DFSImg } from "@/utils/index";
export default { export default {
props: ["showShareDia"], props: ["showShareDia", "info"],
name: "", name: "",
data() { data() {
return { return {
liveId: "", liveId: "",
shopName: "", shopName: "",
shopLogo: "", shopLogo: "",
backPath: "" backPath: "",
showPosterDia: false,
posterInfo: {}
}; };
}, },
components: {}, components: {
livedposterDia
},
computed: {}, computed: {},
created() {}, created() {},
onLoad(options) { onLoad(options) {
...@@ -52,10 +58,27 @@ export default { ...@@ -52,10 +58,27 @@ 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 = {
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(){
this.showPosterDia=false;
},
// 初始化信息 // 初始化信息
init() {}, init() {},
initShare() {}, initShare() {},
...@@ -90,13 +113,25 @@ export default { ...@@ -90,13 +113,25 @@ export default {
}, },
// 去海报页面 // 去海报页面
toCreatePoster() { toCreatePoster() {
let query = { // let query = {
liveId: this.liveId // liveId: this.liveId,
}; // livedTitle: this.info.title,
let url = `/pages/livedPoster/main?params=${JSON.stringify(query)}`; // livedStatus: this.info.liveBroadcastState
wx.navigateTo({ // };
url: url // 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 { ...@@ -128,7 +163,7 @@ img {
} }
.tit { .tit {
font-size: 16px; font-size: 16px;
color: #000;; color: #000;
} }
} }
.wxShare { .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 { ...@@ -31,6 +31,8 @@ export default {
onLoad(options) { onLoad(options) {
this.params = JSON.parse(options.params); this.params = JSON.parse(options.params);
this.liveId = this.params.liveId; this.liveId = this.params.liveId;
Object.assign(this.info,this.info,this.params);
console.log(this.info,'--------------------35');
this.init(); this.init();
}, },
onUnload() {}, onUnload() {},
...@@ -41,37 +43,38 @@ export default { ...@@ -41,37 +43,38 @@ export default {
}); });
}, },
init() { init() {
wx.showLoading({title: '加载中…'})
let liveBroadcastId = this.liveId; let liveBroadcastId = this.liveId;
let _this = this; let _this = this;
live.getLiveInfo(liveBroadcastId).then(res => { wx.getUserInfo({
if (res.data.code == 200) { //获取微信用户信息
let resData = res.data.data; success: function(res) {
this.info.livedTitle = resData.title; (_this.info.nickName = res.userInfo.nickName),
this.info.livedStatus = resData.liveBroadcastState; (_this.info.avatarUrl = res.userInfo.avatarUrl),
let cImg=DFSImg(resData.coverUrl); _this.initPoster(_this.info);
if(cImg.indexOf('https')==-1){ },
this.info.coverUrl = cImg.replace("http","https"); fail: function(res) {
} _this.initPoster(_this.info);
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) {
(_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) { 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;
...@@ -110,6 +113,7 @@ export default { ...@@ -110,6 +113,7 @@ export default {
ctx.stroke(); ctx.stroke();
ctx.draw(); 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