Skip to content

fengfan / wanda-vr

Go to a project
Commit 6d0da0d1 by junxiang wang
Options

完成剩余需求。

parent d3e2fd09
Showing with 1824 additions and 259 deletions
font/ltzk.ttf 0 → 100644
File added
index.html
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>度假到丹寨</title> <title>度假到丹寨</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"/>
<meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black" /> <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<meta http-equiv="x-ua-compatible" content="IE=edge" /> <meta http-equiv="x-ua-compatible" content="IE=edge"/>
<style> <style>
*{ * {
margin: 0; margin: 0;
padding: 0; padding: 0;
border:none; border: none;
} }
.page-wrap{
position: absolute; .page-wrap {
width: 100%; position: absolute;
height: 100%; top: 0;
background-image: url("/images/load/hello.png"); bottom: 0;
background-size: cover; left: 0;
background-repeat: no-repeat; right: 0;
background-position: bottom center; background-image: url("/images/load/hello.png");
} background-size: cover;
.logo{ background-repeat: no-repeat;
margin:30px 0 0 20px; background-position: bottom center;
height: 14px; }
display: block;
} .logo {
.title{ margin: 30px 0 0 20px;
position: absolute; height: 14px;
width: 235px; display: block;
bottom: 207px; }
left: 50%;
transform: translateX(-50%); .title {
} position: absolute;
.mtitle{ width: 235px;
position: absolute; bottom: 207px;
height: 15px; left: 50%;
bottom: 162px; transform: translateX(-50%);
left: 50%; }
transform: translateX(-50%);
} .mtitle {
.go{ position: absolute;
position: absolute; height: 15px;
height: 63px; bottom: 162px;
bottom: 18px; left: 50%;
left: 50%; transform: translateX(-50%);
transform: translateX(-50%); }
}
</style> .go {
<!-- <script src="/libs/vue/vue.js"></script>--> position: absolute;
height: 63px;
bottom: 18px;
left: 50%;
transform: translateX(-50%);
}
</style>
<!-- <script src="/libs/vue/vue.js"></script>-->
<script src="/libs/axios.min.js"></script>
</head> </head>
<body id="app"> <body id="app">
<div class="page-wrap"> <div class="page-wrap">
<img class="logo" src="/images/load/logo.png" /> <img class="logo" src="/images/load/logo.png"/>
<img class="title" src="/images/load/title.png" /> <img class="title" src="/images/load/title.png"/>
<img class="mtitle" src="/images/load/mtitle.png" /> <img class="mtitle" src="/images/load/mtitle.png"/>
<img onclick="toPano()" class="go" src="/images/load/go.png" /> <img onclick="toPano()" class="go" src="/images/load/go.png"/>
</div> </div>
<script src="/libs/helper.js"></script>
<script> <script>
async function init_applcation() {
if(!checkIsLogin()){
var code = getQueryByString(location.href,'code')
//没有登录情况下
if(code){
const getTokenUrl = `/weixin/callback?code=${code}`
const {accessToken} = await $get(getTokenUrl).then(res=>res.data).catch(err=>{throw err})
localStorage.setItem('accessToken',accessToken)
}else{
const {url,appid} = await $get('/weixin/info').then(res=>res.data).catch(err=>{throw err})
location.href = url
return;
}
}
}
init_applcation()
function toPano() { function toPano() {
location.href = '/tour.html' location.href = '/tour.html'
} }
</script> </script>
</body> </body>
......
libs/axios.min.js 0 → 100644
/* axios v0.19.2 | (c) 2020 by Matt Zabriskie */
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.axios=t():e.axios=t()}(this,function(){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={exports:{},id:r,loaded:!1};return e[r].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){e.exports=n(1)},function(e,t,n){"use strict";function r(e){var t=new s(e),n=i(s.prototype.request,t);return o.extend(n,s.prototype,t),o.extend(n,t),n}var o=n(2),i=n(3),s=n(4),a=n(22),u=n(10),c=r(u);c.Axios=s,c.create=function(e){return r(a(c.defaults,e))},c.Cancel=n(23),c.CancelToken=n(24),c.isCancel=n(9),c.all=function(e){return Promise.all(e)},c.spread=n(25),e.exports=c,e.exports.default=c},function(e,t,n){"use strict";function r(e){return"[object Array]"===j.call(e)}function o(e){return"undefined"==typeof e}function i(e){return null!==e&&!o(e)&&null!==e.constructor&&!o(e.constructor)&&"function"==typeof e.constructor.isBuffer&&e.constructor.isBuffer(e)}function s(e){return"[object ArrayBuffer]"===j.call(e)}function a(e){return"undefined"!=typeof FormData&&e instanceof FormData}function u(e){var t;return t="undefined"!=typeof ArrayBuffer&&ArrayBuffer.isView?ArrayBuffer.isView(e):e&&e.buffer&&e.buffer instanceof ArrayBuffer}function c(e){return"string"==typeof e}function f(e){return"number"==typeof e}function p(e){return null!==e&&"object"==typeof e}function d(e){return"[object Date]"===j.call(e)}function l(e){return"[object File]"===j.call(e)}function h(e){return"[object Blob]"===j.call(e)}function m(e){return"[object Function]"===j.call(e)}function y(e){return p(e)&&m(e.pipe)}function g(e){return"undefined"!=typeof URLSearchParams&&e instanceof URLSearchParams}function v(e){return e.replace(/^\s*/,"").replace(/\s*$/,"")}function x(){return("undefined"==typeof navigator||"ReactNative"!==navigator.product&&"NativeScript"!==navigator.product&&"NS"!==navigator.product)&&("undefined"!=typeof window&&"undefined"!=typeof document)}function w(e,t){if(null!==e&&"undefined"!=typeof e)if("object"!=typeof e&&(e=[e]),r(e))for(var n=0,o=e.length;n<o;n++)t.call(null,e[n],n,e);else for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.call(null,e[i],i,e)}function b(){function e(e,n){"object"==typeof t[n]&&"object"==typeof e?t[n]=b(t[n],e):t[n]=e}for(var t={},n=0,r=arguments.length;n<r;n++)w(arguments[n],e);return t}function E(){function e(e,n){"object"==typeof t[n]&&"object"==typeof e?t[n]=E(t[n],e):"object"==typeof e?t[n]=E({},e):t[n]=e}for(var t={},n=0,r=arguments.length;n<r;n++)w(arguments[n],e);return t}function S(e,t,n){return w(t,function(t,r){n&&"function"==typeof t?e[r]=C(t,n):e[r]=t}),e}var C=n(3),j=Object.prototype.toString;e.exports={isArray:r,isArrayBuffer:s,isBuffer:i,isFormData:a,isArrayBufferView:u,isString:c,isNumber:f,isObject:p,isUndefined:o,isDate:d,isFile:l,isBlob:h,isFunction:m,isStream:y,isURLSearchParams:g,isStandardBrowserEnv:x,forEach:w,merge:b,deepMerge:E,extend:S,trim:v}},function(e,t){"use strict";e.exports=function(e,t){return function(){for(var n=new Array(arguments.length),r=0;r<n.length;r++)n[r]=arguments[r];return e.apply(t,n)}}},function(e,t,n){"use strict";function r(e){this.defaults=e,this.interceptors={request:new s,response:new s}}var o=n(2),i=n(5),s=n(6),a=n(7),u=n(22);r.prototype.request=function(e){"string"==typeof e?(e=arguments[1]||{},e.url=arguments[0]):e=e||{},e=u(this.defaults,e),e.method?e.method=e.method.toLowerCase():this.defaults.method?e.method=this.defaults.method.toLowerCase():e.method="get";var t=[a,void 0],n=Promise.resolve(e);for(this.interceptors.request.forEach(function(e){t.unshift(e.fulfilled,e.rejected)}),this.interceptors.response.forEach(function(e){t.push(e.fulfilled,e.rejected)});t.length;)n=n.then(t.shift(),t.shift());return n},r.prototype.getUri=function(e){return e=u(this.defaults,e),i(e.url,e.params,e.paramsSerializer).replace(/^\?/,"")},o.forEach(["delete","get","head","options"],function(e){r.prototype[e]=function(t,n){return this.request(o.merge(n||{},{method:e,url:t}))}}),o.forEach(["post","put","patch"],function(e){r.prototype[e]=function(t,n,r){return this.request(o.merge(r||{},{method:e,url:t,data:n}))}}),e.exports=r},function(e,t,n){"use strict";function r(e){return encodeURIComponent(e).replace(/%40/gi,"@").replace(/%3A/gi,":").replace(/%24/g,"$").replace(/%2C/gi,",").replace(/%20/g,"+").replace(/%5B/gi,"[").replace(/%5D/gi,"]")}var o=n(2);e.exports=function(e,t,n){if(!t)return e;var i;if(n)i=n(t);else if(o.isURLSearchParams(t))i=t.toString();else{var s=[];o.forEach(t,function(e,t){null!==e&&"undefined"!=typeof e&&(o.isArray(e)?t+="[]":e=[e],o.forEach(e,function(e){o.isDate(e)?e=e.toISOString():o.isObject(e)&&(e=JSON.stringify(e)),s.push(r(t)+"="+r(e))}))}),i=s.join("&")}if(i){var a=e.indexOf("#");a!==-1&&(e=e.slice(0,a)),e+=(e.indexOf("?")===-1?"?":"&")+i}return e}},function(e,t,n){"use strict";function r(){this.handlers=[]}var o=n(2);r.prototype.use=function(e,t){return this.handlers.push({fulfilled:e,rejected:t}),this.handlers.length-1},r.prototype.eject=function(e){this.handlers[e]&&(this.handlers[e]=null)},r.prototype.forEach=function(e){o.forEach(this.handlers,function(t){null!==t&&e(t)})},e.exports=r},function(e,t,n){"use strict";function r(e){e.cancelToken&&e.cancelToken.throwIfRequested()}var o=n(2),i=n(8),s=n(9),a=n(10);e.exports=function(e){r(e),e.headers=e.headers||{},e.data=i(e.data,e.headers,e.transformRequest),e.headers=o.merge(e.headers.common||{},e.headers[e.method]||{},e.headers),o.forEach(["delete","get","head","post","put","patch","common"],function(t){delete e.headers[t]});var t=e.adapter||a.adapter;return t(e).then(function(t){return r(e),t.data=i(t.data,t.headers,e.transformResponse),t},function(t){return s(t)||(r(e),t&&t.response&&(t.response.data=i(t.response.data,t.response.headers,e.transformResponse))),Promise.reject(t)})}},function(e,t,n){"use strict";var r=n(2);e.exports=function(e,t,n){return r.forEach(n,function(n){e=n(e,t)}),e}},function(e,t){"use strict";e.exports=function(e){return!(!e||!e.__CANCEL__)}},function(e,t,n){"use strict";function r(e,t){!i.isUndefined(e)&&i.isUndefined(e["Content-Type"])&&(e["Content-Type"]=t)}function o(){var e;return"undefined"!=typeof XMLHttpRequest?e=n(12):"undefined"!=typeof process&&"[object process]"===Object.prototype.toString.call(process)&&(e=n(12)),e}var i=n(2),s=n(11),a={"Content-Type":"application/x-www-form-urlencoded"},u={adapter:o(),transformRequest:[function(e,t){return s(t,"Accept"),s(t,"Content-Type"),i.isFormData(e)||i.isArrayBuffer(e)||i.isBuffer(e)||i.isStream(e)||i.isFile(e)||i.isBlob(e)?e:i.isArrayBufferView(e)?e.buffer:i.isURLSearchParams(e)?(r(t,"application/x-www-form-urlencoded;charset=utf-8"),e.toString()):i.isObject(e)?(r(t,"application/json;charset=utf-8"),JSON.stringify(e)):e}],transformResponse:[function(e){if("string"==typeof e)try{e=JSON.parse(e)}catch(e){}return e}],timeout:0,xsrfCookieName:"XSRF-TOKEN",xsrfHeaderName:"X-XSRF-TOKEN",maxContentLength:-1,validateStatus:function(e){return e>=200&&e<300}};u.headers={common:{Accept:"application/json, text/plain, */*"}},i.forEach(["delete","get","head"],function(e){u.headers[e]={}}),i.forEach(["post","put","patch"],function(e){u.headers[e]=i.merge(a)}),e.exports=u},function(e,t,n){"use strict";var r=n(2);e.exports=function(e,t){r.forEach(e,function(n,r){r!==t&&r.toUpperCase()===t.toUpperCase()&&(e[t]=n,delete e[r])})}},function(e,t,n){"use strict";var r=n(2),o=n(13),i=n(5),s=n(16),a=n(19),u=n(20),c=n(14);e.exports=function(e){return new Promise(function(t,f){var p=e.data,d=e.headers;r.isFormData(p)&&delete d["Content-Type"];var l=new XMLHttpRequest;if(e.auth){var h=e.auth.username||"",m=e.auth.password||"";d.Authorization="Basic "+btoa(h+":"+m)}var y=s(e.baseURL,e.url);if(l.open(e.method.toUpperCase(),i(y,e.params,e.paramsSerializer),!0),l.timeout=e.timeout,l.onreadystatechange=function(){if(l&&4===l.readyState&&(0!==l.status||l.responseURL&&0===l.responseURL.indexOf("file:"))){var n="getAllResponseHeaders"in l?a(l.getAllResponseHeaders()):null,r=e.responseType&&"text"!==e.responseType?l.response:l.responseText,i={data:r,status:l.status,statusText:l.statusText,headers:n,config:e,request:l};o(t,f,i),l=null}},l.onabort=function(){l&&(f(c("Request aborted",e,"ECONNABORTED",l)),l=null)},l.onerror=function(){f(c("Network Error",e,null,l)),l=null},l.ontimeout=function(){var t="timeout of "+e.timeout+"ms exceeded";e.timeoutErrorMessage&&(t=e.timeoutErrorMessage),f(c(t,e,"ECONNABORTED",l)),l=null},r.isStandardBrowserEnv()){var g=n(21),v=(e.withCredentials||u(y))&&e.xsrfCookieName?g.read(e.xsrfCookieName):void 0;v&&(d[e.xsrfHeaderName]=v)}if("setRequestHeader"in l&&r.forEach(d,function(e,t){"undefined"==typeof p&&"content-type"===t.toLowerCase()?delete d[t]:l.setRequestHeader(t,e)}),r.isUndefined(e.withCredentials)||(l.withCredentials=!!e.withCredentials),e.responseType)try{l.responseType=e.responseType}catch(t){if("json"!==e.responseType)throw t}"function"==typeof e.onDownloadProgress&&l.addEventListener("progress",e.onDownloadProgress),"function"==typeof e.onUploadProgress&&l.upload&&l.upload.addEventListener("progress",e.onUploadProgress),e.cancelToken&&e.cancelToken.promise.then(function(e){l&&(l.abort(),f(e),l=null)}),void 0===p&&(p=null),l.send(p)})}},function(e,t,n){"use strict";var r=n(14);e.exports=function(e,t,n){var o=n.config.validateStatus;!o||o(n.status)?e(n):t(r("Request failed with status code "+n.status,n.config,null,n.request,n))}},function(e,t,n){"use strict";var r=n(15);e.exports=function(e,t,n,o,i){var s=new Error(e);return r(s,t,n,o,i)}},function(e,t){"use strict";e.exports=function(e,t,n,r,o){return e.config=t,n&&(e.code=n),e.request=r,e.response=o,e.isAxiosError=!0,e.toJSON=function(){return{message:this.message,name:this.name,description:this.description,number:this.number,fileName:this.fileName,lineNumber:this.lineNumber,columnNumber:this.columnNumber,stack:this.stack,config:this.config,code:this.code}},e}},function(e,t,n){"use strict";var r=n(17),o=n(18);e.exports=function(e,t){return e&&!r(t)?o(e,t):t}},function(e,t){"use strict";e.exports=function(e){return/^([a-z][a-z\d\+\-\.]*:)?\/\//i.test(e)}},function(e,t){"use strict";e.exports=function(e,t){return t?e.replace(/\/+$/,"")+"/"+t.replace(/^\/+/,""):e}},function(e,t,n){"use strict";var r=n(2),o=["age","authorization","content-length","content-type","etag","expires","from","host","if-modified-since","if-unmodified-since","last-modified","location","max-forwards","proxy-authorization","referer","retry-after","user-agent"];e.exports=function(e){var t,n,i,s={};return e?(r.forEach(e.split("\n"),function(e){if(i=e.indexOf(":"),t=r.trim(e.substr(0,i)).toLowerCase(),n=r.trim(e.substr(i+1)),t){if(s[t]&&o.indexOf(t)>=0)return;"set-cookie"===t?s[t]=(s[t]?s[t]:[]).concat([n]):s[t]=s[t]?s[t]+", "+n:n}}),s):s}},function(e,t,n){"use strict";var r=n(2);e.exports=r.isStandardBrowserEnv()?function(){function e(e){var t=e;return n&&(o.setAttribute("href",t),t=o.href),o.setAttribute("href",t),{href:o.href,protocol:o.protocol?o.protocol.replace(/:$/,""):"",host:o.host,search:o.search?o.search.replace(/^\?/,""):"",hash:o.hash?o.hash.replace(/^#/,""):"",hostname:o.hostname,port:o.port,pathname:"/"===o.pathname.charAt(0)?o.pathname:"/"+o.pathname}}var t,n=/(msie|trident)/i.test(navigator.userAgent),o=document.createElement("a");return t=e(window.location.href),function(n){var o=r.isString(n)?e(n):n;return o.protocol===t.protocol&&o.host===t.host}}():function(){return function(){return!0}}()},function(e,t,n){"use strict";var r=n(2);e.exports=r.isStandardBrowserEnv()?function(){return{write:function(e,t,n,o,i,s){var a=[];a.push(e+"="+encodeURIComponent(t)),r.isNumber(n)&&a.push("expires="+new Date(n).toGMTString()),r.isString(o)&&a.push("path="+o),r.isString(i)&&a.push("domain="+i),s===!0&&a.push("secure"),document.cookie=a.join("; ")},read:function(e){var t=document.cookie.match(new RegExp("(^|;\\s*)("+e+")=([^;]*)"));return t?decodeURIComponent(t[3]):null},remove:function(e){this.write(e,"",Date.now()-864e5)}}}():function(){return{write:function(){},read:function(){return null},remove:function(){}}}()},function(e,t,n){"use strict";var r=n(2);e.exports=function(e,t){t=t||{};var n={},o=["url","method","params","data"],i=["headers","auth","proxy"],s=["baseURL","url","transformRequest","transformResponse","paramsSerializer","timeout","withCredentials","adapter","responseType","xsrfCookieName","xsrfHeaderName","onUploadProgress","onDownloadProgress","maxContentLength","validateStatus","maxRedirects","httpAgent","httpsAgent","cancelToken","socketPath"];r.forEach(o,function(e){"undefined"!=typeof t[e]&&(n[e]=t[e])}),r.forEach(i,function(o){r.isObject(t[o])?n[o]=r.deepMerge(e[o],t[o]):"undefined"!=typeof t[o]?n[o]=t[o]:r.isObject(e[o])?n[o]=r.deepMerge(e[o]):"undefined"!=typeof e[o]&&(n[o]=e[o])}),r.forEach(s,function(r){"undefined"!=typeof t[r]?n[r]=t[r]:"undefined"!=typeof e[r]&&(n[r]=e[r])});var a=o.concat(i).concat(s),u=Object.keys(t).filter(function(e){return a.indexOf(e)===-1});return r.forEach(u,function(r){"undefined"!=typeof t[r]?n[r]=t[r]:"undefined"!=typeof e[r]&&(n[r]=e[r])}),n}},function(e,t){"use strict";function n(e){this.message=e}n.prototype.toString=function(){return"Cancel"+(this.message?": "+this.message:"")},n.prototype.__CANCEL__=!0,e.exports=n},function(e,t,n){"use strict";function r(e){if("function"!=typeof e)throw new TypeError("executor must be a function.");var t;this.promise=new Promise(function(e){t=e});var n=this;e(function(e){n.reason||(n.reason=new o(e),t(n.reason))})}var o=n(23);r.prototype.throwIfRequested=function(){if(this.reason)throw this.reason},r.source=function(){var e,t=new r(function(t){e=t});return{token:t,cancel:e}},e.exports=r},function(e,t){"use strict";e.exports=function(e){return function(t){return e.apply(null,t)}}}])});
//# sourceMappingURL=axios.min.map
\ No newline at end of file
libs/helper.js 0 → 100644
const apiBaseUrl = 'https://wanda-holiday-tapi.bdideal.com'
//const frontUrl = 'https://wanda-holiday-tapi.bdideal.com'
/**
* 检测是否登录
* @returns {boolean}
*/
const checkIsLogin = (redirect=0)=>{
if(!redirect){
return localStorage.getItem('accessToken')!=null
}
if(redirect && !localStorage.getItem('accessToken')){
location.href = '/index.html'
}
}
/**
* 获取字符串中参数
* @param str
* @param name
* @returns {string|null}
* @constructor
*/
const getQueryByString = (str, name) => {
// 获取？号出现几次
var tempArr = str.split('?')
// console.log(tempArr)
// //如果大于1
if (tempArr.length - 1 > 1) {
var rt = null
for (var i in tempArr) {
var s = tempArr[i]
var reg1 = new RegExp('(^|&)' + name + '=([^&]*)(&|$)') // 构造一个含有目标参数的正则表达式对象
var r1 = s.match(reg1) // 匹配目标参数
if (r1 != null) {
rt = decodeURIComponent(r1[2])// 一直覆盖，要最后的就行了
}
}
return rt
}
var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)') // 构造一个含有目标参数的正则表达式对象
if (!str.split('?')[1]) return null
var r = str.split('?')[1].match(reg) // 匹配目标参数
// console.log(r)
if (r != null) {
return decodeURIComponent(r[2])
}
return null // 返回参数值
}
const getReqHeader = ()=>{
if(checkIsLogin()){
return {
accessToken:localStorage.getItem('accessToken')
}
}
if(!checkIsLogin()){
return {}
}
}
const $get = (url)=>{
return new Promise((resolve, reject) => {
axios({
methods: 'get',
headers:getReqHeader(),
url:apiBaseUrl+url
}).then(res => {
if(res.data.code===0){
resolve(res.data)
}else{
reject(Error(res.data.msg))
}
}).catch(err => {
reject(Error(err.message))
})
})
}
const $post = (url,data)=>{
return new Promise((resolve, reject) => {
axios.post(apiBaseUrl+url,data,getReqHeader()).then(res => {
if(res.data.code===0){
resolve(res.data)
}else{
reject(Error(res.data.msg))
}
}).catch(err => {
reject(Error(err.message))
})
})
}
/**
* 获取信息
* @returns {Promise<unknown>}
*/
const getUserInfo = async(storage='local')=>{
var qrcode = sessionStorage.getItem('qrcode'),
nickname = sessionStorage.getItem('nickname'),
head = sessionStorage.getItem('head')
if(storage==='local' && qrcode && nickname && head ){
return {
qrcode,nickname,head
}
}else{
const userInfo = await $get('/weixin/userinfo').then(res=>res.data).catch(err=>{ throw err })
return {...userInfo}
}
}
function setWxConfig (config) {
wx.config(config)
}
const WX_JSSDK_INIT = (vm, jsApiListList) => new Promise((resolve, reject) => {
if (vm.JSSDK_READY) {
resolve(wx)
return
}
// let {origin,pathname} = location
// `${origin}${pathname}`,//
$get('/wechat/info?url='+encodeURI(location.href.split('#')[0])).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']
// ['chooseImage', 'previewImage', 'uploadImage', 'openLocation','getLocation', 'chooseWXPay', 'getSystemInfo', 'onMenuShareAppMessage','onMenuShareTimeline','scanQRCode'];
const { noncestr, timestamp, appId, signature } = config
setWxConfig({ debug, appId, timestamp,nonceStr, signature, jsApiList })
wx.ready(function () {
vm.JSSDK_READY = true
// 将微信这个变量传进去，所以在页面就不需要传了
resolve(wx)
// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
})
}).catch(res => {
console.log(res,'getqianmng')
reject(new Error(false))
})
})
panos/vr.tiles/pano_b.jpg
panos/vr.tiles/pano_b.jpg

