Skip to content

yanghanwen / wanda-vr

Go to a project
Commit 8f391b6f by junxiang wang
Options

日常备份

parent 6d0da0d1
Showing with 1698 additions and 998 deletions
feature.html deleted 100644 → 0
<!DOCTYPE html>
<html>
<head>
<title>度假到丹寨</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="x-ua-compatible" content="IE=edge" />
<script src="/libs/rem.js"></script>
<style>
*{
margin: 0;
padding: 0;
border:none;
}
.page-wrap{
position: absolute;
width: 100%;
height: 100%;
background-image: url("/images/feature/feature-bg.png");
background-size: cover;
background-repeat: no-repeat;
background-position: bottom center;
}
.logo{
margin:30px 0 0 20px;
height: 14px;
display: block;
}
.title{
position: absolute;
width: 235px;
bottom: 207px;
left: 50%;
transform: translateX(-50%);
}
.mtitle{
position: absolute;
height: 15px;
bottom: 162px;
left: 50%;
transform: translateX(-50%);
}
.go{
position: absolute;
height: 63px;
bottom: 18px;
left: 50%;
transform: translateX(-50%);
}
</style>
<!-- <script src="/libs/vue/vue.js"></script>-->
</head>
<body id="app">
<div class="page-wrap">
<img class="logo" src="/images/load/logo.png" />
<img class="title" src="/images/load/title.png" />
<img class="mtitle" src="/images/load/mtitle.png" />
<img onclick="toPano()" class="go" src="/images/load/go.png" />
</div>
<script>
function toPano() {
location.href = '/vr.html'
}
</script>
</body>
</html>
index.html
...@@ -12,6 +12,10 @@ ...@@ -12,6 +12,10 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
border: none; border: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
} }
.page-wrap { .page-wrap {
...@@ -20,58 +24,83 @@ ...@@ -20,58 +24,83 @@
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
background-image: url("/images/load/hello.png"); background-image: url("./images/load/hello.png");
background-size: cover; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: bottom center; background-position: bottom center;
} }
.logo { .logo {
margin: 30px 0 0 20px; margin: 0.46rem 0 0 0.35rem;
height: 14px; height: 0.43rem;
display: block; display: block;
} }
.title { .title {
position: absolute; position: absolute;
width: 235px; width: 4.24rem;
bottom: 207px; top: 1.88rem;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
} }
.mtitle { .mtitle {
position: absolute; position: absolute;
height: 15px; width: 5.84rem;
bottom: 162px; top:9.04rem;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
} }
.go { .go {
position: absolute; position: absolute;
height: 63px; width: 2.49rem;
bottom: 18px; bottom: 0.31rem;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
} }
</style> </style>
<!-- <script src="/libs/vue/vue.js"></script>--> <script src="./libs/jweixin-1.6.0.js"></script>
<script src="/libs/axios.min.js"></script> <script src="./libs/rem.js"></script>
<!-- <script src="./libs/vue/vue.js"></script>-->
<script src="./libs/axios.min.js"></script>
</head> </head>
<body id="app"> <body id="app">
<div class="page-wrap"> <div class="page-wrap">
<img class="logo" src="/images/load/logo.png"/> <img class="logo" src="./images/logo.png"/>
<img class="title" src="/images/load/title.png"/> <img class="title" src="./images/load/title.png"/>
<img class="mtitle" src="/images/load/mtitle.png"/> <img class="mtitle" src="./images/load/mtitle.png"/>
<img onclick="toPano()" class="go" src="/images/load/go.png"/> <img onclick="toPano()" class="go" src="./images/load/go.png"/>
</div> </div>
<script src="/libs/helper.js"></script> <script src="./libs/helper.js"></script>
<script> <script>
function _init_wx_jssdk(){
if(wx){
wx.updateAppMessageShareData({
title: FRONT_TITLE, // 分享标题
desc: FRONT_DESC, // 分享描述
link: FRONT_URL, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
// imgUrl: currentInfo.small_image, // 分享图标
success: function () {
// 设置成功
}
})
wx.updateTimelineShareData({
title: FRONT_TITLE, // 分享标题
link: FRONT_URL, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
// imgUrl: currentInfo.small_image, // 分享图标
success: function () {
// 设置成功
}
})
}
}
async function init_applcation() { async function init_applcation() {
if(!checkIsLogin()){ if(!checkIsLogin()){
var code = getQueryByString(location.href,'code') var code = getQueryByString(location.href,'code')
//没有登录情况下 //没有登录情况下
if(code){ if(code){
...@@ -83,15 +112,35 @@ async function init_applcation() { ...@@ -83,15 +112,35 @@ async function init_applcation() {
location.href = url location.href = url
return; return;
} }
}else{
await WX_JSSDK_INIT(this).then(wxEnv=>{
console.log(wxEnv)
_init_wx_jssdk()
}).catch(err=>{
console.log(err)
})
} }
} }
init_applcation() init_applcation()
function toPano() { function toPano() {
location.href = '/tour.html' location.href = './tour.html'
} }
</script> </script>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?568952c801c9a9a5e4c9d1755db5f9b2";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
</body> </body>
</html> </html>
libs/helper.js
const apiBaseUrl = 'https://wanda-holiday-tapi.bdideal.com' const apiBaseUrl = 'https://wanda-holiday-tapi.bdideal.com'
//const frontUrl = 'https://wanda-holiday-tapi.bdideal.com' const FRONT_URL = 'https://wanda-h5.bdideal.com/danzhai-holiday-test/index.html' //用于分享出去的链接
const FRONT_TITLE = '度假到丹寨' //默认分享标题
const FRONT_DESC = '旅游小镇步行街全长 1.5 公里，拥有三个主题街区、三座非遗小院、三大斗艺场，以及四大广场，集苗侗非遗体验、演出、文创、美食于一体。这里文化氛围浓厚，月月有主题，周周有活动，定期举行长桌宴、祭尤节、苗族盛装巡游、翻鼓节等盛大活动。' //默认分享概述
/** /**
* 检测是否登录 * 检测是否登录
...@@ -133,15 +137,17 @@ const WX_JSSDK_INIT = (vm, jsApiListList) => new Promise((resolve, reject) => { ...@@ -133,15 +137,17 @@ const WX_JSSDK_INIT = (vm, jsApiListList) => new Promise((resolve, reject) => {
// let {origin,pathname} = location // let {origin,pathname} = location
// `${origin}${pathname}`,// // `${origin}${pathname}`,//
$get('/wechat/info?url='+encodeURI(location.href.split('#')[0])).then((res) => {
var path = location.href.split('#')[0]
$get('/wechat/info?url='+path).then((res) => {
const config = res.data const config = res.data
console.log(res) console.log(res)
// 线上环境，听服务器的，本地的一律调试 // 线上环境，听服务器的，本地的一律调试
const debug = !!res.data.debug// process.env.NODE_ENV === 'production'?config.debug?true:false:true const debug = !!res.data.debug// process.env.NODE_ENV === 'production'?config.debug?true:false:true
const jsApiList = jsApiListList || ['onMenuShareAppMessage', 'onMenuShareTimeline', 'openLocation', 'getLocation', 'scanQRCode', 'chooseImage', 'previewImage', 'uploadImage'] // const jsApiList = jsApiListList || ['onMenuShareAppMessage', 'onMenuShareTimeline', 'openLocation', 'getLocation', 'scanQRCode', 'chooseImage', 'previewImage', 'uploadImage']
// ['chooseImage', 'previewImage', 'uploadImage', 'openLocation','getLocation', 'chooseWXPay', 'getSystemInfo', 'onMenuShareAppMessage','onMenuShareTimeline','scanQRCode']; // ['chooseImage', 'previewImage', 'uploadImage', 'openLocation','getLocation', 'chooseWXPay', 'getSystemInfo', 'onMenuShareAppMessage','onMenuShareTimeline','scanQRCode'];
const { noncestr, timestamp, appId, signature } = config const { nonceStr, timestamp, appId, signature,jsApiList } = config
setWxConfig({ debug, appId, timestamp,nonceStr, signature, jsApiList }) setWxConfig({ debug, appId, timestamp,nonceStr, signature, jsApiList })
......
libs/jweixin-1.6.0.js 0 → 100644
!function(e,n){"function"==typeof define&&(define.amd||define.cmd)?define(function(){return n(e)}):n(e,!0)}(this,function(o,e){if(!o.jWeixin){var n,c={config:"preVerifyJSAPI",onMenuShareTimeline:"menu:share:timeline",onMenuShareAppMessage:"menu:share:appmessage",onMenuShareQQ:"menu:share:qq",onMenuShareWeibo:"menu:share:weiboApp",onMenuShareQZone:"menu:share:QZone",previewImage:"imagePreview",getLocation:"geoLocation",openProductSpecificView:"openProductViewWithPid",addCard:"batchAddCard",openCard:"batchViewCard",chooseWXPay:"getBrandWCPayRequest",openEnterpriseRedPacket:"getRecevieBizHongBaoRequest",startSearchBeacons:"startMonitoringBeacons",stopSearchBeacons:"stopMonitoringBeacons",onSearchBeacons:"onBeaconsInRange",consumeAndShareCard:"consumedShareCard",openAddress:"editAddress"},a=function(){var e={};for(var n in c)e[c[n]]=n;return e}(),i=o.document,t=i.title,r=navigator.userAgent.toLowerCase(),s=navigator.platform.toLowerCase(),d=!(!s.match("mac")&&!s.match("win")),u=-1!=r.indexOf("wxdebugger"),l=-1!=r.indexOf("micromessenger"),p=-1!=r.indexOf("android"),f=-1!=r.indexOf("iphone")||-1!=r.indexOf("ipad"),m=(n=r.match(/micromessenger\/(\d+\.\d+\.\d+)/)||r.match(/micromessenger\/(\d+\.\d+)/))?n[1]:"",g={initStartTime:L(),initEndTime:0,preVerifyStartTime:0,preVerifyEndTime:0},h={version:1,appId:"",initTime:0,preVerifyTime:0,networkType:"",isPreVerifyOk:1,systemType:f?1:p?2:-1,clientVersion:m,url:encodeURIComponent(location.href)},v={},S={_completes:[]},y={state:0,data:{}};O(function(){g.initEndTime=L()});var I=!1,_=[],w={config:function(e){B("config",v=e);var t=!1!==v.check;O(function(){if(t)M(c.config,{verifyJsApiList:C(v.jsApiList),verifyOpenTagList:C(v.openTagList)},function(){S._complete=function(e){g.preVerifyEndTime=L(),y.state=1,y.data=e},S.success=function(e){h.isPreVerifyOk=0},S.fail=function(e){S._fail?S._fail(e):y.state=-1};var t=S._completes;return t.push(function(){!function(){if(!(d||u||v.debug||m<"6.0.2"||h.systemType<0)){var i=new Image;h.appId=v.appId,h.initTime=g.initEndTime-g.initStartTime,h.preVerifyTime=g.preVerifyEndTime-g.preVerifyStartTime,w.getNetworkType({isInnerInvoke:!0,success:function(e){h.networkType=e.networkType;var n="https://open.weixin.qq.com/sdk/report?v="+h.version+"&o="+h.isPreVerifyOk+"&s="+h.systemType+"&c="+h.clientVersion+"&a="+h.appId+"&n="+h.networkType+"&i="+h.initTime+"&p="+h.preVerifyTime+"&u="+h.url;i.src=n}})}}()}),S.complete=function(e){for(var n=0,i=t.length;n<i;++n)t[n]();S._completes=[]},S}()),g.preVerifyStartTime=L();else{y.state=1;for(var e=S._completes,n=0,i=e.length;n<i;++n)e[n]();S._completes=[]}}),w.invoke||(w.invoke=function(e,n,i){o.WeixinJSBridge&&WeixinJSBridge.invoke(e,x(n),i)},w.on=function(e,n){o.WeixinJSBridge&&WeixinJSBridge.on(e,n)})},ready:function(e){0!=y.state?e():(S._completes.push(e),!l&&v.debug&&e())},error:function(e){m<"6.0.2"||(-1==y.state?e(y.data):S._fail=e)},checkJsApi:function(e){M("checkJsApi",{jsApiList:C(e.jsApiList)},(e._complete=function(e){if(p){var n=e.checkResult;n&&(e.checkResult=JSON.parse(n))}e=function(e){var n=e.checkResult;for(var i in n){var t=a[i];t&&(n[t]=n[i],delete n[i])}return e}(e)},e))},onMenuShareTimeline:function(e){P(c.onMenuShareTimeline,{complete:function(){M("shareTimeline",{title:e.title||t,desc:e.title||t,img_url:e.imgUrl||"",link:e.link||location.href,type:e.type||"link",data_url:e.dataUrl||""},e)}},e)},onMenuShareAppMessage:function(n){P(c.onMenuShareAppMessage,{complete:function(e){"favorite"===e.scene?M("sendAppMessage",{title:n.title||t,desc:n.desc||"",link:n.link||location.href,img_url:n.imgUrl||"",type:n.type||"link",data_url:n.dataUrl||""}):M("sendAppMessage",{title:n.title||t,desc:n.desc||"",link:n.link||location.href,img_url:n.imgUrl||"",type:n.type||"link",data_url:n.dataUrl||""},n)}},n)},onMenuShareQQ:function(e){P(c.onMenuShareQQ,{complete:function(){M("shareQQ",{title:e.title||t,desc:e.desc||"",img_url:e.imgUrl||"",link:e.link||location.href},e)}},e)},onMenuShareWeibo:function(e){P(c.onMenuShareWeibo,{complete:function(){M("shareWeiboApp",{title:e.title||t,desc:e.desc||"",img_url:e.imgUrl||"",link:e.link||location.href},e)}},e)},onMenuShareQZone:function(e){P(c.onMenuShareQZone,{complete:function(){M("shareQZone",{title:e.title||t,desc:e.desc||"",img_url:e.imgUrl||"",link:e.link||location.href},e)}},e)},updateTimelineShareData:function(e){M("updateTimelineShareData",{title:e.title,link:e.link,imgUrl:e.imgUrl},e)},updateAppMessageShareData:function(e){M("updateAppMessageShareData",{title:e.title,desc:e.desc,link:e.link,imgUrl:e.imgUrl},e)},startRecord:function(e){M("startRecord",{},e)},stopRecord:function(e){M("stopRecord",{},e)},onVoiceRecordEnd:function(e){P("onVoiceRecordEnd",e)},playVoice:function(e){M("playVoice",{localId:e.localId},e)},pauseVoice:function(e){M("pauseVoice",{localId:e.localId},e)},stopVoice:function(e){M("stopVoice",{localId:e.localId},e)},onVoicePlayEnd:function(e){P("onVoicePlayEnd",e)},uploadVoice:function(e){M("uploadVoice",{localId:e.localId,isShowProgressTips:0==e.isShowProgressTips?0:1},e)},downloadVoice:function(e){M("downloadVoice",{serverId:e.serverId,isShowProgressTips:0==e.isShowProgressTips?0:1},e)},translateVoice:function(e){M("translateVoice",{localId:e.localId,isShowProgressTips:0==e.isShowProgressTips?0:1},e)},chooseImage:function(e){M("chooseImage",{scene:"1|2",count:e.count||9,sizeType:e.sizeType||["original","compressed"],sourceType:e.sourceType||["album","camera"]},(e._complete=function(e){if(p){var n=e.localIds;try{n&&(e.localIds=JSON.parse(n))}catch(e){}}},e))},getLocation:function(e){},previewImage:function(e){M(c.previewImage,{current:e.current,urls:e.urls},e)},uploadImage:function(e){M("uploadImage",{localId:e.localId,isShowProgressTips:0==e.isShowProgressTips?0:1},e)},downloadImage:function(e){M("downloadImage",{serverId:e.serverId,isShowProgressTips:0==e.isShowProgressTips?0:1},e)},getLocalImgData:function(e){!1===I?(I=!0,M("getLocalImgData",{localId:e.localId},(e._complete=function(e){if(I=!1,0<_.length){var n=_.shift();wx.getLocalImgData(n)}},e))):_.push(e)},getNetworkType:function(e){M("getNetworkType",{},(e._complete=function(e){e=function(e){var n=e.errMsg;e.errMsg="getNetworkType:ok";var i=e.subtype;if(delete e.subtype,i)e.networkType=i;else{var t=n.indexOf(":"),o=n.substring(t+1);switch(o){case"wifi":case"edge":case"wwan":e.networkType=o;break;default:e.errMsg="getNetworkType:fail"}}return e}(e)},e))},openLocation:function(e){M("openLocation",{latitude:e.latitude,longitude:e.longitude,name:e.name||"",address:e.address||"",scale:e.scale||28,infoUrl:e.infoUrl||""},e)},getLocation:function(e){M(c.getLocation,{type:(e=e||{}).type||"wgs84"},(e._complete=function(e){delete e.type},e))},hideOptionMenu:function(e){M("hideOptionMenu",{},e)},showOptionMenu:function(e){M("showOptionMenu",{},e)},closeWindow:function(e){M("closeWindow",{},e=e||{})},hideMenuItems:function(e){M("hideMenuItems",{menuList:e.menuList},e)},showMenuItems:function(e){M("showMenuItems",{menuList:e.menuList},e)},hideAllNonBaseMenuItem:function(e){M("hideAllNonBaseMenuItem",{},e)},showAllNonBaseMenuItem:function(e){M("showAllNonBaseMenuItem",{},e)},scanQRCode:function(e){M("scanQRCode",{needResult:(e=e||{}).needResult||0,scanType:e.scanType||["qrCode","barCode"]},(e._complete=function(e){if(f){var n=e.resultStr;if(n){var i=JSON.parse(n);e.resultStr=i&&i.scan_code&&i.scan_code.scan_result}}},e))},openAddress:function(e){M(c.openAddress,{},(e._complete=function(e){e=function(e){return e.postalCode=e.addressPostalCode,delete e.addressPostalCode,e.provinceName=e.proviceFirstStageName,delete e.proviceFirstStageName,e.cityName=e.addressCitySecondStageName,delete e.addressCitySecondStageName,e.countryName=e.addressCountiesThirdStageName,delete e.addressCountiesThirdStageName,e.detailInfo=e.addressDetailInfo,delete e.addressDetailInfo,e}(e)},e))},openProductSpecificView:function(e){M(c.openProductSpecificView,{pid:e.productId,view_type:e.viewType||0,ext_info:e.extInfo},e)},addCard:function(e){for(var n=e.cardList,i=[],t=0,o=n.length;t<o;++t){var r=n[t],a={card_id:r.cardId,card_ext:r.cardExt};i.push(a)}M(c.addCard,{card_list:i},(e._complete=function(e){var n=e.card_list;if(n){for(var i=0,t=(n=JSON.parse(n)).length;i<t;++i){var o=n[i];o.cardId=o.card_id,o.cardExt=o.card_ext,o.isSuccess=!!o.is_succ,delete o.card_id,delete o.card_ext,delete o.is_succ}e.cardList=n,delete e.card_list}},e))},chooseCard:function(e){M("chooseCard",{app_id:v.appId,location_id:e.shopId||"",sign_type:e.signType||"SHA1",card_id:e.cardId||"",card_type:e.cardType||"",card_sign:e.cardSign,time_stamp:e.timestamp+"",nonce_str:e.nonceStr},(e._complete=function(e){e.cardList=e.choose_card_info,delete e.choose_card_info},e))},openCard:function(e){for(var n=e.cardList,i=[],t=0,o=n.length;t<o;++t){var r=n[t],a={card_id:r.cardId,code:r.code};i.push(a)}M(c.openCard,{card_list:i},e)},consumeAndShareCard:function(e){M(c.consumeAndShareCard,{consumedCardId:e.cardId,consumedCode:e.code},e)},chooseWXPay:function(e){M(c.chooseWXPay,V(e),e)},openEnterpriseRedPacket:function(e){M(c.openEnterpriseRedPacket,V(e),e)},startSearchBeacons:function(e){M(c.startSearchBeacons,{ticket:e.ticket},e)},stopSearchBeacons:function(e){M(c.stopSearchBeacons,{},e)},onSearchBeacons:function(e){P(c.onSearchBeacons,e)},openEnterpriseChat:function(e){M("openEnterpriseChat",{useridlist:e.userIds,chatname:e.groupName},e)},launchMiniProgram:function(e){M("launchMiniProgram",{targetAppId:e.targetAppId,path:function(e){if("string"==typeof e&&0<e.length){var n=e.split("?")[0],i=e.split("?")[1];return n+=".html",void 0!==i?n+"?"+i:n}}(e.path),envVersion:e.envVersion},e)},openBusinessView:function(e){M("openBusinessView",{businessType:e.businessType,queryString:e.queryString||"",envVersion:e.envVersion},(e._complete=function(n){if(p){var e=n.extraData;if(e)try{n.extraData=JSON.parse(e)}catch(e){n.extraData={}}}},e))},miniProgram:{navigateBack:function(e){e=e||{},O(function(){M("invokeMiniProgramAPI",{name:"navigateBack",arg:{delta:e.delta||1}},e)})},navigateTo:function(e){O(function(){M("invokeMiniProgramAPI",{name:"navigateTo",arg:{url:e.url}},e)})},redirectTo:function(e){O(function(){M("invokeMiniProgramAPI",{name:"redirectTo",arg:{url:e.url}},e)})},switchTab:function(e){O(function(){M("invokeMiniProgramAPI",{name:"switchTab",arg:{url:e.url}},e)})},reLaunch:function(e){O(function(){M("invokeMiniProgramAPI",{name:"reLaunch",arg:{url:e.url}},e)})},postMessage:function(e){O(function(){M("invokeMiniProgramAPI",{name:"postMessage",arg:e.data||{}},e)})},getEnv:function(e){O(function(){e({miniprogram:"miniprogram"===o.__wxjs_environment})})}}},T=1,k={};return i.addEventListener("error",function(e){if(!p){var n=e.target,i=n.tagName,t=n.src;if("IMG"==i||"VIDEO"==i||"AUDIO"==i||"SOURCE"==i)if(-1!=t.indexOf("wxlocalresource://")){e.preventDefault(),e.stopPropagation();var o=n["wx-id"];if(o||(o=T++,n["wx-id"]=o),k[o])return;k[o]=!0,wx.ready(function(){wx.getLocalImgData({localId:t,success:function(e){n.src=e.localData}})})}}},!0),i.addEventListener("load",function(e){if(!p){var n=e.target,i=n.tagName;n.src;if("IMG"==i||"VIDEO"==i||"AUDIO"==i||"SOURCE"==i){var t=n["wx-id"];t&&(k[t]=!1)}}},!0),e&&(o.wx=o.jWeixin=w),w}function M(n,e,i){o.WeixinJSBridge?WeixinJSBridge.invoke(n,x(e),function(e){A(n,e,i)}):B(n,i)}function P(n,i,t){o.WeixinJSBridge?WeixinJSBridge.on(n,function(e){t&&t.trigger&&t.trigger(e),A(n,e,i)}):B(n,t||i)}function x(e){return(e=e||{}).appId=v.appId,e.verifyAppId=v.appId,e.verifySignType="sha1",e.verifyTimestamp=v.timestamp+"",e.verifyNonceStr=v.nonceStr,e.verifySignature=v.signature,e}function V(e){return{timeStamp:e.timestamp+"",nonceStr:e.nonceStr,package:e.package,paySign:e.paySign,signType:e.signType||"SHA1"}}function A(e,n,i){"openEnterpriseChat"!=e&&"openBusinessView"!==e||(n.errCode=n.err_code),delete n.err_code,delete n.err_desc,delete n.err_detail;var t=n.errMsg;t||(t=n.err_msg,delete n.err_msg,t=function(e,n){var i=e,t=a[i];t&&(i=t);var o="ok";if(n){var r=n.indexOf(":");"confirm"==(o=n.substring(r+1))&&(o="ok"),"failed"==o&&(o="fail"),-1!=o.indexOf("failed_")&&(o=o.substring(7)),-1!=o.indexOf("fail_")&&(o=o.substring(5)),"access denied"!=(o=(o=o.replace(/_/g," ")).toLowerCase())&&"no permission to execute"!=o||(o="permission denied"),"config"==i&&"function not exist"==o&&(o="ok"),""==o&&(o="fail")}return n=i+":"+o}(e,t),n.errMsg=t),(i=i||{})._complete&&(i._complete(n),delete i._complete),t=n.errMsg||"",v.debug&&!i.isInnerInvoke&&alert(JSON.stringify(n));var o=t.indexOf(":");switch(t.substring(o+1)){case"ok":i.success&&i.success(n);break;case"cancel":i.cancel&&i.cancel(n);break;default:i.fail&&i.fail(n)}i.complete&&i.complete(n)}function C(e){if(e){for(var n=0,i=e.length;n<i;++n){var t=e[n],o=c[t];o&&(e[n]=o)}return e}}function B(e,n){if(!(!v.debug||n&&n.isInnerInvoke)){var i=a[e];i&&(e=i),n&&n._complete&&delete n._complete,console.log('"'+e+'",',n||"")}}function L(){return(new Date).getTime()}function O(e){l&&(o.WeixinJSBridge?e():i.addEventListener&&i.addEventListener("WeixinJSBridgeReady",e,!1))}});
\ No newline at end of file
libs/swiper3d/src/js/3dSwiper.js
...@@ -22,6 +22,9 @@ class Swiper { ...@@ -22,6 +22,9 @@ class Swiper {
isAddDot = false, isAddDot = false,
startP, disX, disY, index; startP, disX, disY, index;
var VUEInstance = config.vm
if (lis.length < 3) { if (lis.length < 3) {
throw ("image number need 3+"); throw ("image number need 3+");
} }
...@@ -121,6 +124,7 @@ class Swiper { ...@@ -121,6 +124,7 @@ class Swiper {
} }
dots[index].className = 'active'; dots[index].className = 'active';
} }
VUEInstance.swiperActive = index
} }
function setTimer() { function setTimer() {
if (autoPlay) { if (autoPlay) {
......
route.html
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>度假到丹寨</title> <title>度假到丹寨</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"/>
<meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black" /> <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<meta http-equiv="x-ua-compatible" content="IE=edge" /> <meta http-equiv="x-ua-compatible" content="IE=edge"/>
<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> <script src="./libs/jweixin-1.6.0.js"></script>
<script src="/libs/rem.js"></script> <script src="./libs/rem.js"></script>
<script src="/libs/vue/vue.js"></script> <script src="./libs/vue/vue.js"></script>
<script src="/libs/axios.min.js"></script> <script src="./libs/axios.min.js"></script>
<style> <style>
#canvasEle{ #canvasEle {
position: absolute; position: fixed;
left: 100%; left: 200%;
} width: 652px;
@font-face { height: 1066px;
font-family: myFont; z-index: -3;
src: url('/font/ltzk.ttf'); }
}
*{ @font-face {
margin: 0; font-family: myFont;
padding: 0; src: url('./font/ltzk.ttf');
border:none; }
}
.page-wrap{ * {
position: fixed; margin: 0;
width: 100%; padding: 0;
height: 100%; border: none;
/*background-image: url("/images/show/fupin.png");*/ -webkit-user-select: none;
background-size: cover; -moz-user-select: none;
background-repeat: no-repeat; -ms-user-select: none;
background-position: bottom center; user-select: none;
padding-bottom: 1.14rem; }
box-sizing: border-box;
display: flex; .page-wrap {
flex-direction: column; position: fixed;
width: 100%;
} height: 100%;
/*background-image: url("./images/show/fupin.png");*/
.nav-list{ background-size: cover;
margin-top: 0.35rem; background-repeat: no-repeat;
width: 100%; background-position: bottom center;
white-space: nowrap; / / padding-bottom: 1.14 rem;
height: 1.85rem; box-sizing: border-box;
overflow-y: hidden; display: flex;
overflow-x: scroll; flex-direction: column;
-webkit-overflow-scrolling: touch;
} }
.nav-list::-webkit-scrollbar{
display: none; .nav-list {
} margin-top: 0.35rem;
.nav-item{ width: 100%;
display: inline-block; white-space: nowrap;
width: 1.14rem; height: 1.85rem;
height: 1.85rem; overflow-y: hidden;
margin-left: 0.42rem; overflow-x: scroll;
border-radius: 0.1rem; -webkit-overflow-scrolling: touch;
overflow: hidden; }
}
.nav-item:last-child{ .nav-list::-webkit-scrollbar {
margin-right: 0.42rem; display: none;
} }
.nav-item.active{
background: rgba(23, 40, 63, 0.3); .nav-item {
} display: inline-block;
.nav-item__iconbox{ width: 1.14rem;
margin: 0.07rem auto auto; height: 1.85rem;
width: 1rem; margin-left: 0.42rem;
height: 1rem; border-radius: 0.1rem;
position: relative; overflow: hidden;
} }
.nav-item__icon{
position: absolute; .nav-item:last-child {
left: 50%; margin-right: 0.42rem;
top: 50%; }
vertical-align: top;
transform: translate(-50%,-50%); .nav-item.active {
width: 0.95rem; background: rgba(23, 40, 63, 0.3);
height: 0.95rem; }
overflow: hidden;
} .nav-item__iconbox {
.nav-item__mtitle{ margin: 0.07rem auto auto;
margin-top: 0.1rem; width: 1rem;
text-align: center; height: 1rem;
font-size: 0.26rem; position: relative;
line-height: 0.28rem; }
color: #fff;
width: 1.14rem; .nav-item__icon {
display: block; position: absolute;
white-space: normal; left: 50%;
} top: 50%;
.mtitle{ vertical-align: top;
font-family: myFont; transform: translate(-50%, -50%);
margin-top: 0.57rem; width: 0.95rem;
color: #fff; height: 0.95rem;
font-size: 0.72rem; overflow: hidden;
text-align: center; }
position: relative;
.nav-item__mtitle {
} margin-top: 0.1rem;
.mtitle__icon{ text-align: center;
position: absolute; font-size: 0.26rem;
right: 0.43rem; line-height: 0.28rem;
top: 50%; height: 0.56rem;
transform: translateY(-50%); color: #fff;
width: 0.6rem; width: 1.14rem;
height: 0.6rem; display: block;
} white-space: normal;
.thumb{ }
padding: 0.45rem 0 0.54rem;
text-align: center; .mtitle {
} font-family: myFont;
.thumb__img{ margin-top: 0.57rem;
width: 6.7rem; color: #fff;
vertical-align: top; font-size: 0.72rem;
} text-align: center;
.content{ position: relative;
width: 6.7rem;
margin: 0 auto; }
flex:1;
overflow-y: scroll; .mtitle__icon {
-webkit-overflow-scrolling: touch; position: absolute;
} right: 0.43rem;
.content::-webkit-scrollbar{ top: 50%;
display: none; transform: translateY(-50%);
} width: 0.6rem;
.content__text{ height: 0.6rem;
font-size: 0.3rem; }
color: #fff;
line-height: 0.55rem; .thumb {
} padding: 0.45rem 0 0.54rem;
text-align: center;
.bottom{ }
height: 1.14rem;
position: fixed; .thumb__img {
left: 0; width: 6.7rem;
bottom:0; vertical-align: top;
width: 100%; }
/*background-image: url("/images/show/fupin.png");*/
background-size: cover; .content {
background-repeat: no-repeat; width: 6.7rem;
background-position: bottom center; margin: 0 auto;
} flex: 1;
.bottom__icon{ overflow-y: scroll;
width: 0.63rem; -webkit-overflow-scrolling: touch;
height: 0.63rem; }
position: absolute;
right: 0.41rem; .content::-webkit-scrollbar {
bottom:0.51rem; display: none;
} }
.modal-wrap{
background: rgba(0,0,0,.7); .content__text {
position: fixed; font-size: 0.3rem;
z-index: 3; color: #fff;
width: 100%; line-height: 0.55rem;
height: 100%; }
}
.modal-container{ .bottom {
height: 1.14rem;
} position: fixed;
.poster{ left: 0;
width: 6.51rem; bottom: 0;
height: 10.65rem; width: 100%;
position: relative; background: none;
margin: 0.56rem auto 0.25rem; z-index: 999;
} /*background-image: url("./images/show/fupin.png");*/
.poster-img{ /*background-size: cover;*/
width: 100%; /*background-repeat: no-repeat;*/
height: 100%; /*background-position: bottom center;*/
} }
.change-poster-btn{
position: absolute; .bottom__icon {
right: -0.25rem; width: 0.63rem;
top: -0.32rem; height: 0.63rem;
width: 2.07rem; position: absolute;
height: 0.66rem; right: 0.41rem;
background: #FFFFFF; bottom: 0.51rem;
font-size: 0.3rem; }
font-weight: 400;
color: #333333; .modal-wrap {
line-height: 0.66rem; background: rgba(0, 0, 0, .7);
border-radius: 0.33rem; position: fixed;
text-align: center; z-index: 3;
} width: 100%;
.poster-action-box{ height: 100%;
width: 6.51rem; }
margin: 0 auto;
display: flex; .modal-container {
justify-content:space-between;
align-items: center; }
}
.poster-action-btn{ .poster {
width: 2.07rem; width: 6.51rem;
height: 0.66rem; height: 10.65rem;
background: #FFFFFF; position: relative;
font-size: 0.3rem; margin: 0.56rem auto 0.25rem;
font-weight: 400; }
color: #333333;
line-height: 0.66rem; .poster-img {
border-radius: 0.33rem; width: 100%;
text-align: center; height: 100%;
} }
.content__text{ .change-poster-btn {
color: #fff; position: absolute;
font-size: 0.29rem; right: 0.32rem;
} top: 0.3rem;
.channel-title{ width: 2.08rem;
text-align: center; height: 0.67rem;
font-family: myFont; background: #FFFFFF;
background: #72C1F2; font-size: 0.3rem;
width: 6.69rem; font-weight: 400;
font-size: 0.4rem; color: #343434;;
} line-height: 0.66rem;
border-radius: 0.33rem;
.channel-text{ text-align: center;
font-size: 0.29rem; z-index: 9;
font-weight: 300; }
color: #FEFEFE;
line-height: 0.48rem; .poster-action-box {
padding: 0.15rem 0.15rem 0.5rem; width: 6.51rem;
border-left: 1px solid #fff; margin: 0 auto;
border-right: 1px solid #fff; display: flex;
} justify-content: center;
align-items: center;
.channel-text:last-child{ }
border-bottom: 1px solid #fff;
margin-bottom: 0.48rem; .poster-action-btn {
} height: 0.66rem;
padding: 0 0.33rem;
@font-face { background: rgba(255,255,255,.8);
font-family: myFont; font-size: 0.3rem;
src: url('/font/ltzk.ttf'); font-weight: 400;
} color: #333333;
.route-title{ line-height: 0.66rem;
margin-top: 0.5rem; border-radius: 0.33rem;
width: 6.69rem; text-align: center;
height: 0.8rem; }
background: #38AAF0;
border-radius: 1rem 1rem 0rem 0rem;
font-family: myFont;
text-align: center; .poster-content{
line-height: 0.8rem; position: absolute;
font-size: 0.5rem; width: 100%;
} height: 100%;
top: 0;
.route-play-tag{ left: 0;
width: 0.24rem; z-index: 3;
height: 0.24rem; }
background: #FFFFFF; .poster-content__title{
} margin-top: 1.14rem;
.route-play-title{ margin-left: 0.43rem;
margin-left: 0.3rem; font-size: 0.53rem;
} font-weight: bold;
color: #FFFFFF;
.channel-detail-title{ line-height: 0.8rem;
display: flex; }
align-items: center; .poster-content__content{
} width: 4.12rem;
.channel-detail-text{ margin-top: 0.35rem;
color: #FFFFFF; margin-left: 0.43rem;
line-height: 0.6rem; font-size: 0.3rem;
opacity: 0.78; font-weight: bold;
padding-left: 0.52rem; color: #FFFFFF;
} line-height: 0.36rem;
</style> }
.poster-content__qrcode{
width: 1.07rem;
height: 1.07rem;
position: absolute;
left: 0.44rem;
bottom: 0.36rem;
}
.poster-content__userinfo{
position: absolute;
right: 0.47rem;
bottom: 0.32rem;
display: flex;
align-items: center;
}
.poster-content__userinfo .headimg{
width: 0.54rem;
height: 0.54rem;
background: #FFFFFF;
border-radius: 50%;
}
.poster-content__userinfo .tip{
font-size: 0.24rem;
font-weight: bold;
color: #FFFFFF;
line-height: 0.29rem;
margin-left: 0.11rem;
}
.content__text {
color: #fff;
font-size: 0.29rem;
}
.channel-title {
text-align: center;
font-family: myFont;
background: #72C1F2;
width: 6.69rem;
font-size: 0.4rem;
}
.channel-text {
font-size: 0.29rem;
font-weight: 300;
color: #FEFEFE;
line-height: 0.48rem;
padding: 0.15rem 0.15rem 0.3rem;
border-left: 1px solid rgba(255, 255, 255, .35);
border-right: 1px solid rgba(255, 255, 255, .35);
box-sizing: border-box;
width: 6.69rem;
}
.channel-text:last-child {
border-bottom: 1px solid rgba(255, 255, 255, .35);
margin-bottom: 0.48rem;
}
.route-title {
margin-top: 0.5rem;
width: 6.69rem;
height: 0.8rem;
background: #38AAF0;
border-radius: 1rem 1rem 0rem 0rem;
font-family: myFont;
text-align: center;
line-height: 0.8rem;
font-size: 0.5rem;
}
.route-play-tag {
width: 0.24rem;
height: 0.24rem;
background: #FFFFFF;
}
.route-play-title {
margin-left: 0.3rem;
}
.channel-detail-title {
display: flex;
align-items: center;
}
.channel-detail-text {
color: #FFFFFF;
line-height: 0.6rem;
opacity: 0.78;
padding-left: 0.52rem;
}
.pic-modal-wrap{
background: #000000;
position: fixed;
z-index: 1004;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
user-select:none;
}
.pic-modal-wrap .pic{
user-select:none;
}
</style>
</head> </head>
<body> <body>
<!--:style="{backgroundImage:'url('+navs[activeIdx].bg_image+')'}"--> <!--:style="{backgroundImage:'url('+navs[activeIdx].bg_image+')'}"-->
<div id="app" class="page-wrap" v-if="loadReady" :class="{fixed:showPoster}" :style="{backgroundImage:'url('+navs[activeIdx].bg_image+')'}" > <div id="app" class="page-wrap" v-if="loadReady" :class="{fixed:showPoster}"
<canvas id="canvasEle"></canvas> :style="{backgroundImage:'url('+navs[activeIdx].bg_image+')'}">
<div class="nav-list">
<div class="nav-item" v-for="(item,idx) in navs" :key="idx" :class="{active:idx===activeIdx}" @click="setActive(idx,item)"> <div class="nav-list">
<div class="nav-item__iconbox"> <div class="nav-item" v-for="(item,idx) in navs" :key="idx" :class="{active:idx===activeIdx}"
<img :src="item.small_image" class="nav-item__icon" /> @click="setActive(idx,item)">
</div> <div class="nav-item__iconbox">
<div class="nav-item__mtitle">{{item.title}}</div> <img v-if="idx===activeIdx" :src="item.icona" class="nav-item__icon" />
</div> <img v-else :src="item.icon" class="nav-item__icon" />
</div> <!-- <img :src="item.small_image" class="nav-item__icon"/>-->
<!-- <div class="mtitle">--> </div>
<!-- {{navs[activeIdx].title}}--> <div class="nav-item__mtitle">{{item.title}}</div>
<!-- </div>--> </div>
</div>
<div class="content">
<div v-if="activeIdx===0" class="content">
<div class="content__text"> <div class="content__text">
<div class="route-title">{{navs[activeIdx].title}}</div> <div class="route-title">{{navs[activeIdx].title}}</div>
<div class="channel-title"> <div class="channel-title">
<span>第一天</span> <span>第一天</span>
</div> </div>
<div class="channel-text"> <div class="channel-text">
<div class="channel-detail-title"> <div class="channel-detail-title">
<div class="route-play-tag"></div> <div class="route-play-tag"></div>
<div class="route-play-title">白天</div> <div class="route-play-title">白天</div>
</div> </div>
<div class="channel-detail-text"> <div class="channel-detail-text">
扶贫茶园茶旅体验：采茶、炒茶、品茶<br/> 扶贫茶园茶旅体验：采茶、炒茶、品茶<br/>
小镇打卡：东湖大水车、丹调图书馆、轮值镇长展示中心<br/> 小镇打卡：东湖大水车、丹调图书馆、轮值镇长展示中心<br/>
小镇体验：蜡染体验、玻璃栈道、悬崖秋千、水上游船等<br/> 小镇体验：蜡染体验、玻璃栈道、悬崖秋千、水上游船等<br/>
锦华酒店温泉体验<br/> 锦华酒店温泉体验<br/>
</div> </div>
</div> <div class="channel-detail-title">
<div class="channel-title"> <div class="route-play-tag"></div>
<span>第二天</span> <div class="route-play-title">晚上</div>
</div> </div>
<div class="channel-text"> <div class="channel-detail-text">
到达贵阳龙洞堡机场后，从机场 B1 层乘高铁至三都县站。到达三都县高铁站后，可选择小巴或打车前往丹寨万达小镇，车程大约 35 分钟； 特色酸汤鱼 - 观看《锦秀丹寨》- 篝火晚会
</div> </div>
</div> </div>
<!-- <div class="content__text" v-html="navs[activeIdx].content"></div>--> <div class="channel-title">
</div> <span>第二天</span>
<!----> </div>
<div class="bottom" :style="{backgroundImage:'url('+navs[activeIdx].bg_image+')'}"> <div class="channel-text">
<img @click="bindShareEvent" class="bottom__icon" src="/images/show/share.png" /> 环湖步道晨跑 - 高要梯田观景台 - 探访金汞矿
</div> </div>
<div class="modal-wrap" v-if="showPoster" @click="closeModal"> </div>
<div class="modal-container"> </div>
<div class="poster"> <div v-if="activeIdx===1" class="content">
<img :src="posterUrl" class="poster-img" /> <div class="content__text">
<div @click.stop="refreshShareText" class="change-poster-btn">换一换</div> <div class="route-title">{{navs[activeIdx].title}}</div>
</div> <div class="channel-title">
<div class="poster-action-box"> <span>第一天</span>
<div @click.stop class="poster-action-btn">保存图片</div> </div>
<div @click.stop class="poster-action-btn">分享好友</div> <div class="channel-text">
</div> <div class="channel-detail-title">
</div> <div class="route-play-tag"></div>
</div> <div class="route-play-title">白天</div>
</div>
<div class="channel-detail-text">
扶贫茶园茶旅体验：采茶、炒茶、品茶<br/>
小镇打卡：东湖大水车、丹调图书馆、轮值镇长展示中心<br/>
小镇体验：蜡染体验、玻璃栈道、悬崖秋千、水上游船等<br/>
锦华酒店温泉体验<br/>
</div>
<div class="channel-detail-title">
<div class="route-play-tag"></div>
<div class="route-play-title">晚上</div>
</div>
<div class="channel-detail-text">
特色酸汤鱼 - 观看《锦秀丹寨》- 篝火晚会
</div>
</div>
<div class="channel-title">
<span>第二天</span>
</div>
<div class="channel-text">
<div class="channel-detail-title">
<div class="route-play-tag"></div>
<div class="route-play-title">白天</div>
</div>
<div class="channel-detail-text">
环湖步道晨跑 - 高要梯田观景台 - 探访金汞矿
</div>
<div class="channel-detail-title">
<div class="route-play-tag"></div>
<div class="route-play-title">晚上</div>
</div>
<div class="channel-detail-text">
特色斗鸡肉 - 小镇酒吧一条街
</div>
</div>
<div class="channel-title">
<span>第三天</span>
</div>
<div class="channel-text">
探访石桥古法造纸 - 参观大簸箕苗寨
</div>
</div>
</div>
<div v-if="activeIdx===2" class="content">
<div class="content__text">
<div class="route-title">{{navs[activeIdx].title}}</div>
<div class="channel-title">
<span>第一天</span>
</div>
<div class="channel-text">
<div class="channel-detail-title">
<div class="route-play-tag"></div>
<div class="route-play-title">白天</div>
</div>
<div class="channel-detail-text">
扶贫茶园茶旅体验：采茶、炒茶、品茶<br/>
小镇打卡：东湖大水车、丹调图书馆、轮值镇长展示中心<br/>
小镇体验：蜡染体验、玻璃栈道、悬崖秋千、水上游船等<br/>
锦华酒店温泉体验<br/>
</div>
<div class="channel-detail-title">
<div class="route-play-tag"></div>
<div class="route-play-title">晚上</div>
</div>
<div class="channel-detail-text">
特色酸汤鱼 - 观看《锦秀丹寨》- 篝火晚会
</div>
</div>
<div class="channel-title">
<span>第二天</span>
</div>
<div class="channel-text">
<div class="channel-detail-title">
<div class="route-play-tag"></div>
<div class="route-play-title">白天</div>
</div>
<div class="channel-detail-text">
环湖步道晨跑 - 探访金汞矿 - 排廷瀑布 - 高要梯田
观景台 - 探访卡拉村鸟笼
</div>
<div class="channel-detail-title">
<div class="route-play-tag"></div>
<div class="route-play-title">晚上</div>
</div>
<div class="channel-detail-text">
特色斗鸡肉 - 小镇酒吧一条街
</div>
</div>
<div class="channel-title">
<span>第三天</span>
</div>
<div class="channel-text">
<div class="channel-detail-title">
<div class="route-play-tag"></div>
<div class="route-play-title">白天</div>
</div>
<div class="channel-detail-text">
探访石桥古法造纸 - 大簸箕苗寨 - 周边村寨捉稻田鱼
</div>
<div class="channel-detail-title">
<div class="route-play-tag"></div>
<div class="route-play-title">晚上</div>
</div>
<div class="channel-detail-text">
特色稻田鱼 - 苗药足浴 SPA 体验
</div>
</div>
<div class="channel-title">
<span>第四天</span>
</div>
<div class="channel-text">
登龙泉山(尤公山)- 喝排佐鸡汤 - 游锦绣谷（韭菜
沟森林公园）
</div>
</div>
</div>
<!--:style="{backgroundImage:'url('+navs[activeIdx].bg_image+')'}"-->
<div class="bottom" v-if="!showPoster">
<img @click="bindShareEvent" class="bottom__icon" src="./images/show/share.png"/>
</div>
<div class="modal-wrap" v-if="showPoster" @click="closeModal">
<div class="modal-container">
<div class="poster">
<img :src="navs[activeIdx].share_image" class="poster-img" />
<div @click.stop="refreshShareText" class="change-poster-btn">换一换</div>
<div class="poster-content">
<div class="poster-content__title">{{userInfo.nickname}}的<br/>2020幸运打卡地：丹寨</div>
<div class="poster-content__content">{{shareDesc}}</div>
<img class="poster-content__qrcode" :src="userInfo.qrcode"></img>
<div class="poster-content__userinfo">
<img class="headimg" :src="userInfo.head" />
<div class="tip">快跟着{{userInfo.nickname}}<br/>一起分享丹寨</div>
</div>
</div>
</div>
<div class="poster-action-box">
<div @click.stop="previewImg" class="poster-action-btn">保存图片并发送给好友</div>
<!-- <div @click.stop="shareToFirends" class="poster-action-btn">分享好友</div>-->
</div>
</div>
</div>
<div class="pic-modal-wrap" v-if="showPic" @click="showPic=false">
<img class="pic" style="width: 100%;" :src="posterUrl" />
</div>
</div> </div>
<script src="/libs/helper.js"></script> <canvas id="canvasEle"></canvas>
<script src="./libs/helper.js"></script>
<script> <script>
function createImgByAsync(url) { function createImgByAsync(url) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
let img = new Image(); let img = new Image();
img.setAttribute("crossOrigin", 'Anonymous'); img.setAttribute("crossOrigin", 'Anonymous');
img.src = url; img.src = url + '?time=' + new Date().valueOf();
img.onload = function () { img.onload = function () {
resolve(img) resolve(img)
} }
img.onerror = function (err) { img.onerror = function (err) {
reject(err) reject(err)
} }
}) })
} }
function convertCanvasToImage(canvas) { function convertCanvasToImage(canvas) {
let image = new Image(); let image = new Image();
image.src = canvas.toDataURL("image/png"); image.src = canvas.toDataURL("image/png");
return image; return image;
} }
function cutstrFun(str, len) { function cutstrFun(str, len) {
console.log(str.length) // console.log(str.length)
var temp = str var temp = str
if (str.length > len) { if (str.length > len) {
temp = str.substr(0, len) + '..' temp = str.substr(0, len) + '..'
} }
console.log(temp) // console.log(temp)
return temp return temp
} }
/** /**
...@@ -372,164 +637,243 @@ function cutstrFun(str, len) { ...@@ -372,164 +637,243 @@ function cutstrFun(str, len) {
* @param dpr * @param dpr
* @returns {number} * @returns {number}
*/ */
function canvasTextAutoLine(str, ctx, canvasWidth, initX, initY, lineHeight,fontSize,dpr,bold=false) { function canvasTextAutoLine(str, ctx, canvasWidth, initX, initY, lineHeight, fontSize, dpr, bold = false) {
if(!str)return;
var lineWidth = 0 var lineWidth = 0
var lastSubStrIndex = 0, var lastSubStrIndex = 0,
totalLineHeight = 0 totalLineHeight = 0
var fz = fontSize*dpr var fz = fontSize * dpr
ctx.font = (bold?'bold ':'')+`${fz}px "微软雅黑"`; ctx.font = (bold ? 'bold ' : '') + `${fz}px "微软雅黑"`;
ctx.fillStyle = "#fff"; ctx.fillStyle = "#fff";
for (let i = 0; i < str.length; i++) { for (let i = 0; i < str.length; i++) {
lineWidth += fontSize*dpr // 假定一个字是12px lineWidth += fontSize * dpr // 假定一个字是12px
console.log(lineWidth,canvasWidth) // console.log(lineWidth, canvasWidth)
// canvasWidth-initX*6 // canvasWidth-initX*6
if (lineWidth > canvasWidth) { // 减去initX,防止边界出现的问题 if (lineWidth > canvasWidth) { // 减去initX,防止边界出现的问题
ctx.fillText(str.substring(lastSubStrIndex, i), initX, initY) ctx.fillText(str.substring(lastSubStrIndex, i), initX, initY)
totalLineHeight += lineHeight totalLineHeight += lineHeight
initY += lineHeight*dpr initY += lineHeight * dpr
lineWidth = 0 lineWidth = 0
lastSubStrIndex = i lastSubStrIndex = i
} }
if (i == str.length - 1) { if (i == str.length - 1) {
ctx.fillText(str.substring(lastSubStrIndex, i + 1), initX, initY) ctx.fillText(str.substring(lastSubStrIndex, i + 1), initX, initY)
} }
} }
return totalLineHeight return totalLineHeight
} }
var vueInstance = new Vue({ var vueInstance = new Vue({
el:'#app', el: '#app',
data(){ data() {
return { return {
contentList:[], showPic:false,
loadReady:false, contentList: [],
showPoster:false, loadReady: false,
shareName:'', showPoster: false,
activeIdx:0, shareTitle:'',
posterUrl:'', shareDesc:'',
navs:[] activeIdx: 0,
} posterUrl: '',
}, navs: [],
methods:{ userInfo:{}
}
closeModal(){ },
this.showPoster = false methods: {
this.posterUrl = '' async previewImg(){
}, this.posterUrl = await this.createdPoster()
bindSave(){ this.showPic = true
// wx.previewImage({ // wx.previewImage({
// urls: [this.posterUrl] // 需要预览的图片http链接列表 // urls: [this.posterUrl] // 需要预览的图片http链接列表
// }); // });
}, },
// 获取页面dpr和宽度 shareToFirends(){
getWindowInfo() {
const currentInfo = this.navs[this.activeIdx]
var windowInfo = {}; var shareDesc = this.navs[this.activeIdx].content
windowInfo.dpr = window.devicePixelRatio;
if (window.innerWidth) { var largeShareName = `${this.userInfo.nickname}的`
windowInfo.width = window.innerWidth; var largeShareName2 = `2020幸运打卡地：丹寨`
}
else { var shareTitle = largeShareName+largeShareName2
windowInfo.width = document.body.clientWidth;
}
return windowInfo; if(wx){
}, wx.updateAppMessageShareData({
async createdPoster(){ title: shareTitle, // 分享标题
desc: shareDesc, // 分享描述
const currentInfo = this.navs[this.activeIdx] link: FRONT_URL, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
console.log(currentInfo) imgUrl: currentInfo.small_image, // 分享图标
success: function () {
var userInfo = await getUserInfo(); // 设置成功
console.log(userInfo); }
})
var shareName = `快跟着${userInfo.nickname} 一起分享丹寨`
wx.updateTimelineShareData({
var canvas = document.getElementById("canvasEle"); title: shareTitle, // 分享标题
var ctx = canvas.getContext("2d"); link: FRONT_URL, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: currentInfo.small_image, // 分享图标
//var clientWidth = this.getWindowInfo().width;  //获取屏幕宽度用于canvas宽度自适应移动端屏幕 success: function () {
var dpr = this.getWindowInfo().dpr; // 设置成功
ctx.globalCompositeOperation = "source-atop";//** 坑锯齿感觉没什么用不知道是不是用错地方了 ** }
canvas.width = dpr * 652;  //由于手机屏幕时retina屏，都会多倍渲染，用dpr来动态设置画布宽高，避免图片模糊 })
canvas.height = dpr * 1066;//去掉微信头部的状态栏应该是603 没搞懂603还是不能让图片满屏直接多加到了609 }
},
let share_image = await createImgByAsync(currentInfo.share_image); closeModal() {
ctx.drawImage(share_image, 0, 0, canvas.width, canvas.height); this.showPoster = false
this.posterUrl = ''
},
userInfo.qrcode = 'https://qingclouds-server.oss-cn-shanghai.aliyuncs.com/da43bbbbc9dd8c82/59a3da8c0f33cd98.png'//替换下 bindSave() {
let qr_image = await createImgByAsync(userInfo.qrcode); // wx.previewImage({
console.log(qr_image) // urls: [this.posterUrl] // 需要预览的图片http链接列表
ctx.drawImage(qr_image, dpr * 45, dpr * 923, dpr * 110, dpr * 110); // });
},
// 获取页面dpr和宽度
let head_image = await createImgByAsync(userInfo.head);
console.log(head_image) getWindowInfo() {
ctx.drawImage(head_image, dpr * 395, dpr * 980, dpr * 55, dpr * 55);
var windowInfo = {};
canvasTextAutoLine(shareName, ctx, dpr*170, dpr * 465, dpr * 1005,32,24,dpr) windowInfo.dpr = window.devicePixelRatio;
if (window.innerWidth) {
canvasTextAutoLine(currentInfo.content, ctx, dpr*410, dpr * 45, dpr * 220,45,30,dpr,true) windowInfo.width = window.innerWidth;
} else {
var largeShareName = `${userInfo.nickname}的` windowInfo.width = document.body.clientWidth;
canvasTextAutoLine(largeShareName, ctx, canvas.width, dpr * 40, dpr * 84,52,52,dpr,true) }
var largeShareName2 = `2020幸运打卡地：丹寨` return windowInfo;
canvasTextAutoLine(largeShareName2, ctx, canvas.width, dpr * 40, dpr * 147,52,52,dpr,true) },
async createdPoster() {
return canvas.toDataURL("image/png");
const currentInfo = this.navs[this.activeIdx]
}, // console.log(currentInfo)
async refreshShareText(){
var userInfo = await getUserInfo();
this.navs[this.activeIdx].content = this.contentList[parseInt(Math.random()*this.contentList.length)].content // console.log(userInfo);
this.posterUrl = await this.createdPoster() var shareName = `快跟着${userInfo.nickname} 一起分享丹寨`
// this.posterUrl = currentInfo.poster
this.showPoster = true var canvas = document.getElementById("canvasEle");
}, var ctx = canvas.getContext("2d");
async bindShareEvent(){
//var clientWidth = this.getWindowInfo().width;  //获取屏幕宽度用于canvas宽度自适应移动端屏幕
this.posterUrl = await this.createdPoster() var dpr = 1//this.getWindowInfo().dpr;
// this.posterUrl = currentInfo.poster ctx.globalCompositeOperation = "source-atop";//** 坑锯齿感觉没什么用不知道是不是用错地方了 **
this.showPoster = true canvas.width = dpr * 652;  //由于手机屏幕时retina屏，都会多倍渲染，用dpr来动态设置画布宽高，避免图片模糊
}, canvas.height = dpr * 1066;//去掉微信头部的状态栏应该是603 没搞懂603还是不能让图片满屏直接多加到了609
setActive(idx){
this.activeIdx = Number(idx) let share_image = await createImgByAsync('https://wanda-static.bdideal.com/danzhai-holiday-test/danzhai-content-15993814862705.png');
}, ctx.drawImage(share_image, 0, 0, canvas.width, canvas.height);
async _init_func(){
var category_id = getQueryByString(location.href,'id') //userInfo.qrcode = 'https://qingclouds-server.oss-cn-shanghai.aliyuncs.com/da43bbbbc9dd8c82/59a3da8c0f33cd98.png'//替换下
// this.navs = await $get('/content/list?category_id='+category_id).then(res=>res.data).catch(err=>{throw err}) let qr_image = await createImgByAsync(userInfo.qrcode);
this.navs = [ // console.log(qr_image)
{title:'两天一晚',small_image:'https://wzw2020.oss-cn-beijing.aliyuncs.com/%E7%BB%84%2033.png',bg_image:'https://wzw2020.oss-cn-beijing.aliyuncs.com/bg.png',image:'https://wzw2020.oss-cn-beijing.aliyuncs.com/%E5%9C%86%E8%A7%92%E7%9F%A9%E5%BD%A2%201.png'}, ctx.drawImage(qr_image, dpr * 45, dpr * 923, dpr * 110, dpr * 110);
{title:'三天两晚',small_image:'https://wzw2020.oss-cn-beijing.aliyuncs.com/%E7%BB%84%2034.png',bg_image:'https://wzw2020.oss-cn-beijing.aliyuncs.com/bg.png',image:'https://wzw2020.oss-cn-beijing.aliyuncs.com/%E5%9C%86%E8%A7%92%E7%9F%A9%E5%BD%A2%201.png'},
{title:'四天三晚',small_image:'https://wzw2020.oss-cn-beijing.aliyuncs.com/%E7%BB%84%20342.png',bg_image:'https://wzw2020.oss-cn-beijing.aliyuncs.com/bg.png',image:'https://wzw2020.oss-cn-beijing.aliyuncs.com/%E5%9C%86%E8%A7%92%E7%9F%A9%E5%BD%A2%201.png'}
] let head_image = await createImgByAsync(userInfo.head);
console.log(this.navs) // console.log(head_image)
this.contentList = await $get('/travel/desc').then(res=>res.data).catch(err=>{throw err}) ctx.drawImage(head_image, dpr * 395, dpr * 980, dpr * 55, dpr * 55);
// var idx = getQueryByString(location.href,'idx')
// if(!isNaN(idx) && idx>=0){ canvasTextAutoLine(shareName, ctx, dpr * 170, dpr * 465, dpr * 1005, 32, 24, dpr)
// this.setActive(idx)
// } canvasTextAutoLine(currentInfo.content, ctx, dpr * 410, dpr * 45, dpr * 220, 45, 30, dpr, true)
this.setActive(0) var largeShareName = `${userInfo.nickname}的`
canvasTextAutoLine(largeShareName, ctx, canvas.width, dpr * 40, dpr * 84, 52, 52, dpr, true)
await WX_JSSDK_INIT(this).then(wxEnv=>{ var largeShareName2 = `2020幸运打卡地：丹寨`
console.log(wxEnv) canvasTextAutoLine(largeShareName2, ctx, canvas.width, dpr * 40, dpr * 147, 52, 52, dpr, true)
}).catch(err=>{
console.log(err) return canvas.toDataURL("image/png");
})
this.loadReady = true },
async refreshShareText() {
}
}, var randStr = this.contentList[parseInt(Math.random()*this.contentList.length)].content
created(){ // console.log(randStr)
this._init_func() this.navs[this.activeIdx].content = randStr
} this.shareDesc = randStr
// this.posterUrl = await this.createdPoster()
// this.posterUrl = currentInfo.poster
// this.showPoster = true
},
async bindShareEvent() {
// this.posterUrl = await this.createdPoster()
// this.posterUrl = currentInfo.poster
this.showPoster = true
},
setActive(idx,initJsSdk=true){
this.activeIdx = Number(idx)
this.shareDesc = this.navs[this.activeIdx].content
if(initJsSdk)this.shareToFirends()
},
async _init_func() {
var category_id = getQueryByString(location.href, 'id')
// this.navs = await $get('/content/list?category_id='+category_id).then(res=>res.data).catch(err=>{throw err})
this.navs = [
{
title: '两天一晚',
icon:'https://wzw2020.oss-cn-beijing.aliyuncs.com/icon/route.png',icona:'https://wzw2020.oss-cn-beijing.aliyuncs.com/icon/route-a.png',
share_image:'https://wanda-static.bdideal.com/danzhai-holiday-test/danzhai-content-15993815184676.png',
small_image: 'https://wzw2020.oss-cn-beijing.aliyuncs.com/%E7%BB%84%2033.png',
bg_image: 'https://wzw2020.oss-cn-beijing.aliyuncs.com/bg.png',
image: 'https://wzw2020.oss-cn-beijing.aliyuncs.com/%E5%9C%86%E8%A7%92%E7%9F%A9%E5%BD%A2%201.png'
},
{
title: '三天两晚',
icon:'https://wzw2020.oss-cn-beijing.aliyuncs.com/icon/route.png',icona:'https://wzw2020.oss-cn-beijing.aliyuncs.com/icon/route-a.png',
share_image:'https://wanda-static.bdideal.com/danzhai-holiday-test/danzhai-content-15993815184676.png',
small_image: 'https://wzw2020.oss-cn-beijing.aliyuncs.com/%E7%BB%84%2034.png',
bg_image: 'https://wzw2020.oss-cn-beijing.aliyuncs.com/bg.png',
image: 'https://wzw2020.oss-cn-beijing.aliyuncs.com/%E5%9C%86%E8%A7%92%E7%9F%A9%E5%BD%A2%201.png'
},
{
title: '四天三晚',
icon:'https://wzw2020.oss-cn-beijing.aliyuncs.com/icon/route.png',icona:'https://wzw2020.oss-cn-beijing.aliyuncs.com/icon/route-a.png',
share_image:'https://wanda-static.bdideal.com/danzhai-holiday-test/danzhai-content-15993815184676.png',
small_image: 'https://wzw2020.oss-cn-beijing.aliyuncs.com/%E7%BB%84%20342.png',
bg_image: 'https://wzw2020.oss-cn-beijing.aliyuncs.com/bg.png',
image: 'https://wzw2020.oss-cn-beijing.aliyuncs.com/%E5%9C%86%E8%A7%92%E7%9F%A9%E5%BD%A2%201.png'
}
]
// console.log(this.navs)
this.contentList = await $get('/travel/desc').then(res => res.data).catch(err => {
throw err
})
this.refreshShareText()
// var idx = getQueryByString(location.href,'idx')
// if(!isNaN(idx) && idx>=0){
// this.setActive(idx)
// }
var userInfo = await getUserInfo();
// console.log(userInfo);
this.$set(this,'userInfo',userInfo)
var largeShareName = `${userInfo.nickname}的`
var largeShareName2 = `2020幸运打卡地：丹寨`
this.shareTitle = largeShareName+largeShareName2
this.setActive(0,false)
await WX_JSSDK_INIT(this).then(wxEnv=>{
// console.log(wxEnv)
this.shareToFirends()
this.shareToFirends()
}).catch(err=>{
// console.log(err)
})
this.loadReady = true
}
},
created() {
this._init_func()
}
}) })
</script> </script>
</body> </body>
......
route.html.old deleted 100644 → 0
<!DOCTYPE html>
<html>
<head>
<title>度假到丹寨</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="x-ua-compatible" content="IE=edge" />
<script src="/libs/rem.js"></script>
<style>
*{
margin: 0;
padding: 0;
border:none;
}
.full-img{
width: 100%;
vertical-align: top;
}
</style>
<!-- <script src="/libs/vue/vue.js"></script>-->
</head>
<body id="app">
<img class="full-img" src="/images/route.png" />
<script>
</script>
</body>
</html>
show.html
...@@ -7,33 +7,42 @@ ...@@ -7,33 +7,42 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="x-ua-compatible" content="IE=edge" /> <meta http-equiv="x-ua-compatible" content="IE=edge" />
<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> <script src="./libs/helper.js"></script>
<script src="/libs/rem.js"></script> <script src="./libs/vue/vue.js"></script>
<script src="/libs/vue/vue.js"></script> <script src="./libs/axios.min.js"></script>
<script src="/libs/axios.min.js"></script>
<style> <style>
#canvasEle{ #canvasEle{
position: absolute; position: fixed;
left: 100%; left: 200%;
width: 652px;
height: 1066px;
z-index: -3;
} }
@font-face { @font-face {
font-family: myFont; font-family: myFont;
src: url('/font/ltzk.ttf'); src: url('./font/ltzk.ttf');
} }
*{ *{
margin: 0; margin: 0;
padding: 0; padding: 0;
border:none; border:none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
::-webkit-scrollbar{
display: none;
} }
.page-wrap{ .page-wrap{
position: fixed; position: fixed;
width: 100%; width: 100%;
height: 100%; height: 100%;
/*background-image: url("/images/show/fupin.png");*/ /*background-image: url("./images/show/fupin.png");*/
background-size: cover; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: bottom center; background-position: bottom center;
padding-bottom: 1.14rem; /*padding-bottom: 1.14rem;*/
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
...@@ -54,7 +63,7 @@ ...@@ -54,7 +63,7 @@
} }
.nav-item{ .nav-item{
display: inline-block; display: inline-block;
width: 1.14rem; width: 1.3rem;
height: 1.85rem; height: 1.85rem;
margin-left: 0.42rem; margin-left: 0.42rem;
border-radius: 0.1rem; border-radius: 0.1rem;
...@@ -67,7 +76,7 @@ ...@@ -67,7 +76,7 @@
background: rgba(23, 40, 63, 0.3); background: rgba(23, 40, 63, 0.3);
} }
.nav-item__iconbox{ .nav-item__iconbox{
margin: 0.07rem auto auto; margin: 0.2rem auto auto;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
border-radius: 50%; border-radius: 50%;
...@@ -89,10 +98,10 @@ ...@@ -89,10 +98,10 @@
.nav-item__mtitle{ .nav-item__mtitle{
margin-top: 0.1rem; margin-top: 0.1rem;
text-align: center; text-align: center;
font-size: 0.26rem; font-size: 0.24rem;
line-height: 0.28rem; line-height: 0.28rem;
color: #fff; color: #fff;
width: 1.14rem; width: 1.3rem;
display: block; display: block;
white-space: normal; white-space: normal;
} }
...@@ -127,27 +136,28 @@ ...@@ -127,27 +136,28 @@
margin: 0 auto; margin: 0 auto;
flex:1; flex:1;
overflow-y: scroll; overflow-y: scroll;
-webkit-overflow-scrolling: touch; /*-webkit-overflow-scrolling: touch;*/
}
.content::-webkit-scrollbar{
display: none;
} }
.content__text{ .content__text{
font-size: 0.3rem; font-size: 0.3rem;
color: #fff; color: #fff;
line-height: 0.55rem; line-height: 0.55rem;
} }
.bottom{ .bottom{
height: 1.14rem; height: 1.14rem;
position: fixed; position: fixed;
left: 0; left: 0;
bottom:0; bottom:0;
width: 100%; width: 100%;
background: none;
background-size: cover; z-index: 999;
background-repeat: no-repeat; /*background-size: cover;*/
background-position: bottom center; /*background-repeat: no-repeat;*/
/*background-position: bottom center;*/
} }
.bottom__icon{ .bottom__icon{
width: 0.63rem; width: 0.63rem;
...@@ -156,12 +166,31 @@ ...@@ -156,12 +166,31 @@
right: 0.41rem; right: 0.41rem;
bottom:0.51rem; bottom:0.51rem;
} }
.pic-modal-wrap{
background: #000000;
position: fixed;
z-index: 1004;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
user-select:none;
}
.pic-modal-wrap .pic{
user-select:none;
}
.modal-wrap{ .modal-wrap{
background: rgba(0,0,0,.7); background: rgba(0,0,0,.7);
position: fixed; position: fixed;
z-index: 3; z-index: 1000;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.modal-container{ .modal-container{
...@@ -171,6 +200,7 @@ ...@@ -171,6 +200,7 @@
height: 10.65rem; height: 10.65rem;
position: relative; position: relative;
margin: 0.56rem auto 0.25rem; margin: 0.56rem auto 0.25rem;
position: relative;
} }
.poster-img{ .poster-img{
width: 100%; width: 100%;
...@@ -178,29 +208,30 @@ ...@@ -178,29 +208,30 @@
} }
.change-poster-btn{ .change-poster-btn{
position: absolute; position: absolute;
right: -0.25rem; right: 0.32rem;
top: -0.32rem; top: 0.3rem;
width: 2.07rem; width: 2.08rem;
height: 0.66rem; height: 0.67rem;
background: #FFFFFF; background: #FFFFFF;
font-size: 0.3rem; font-size: 0.3rem;
font-weight: 400; font-weight: 400;
color: #333333; color: #343434;;
line-height: 0.66rem; line-height: 0.66rem;
border-radius: 0.33rem; border-radius: 0.33rem;
text-align: center; text-align: center;
z-index: 9;
} }
.poster-action-box{ .poster-action-box{
width: 6.51rem; width: 6.51rem;
margin: 0 auto; margin: 0 auto;
display: flex; display: flex;
justify-content:space-between; justify-content:center;
align-items: center; align-items: center;
} }
.poster-action-btn{ .poster-action-btn{
width: 2.07rem;
height: 0.66rem; height: 0.66rem;
background: #FFFFFF; padding: 0 0.33rem;
background: rgba(255,255,255,.8);
font-size: 0.3rem; font-size: 0.3rem;
font-weight: 400; font-weight: 400;
color: #333333; color: #333333;
...@@ -208,13 +239,70 @@ ...@@ -208,13 +239,70 @@
border-radius: 0.33rem; border-radius: 0.33rem;
text-align: center; text-align: center;
} }
/*.poster-action-btn:last-child{*/
/* margin-left: 1.17rem;*/
/*}*/
.poster-content{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 3;
}
.poster-content__title{
margin-top: 1.14rem;
margin-left: 0.43rem;
font-size: 0.53rem;
font-weight: bold;
color: #FFFFFF;
line-height: 0.8rem;
}
.poster-content__content{
width: 4.12rem;
margin-top: 0.35rem;
margin-left: 0.43rem;
font-size: 0.3rem;
font-weight: bold;
color: #FFFFFF;
line-height: 0.42rem;
}
.poster-content__qrcode{
width: 1.07rem;
height: 1.07rem;
position: absolute;
left: 0.44rem;
bottom: 0.36rem;
}
.poster-content__userinfo{
position: absolute;
right: 0.47rem;
bottom: 0.32rem;
display: flex;
align-items: center;
}
.poster-content__userinfo .headimg{
width: 0.54rem;
height: 0.54rem;
background: #FFFFFF;
border-radius: 50%;
}
.poster-content__userinfo .tip{
font-size: 0.24rem;
font-weight: bold;
color: #FFFFFF;
line-height: 0.29rem;
margin-left: 0.11rem;
}
</style> </style>
</head> </head>
<body> <body>
<div id="app" class="page-wrap" v-if="loadReady" :class="{fixed:showPoster}" :style="{backgroundImage:'url('+navs[activeIdx].bg_image+')'}"> <div id="app" class="page-wrap" v-if="loadReady" :class="{fixed:showPoster}" :style="{backgroundImage:'url('+navs[activeIdx].bg_image+')'}">
<canvas id="canvasEle"></canvas>
<div class="nav-list"> <div class="nav-list">
<div class="nav-item" v-for="(item,idx) in navs" :key="idx" :class="{active:idx===activeIdx}" @click="setActive(idx,item)"> <div class="nav-item" v-for="(item,idx) in navs" :key="idx" :class="{active:idx===activeIdx}" @click="setActive(idx,item)">
<div class="nav-item__iconbox"> <div class="nav-item__iconbox">
...@@ -230,114 +318,118 @@ ...@@ -230,114 +318,118 @@
<img class="thumb__img" :src="navs[activeIdx].image" /> <img class="thumb__img" :src="navs[activeIdx].image" />
</div> </div>
<div class="content"> <div class="content">
<div class="content__text" v-html="navs[activeIdx].content"></div> <div class="content__text" v-html="navs[activeIdx].content"></div>
</div> </div>
<div class="bottom" :style="{backgroundImage:'url('+navs[activeIdx].bg_image+')'}"> <!--:style="{backgroundImage:'url('+navs[activeIdx].bg_image+')'}"-->
<img @click="bindShareEvent" class="bottom__icon" src="/images/show/share.png" /> <div class="bottom" v-if="!showPoster" >
<img @click="bindShareEvent" class="bottom__icon" src="./images/show/share.png" />
</div> </div>
<div class="modal-wrap" v-if="showPoster" @click="closeModal"> <div class="modal-wrap" v-if="showPoster" @click="closeModal">
<div class="modal-container"> <div class="modal-container">
<div class="poster"> <div class="poster">
<img :src="posterUrl" class="poster-img" /> <img :src="navs[activeIdx].share_image" class="poster-img" />
<div @click.stop="refreshShareText" class="change-poster-btn">换一换</div> <div @click.stop="refreshShareText" class="change-poster-btn">换一换</div>
<div class="poster-content">
<div class="poster-content__title">{{userInfo.nickname}}的<br/>2020幸运打卡地：丹寨</div>
<div class="poster-content__content">{{shareDesc}}</div>
<img class="poster-content__qrcode" :src="userInfo.qrcode"></img>
<div class="poster-content__userinfo">
<img class="headimg" :src="userInfo.head" />
<div class="tip">快跟着{{userInfo.nickname}}<br/>一起分享丹寨</div>
</div>
</div>
</div> </div>
<div class="poster-action-box"> <div class="poster-action-box">
<div @click.stop class="poster-action-btn">保存图片</div> <div @click.stop="previewImg" class="poster-action-btn">保存图片并发送给好友</div>
<div @click.stop class="poster-action-btn">分享好友</div> <!-- <div @click.stop="shareToFirends" class="poster-action-btn">分享好友</div>-->
</div> </div>
</div> </div>
</div> </div>
</div>
<script src="/libs/helper.js"></script>
<script>
function createImgByAsync(url) {
return new Promise((resolve, reject) => {
let img = new Image();
img.setAttribute("crossOrigin", 'Anonymous');
img.src = url;
img.onload = function () {
resolve(img)
}
img.onerror = function (err) {
reject(err)
}
})
}
function convertCanvasToImage(canvas) {
let image = new Image();
image.src = canvas.toDataURL("image/png");
return image;
}
function cutstrFun(str, len) { <div class="pic-modal-wrap" v-if="showPic" @click="showPic=false">
console.log(str.length) <img class="pic" style="width: 100%;" :src="posterUrl" />
var temp = str </div>
if (str.length > len) { </div>
temp = str.substr(0, len) + '..'
}
console.log(temp)
return temp
}
/**
*
* @param str
* @param ctx
* @param canvasWidth
* @param initX
* @param initY
* @param lineHeight
* @param fontSize
* @param dpr
* @returns {number}
*/
function canvasTextAutoLine(str, ctx, canvasWidth, initX, initY, lineHeight,fontSize,dpr,bold=false) {
var lineWidth = 0
var lastSubStrIndex = 0,
totalLineHeight = 0
var fz = fontSize*dpr
ctx.font = (bold?'bold ':'')+`${fz}px "微软雅黑"`;
ctx.fillStyle = "#fff";
for (let i = 0; i < str.length; i++) { <canvas id="canvasEle"></canvas>
lineWidth += fontSize*dpr // 假定一个字是12px <script src="./libs/jweixin-1.6.0.js"></script>
console.log(lineWidth,canvasWidth) <script>
// canvasWidth-initX*6
if (lineWidth > canvasWidth) { // 减去initX,防止边界出现的问题
ctx.fillText(str.substring(lastSubStrIndex, i), initX, initY)
totalLineHeight += lineHeight
initY += lineHeight*dpr
lineWidth = 0
lastSubStrIndex = i
}
if (i == str.length - 1) {
ctx.fillText(str.substring(lastSubStrIndex, i + 1), initX, initY)
}
}
return totalLineHeight
}
var vueInstance = new Vue({ var vueInstance = new Vue({
el:'#app', el:'#app',
data(){ data(){
return { return {
showPic:false,
contentList:[], contentList:[],
loadReady:false, loadReady:false,
showPoster:false, showPoster:false,
shareName:'', shareTitle:'',
shareDesc:'',
activeIdx:0, activeIdx:0,
posterUrl:'', posterUrl:'',
navs:[] navs:[],
userInfo:{}
} }
}, },
methods:{ methods:{
async previewImg(){
this.posterUrl = await this.createdPoster()
this.showPic = true
},
shareToFirends(){
const currentInfo = this.navs[this.activeIdx]
var shareDesc = this.shareDesc
var largeShareName = `${this.userInfo.nickname}的`
var largeShareName2 = `2020幸运打卡地：丹寨`
var shareTitle = largeShareName+largeShareName2
if(wx){
wx.updateAppMessageShareData({
title: shareTitle, // 分享标题
desc: shareDesc, // 分享描述
link: FRONT_URL, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: currentInfo.small_image, // 分享图标
success: function () {
// 设置成功
}
})
wx.updateTimelineShareData({
title: shareTitle, // 分享标题
link: FRONT_URL, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: currentInfo.small_image, // 分享图标
success: function () {
// 设置成功
}
})
}
// if(WeixinJSBridge){
// WeixinJSBridge.invoke('sendAppMessage',{
// "link":location.origin,
// "desc":shareDesc,
// "title":shareTitle
// });
//
// WeixinJSBridge.invoke("shareTimeline", {
// "link":location.origin,
// "img_url":currentInfo.small_image,
// "desc":shareDesc,
// "title":shareTitle
// })
//
// }
},
closeModal(){ closeModal(){
this.showPoster = false this.showPoster = false
this.posterUrl = '' this.posterUrl = ''
// hideModal()
}, },
bindSave(){ bindSave(){
// wx.previewImage({ // wx.previewImage({
...@@ -366,13 +458,14 @@ var vueInstance = new Vue({ ...@@ -366,13 +458,14 @@ var vueInstance = new Vue({
var userInfo = await getUserInfo(); var userInfo = await getUserInfo();
console.log(userInfo); console.log(userInfo);
var shareName = `快跟着${userInfo.nickname} 一起分享丹寨` var shareUserName = `快跟着${userInfo.nickname} 一起分享丹寨`
var canvas = document.getElementById("canvasEle"); var canvas = document.getElementById("canvasEle");
var ctx = canvas.getContext("2d"); var ctx = canvas.getContext("2d");
//var clientWidth = this.getWindowInfo().width;  //获取屏幕宽度用于canvas宽度自适应移动端屏幕 //var clientWidth = this.getWindowInfo().width;  //获取屏幕宽度用于canvas宽度自适应移动端屏幕
var dpr = this.getWindowInfo().dpr; var dpr = 1//this.getWindowInfo().dpr;
ctx.globalCompositeOperation = "source-atop";//** 坑锯齿感觉没什么用不知道是不是用错地方了 ** ctx.globalCompositeOperation = "source-atop";//** 坑锯齿感觉没什么用不知道是不是用错地方了 **
canvas.width = dpr * 652;  //由于手机屏幕时retina屏，都会多倍渲染，用dpr来动态设置画布宽高，避免图片模糊 canvas.width = dpr * 652;  //由于手机屏幕时retina屏，都会多倍渲染，用dpr来动态设置画布宽高，避免图片模糊
canvas.height = dpr * 1066;//去掉微信头部的状态栏应该是603 没搞懂603还是不能让图片满屏直接多加到了609 canvas.height = dpr * 1066;//去掉微信头部的状态栏应该是603 没搞懂603还是不能让图片满屏直接多加到了609
...@@ -381,7 +474,7 @@ var vueInstance = new Vue({ ...@@ -381,7 +474,7 @@ var vueInstance = new Vue({
ctx.drawImage(share_image, 0, 0, canvas.width, canvas.height); ctx.drawImage(share_image, 0, 0, canvas.width, canvas.height);
userInfo.qrcode = 'https://qingclouds-server.oss-cn-shanghai.aliyuncs.com/da43bbbbc9dd8c82/59a3da8c0f33cd98.png'//替换下 //userInfo.qrcode = 'https://qingclouds-server.oss-cn-shanghai.aliyuncs.com/da43bbbbc9dd8c82/59a3da8c0f33cd98.png'//替换下
let qr_image = await createImgByAsync(userInfo.qrcode); let qr_image = await createImgByAsync(userInfo.qrcode);
console.log(qr_image) console.log(qr_image)
ctx.drawImage(qr_image, dpr * 45, dpr * 923, dpr * 110, dpr * 110); ctx.drawImage(qr_image, dpr * 45, dpr * 923, dpr * 110, dpr * 110);
...@@ -391,34 +484,42 @@ var vueInstance = new Vue({ ...@@ -391,34 +484,42 @@ var vueInstance = new Vue({
console.log(head_image) console.log(head_image)
ctx.drawImage(head_image, dpr * 395, dpr * 980, dpr * 55, dpr * 55); ctx.drawImage(head_image, dpr * 395, dpr * 980, dpr * 55, dpr * 55);
canvasTextAutoLine(shareName, ctx, dpr*170, dpr * 465, dpr * 1005,32,24,dpr) canvasTextAutoLine(shareUserName, ctx, dpr*170, dpr * 465, dpr * 1005,32,24,dpr)
canvasTextAutoLine(currentInfo.content, ctx, dpr*410, dpr * 45, dpr * 220,45,30,dpr,true) canvasTextAutoLine(this.shareDesc, ctx, dpr*410, dpr * 45, dpr * 290,45,30,dpr,true)
var largeShareName = `${userInfo.nickname}的` var largeShareName = `${userInfo.nickname}的`
canvasTextAutoLine(largeShareName, ctx, canvas.width, dpr * 40, dpr * 84,52,52,dpr,true) canvasTextAutoLine(largeShareName, ctx, canvas.width, dpr * 40, dpr * 150,52,52,dpr,true)
var largeShareName2 = `2020幸运打卡地：丹寨` var largeShareName2 = `2020幸运打卡地：丹寨`
canvasTextAutoLine(largeShareName2, ctx, canvas.width, dpr * 40, dpr * 147,52,52,dpr,true) canvasTextAutoLine(largeShareName2, ctx, canvas.width, dpr * 40, dpr * 217,52,52,dpr,true)
return canvas.toDataURL("image/png"); return canvas.toDataURL("image/png");
}, },
async refreshShareText(){ async refreshShareText(){
this.navs[this.activeIdx].content = this.contentList[parseInt(Math.random()*this.contentList.length)].content var randStr = this.contentList[parseInt(Math.random()*this.contentList.length)].content
console.log(randStr)
this.posterUrl = await this.createdPoster() //this.navs[this.activeIdx].content = randStr
// this.posterUrl = currentInfo.poster this.shareDesc = randStr+''
this.showPoster = true // this.posterUrl = await this.createdPoster()
// // this.posterUrl = currentInfo.poster
//this.showPoster = true
// showModal()
}, },
async bindShareEvent(){ async bindShareEvent(){
this.posterUrl = await this.createdPoster() //this.posterUrl = await this.createdPoster()
// this.posterUrl = currentInfo.poster // this.posterUrl = currentInfo.poster
this.showPoster = true this.showPoster = true
// showModal()
}, },
setActive(idx){ setActive(idx,initJsSdk=true){
this.activeIdx = Number(idx) this.activeIdx = Number(idx)
//this.shareDesc = this.navs[this.activeIdx].content
if(initJsSdk)this.shareToFirends()
}, },
async _init_func(){ async _init_func(){
...@@ -426,15 +527,24 @@ var vueInstance = new Vue({ ...@@ -426,15 +527,24 @@ var vueInstance = new Vue({
this.navs = await $get('/content/list?category_id='+category_id).then(res=>res.data).catch(err=>{throw err}) this.navs = await $get('/content/list?category_id='+category_id).then(res=>res.data).catch(err=>{throw err})
console.log(this.navs) console.log(this.navs)
this.contentList = await $get('/travel/desc').then(res=>res.data).catch(err=>{throw err}) this.contentList = await $get('/travel/desc').then(res=>res.data).catch(err=>{throw err})
this.refreshShareText()
// var idx = getQueryByString(location.href,'idx') // var idx = getQueryByString(location.href,'idx')
// if(!isNaN(idx) && idx>=0){ // if(!isNaN(idx) && idx>=0){
// this.setActive(idx) // this.setActive(idx)
// } // }
var userInfo = await getUserInfo();
console.log(userInfo);
this.$set(this,'userInfo',userInfo)
var largeShareName = `${userInfo.nickname}的`
var largeShareName2 = `2020幸运打卡地：丹寨`
this.shareTitle = largeShareName+largeShareName2
this.setActive(0) this.setActive(0,false)
await WX_JSSDK_INIT(this).then(wxEnv=>{ await WX_JSSDK_INIT(this).then(wxEnv=>{
console.log(wxEnv) console.log(wxEnv)
this.shareToFirends()
}).catch(err=>{ }).catch(err=>{
console.log(err) console.log(err)
}) })
...@@ -443,9 +553,90 @@ var vueInstance = new Vue({ ...@@ -443,9 +553,90 @@ var vueInstance = new Vue({
} }
}, },
created(){ created(){
this._init_func() this._init_func()
} }
}) })
</script> </script>
<script src="./libs/rem.js"></script>
<script>
function createImgByAsync(url) {
return new Promise((resolve, reject) => {
let img = new Image();
img.setAttribute("crossOrigin", 'Anonymous');
img.src = url + '?time=' + new Date().valueOf();
img.onload = function () {
resolve(img)
}
img.onerror = function (err) {
reject(err)
}
})
}
function convertCanvasToImage(canvas) {
let image = new Image();
image.src = canvas.toDataURL("image/png");
return image;
}
function cutstrFun(str, len) {
// console.log(str.length)
var temp = str
if (str.length > len) {
temp = str.substr(0, len) + '..'
}
// console.log(temp)
return temp
}
/**
*
* @param str
* @param ctx
* @param canvasWidth
* @param initX
* @param initY
* @param lineHeight
* @param fontSize
* @param dpr
* @returns {number}
*/
function canvasTextAutoLine(str, ctx, canvasWidth, initX, initY, lineHeight,fontSize,dpr,bold=false) {
if(!str)return;
var lineWidth = 0
var lastSubStrIndex = 0,
totalLineHeight = 0
var fz = fontSize*dpr
ctx.font = (bold?'bold ':'')+`${fz}px "微软雅黑"`;
ctx.fillStyle = "#fff";
for (let i = 0; i < str.length; i++) {
lineWidth += fontSize*dpr // 假定一个字是12px
// console.log(lineWidth,canvasWidth)
// canvasWidth-initX*6
if (lineWidth > canvasWidth) { // 减去initX,防止边界出现的问题
ctx.fillText(str.substring(lastSubStrIndex, i), initX, initY)
totalLineHeight += lineHeight
initY += lineHeight*dpr
lineWidth = 0
lastSubStrIndex = i
}
if (i == str.length - 1) {
ctx.fillText(str.substring(lastSubStrIndex, i + 1), initX, initY)
}
}
return totalLineHeight
}
function showModal(){
// document.getElementById('showPoster').style.display = 'block'
}
function hideModal(){
// document.getElementById('showPoster').style.display = 'none'
}
</script>
</body> </body>
</html> </html>
skin/vtourskin.xml
...@@ -550,6 +550,7 @@ ...@@ -550,6 +550,7 @@
3.0, easeOutQuad, 3.0, easeOutQuad,
set(control.usercontrol, all); set(control.usercontrol, all);
tween(view.fovmax, get(lp_fovmax)); tween(view.fovmax, get(lp_fovmax));
jscall(littleplanetintro_onready_callback());
); );
); );
); );
......
tour.html
...@@ -7,10 +7,18 @@ ...@@ -7,10 +7,18 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black"/> <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<meta http-equiv="x-ua-compatible" content="IE=edge"/> <meta http-equiv="x-ua-compatible" content="IE=edge"/>
<script src="/libs/vue/vue.js"></script> <script src="./libs/helper.js"></script>
<script src="/libs/axios.min.js"></script> <script src="./libs/vue/vue.js"></script>
<link rel="stylesheet" href="/libs/swiper3d/src/css/3dSwiper.css"> <script src="./libs/axios.min.js"></script>
<script src="./libs/jweixin-1.6.0.js"></script>
<link rel="stylesheet" href="./libs/swiper3d/src/css/3dSwiper.css">
<style> <style>
*{
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
@-ms-viewport { @-ms-viewport {
width: device-width; width: device-width;
} }
...@@ -53,16 +61,32 @@ ...@@ -53,16 +61,32 @@
.swiper-dots{ .swiper-dots{
visibility: hidden; visibility: hidden;
width: 0px;
height: 0px;
z-index: -2;
position: fixed;
left: 100%;
} }
.swiper-navigator{ .swiper-navigator{
width: 0px;
height: 0px;
z-index: -2;
position: fixed;
left: 100%;
visibility: hidden; visibility: hidden;
} }
.swiper-current-text{
text-align: center;
font-size: 18px;
}
</style> </style>
</head> </head>
<body> <body>
<div id="pano" style="width:100%;height:100%;"></div> <div id="pano" style="width:100%;height:100%;"></div>
<div id="swiper" style="width:100%;height:100%;"> <div id="swiper" style="width:100%;height:100%;">
<div class="swiper-container " id="app"> <div class="swiper-container " id="app">
<div class="swiper-current-text" v-if="slides.length>0">{{slides[swiperActive].title}}</div>
<ul class="swiper-wrap" v-if="loadReady"> <ul class="swiper-wrap" v-if="loadReady">
<li v-for="(item,idx) in slides" :key="idx"> <li v-for="(item,idx) in slides" :key="idx">
<img class="img-item" @click="toShow(item.title,item.id,idx)" :src="item.image"> <img class="img-item" @click="toShow(item.title,item.id,idx)" :src="item.image">
...@@ -70,82 +94,105 @@ ...@@ -70,82 +94,105 @@
</ul> </ul>
<ul class="swiper-dots"></ul> <ul class="swiper-dots"></ul>
<ul class="swiper-navigator"> <ul class="swiper-navigator">
<li class="swiper-btn-prev">&lt;</li> <li class="swiper-btn-prev"></li>
<li class="swiper-btn-next">&gt;</li> <li class="swiper-btn-next"></li>
</ul> </ul>
</div> </div>
</div> </div>
<script src="/libs/helper.js"></script>
<script src="/libs/swiper3d/src/js/3dSwiper.js"></script>
<script>
<script src="tour.js"></script>
<script src="./libs/swiper3d/src/js/3dSwiper.js"></script>
<script>
function krpano_onready_callback2(krpano_interface) {
krpano = krpano_interface;
krpano.set("skin_settings.littleplanetintro", false)
sessionStorage.setItem('is_load',1)
setTimeout(()=>{
showSwiper()
},1500)
}
function krpano_onready_callback(krpano_interface) {
krpano = krpano_interface;
console.log(krpano)
krpano.set("skin_settings.littleplanetintro", false)
sessionStorage.setItem('is_load',1)
var vueInstance = new Vue({ // setTimeout(() => {
el:'#app', // add_hotspot('完善的设施', 128.862, 4.478)
data(){ // add_hotspot('宜人的气候', '-144.129', -5)
return { //
loadReady:false, // }, 1000)
slides:[]
}
},
methods:{
toShow(title,id,idx) {
// 0: {id: 12, title: "宜人的气候",…}
// 1: {id: 11, title: "完善的设施",…}
// 2: {id: 10, title: "绝美的风景",…}
// 3: {id: 9, title: "交通路线",…}
// 4: {id: 8, title: "行程推荐",…}
// 5: {id: 7, title: "独特的非遗",…}
if(title==='交通路线'){
location.href = '/travel.html?title&'+title+'&id='+id
return;
}
if(title==='行程推荐'){
location.href = '/route.html?title&'+title+'&id='+id
return;
}
console.log(idx)
location.href = '/show.html?title&'+title+'&id='+id
},
async _init_func(){
this.slides = await $get('/category/list').then(res=>res.data).catch(err=>{throw err}) setTimeout(()=>{
showSwiper()
},4500)
console.log(this.slides) }
this.loadReady = true
this.$nextTick().then(()=>{ // 小行星入场才会在vtourskin.xml中调用
new Swiper(".swiper-container",{ function littleplanetintro_onready_callback() {
pagination: ".swiper-dots", console.log('littleplanetintro_onready_callback')
navigator: { alert('littleplanetintro_onready_callback')
prev: ".swiper-btn-prev", }
next: ".swiper-btn-next"
},
delay: 4000,
autoPlay: true
});
})
/**
* 图片热点创建
* @param hs_name
* @param ath
* @param atv
*/
function add_hotspot(hs_name, ath, atv) {
if (krpano) {
var h = ath//krpano.get("view.hlookat");
var v = atv//krpano.get("view.vlookat");
//var hs_name = //"hs" + ((Date.now() + Math.random()) | 0); // create unique/randome name
console.log(hs_name, h, v)
krpano.call("addhotspot(" + hs_name + ")");
krpano.set("hotspot[" + hs_name + "].url", "/images/pano/diy_hotspot.png");
krpano.set("hotspot[" + hs_name + "].ath", h);
krpano.set("hotspot[" + hs_name + "].atv", v);
// krpano.set("hotspot["+hs_name+"].zorder", '42');
krpano.set("hotspot[" + hs_name + "].distorted", true);
if (krpano.get("device.html5")) {
// for HTML5 it's possible to assign JS functions directly to krpano events
krpano.set("hotspot[" + hs_name + "].onclick", function (hs) {
console.log('hotspot "' + hs + '" clicked');
// if(hs==='完善的设施'){
// location.href='/feature.html'
// }
// if(hs==='宜人的气候'){
// location.href='/feature.html'
// }
}.bind(null, hs_name));
} else {
// for Flash the js() action need to be used to call from Flash to JS (this code would work for Flash and HTML5)
// krpano.set("hotspot["+hs_name+"].onclick", "js( alert(calc('hotspot \"' + name + '\" clicked')) );");
} }
},
created(){
this._init_func()
} }
}) }
window.func = function () {
console.log(3333333333)
}
function trace(a) {
console.log(a)
}
function test(hs) {
// if(hs==='完善的设施'){
// location.href='/feature.html'
// }
// if(hs==='宜人的气候'){
// location.href='/feature.html'
// }
}
</script> </script>
<script src="tour.js"></script>
<script> <script>
window.onload = function () { window.onload = function(){
if(sessionStorage.getItem('is_load')){ if(sessionStorage.getItem('is_load')){
showSwiper()
embedpano({ embedpano({
// swf: "tour.swf", // swf: "tour.swf",
xml: "tour_no_littleplantintro.xml", xml: "tour_no_littleplantintro.xml",
...@@ -169,87 +216,108 @@ window.onload = function () { ...@@ -169,87 +216,108 @@ window.onload = function () {
} }
} }
function _init_wx_jssdk(){
if(wx){
wx.updateAppMessageShareData({
title: FRONT_TITLE, // 分享标题
desc: FRONT_DESC, // 分享描述
link: FRONT_URL, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
// imgUrl: currentInfo.small_image, // 分享图标
success: function () {
// 设置成功
}
})
wx.updateTimelineShareData({
title: FRONT_TITLE, // 分享标题
link: FRONT_URL, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
// imgUrl: currentInfo.small_image, // 分享图标
success: function () {
// 设置成功
}
})
}
}
async function showSwiper() { async function showSwiper() {
console.log('showSwipershowSwipershowSwiper')
alert('showSwipershowSwipershowSwiper')
document.getElementById('swiper').style.visibility = 'visible' document.getElementById('swiper').style.visibility = 'visible'
document.getElementById('swiper').style.zIndex = 4 document.getElementById('swiper').style.zIndex = 4
} // document.getElementById('swiper').style.left = '0px'
new Swiper(".swiper-container",{
pagination: ".swiper-dots",
navigator: {
prev: ".swiper-btn-prev",
next: ".swiper-btn-next"
},
delay: 4000,
autoPlay: true,
vm:vueInstance
});
function krpano_onready_callback2(krpano_interface) {
krpano = krpano_interface;
krpano.set("skin_settings.littleplanetintro", false)
sessionStorage.setItem('is_load',1)
showSwiper()
} }
function krpano_onready_callback(krpano_interface) {
krpano = krpano_interface;
console.log(krpano)
krpano.set("skin_settings.littleplanetintro", false)
sessionStorage.setItem('is_load',1)
// setTimeout(() => { WX_JSSDK_INIT(this).then(wxEnv=>{
// add_hotspot('完善的设施', 128.862, 4.478) console.log(wxEnv)
// add_hotspot('宜人的气候', '-144.129', -5) _init_wx_jssdk()
// }).catch(err=>{
// }, 1000) console.log(err)
showSwiper() })
}
/**
* 图片热点创建
* @param hs_name
* @param ath
* @param atv
*/
function add_hotspot(hs_name, ath, atv) {
if (krpano) {
var h = ath//krpano.get("view.hlookat");
var v = atv//krpano.get("view.vlookat");
//var hs_name = //"hs" + ((Date.now() + Math.random()) | 0); // create unique/randome name
console.log(hs_name, h, v)
krpano.call("addhotspot(" + hs_name + ")");
krpano.set("hotspot[" + hs_name + "].url", "/images/pano/diy_hotspot.png");
krpano.set("hotspot[" + hs_name + "].ath", h);
krpano.set("hotspot[" + hs_name + "].atv", v);
// krpano.set("hotspot["+hs_name+"].zorder", '42');
krpano.set("hotspot[" + hs_name + "].distorted", true);
if (krpano.get("device.html5")) {
// for HTML5 it's possible to assign JS functions directly to krpano events
krpano.set("hotspot[" + hs_name + "].onclick", function (hs) {
console.log('hotspot "' + hs + '" clicked');
// if(hs==='完善的设施'){
// location.href='/feature.html'
// }
// if(hs==='宜人的气候'){
// location.href='/feature.html'
// }
}.bind(null, hs_name));
} else {
// for Flash the js() action need to be used to call from Flash to JS (this code would work for Flash and HTML5)
// krpano.set("hotspot["+hs_name+"].onclick", "js( alert(calc('hotspot \"' + name + '\" clicked')) );");
}
}
}
window.func = function () { var vueInstance = new Vue({
console.log(3333333333) el:'#app',
} data(){
return {
swiperActive:0,
loadReady:false,
slides:[]
}
},
methods:{
toShow(title,id,idx) {
if(Number(id)===9){
location.href = './travel.html?id='+id
return;
}
if(Number(id)===8){
location.href = './route.html?id='+id
return;
}
console.log(idx)
location.href = './show.html?id='+id
},
async _init_func(){
function trace(a) { this.slides = await $get('/category/list').then(res=>res.data).catch(err=>{throw err})
console.log(a)
}
function test(hs) { console.log(this.slides)
// if(hs==='完善的设施'){ this.loadReady = true
// location.href='/feature.html'
// } // this.$nextTick().then(()=>{
// if(hs==='宜人的气候'){ //
// location.href='/feature.html' //
// } // })
}
}
},
created(){
this._init_func()
}
})
</script> </script>
</body> </body>
</html> </html>
tour_editor.html deleted 100644 → 0
<!DOCTYPE html>
<html>
<head>
<title>度假到丹寨</title>
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="x-ua-compatible" content="IE=edge" />
<style>
@-ms-viewport { width: device-width; }
@media only screen and (min-device-width: 800px) { html { overflow:hidden; } }
html { height:100%; }
body { height:100%; overflow: hidden; margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#FFFFFF; background-color:#000000; }
a{ color:#AAAAAA; text-decoration:underline; }
a:hover{ color:#FFFFFF; text-decoration:underline; }
</style>
</head>
<body>
<script src="tour.js"></script>
<div id="title" style="width:100%; height:20px; padding:5px; font-size:16px;"><b>krpano - MAKE VTOUR - Virtual Tour Editor</b> <span style="font-size:10px; font-style:italic; color:#777777;">// 1. set the startup views / 2. add hotspots / 3. edit the titles / 4. save and overwrite the original tour.xml</span></div>
<div id="pano" style="width:100%; height:95%;">
<noscript><table style="width:100%;height:100%;"><tr style="vertical-align:middle;"><td><div style="text-align:center;">ERROR:<br/><br/>Javascript not activated<br/><br/></div></td></tr></table></noscript>
<script>
var vars = {};
vars["plugin[vtoureditor].url"] = "plugins/vtoureditor.swf";
vars["plugin[vtoureditor].keep"] = true;
embedpano({swf:"tour.swf", xml:"tour.xml", target:"pano", flash:"only", passQueryParameters:false, vars:vars});
function resize()
{
var th = document.getElementById("title").clientHeight;
var ph = (typeof(window.innerHeight) == 'number') ? window.innerHeight : ((document.documentElement && document.documentElement.clientHeight) ? document.documentElement.clientHeight : ((document.body && document.body.clientHeight) ? document.body.clientHeight : 500));
document.getElementById("pano").style.height = (ph-th)+"px"
}
window.onresize = resize;
resize();
</script>
</div>
</body>
</html>
travel.html
...@@ -7,23 +7,29 @@ ...@@ -7,23 +7,29 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="x-ua-compatible" content="IE=edge" /> <meta http-equiv="x-ua-compatible" content="IE=edge" />
<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> <script src="./libs/helper.js"></script>
<script src="/libs/rem.js"></script> <script src="./libs/vue/vue.js"></script>
<script src="/libs/vue/vue.js"></script> <script src="./libs/axios.min.js"></script>
<script src="/libs/axios.min.js"></script>
<style> <style>
#canvasEle{ #canvasEle{
position: absolute; position: fixed;
left: 100%; left: 200%;
width: 652px;
height: 1066px;
z-index: -3;
} }
@font-face { @font-face {
font-family: myFont; font-family: myFont;
src: url('/font/ltzk.ttf'); src: url('./font/ltzk.ttf');
} }
*{ *{
margin: 0; margin: 0;
padding: 0; padding: 0;
border:none; border:none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
} }
.page-wrap{ .page-wrap{
position: fixed; position: fixed;
...@@ -33,7 +39,7 @@ ...@@ -33,7 +39,7 @@
background-size: cover; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: bottom center; background-position: bottom center;
padding-bottom: 1.14rem; /*padding-bottom: 1.14rem;*/
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
...@@ -87,6 +93,7 @@ ...@@ -87,6 +93,7 @@
text-align: center; text-align: center;
font-size: 0.26rem; font-size: 0.26rem;
line-height: 0.28rem; line-height: 0.28rem;
height: 0.56rem;
color: #fff; color: #fff;
width: 1.14rem; width: 1.14rem;
display: block; display: block;
...@@ -139,10 +146,12 @@ ...@@ -139,10 +146,12 @@
left: 0; left: 0;
bottom:0; bottom:0;
width: 100%; width: 100%;
background: none;
z-index: 999;
/*background-image: url("/images/show/fupin.png");*/ /*background-image: url("/images/show/fupin.png");*/
background-size: cover; /*background-size: cover;*/
background-repeat: no-repeat; /*background-repeat: no-repeat;*/
background-position: bottom center; /*background-position: bottom center;*/
} }
.bottom__icon{ .bottom__icon{
width: 0.63rem; width: 0.63rem;
...@@ -151,12 +160,15 @@ ...@@ -151,12 +160,15 @@
right: 0.41rem; right: 0.41rem;
bottom:0.51rem; bottom:0.51rem;
} }
.modal-wrap{ .modal-wrap{
background: rgba(0,0,0,.7); background: rgba(0,0,0,.7);
position: fixed; position: fixed;
z-index: 3; z-index: 1000;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.modal-container{ .modal-container{
...@@ -166,6 +178,7 @@ ...@@ -166,6 +178,7 @@
height: 10.65rem; height: 10.65rem;
position: relative; position: relative;
margin: 0.56rem auto 0.25rem; margin: 0.56rem auto 0.25rem;
position: relative;
} }
.poster-img{ .poster-img{
width: 100%; width: 100%;
...@@ -173,29 +186,30 @@ ...@@ -173,29 +186,30 @@
} }
.change-poster-btn{ .change-poster-btn{
position: absolute; position: absolute;
right: -0.25rem; right: 0.32rem;
top: -0.32rem; top: 0.3rem;
width: 2.07rem; width: 2.08rem;
height: 0.66rem; height: 0.67rem;
background: #FFFFFF; background: #FFFFFF;
font-size: 0.3rem; font-size: 0.3rem;
font-weight: 400; font-weight: 400;
color: #333333; color: #343434;;
line-height: 0.66rem; line-height: 0.66rem;
border-radius: 0.33rem; border-radius: 0.33rem;
text-align: center; text-align: center;
z-index: 9;
} }
.poster-action-box{ .poster-action-box{
width: 6.51rem; width: 6.51rem;
margin: 0 auto; margin: 0 auto;
display: flex; display: flex;
justify-content:space-between; justify-content:center;
align-items: center; align-items: center;
} }
.poster-action-btn{ .poster-action-btn{
width: 2.07rem;
height: 0.66rem; height: 0.66rem;
background: #FFFFFF; padding: 0 0.33rem;
background: rgba(255,255,255,.8);
font-size: 0.3rem; font-size: 0.3rem;
font-weight: 400; font-weight: 400;
color: #333333; color: #333333;
...@@ -203,6 +217,65 @@ ...@@ -203,6 +217,65 @@
border-radius: 0.33rem; border-radius: 0.33rem;
text-align: center; text-align: center;
} }
/*.poster-action-btn:last-child{*/
/* margin-left: 1.17rem;*/
/*}*/
.poster-content{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 3;
}
.poster-content__title{
margin-top: 1.14rem;
margin-left: 0.43rem;
font-size: 0.53rem;
font-weight: bold;
color: #FFFFFF;
line-height: 0.8rem;
}
.poster-content__content{
width: 4.12rem;
margin-top: 0.35rem;
margin-left: 0.43rem;
font-size: 0.3rem;
font-weight: bold;
color: #FFFFFF;
line-height: 0.36rem;
}
.poster-content__qrcode{
width: 1.07rem;
height: 1.07rem;
position: absolute;
left: 0.44rem;
bottom: 0.36rem;
}
.poster-content__userinfo{
position: absolute;
right: 0.47rem;
bottom: 0.32rem;
display: flex;
align-items: center;
}
.poster-content__userinfo .headimg{
width: 0.54rem;
height: 0.54rem;
background: #FFFFFF;
border-radius: 50%;
}
.poster-content__userinfo .tip{
font-size: 0.24rem;
font-weight: bold;
color: #FFFFFF;
line-height: 0.29rem;
margin-left: 0.11rem;
}
.content__text{ .content__text{
color: #fff; color: #fff;
...@@ -224,16 +297,34 @@ ...@@ -224,16 +297,34 @@
line-height: 0.48rem; line-height: 0.48rem;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
.pic-modal-wrap{
background: #000000;
position: fixed;
z-index: 1004;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
user-select:none;
}
.pic-modal-wrap .pic{
user-select:none;
}
</style> </style>
</head> </head>
<body> <body>
<!--:style="{backgroundImage:'url('+navs[activeIdx].bg_image+')'}"--> <!--:style="{backgroundImage:'url('+navs[activeIdx].bg_image+')'}"-->
<div id="app" class="page-wrap" v-if="loadReady" :class="{fixed:showPoster}" :style="{backgroundImage:'url('+navs[activeIdx].bg_image+')'}" > <div id="app" class="page-wrap" v-if="loadReady" :class="{fixed:showPoster}" :style="{backgroundImage:'url('+navs[activeIdx].bg_image+')'}" >
<canvas id="canvasEle"></canvas>
<div class="nav-list"> <div class="nav-list">
<div class="nav-item" v-for="(item,idx) in navs" :key="idx" :class="{active:idx===activeIdx}" @click="setActive(idx,item)"> <div class="nav-item" v-for="(item,idx) in navs" :key="idx" :class="{active:idx===activeIdx}" @click="setActive(idx,item)">
<div class="nav-item__iconbox"> <div class="nav-item__iconbox">
<img :src="item.small_image" class="nav-item__icon" /> <img v-if="idx===activeIdx" :src="item.icona" class="nav-item__icon" />
<img v-else :src="item.icon" class="nav-item__icon" />
</div> </div>
<div class="nav-item__mtitle">{{item.title}}</div> <div class="nav-item__mtitle">{{item.title}}</div>
</div> </div>
...@@ -246,55 +337,98 @@ ...@@ -246,55 +337,98 @@
<div class="thumb"> <div class="thumb">
<img class="thumb__img" :src="navs[activeIdx].image" /> <img class="thumb__img" :src="navs[activeIdx].image" />
</div> </div>
<div class="content__text"> <div class="content__text" v-if="activeIdx===0">
<div class="channel-title"> <div class="channel-title" >
<img src="https://wzw2020.oss-cn-beijing.aliyuncs.com/keche-2%20%E6%8B%B7%E8%B4%9D.png" /> <img src="https://wzw2020.oss-cn-beijing.aliyuncs.com/keche-2%20%E6%8B%B7%E8%B4%9D.png" />
<span>客车</span> <span>客车</span>
</div> </div>
<div class="channel-text"> <div class="channel-text" >
贵阳龙洞堡机场出站打车至贵阳客运东站，乘客车前往丹寨县（2 小时 30分钟），贵阳客运东站至丹寨县城每天有三班（发车时间分别为：10:30、13:30、 16:30）; 贵阳龙洞堡机场出站打车至贵阳客运东站，乘客车前往丹寨县（2 小时 30分钟），贵阳客运东站至丹寨县城每天有三班（发车时间分别为：10:30、13:30、 16:30）;
</div> </div>
<div class="channel-title"> <div class="channel-title" >
<img src="https://wzw2020.oss-cn-beijing.aliyuncs.com/method-draw-image%20%E6%8B%B7%E8%B4%9D.png" /> <img src="https://wzw2020.oss-cn-beijing.aliyuncs.com/method-draw-image%20%E6%8B%B7%E8%B4%9D.png" />
<span>高铁</span> <span>高铁</span>
</div> </div>
<div class="channel-text"> <div class="channel-text" >
到达贵阳龙洞堡机场后，从机场 B1 层乘高铁至三都县站。到达三都县高铁站后，可选择小巴或打车前往丹寨万达小镇，车程大约 35 分钟； 到达贵阳龙洞堡机场后，从机场 B1 层乘高铁至三都县站。到达三都县高铁站后，可选择小巴或打车前往丹寨万达小镇，车程大约 35 分钟；
</div> </div>
<div class="channel-title"> <div class="channel-title" >
<img src="https://wzw2020.oss-cn-beijing.aliyuncs.com/qiche%20%E6%8B%B7%E8%B4%9D.png" /> <img src="https://wzw2020.oss-cn-beijing.aliyuncs.com/qiche%20%E6%8B%B7%E8%B4%9D.png" />
<span>包车</span> <span>包车</span>
</div> </div>
<div class="channel-text"> <div class="channel-text" >
贵阳龙洞堡机场或贵阳市区可选择包车和拼车前往丹寨万达小镇，丹寨包车联系电话：189 8583 3071 贵阳龙洞堡机场或贵阳市区可选择包车和拼车前往丹寨万达小镇，丹寨包车联系电话：189 8583 3071
</div> </div>
</div> </div>
<div class="content__text" v-if="activeIdx===1">
<div class="channel-text" style="padding-top: 0.45rem;">
距离丹寨较近的高铁站为凯里南站、三都县站、都匀东站，从目的地乘坐高铁到达上述高铁站后，再换乘大巴车前往丹寨万
达小镇，车程大约 30-40 分钟。
</div>
</div>
<div class="content__text" v-if="activeIdx===2">
<div class="channel-text" style="padding-top: 0.45rem;">
贵阳客运东站、凯里城南客运站、都匀客运站、三都普安高铁站出口都有直达丹寨的大巴车。
</div>
</div>
<div class="content__text" v-if="activeIdx===3">
<div class="channel-text" style="padding-top: 0.45rem;">
贵阳方向自驾出发：<br/>
G76 厦蓉高速一 S62 余安高速一丹寨县；<br/>
长沙方向自驾出发：<br/>
S41 长 潭 西 高 速 一 S50 长 韶 娄 高 速 一 S55 二广高一 G60 沪昆高速一 S62 余安高速一丹寨县 ;<br/>
南宁方向自驾出发：<br/>
G75 兰海高速一 G76 厦蓉高速一 S62余安高速一丹寨县；<br/>
昆明方向自驾出发：<br/>
G65 杭瑞高速一 G60 沪昆高速一 G76 厦蓉高速一 S62 余安高速一丹寨县；<br/>
成都方向自驾出发：<br/>
G5 京昆高速一 G4215 蓉遵高速一 G56杭瑞高速一 G75 兰海高速一 G60 沪昆高速一 G76 厦蓉高速一 S62 余安高速一丹寨县 ;<br/>
重庆方向自驾出发：<br/>
G65 包 茂 高 速 一 G75 兰 海 高 速 一G6001 贵阳绕城高速一 G60 沪昆高速一 G76 厦蓉高速一 S62 余安高速一丹寨县。
</div>
</div>
<!-- <div class="content__text" v-html="navs[activeIdx].content"></div>--> <!-- <div class="content__text" v-html="navs[activeIdx].content"></div>-->
</div> </div>
<!----> <!---->
<div class="bottom" :style="{backgroundImage:'url('+navs[activeIdx].bg_image+')'}"> <!--:style="{backgroundImage:'url('+navs[activeIdx].bg_image+')'}"-->
<img @click="bindShareEvent" class="bottom__icon" src="/images/show/share.png" /> <div class="bottom" v-if="!showPoster">
<img @click="bindShareEvent" class="bottom__icon" src="./images/show/share.png" />
</div> </div>
<div class="modal-wrap" v-if="showPoster" @click="closeModal"> <div class="modal-wrap" v-if="showPoster" @click="closeModal">
<div class="modal-container"> <div class="modal-container">
<div class="poster"> <div class="poster">
<img :src="posterUrl" class="poster-img" /> <img :src="navs[activeIdx].share_image" class="poster-img" />
<div @click.stop="refreshShareText" class="change-poster-btn">换一换</div> <div @click.stop="refreshShareText" class="change-poster-btn">换一换</div>
<div class="poster-content">
<div class="poster-content__title">{{userInfo.nickname}}的<br/>2020幸运打卡地：丹寨</div>
<div class="poster-content__content">{{shareDesc}}</div>
<img class="poster-content__qrcode" :src="userInfo.qrcode"></img>
<div class="poster-content__userinfo">
<img class="headimg" :src="userInfo.head" />
<div class="tip">快跟着{{userInfo.nickname}}<br/>一起分享丹寨</div>
</div>
</div>
</div> </div>
<div class="poster-action-box"> <div class="poster-action-box">
<div @click.stop class="poster-action-btn">保存图片</div> <div @click.stop="previewImg" class="poster-action-btn">保存图片并发送给好友</div>
<div @click.stop class="poster-action-btn">分享好友</div> <!-- <div @click.stop="shareToFirends" class="poster-action-btn">分享好友</div>-->
</div> </div>
</div> </div>
</div> </div>
<div class="pic-modal-wrap" v-if="showPic" @click="showPic=false">
<img class="pic" style="width: 100%;" :src="posterUrl" />
</div>
</div> </div>
<script src="/libs/helper.js"></script> <canvas id="canvasEle"></canvas>
<script> <script>
function createImgByAsync(url) { function createImgByAsync(url) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
let img = new Image(); let img = new Image();
img.setAttribute("crossOrigin", 'Anonymous'); img.setAttribute("crossOrigin", 'Anonymous');
img.src = url; img.src = url + '?time=' + new Date().valueOf();
img.onload = function () { img.onload = function () {
resolve(img) resolve(img)
} }
...@@ -310,29 +444,17 @@ function convertCanvasToImage(canvas) { ...@@ -310,29 +444,17 @@ function convertCanvasToImage(canvas) {
} }
function cutstrFun(str, len) { function cutstrFun(str, len) {
console.log(str.length) // console.log(str.length)
var temp = str var temp = str
if (str.length > len) { if (str.length > len) {
temp = str.substr(0, len) + '..' temp = str.substr(0, len) + '..'
} }
console.log(temp) // console.log(temp)
return temp return temp
} }
/**
*
* @param str
* @param ctx
* @param canvasWidth
* @param initX
* @param initY
* @param lineHeight
* @param fontSize
* @param dpr
* @returns {number}
*/
function canvasTextAutoLine(str, ctx, canvasWidth, initX, initY, lineHeight,fontSize,dpr,bold=false) { function canvasTextAutoLine(str, ctx, canvasWidth, initX, initY, lineHeight,fontSize,dpr,bold=false) {
if(!str)return;
var lineWidth = 0 var lineWidth = 0
var lastSubStrIndex = 0, var lastSubStrIndex = 0,
totalLineHeight = 0 totalLineHeight = 0
...@@ -343,7 +465,7 @@ function canvasTextAutoLine(str, ctx, canvasWidth, initX, initY, lineHeight,font ...@@ -343,7 +465,7 @@ function canvasTextAutoLine(str, ctx, canvasWidth, initX, initY, lineHeight,font
for (let i = 0; i < str.length; i++) { for (let i = 0; i < str.length; i++) {
lineWidth += fontSize*dpr // 假定一个字是12px lineWidth += fontSize*dpr // 假定一个字是12px
console.log(lineWidth,canvasWidth) // console.log(lineWidth,canvasWidth)
// canvasWidth-initX*6 // canvasWidth-initX*6
if (lineWidth > canvasWidth) { // 减去initX,防止边界出现的问题 if (lineWidth > canvasWidth) { // 减去initX,防止边界出现的问题
ctx.fillText(str.substring(lastSubStrIndex, i), initX, initY) ctx.fillText(str.substring(lastSubStrIndex, i), initX, initY)
...@@ -363,17 +485,59 @@ var vueInstance = new Vue({ ...@@ -363,17 +485,59 @@ var vueInstance = new Vue({
el:'#app', el:'#app',
data(){ data(){
return { return {
showPic:false,
contentList:[], contentList:[],
loadReady:false, loadReady:false,
showPoster:false, showPoster:false,
shareName:'', shareTitle:'',
shareDesc:'',
activeIdx:0, activeIdx:0,
posterUrl:'', posterUrl:'',
navs:[] navs:[],
userInfo:{}
} }
}, },
methods:{ methods:{
async previewImg(){
this.posterUrl = await this.createdPoster()
this.showPic = true
// wx.previewImage({
// urls: [this.posterUrl] // 需要预览的图片http链接列表
// });
},
shareToFirends(){
const currentInfo = this.navs[this.activeIdx]
var shareDesc = this.navs[this.activeIdx].content
var largeShareName = `${this.userInfo.nickname}的`
var largeShareName2 = `2020幸运打卡地：丹寨`
var shareTitle = largeShareName+largeShareName2
if(wx){
wx.updateAppMessageShareData({
title: shareTitle, // 分享标题
desc: shareDesc, // 分享描述
link: FRONT_URL, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: currentInfo.small_image, // 分享图标
success: function () {
// 设置成功
}
})
wx.updateTimelineShareData({
title: shareTitle, // 分享标题
link: FRONT_URL, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: currentInfo.small_image, // 分享图标
success: function () {
// 设置成功
}
})
}
},
closeModal(){ closeModal(){
this.showPoster = false this.showPoster = false
this.posterUrl = '' this.posterUrl = ''
...@@ -400,10 +564,10 @@ var vueInstance = new Vue({ ...@@ -400,10 +564,10 @@ var vueInstance = new Vue({
async createdPoster(){ async createdPoster(){
const currentInfo = this.navs[this.activeIdx] const currentInfo = this.navs[this.activeIdx]
console.log(currentInfo) // console.log(currentInfo)
var userInfo = await getUserInfo(); var userInfo = await getUserInfo();
console.log(userInfo); // console.log(userInfo);
var shareName = `快跟着${userInfo.nickname} 一起分享丹寨` var shareName = `快跟着${userInfo.nickname} 一起分享丹寨`
...@@ -411,23 +575,23 @@ var vueInstance = new Vue({ ...@@ -411,23 +575,23 @@ var vueInstance = new Vue({
var ctx = canvas.getContext("2d"); var ctx = canvas.getContext("2d");
//var clientWidth = this.getWindowInfo().width;  //获取屏幕宽度用于canvas宽度自适应移动端屏幕 //var clientWidth = this.getWindowInfo().width;  //获取屏幕宽度用于canvas宽度自适应移动端屏幕
var dpr = this.getWindowInfo().dpr; var dpr = 1//this.getWindowInfo().dpr;
ctx.globalCompositeOperation = "source-atop";//** 坑锯齿感觉没什么用不知道是不是用错地方了 ** ctx.globalCompositeOperation = "source-atop";//** 坑锯齿感觉没什么用不知道是不是用错地方了 **
canvas.width = dpr * 652;  //由于手机屏幕时retina屏，都会多倍渲染，用dpr来动态设置画布宽高，避免图片模糊 canvas.width = dpr * 652;  //由于手机屏幕时retina屏，都会多倍渲染，用dpr来动态设置画布宽高，避免图片模糊
canvas.height = dpr * 1066;//去掉微信头部的状态栏应该是603 没搞懂603还是不能让图片满屏直接多加到了609 canvas.height = dpr * 1066;//去掉微信头部的状态栏应该是603 没搞懂603还是不能让图片满屏直接多加到了609
let share_image = await createImgByAsync(currentInfo.share_image); let share_image = await createImgByAsync('https://wanda-static.bdideal.com/danzhai-holiday-test/danzhai-content-15993815184676.png');
ctx.drawImage(share_image, 0, 0, canvas.width, canvas.height); ctx.drawImage(share_image, 0, 0, canvas.width, canvas.height);
userInfo.qrcode = 'https://qingclouds-server.oss-cn-shanghai.aliyuncs.com/da43bbbbc9dd8c82/59a3da8c0f33cd98.png'//替换下 //userInfo.qrcode = 'https://qingclouds-server.oss-cn-shanghai.aliyuncs.com/da43bbbbc9dd8c82/59a3da8c0f33cd98.png'//替换下
let qr_image = await createImgByAsync(userInfo.qrcode); let qr_image = await createImgByAsync(userInfo.qrcode);
console.log(qr_image) // console.log(qr_image)
ctx.drawImage(qr_image, dpr * 45, dpr * 923, dpr * 110, dpr * 110); ctx.drawImage(qr_image, dpr * 45, dpr * 923, dpr * 110, dpr * 110);
let head_image = await createImgByAsync(userInfo.head); let head_image = await createImgByAsync(userInfo.head);
console.log(head_image) // console.log(head_image)
ctx.drawImage(head_image, dpr * 395, dpr * 980, dpr * 55, dpr * 55); ctx.drawImage(head_image, dpr * 395, dpr * 980, dpr * 55, dpr * 55);
canvasTextAutoLine(shareName, ctx, dpr*170, dpr * 465, dpr * 1005,32,24,dpr) canvasTextAutoLine(shareName, ctx, dpr*170, dpr * 465, dpr * 1005,32,24,dpr)
...@@ -444,42 +608,57 @@ var vueInstance = new Vue({ ...@@ -444,42 +608,57 @@ var vueInstance = new Vue({
}, },
async refreshShareText(){ async refreshShareText(){
this.navs[this.activeIdx].content = this.contentList[parseInt(Math.random()*this.contentList.length)].content var randStr = this.contentList[parseInt(Math.random()*this.contentList.length)].content
// console.log(randStr)
this.navs[this.activeIdx].content = randStr
this.shareDesc = randStr
this.posterUrl = await this.createdPoster() // this.posterUrl = await this.createdPoster()
// this.posterUrl = currentInfo.poster // // this.posterUrl = currentInfo.poster
this.showPoster = true // this.showPoster = true
}, },
async bindShareEvent(){ async bindShareEvent(){
this.posterUrl = await this.createdPoster() //this.posterUrl = await this.createdPoster()
// this.posterUrl = currentInfo.poster // this.posterUrl = currentInfo.poster
this.showPoster = true this.showPoster = true
}, },
setActive(idx){ setActive(idx,initJsSdk=true){
this.activeIdx = Number(idx) this.activeIdx = Number(idx)
this.shareDesc = this.navs[this.activeIdx].content
if(initJsSdk)this.shareToFirends()
}, },
async _init_func(){ async _init_func(){
var category_id = getQueryByString(location.href,'id') var category_id = getQueryByString(location.href,'id')
// this.navs = await $get('/content/list?category_id='+category_id).then(res=>res.data).catch(err=>{throw err}) // this.navs = await $get('/content/list?category_id='+category_id).then(res=>res.data).catch(err=>{throw err})
this.navs = [ this.navs = [
{title:'飞机',small_image:'https://wzw2020.oss-cn-beijing.aliyuncs.com/%E9%A3%9E%E6%9C%BA.png',bg_image:'https://wzw2020.oss-cn-beijing.aliyuncs.com/bg.png',image:'https://wzw2020.oss-cn-beijing.aliyuncs.com/%E5%9C%86%E8%A7%92%E7%9F%A9%E5%BD%A2%201.png'}, {title:'飞机',icon:'https://wzw2020.oss-cn-beijing.aliyuncs.com/icon/fly.png',icona:'https://wzw2020.oss-cn-beijing.aliyuncs.com/icon/fly-a.png',share_image:'https://wanda-static.bdideal.com/danzhai-holiday-test/danzhai-content-15993815184676.png',small_image:'https://wzw2020.oss-cn-beijing.aliyuncs.com/%E9%A3%9E%E6%9C%BA.png',bg_image:'https://wzw2020.oss-cn-beijing.aliyuncs.com/bg.png',image:'https://wzw2020.oss-cn-beijing.aliyuncs.com/%E5%9C%86%E8%A7%92%E7%9F%A9%E5%BD%A2%201.png'},
{title:'高铁',small_image:'https://wzw2020.oss-cn-beijing.aliyuncs.com/%E9%AB%98%E9%93%81.png',bg_image:'https://wzw2020.oss-cn-beijing.aliyuncs.com/bg.png',image:'https://wzw2020.oss-cn-beijing.aliyuncs.com/%E5%9C%86%E8%A7%92%E7%9F%A9%E5%BD%A2%201.png'}, {title:'高铁',icon:'https://wzw2020.oss-cn-beijing.aliyuncs.com/icon/tie.png',icona:'https://wzw2020.oss-cn-beijing.aliyuncs.com/icon/tie-a.png',share_image:'https://wanda-static.bdideal.com/danzhai-holiday-test/danzhai-content-15993815184676.png',small_image:'https://wzw2020.oss-cn-beijing.aliyuncs.com/%E9%AB%98%E9%93%81.png',bg_image:'https://wzw2020.oss-cn-beijing.aliyuncs.com/bg.png',image:'https://wzw2020.oss-cn-beijing.aliyuncs.com/%E5%9C%86%E8%A7%92%E7%9F%A9%E5%BD%A2%201.png'},
{title:'客运',small_image:'https://wzw2020.oss-cn-beijing.aliyuncs.com/%E5%AE%A2%E8%BF%90.png',bg_image:'https://wzw2020.oss-cn-beijing.aliyuncs.com/bg.png',image:'https://wzw2020.oss-cn-beijing.aliyuncs.com/%E5%9C%86%E8%A7%92%E7%9F%A9%E5%BD%A2%201.png'}, {title:'客运',icon:'https://wzw2020.oss-cn-beijing.aliyuncs.com/icon/cart.png',icona:'https://wzw2020.oss-cn-beijing.aliyuncs.com/icon/cart-a.png',share_image:'https://wanda-static.bdideal.com/danzhai-holiday-test/danzhai-content-15993815184676.png',small_image:'https://wzw2020.oss-cn-beijing.aliyuncs.com/%E5%AE%A2%E8%BF%90.png',bg_image:'https://wzw2020.oss-cn-beijing.aliyuncs.com/bg.png',image:'https://wzw2020.oss-cn-beijing.aliyuncs.com/%E5%9C%86%E8%A7%92%E7%9F%A9%E5%BD%A2%201.png'},
{title:'自驾',small_image:'https://wzw2020.oss-cn-beijing.aliyuncs.com/%E8%87%AA%E9%A9%BE.png',bg_image:'https://wzw2020.oss-cn-beijing.aliyuncs.com/bg.png',image:'https://wzw2020.oss-cn-beijing.aliyuncs.com/%E5%9C%86%E8%A7%92%E7%9F%A9%E5%BD%A2%201.png'}, {title:'自驾',icon:'https://wzw2020.oss-cn-beijing.aliyuncs.com/icon/zijia.png',icona:'https://wzw2020.oss-cn-beijing.aliyuncs.com/icon/zijia-a.png',share_image:'https://wanda-static.bdideal.com/danzhai-holiday-test/danzhai-content-15993815184676.png',small_image:'https://wzw2020.oss-cn-beijing.aliyuncs.com/%E8%87%AA%E9%A9%BE.png',bg_image:'https://wzw2020.oss-cn-beijing.aliyuncs.com/bg.png',image:'https://wzw2020.oss-cn-beijing.aliyuncs.com/%E5%9C%86%E8%A7%92%E7%9F%A9%E5%BD%A2%201.png'},
] ]
console.log(this.navs) // console.log(this.navs)
this.contentList = await $get('/travel/desc').then(res=>res.data).catch(err=>{throw err}) this.contentList = await $get('/travel/desc').then(res=>res.data).catch(err=>{throw err})
this.refreshShareText()
// var idx = getQueryByString(location.href,'idx') // var idx = getQueryByString(location.href,'idx')
// if(!isNaN(idx) && idx>=0){ // if(!isNaN(idx) && idx>=0){
// this.setActive(idx) // this.setActive(idx)
// } // }
this.setActive(0) var userInfo = await getUserInfo();
// console.log(userInfo);
this.$set(this,'userInfo',userInfo)
var largeShareName = `${userInfo.nickname}的`
var largeShareName2 = `2020幸运打卡地：丹寨`
this.shareTitle = largeShareName+largeShareName2
this.setActive(0,false)
await WX_JSSDK_INIT(this).then(wxEnv=>{ await WX_JSSDK_INIT(this).then(wxEnv=>{
console.log(wxEnv) // console.log(wxEnv)
this.shareToFirends()
}).catch(err=>{ }).catch(err=>{
console.log(err) console.log(err)
}) })
...@@ -492,5 +671,7 @@ var vueInstance = new Vue({ ...@@ -492,5 +671,7 @@ var vueInstance = new Vue({
} }
}) })
</script> </script>
<script src="./libs/jweixin-1.6.0.js"></script>
<script src="./libs/rem.js"></script>
</body> </body>
</html> </html>
weixinySgXDAJltY/danzhai-holiday-test/index.html
...@@ -9,12 +9,12 @@ ...@@ -9,12 +9,12 @@
<meta http-equiv="x-ua-compatible" content="IE=edge"/> <meta http-equiv="x-ua-compatible" content="IE=edge"/>
</head> </head>
<body id="app"> <body id="app">
<script src="/libs/helper.js"></script> <script src="../../libs/helper.js"></script>
<script> <script>
async function init_applcation() { async function init_applcation() {
var code = getQueryByString(location.href,'code') var code = getQueryByString(location.href,'code')
if(code){ if(code){
location.href = `/index.html?code=${code}` location.href = `../../index.html?code=${code}`
} }
} }
......
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