Skip to content

shuzilixiangwaibao / wanda-vr

Go to a project
Commit 6d0da0d1 by junxiang wang
Options

完成剩余需求。

parent d3e2fd09
Showing with 1777 additions and 212 deletions
font/ltzk.ttf 0 → 100644
File added
index.html
......@@ -2,46 +2,53 @@
<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" />
<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"/>
<style>
*{
* {
margin: 0;
padding: 0;
border:none;
border: none;
}
.page-wrap{
.page-wrap {
position: absolute;
width: 100%;
height: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-image: url("/images/load/hello.png");
background-size: cover;
background-repeat: no-repeat;
background-position: bottom center;
}
.logo{
margin:30px 0 0 20px;
.logo {
margin: 30px 0 0 20px;
height: 14px;
display: block;
}
.title{
.title {
position: absolute;
width: 235px;
bottom: 207px;
left: 50%;
transform: translateX(-50%);
}
.mtitle{
.mtitle {
position: absolute;
height: 15px;
bottom: 162px;
left: 50%;
transform: translateX(-50%);
}
.go{
.go {
position: absolute;
height: 63px;
bottom: 18px;
......@@ -49,18 +56,41 @@
transform: translateX(-50%);
}
</style>
<!-- <script src="/libs/vue/vue.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/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 src="/libs/helper.js"></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() {
location.href = '/tour.html'
location.href = '/tour.html'
}
</script>
</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 @@
<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;
}
.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%;
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>
<!-- <script src="/libs/vue/vue.js"></script>-->
</head>
<body id="app">
<img class="full-img" src="/images/route.png" />
<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>
<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";
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>
</body>
</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 @@
<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: absolute;
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;
......@@ -26,6 +37,7 @@
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.nav-list{
......@@ -42,7 +54,7 @@
}
.nav-item{
display: inline-block;
width: 1.04rem;
width: 1.14rem;
height: 1.85rem;
margin-left: 0.42rem;
border-radius: 0.1rem;
......@@ -55,7 +67,7 @@
background: rgba(23, 40, 63, 0.3);
}
.nav-item__iconbox{
margin: 0.07rem 0.02rem auto;
margin: 0.07rem auto auto;
width: 1rem;
height: 1rem;
border-radius: 50%;
......@@ -80,13 +92,18 @@
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;
......@@ -127,7 +144,7 @@
left: 0;
bottom:0;
width: 100%;
background-image: url("/images/show/fupin.png");
background-size: cover;
background-repeat: no-repeat;
background-position: bottom center;
......@@ -191,97 +208,129 @@
border-radius: 0.33rem;
text-align: center;
}
</style>
<script src="/libs/vue/vue.js"></script>
</head>
<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-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.icon" class="nav-item__icon" />
<img :src="item.small_image" class="nav-item__icon" />
</div>
<div class="nav-item__mtitle" v-html="item.mtitle"></div>
<div class="nav-item__mtitle">{{item.title}}</div>
</div>
</div>
<div class="mtitle">
<span>{{navs[activeIdx].title}}</span>
<img src="/images/show/yinle.png" class="mtitle__icon">
{{navs[activeIdx].title}}
</div>
<div class="thumb">
<img class="thumb__img" :src="navs[activeIdx].thumb" />
<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">
<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 class="change-poster-btn">换一换</div>
<div @click.stop="refreshShareText" class="change-poster-btn">换一换</div>
</div>
<div class="poster-action-box">
<div class="poster-action-btn">保存图片</div>
<div class="poster-action-btn">分享好友</div>
<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>
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 name
* @returns {string|null}
* @constructor
* @param ctx
* @param canvasWidth
* @param initX
* @param initY
* @param lineHeight
* @param fontSize
* @param dpr
* @returns {number}
*/
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])// 一直覆盖，要最后的就行了
}
}
function canvasTextAutoLine(str, ctx, canvasWidth, initX, initY, lineHeight,fontSize,dpr,bold=false) {
return rt
}
var lineWidth = 0
var lastSubStrIndex = 0,
totalLineHeight = 0
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 // 返回参数值
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:[
{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:'扶贫茶园'}
]
navs:[]
}
},
methods:{
......@@ -295,21 +344,106 @@ var vueInstance = new Vue({
// 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]
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
},
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})
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(){
var idx = getQueryByString(location.href,'idx')
if(!isNaN(idx) && idx>=0){
this.setActive(idx)
}
this._init_func()
}
})
</script>
......
skin/vtourskin.xml
......@@ -419,6 +419,7 @@
);
);
if(skin_settings.littleplanetintro AND (device.webgl OR device.flash),
skin_setup_littleplanetintro();
);
......@@ -552,7 +553,7 @@
);
);
);
js(showSwiper());
);
</action>
......
tour.html
......@@ -7,6 +7,8 @@
<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">
<style>
@-ms-viewport {
......@@ -40,6 +42,7 @@
left: 0;
top: 0;
z-index: -1;
visibility: hidden;
}
ul,li {
list-style: none;
......@@ -59,50 +62,12 @@
<body>
<div id="pano" style="width:100%;height:100%;"></div>
<div id="swiper" style="width:100%;height:100%;">
<div class="swiper-container ">
<ul class="swiper-wrap">
<li>
<img class="img-item" onclick="toShow(0)" src="/images/slide/0.png">
</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">
<div class="swiper-container " id="app">
<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">
</li>
</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-navigator">
<li class="swiper-btn-prev">&lt;</li>
......@@ -110,10 +75,49 @@
</ul>
</div>
</div>
<script src="/libs/helper.js"></script>
<script src="/libs/swiper3d/src/js/3dSwiper.js"></script>
<script>
new Swiper(".swiper-container",{
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",
......@@ -121,53 +125,74 @@ new Swiper(".swiper-container",{
},
delay: 4000,
autoPlay: true
});
});
})
}
},
created(){
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>
embedpano({
swf: "tour.swf",
window.onload = function () {
if(sessionStorage.getItem('is_load')){
showSwiper()
embedpano({
// swf: "tour.swf",
xml: "tour_no_littleplantintro.xml",
target: "pano",
html5: "only",
mobilescale: 1.0,
passQueryParameters: true,
onready: krpano_onready_callback2
});
}else{
embedpano({
// swf: "tour.swf",
xml: "tour.xml",
target: "pano",
html5: "auto",
html5: "only",
mobilescale: 1.0,
passQueryParameters: true,
onready: krpano_onready_callback
});
});
}
}
function showSwiper() {
setTimeout(function(){
console.log('showSwiper')
//alert('showSwiper');
async function showSwiper() {
document.getElementById('swiper').style.visibility = 'visible'
document.getElementById('swiper').style.zIndex = 4
},4000)
}
function krpano_onready_callback(krpano_interface) {
krpano = krpano_interface;
setTimeout(() => {
add_hotspot('完善的设施', 128.862, 4.478)
add_hotspot('宜人的气候', '-144.129', -5)
}, 1000)
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(()=>{
//
// setTimeout(() => {
// add_hotspot('完善的设施', 128.862, 4.478)
// add_hotspot('宜人的气候', '-144.129', -5)
//
// },3000)
// }, 1000)
showSwiper()
}
/**
......@@ -211,6 +236,9 @@ window.func = function () {
console.log(3333333333)
}
function trace(a) {
console.log(a)
}
function test(hs) {
// if(hs==='完善的设施'){
......@@ -222,7 +250,6 @@ function test(hs) {
}
</script>
</div>
</body>
</html>
tour.xml
......@@ -128,55 +128,55 @@
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('完善的设施')"
/>
<!-- <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>
......
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 @@
<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;
}
.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%;
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{
}
.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>
<!-- <script src="/libs/vue/vue.js"></script>-->
</head>
<body id="app">
<img class="full-img" src="/images/travel.png" />
<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="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>
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>
</body>
</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