426 KB | W: | H:

panos/vr.tiles/pano_b.jpg

403 KB | W: | H:

panos/vr.tiles/pano_b.jpg
panos/vr.tiles/pano_b.jpg
panos/vr.tiles/pano_b.jpg
panos/vr.tiles/pano_b.jpg
  • 2-up
  • Swipe
  • Onion skin
panos/vr.tiles/pano_d.jpg
panos/vr.tiles/pano_d.jpg

220 KB | W: | H:

panos/vr.tiles/pano_d.jpg

157 KB | W: | H:

panos/vr.tiles/pano_d.jpg
panos/vr.tiles/pano_d.jpg
panos/vr.tiles/pano_d.jpg
panos/vr.tiles/pano_d.jpg
  • 2-up
  • Swipe
  • Onion skin
panos/vr.tiles/pano_f.jpg
panos/vr.tiles/pano_f.jpg

509 KB | W: | H:

panos/vr.tiles/pano_f.jpg

492 KB | W: | H:

panos/vr.tiles/pano_f.jpg
panos/vr.tiles/pano_f.jpg
panos/vr.tiles/pano_f.jpg
panos/vr.tiles/pano_f.jpg
  • 2-up
  • Swipe
  • Onion skin
panos/vr.tiles/pano_l.jpg
panos/vr.tiles/pano_l.jpg

