Skip to content

shuzilixiangwaibao / 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 @@
margin: 0;
padding: 0;
border: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.page-wrap {
......@@ -20,58 +24,83 @@
bottom: 0;
left: 0;
right: 0;
background-image: url("/images/load/hello.png");
background-image: url("./images/load/hello.png");
background-size: cover;
background-repeat: no-repeat;
background-position: bottom center;
}
.logo {
margin: 30px 0 0 20px;
height: 14px;
margin: 0.46rem 0 0 0.35rem;
height: 0.43rem;
display: block;
}
.title {
position: absolute;
width: 235px;
bottom: 207px;
width: 4.24rem;
top: 1.88rem;
left: 50%;
transform: translateX(-50%);
}
.mtitle {
position: absolute;
height: 15px;
bottom: 162px;
width: 5.84rem;
top:9.04rem;
left: 50%;
transform: translateX(-50%);
}
.go {
position: absolute;
height: 63px;
bottom: 18px;
width: 2.49rem;
bottom: 0.31rem;
left: 50%;
transform: translateX(-50%);
}
</style>
<!-- <script src="/libs/vue/vue.js"></script>-->
<script src="/libs/axios.min.js"></script>
<script src="./libs/jweixin-1.6.0.js"></script>
<script src="./libs/rem.js"></script>
<!-- <script src="./libs/vue/vue.js"></script>-->
<script src="./libs/axios.min.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"/>
<img class="logo" src="./images/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 src="/libs/helper.js"></script>
<script src="./libs/helper.js"></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() {
if(!checkIsLogin()){
var code = getQueryByString(location.href,'code')
//没有登录情况下
if(code){
......@@ -83,15 +112,35 @@ async function init_applcation() {
location.href = url
return;
}
}else{
await WX_JSSDK_INIT(this).then(wxEnv=>{
console.log(wxEnv)
_init_wx_jssdk()
}).catch(err=>{
console.log(err)
})
}
}
init_applcation()
function toPano() {
location.href = '/tour.html'
location.href = './tour.html'
}
</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>
</html>
libs/helper.js
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) => {
// let {origin,pathname} = location
// `${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
console.log(res)
// 线上环境，听服务器的，本地的一律调试
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'];
const { noncestr, timestamp, appId, signature } = config
const { nonceStr, timestamp, appId, signature,jsApiList } = config
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 {
isAddDot = false,
startP, disX, disY, index;
var VUEInstance = config.vm
if (lis.length < 3) {
throw ("image number need 3+");
}
......@@ -121,6 +124,7 @@ class Swiper {
}
dots[index].className = 'active';
}
VUEInstance.swiperActive = index
}
function setTimer() {
if (autoPlay) {
......
route.html
<!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="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="/libs/rem.js"></script>
<script src="/libs/vue/vue.js"></script>
<script src="/libs/axios.min.js"></script>
<style>
#canvasEle{
position: absolute;
left: 100%;
}
@font-face {
font-family: myFont;
src: url('/font/ltzk.ttf');
}
*{
margin: 0;
padding: 0;
border:none;
}
.page-wrap{
position: fixed;
width: 100%;
height: 100%;
/*background-image: url("/images/show/fupin.png");*/
background-size: cover;
background-repeat: no-repeat;
background-position: bottom center;
padding-bottom: 1.14rem;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.nav-list{
margin-top: 0.35rem;
width: 100%;
white-space: nowrap;
height: 1.85rem;
overflow-y: hidden;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
}
.nav-list::-webkit-scrollbar{
display: none;
}
.nav-item{
display: inline-block;
width: 1.14rem;
height: 1.85rem;
margin-left: 0.42rem;
border-radius: 0.1rem;
overflow: hidden;
}
.nav-item:last-child{
margin-right: 0.42rem;
}
.nav-item.active{
background: rgba(23, 40, 63, 0.3);
}
.nav-item__iconbox{
margin: 0.07rem auto auto;
width: 1rem;
height: 1rem;
position: relative;
}
.nav-item__icon{
position: absolute;
left: 50%;
top: 50%;
vertical-align: top;
transform: translate(-50%,-50%);
width: 0.95rem;
height: 0.95rem;
overflow: hidden;
}
.nav-item__mtitle{
margin-top: 0.1rem;
text-align: center;
font-size: 0.26rem;
line-height: 0.28rem;
color: #fff;
width: 1.14rem;
display: block;
white-space: normal;
}
.mtitle{
font-family: myFont;
margin-top: 0.57rem;
color: #fff;
font-size: 0.72rem;
text-align: center;
position: relative;
}
.mtitle__icon{
position: absolute;
right: 0.43rem;
top: 50%;
transform: translateY(-50%);
width: 0.6rem;
height: 0.6rem;
}
.thumb{
padding: 0.45rem 0 0.54rem;
text-align: center;
}
.thumb__img{
width: 6.7rem;
vertical-align: top;
}
.content{
width: 6.7rem;
margin: 0 auto;
flex:1;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
.content::-webkit-scrollbar{
display: none;
}
.content__text{
font-size: 0.3rem;
color: #fff;
line-height: 0.55rem;
}
.bottom{
height: 1.14rem;
position: fixed;
left: 0;
bottom:0;
width: 100%;
/*background-image: url("/images/show/fupin.png");*/
background-size: cover;
background-repeat: no-repeat;
background-position: bottom center;
}
.bottom__icon{
width: 0.63rem;
height: 0.63rem;
position: absolute;
right: 0.41rem;
bottom:0.51rem;
}
.modal-wrap{
background: rgba(0,0,0,.7);
position: fixed;
z-index: 3;
width: 100%;
height: 100%;
}
.modal-container{
}
.poster{
width: 6.51rem;
height: 10.65rem;
position: relative;
margin: 0.56rem auto 0.25rem;
}
.poster-img{
width: 100%;
height: 100%;
}
.change-poster-btn{
position: absolute;
right: -0.25rem;
top: -0.32rem;
width: 2.07rem;
height: 0.66rem;
background: #FFFFFF;
font-size: 0.3rem;
font-weight: 400;
color: #333333;
line-height: 0.66rem;
border-radius: 0.33rem;
text-align: center;
}
.poster-action-box{
width: 6.51rem;
margin: 0 auto;
display: flex;
justify-content:space-between;
align-items: center;
}
.poster-action-btn{
width: 2.07rem;
height: 0.66rem;
background: #FFFFFF;
font-size: 0.3rem;
font-weight: 400;
color: #333333;
line-height: 0.66rem;
border-radius: 0.33rem;
text-align: center;
}
.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.5rem;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
}
.channel-text:last-child{
border-bottom: 1px solid #fff;
margin-bottom: 0.48rem;
}
@font-face {
font-family: myFont;
src: url('/font/ltzk.ttf');
}
.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;
}
</style>
<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/jweixin-1.6.0.js"></script>
<script src="./libs/rem.js"></script>
<script src="./libs/vue/vue.js"></script>
<script src="./libs/axios.min.js"></script>
<style>
#canvasEle {
position: fixed;
left: 200%;
width: 652px;
height: 1066px;
z-index: -3;
}
@font-face {
font-family: myFont;
src: url('./font/ltzk.ttf');
}
* {
margin: 0;
padding: 0;
border: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.page-wrap {
position: fixed;
width: 100%;
height: 100%;
/*background-image: url("./images/show/fupin.png");*/
background-size: cover;
background-repeat: no-repeat;
background-position: bottom center;
/ / padding-bottom: 1.14 rem;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.nav-list {
margin-top: 0.35rem;
width: 100%;
white-space: nowrap;
height: 1.85rem;
overflow-y: hidden;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
}
.nav-list::-webkit-scrollbar {
display: none;
}
.nav-item {
display: inline-block;
width: 1.14rem;
height: 1.85rem;
margin-left: 0.42rem;
border-radius: 0.1rem;
overflow: hidden;
}
.nav-item:last-child {
margin-right: 0.42rem;
}
.nav-item.active {
background: rgba(23, 40, 63, 0.3);
}
.nav-item__iconbox {
margin: 0.07rem auto auto;
width: 1rem;
height: 1rem;
position: relative;
}
.nav-item__icon {
position: absolute;
left: 50%;
top: 50%;
vertical-align: top;
transform: translate(-50%, -50%);
width: 0.95rem;
height: 0.95rem;
overflow: hidden;
}
.nav-item__mtitle {
margin-top: 0.1rem;
text-align: center;
font-size: 0.26rem;
line-height: 0.28rem;
height: 0.56rem;
color: #fff;
width: 1.14rem;
display: block;
white-space: normal;
}
.mtitle {
font-family: myFont;
margin-top: 0.57rem;
color: #fff;
font-size: 0.72rem;
text-align: center;
position: relative;
}
.mtitle__icon {
position: absolute;
right: 0.43rem;
top: 50%;
transform: translateY(-50%);
width: 0.6rem;
height: 0.6rem;
}
.thumb {
padding: 0.45rem 0 0.54rem;
text-align: center;
}
.thumb__img {
width: 6.7rem;
vertical-align: top;
}
.content {
width: 6.7rem;
margin: 0 auto;
flex: 1;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
.content::-webkit-scrollbar {
display: none;
}
.content__text {
font-size: 0.3rem;
color: #fff;
line-height: 0.55rem;
}
.bottom {
height: 1.14rem;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background: none;
z-index: 999;
/*background-image: url("./images/show/fupin.png");*/
/*background-size: cover;*/
/*background-repeat: no-repeat;*/
/*background-position: bottom center;*/
}
.bottom__icon {
width: 0.63rem;
height: 0.63rem;
position: absolute;
right: 0.41rem;
bottom: 0.51rem;
}
.modal-wrap {
background: rgba(0, 0, 0, .7);
position: fixed;
z-index: 3;
width: 100%;
height: 100%;
}
.modal-container {
}
.poster {
width: 6.51rem;
height: 10.65rem;
position: relative;
margin: 0.56rem auto 0.25rem;
}
.poster-img {
width: 100%;
height: 100%;
}
.change-poster-btn {
position: absolute;
right: 0.32rem;
top: 0.3rem;
width: 2.08rem;
height: 0.67rem;
background: #FFFFFF;
font-size: 0.3rem;
font-weight: 400;
color: #343434;;
line-height: 0.66rem;
border-radius: 0.33rem;
text-align: center;
z-index: 9;
}
.poster-action-box {
width: 6.51rem;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
.poster-action-btn {
height: 0.66rem;
padding: 0 0.33rem;
background: rgba(255,255,255,.8);
font-size: 0.3rem;
font-weight: 400;
color: #333333;
line-height: 0.66rem;
border-radius: 0.33rem;
text-align: center;
}
.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 {
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>
<body>
<!--: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-item" v-for="(item,idx) in navs" :key="idx" :class="{active:idx===activeIdx}" @click="setActive(idx,item)">
<div class="nav-item__iconbox">
<img :src="item.small_image" class="nav-item__icon" />
</div>
<div class="nav-item__mtitle">{{item.title}}</div>
</div>
</div>
<!-- <div class="mtitle">-->
<!-- {{navs[activeIdx].title}}-->
<!-- </div>-->
<div 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>
<div class="channel-title">
<span>第二天</span>
</div>
<div class="channel-text">
到达贵阳龙洞堡机场后，从机场 B1 层乘高铁至三都县站。到达三都县高铁站后，可选择小巴或打车前往丹寨万达小镇，车程大约 35 分钟；
</div>
</div>
<!-- <div class="content__text" v-html="navs[activeIdx].content"></div>-->
</div>
<!---->
<div class="bottom" :style="{backgroundImage:'url('+navs[activeIdx].bg_image+')'}">
<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="posterUrl" class="poster-img" />
<div @click.stop="refreshShareText" class="change-poster-btn">换一换</div>
</div>
<div class="poster-action-box">
<div @click.stop class="poster-action-btn">保存图片</div>
<div @click.stop class="poster-action-btn">分享好友</div>
</div>
</div>
</div>
<div id="app" class="page-wrap" v-if="loadReady" :class="{fixed:showPoster}"
: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-item__iconbox">
<img v-if="idx===activeIdx" :src="item.icona" class="nav-item__icon" />
<img v-else :src="item.icon" class="nav-item__icon" />
<!-- <img :src="item.small_image" class="nav-item__icon"/>-->
</div>
<div class="nav-item__mtitle">{{item.title}}</div>
</div>
</div>
<div v-if="activeIdx===0" 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>
</div>
</div>
<div v-if="activeIdx===1" 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>
</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>
<script src="/libs/helper.js"></script>
<canvas id="canvasEle"></canvas>
<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)
}
})
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;
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
// console.log(str.length)
var temp = str
if (str.length > len) {
temp = str.substr(0, len) + '..'
}
// console.log(temp)
return temp
}
/**
......@@ -372,164 +637,243 @@ function cutstrFun(str, len) {
* @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++) {
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 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
}
var vueInstance = new Vue({
el:'#app',
data(){
return {
contentList:[],
loadReady:false,
showPoster:false,
shareName:'',
activeIdx:0,
posterUrl:'',
navs:[]
}
},
methods:{
closeModal(){
this.showPoster = false
this.posterUrl = ''
},
bindSave(){
// wx.previewImage({
// urls: [this.posterUrl] // 需要预览的图片http链接列表
// });
},
// 获取页面dpr和宽度
getWindowInfo() {
var windowInfo = {};
windowInfo.dpr = window.devicePixelRatio;
if (window.innerWidth) {
windowInfo.width = window.innerWidth;
}
else {
windowInfo.width = document.body.clientWidth;
}
return windowInfo;
},
async createdPoster(){
const currentInfo = this.navs[this.activeIdx]
console.log(currentInfo)
var userInfo = await getUserInfo();
console.log(userInfo);
var shareName = `快跟着${userInfo.nickname} 一起分享丹寨`
var canvas = document.getElementById("canvasEle");
var ctx = canvas.getContext("2d");
//var clientWidth = this.getWindowInfo().width;  //获取屏幕宽度用于canvas宽度自适应移动端屏幕
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);
ctx.drawImage(share_image, 0, 0, canvas.width, canvas.height);
userInfo.qrcode = 'https://qingclouds-server.oss-cn-shanghai.aliyuncs.com/da43bbbbc9dd8c82/59a3da8c0f33cd98.png'//替换下
let qr_image = await createImgByAsync(userInfo.qrcode);
console.log(qr_image)
ctx.drawImage(qr_image, dpr * 45, dpr * 923, dpr * 110, dpr * 110);
let head_image = await createImgByAsync(userInfo.head);
console.log(head_image)
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(currentInfo.content, ctx, dpr*410, dpr * 45, dpr * 220,45,30,dpr,true)
var largeShareName = `${userInfo.nickname}的`
canvasTextAutoLine(largeShareName, ctx, canvas.width, dpr * 40, dpr * 84,52,52,dpr,true)
var largeShareName2 = `2020幸运打卡地：丹寨`
canvasTextAutoLine(largeShareName2, ctx, canvas.width, dpr * 40, dpr * 147,52,52,dpr,true)
return canvas.toDataURL("image/png");
},
async refreshShareText(){
this.navs[this.activeIdx].content = this.contentList[parseInt(Math.random()*this.contentList.length)].content
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){
this.activeIdx = Number(idx)
},
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:'两天一晚',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:'三天两晚',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'}
]
console.log(this.navs)
this.contentList = await $get('/travel/desc').then(res=>res.data).catch(err=>{throw err})
// var idx = getQueryByString(location.href,'idx')
// if(!isNaN(idx) && idx>=0){
// this.setActive(idx)
// }
this.setActive(0)
await WX_JSSDK_INIT(this).then(wxEnv=>{
console.log(wxEnv)
}).catch(err=>{
console.log(err)
})
this.loadReady = true
}
},
created(){
this._init_func()
}
el: '#app',
data() {
return {
showPic:false,
contentList: [],
loadReady: false,
showPoster: false,
shareTitle:'',
shareDesc:'',
activeIdx: 0,
posterUrl: '',
navs: [],
userInfo:{}
}
},
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() {
this.showPoster = false
this.posterUrl = ''
},
bindSave() {
// wx.previewImage({
// urls: [this.posterUrl] // 需要预览的图片http链接列表
// });
},
// 获取页面dpr和宽度
getWindowInfo() {
var windowInfo = {};
windowInfo.dpr = window.devicePixelRatio;
if (window.innerWidth) {
windowInfo.width = window.innerWidth;
} else {
windowInfo.width = document.body.clientWidth;
}
return windowInfo;
},
async createdPoster() {
const currentInfo = this.navs[this.activeIdx]
// console.log(currentInfo)
var userInfo = await getUserInfo();
// console.log(userInfo);
var shareName = `快跟着${userInfo.nickname} 一起分享丹寨`
var canvas = document.getElementById("canvasEle");
var ctx = canvas.getContext("2d");
//var clientWidth = this.getWindowInfo().width;  //获取屏幕宽度用于canvas宽度自适应移动端屏幕
var dpr = 1//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('https://wanda-static.bdideal.com/danzhai-holiday-test/danzhai-content-15993814862705.png');
ctx.drawImage(share_image, 0, 0, canvas.width, canvas.height);
//userInfo.qrcode = 'https://qingclouds-server.oss-cn-shanghai.aliyuncs.com/da43bbbbc9dd8c82/59a3da8c0f33cd98.png'//替换下
let qr_image = await createImgByAsync(userInfo.qrcode);
// console.log(qr_image)
ctx.drawImage(qr_image, dpr * 45, dpr * 923, dpr * 110, dpr * 110);
let head_image = await createImgByAsync(userInfo.head);
// console.log(head_image)
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(currentInfo.content, ctx, dpr * 410, dpr * 45, dpr * 220, 45, 30, dpr, true)
var largeShareName = `${userInfo.nickname}的`
canvasTextAutoLine(largeShareName, ctx, canvas.width, dpr * 40, dpr * 84, 52, 52, dpr, true)
var largeShareName2 = `2020幸运打卡地：丹寨`
canvasTextAutoLine(largeShareName2, ctx, canvas.width, dpr * 40, dpr * 147, 52, 52, dpr, true)
return canvas.toDataURL("image/png");
},
async refreshShareText() {
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 = 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>
</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 @@
<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="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="/libs/rem.js"></script>
<script src="/libs/vue/vue.js"></script>
<script src="/libs/axios.min.js"></script>
<script src="./libs/helper.js"></script>
<script src="./libs/vue/vue.js"></script>
<script src="./libs/axios.min.js"></script>
<style>
#canvasEle{
position: absolute;
left: 100%;
position: fixed;
left: 200%;
width: 652px;
height: 1066px;
z-index: -3;
}
@font-face {
font-family: myFont;
src: url('/font/ltzk.ttf');
src: url('./font/ltzk.ttf');
}
*{
margin: 0;
padding: 0;
border:none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
::-webkit-scrollbar{
display: none;
}
.page-wrap{
position: fixed;
width: 100%;
height: 100%;
/*background-image: url("/images/show/fupin.png");*/
/*background-image: url("./images/show/fupin.png");*/
background-size: cover;
background-repeat: no-repeat;
background-position: bottom center;
padding-bottom: 1.14rem;
/*padding-bottom: 1.14rem;*/
box-sizing: border-box;
display: flex;
flex-direction: column;
......@@ -54,7 +63,7 @@
}
.nav-item{
display: inline-block;
width: 1.14rem;
width: 1.3rem;
height: 1.85rem;
margin-left: 0.42rem;
border-radius: 0.1rem;
......@@ -67,7 +76,7 @@
background: rgba(23, 40, 63, 0.3);
}
.nav-item__iconbox{
margin: 0.07rem auto auto;
margin: 0.2rem auto auto;
width: 1rem;
height: 1rem;
border-radius: 50%;
......@@ -89,10 +98,10 @@
.nav-item__mtitle{
margin-top: 0.1rem;
text-align: center;
font-size: 0.26rem;
font-size: 0.24rem;
line-height: 0.28rem;
color: #fff;
width: 1.14rem;
width: 1.3rem;
display: block;
white-space: normal;
}
......@@ -127,27 +136,28 @@
margin: 0 auto;
flex:1;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
.content::-webkit-scrollbar{
display: none;
/*-webkit-overflow-scrolling: touch;*/
}
.content__text{
font-size: 0.3rem;
color: #fff;
line-height: 0.55rem;
}
.bottom{
height: 1.14rem;
position: fixed;
left: 0;
bottom:0;
width: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: bottom center;
background: none;
z-index: 999;
/*background-size: cover;*/
/*background-repeat: no-repeat;*/
/*background-position: bottom center;*/
}
.bottom__icon{
width: 0.63rem;
......@@ -156,12 +166,31 @@
right: 0.41rem;
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{
background: rgba(0,0,0,.7);
position: fixed;
z-index: 3;
z-index: 1000;
width: 100%;
height: 100%;
}
.modal-container{
......@@ -171,6 +200,7 @@
height: 10.65rem;
position: relative;
margin: 0.56rem auto 0.25rem;
position: relative;
}
.poster-img{
width: 100%;
......@@ -178,29 +208,30 @@
}
.change-poster-btn{
position: absolute;
right: -0.25rem;
top: -0.32rem;
width: 2.07rem;
height: 0.66rem;
right: 0.32rem;
top: 0.3rem;
width: 2.08rem;
height: 0.67rem;
background: #FFFFFF;
font-size: 0.3rem;
font-weight: 400;
color: #333333;
color: #343434;;
line-height: 0.66rem;
border-radius: 0.33rem;
text-align: center;
z-index: 9;
}
.poster-action-box{
width: 6.51rem;
margin: 0 auto;
display: flex;
justify-content:space-between;
justify-content:center;
align-items: center;
}
.poster-action-btn{
width: 2.07rem;
height: 0.66rem;
background: #FFFFFF;
padding: 0 0.33rem;
background: rgba(255,255,255,.8);
font-size: 0.3rem;
font-weight: 400;
color: #333333;
......@@ -208,13 +239,70 @@
border-radius: 0.33rem;
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>
</head>
<body>
<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-item" v-for="(item,idx) in navs" :key="idx" :class="{active:idx===activeIdx}" @click="setActive(idx,item)">
<div class="nav-item__iconbox">
......@@ -230,114 +318,118 @@
<img class="thumb__img" :src="navs[activeIdx].image" />
</div>
<div class="content">
<div class="content__text" v-html="navs[activeIdx].content"></div>
</div>
<div class="bottom" :style="{backgroundImage:'url('+navs[activeIdx].bg_image+')'}">
<img @click="bindShareEvent" class="bottom__icon" src="/images/show/share.png" />
<!--: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="posterUrl" class="poster-img" />
<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 class="poster-action-btn">保存图片</div>
<div @click.stop class="poster-action-btn">分享好友</div>
<div @click.stop="previewImg" class="poster-action-btn">保存图片并发送给好友</div>
<!-- <div @click.stop="shareToFirends" class="poster-action-btn">分享好友</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) {
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) {
var lineWidth = 0
var lastSubStrIndex = 0,
totalLineHeight = 0
var fz = fontSize*dpr
ctx.font = (bold?'bold ':'')+`${fz}px "微软雅黑"`;
ctx.fillStyle = "#fff";
<div class="pic-modal-wrap" v-if="showPic" @click="showPic=false">
<img class="pic" style="width: 100%;" :src="posterUrl" />
</div>
</div>
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
}
<canvas id="canvasEle"></canvas>
<script src="./libs/jweixin-1.6.0.js"></script>
<script>
var vueInstance = new Vue({
el:'#app',
data(){
return {
showPic:false,
contentList:[],
loadReady:false,
showPoster:false,
shareName:'',
shareTitle:'',
shareDesc:'',
activeIdx:0,
posterUrl:'',
navs:[]
navs:[],
userInfo:{}
}
},
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(){
this.showPoster = false
this.posterUrl = ''
// hideModal()
},
bindSave(){
// wx.previewImage({
......@@ -366,13 +458,14 @@ var vueInstance = new Vue({
var userInfo = await getUserInfo();
console.log(userInfo);
var shareName = `快跟着${userInfo.nickname} 一起分享丹寨`
var shareUserName = `快跟着${userInfo.nickname} 一起分享丹寨`
var canvas = document.getElementById("canvasEle");
var ctx = canvas.getContext("2d");
//var clientWidth = this.getWindowInfo().width;  //获取屏幕宽度用于canvas宽度自适应移动端屏幕
var dpr = this.getWindowInfo().dpr;
var dpr = 1//this.getWindowInfo().dpr;
ctx.globalCompositeOperation = "source-atop";//** 坑锯齿感觉没什么用不知道是不是用错地方了 **
canvas.width = dpr * 652;  //由于手机屏幕时retina屏，都会多倍渲染，用dpr来动态设置画布宽高，避免图片模糊
canvas.height = dpr * 1066;//去掉微信头部的状态栏应该是603 没搞懂603还是不能让图片满屏直接多加到了609
......@@ -381,7 +474,7 @@ var vueInstance = new Vue({
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);
console.log(qr_image)
ctx.drawImage(qr_image, dpr * 45, dpr * 923, dpr * 110, dpr * 110);
......@@ -391,34 +484,42 @@ var vueInstance = new Vue({
console.log(head_image)
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}的`
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幸运打卡地：丹寨`
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");
},
async refreshShareText(){
this.navs[this.activeIdx].content = this.contentList[parseInt(Math.random()*this.contentList.length)].content
this.posterUrl = await this.createdPoster()
// this.posterUrl = currentInfo.poster
this.showPoster = true
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 = currentInfo.poster
//this.showPoster = true
// showModal()
},
async bindShareEvent(){
this.posterUrl = await this.createdPoster()
//this.posterUrl = await this.createdPoster()
// this.posterUrl = currentInfo.poster
this.showPoster = true
// showModal()
},
setActive(idx){
setActive(idx,initJsSdk=true){
this.activeIdx = Number(idx)
//this.shareDesc = this.navs[this.activeIdx].content
if(initJsSdk)this.shareToFirends()
},
async _init_func(){
......@@ -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})
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)
this.setActive(0,false)
await WX_JSSDK_INIT(this).then(wxEnv=>{
console.log(wxEnv)
this.shareToFirends()
}).catch(err=>{
console.log(err)
})
......@@ -443,9 +553,90 @@ var vueInstance = new Vue({
}
},
created(){
this._init_func()
}
})
</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>
</html>
skin/vtourskin.xml
......@@ -550,6 +550,7 @@
3.0, easeOutQuad,
set(control.usercontrol, all);
tween(view.fovmax, get(lp_fovmax));
jscall(littleplanetintro_onready_callback());
);
);
);
......
tour.html
......@@ -7,10 +7,18 @@
<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/vue/vue.js"></script>
<script src="/libs/axios.min.js"></script>
<link rel="stylesheet" href="/libs/swiper3d/src/css/3dSwiper.css">
<script src="./libs/helper.js"></script>
<script src="./libs/vue/vue.js"></script>
<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>
*{
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
@-ms-viewport {
width: device-width;
}
......@@ -53,16 +61,32 @@
.swiper-dots{
visibility: hidden;
width: 0px;
height: 0px;
z-index: -2;
position: fixed;
left: 100%;
}
.swiper-navigator{
width: 0px;
height: 0px;
z-index: -2;
position: fixed;
left: 100%;
visibility: hidden;
}
.swiper-current-text{
text-align: center;
font-size: 18px;
}
</style>
</head>
<body>
<div id="pano" style="width:100%;height:100%;"></div>
<div id="swiper" style="width:100%;height:100%;">
<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">
<li v-for="(item,idx) in slides" :key="idx">
<img class="img-item" @click="toShow(item.title,item.id,idx)" :src="item.image">
......@@ -70,82 +94,105 @@
</ul>
<ul class="swiper-dots"></ul>
<ul class="swiper-navigator">
<li class="swiper-btn-prev">&lt;</li>
<li class="swiper-btn-next">&gt;</li>
<li class="swiper-btn-prev"></li>
<li class="swiper-btn-next"></li>
</ul>
</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({
el:'#app',
data(){
return {
loadReady:false,
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(){
// setTimeout(() => {
// add_hotspot('完善的设施', 128.862, 4.478)
// add_hotspot('宜人的气候', '-144.129', -5)
//
// }, 1000)
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(()=>{
new Swiper(".swiper-container",{
pagination: ".swiper-dots",
navigator: {
prev: ".swiper-btn-prev",
next: ".swiper-btn-next"
},
delay: 4000,
autoPlay: true
});
})
// 小行星入场才会在vtourskin.xml中调用
function littleplanetintro_onready_callback() {
console.log('littleplanetintro_onready_callback')
alert('littleplanetintro_onready_callback')
}
/**
* 图片热点创建
* @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 src="tour.js"></script>
<script>
window.onload = function () {
window.onload = function(){
if(sessionStorage.getItem('is_load')){
showSwiper()
embedpano({
// swf: "tour.swf",
xml: "tour_no_littleplantintro.xml",
......@@ -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() {
console.log('showSwipershowSwipershowSwiper')
alert('showSwipershowSwipershowSwiper')
document.getElementById('swiper').style.visibility = 'visible'
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(() => {
// add_hotspot('完善的设施', 128.862, 4.478)
// add_hotspot('宜人的气候', '-144.129', -5)
//
// }, 1000)
showSwiper()
}
WX_JSSDK_INIT(this).then(wxEnv=>{
console.log(wxEnv)
_init_wx_jssdk()
}).catch(err=>{
console.log(err)
})
/**
* 图片热点创建
* @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 () {
console.log(3333333333)
}
var vueInstance = new Vue({
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) {
console.log(a)
}
this.slides = await $get('/category/list').then(res=>res.data).catch(err=>{throw err})
function test(hs) {
// if(hs==='完善的设施'){
// location.href='/feature.html'
// }
// if(hs==='宜人的气候'){
// location.href='/feature.html'
// }
}
console.log(this.slides)
this.loadReady = true
// this.$nextTick().then(()=>{
//
//
// })
}
},
created(){
this._init_func()
}
})
</script>
</body>
</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 @@
<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="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="/libs/rem.js"></script>
<script src="/libs/vue/vue.js"></script>
<script src="/libs/axios.min.js"></script>
<script src="./libs/helper.js"></script>
<script src="./libs/vue/vue.js"></script>
<script src="./libs/axios.min.js"></script>
<style>
#canvasEle{
position: absolute;
left: 100%;
position: fixed;
left: 200%;
width: 652px;
height: 1066px;
z-index: -3;
}
@font-face {
font-family: myFont;
src: url('/font/ltzk.ttf');
src: url('./font/ltzk.ttf');
}
*{
margin: 0;
padding: 0;
border:none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.page-wrap{
position: fixed;
......@@ -33,7 +39,7 @@
background-size: cover;
background-repeat: no-repeat;
background-position: bottom center;
padding-bottom: 1.14rem;
/*padding-bottom: 1.14rem;*/
box-sizing: border-box;
display: flex;
flex-direction: column;
......@@ -87,6 +93,7 @@
text-align: center;
font-size: 0.26rem;
line-height: 0.28rem;
height: 0.56rem;
color: #fff;
width: 1.14rem;
display: block;
......@@ -139,10 +146,12 @@
left: 0;
bottom:0;
width: 100%;
background: none;
z-index: 999;
/*background-image: url("/images/show/fupin.png");*/
background-size: cover;
background-repeat: no-repeat;
background-position: bottom center;
/*background-size: cover;*/
/*background-repeat: no-repeat;*/
/*background-position: bottom center;*/
}
.bottom__icon{
width: 0.63rem;
......@@ -151,12 +160,15 @@
right: 0.41rem;
bottom:0.51rem;
}
.modal-wrap{
background: rgba(0,0,0,.7);
position: fixed;
z-index: 3;
z-index: 1000;
width: 100%;
height: 100%;
}
.modal-container{
......@@ -166,6 +178,7 @@
height: 10.65rem;
position: relative;
margin: 0.56rem auto 0.25rem;
position: relative;
}
.poster-img{
width: 100%;
......@@ -173,29 +186,30 @@
}
.change-poster-btn{
position: absolute;
right: -0.25rem;
top: -0.32rem;
width: 2.07rem;
height: 0.66rem;
right: 0.32rem;
top: 0.3rem;
width: 2.08rem;
height: 0.67rem;
background: #FFFFFF;
font-size: 0.3rem;
font-weight: 400;
color: #333333;
color: #343434;;
line-height: 0.66rem;
border-radius: 0.33rem;
text-align: center;
z-index: 9;
}
.poster-action-box{
width: 6.51rem;
margin: 0 auto;
display: flex;
justify-content:space-between;
justify-content:center;
align-items: center;
}
.poster-action-btn{
width: 2.07rem;
height: 0.66rem;
background: #FFFFFF;
padding: 0 0.33rem;
background: rgba(255,255,255,.8);
font-size: 0.3rem;
font-weight: 400;
color: #333333;
......@@ -203,6 +217,65 @@
border-radius: 0.33rem;
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{
color: #fff;
......@@ -224,16 +297,34 @@
line-height: 0.48rem;
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>
</head>
<body>
<!--: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-item" v-for="(item,idx) in navs" :key="idx" :class="{active:idx===activeIdx}" @click="setActive(idx,item)">
<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 class="nav-item__mtitle">{{item.title}}</div>
</div>
......@@ -246,55 +337,98 @@
<div class="thumb">
<img class="thumb__img" :src="navs[activeIdx].image" />
</div>
<div class="content__text">
<div class="channel-title">
<div class="content__text" v-if="activeIdx===0">
<div class="channel-title" >
<img src="https://wzw2020.oss-cn-beijing.aliyuncs.com/keche-2%20%E6%8B%B7%E8%B4%9D.png" />
<span>客车</span>
</div>
<div class="channel-text">
<div class="channel-text" >
贵阳龙洞堡机场出站打车至贵阳客运东站，乘客车前往丹寨县（2 小时 30分钟），贵阳客运东站至丹寨县城每天有三班（发车时间分别为：10:30、13:30、 16:30）;
</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" />
<span>高铁</span>
</div>
<div class="channel-text">
<div class="channel-text" >
到达贵阳龙洞堡机场后，从机场 B1 层乘高铁至三都县站。到达三都县高铁站后，可选择小巴或打车前往丹寨万达小镇，车程大约 35 分钟；
</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" />
<span>包车</span>
</div>
<div class="channel-text">
<div class="channel-text" >
贵阳龙洞堡机场或贵阳市区可选择包车和拼车前往丹寨万达小镇，丹寨包车联系电话：189 8583 3071
</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>
<!---->
<div class="bottom" :style="{backgroundImage:'url('+navs[activeIdx].bg_image+')'}">
<img @click="bindShareEvent" class="bottom__icon" src="/images/show/share.png" />
<!--: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="posterUrl" class="poster-img" />
<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 class="poster-action-btn">保存图片</div>
<div @click.stop class="poster-action-btn">分享好友</div>
<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>
<script src="/libs/helper.js"></script>
<canvas id="canvasEle"></canvas>
<script>
function createImgByAsync(url) {
return new Promise((resolve, reject) => {
let img = new Image();
img.setAttribute("crossOrigin", 'Anonymous');
img.src = url;
img.src = url + '?time=' + new Date().valueOf();
img.onload = function () {
resolve(img)
}
......@@ -310,29 +444,17 @@ function convertCanvasToImage(canvas) {
}
function cutstrFun(str, len) {
console.log(str.length)
// console.log(str.length)
var temp = str
if (str.length > len) {
temp = str.substr(0, len) + '..'
}
console.log(temp)
// 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
......@@ -343,7 +465,7 @@ function canvasTextAutoLine(str, ctx, canvasWidth, initX, initY, lineHeight,font
for (let i = 0; i < str.length; i++) {
lineWidth += fontSize*dpr // 假定一个字是12px
console.log(lineWidth,canvasWidth)
// console.log(lineWidth,canvasWidth)
// canvasWidth-initX*6
if (lineWidth > canvasWidth) { // 减去initX,防止边界出现的问题
ctx.fillText(str.substring(lastSubStrIndex, i), initX, initY)
......@@ -363,17 +485,59 @@ var vueInstance = new Vue({
el:'#app',
data(){
return {
showPic:false,
contentList:[],
loadReady:false,
showPoster:false,
shareName:'',
shareTitle:'',
shareDesc:'',
activeIdx:0,
posterUrl:'',
navs:[]
navs:[],
userInfo:{}
}
},
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(){
this.showPoster = false
this.posterUrl = ''
......@@ -400,10 +564,10 @@ var vueInstance = new Vue({
async createdPoster(){
const currentInfo = this.navs[this.activeIdx]
console.log(currentInfo)
// console.log(currentInfo)
var userInfo = await getUserInfo();
console.log(userInfo);
// console.log(userInfo);
var shareName = `快跟着${userInfo.nickname} 一起分享丹寨`
......@@ -411,23 +575,23 @@ var vueInstance = new Vue({
var ctx = canvas.getContext("2d");
//var clientWidth = this.getWindowInfo().width;  //获取屏幕宽度用于canvas宽度自适应移动端屏幕
var dpr = this.getWindowInfo().dpr;
var dpr = 1//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);
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);
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);
console.log(qr_image)
// console.log(qr_image)
ctx.drawImage(qr_image, dpr * 45, dpr * 923, dpr * 110, dpr * 110);
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);
canvasTextAutoLine(shareName, ctx, dpr*170, dpr * 465, dpr * 1005,32,24,dpr)
......@@ -444,42 +608,57 @@ var vueInstance = new Vue({
},
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 = currentInfo.poster
this.showPoster = true
// this.posterUrl = await this.createdPoster()
// // this.posterUrl = currentInfo.poster
// this.showPoster = true
},
async bindShareEvent(){
this.posterUrl = await this.createdPoster()
//this.posterUrl = await this.createdPoster()
// this.posterUrl = currentInfo.poster
this.showPoster = true
},
setActive(idx){
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:'飞机',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:'客运',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/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:'高铁',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:'客运',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:'自驾',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.refreshShareText()
// var idx = getQueryByString(location.href,'idx')
// if(!isNaN(idx) && idx>=0){
// 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=>{
console.log(wxEnv)
// console.log(wxEnv)
this.shareToFirends()
}).catch(err=>{
console.log(err)
})
......@@ -492,5 +671,7 @@ var vueInstance = new Vue({
}
})
</script>
<script src="./libs/jweixin-1.6.0.js"></script>
<script src="./libs/rem.js"></script>
</body>
</html>
weixinySgXDAJltY/danzhai-holiday-test/index.html
......@@ -9,12 +9,12 @@
<meta http-equiv="x-ua-compatible" content="IE=edge"/>
</head>
<body id="app">
<script src="/libs/helper.js"></script>
<script src="../../libs/helper.js"></script>
<script>
async function init_applcation() {
var code = getQueryByString(location.href,'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