Commit 9599a5bf by 张卓

Merge branch 'nativehome_tst' of http://code.mayi888.com/chengmo/mayi-mp-shop into nativehome_tst

parents 00cf326a affa2a4e
......@@ -48,8 +48,13 @@ export default {
},
},
onLoad(options) {
console.log('onload')
let ss = wx.getStorageSync("sessionid");
this.ss = ss ? `&sessionid=${ss}` : "";
if (!ss) {
this.params += this.params.includes("logOut") ? "" : "&logOut=true";
}
// tabbar 跳转
let homeIndex = checkTabbarPage("/");
homeIndex != 0 && homeIndex == this.index && (this.index = 0);
......@@ -61,16 +66,14 @@ export default {
}
},
onShow() {
console.log('onshow')
// 登录态更新
let ss = wx.getStorageSync("sessionid");
if (!this.ss && ss) {
this.ss = `&sessionid=${ss}`;
} else if (!ss) {
this.params += this.params.includes("logOut") ? "" : "&logOut=true";
}
if (!noLoginListPath.includes(this.page)) {
this.timestamp = `&timestamp=${new Date().getTime()}`;
}
// let ss = wx.getStorageSync("sessionid");
// if (!this.ss && ss) {
// this.ss = `&sessionid=${ss}`;
// } else if (!ss) {
// this.params += this.params.includes("logOut") ? "" : "&logOut=true";
// }
},
methods: {
handleError(data) {
......
......@@ -363,7 +363,7 @@ export default {
}
this.setFooterShow(el);
// this.setFooterShow(el);
if(this.$mp.page && this.$mp.page.selectComponent(".getIndexHomePage")){
this.$mp.page.selectComponent(".getIndexHomePage").getScroll(el);
}
......
import Vue from 'vue'
import App from './index'
const app = new Vue(App)
app.$mount()
{
"navigationStyle":"custom",
"usingComponents": {
"van-popup": "/static/vant/popup/index",
"van-divider": "/static/vant/divider/index"
}
}
\ No newline at end of file
import Vue from 'vue'
import App from './index'
const app = new Vue(App)
app.$mount()
{
"enablePullDownRefresh":true,
"navigationStyle":"custom",
"navigationBarTitleText":"直播计划",
"usingComponents": {
"van-divider": "/static/vant/divider/index"
}
}
\ No newline at end of file
<template>
<div class="container" :style="{'padding-top':navHeight +'px'}">
<div class="masker"></div>
<image class="bg-img" :src="overInfo.coverUrl" mode="aspectFill" alt=""></image>
<div class="conbox">
<div class="live-over">
<div class="over-text">直播已{{liveInfo.liveBroadcastState == 2 ? '结束' : '失效'}}</div>
<div class="live-time" v-if="liveInfo.liveBroadcastState == 2">直播时长:{{overInfo.liveTime}}</div>
</div>
<div class="live-info" v-if="liveInfo.liveBroadcastState == 2">
<div class="info-row item-row-one">
<div class="info-item">
<div class="item-num">{{overInfo.watchNum}}</div>
<div class="item-text">观看</div>
</div>
<div class="info-item">
<div class="item-num">{{overInfo.goodsClickNum}}</div>
<div class="item-text">商品点击</div>
</div>
</div>
<div class="info-row">
<div class="info-item">
<div class="item-num">{{overInfo.shareNum}}</div>
<div class="item-text">分享</div>
</div>
<div class="info-item">
<div class="item-num">{{overInfo.guestBookNum}}</div>
<div class="item-text">评论</div>
</div>
<div class="info-item">
<div class="item-num">{{overInfo.likeNum}}</div>
<div class="item-text"></div>
</div>
</div>
</div>
</div>
<navBar :navTop="navTop" :liveInfo="liveInfo" :navHeight="navHeight" :type="type"></navBar>
</div>
</template>
<script>
import navBar from '@/components/common/navbar.vue'
import { getNavbarInfo,DFSImg } from '../../utils/common.js'
import liveApi from '@/api/liveing'
export default {
data(){
return{
navTop : '',
navHeight : '',
type : 2,
overInfo : {},
liveInfo : {}
}
},
components:{
navBar
},
created(){
//获取导航栏信息
getNavbarInfo((res) => {
this.navTop = res.navTop
this.navHeight = res.navHeight
})
},
onShow(){
// this.overInfo = {}
},
onLoad(options){
this.overInfo = {}
if(options.type){
this.type = options.type;
}
this.liveInfo = JSON.parse(options.liveInfo)
console.log(this.liveInfo)
this.getOverInfo(options.id)
},
methods:{
getOverInfo(id){
liveApi.queryCompleteDetail({
id : id
}).then(res => {
// console.log(res.data.code == 200)
if(res.data.code == 200){
let result = res.data.data
// console.log(res.data.data)
res.data.data.coverUrl = DFSImg(res.data.data.coverUrl)
result.watchNum = result.watchNum - 0 > 10000 ? ((result.watchNum - 0) / 10000).toFixed(1) + 'w' : result.watchNum
result.goodsClickNum = result.goodsClickNum - 0 > 10000 ? ((result.goodsClickNum - 0) / 10000).toFixed(1) + 'w' : result.goodsClickNum
result.shareNum = result.shareNum - 0 > 10000 ? ((result.shareNum - 0) / 10000).toFixed(1) + 'w' : result.shareNum
result.guestBookNum = result.guestBookNum - 0 > 10000 ? ((result.guestBookNum - 0) / 10000).toFixed(1) + 'w' : result.guestBookNum
result.likeNum = result.likeNum - 0 > 10000 ? ((result.likeNum - 0) / 10000).toFixed(1) + 'w' : result.likeNum
this.overInfo = result
console.log(this.overInfo)
}
})
}
},
}
</script>
<style scoped lang="scss">
.container{
width: 100%;
height: 100vh;
box-sizing: border-box;
background-color: rgba(102,102,102,.38);
overflow: hidden;
position: fixed;
top: 0;
left: 0;
.conbox{
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: 10;
}
.masker{
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: 1;
background-color: rgba(102,102,102,.38);
}
.bg-img{
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: 0;
background-color: rgba(102,102,102,.38);
}
.live-over{
color: white;
text-align: center;
padding-top: 25vh;
.over-text{
font-size: 36px;
color: #FFFFFF;
font-weight: bold;
}
.live-time{
font-size: 15px;
line-height: 30px;
}
}
.live-info{
font-size: 18px;
color: white;
margin-top: 10vh;
width: 100%;
.info-row{
display: flex;
justify-content: space-around;
align-items: center;
margin-bottom: 40px;
font-weight: bold;
.info-item{
text-align: center;
}
}
.item-row-one{
width: 100%;
padding: 0 60px;
box-sizing: border-box;
.info-item{
width: 50%;
}
}
}
}
</style>
\ No newline at end of file
import Vue from 'vue'
import App from './index'
const app = new Vue(App)
app.$mount()
{
"navigationStyle":"custom"
}
\ No newline at end of file
import Vue from 'vue'
import App from './index'
// add this to handle exception
Vue.config.errorHandler = function (err) {
if (console && console.error) {
console.error(err)
}
}
const app = new Vue(App)
app.$mount()
{
"navigationStyle":"custom",
"navigationBarTextStyle": "white",
"disableScroll": true,
"usingComponents": {
"van-button": "/static/vant/button/index",
"van-icon": "/static/vant/icon/index",
"van-popup": "/static/vant/popup/index",
"van-stepper": "/static/vant/stepper/index"
}
}
\ No newline at end of file
<template>
<div class="livedPoster">
<div class="posterWrap">
<canvas canvas-id="posterCanvas" class="myCanvas" @click="getImg"></canvas>
</div>
</div>
</template>
<script type="text/ecmascript-6">
import { serialize, getQueryVariable, DFSImg } from "@/utils/index";
import live from "@/api/live";
export default {
name: "",
data() {
return {
InfoSync: {},
liveId: 0,
params: {},
// 海报中信息
info: {
coverUrl: "",
livedStatus: 1, //直播状态 0未开播 1一开播
livedTime: "3月21日 20:20",
livedTitle: "",
nickName: "",
avatarUrl: "",
miniCode: ""
}
};
},
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() {},
methods: {
back() {
wx.navigateBack({
delta: 1
});
},
init() {
wx.showLoading({title: '加载中…'})
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();
});
wx.hideLoading();
});
},
// 小程序需要将图片下载下来,然后才能绘制到画布上
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 scoped lang="scss">
.livedPoster {
position: relative;
}
.posterWrap {
min-height: calc(100vh - 20px);
padding-top: 20px;
background-color: #f1f1f1;
}
.myCanvas {
width: 310px;
height: 520px;
margin: 0 auto;
background: #fff;
}
</style>
import Vue from 'vue'
import App from './index'
const app = new Vue(App)
app.$mount()
\ No newline at end of file
{
"navigationBarTitleText": "点击保存图片"
}
\ No newline at end of file
......@@ -138,9 +138,6 @@
object-fit: contain;
}
.shop_lists .list_item>div {
// width: 100%;
// overflow: hidden;
// text-overflow: ellipsis;
white-space: nowrap;
}
.is_show,.is_show1 {
......
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