410 KB | W: | H:

panos/vr.tiles/pano_l.jpg

393 KB | W: | H:

panos/vr.tiles/pano_l.jpg
panos/vr.tiles/pano_l.jpg
panos/vr.tiles/pano_l.jpg
panos/vr.tiles/pano_l.jpg
  • 2-up
  • Swipe
  • Onion skin
panos/vr.tiles/pano_r.jpg
panos/vr.tiles/pano_r.jpg

401 KB | W: | H:

panos/vr.tiles/pano_r.jpg

386 KB | W: | H:

panos/vr.tiles/pano_r.jpg
panos/vr.tiles/pano_r.jpg
panos/vr.tiles/pano_r.jpg
panos/vr.tiles/pano_r.jpg
  • 2-up
  • Swipe
  • Onion skin
panos/vr.tiles/pano_u.jpg
panos/vr.tiles/pano_u.jpg

80 KB | W: | H:

panos/vr.tiles/pano_u.jpg

83.2 KB | W: | H:

panos/vr.tiles/pano_u.jpg
panos/vr.tiles/pano_u.jpg
panos/vr.tiles/pano_u.jpg
panos/vr.tiles/pano_u.jpg
  • 2-up
  • Swipe
  • Onion skin
panos/vr.tiles/preview.jpg
panos/vr.tiles/preview.jpg

