Skip to content

yanghanwen / wanda-vr

Go to a project
Commit 5f1b87f1 by 杨翰文
Options

fix: 先去掉生成

parent 62f69288
Showing with 30 additions and 12 deletions
show.html
...@@ -204,22 +204,21 @@ ...@@ -204,22 +204,21 @@
} }
.modal-container{ .modal-container{
position: relative; position: relative;
/* height: 10.65rem; */
} }
.poster, .share-pic{ .poster, .share-pic{
width: 6.51rem; width: 6.51rem;
position: relative; position: relative;
margin: 0rem auto 0rem;
position: relative;
} }
.share-pic { .share-pic {
z-index: 100; z-index: 100;
display: block; display: block;
} }
.poster { .poster {
position: absolute; /* position: absolute;
top: 0; top: 0;
left: 50%; left: 50%;
transform: translate(-50%, 0); transform: translate(-50%, 0); */
} }
.poster.hide { .poster.hide {
transform: translate(-2000px, -2000px); transform: translate(-2000px, -2000px);
...@@ -280,7 +279,7 @@ ...@@ -280,7 +279,7 @@
font-weight: bold; font-weight: bold;
color: #FFFFFF; color: #FFFFFF;
line-height: 0.8rem; line-height: 0.8rem;
text-shadow: 0 0 10px rgba(0,0,0,0.7); text-shadow: 0 0 0.1rem rgba(0,0,0,1);
} }
.poster-content__content{ .poster-content__content{
width: 4.12rem; width: 4.12rem;
...@@ -290,7 +289,7 @@ ...@@ -290,7 +289,7 @@
font-weight: bold; font-weight: bold;
color: #FFFFFF; color: #FFFFFF;
line-height: 0.42rem; line-height: 0.42rem;
text-shadow: 0 0 10px rgba(0,0,0,0.6); text-shadow: 0 0 0.1rem rgba(0,0,0,1);
} }
.poster-content__qrcode{ .poster-content__qrcode{
width: 1.07rem; width: 1.07rem;
...@@ -354,7 +353,7 @@ ...@@ -354,7 +353,7 @@
<div @click.stop="refreshShareText" class="change-poster-btn">换一换</div> <div @click.stop="refreshShareText" class="change-poster-btn">换一换</div>
<div class="poster" ref="postContent" > <div class="poster" ref="postContent" >
<img :src="navs[activeIdx].share_image" class="poster-img" @load="generatePost"/> <img :src="curShareImg" v-if="curShareImg" class="poster-img" @load="generatePost"/>
<div class="poster-content"> <div class="poster-content">
<div class="poster-content__title">{{userInfo.nickname}}的<br/>2020幸运打卡地：丹寨</div> <div class="poster-content__title">{{userInfo.nickname}}的<br/>2020幸运打卡地：丹寨</div>
<div class="poster-content__content">{{shareDesc}}</div> <div class="poster-content__content">{{shareDesc}}</div>
...@@ -365,7 +364,7 @@ ...@@ -365,7 +364,7 @@
</div> </div>
</div> </div>
</div> </div>
<img :src="postData" alt="" v-if="postData" class="share-pic"> <!-- <img :src="postData" alt="" v-if="postData" class="share-pic"> -->
<div class="poster-action-box"> <div class="poster-action-box">
<div @click.stop="previewImg" class="poster-action-btn">保存图片并发送给好友</div> <div @click.stop="previewImg" class="poster-action-btn">保存图片并发送给好友</div>
<!-- <div @click.stop="shareToFirends" class="poster-action-btn">分享好友</div>--> <!-- <div @click.stop="shareToFirends" class="poster-action-btn">分享好友</div>-->
...@@ -396,7 +395,8 @@ var vueInstance = new Vue({ ...@@ -396,7 +395,8 @@ var vueInstance = new Vue({
posterUrl:'', posterUrl:'',
navs:[], navs:[],
userInfo:{}, userInfo:{},
postData: '' postData: '',
curShareImg: ''
} }
}, },
methods:{ methods:{
...@@ -457,13 +457,24 @@ var vueInstance = new Vue({ ...@@ -457,13 +457,24 @@ var vueInstance = new Vue({
generatePost() { generatePost() {
setTimeout(() => { setTimeout(() => {
// alert('start');
try {
html2canvas(this.$refs.postContent, { html2canvas(this.$refs.postContent, {
allowTaint: true, allowTaint: true,
useCORS: true, useCORS: true,
backgroundColor: null backgroundColor: null
}).then((canvas) => { }).then((canvas) => {
// alert(canvas);
this.postData = canvas.toDataURL(); this.postData = canvas.toDataURL();
// alert(this.postData);
}).catch(e => {
// alert(e);
}); });
} catch(e) {
// alert(e);
}
}, 200) }, 200)
}, },
closeModal(){ closeModal(){
...@@ -548,7 +559,7 @@ var vueInstance = new Vue({ ...@@ -548,7 +559,7 @@ var vueInstance = new Vue({
// // this.posterUrl = currentInfo.poster // // this.posterUrl = currentInfo.poster
//this.showPoster = true //this.showPoster = true
// showModal() // showModal()
only!=='true' && this.generatePost(); only!==true && this.generatePost();
}, },
async bindShareEvent(){ async bindShareEvent(){
...@@ -557,9 +568,10 @@ var vueInstance = new Vue({ ...@@ -557,9 +568,10 @@ var vueInstance = new Vue({
this.showPoster = true this.showPoster = true
// showModal() // showModal()
}, },
setActive(idx,initJsSdk=true){ async setActive(idx,initJsSdk=true){
this.activeIdx = Number(idx) this.activeIdx = Number(idx)
//this.shareDesc = this.navs[this.activeIdx].content //this.shareDesc = this.navs[this.activeIdx].content
this.curShareImg = (await createImgByAsync(this.navs[this.activeIdx].share_image)).src;
if(initJsSdk)this.shareToFirends() if(initJsSdk)this.shareToFirends()
}, },
async _init_func(){ async _init_func(){
...@@ -575,7 +587,8 @@ var vueInstance = new Vue({ ...@@ -575,7 +587,8 @@ var vueInstance = new Vue({
// this.setActive(idx) // this.setActive(idx)
// } // }
var userInfo = await getUserInfo(); var userInfo = await getUserInfo();
userInfo.qrcode = (await createImgByAsync(userInfo.qrcode)).src userInfo.qrcode = (await createImgByAsync(userInfo.qrcode)).src;
this.curShareImg = (await createImgByAsync(this.navs[this.activeIdx].share_image)).src;
console.log(userInfo); console.log(userInfo);
this.$set(this,'userInfo',userInfo) this.$set(this,'userInfo',userInfo)
var largeShareName = `${userInfo.nickname}的` var largeShareName = `${userInfo.nickname}的`
...@@ -592,6 +605,11 @@ var vueInstance = new Vue({ ...@@ -592,6 +605,11 @@ var vueInstance = new Vue({
}) })
this.loadReady = true this.loadReady = true
setTimeout(() => {
this.generatePost();
}, 1000);
} }
}, },
created(){ created(){
......
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 sign in to comment