Skip to content

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

优化

parent c489c441
Showing with 342 additions and 17 deletions
src/app.json
{ {
"pages": [ "pages": [
"pages/index/main", "pages/index/main",
"pages/testCanvasPoster/main",
"pages/lived/main", "pages/lived/main",
"pages/login/main", "pages/login/main",
"pages/wxPay/main", "pages/wxPay/main",
......
src/components/livedModel/livedControls.vue
...@@ -37,10 +37,10 @@ ...@@ -37,10 +37,10 @@
</div> </div>
<div class="iptCopy" @click="isLogin">跟主播说点什么...</div> <div class="iptCopy" @click="isLogin">跟主播说点什么...</div>
<div class="shareIcon"> <div class="shareIcon">
<van-icon name="share" /> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAADwElEQVR4Xu2aS6hNURjH//+RgYGRKAMDr1tmFJGBSxmIjGTgKq/rUURi5qKQkhKlLt1IHkl05VUG7r3lkW4MPMIVRXkNFMqAqL++2len45y99mPtc/bu7FWnc2qv9X3f/7fX41trHaLFC1tcP0oAZQ9ocQLlEGjxDlBOguUQKIdAixPI1RCQ1EbyZSPfSW4ASHoGYCqABwC2kBxsBIhcAJB0CsDKCsGfAKwleTNrCHkB0A9gbpXY3wDWkDyTJYQ8AxjWvY3k4awgFAGAad9PcmcWEIoCwLQfJ7nBN4QiATDtl22yJPnDF4iiATDdAwGEdz4gFBGA6bacwXrCo7QQmg5A0iQAJ2osgy5tliusInnLVTHsecMBSBoHYAaAmcG3/R6ZUITlCgbhXML2jTsPkDQdwLrgkzTeeu22kjySxGjmPSBj4ZWa95HsigshMwCSxgDYHnzixpW0fjfJjXEaZwJAkiUsJn5CnGA81b0EoIPkryj2vAKQNA3AAQALojjPsI5trlaQ/ODy4Q2ApIUAzgMY5XLaoOdPAwiPM18GJa0H0N0gYXHcWK5gPeF2vUape4CkGwDs7ee1WK6wjGRvrQBTAZB0BcCSvCqviOsNyYleAUg6CmBzAcRbiAMk270BkGTCDUBRSjtJ20X+V2IPAUnzANSdVHJIZArJV14mQUkjAPQBmJ1DodUhfQcwluRPb8ugpIMAdhRA/BDJtihxRh4CkhYDuBrFaJPr9JGcHzWGOADs4KHZKa5L12mSlRcsrvrRzgMkLQdw1mmtuRX2ktwVN4RIPUDSfQCz4hpvYP1Okj1J/DkBSOoA4Pt66huA5wCeADC4qxOcCZrePwAWpTkXjALgguXSSegGbT4HS6cJfQFgsPpcX1Ktu0GXy/c2J5E0m4lLKIDgAHMowaGlTZj3APSTvOuKLgGAhwAsu0t9QeICEGeba/tu2xz1kgzdg1cDiQngOklbkr0UF4BrNsYcnu4AOEQycY4QA0APyU4vygMjdQFIGg/gbYizj4Hw1FfXEQEkOvV1wQoDEDb7HwvEhwFy+f73PAKATSTNp/cSBuAigKU1PNq/Nk76jCQEwFe7SCFpJ72ZlDAANvtPrvI6h6TN7l5LHQC2vJl45yqSJpgwAMP/2hq2P5rklzTO6rWVtAfA7ornlheY+NdZ+Ku0GQbAgrIZ18a5HSpa4pFZkWSriN0f2tDr8rHGRwnWmQlGMVLkOiWAIr89H7GXPcAHxSLbKHtAkd+ej9jLHuCDYpFtlD2gyG/PR+wt3wP+AsW7I1AzjlUOAAAAAElFTkSuQmCC" alt="">
</div> </div>
<div class="heardIcon" @click="addLike(1)"> <div class="heardIcon" @click="addLike(1)">
<van-icon name="like" class="like" /> <img class="like" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAADu0lEQVR4Xu2aTYhOURjH//+VspRSksiKKRsjWShT2FE2jK80xAj5CpHkI8nkm8aYwZiGGTORDQsKzcpqZomtmixsWCnZPHpypl5v8957zrnnfrzve596N+99znP+z+8+5957PogmNzZ5/igBlBXQ5ATKIdDkBVA+BMshkHQIiMhiAGsBLAIwx/y+A9DfJwAvSP7w6UdEFgBYDaClIvYvE1vjPyI56RN7qo13BYhIO4AjAFZYCBgCMELytYUvHGOPABiyjV3dvzMAEVkK4DQABeBqrwD01RKbZuxaQp0AiMhmADcAzHXNvMr/Fsmjlf+lGTtKqzUAETkP4FzCxCubvyOpzw4t+dRix+m1AiAiXQBOxgXzuK6Jq4aQYKdkXCGpQzXSYgGIyA4Ag3GBCnr9AkmFXNNsAIwDWFbQBG1ktZKc8HoIisheAL02vRTYR986nb4APgJYWeDkbKUtJPl1OueaQ0BE5gFI9JVlqy4Dvw6SA64AtgAYzkBcFl0MkOxwBXAVwPEs1GXQxzjJ5a4A9NWnr8BGsEmS810BvAWwrhGyB/CH5AxXAC8BbGwQAD9JznIF0ANgX4MA+EJyiSuA0BOUPFmOkWxzBaAfQPoh1AhWc04QORcQkW8B5v5FANhGcsypAtRZRHQeoPOBerYJkq21EoirAJ0F6mywnq2TZJ8XgAaogsi7r/nZrAfMBvCmDtcEfqtmkp+jyjcWgKmCVQbCzDoaCy1xyVtVwFTCIrIJwGidAFhD8r2NVqsKqICgewHPbALn6LOBpO4/WJkTADMctupOjFX07J3aSTpVqTMAA2E7gCfZ5xfZ4y6Sj101eQEwEHYCmHaZyVVEAP8DJO/5xPEGYCDoMlO/T8cB25wgec03XiIABsJuAA99BSRsd47kxSQxEgMwEPborm8SIR5tu0ie8mj3X5MgAAwE3Xy4n1SQZfs7JA9b+ka6BQNgIOwH0B1CWESMbpIHQ/URFICBoOLuhhJYFaeHpEIOZsEBGAiHANwOpvJfoF6SwdcoUwFgIOj5oZuBIDwgmcrCTGoADIRjAK4nhNBPUl+1qViqAAwE3V7TbTYfq7mn5xNsujapAzAQ9HiNHrNxsUGS+rmdqmUCwEDQ8zqXLbN5SjKTfcnMABgIZwBcioEwTHKbJajEbpkCMBDOAqj1/T5K0ucApjeIzAEYCHosrvr01nOSuuyWqeUCwEDQMb4egB5+/kAylwWW3ABkepsjOisBFOVO5KWjrIC8yBel37ICinIn8tJRVkBe5IvS71/x8QxQBHuXTgAAAABJRU5ErkJggg==" alt="">
<p class="heardNum" v-if="likeNum>0">{{likeNumCopy}}</p> <p class="heardNum" v-if="likeNum>0">{{likeNumCopy}}</p>
<div class="box"> <div class="box">
<div <div
...@@ -338,12 +338,17 @@ export default { ...@@ -338,12 +338,17 @@ export default {
text-indent: 1em; text-indent: 1em;
} }
.shareIcon, .shareIcon,
.heardIcon { .heardIcon{
color: #fff;
font-size: 30px;
position: relative; position: relative;
width: 50px; width: 50px;
height: 30px; height: 30px;
display: flex;
justify-content: center;
align-items: center;
img{
width: 32px;
height: 32px;
}
} }
.heardIcon { .heardIcon {
.like { .like {
......
src/components/livedModel/notStarted.vue
...@@ -78,17 +78,17 @@ export default { ...@@ -78,17 +78,17 @@ export default {
color: #fff; color: #fff;
} }
.time { .time {
margin-top: 10px; margin-top: 16px;
} }
.remindBtn { .remindBtn {
margin-top: 10px; margin-top: 16px;
height: 30px; height: 20px;
line-height: 30px; line-height: 20px;
text-align: center; text-align: center;
border-radius: 6px; border-radius: 6px;
color: #fff; color: #fff;
font-size: 18px; font-size: 18px;
padding: 10px 30px; padding: 14px 40px;
background: linear-gradient(to right, #ff877d, #fb566d); background: linear-gradient(to right, #ff877d, #fb566d);
} }
} }
......
src/components/livedModel/timeDown.vue
...@@ -156,11 +156,11 @@ export default { ...@@ -156,11 +156,11 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.days{ .days{
font-size: 26px; font-size: 28px;
font-weight: bold; font-weight: bold;
color: #fff; color: #fff;
span{ span{
padding: 0 4px; padding: 0 2px;
} }
} }
</style> </style>
src/pages/lived/index.vue
...@@ -51,6 +51,7 @@ ...@@ -51,6 +51,7 @@
<live-player <live-player
v-if="liveNoticeInfo.liveBroadcastState==1&&liveNoticeInfo.boStreamRTMP" v-if="liveNoticeInfo.liveBroadcastState==1&&liveNoticeInfo.boStreamRTMP"
class="livePlayer" class="livePlayer"
id="liveDemo"
:src="liveNoticeInfo.boStreamRTMP" :src="liveNoticeInfo.boStreamRTMP"
mode="live" mode="live"
:picture-in-picture-mode="['push','pop']" :picture-in-picture-mode="['push','pop']"
...@@ -136,10 +137,12 @@ export default { ...@@ -136,10 +137,12 @@ export default {
this.userEntry("IN"); this.userEntry("IN");
}, },
onUnload() { onUnload() {
this.userEntry("OUT");
this.liveNoticeInfo.liveBroadcastState = -1; this.liveNoticeInfo.liveBroadcastState = -1;
this.liveNoticeInfo = {}; this.liveNoticeInfo = {};
this.liveNoticeInfo.boStreamRTMP=""; this.liveNoticeInfo.boStreamRTMP="";
let videoContext= wx.createLivePlayerContext('liveDemo');
videoContext.stop();
this.userEntry("OUT");
this.firstComing=true; this.firstComing=true;
if (this.infoTiming) { if (this.infoTiming) {
clearInterval(this.infoTiming); clearInterval(this.infoTiming);
...@@ -181,6 +184,7 @@ export default { ...@@ -181,6 +184,7 @@ export default {
}); });
}, },
back() { back() {
// 改成reLaunch形式，需要h5给一个backurl进行返回跳转(解决页面返回还有声音问题)
wx.navigateBack({ wx.navigateBack({
delta: 1 delta: 1
}); });
...@@ -422,7 +426,7 @@ export default { ...@@ -422,7 +426,7 @@ export default {
color: #fff; color: #fff;
font-size: 14px; font-size: 14px;
display: inline-block; display: inline-block;
border-radius: 6px; border-radius: 10px;
height: 20px; height: 20px;
line-height: 20px; line-height: 20px;
} }
......
src/pages/testCanvasPoster/index.vue 0 → 100644
<template>
<div class="test">
测试
<!--index.wxml-->
<view class="posterWrap">
<canvas canvas-id="posterCanvas" class="myCanvas"></canvas>
<div class="fixed_container">
<div class="fixed_inner">
<div @click="handleShowImg">
<img src="../../../static/images/lived/goodsImg.png" alt />
<span>发送给朋友</span>
</div>
<div @click="handleSave">
<img src="../../../static/images/lived/goodsImg.png" alt />
<span>保存名片</span>
</div>
</div>
</div>
</view>
</div>
</template>
<script type="text/ecmascript-6">
export default {
name: "",
data() {
return {
InfoSync: {}
};
},
components: {},
computed: {},
onLoad() {
const InfoSync = wx.getSystemInfoSync();
this.InfoSync = InfoSync;
let bili = InfoSync.windowWidth / 375 * 1;
const ctx = wx.createCanvasContext("posterCanvas");
this.saveThe(
"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575527967726&di=172dcdd5a6f6b3a92a17d670793a6a50&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201303%2F10%2F20130310192450_S8HG8.thumb.700_0.jpeg",
path => {
ctx.drawImage(path, 0, 0, 310 * bili, 435 * bili); //ctx.drawImage（图片路径，距离画布左边，距离画布右边，图片宽，图片高）
ctx.save(); // 保存当前绘画
ctx.setTextAlign("center"); // 文字居中 ctx.fillText（显示文字，距离画布左边/基准点/文字以这个点居中或左对齐，距离画布顶部）
ctx.setFillStyle("#111"); // 文字颜色：fff
ctx.setFontSize(16); // 文字字号
ctx.fillText("刘亦菲", 155 * bili, 164 * bili); //名字 ctx.fillText（显示文字，距离画布左边/基准点/文字以这个点居中或左对齐，距离画布顶部）
ctx.setFontSize(21); // 文字字号
ctx.fillText("位置差一点出阴影重叠加粗", 155 * bili, 222.5 * bili);
ctx.setFillStyle("#895908"); // 文字颜色：895908
ctx.setTextAlign("center"); // 文字居中
ctx.fillText("位置差一点出阴影重叠加粗", 155 * bili, 221.5 * bili);
ctx.fillText("位置差一点出阴影重叠加粗", 155 * bili, 221.5 * bili);
ctx.setFontSize(14); // 文字字号
ctx.setTextAlign("left"); // 文字居中
ctx.setFillStyle("#111"); // 文字颜色：fff
ctx.fillText("生日：1990-01-01", 90 * bili, 256 * bili);
ctx.fillText("电话：9090980", 90 * bili, 284 * bili);
ctx.setFillStyle("#111"); // 文字颜色：111
ctx.setTextAlign("left"); // 文字居中
ctx.setFontSize(17); // 文字字号
ctx.fillText("写两次让字体加粗", 140 * bili, 346 * bili);
ctx.fillText("写两次让字体加粗", 140 * bili, 346 * bili);
ctx.setFillStyle("#828282"); // 文字颜色：828282
ctx.setFontSize(14); // 文字字号
ctx.fillText("写一次不加粗", 140 * bili, 376.5 * bili);
ctx.setFillStyle("#B0B0B0"); // 文字颜色：B0B0B0
ctx.setFontSize(11); // 文字字号
ctx.fillText("小字体", 140 * bili, 398 * bili);
ctx.save();
//圆形头像框
ctx.setStrokeStyle("rgba(0,0,0,0)");
ctx.arc(155 * bili, 94 * bili, 45 * bili, 0, 2 * Math.PI);
ctx.fill();
//二维码
this.saveThe(
"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575528227860&di=f644289e83c18cf73d44e76dec4c1246&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn%2Fw640h395%2F20180109%2F0ae9-fyqnici9075376.jpg",
path => {
ctx.drawImage(path, 30.5 * bili, 320 * bili, 93 * bili, 93 * bili);
ctx.save();
//头像
this.saveThe(
"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575528093128&di=a92d8586763a982f233df10d358b8136&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201602%2F16%2F20160216165321_eTASf.jpeg",
path => {
ctx.clip();
ctx.drawImage(
path,
110 * bili,
47.5 * bili,
90 * bili,
90 * bili
);
ctx.save();
ctx.stroke();
ctx.draw();
}
);
}
);
}
);
},
created() {},
mounted() {},
methods: {
// 小程序需要将图片下载下来，然后才能绘制到画布上
saveThe(url, callback) {
wx.getImageInfo({
src: url, //服务器返回的图片地址
success: res => {
callback(res.path);
},
fail: function(res) {}
});
},
// 点击保存时，将画布生成海报
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: 435 * bili,
destWidth: 310 * bili * this.InfoSync.pixelRatio,
destHeight: 435 * 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: 435 * bili,
destWidth: 310 * bili * this.InfoSync.pixelRatio,
destHeight: 435 * 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 scoped>
.posterWrap {
min-height: 100%;
padding-top: 40px;
background-color: #f1f1f1;
}
.myCanvas {
width: 310px;
height: 435px;
margin: 0 auto;
background: #fff;
}
.fixed_container {
position: fixed;
bottom: 0;
width: 100%;
z-index: 1000;
}
.fixed_inner {
display: flex;
justify-content: space-between;
border-top: 1rpx solid #e5e5e5;
padding: 20rpx 32rpx;
background: #ffffff;
align-items: center;
}
.fixed_inner div {
display: flex;
align-items: center;
justify-content: center;
color: #fff;
border-radius: 5rpx;
width: 330rpx;
height: 76rpx;
line-height: 76rpx;
text-align: center;
background: -webkit-linear-gradient(left, #27caac, #02ba8e);
background: -o-linear-gradient(right, #27caac, #02ba8e);
background: -moz-linear-gradient(right, #27caac, #02ba8e);
background: linear-gradient(to right, #27caac, #02ba8e); /* 标准的语法 */
}
.fixed_inner div:last-child {
background: -webkit-linear-gradient(left, #ff7179, #ff6459);
background: -o-linear-gradient(right, #ff7179, #ff6459);
background: -moz-linear-gradient(right, #ff7179, #ff6459);
background: linear-gradient(to right, #ff7179, #ff6459);
}
.fixed_inner div img {
width: 42rpx;
height: 32rpx;
margin-right: 11rpx;
}
</style>
src/pages/testCanvasPoster/main.js 0 → 100644
import Vue from 'vue'
import App from './index'
const app = new Vue(App)
app.$mount()
\ No newline at end of file
src/pages/testCanvasPoster/main.json 0 → 100644
{
"navigationBarTitleText": "测试canvas绘制海报"
}
\ No newline at end of file
src/utils/request.js
...@@ -10,7 +10,8 @@ export async function requestGET(url, options) { ...@@ -10,7 +10,8 @@ export async function requestGET(url, options) {
method: "GET", method: "GET",
header: { header: {
"Shop-Mixid": shopMixid, "Shop-Mixid": shopMixid,
"Offline-Shop-Code": store.state.offlineShopCode "Offline-Shop-Code": store.state.offlineShopCode,
"dubbo-tag": "ljx"
}, },
success: function (res) { success: function (res) {
resolve(res) resolve(res)
...@@ -31,7 +32,8 @@ export async function requestPOST(url, options) { ...@@ -31,7 +32,8 @@ export async function requestPOST(url, options) {
header: { header: {
"Shop-Mixid": shopMixid, "Shop-Mixid": shopMixid,
"Authorization": wx.getStorageSync('sessionid') || "", "Authorization": wx.getStorageSync('sessionid') || "",
"Offline-Shop-Code": store.state.offlineShopCode "Offline-Shop-Code": store.state.offlineShopCode,
"dubbo-tag": "ljx"
}, },
success: function (res) { success: function (res) {
resolve(res) resolve(res)
...@@ -53,7 +55,8 @@ export function requestPOST1(url, options) { ...@@ -53,7 +55,8 @@ export function requestPOST1(url, options) {
"Content-Type": "application/x-www-form-urlencoded", "Content-Type": "application/x-www-form-urlencoded",
"Shop-Mixid": shopMixid, "Shop-Mixid": shopMixid,
Authorization: wx.getStorageSync('sessionid') || "", Authorization: wx.getStorageSync('sessionid') || "",
"Offline-Shop-Code": store.state.offlineShopCode "Offline-Shop-Code": store.state.offlineShopCode,
"dubbo-tag": "ljx"
}, },
success: function (res) { success: function (res) {
resolve(res) resolve(res)
......
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