27.9 KB | W: | H:

panos/vr.tiles/preview.jpg

27.3 KB | W: | H:

panos/vr.tiles/preview.jpg
panos/vr.tiles/preview.jpg
panos/vr.tiles/preview.jpg
panos/vr.tiles/preview.jpg
  • 2-up
  • Swipe
  • Onion skin
panos/vr.tiles/thumb.jpg
panos/vr.tiles/thumb.jpg

8.9 KB | W: | H:

panos/vr.tiles/thumb.jpg

8.54 KB | W: | H:

panos/vr.tiles/thumb.jpg
panos/vr.tiles/thumb.jpg
panos/vr.tiles/thumb.jpg
panos/vr.tiles/thumb.jpg
  • 2-up
  • Swipe
  • Onion skin
route.html
...@@ -7,25 +7,530 @@ ...@@ -7,25 +7,530 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="x-ua-compatible" content="IE=edge" /> <meta http-equiv="x-ua-compatible" content="IE=edge" />
<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="/libs/rem.js"></script> <script src="/libs/rem.js"></script>
<script src="/libs/vue/vue.js"></script>
<script src="/libs/axios.min.js"></script>
<style> <style>
#canvasEle{
position: absolute;
left: 100%;
}
@font-face {
font-family: myFont;
src: url('/font/ltzk.ttf');
}
*{ *{
margin: 0; margin: 0;
padding: 0; padding: 0;
border:none; border:none;
} }
.full-img{ .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%; 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; 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> </style>
<!-- <script src="/libs/vue/vue.js"></script>-->
</head> </head>
<body id="app"> <body>
<img class="full-img" src="/images/route.png" /> <!--: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>
<script src="/libs/helper.js"></script>
<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";
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()
}
})
</script> </script>
</body> </body>
</html> </html>
route.html.old 0 → 100644
<!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,18 +7,29 @@ ...@@ -7,18 +7,29 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="x-ua-compatible" content="IE=edge" /> <meta http-equiv="x-ua-compatible" content="IE=edge" />
<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="/libs/rem.js"></script> <script src="/libs/rem.js"></script>
<script src="/libs/vue/vue.js"></script>
<script src="/libs/axios.min.js"></script>
<style> <style>
#canvasEle{
position: absolute;
left: 100%;
}
@font-face {
font-family: myFont;
src: url('/font/ltzk.ttf');
}
*{ *{
margin: 0; margin: 0;
padding: 0; padding: 0;
border:none; border:none;
} }
.page-wrap{ .page-wrap{
position: absolute; position: fixed;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-image: url("/images/show/fupin.png"); /*background-image: url("/images/show/fupin.png");*/
background-size: cover; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: bottom center; background-position: bottom center;
...@@ -26,6 +37,7 @@ ...@@ -26,6 +37,7 @@
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.nav-list{ .nav-list{
...@@ -42,7 +54,7 @@ ...@@ -42,7 +54,7 @@
} }
.nav-item{ .nav-item{
display: inline-block; display: inline-block;
width: 1.04rem; width: 1.14rem;
height: 1.85rem; height: 1.85rem;
margin-left: 0.42rem; margin-left: 0.42rem;
border-radius: 0.1rem; border-radius: 0.1rem;
...@@ -55,7 +67,7 @@ ...@@ -55,7 +67,7 @@
background: rgba(23, 40, 63, 0.3); background: rgba(23, 40, 63, 0.3);
} }
.nav-item__iconbox{ .nav-item__iconbox{
margin: 0.07rem 0.02rem auto; margin: 0.07rem auto auto;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
border-radius: 50%; border-radius: 50%;
...@@ -80,13 +92,18 @@ ...@@ -80,13 +92,18 @@
font-size: 0.26rem; font-size: 0.26rem;
line-height: 0.28rem; line-height: 0.28rem;
color: #fff; color: #fff;
width: 1.14rem;
display: block;
white-space: normal;
} }
.mtitle{ .mtitle{
font-family: myFont;
margin-top: 0.57rem; margin-top: 0.57rem;
color: #fff; color: #fff;
font-size: 0.72rem; font-size: 0.72rem;
text-align: center; text-align: center;
position: relative; position: relative;
} }
.mtitle__icon{ .mtitle__icon{
position: absolute; position: absolute;
...@@ -127,7 +144,7 @@ ...@@ -127,7 +144,7 @@
left: 0; left: 0;
bottom:0; bottom:0;
width: 100%; width: 100%;
background-image: url("/images/show/fupin.png");
background-size: cover; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: bottom center; background-position: bottom center;
...@@ -191,97 +208,129 @@ ...@@ -191,97 +208,129 @@
border-radius: 0.33rem; border-radius: 0.33rem;
text-align: center; text-align: center;
} }
</style> </style>
<script src="/libs/vue/vue.js"></script>
</head> </head>
<body> <body>
<div class="page-wrap" id="app">
<div id="app" class="page-wrap" v-if="loadReady" :class="{fixed:showPoster}" :style="{backgroundImage:'url('+navs[activeIdx].bg_image+')'}">
<canvas id="canvasEle"></canvas>
<div class="nav-list"> <div class="nav-list">
<div class="nav-item" v-for="(item,idx) in navs" :key="idx" :class="{active:idx===activeIdx}" @click="setActive(idx,item)"> <div class="nav-item" v-for="(item,idx) in navs" :key="idx" :class="{active:idx===activeIdx}" @click="setActive(idx,item)">
<div class="nav-item__iconbox"> <div class="nav-item__iconbox">
<img :src="item.icon" class="nav-item__icon" /> <img :src="item.small_image" class="nav-item__icon" />
</div> </div>
<div class="nav-item__mtitle" v-html="item.mtitle"></div> <div class="nav-item__mtitle">{{item.title}}</div>
</div> </div>
</div> </div>
<div class="mtitle"> <div class="mtitle">
<span>{{navs[activeIdx].title}}</span> {{navs[activeIdx].title}}
<img src="/images/show/yinle.png" class="mtitle__icon">
</div> </div>
<div class="thumb"> <div class="thumb">
<img class="thumb__img" :src="navs[activeIdx].thumb" /> <img class="thumb__img" :src="navs[activeIdx].image" />
</div> </div>
<div class="content"> <div class="content">
<div class="content__text" v-html="navs[activeIdx].content"></div> <div class="content__text" v-html="navs[activeIdx].content"></div>
</div> </div>
<div class="bottom"> <div class="bottom" :style="{backgroundImage:'url('+navs[activeIdx].bg_image+')'}">
<img @click="bindShareEvent" class="bottom__icon" src="/images/show/share.png" /> <img @click="bindShareEvent" class="bottom__icon" src="/images/show/share.png" />
</div> </div>
<div class="modal-wrap" v-if="showPoster" @click="closeModal"> <div class="modal-wrap" v-if="showPoster" @click="closeModal">
<div class="modal-container"> <div class="modal-container">
<div class="poster"> <div class="poster">
<img :src="posterUrl" class="poster-img" /> <img :src="posterUrl" class="poster-img" />
<div class="change-poster-btn">换一换</div> <div @click.stop="refreshShareText" class="change-poster-btn">换一换</div>
</div> </div>
<div class="poster-action-box"> <div class="poster-action-box">
<div class="poster-action-btn">保存图片</div> <div @click.stop class="poster-action-btn">保存图片</div>
<div class="poster-action-btn">分享好友</div> <div @click.stop class="poster-action-btn">分享好友</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<script src="/libs/helper.js"></script>
<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 str
* @param name * @param ctx
* @returns {string|null} * @param canvasWidth
* @constructor * @param initX
* @param initY
* @param lineHeight
* @param fontSize
* @param dpr
* @returns {number}
*/ */
const getQueryByString = (str, name) => { function canvasTextAutoLine(str, ctx, canvasWidth, initX, initY, lineHeight,fontSize,dpr,bold=false) {
// 获取？号出现几次
var tempArr = str.split('?')
// console.log(tempArr)
// //如果大于1
if (tempArr.length - 1 > 1) {
var rt = null
for (var i in tempArr) {
var s = tempArr[i]
var reg1 = new RegExp('(^|&)' + name + '=([^&]*)(&|$)') // 构造一个含有目标参数的正则表达式对象
var r1 = s.match(reg1) // 匹配目标参数
if (r1 != null) {
rt = decodeURIComponent(r1[2])// 一直覆盖，要最后的就行了
}
}
return rt var lineWidth = 0
} var lastSubStrIndex = 0,
totalLineHeight = 0
var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)') // 构造一个含有目标参数的正则表达式对象 var fz = fontSize*dpr
if (!str.split('?')[1]) return null ctx.font = (bold?'bold ':'')+`${fz}px "微软雅黑"`;
var r = str.split('?')[1].match(reg) // 匹配目标参数 ctx.fillStyle = "#fff";
// console.log(r)
if (r != null) { for (let i = 0; i < str.length; i++) {
return decodeURIComponent(r[2]) 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 null // 返回参数值 return totalLineHeight
} }
var vueInstance = new Vue({ var vueInstance = new Vue({
el:'#app', el:'#app',
data(){ data(){
return { return {
contentList:[],
loadReady:false,
showPoster:false, showPoster:false,
shareName:'',
activeIdx:0, activeIdx:0,
posterUrl:'', posterUrl:'',
navs:[ navs:[]
{id:1,poster:'https://cdnly.itour.fun/50/6b0df48558fdab00efbd3ae58f0abe.png',mtitle:'高要<br\/>梯田',icon:'/images/show/nav-item-1.png',title:'高要梯田',thumb:'https://cdnly.itour.fun/bb/21c530a5e2677f8a0906c5f68f4fa4.png',content:'扶贫茶园是在丹寨县委县政府的支持下，由丹寨万达小镇推出的新型扶贫公益项目，通过扶贫茶园认领的方式打造丹寨高品质茶叶品牌“丹红”“丹绿”，整合丹寨茶产业链、打造丹寨茶产业平台。游客来这里可采茶、制茶、吃茶餐、做研学。'},
{id:1,poster:'https://cdnly.itour.fun/50/6b0df48558fdab00efbd3ae58f0abe.png',mtitle:'排廷<br\/>瀑布',icon:'/images/show/nav-item-2.png',title:'排廷瀑布',thumb:'https://cdnly.itour.fun/bb/21c530a5e2677f8a0906c5f68f4fa4.png',content:'排廷瀑布'},
{id:1,poster:'https://cdnly.itour.fun/50/6b0df48558fdab00efbd3ae58f0abe.png',mtitle:'石桥村<br\/>&nbsp;',icon:'/images/show/nav-item-3.png',title:'石桥村',thumb:'https://cdnly.itour.fun/bb/21c530a5e2677f8a0906c5f68f4fa4.png',content:'石桥村'},
{id:1,poster:'https://cdnly.itour.fun/50/6b0df48558fdab00efbd3ae58f0abe.png',mtitle:'金汞矿<br\/>遗址',icon:'/images/show/nav-item-4.png',title:'金汞矿遗址',thumb:'https://cdnly.itour.fun/bb/21c530a5e2677f8a0906c5f68f4fa4.png',content:'金汞矿遗址'},
{id:1,poster:'https://cdnly.itour.fun/50/6b0df48558fdab00efbd3ae58f0abe.png',mtitle:'扶贫<br/>茶园',icon:'/images/show/nav-item-5.png',title:'扶贫茶园',thumb:'https://cdnly.itour.fun/bb/21c530a5e2677f8a0906c5f68f4fa4.png',content:'扶贫茶园'},
{id:1,poster:'https://cdnly.itour.fun/50/6b0df48558fdab00efbd3ae58f0abe.png',mtitle:'扶贫<br/>茶园',icon:'/images/show/nav-item-5.png',title:'扶贫茶园',thumb:'https://cdnly.itour.fun/bb/21c530a5e2677f8a0906c5f68f4fa4.png',content:'扶贫茶园'},
{id:1,poster:'https://cdnly.itour.fun/50/6b0df48558fdab00efbd3ae58f0abe.png',mtitle:'扶贫<br/>茶园',icon:'/images/show/nav-item-5.png',title:'扶贫茶园',thumb:'https://cdnly.itour.fun/bb/21c530a5e2677f8a0906c5f68f4fa4.png',content:'扶贫茶园'}
]
} }
}, },
methods:{ methods:{
...@@ -295,21 +344,106 @@ var vueInstance = new Vue({ ...@@ -295,21 +344,106 @@ var vueInstance = new Vue({
// urls: [this.posterUrl] // 需要预览的图片http链接列表 // urls: [this.posterUrl] // 需要预览的图片http链接列表
// }); // });
}, },
bindShareEvent(){ // 获取页面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] const currentInfo = this.navs[this.activeIdx]
this.posterUrl = currentInfo.poster 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 this.showPoster = true
}, },
setActive(idx){ setActive(idx){
this.activeIdx = Number(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})
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(){ created(){
var idx = getQueryByString(location.href,'idx') this._init_func()
if(!isNaN(idx) && idx>=0){
this.setActive(idx)
}
} }
}) })
</script> </script>
......
skin/vtourskin.xml
...@@ -419,9 +419,10 @@ ...@@ -419,9 +419,10 @@
); );
); );
if(skin_settings.littleplanetintro AND (device.webgl OR device.flash), if(skin_settings.littleplanetintro AND (device.webgl OR device.flash),
skin_setup_littleplanetintro(); skin_setup_littleplanetintro();
); );
skin_addthumbs(); skin_addthumbs();
skin_onresize(); skin_onresize();
...@@ -552,7 +553,7 @@ ...@@ -552,7 +553,7 @@
); );
); );
); );
js(showSwiper());
); );
</action> </action>
......
tour.html
...@@ -7,6 +7,8 @@ ...@@ -7,6 +7,8 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black"/> <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<meta http-equiv="x-ua-compatible" content="IE=edge"/> <meta http-equiv="x-ua-compatible" content="IE=edge"/>
<script src="/libs/vue/vue.js"></script>
<script src="/libs/axios.min.js"></script>
<link rel="stylesheet" href="/libs/swiper3d/src/css/3dSwiper.css"> <link rel="stylesheet" href="/libs/swiper3d/src/css/3dSwiper.css">
<style> <style>
@-ms-viewport { @-ms-viewport {
...@@ -40,6 +42,7 @@ ...@@ -40,6 +42,7 @@
left: 0; left: 0;
top: 0; top: 0;
z-index: -1; z-index: -1;
visibility: hidden;
} }
ul,li { ul,li {
list-style: none; list-style: none;
...@@ -59,50 +62,12 @@ ...@@ -59,50 +62,12 @@
<body> <body>
<div id="pano" style="width:100%;height:100%;"></div> <div id="pano" style="width:100%;height:100%;"></div>
<div id="swiper" style="width:100%;height:100%;"> <div id="swiper" style="width:100%;height:100%;">
<div class="swiper-container "> <div class="swiper-container " id="app">
<ul class="swiper-wrap"> <ul class="swiper-wrap" v-if="loadReady">
<li> <li v-for="(item,idx) in slides" :key="idx">
<img class="img-item" onclick="toShow(0)" src="/images/slide/0.png"> <img class="img-item" @click="toShow(item.title,item.id,idx)" :src="item.image">
</li>
<li>
<img class="img-item" onclick="toShow(1)" src="/images/slide/5.jpg">
</li>
<li>
<img class="img-item" onclick="toShow(2)" src="/images/slide/6.jpg">
</li>
<li>
<img class="img-item" onclick="toShow(3)" src="/images/slide/7.jpg">
</li>
<li>
<img class="img-item" onclick="toShow(false)" src="/images/slide/8.jpg">
</li>
<li>
<img class="img-item" onclick="toShow(false)" src="/images/slide/9.jpg">
</li>
<li>
<img class="img-item" onclick="toShow(false)" src="/images/slide/10.jpg">
</li> </li>
</ul> </ul>
<!-- <ul class="swiper-wrap">-->
<!-- <li>-->
<!-- <img src="/libs/swiper3d/images/3dSwiper/3dBanner1.png">-->
<!-- </li>-->
<!-- <li>-->
<!-- <img src="/libs/swiper3d/images/3dSwiper/3dBanner2.png">-->
<!-- </li>-->
<!-- <li>-->
<!-- <img src="/libs/swiper3d/images/3dSwiper/3dBanner3.png">-->
<!-- </li>-->
<!-- <li>-->
<!-- <img src="/libs/swiper3d/images/3dSwiper/3dBanner4.png">-->
<!-- </li>-->
<!-- <li>-->
<!-- <img src="/libs/swiper3d/images/3dSwiper/3dBanner5.png">-->
<!-- </li>-->
<!-- <li>-->
<!-- <img src="/libs/swiper3d/images/3dSwiper/3dBanner6.png">-->
<!-- </li>-->
<!-- </ul>-->
<ul class="swiper-dots"></ul> <ul class="swiper-dots"></ul>
<ul class="swiper-navigator"> <ul class="swiper-navigator">
<li class="swiper-btn-prev">&lt;</li> <li class="swiper-btn-prev">&lt;</li>
...@@ -110,64 +75,124 @@ ...@@ -110,64 +75,124 @@
</ul> </ul>
</div> </div>
</div> </div>
<script src="/libs/helper.js"></script>
<script src="/libs/swiper3d/src/js/3dSwiper.js"></script> <script src="/libs/swiper3d/src/js/3dSwiper.js"></script>
<script> <script>
new Swiper(".swiper-container",{
pagination: ".swiper-dots",
navigator: {
prev: ".swiper-btn-prev",
next: ".swiper-btn-next" 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(){
this.slides = await $get('/category/list').then(res=>res.data).catch(err=>{throw err})
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
});
})
}
}, },
delay: 4000, created(){
autoPlay: true this._init_func()
});
function toShow(idx) {
console.log(idx)
if(idx!==false){
location.href = '/show.html?idx='+idx
}else{
location.href = '/show.html'
} }
})
}
</script>
</script>
<script src="tour.js"></script> <script src="tour.js"></script>
<script> <script>
embedpano({ window.onload = function () {
swf: "tour.swf", if(sessionStorage.getItem('is_load')){
xml: "tour.xml", showSwiper()
target: "pano", embedpano({
html5: "auto", // swf: "tour.swf",
mobilescale: 1.0, xml: "tour_no_littleplantintro.xml",
passQueryParameters: true, target: "pano",
onready: krpano_onready_callback html5: "only",
}); mobilescale: 1.0,
passQueryParameters: true,
function showSwiper() { onready: krpano_onready_callback2
setTimeout(function(){ });
console.log('showSwiper')
//alert('showSwiper'); }else{
document.getElementById('swiper').style.zIndex = 4 embedpano({
},4000) // swf: "tour.swf",
xml: "tour.xml",
target: "pano",
html5: "only",
mobilescale: 1.0,
passQueryParameters: true,
onready: krpano_onready_callback
});
}
} }
function krpano_onready_callback(krpano_interface) {
krpano = krpano_interface;
setTimeout(() => {
add_hotspot('完善的设施', 128.862, 4.478)
add_hotspot('宜人的气候', '-144.129', -5)
}, 1000) async function showSwiper() {
document.getElementById('swiper').style.visibility = 'visible'
document.getElementById('swiper').style.zIndex = 4
}
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) {
// setTimeout(()=>{ krpano = krpano_interface;
// console.log(krpano)
// krpano.set("skin_settings.littleplanetintro", false)
// },3000) sessionStorage.setItem('is_load',1)
// setTimeout(() => {
// add_hotspot('完善的设施', 128.862, 4.478)
// add_hotspot('宜人的气候', '-144.129', -5)
//
// }, 1000)
showSwiper()
} }
/** /**
...@@ -211,6 +236,9 @@ window.func = function () { ...@@ -211,6 +236,9 @@ window.func = function () {
console.log(3333333333) console.log(3333333333)
} }
function trace(a) {
console.log(a)
}
function test(hs) { function test(hs) {
// if(hs==='完善的设施'){ // if(hs==='完善的设施'){
...@@ -222,7 +250,6 @@ function test(hs) { ...@@ -222,7 +250,6 @@ function test(hs) {
} }
</script> </script>
</div>
</body> </body>
</html> </html>
tour.xml
...@@ -128,55 +128,55 @@ ...@@ -128,55 +128,55 @@
onloaded.addevent="" onloaded.addevent=""
/> />
<hotspot name="mytext" <!-- <hotspot name="mytext"-->
type="text" <!-- type="text"-->
ath="-144.129" atv="-8" edge="center" <!-- ath="-144.129" atv="-8" edge="center"-->
distorted="true" <!-- distorted="true"-->
renderer="webgl" <!-- renderer="webgl"-->
html="宜人的气候" <!-- html="宜人的气候"-->
css="font-family:Arial; font-size:16px; color:#FFFFFF;" <!-- css="font-family:Arial; font-size:16px; color:#FFFFFF;"-->
vcenter="false" <!-- vcenter="false"-->
padding="8" <!-- padding="8"-->
zorder="5" <!-- zorder="5"-->
wordwrap="true" <!-- wordwrap="true"-->
bg="true" <!-- bg="true"-->
bgcolor="0xFFFFFF" <!-- bgcolor="0xFFFFFF"-->
bgalpha="0.2" <!-- bgalpha="0.2"-->
bgborder="0" <!-- bgborder="0"-->
bgroundedge="6" <!-- bgroundedge="6"-->
bgshadow="" <!-- bgshadow=""-->
txtshadow="" <!-- txtshadow=""-->
mergedalpha="true" <!-- mergedalpha="true"-->
oversampling="1.0" <!-- oversampling="1.0"-->
mipmapping="false" <!-- mipmapping="false"-->
onautosized="" <!-- onautosized=""-->
onclick="bindJsEvent('完善的设施')" <!-- onclick="bindJsEvent('完善的设施')"-->
/> <!-- />-->
<hotspot name="mytext2" <!-- <hotspot name="mytext2"-->
type="text" <!-- type="text"-->
ath="128.862" atv="0" edge="center" <!-- ath="128.862" atv="0" edge="center"-->
distorted="true" <!-- distorted="true"-->
zorder="3" <!-- zorder="3"-->
renderer="webgl" <!-- renderer="webgl"-->
html="完善的设施" <!-- html="完善的设施"-->
css="font-family:Arial; font-size:16px; color:#FFFFFF;" <!-- css="font-family:Arial; font-size:16px; color:#FFFFFF;"-->
vcenter="false" <!-- vcenter="false"-->
padding="8" <!-- padding="8"-->
wordwrap="true" <!-- wordwrap="true"-->
bg="true" <!-- bg="true"-->
bgcolor="0xFFFFFF" <!-- bgcolor="0xFFFFFF"-->
bgalpha="0.2" <!-- bgalpha="0.2"-->
bgborder="0" <!-- bgborder="0"-->
bgroundedge="6" <!-- bgroundedge="6"-->
bgshadow="" <!-- bgshadow=""-->
txtshadow="" <!-- txtshadow=""-->
mergedalpha="true" <!-- mergedalpha="true"-->
oversampling="1.0" <!-- oversampling="1.0"-->
mipmapping="false" <!-- mipmapping="false"-->
onautosized="" <!-- onautosized=""-->
onclick="bindJsEvent('完善的设施')" <!-- onclick="bindJsEvent('完善的设施')"-->
/> <!-- />-->
</scene> </scene>
......
tour_no_littleplantintro.xml 0 → 100644
<krpano version="1.19" title="Virtual Tour">
<include url="skin/vtourskin.xml" />
<!-- customize skin settings: maps, gyro, webvr, thumbnails, tooltips, layout, design, ... -->
<skin_settings maps="false"
maps_type="google"
maps_bing_api_key=""
maps_google_api_key=""
maps_zoombuttons="false"
gyro="true"
webvr="true"
webvr_gyro_keeplookingdirection="false"
webvr_prev_next_hotspots="true"
littleplanetintro="false"
title="true"
thumbs="true"
thumbs_width="120" thumbs_height="80" thumbs_padding="10" thumbs_crop="0|40|240|160"
thumbs_opened="false"
thumbs_text="false"
thumbs_dragging="true"
thumbs_onhoverscrolling="false"
thumbs_scrollbuttons="false"
thumbs_scrollindicator="false"
thumbs_loop="false"
tooltips_buttons="false"
tooltips_thumbs="false"
tooltips_hotspots="false"
tooltips_mapspots="false"
deeplinking="false"
loadscene_flags="MERGE"
loadscene_blend="OPENBLEND(0.5, 0.0, 0.75, 0.05, linear)"
loadscene_blend_prev="SLIDEBLEND(0.5, 180, 0.75, linear)"
loadscene_blend_next="SLIDEBLEND(0.5, 0, 0.75, linear)"
loadingtext="loading..."
layout_width="100%"
layout_maxwidth="814"
controlbar_width="-24"
controlbar_height="40"
controlbar_offset="20"
controlbar_offset_closed="-40"
controlbar_overlap.no-fractionalscaling="10"
controlbar_overlap.fractionalscaling="0"
design_skin_images="vtourskin.png"
design_bgcolor="0x2D3E50"
design_bgalpha="0.8"
design_bgborder="0"
design_bgroundedge="1"
design_bgshadow="0 4 10 0x000000 0.3"
design_thumbborder_bgborder="3 0xFFFFFF 1.0"
design_thumbborder_padding="2"
design_thumbborder_bgroundedge="0"
design_text_css="color:#FFFFFF; font-family:Arial;"
design_text_shadow="1"
/>
<!--
For an alternative skin design either change the <skin_settings> values
from above or optionally include one of the predefined designs from below.
-->
<!-- <include url="skin/vtourskin_design_flat_light.xml" /> -->
<!-- <include url="skin/vtourskin_design_glass.xml" /> -->
<!-- <include url="skin/vtourskin_design_ultra_light.xml" /> -->
<!-- <include url="skin/vtourskin_design_117.xml" /> -->
<!-- <include url="skin/vtourskin_design_117round.xml" /> -->
<!-- <include url="skin/vtourskin_design_black.xml" /> -->
<!-- startup action - load the first scene -->
<action name="startup" autorun="onstart">
if(startscene === null OR !scene[get(startscene)], copy(startscene,scene[0].name); );
loadscene(get(startscene), null, MERGE);
if(startactions !== null, startactions() );
</action>
<action name="bindJsEvent">
js(test(%1));
</action>
<scene name="scene_vr" title="vr" onstart="" thumburl="panos/vr.tiles/thumb.jpg" lat="26.20434422" lng="107.80451219" heading="0.0">
<view hlookat="0.0" vlookat="0.0" fovtype="MFOV" fov="120" maxpixelzoom="2.0" fovmin="70" fovmax="140" limitview="auto" />
<preview url="panos/vr.tiles/preview.jpg" />
<image prealign="0|0.0|0">
<cube url="panos/vr.tiles/pano_%s.jpg" />
</image>
<layer name="mask"
type="container"
keep="true"
parent=""
visible="true"
enabled="true"
handcursor="true"
maskchildren="false"
scalechildren="false"
zorder="1"
style=""
align=""
edge=""
x=""
y=""
rotate="0.0"
width="100%"
height="100%"
scale="1.0"
alpha="1.0"
crop=""
onovercrop=""
ondowncrop=""
bgcolor="0x000000"
bgalpha="0.1"
bgborder="0"
bgroundedge="0"
bgshadow=""
bgcapture="true"
onover.addevent=""
onhover.addevent=""
onout.addevent=""
onclick.addevent=""
ondown.addevent=""
onup.addevent=""
onloaded.addevent=""
/>
<!-- <hotspot name="mytext"-->
<!-- type="text"-->
<!-- ath="-144.129" atv="-8" edge="center"-->
<!-- distorted="true"-->
<!-- renderer="webgl"-->
<!-- html="宜人的气候"-->
<!-- css="font-family:Arial; font-size:16px; color:#FFFFFF;"-->
<!-- vcenter="false"-->
<!-- padding="8"-->
<!-- zorder="5"-->
<!-- wordwrap="true"-->
<!-- bg="true"-->
<!-- bgcolor="0xFFFFFF"-->
<!-- bgalpha="0.2"-->
<!-- bgborder="0"-->
<!-- bgroundedge="6"-->
<!-- bgshadow=""-->
<!-- txtshadow=""-->
<!-- mergedalpha="true"-->
<!-- oversampling="1.0"-->
<!-- mipmapping="false"-->
<!-- onautosized=""-->
<!-- onclick="bindJsEvent('完善的设施')"-->
<!-- />-->
<!-- <hotspot name="mytext2"-->
<!-- type="text"-->
<!-- ath="128.862" atv="0" edge="center"-->
<!-- distorted="true"-->
<!-- zorder="3"-->
<!-- renderer="webgl"-->
<!-- html="完善的设施"-->
<!-- css="font-family:Arial; font-size:16px; color:#FFFFFF;"-->
<!-- vcenter="false"-->
<!-- padding="8"-->
<!-- wordwrap="true"-->
<!-- bg="true"-->
<!-- bgcolor="0xFFFFFF"-->
<!-- bgalpha="0.2"-->
<!-- bgborder="0"-->
<!-- bgroundedge="6"-->
<!-- bgshadow=""-->
<!-- txtshadow=""-->
<!-- mergedalpha="true"-->
<!-- oversampling="1.0"-->
<!-- mipmapping="false"-->
<!-- onautosized=""-->
<!-- onclick="bindJsEvent('完善的设施')"-->
<!-- />-->
</scene>
</krpano>
travel.html
...@@ -7,25 +7,490 @@ ...@@ -7,25 +7,490 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="x-ua-compatible" content="IE=edge" /> <meta http-equiv="x-ua-compatible" content="IE=edge" />
<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="/libs/rem.js"></script> <script src="/libs/rem.js"></script>
<script src="/libs/vue/vue.js"></script>
<script src="/libs/axios.min.js"></script>
<style> <style>
#canvasEle{
position: absolute;
left: 100%;
}
@font-face {
font-family: myFont;
src: url('/font/ltzk.ttf');
}
*{ *{
margin: 0; margin: 0;
padding: 0; padding: 0;
border:none; border:none;
} }
.full-img{ .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%; 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; 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{
}
.channel-title img{
width: 0.34rem;
}
.channel-title span{
padding-left: 0.3rem;
}
.channel-text{
font-size: 0.29rem;
font-weight: 300;
color: #FEFEFE;
line-height: 0.48rem;
margin-bottom: 0.5rem;
}
</style> </style>
<!-- <script src="/libs/vue/vue.js"></script>-->
</head> </head>
<body id="app"> <body>
<img class="full-img" src="/images/travel.png" /> <!--: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="thumb">
<img class="thumb__img" :src="navs[activeIdx].image" />
</div>
<div class="content__text">
<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">
贵阳龙洞堡机场出站打车至贵阳客运东站，乘客车前往丹寨县（2 小时 30分钟），贵阳客运东站至丹寨县城每天有三班（发车时间分别为：10:30、13:30、 16:30）;
</div>
<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">
到达贵阳龙洞堡机场后，从机场 B1 层乘高铁至三都县站。到达三都县高铁站后，可选择小巴或打车前往丹寨万达小镇，车程大约 35 分钟；
</div>
<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">
贵阳龙洞堡机场或贵阳市区可选择包车和拼车前往丹寨万达小镇，丹寨包车联系电话：189 8583 3071
</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>
<script src="/libs/helper.js"></script>
<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";
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/%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'},
]
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()
}
})
</script> </script>
</body> </body>
</html> </html>
weixinySgXDAJltY/danzhai-holiday-test/index.html 0 → 100644
<!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"/>
</head>
<body id="app">
<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}`
}
}
init_applcation()
</script>
</body>
</html>
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