Skip to content

html / wanda-ball

Go to a project
Commit 5cc31b25 by fengfan
Options

bug

parent d6f19d32
Showing with 170 additions and 121 deletions
src/components/Detail.vue
...@@ -23,10 +23,10 @@ ...@@ -23,10 +23,10 @@
<div class="num">{{pictureInfo.point_num}}</div> <div class="num">{{pictureInfo.point_num}}</div>
</div> </div>
</div> </div>
<div class="shareBox" v-if="shareOnoff" @click="closeShare"> <div class="shareBox" v-if="shareOnoff" v-shotclick="closeShare" >
<!-- 点击右上角“...”进行分享 --> <!-- 点击右上角“...”进行分享 -->
<ShareImg v-if='shareOnoff' :info="pictureInfo"/> <ShareImg v-if='shareOnoff' :info="pictureInfo"/>
<div class="tishi"> <div class="tishi" >
<p>长按保存海报 分享给朋友</p> <p>长按保存海报 分享给朋友</p>
<p>集赞获大奖！！</p> <p>集赞获大奖！！</p>
</div> </div>
...@@ -540,10 +540,14 @@ export default { ...@@ -540,10 +540,14 @@ export default {
}) })
// this.shareOnoff = true; // this.shareOnoff = true;
}, },
closeShare() { closeShare(e) {
this.shareOnoff = false; this.shareOnoff = false;
this.shareOnoff2 = false; this.shareOnoff2 = false;
}, },
closeShareoff(e) {
console.log(e);
e.stopPropagation();
},
closeJinzhi() { closeJinzhi() {
this.jinzhidianzan = false; this.jinzhidianzan = false;
}, },
...@@ -849,15 +853,13 @@ export default { ...@@ -849,15 +853,13 @@ export default {
top: 0; top: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 20px; right: 0;
width: 100%; width: 100%;
overflow: auto; overflow: auto;
background: rgba(0, 0, 0, 0.8); background: rgba(0, 0, 0, 0.7);
z-index: 100000; z-index: 100000;
text-align: right; text-align: right;
font-size: .4rem; font-size: .4rem;
padding-top: 12px;
padding-right:20px;
color: aliceblue; color: aliceblue;
line-height: 20px; line-height: 20px;
.tishi{ .tishi{
......
src/components/ShareImg.vue
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
</h3> </h3>
</div> </div>
<div class="share-qrcode"> <div class="share-qrcode">
<span class="qrcode" data-qrcode="http://www.baidu.com"></span> <span class="qrcode" :data-qrcode="'https://wanda-h5.bdideal.com/video-test/index.html#'+$route.fullPath"></span>
<p> <p>
长按识别二维码 长按识别二维码
<br>为我点赞 <br>为我点赞
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
</div> </div>
</div> </div>
</div> </div>
<div id="test11" class="canvas-img"></div> <div id="test11" class="canvas-img">海报正在生成中......</div>
</div> </div>
</template> </template>
...@@ -41,46 +41,80 @@ export default { ...@@ -41,46 +41,80 @@ export default {
}, },
props:['info'], props:['info'],
mounted() { mounted() {
var _this=this
setTimeout(()=>{ setTimeout(()=>{
window.htmlToBase64({ window.htmlToBase64({
domSourceId: "moban1", domSourceId: "moban1",
domTargetId: "test11" domTargetId: "test11"
}) },this.htmlToBase64CallBack)
},0) },0)
}, },
methods: { methods: {
htmlToBase64CallBack(){
this.showMoban1 = false
},
closeShareoff(e) {
console.log(e);
e.stopPropagation();
},
} }
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
// out: ../css/style.css, compress: true, sourceMap: true // box-sizing: border-box;
.f-cb:after,.f-cbli li:after{display:block;clear:both;visibility:hidden;height:0;overflow:hidden;content:'.';}.f-cb,.f-cbli li{zoom:1;}.f-ib{display:inline-block;*display:inline;*zoom:1;}.f-dn{display:none;}.f-db{display:block;}.f-fl{float:left;}.f-fr{float:right;}.f-pr{position:relative;}.f-prz{position:relative;zoom:1;}.f-oh{overflow:hidden;}.f-ff0{font-family:arial;}.f-ff1{font-family:"Microsoft YaHei",arial;}.f-fs1{font-size:12px;}.f-fs2{font-size:14px;}.f-fwn{font-weight:normal;}.f-fwb{font-weight:bold;}.f-tal{text-align:left;}.f-tac{text-align:center;}.f-tar{text-align:right;}.f-taj{text-align:justify;text-justify:inter-ideograph;}.f-vam,.f-vama *{vertical-align:middle;}.f-wsn{word-wrap:normal;white-space:nowrap;}.f-pre{overflow:hidden;text-align:left;white-space:pre-wrap;word-wrap:break-word;word-break:break-all;}.f-wwb{white-space:normal;word-wrap:break-word;word-break:break-all;}.f-ti{overflow:hidden;text-indent:-30000px;}.f-ti2{text-indent:2em;}.f-lhn{line-height:normal;}.f-tdu,.f-tdu:hover{text-decoration:underline;}.f-tdn,.f-tdn:hover{text-decoration:none;}.f-toe{overflow:hidden;word-wrap:normal;white-space:nowrap;text-overflow:ellipsis;}.f-csp{cursor:pointer;}.f-csd{cursor:default;}.f-csh{cursor:help;}.f-csm{cursor:move;}.f-usn{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;}.f-bc{margin-left: auto; margin-right: auto;}.f-db{display:block;}.f-dib{display:inline-block;}.f-dn{display:none;}.f-pr{position: relative;}.f-pa{position: absolute}.f-pf{position: absolute;}.f-lh(@h){height:@h;line-height: @h;}.f-wh(@w){width:@w; height:@w;}.f-fs(@num){font-size:@num} // out: ../css/style.css, compress: true, sourceMap: true
.canvas-html { position: absolute; width:7.5rem; .f-bc; padding:0.35rem; box-sizing: border-box; background: #fff; .f-pf; left:0px; top:0px; .f-cb:after,.f-cbli li:after{display:block;clear:both;visibility:hidden;height:0;overflow:hidden;content:'.';}
.share-title {.f-fs(0.44rem);.f-fwn; margin-bottom: 0.25rem;color: black;} .f-cb,.f-cbli li{zoom:1;}.f-ib{display:inline-block;*display:inline;*zoom:1;}
.share-pic {width:6.8rem;height:auto; margin-bottom: 0.2rem;} .f-dn{display:none;}.f-db{display:block;}.f-fl{float:left;}.f-fr{float:right;}.f-pr{position:relative;}
.share-subtitle {.f-fs(0.36rem); .f-fwn; .f-fl; padding:0.1rem 0; width:50%;color: black;} .f-prz{position:relative;zoom:1;}.f-oh{overflow:hidden;}.f-ff0{font-family:arial;}.f-ff1{font-family:"Microsoft YaHei",arial;}
.f-fs1{font-size:12px;}.f-fs2{font-size:14px;}.f-fwn{font-weight:normal;}.f-fwb{font-weight:bold;}.f-tal{text-align:left;}.f-tac{text-align:center;}
.f-tar{text-align:right;}.f-taj{text-align:justify;text-justify:inter-ideograph;}.f-vam,.f-vama *{vertical-align:middle;}.f-wsn{word-wrap:normal;white-space:nowrap;}
.f-pre{overflow:hidden;text-align:left;white-space:pre-wrap;word-wrap:break-word;word-break:break-all;}.f-wwb{white-space:normal;word-wrap:break-word;word-break:break-all;}
.f-ti{overflow:hidden;text-indent:-30000px;}.f-ti2{text-indent:2em;}.f-lhn{line-height:normal;}.f-tdu,.f-tdu:hover{text-decoration:underline;}
.f-tdn,.f-tdn:hover{text-decoration:none;}.f-toe{overflow:hidden;word-wrap:normal;white-space:nowrap;text-overflow:ellipsis;}
.f-csp{cursor:pointer;}.f-csd{cursor:default;}.f-csh{cursor:help;}.f-csm{cursor:move;}
.f-usn{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;}.f-bc{margin-left: auto; margin-right: auto;}
.f-db{display:block;}.f-dib{display:inline-block;}.f-dn{display:none;}.f-pr{position: relative;}.f-pa{position: absolute}.f-pf{position: absolute;}
.f-lh(@h){height:@h;line-height: @h;}.f-wh(@w){width:@w; height:@w;}.f-fs(@num){font-size:@num}
.canvas-html { width:10rem; .f-bc; padding:0.5rem; background: #fff; .f-pf; left:0px; top:0px;
.share-title {.f-fs(0.56rem);font-weight:600;line-height: .7rem; margin-bottom: 0.25rem;color: black;text-align: left;}
.share-pic {width:9rem;float: left;height:auto; margin-bottom: 0.2rem;}
.share-subtitle {.f-fs(0.38rem); .f-fwn; .f-fl; padding:0.2rem 0; width:50%;color: black;text-align: left;}
.share-author { .f-lh(0.7rem); .f-fr; .share-author { .f-lh(0.7rem); .f-fr;
span {.f-wh(0.7rem); border-radius: 50%; .f-dib; overflow: hidden; vertical-align: middle; span {.f-wh(0.7rem); border-radius: 50%; .f-dib; overflow: hidden; vertical-align: middle;
img {.f-wh(100%);} img {.f-wh(100%);}
} }
b {.f-dib; .f-lh(0.7rem);vertical-align: middle; .f-fs(0.32rem); margin-left: 0.1rem; .f-fwn;color: black;} b {.f-dib; .f-lh(0.7rem);vertical-align: middle; .f-fs(0.38rem); margin-left: 0.1rem; .f-fwn;color: black;}
} }
.share-qrcode { margin-top: 0.3rem; .share-qrcode { margin-top: 0.2rem;
img {.f-wh(1.04rem); .f-fr;} img {.f-wh(1.2rem); .f-fr;}
p{color:#999; margin-right: 0.1rem; .f-fr; .f-tar; .f-fs(0.28rem); margin-top: 0.1rem;line-height: 0.4rem;} p{color:#999; margin-right: 0.1rem; .f-fr; .f-tar; .f-fs(0.28rem); margin-top: 0.2rem;line-height: 0.4rem;}
} }
} }
.canvas-img {.f-pf; left:60px; top:60px; right:60px; bottom:300px; background: #fff;min-height: 500px; overflow: auto; .canvas-img img {
img {.f-bc; .f-db; width:100%; height:100%;} max-width: 100%;
max-height: 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate3d(-50%,-50%,0);
display: block;
}
.canvas-img {.f-pf; left:60px; top:60px; right:60px; bottom:300px; background: none;min-height: 500px; overflow: auto;
text-align: center;
line-height: 5rem;
color: #fff;
font-size: .4rem;
} }
.moban1box{ .moban1box{
position: relative; position: absolute;
width: 80%; width: 10rem;
height: 350px; height: 350px;
overflow: hidden; overflow: hidden;
top:60px; top:0;
left:60px opacity: 0;
left:0;
} }
</style> </style>
\ No newline at end of file
src/pages/index/index.html
...@@ -5,14 +5,14 @@ ...@@ -5,14 +5,14 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>与世童行·直通世界杯篮球嘉年华</title> <title>与世童行·直通世界杯篮球嘉年华</title>
<link rel="stylesheet" href="https://wanda-h5.bdideal.com/video-test/style.css?asdasd"> <link rel="stylesheet" href="https://wanda-h5.bdideal.com/video-test/style.css?asd123asd">
<script type="text/javascript" src="https://js.tarsocial.com/h5stat-2.1.1.vue.js"></script> <script type="text/javascript" src="https://js.tarsocial.com/h5stat-2.1.1.vue.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script> <script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script> <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
<script src="https://cdn.bootcss.com/qrcode-generator/1.4.3/qrcode.min.js"></script> <script src="https://cdn.bootcss.com/qrcode-generator/1.4.3/qrcode.min.js"></script>
<script src="https://wanda-h5.bdideal.com/video-test/shareImg.js?asdasd"></script> <script src="https://wanda-h5.bdideal.com/video-test/shareImg.js?ds141adsaa123"></script>
</head> </head>
<body> <body>
......
src/pages/index/index.js
...@@ -2,7 +2,18 @@ ...@@ -2,7 +2,18 @@
// (runtime-only or standalone) has been set in webpack.base.conf with an alias. // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue' import Vue from 'vue'
// import Vue from "vue/dist/vue.common.js"; // import Vue from "vue/dist/vue.common.js";
Vue.directive('shotclick', {
inserted: function(el, binding) {
el.onmousedown = function() {
var timeNow = new Date().getTime()
document.onmouseup = function(e) {
if (new Date().getTime() - timeNow < 500) {
binding.value(e)
}
}
}
}
})
import App from './App' import App from './App'
import router from './router' import router from './router'
...@@ -41,7 +52,7 @@ window.$eventbus = new Vue(); ...@@ -41,7 +52,7 @@ window.$eventbus = new Vue();
import store from '../../modules/store'; import store from '../../modules/store';
import { import {
Actionsheet Actionsheet
} from 'mint-ui'; } from 'mint-ui';
Vue.component(Actionsheet.name, Actionsheet); Vue.component(Actionsheet.name, Actionsheet);
...@@ -49,111 +60,111 @@ Vue.component(Actionsheet.name, Actionsheet); ...@@ -49,111 +60,111 @@ Vue.component(Actionsheet.name, Actionsheet);
var _hmt = _hmt || []; var _hmt = _hmt || [];
(function() { (function() {
var hm = document.createElement("script"); var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?5d0e793ed747d3c25a756211a97f992d"; hm.src = "https://hm.baidu.com/hm.js?5d0e793ed747d3c25a756211a97f992d";
var s = document.getElementsByTagName("script")[0]; var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s); s.parentNode.insertBefore(hm, s);
})(); })();
router.beforeEach((to, from, next) => { router.beforeEach((to, from, next) => {
function getQuery (key) { function getQuery(key) {
var url = location.search; //获取url中"?"符后的字串 var url = location.search; //获取url中"?"符后的字串
var theRequest = new Object(); var theRequest = new Object();
if (url.indexOf('?') != -1) { if (url.indexOf('?') != -1) {
var str = url.substr(1); var str = url.substr(1);
var strs = str.split('&'); var strs = str.split('&');
for (var i = 0; i < strs.length; i++) { for (var i = 0; i < strs.length; i++) {
theRequest[strs[i].split('=')[0]] = decodeURI(strs[i].split('=')[1]); theRequest[strs[i].split('=')[0]] = decodeURI(strs[i].split('=')[1]);
}
}
if (key) {
return theRequest[key];
} else {
return theRequest;
}
} }
const list = ['/', '/detail', '/imgup'] // 将需要切换效果的路由名称组成一个数组
const toName = to.path // 即将进入的路由名字
const fromName = from.path // 即将离开的路由名字
const toIndex = list.indexOf(toName) // 进入下标
const fromIndex = list.indexOf(fromName) // 离开下标
let direction = ''
if (toIndex > -1 && fromIndex > -1) { // 如果下标都存在
if (toIndex < fromIndex) { // 如果进入的下标小于离开的下标，那么是左滑
direction = 'left'
} else {
direction = 'right' // 如果进入的下标大于离开的下标，那么是右滑
}
} }
if (key) { store.state.viewDirection = direction //这里使用vuex进行赋值
return theRequest[key];
} else {
return theRequest; if (_hmt) {
if (to.path) {
_hmt.push(['_trackPageview', '/#' + to.fullPath]);
}
} }
} if (getQuery('type')) {
const list = ['/', '/detail', '/imgup'] // 将需要切换效果的路由名称组成一个数组 store.commit('setType', getQuery('type'))
const toName = to.path // 即将进入的路由名字 }
const fromName = from.path // 即将离开的路由名字 if (getQuery('code') && !store.state.token) {
const toIndex = list.indexOf(toName) // 进入下标 store.dispatch('getToken', getQuery('code')).then(res => {
const fromIndex = list.indexOf(fromName) // 离开下标 next()
let direction = '' })
} else if (getQuery('token')) {
if (toIndex > -1 && fromIndex > -1) { // 如果下标都存在 store.commit('setToken', getQuery('token'))
if (toIndex < fromIndex) { // 如果进入的下标小于离开的下标，那么是左滑 next()
direction = 'left'
} else { } else {
direction = 'right' // 如果进入的下标大于离开的下标，那么是右滑 next()
} }
}
store.state.viewDirection = direction //这里使用vuex进行赋值 // return next()
})
if (_hmt) { Vue.prototype.$randomText = function() {
if (to.path) { function RandomNumBoth(Min, Max) {
_hmt.push(['_trackPageview', '/#' + to.fullPath]); var Range = Max - Min;
var Rand = Math.random();
var num = Min + Math.round(Rand * Range);
return num;
} }
}
if(getQuery('type')) {
store.commit('setType', getQuery('type'))
}
if(getQuery('code') && !store.state.token) {
store.dispatch('getToken', getQuery('code')).then(res => {
next()
})
} else if (getQuery('token')) {
store.commit('setToken', getQuery('token'))
next()
} else {
next()
}
// return next()
})
var num = RandomNumBoth(1, 11);
var str = null;
switch (num) {
case 2:
str = '携手篮球国际巨星，给孩子一个万众瞩目的童年';
break;
case 3:
str = '携手篮球国际巨星，给孩子一个万众瞩目的童年';
break;
case 7:
str = '携手篮球国际巨星，给孩子一个万众瞩目的童年';
break;
case 10:
str = '携手篮球国际巨星，给孩子一个万众瞩目的童年';
break;
case 11:
str = '携手篮球国际巨星，给孩子一个万众瞩目的童年';
break;
default:
str = '携手篮球国际巨星，给孩子一个万众瞩目的童年';
break;
}
Vue.prototype.$randomText = function () { return str;
function RandomNumBoth(Min, Max) {
var Range = Max - Min;
var Rand = Math.random();
var num = Min + Math.round(Rand * Range);
return num;
}
var num = RandomNumBoth(1, 11);
var str = null;
switch (num) {
case 2:
str = '携手篮球国际巨星，给孩子一个万众瞩目的童年';
break;
case 3:
str = '携手篮球国际巨星，给孩子一个万众瞩目的童年';
break;
case 7:
str = '携手篮球国际巨星，给孩子一个万众瞩目的童年';
break;
case 10:
str = '携手篮球国际巨星，给孩子一个万众瞩目的童年';
break;
case 11:
str = '携手篮球国际巨星，给孩子一个万众瞩目的童年';
break;
default:
str = '携手篮球国际巨星，给孩子一个万众瞩目的童年';
break;
}
return str;
} }
/* eslint-disable no-new */ /* eslint-disable no-new */
new Vue({ new Vue({
el: '#app', el: '#app',
router, router,
components: { components: {
App App
}, },
template: '<App/>' template: '<App/>'
}) })
\ No newline at end of file
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