Skip to content

shuzilixiangwaibao / wanda-vr

Go to a project
Commit 87098650 by 白宇
Options

route

parent f585036b
Showing with 3266 additions and 1 deletions
libs/hammer.js 0 → 100644
/*! Hammer.JS - v2.0.8 - 2016-04-23
* http://hammerjs.github.io/
*
* Copyright (c) 2016 Jorik Tangelder;
* Licensed under the MIT license */
!function(a,b,c,d){"use strict";function e(a,b,c){return setTimeout(j(a,c),b)}function f(a,b,c){return Array.isArray(a)?(g(a,c[b],c),!0):!1}function g(a,b,c){var e;if(a)if(a.forEach)a.forEach(b,c);else if(a.length!==d)for(e=0;e<a.length;)b.call(c,a[e],e,a),e++;else for(e in a)a.hasOwnProperty(e)&&b.call(c,a[e],e,a)}function h(b,c,d){var e="DEPRECATED METHOD: "+c+"\n"+d+" AT \n";return function(){var c=new Error("get-stack-trace"),d=c&&c.stack?c.stack.replace(/^[^\(]+?[\n$]/gm,"").replace(/^\s+at\s+/gm,"").replace(/^Object.<anonymous>\s*\(/gm,"{anonymous}()@"):"Unknown Stack Trace",f=a.console&&(a.console.warn||a.console.log);return f&&f.call(a.console,e,d),b.apply(this,arguments)}}function i(a,b,c){var d,e=b.prototype;d=a.prototype=Object.create(e),d.constructor=a,d._super=e,c&&la(d,c)}function j(a,b){return function(){return a.apply(b,arguments)}}function k(a,b){return typeof a==oa?a.apply(b?b[0]||d:d,b):a}function l(a,b){return a===d?b:a}function m(a,b,c){g(q(b),function(b){a.addEventListener(b,c,!1)})}function n(a,b,c){g(q(b),function(b){a.removeEventListener(b,c,!1)})}function o(a,b){for(;a;){if(a==b)return!0;a=a.parentNode}return!1}function p(a,b){return a.indexOf(b)>-1}function q(a){return a.trim().split(/\s+/g)}function r(a,b,c){if(a.indexOf&&!c)return a.indexOf(b);for(var d=0;d<a.length;){if(c&&a[d][c]==b||!c&&a[d]===b)return d;d++}return-1}function s(a){return Array.prototype.slice.call(a,0)}function t(a,b,c){for(var d=[],e=[],f=0;f<a.length;){var g=b?a[f][b]:a[f];r(e,g)<0&&d.push(a[f]),e[f]=g,f++}return c&&(d=b?d.sort(function(a,c){return a[b]>c[b]}):d.sort()),d}function u(a,b){for(var c,e,f=b[0].toUpperCase()+b.slice(1),g=0;g<ma.length;){if(c=ma[g],e=c?c+f:b,e in a)return e;g++}return d}function v(){return ua++}function w(b){var c=b.ownerDocument||b;return c.defaultView||c.parentWindow||a}function x(a,b){var c=this;this.manager=a,this.callback=b,this.element=a.element,this.target=a.options.inputTarget,this.domHandler=function(b){k(a.options.enable,[a])&&c.handler(b)},this.init()}function y(a){var b,c=a.options.inputClass;return new(b=c?c:xa?M:ya?P:wa?R:L)(a,z)}function z(a,b,c){var d=c.pointers.length,e=c.changedPointers.length,f=b&Ea&&d-e===0,g=b&(Ga|Ha)&&d-e===0;c.isFirst=!!f,c.isFinal=!!g,f&&(a.session={}),c.eventType=b,A(a,c),a.emit("hammer.input",c),a.recognize(c),a.session.prevInput=c}function A(a,b){var c=a.session,d=b.pointers,e=d.length;c.firstInput||(c.firstInput=D(b)),e>1&&!c.firstMultiple?c.firstMultiple=D(b):1===e&&(c.firstMultiple=!1);var f=c.firstInput,g=c.firstMultiple,h=g?g.center:f.center,i=b.center=E(d);b.timeStamp=ra(),b.deltaTime=b.timeStamp-f.timeStamp,b.angle=I(h,i),b.distance=H(h,i),B(c,b),b.offsetDirection=G(b.deltaX,b.deltaY);var j=F(b.deltaTime,b.deltaX,b.deltaY);b.overallVelocityX=j.x,b.overallVelocityY=j.y,b.overallVelocity=qa(j.x)>qa(j.y)?j.x:j.y,b.scale=g?K(g.pointers,d):1,b.rotation=g?J(g.pointers,d):0,b.maxPointers=c.prevInput?b.pointers.length>c.prevInput.maxPointers?b.pointers.length:c.prevInput.maxPointers:b.pointers.length,C(c,b);var k=a.element;o(b.srcEvent.target,k)&&(k=b.srcEvent.target),b.target=k}function B(a,b){var c=b.center,d=a.offsetDelta||{},e=a.prevDelta||{},f=a.prevInput||{};b.eventType!==Ea&&f.eventType!==Ga||(e=a.prevDelta={x:f.deltaX||0,y:f.deltaY||0},d=a.offsetDelta={x:c.x,y:c.y}),b.deltaX=e.x+(c.x-d.x),b.deltaY=e.y+(c.y-d.y)}function C(a,b){var c,e,f,g,h=a.lastInterval||b,i=b.timeStamp-h.timeStamp;if(b.eventType!=Ha&&(i>Da||h.velocity===d)){var j=b.deltaX-h.deltaX,k=b.deltaY-h.deltaY,l=F(i,j,k);e=l.x,f=l.y,c=qa(l.x)>qa(l.y)?l.x:l.y,g=G(j,k),a.lastInterval=b}else c=h.velocity,e=h.velocityX,f=h.velocityY,g=h.direction;b.velocity=c,b.velocityX=e,b.velocityY=f,b.direction=g}function D(a){for(var b=[],c=0;c<a.pointers.length;)b[c]={clientX:pa(a.pointers[c].clientX),clientY:pa(a.pointers[c].clientY)},c++;return{timeStamp:ra(),pointers:b,center:E(b),deltaX:a.deltaX,deltaY:a.deltaY}}function E(a){var b=a.length;if(1===b)return{x:pa(a[0].clientX),y:pa(a[0].clientY)};for(var c=0,d=0,e=0;b>e;)c+=a[e].clientX,d+=a[e].clientY,e++;return{x:pa(c/b),y:pa(d/b)}}function F(a,b,c){return{x:b/a||0,y:c/a||0}}function G(a,b){return a===b?Ia:qa(a)>=qa(b)?0>a?Ja:Ka:0>b?La:Ma}function H(a,b,c){c||(c=Qa);var d=b[c[0]]-a[c[0]],e=b[c[1]]-a[c[1]];return Math.sqrt(d*d+e*e)}function I(a,b,c){c||(c=Qa);var d=b[c[0]]-a[c[0]],e=b[c[1]]-a[c[1]];return 180*Math.atan2(e,d)/Math.PI}function J(a,b){return I(b[1],b[0],Ra)+I(a[1],a[0],Ra)}function K(a,b){return H(b[0],b[1],Ra)/H(a[0],a[1],Ra)}function L(){this.evEl=Ta,this.evWin=Ua,this.pressed=!1,x.apply(this,arguments)}function M(){this.evEl=Xa,this.evWin=Ya,x.apply(this,arguments),this.store=this.manager.session.pointerEvents=[]}function N(){this.evTarget=$a,this.evWin=_a,this.started=!1,x.apply(this,arguments)}function O(a,b){var c=s(a.touches),d=s(a.changedTouches);return b&(Ga|Ha)&&(c=t(c.concat(d),"identifier",!0)),[c,d]}function P(){this.evTarget=bb,this.targetIds={},x.apply(this,arguments)}function Q(a,b){var c=s(a.touches),d=this.targetIds;if(b&(Ea|Fa)&&1===c.length)return d[c[0].identifier]=!0,[c,c];var e,f,g=s(a.changedTouches),h=[],i=this.target;if(f=c.filter(function(a){return o(a.target,i)}),b===Ea)for(e=0;e<f.length;)d[f[e].identifier]=!0,e++;for(e=0;e<g.length;)d[g[e].identifier]&&h.push(g[e]),b&(Ga|Ha)&&delete d[g[e].identifier],e++;return h.length?[t(f.concat(h),"identifier",!0),h]:void 0}function R(){x.apply(this,arguments);var a=j(this.handler,this);this.touch=new P(this.manager,a),this.mouse=new L(this.manager,a),this.primaryTouch=null,this.lastTouches=[]}function S(a,b){a&Ea?(this.primaryTouch=b.changedPointers[0].identifier,T.call(this,b)):a&(Ga|Ha)&&T.call(this,b)}function T(a){var b=a.changedPointers[0];if(b.identifier===this.primaryTouch){var c={x:b.clientX,y:b.clientY};this.lastTouches.push(c);var d=this.lastTouches,e=function(){var a=d.indexOf(c);a>-1&&d.splice(a,1)};setTimeout(e,cb)}}function U(a){for(var b=a.srcEvent.clientX,c=a.srcEvent.clientY,d=0;d<this.lastTouches.length;d++){var e=this.lastTouches[d],f=Math.abs(b-e.x),g=Math.abs(c-e.y);if(db>=f&&db>=g)return!0}return!1}function V(a,b){this.manager=a,this.set(b)}function W(a){if(p(a,jb))return jb;var b=p(a,kb),c=p(a,lb);return b&&c?jb:b||c?b?kb:lb:p(a,ib)?ib:hb}function X(){if(!fb)return!1;var b={},c=a.CSS&&a.CSS.supports;return["auto","manipulation","pan-y","pan-x","pan-x pan-y","none"].forEach(function(d){b[d]=c?a.CSS.supports("touch-action",d):!0}),b}function Y(a){this.options=la({},this.defaults,a||{}),this.id=v(),this.manager=null,this.options.enable=l(this.options.enable,!0),this.state=nb,this.simultaneous={},this.requireFail=[]}function Z(a){return a&sb?"cancel":a&qb?"end":a&pb?"move":a&ob?"start":""}function $(a){return a==Ma?"down":a==La?"up":a==Ja?"left":a==Ka?"right":""}function _(a,b){var c=b.manager;return c?c.get(a):a}function aa(){Y.apply(this,arguments)}function ba(){aa.apply(this,arguments),this.pX=null,this.pY=null}function ca(){aa.apply(this,arguments)}function da(){Y.apply(this,arguments),this._timer=null,this._input=null}function ea(){aa.apply(this,arguments)}function fa(){aa.apply(this,arguments)}function ga(){Y.apply(this,arguments),this.pTime=!1,this.pCenter=!1,this._timer=null,this._input=null,this.count=0}function ha(a,b){return b=b||{},b.recognizers=l(b.recognizers,ha.defaults.preset),new ia(a,b)}function ia(a,b){this.options=la({},ha.defaults,b||{}),this.options.inputTarget=this.options.inputTarget||a,this.handlers={},this.session={},this.recognizers=[],this.oldCssProps={},this.element=a,this.input=y(this),this.touchAction=new V(this,this.options.touchAction),ja(this,!0),g(this.options.recognizers,function(a){var b=this.add(new a[0](a[1]));a[2]&&b.recognizeWith(a[2]),a[3]&&b.requireFailure(a[3])},this)}function ja(a,b){var c=a.element;if(c.style){var d;g(a.options.cssProps,function(e,f){d=u(c.style,f),b?(a.oldCssProps[d]=c.style[d],c.style[d]=e):c.style[d]=a.oldCssProps[d]||""}),b||(a.oldCssProps={})}}function ka(a,c){var d=b.createEvent("Event");d.initEvent(a,!0,!0),d.gesture=c,c.target.dispatchEvent(d)}var la,ma=["","webkit","Moz","MS","ms","o"],na=b.createElement("div"),oa="function",pa=Math.round,qa=Math.abs,ra=Date.now;la="function"!=typeof Object.assign?function(a){if(a===d||null===a)throw new TypeError("Cannot convert undefined or null to object");for(var b=Object(a),c=1;c<arguments.length;c++){var e=arguments[c];if(e!==d&&null!==e)for(var f in e)e.hasOwnProperty(f)&&(b[f]=e[f])}return b}:Object.assign;var sa=h(function(a,b,c){for(var e=Object.keys(b),f=0;f<e.length;)(!c||c&&a[e[f]]===d)&&(a[e[f]]=b[e[f]]),f++;return a},"extend","Use `assign`."),ta=h(function(a,b){return sa(a,b,!0)},"merge","Use `assign`."),ua=1,va=/mobile|tablet|ip(ad|hone|od)|android/i,wa="ontouchstart"in a,xa=u(a,"PointerEvent")!==d,ya=wa&&va.test(navigator.userAgent),za="touch",Aa="pen",Ba="mouse",Ca="kinect",Da=25,Ea=1,Fa=2,Ga=4,Ha=8,Ia=1,Ja=2,Ka=4,La=8,Ma=16,Na=Ja|Ka,Oa=La|Ma,Pa=Na|Oa,Qa=["x","y"],Ra=["clientX","clientY"];x.prototype={handler:function(){},init:function(){this.evEl&&m(this.element,this.evEl,this.domHandler),this.evTarget&&m(this.target,this.evTarget,this.domHandler),this.evWin&&m(w(this.element),this.evWin,this.domHandler)},destroy:function(){this.evEl&&n(this.element,this.evEl,this.domHandler),this.evTarget&&n(this.target,this.evTarget,this.domHandler),this.evWin&&n(w(this.element),this.evWin,this.domHandler)}};var Sa={mousedown:Ea,mousemove:Fa,mouseup:Ga},Ta="mousedown",Ua="mousemove mouseup";i(L,x,{handler:function(a){var b=Sa[a.type];b&Ea&&0===a.button&&(this.pressed=!0),b&Fa&&1!==a.which&&(b=Ga),this.pressed&&(b&Ga&&(this.pressed=!1),this.callback(this.manager,b,{pointers:[a],changedPointers:[a],pointerType:Ba,srcEvent:a}))}});var Va={pointerdown:Ea,pointermove:Fa,pointerup:Ga,pointercancel:Ha,pointerout:Ha},Wa={2:za,3:Aa,4:Ba,5:Ca},Xa="pointerdown",Ya="pointermove pointerup pointercancel";a.MSPointerEvent&&!a.PointerEvent&&(Xa="MSPointerDown",Ya="MSPointerMove MSPointerUp MSPointerCancel"),i(M,x,{handler:function(a){var b=this.store,c=!1,d=a.type.toLowerCase().replace("ms",""),e=Va[d],f=Wa[a.pointerType]||a.pointerType,g=f==za,h=r(b,a.pointerId,"pointerId");e&Ea&&(0===a.button||g)?0>h&&(b.push(a),h=b.length-1):e&(Ga|Ha)&&(c=!0),0>h||(b[h]=a,this.callback(this.manager,e,{pointers:b,changedPointers:[a],pointerType:f,srcEvent:a}),c&&b.splice(h,1))}});var Za={touchstart:Ea,touchmove:Fa,touchend:Ga,touchcancel:Ha},$a="touchstart",_a="touchstart touchmove touchend touchcancel";i(N,x,{handler:function(a){var b=Za[a.type];if(b===Ea&&(this.started=!0),this.started){var c=O.call(this,a,b);b&(Ga|Ha)&&c[0].length-c[1].length===0&&(this.started=!1),this.callback(this.manager,b,{pointers:c[0],changedPointers:c[1],pointerType:za,srcEvent:a})}}});var ab={touchstart:Ea,touchmove:Fa,touchend:Ga,touchcancel:Ha},bb="touchstart touchmove touchend touchcancel";i(P,x,{handler:function(a){var b=ab[a.type],c=Q.call(this,a,b);c&&this.callback(this.manager,b,{pointers:c[0],changedPointers:c[1],pointerType:za,srcEvent:a})}});var cb=2500,db=25;i(R,x,{handler:function(a,b,c){var d=c.pointerType==za,e=c.pointerType==Ba;if(!(e&&c.sourceCapabilities&&c.sourceCapabilities.firesTouchEvents)){if(d)S.call(this,b,c);else if(e&&U.call(this,c))return;this.callback(a,b,c)}},destroy:function(){this.touch.destroy(),this.mouse.destroy()}});var eb=u(na.style,"touchAction"),fb=eb!==d,gb="compute",hb="auto",ib="manipulation",jb="none",kb="pan-x",lb="pan-y",mb=X();V.prototype={set:function(a){a==gb&&(a=this.compute()),fb&&this.manager.element.style&&mb[a]&&(this.manager.element.style[eb]=a),this.actions=a.toLowerCase().trim()},update:function(){this.set(this.manager.options.touchAction)},compute:function(){var a=[];return g(this.manager.recognizers,function(b){k(b.options.enable,[b])&&(a=a.concat(b.getTouchAction()))}),W(a.join(" "))},preventDefaults:function(a){var b=a.srcEvent,c=a.offsetDirection;if(this.manager.session.prevented)return void b.preventDefault();var d=this.actions,e=p(d,jb)&&!mb[jb],f=p(d,lb)&&!mb[lb],g=p(d,kb)&&!mb[kb];if(e){var h=1===a.pointers.length,i=a.distance<2,j=a.deltaTime<250;if(h&&i&&j)return}return g&&f?void 0:e||f&&c&Na||g&&c&Oa?this.preventSrc(b):void 0},preventSrc:function(a){this.manager.session.prevented=!0,a.preventDefault()}};var nb=1,ob=2,pb=4,qb=8,rb=qb,sb=16,tb=32;Y.prototype={defaults:{},set:function(a){return la(this.options,a),this.manager&&this.manager.touchAction.update(),this},recognizeWith:function(a){if(f(a,"recognizeWith",this))return this;var b=this.simultaneous;return a=_(a,this),b[a.id]||(b[a.id]=a,a.recognizeWith(this)),this},dropRecognizeWith:function(a){return f(a,"dropRecognizeWith",this)?this:(a=_(a,this),delete this.simultaneous[a.id],this)},requireFailure:function(a){if(f(a,"requireFailure",this))return this;var b=this.requireFail;return a=_(a,this),-1===r(b,a)&&(b.push(a),a.requireFailure(this)),this},dropRequireFailure:function(a){if(f(a,"dropRequireFailure",this))return this;a=_(a,this);var b=r(this.requireFail,a);return b>-1&&this.requireFail.splice(b,1),this},hasRequireFailures:function(){return this.requireFail.length>0},canRecognizeWith:function(a){return!!this.simultaneous[a.id]},emit:function(a){function b(b){c.manager.emit(b,a)}var c=this,d=this.state;qb>d&&b(c.options.event+Z(d)),b(c.options.event),a.additionalEvent&&b(a.additionalEvent),d>=qb&&b(c.options.event+Z(d))},tryEmit:function(a){return this.canEmit()?this.emit(a):void(this.state=tb)},canEmit:function(){for(var a=0;a<this.requireFail.length;){if(!(this.requireFail[a].state&(tb|nb)))return!1;a++}return!0},recognize:function(a){var b=la({},a);return k(this.options.enable,[this,b])?(this.state&(rb|sb|tb)&&(this.state=nb),this.state=this.process(b),void(this.state&(ob|pb|qb|sb)&&this.tryEmit(b))):(this.reset(),void(this.state=tb))},process:function(a){},getTouchAction:function(){},reset:function(){}},i(aa,Y,{defaults:{pointers:1},attrTest:function(a){var b=this.options.pointers;return 0===b||a.pointers.length===b},process:function(a){var b=this.state,c=a.eventType,d=b&(ob|pb),e=this.attrTest(a);return d&&(c&Ha||!e)?b|sb:d||e?c&Ga?b|qb:b&ob?b|pb:ob:tb}}),i(ba,aa,{defaults:{event:"pan",threshold:10,pointers:1,direction:Pa},getTouchAction:function(){var a=this.options.direction,b=[];return a&Na&&b.push(lb),a&Oa&&b.push(kb),b},directionTest:function(a){var b=this.options,c=!0,d=a.distance,e=a.direction,f=a.deltaX,g=a.deltaY;return e&b.direction||(b.direction&Na?(e=0===f?Ia:0>f?Ja:Ka,c=f!=this.pX,d=Math.abs(a.deltaX)):(e=0===g?Ia:0>g?La:Ma,c=g!=this.pY,d=Math.abs(a.deltaY))),a.direction=e,c&&d>b.threshold&&e&b.direction},attrTest:function(a){return aa.prototype.attrTest.call(this,a)&&(this.state&ob||!(this.state&ob)&&this.directionTest(a))},emit:function(a){this.pX=a.deltaX,this.pY=a.deltaY;var b=$(a.direction);b&&(a.additionalEvent=this.options.event+b),this._super.emit.call(this,a)}}),i(ca,aa,{defaults:{event:"pinch",threshold:0,pointers:2},getTouchAction:function(){return[jb]},attrTest:function(a){return this._super.attrTest.call(this,a)&&(Math.abs(a.scale-1)>this.options.threshold||this.state&ob)},emit:function(a){if(1!==a.scale){var b=a.scale<1?"in":"out";a.additionalEvent=this.options.event+b}this._super.emit.call(this,a)}}),i(da,Y,{defaults:{event:"press",pointers:1,time:251,threshold:9},getTouchAction:function(){return[hb]},process:function(a){var b=this.options,c=a.pointers.length===b.pointers,d=a.distance<b.threshold,f=a.deltaTime>b.time;if(this._input=a,!d||!c||a.eventType&(Ga|Ha)&&!f)this.reset();else if(a.eventType&Ea)this.reset(),this._timer=e(function(){this.state=rb,this.tryEmit()},b.time,this);else if(a.eventType&Ga)return rb;return tb},reset:function(){clearTimeout(this._timer)},emit:function(a){this.state===rb&&(a&&a.eventType&Ga?this.manager.emit(this.options.event+"up",a):(this._input.timeStamp=ra(),this.manager.emit(this.options.event,this._input)))}}),i(ea,aa,{defaults:{event:"rotate",threshold:0,pointers:2},getTouchAction:function(){return[jb]},attrTest:function(a){return this._super.attrTest.call(this,a)&&(Math.abs(a.rotation)>this.options.threshold||this.state&ob)}}),i(fa,aa,{defaults:{event:"swipe",threshold:10,velocity:.3,direction:Na|Oa,pointers:1},getTouchAction:function(){return ba.prototype.getTouchAction.call(this)},attrTest:function(a){var b,c=this.options.direction;return c&(Na|Oa)?b=a.overallVelocity:c&Na?b=a.overallVelocityX:c&Oa&&(b=a.overallVelocityY),this._super.attrTest.call(this,a)&&c&a.offsetDirection&&a.distance>this.options.threshold&&a.maxPointers==this.options.pointers&&qa(b)>this.options.velocity&&a.eventType&Ga},emit:function(a){var b=$(a.offsetDirection);b&&this.manager.emit(this.options.event+b,a),this.manager.emit(this.options.event,a)}}),i(ga,Y,{defaults:{event:"tap",pointers:1,taps:1,interval:300,time:250,threshold:9,posThreshold:10},getTouchAction:function(){return[ib]},process:function(a){var b=this.options,c=a.pointers.length===b.pointers,d=a.distance<b.threshold,f=a.deltaTime<b.time;if(this.reset(),a.eventType&Ea&&0===this.count)return this.failTimeout();if(d&&f&&c){if(a.eventType!=Ga)return this.failTimeout();var g=this.pTime?a.timeStamp-this.pTime<b.interval:!0,h=!this.pCenter||H(this.pCenter,a.center)<b.posThreshold;this.pTime=a.timeStamp,this.pCenter=a.center,h&&g?this.count+=1:this.count=1,this._input=a;var i=this.count%b.taps;if(0===i)return this.hasRequireFailures()?(this._timer=e(function(){this.state=rb,this.tryEmit()},b.interval,this),ob):rb}return tb},failTimeout:function(){return this._timer=e(function(){this.state=tb},this.options.interval,this),tb},reset:function(){clearTimeout(this._timer)},emit:function(){this.state==rb&&(this._input.tapCount=this.count,this.manager.emit(this.options.event,this._input))}}),ha.VERSION="2.0.8",ha.defaults={domEvents:!1,touchAction:gb,enable:!0,inputTarget:null,inputClass:null,preset:[[ea,{enable:!1}],[ca,{enable:!1},["rotate"]],[fa,{direction:Na}],[ba,{direction:Na},["swipe"]],[ga],[ga,{event:"doubletap",taps:2},["tap"]],[da]],cssProps:{userSelect:"none",touchSelect:"none",touchCallout:"none",contentZooming:"none",userDrag:"none",tapHighlightColor:"rgba(0,0,0,0)"}};var ub=1,vb=2;ia.prototype={set:function(a){return la(this.options,a),a.touchAction&&this.touchAction.update(),a.inputTarget&&(this.input.destroy(),this.input.target=a.inputTarget,this.input.init()),this},stop:function(a){this.session.stopped=a?vb:ub},recognize:function(a){var b=this.session;if(!b.stopped){this.touchAction.preventDefaults(a);var c,d=this.recognizers,e=b.curRecognizer;(!e||e&&e.state&rb)&&(e=b.curRecognizer=null);for(var f=0;f<d.length;)c=d[f],b.stopped===vb||e&&c!=e&&!c.canRecognizeWith(e)?c.reset():c.recognize(a),!e&&c.state&(ob|pb|qb)&&(e=b.curRecognizer=c),f++}},get:function(a){if(a instanceof Y)return a;for(var b=this.recognizers,c=0;c<b.length;c++)if(b[c].options.event==a)return b[c];return null},add:function(a){if(f(a,"add",this))return this;var b=this.get(a.options.event);return b&&this.remove(b),this.recognizers.push(a),a.manager=this,this.touchAction.update(),a},remove:function(a){if(f(a,"remove",this))return this;if(a=this.get(a)){var b=this.recognizers,c=r(b,a);-1!==c&&(b.splice(c,1),this.touchAction.update())}return this},on:function(a,b){if(a!==d&&b!==d){var c=this.handlers;return g(q(a),function(a){c[a]=c[a]||[],c[a].push(b)}),this}},off:function(a,b){if(a!==d){var c=this.handlers;return g(q(a),function(a){b?c[a]&&c[a].splice(r(c[a],b),1):delete c[a]}),this}},emit:function(a,b){this.options.domEvents&&ka(a,b);var c=this.handlers[a]&&this.handlers[a].slice();if(c&&c.length){b.type=a,b.preventDefault=function(){b.srcEvent.preventDefault()};for(var d=0;d<c.length;)c[d](b),d++}},destroy:function(){this.element&&ja(this,!1),this.handlers={},this.session={},this.input.destroy(),this.element=null}},la(ha,{INPUT_START:Ea,INPUT_MOVE:Fa,INPUT_END:Ga,INPUT_CANCEL:Ha,STATE_POSSIBLE:nb,STATE_BEGAN:ob,STATE_CHANGED:pb,STATE_ENDED:qb,STATE_RECOGNIZED:rb,STATE_CANCELLED:sb,STATE_FAILED:tb,DIRECTION_NONE:Ia,DIRECTION_LEFT:Ja,DIRECTION_RIGHT:Ka,DIRECTION_UP:La,DIRECTION_DOWN:Ma,DIRECTION_HORIZONTAL:Na,DIRECTION_VERTICAL:Oa,DIRECTION_ALL:Pa,Manager:ia,Input:x,TouchAction:V,TouchInput:P,MouseInput:L,PointerEventInput:M,TouchMouseInput:R,SingleTouchInput:N,Recognizer:Y,AttrRecognizer:aa,Tap:ga,Pan:ba,Swipe:fa,Pinch:ca,Rotate:ea,Press:da,on:m,off:n,each:g,merge:ta,extend:sa,assign:la,inherit:i,bindFn:j,prefixed:u});var wb="undefined"!=typeof a?a:"undefined"!=typeof self?self:{};wb.Hammer=ha,"function"==typeof define&&define.amd?define(function(){return ha}):"undefined"!=typeof module&&module.exports?module.exports=ha:a[c]=ha}(window,document,"Hammer");
//# sourceMappingURL=hammer.min.js.map
\ No newline at end of file
route copy.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"/>
<script src="./libs/jweixin-1.6.0.js"></script>
<script src="./libs/rem.js"></script>
<script src="./libs/vue/vue.js"></script>
<script src="./libs/axios.min.js"></script>
<style>
html,body{
background:#000;
}
#canvasEle {
position: fixed;
left: 200%;
width: 652px;
height: 1066px;
z-index: -3;
}
@font-face {
font-family: myFont;
src: url('./font/ltzk.ttf');
}
* {
margin: 0;
padding: 0;
border: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.page-wrap {
position: fixed;
width: 100%;
height: 100%;
/*background-image: url("./images/show/fupin.png");*/
background-size: cover;
background-repeat: no-repeat;
background-position: bottom center;
/ / padding-bottom: 1.14 rem;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.nav-list {
margin-top: 0.35rem;
width: 100%;
white-space: nowrap;
height: 1.85rem;
overflow-y: hidden;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
}
.nav-list::-webkit-scrollbar {
display: none;
}
.nav-item {
display: inline-block;
width: 1.14rem;
height: 1.85rem;
margin-left: 0.42rem;
border-radius: 0.1rem;
overflow: hidden;
}
.nav-item:last-child {
margin-right: 0.42rem;
}
.nav-item.active {
background: rgba(23, 40, 63, 0.3);
}
.nav-item__iconbox {
margin: 0.07rem auto auto;
width: 1rem;
height: 1rem;
position: relative;
}
.nav-item__icon {
position: absolute;
left: 50%;
top: 50%;
vertical-align: top;
transform: translate(-50%, -50%);
width: 0.95rem;
height: 0.95rem;
overflow: hidden;
}
.nav-item__mtitle {
margin-top: 0.1rem;
text-align: center;
font-size: 0.26rem;
line-height: 0.28rem;
height: 0.56rem;
color: #fff;
width: 1.14rem;
display: block;
white-space: normal;
}
.mtitle {
font-family: myFont;
margin-top: 0.57rem;
color: #fff;
font-size: 0.72rem;
text-align: center;
position: relative;
}
.mtitle__icon {
position: absolute;
right: 0.43rem;
top: 50%;
transform: translateY(-50%);
width: 0.6rem;
height: 0.6rem;
}
.thumb {
padding: 0.45rem 0 0.54rem;
text-align: center;
}
.thumb__img {
width: 6.7rem;
vertical-align: top;
}
.content {
width: 6.7rem;
margin: 0 auto;
flex: 1;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
.content::-webkit-scrollbar {
display: none;
}
.content__text {
font-size: 0.3rem;
color: #fff;
line-height: 0.55rem;
}
.bottom {
height: 1.14rem;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background: none;
z-index: 999;
/*background-image: url("./images/show/fupin.png");*/
/*background-size: cover;*/
/*background-repeat: no-repeat;*/
/*background-position: bottom center;*/
}
.bottom__icon {
width: 0.55rem;
height: 0.84rem;
position: absolute;
right: 0.41rem;
bottom:0.51rem;
filter:drop-shadow(0 0 15px rgba(0,0,0,0.8));
}
.modal-wrap {
background: rgba(0, 0, 0, .7);
position: fixed;
z-index: 3;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.modal-container {
position: relative;
transform: scale(0.9);
}
.poster {
width: 6.51rem;
height: 10.65rem;
position: relative;
margin: 0rem auto 0.25rem;
}
.poster-img {
width: 100%;
height: 100%;
}
.change-poster-btn {
position: absolute;
right: 0.32rem;
top: 0.3rem;
width: 2.08rem;
height: 0.67rem;
background: #FFFFFF;
font-size: 0.3rem;
font-weight: 400;
color: #343434;;
line-height: 0.66rem;
border-radius: 0.33rem;
text-align: center;
z-index: 9;
}
.poster-action-box {
width: 6.51rem;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
.poster-action-btn {
height: 0.66rem;
padding: 0 0.33rem;
background: rgba(255,255,255,.8);
font-size: 0.3rem;
font-weight: 400;
color: #333333;
line-height: 0.66rem;
border-radius: 0.33rem;
text-align: center;
}
.poster-content{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 3;
}
.poster-content__title{
margin-top: 1.14rem;
margin-left: 0.43rem;
font-size: 0.53rem;
font-weight: bold;
color: #FFFFFF;
line-height: 0.8rem;
text-shadow: 0 0 0.1rem rgba(0,0,0,1);
}
.poster-content__content{
width: 4.12rem;
margin-top: 0.35rem;
margin-left: 0.43rem;
font-size: 0.3rem;
font-weight: bold;
color: #FFFFFF;
line-height: 0.36rem;
text-shadow: 0 0 0.1rem rgba(0,0,0,1);
}
.poster-content__qrcode{
width: 1.07rem;
height: 1.07rem;
position: absolute;
left: 0.44rem;
bottom: 0.36rem;
}
.poster-content__userinfo{
position: absolute;
right: 0.47rem;
bottom: 0.32rem;
display: flex;
align-items: center;
}
.poster-content__userinfo .headimg{
width: 0.54rem;
height: 0.54rem;
background: #FFFFFF;
border-radius: 50%;
}
.poster-content__userinfo .tip{
font-size: 0.24rem;
font-weight: bold;
color: #FFFFFF;
line-height: 0.29rem;
margin-left: 0.11rem;
}
.content__text {
color: #fff;
font-size: 0.29rem;
}
.channel-title {
text-align: center;
font-family: myFont;
background: #72C1F2;
width: 6.69rem;
font-size: 0.4rem;
}
.channel-text {
font-size: 0.29rem;
font-weight: 300;
color: #FEFEFE;
line-height: 0.48rem;
padding: 0.15rem 0.15rem 0.3rem;
border-left: 1px solid rgba(255, 255, 255, .35);
border-right: 1px solid rgba(255, 255, 255, .35);
box-sizing: border-box;
width: 6.69rem;
}
.channel-text:last-child {
border-bottom: 1px solid rgba(255, 255, 255, .35);
margin-bottom: 0.48rem;
}
.route-title {
margin-top: 0.5rem;
width: 6.69rem;
height: 0.8rem;
background: #38AAF0;
border-radius: 1rem 1rem 0rem 0rem;
font-family: myFont;
text-align: center;
line-height: 0.8rem;
font-size: 0.5rem;
}
.route-play-tag {
width: 0.24rem;
height: 0.24rem;
background: #FFFFFF;
}
.route-play-title {
margin-left: 0.3rem;
}
.channel-detail-title {
display: flex;
align-items: center;
}
.channel-detail-text {
color: #FFFFFF;
line-height: 0.6rem;
opacity: 0.78;
padding-left: 0.52rem;
}
.pic-modal-wrap{
background: #000000;
position: fixed;
z-index: 1004;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
user-select:none;
}
.pic-modal-wrap .txt{
font-size: 12px;
color: #fff;
opacity: 0.5;
margin-bottom: 10px;
}
.pic-modal-wrap .pic{
user-select:none;
width: 80%;
}
</style>
</head>
<body>
<!--:style="{backgroundImage:'url('+navs[activeIdx].bg_image+')'}"-->
<div id="app" class="page-wrap" v-if="loadReady" :class="{fixed:showPoster}"
:style="{backgroundImage:'url('+navs[activeIdx].bg_image+')'}">
<div class="nav-list">
<div class="nav-item" v-for="(item,idx) in navs" :key="idx" :class="{active:idx===activeIdx}"
@click="setActive(idx,item)">
<div class="nav-item__iconbox">
<img v-if="idx===activeIdx" :src="item.icona" class="nav-item__icon" />
<img v-else :src="item.icon" class="nav-item__icon" />
<!-- <img :src="item.small_image" class="nav-item__icon"/>-->
</div>
<div class="nav-item__mtitle">{{item.title}}</div>
</div>
</div>
<div v-if="activeIdx===0" class="content">
<div class="content__text">
<div class="route-title">{{navs[activeIdx].title}}</div>
<div class="channel-title">
<span>第一天</span>
</div>
<div class="channel-text">
<div class="channel-detail-title">
<div class="route-play-tag"></div>
<div class="route-play-title">白天</div>
</div>
<div class="channel-detail-text">
扶贫茶园茶旅体验：采茶、炒茶、品茶<br/>
小镇打卡：东湖大水车、丹调图书馆、轮值镇长展示中心<br/>
小镇体验：蜡染体验、玻璃栈道、悬崖秋千、水上游船等<br/>
锦华酒店温泉体验<br/>
</div>
<div class="channel-detail-title">
<div class="route-play-tag"></div>
<div class="route-play-title">晚上</div>
</div>
<div class="channel-detail-text">
特色酸汤鱼 - 观看《锦秀丹寨》- 篝火晚会
</div>
</div>
<div class="channel-title">
<span>第二天</span>
</div>
<div class="channel-text">
环湖步道晨跑 - 高要梯田观景台 - 探访金汞矿
</div>
</div>
</div>
<div v-if="activeIdx===1" class="content">
<div class="content__text">
<div class="route-title">{{navs[activeIdx].title}}</div>
<div class="channel-title">
<span>第一天</span>
</div>
<div class="channel-text">
<div class="channel-detail-title">
<div class="route-play-tag"></div>
<div class="route-play-title">白天</div>
</div>
<div class="channel-detail-text">
扶贫茶园茶旅体验：采茶、炒茶、品茶<br/>
小镇打卡：东湖大水车、丹调图书馆、轮值镇长展示中心<br/>
小镇体验：蜡染体验、玻璃栈道、悬崖秋千、水上游船等<br/>
锦华酒店温泉体验<br/>
</div>
<div class="channel-detail-title">
<div class="route-play-tag"></div>
<div class="route-play-title">晚上</div>
</div>
<div class="channel-detail-text">
特色酸汤鱼 - 观看《锦秀丹寨》- 篝火晚会
</div>
</div>
<div class="channel-title">
<span>第二天</span>
</div>
<div class="channel-text">
<div class="channel-detail-title">
<div class="route-play-tag"></div>
<div class="route-play-title">白天</div>
</div>
<div class="channel-detail-text">
环湖步道晨跑 - 高要梯田观景台 - 探访金汞矿
</div>
<div class="channel-detail-title">
<div class="route-play-tag"></div>
<div class="route-play-title">晚上</div>
</div>
<div class="channel-detail-text">
特色斗鸡肉 - 小镇酒吧一条街
</div>
</div>
<div class="channel-title">
<span>第三天</span>
</div>
<div class="channel-text">
探访石桥古法造纸 - 参观大簸箕苗寨
</div>
</div>
</div>
<div v-if="activeIdx===2" class="content">
<div class="content__text">
<div class="route-title">{{navs[activeIdx].title}}</div>
<div class="channel-title">
<span>第一天</span>
</div>
<div class="channel-text">
<div class="channel-detail-title">
<div class="route-play-tag"></div>
<div class="route-play-title">白天</div>
</div>
<div class="channel-detail-text">
扶贫茶园茶旅体验：采茶、炒茶、品茶<br/>
小镇打卡：东湖大水车、丹调图书馆、轮值镇长展示中心<br/>
小镇体验：蜡染体验、玻璃栈道、悬崖秋千、水上游船等<br/>
锦华酒店温泉体验<br/>
</div>
<div class="channel-detail-title">
<div class="route-play-tag"></div>
<div class="route-play-title">晚上</div>
</div>
<div class="channel-detail-text">
特色酸汤鱼 - 观看《锦秀丹寨》- 篝火晚会
</div>
</div>
<div class="channel-title">
<span>第二天</span>
</div>
<div class="channel-text">
<div class="channel-detail-title">
<div class="route-play-tag"></div>
<div class="route-play-title">白天</div>
</div>
<div class="channel-detail-text">
环湖步道晨跑 - 探访金汞矿 - 排廷瀑布 - 高要梯田观景台 - 探访卡拉村鸟笼
</div>
<div class="channel-detail-title">
<div class="route-play-tag"></div>
<div class="route-play-title">晚上</div>
</div>
<div class="channel-detail-text">
特色斗鸡肉 - 小镇酒吧一条街
</div>
</div>
<div class="channel-title">
<span>第三天</span>
</div>
<div class="channel-text">
<div class="channel-detail-title">
<div class="route-play-tag"></div>
<div class="route-play-title">白天</div>
</div>
<div class="channel-detail-text">
探访石桥古法造纸 - 大簸箕苗寨 - 周边村寨捉稻田鱼
</div>
<div class="channel-detail-title">
<div class="route-play-tag"></div>
<div class="route-play-title">晚上</div>
</div>
<div class="channel-detail-text">
特色稻田鱼 - 苗药足浴 SPA 体验
</div>
</div>
<div class="channel-title">
<span>第四天</span>
</div>
<div class="channel-text">
登龙泉山(尤公山)- 喝排佐鸡汤 - 游锦绣谷（韭菜沟森林公园）
</div>
</div>
</div>
<!--:style="{backgroundImage:'url('+navs[activeIdx].bg_image+')'}"-->
<div class="bottom" v-if="!showPoster">
<img @click="bindShareEvent" class="bottom__icon" src="./images/show/share.png"/>
</div>
<div class="modal-wrap" v-if="showPoster" @click="closeModal">
<div class="modal-container">
<div class="poster">
<img :src="navs[activeIdx].share_image" class="poster-img" />
<div @click.stop="refreshShareText" class="change-poster-btn">换一换</div>
<div class="poster-content">
<div class="poster-content__title">{{userInfo.nickname}}的<br/>2020幸运打卡地：丹寨</div>
<div class="poster-content__content">{{shareDesc}}</div>
<img class="poster-content__qrcode" :src="userInfo.qrcode"></img>
<div class="poster-content__userinfo">
<img class="headimg" :src="userInfo.head" />
<div class="tip">快跟着{{userInfo.nickname}}<br/>一起分享丹寨</div>
</div>
</div>
</div>
<div class="poster-action-box">
<div @click.stop="previewImg" class="poster-action-btn">保存图片并发送给好友</div>
<!-- <div @click.stop="shareToFirends" class="poster-action-btn">分享好友</div>-->
</div>
</div>
</div>
<div class="pic-modal-wrap" v-if="showPic" @click="showPic=false">
<div class="txt">长按图片分享给朋友</div><img class="pic" :src="posterUrl" />
</div>
</div>
<canvas id="canvasEle"></canvas>
<script src="./libs/helper.js"></script>
<script>
function createImgByAsync(url) {
return new Promise((resolve, reject) => {
let img = new Image();
img.setAttribute("crossOrigin", 'Anonymous');
img.src = url + '?time=' + new Date().valueOf();
img.onload = function () {
resolve(img)
}
img.onerror = function (err) {
reject(err)
}
})
}
function convertCanvasToImage(canvas) {
let image = new Image();
image.src = canvas.toDataURL("image/png");
return image;
}
function cutstrFun(str, len) {
// console.log(str.length)
var temp = str
if (str.length > len) {
temp = str.substr(0, len) + '..'
}
// console.log(temp)
return temp
}
/**
*
* @param str
* @param ctx
* @param canvasWidth
* @param initX
* @param initY
* @param lineHeight
* @param fontSize
* @param dpr
* @returns {number}
*/
function canvasTextAutoLine(str, ctx, canvasWidth, initX, initY, lineHeight, fontSize, dpr, bold = false) {
if(!str)return;
var lineWidth = 0
var lastSubStrIndex = 0,
totalLineHeight = 0
var fz = fontSize * dpr
ctx.font = (bold ? 'bold ' : '') + `${fz}px "微软雅黑"`;
ctx.fillStyle = "#fff";
ctx.shadowColor = "rgba(0,0,0,0.8)";
ctx.shadowBlur = 8;
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 {
showPic:false,
contentList: [],
loadReady: false,
showPoster: false,
shareTitle:'',
shareDesc:'',
activeIdx: 0,
posterUrl: '',
navs: [],
userInfo:{}
}
},
methods: {
async previewImg(){
this.posterUrl = await this.createdPoster()
this.showPic = true
// wx.previewImage({
// urls: [this.posterUrl] // 需要预览的图片http链接列表
// });
},
shareToFirends(){
const currentInfo = this.navs[this.activeIdx]
var shareDesc = this.navs[this.activeIdx].content
var largeShareName = `${this.userInfo.nickname}的`
var largeShareName2 = `2020幸运打卡地：丹寨`
var shareTitle = largeShareName+largeShareName2
if(wx){
wx.updateAppMessageShareData({
title: FRONT_TITLE, // 分享标题
desc: FRONT_DESC, // 分享描述
link: FRONT_URL+'?'+new Date().getTime(), // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: shareImg(), // 分享图标
success: function () {
// 设置成功
}
})
wx.updateTimelineShareData({
title: shareTitle, // 分享标题
link: FRONT_URL+'?'+new Date().getTime(), // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: shareImg(), // 分享图标
success: function () {
// 设置成功
}
})
}
},
closeModal() {
this.showPoster = false
this.posterUrl = ''
},
bindSave() {
// wx.previewImage({
// urls: [this.posterUrl] // 需要预览的图片http链接列表
// });
},
// 获取页面dpr和宽度
getWindowInfo() {
var windowInfo = {};
windowInfo.dpr = window.devicePixelRatio;
if (window.innerWidth) {
windowInfo.width = window.innerWidth;
} else {
windowInfo.width = document.body.clientWidth;
}
return windowInfo;
},
async createdPoster() {
const currentInfo = this.navs[this.activeIdx]
// console.log(currentInfo)
var userInfo = await getUserInfo();
// console.log(userInfo);
var shareName = `快跟着${userInfo.nickname.length > 4 ? userInfo.nickname.substr(0, 4) : userInfo.nickname} 一起分享丹寨`
var canvas = document.getElementById("canvasEle");
var ctx = canvas.getContext("2d");
//var clientWidth = this.getWindowInfo().width;  //获取屏幕宽度用于canvas宽度自适应移动端屏幕
var dpr = 1//this.getWindowInfo().dpr;
ctx.globalCompositeOperation = "source-atop";//** 坑锯齿感觉没什么用不知道是不是用错地方了 **
canvas.width = dpr * 652;  //由于手机屏幕时retina屏，都会多倍渲染，用dpr来动态设置画布宽高，避免图片模糊
canvas.height = dpr * 1066;//去掉微信头部的状态栏应该是603 没搞懂603还是不能让图片满屏直接多加到了609
let share_image = await createImgByAsync('https://wanda-static.bdideal.com/danzhai-holiday-test/danzhai-content-15993814862705.png');
ctx.drawImage(share_image, 0, 0, canvas.width, canvas.height);
//userInfo.qrcode = 'https://qingclouds-server.oss-cn-shanghai.aliyuncs.com/da43bbbbc9dd8c82/59a3da8c0f33cd98.png'//替换下
let qr_image = await createImgByAsync(userInfo.qrcode);
// console.log(qr_image)
ctx.drawImage(qr_image, dpr * 45, dpr * 923, dpr * 110, dpr * 110);
let head_image = await createImgByAsync(userInfo.head);
// console.log(head_image)
ctx.drawImage(head_image, dpr * 395, dpr * 980, dpr * 55, dpr * 55);
canvasTextAutoLine(shareName, ctx, dpr * 170, dpr * 465, dpr * 1005, 32, 24, dpr)
canvasTextAutoLine(currentInfo.content, ctx, dpr * 410, dpr * 45, dpr * 220, 45, 30, dpr, true)
var largeShareName = `${userInfo.nickname}的`
canvasTextAutoLine(largeShareName, ctx, canvas.width, dpr * 40, dpr * 84, 52, 52, dpr, true)
var largeShareName2 = `2020幸运打卡地：丹寨`
canvasTextAutoLine(largeShareName2, ctx, canvas.width, dpr * 40, dpr * 147, 52, 52, dpr, true)
return canvas.toDataURL("image/png");
},
async refreshShareText() {
var randStr = this.contentList[parseInt(Math.random()*this.contentList.length)].content
// console.log(randStr)
this.navs[this.activeIdx].content = randStr
this.shareDesc = randStr
// this.posterUrl = await this.createdPoster()
// this.posterUrl = currentInfo.poster
// this.showPoster = true
},
async bindShareEvent() {
// this.posterUrl = await this.createdPoster()
// this.posterUrl = currentInfo.poster
this.showPoster = true
},
setActive(idx,initJsSdk=true){
this.activeIdx = Number(idx)
// this.shareDesc = this.navs[this.activeIdx].content
this.refreshShareText();
if(initJsSdk)this.shareToFirends()
},
async _init_func() {
var category_id = getQueryByString(location.href, 'id')
// this.navs = await $get('/content/list?category_id='+category_id).then(res=>res.data).catch(err=>{throw err})
this.navs = [
{
title: '两天一晚',
icon:'https://wzw2020.oss-cn-beijing.aliyuncs.com/icon/route.png',icona:'https://wzw2020.oss-cn-beijing.aliyuncs.com/icon/route-a.png',
share_image:'https://wanda-static.bdideal.com/danzhai-holiday-test/danzhai-content-15993815184676.png',
small_image: 'https://wzw2020.oss-cn-beijing.aliyuncs.com/%E7%BB%84%2033.png',
bg_image: 'https://wzw2020.oss-cn-beijing.aliyuncs.com/bg.png',
image: 'https://wzw2020.oss-cn-beijing.aliyuncs.com/%E5%9C%86%E8%A7%92%E7%9F%A9%E5%BD%A2%201.png'
},
{
title: '三天两晚',
icon:'https://wzw2020.oss-cn-beijing.aliyuncs.com/icon/route.png',icona:'https://wzw2020.oss-cn-beijing.aliyuncs.com/icon/route-a.png',
share_image:'https://wanda-static.bdideal.com/danzhai-holiday-test/danzhai-content-15993815184676.png',
small_image: 'https://wzw2020.oss-cn-beijing.aliyuncs.com/%E7%BB%84%2034.png',
bg_image: 'https://wzw2020.oss-cn-beijing.aliyuncs.com/bg.png',
image: 'https://wzw2020.oss-cn-beijing.aliyuncs.com/%E5%9C%86%E8%A7%92%E7%9F%A9%E5%BD%A2%201.png'
},
{
title: '四天三晚',
icon:'https://wzw2020.oss-cn-beijing.aliyuncs.com/icon/route.png',icona:'https://wzw2020.oss-cn-beijing.aliyuncs.com/icon/route-a.png',
share_image:'https://wanda-static.bdideal.com/danzhai-holiday-test/danzhai-content-15993815184676.png',
small_image: 'https://wzw2020.oss-cn-beijing.aliyuncs.com/%E7%BB%84%20342.png',
bg_image: 'https://wzw2020.oss-cn-beijing.aliyuncs.com/bg.png',
image: 'https://wzw2020.oss-cn-beijing.aliyuncs.com/%E5%9C%86%E8%A7%92%E7%9F%A9%E5%BD%A2%201.png'
}
]
// console.log(this.navs)
this.contentList = await $get('/travel/desc').then(res => res.data).catch(err => {
throw err
})
this.refreshShareText()
// var idx = getQueryByString(location.href,'idx')
// if(!isNaN(idx) && idx>=0){
// this.setActive(idx)
// }
var userInfo = await getUserInfo();
// console.log(userInfo);
this.$set(this,'userInfo',userInfo)
var largeShareName = `${userInfo.nickname}的`
var largeShareName2 = `2020幸运打卡地：丹寨`
this.shareTitle = largeShareName+largeShareName2
this.setActive(0,false)
await WX_JSSDK_INIT(this).then(wxEnv=>{
// console.log(wxEnv)
this.shareToFirends()
this.shareToFirends()
}).catch(err=>{
// console.log(err)
})
this.loadReady = true
}
},
created() {
this._init_func()
}
})
</script>
</body>
</html>
route1.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"/>
<script src="./libs/jweixin-1.6.0.js"></script>
<script src="./libs/rem.js"></script>
<script src="./libs/vue/vue.js"></script>
<script src="./libs/axios.min.js"></script>
<script src="./libs/hammer.js"></script>
<script src="https://lib.baomitu.com/lodash.js/4.17.19/lodash.min.js"></script>
<style>
html,body{
background:#000;
}
#canvasEle {
position: fixed;
left: 200%;
width: 652px;
height: 1066px;
z-index: -3;
}
@font-face {
font-family: myFont;
src: url('./font/ltzk.ttf');
}
* {
margin: 0;
padding: 0;
border: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.page-wrap {
position: fixed;
width: 100%;
height: 100%;
/*background-image: url("./images/show/fupin.png");*/
background-size: cover;
background-repeat: no-repeat;
background-position: bottom center;
/ / padding-bottom: 1.14 rem;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.nav-list {
margin-top: 0.35rem;
width: 100%;
white-space: nowrap;
height: 1.85rem;
overflow-y: hidden;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
}
.nav-list::-webkit-scrollbar {
display: none;
}
.nav-item {
display: inline-block;
width: 1.14rem;
height: 1.85rem;
margin-left: 0.42rem;
border-radius: 0.1rem;
overflow: hidden;
}
.nav-item:last-child {
margin-right: 0.42rem;
}
.nav-item.active {
background: rgba(23, 40, 63, 0.3);
}
.nav-item__iconbox {
margin: 0.07rem auto auto;
width: 1rem;
height: 1rem;
position: relative;
}
.nav-item__icon {
position: absolute;
left: 50%;
top: 50%;
vertical-align: top;
transform: translate(-50%, -50%);
width: 0.95rem;
height: 0.95rem;
overflow: hidden;
}
.nav-item__mtitle {
margin-top: 0.1rem;
text-align: center;
font-size: 0.26rem;
line-height: 0.28rem;
height: 0.56rem;
color: #fff;
width: 1.14rem;
display: block;
white-space: normal;
}
.mtitle {
font-family: myFont;
margin-top: 0.57rem;
color: #fff;
font-size: 0.72rem;
text-align: center;
position: relative;
}
.mtitle__icon {
position: absolute;
right: 0.43rem;
top: 50%;
transform: translateY(-50%);
width: 0.6rem;
height: 0.6rem;
}
.thumb {
padding: 0.45rem 0 0.54rem;
text-align: center;
}
.thumb__img {
width: 6.7rem;
vertical-align: top;
}
.content {
width: 6.7rem;
margin: 0 auto;
flex: 1;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
.content::-webkit-scrollbar {
display: none;
}
.content__text {
font-size: 0.3rem;
color: #fff;
line-height: 0.55rem;
}
.bottom {
height: 1.14rem;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background: none;
z-index: 999;
/*background-image: url("./images/show/fupin.png");*/
/*background-size: cover;*/
/*background-repeat: no-repeat;*/
/*background-position: bottom center;*/
}
.bottom__icon {
width: 0.55rem;
height: 0.84rem;
position: absolute;
right: 0.41rem;
bottom:0.51rem;
filter:drop-shadow(0 0 15px rgba(0,0,0,0.8));
}
.modal-wrap {
background: rgba(0, 0, 0, .7);
position: fixed;
z-index: 3;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.modal-container {
position: relative;
transform: scale(0.9);
}
.poster {
width: 6.51rem;
height: 10.65rem;
position: relative;
margin: 0rem auto 0.25rem;
}
.poster-img {
width: 100%;
height: 100%;
}
.change-poster-btn {
position: absolute;
right: 0.32rem;
top: 0.3rem;
width: 2.08rem;
height: 0.67rem;
background: #FFFFFF;
font-size: 0.3rem;
font-weight: 400;
color: #343434;;
line-height: 0.66rem;
border-radius: 0.33rem;
text-align: center;
z-index: 9;
}
.poster-action-box {
width: 6.51rem;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
.poster-action-btn {
height: 0.66rem;
padding: 0 0.33rem;
background: rgba(255,255,255,.8);
font-size: 0.3rem;
font-weight: 400;
color: #333333;
line-height: 0.66rem;
border-radius: 0.33rem;
text-align: center;
}
.poster-content{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 3;
}
.poster-content__title{
margin-top: 1.14rem;
margin-left: 0.43rem;
font-size: 0.53rem;
font-weight: bold;
color: #FFFFFF;
line-height: 0.8rem;
text-shadow: 0 0 0.1rem rgba(0,0,0,1);
}
.poster-content__content{
width: 4.12rem;
margin-top: 0.35rem;
margin-left: 0.43rem;
font-size: 0.3rem;
font-weight: bold;
color: #FFFFFF;
line-height: 0.36rem;
text-shadow: 0 0 0.1rem rgba(0,0,0,1);
}
.poster-content__qrcode{
width: 1.07rem;
height: 1.07rem;
position: absolute;
left: 0.44rem;
bottom: 0.36rem;
}
.poster-content__userinfo{
position: absolute;
right: 0.47rem;
bottom: 0.32rem;
display: flex;
align-items: center;
}
.poster-content__userinfo .headimg{
width: 0.54rem;
height: 0.54rem;
background: #FFFFFF;
border-radius: 50%;
}
.poster-content__userinfo .tip{
font-size: 0.24rem;
font-weight: bold;
color: #FFFFFF;
line-height: 0.29rem;
margin-left: 0.11rem;
}
.content__text {
color: #fff;
font-size: 0.29rem;
}
.channel-title {
text-align: center;
font-family: myFont;
background: #72C1F2;
width: 6.69rem;
font-size: 0.4rem;
}
.channel-text {
font-size: 0.29rem;
font-weight: 300;
color: #FEFEFE;
line-height: 0.48rem;
padding: 0.15rem 0.15rem 0.3rem;
border-left: 1px solid rgba(255, 255, 255, .35);
border-right: 1px solid rgba(255, 255, 255, .35);
box-sizing: border-box;
width: 6.69rem;
}
.channel-text:last-child {
border-bottom: 1px solid rgba(255, 255, 255, .35);
margin-bottom: 0.48rem;
}
.route-title {
margin-top: 0.5rem;
width: 6.69rem;
height: 0.8rem;
background: #38AAF0;
border-radius: 1rem 1rem 0rem 0rem;
font-family: myFont;
text-align: center;
line-height: 0.8rem;
font-size: 0.5rem;
}
.route-play-tag {
width: 0.24rem;
height: 0.24rem;
background: #FFFFFF;
}
.route-play-title {
margin-left: 0.3rem;
}
.channel-detail-title {
display: flex;
align-items: center;
}
.channel-detail-text {
color: #FFFFFF;
line-height: 0.6rem;
opacity: 0.78;
padding-left: 0.52rem;
}
.pic-modal-wrap{
background: #000000;
position: fixed;
z-index: 1004;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
user-select:none;
}
.pic-modal-wrap .txt{
font-size: 12px;
color: #fff;
opacity: 0.5;
margin-bottom: 10px;
}
.pic-modal-wrap .pic{
user-select:none;
width: 80%;
}
</style>
</head>
<body>
<!--:style="{backgroundImage:'url('+navs[activeIdx].bg_image+')'}"-->
<div id="app1">
<div id="app" class="page-wrap" v-if="loadReady" :class="{fixed:showPoster}"
:style="{backgroundImage:'url('+navs[activeIdx].bg_image+')'}">
<div class="nav-list">
<div class="nav-item" v-for="(item,idx) in navs" :key="idx" :class="{active:idx===activeIdx}"
@click="setActive(idx,item)">
<div class="nav-item__iconbox">
<img v-if="idx===activeIdx" :src="item.icona" class="nav-item__icon" />
<img v-else :src="item.icon" class="nav-item__icon" />
<!-- <img :src="item.small_image" class="nav-item__icon"/>-->
</div>
<div class="nav-item__mtitle">{{item.title}}</div>
</div>
</div>
<div v-if="activeIdx===0" class="content">
<div class="content__text">
<div class="route-title">{{navs[activeIdx].title}}</div>
<div class="channel-title">
<span>第一天</span>
</div>
<div class="channel-text">
<div class="channel-detail-title">
<div class="route-play-tag"></div>
<div class="route-play-title">白天</div>
</div>
<div class="channel-detail-text">
扶贫茶园茶旅体验：采茶、炒茶、品茶<br/>
小镇打卡：东湖大水车、丹调图书馆、轮值镇长展示中心<br/>
小镇体验：蜡染体验、玻璃栈道、悬崖秋千、水上游船等<br/>
锦华酒店温泉体验<br/>
</div>
<div class="channel-detail-title">
<div class="route-play-tag"></div>
<div class="route-play-title">晚上</div>
</div>
<div class="channel-detail-text">
特色酸汤鱼 - 观看《锦秀丹寨》- 篝火晚会
</div>
</div>
<div class="channel-title">
<span>第二天</span>
</div>
<div class="channel-text">
环湖步道晨跑 - 高要梯田观景台 - 探访金汞矿
</div>
</div>
</div>
<div v-if="activeIdx===1" class="content">
<div class="content__text">
<div class="route-title">{{navs[activeIdx].title}}</div>
<div class="channel-title">
<span>第一天</span>
</div>
<div class="channel-text">
<div class="channel-detail-title">
<div class="route-play-tag"></div>
<div class="route-play-title">白天</div>
</div>
<div class="channel-detail-text">
扶贫茶园茶旅体验：采茶、炒茶、品茶<br/>
小镇打卡：东湖大水车、丹调图书馆、轮值镇长展示中心<br/>
小镇体验：蜡染体验、玻璃栈道、悬崖秋千、水上游船等<br/>
锦华酒店温泉体验<br/>
</div>
<div class="channel-detail-title">
<div class="route-play-tag"></div>
<div class="route-play-title">晚上</div>
</div>
<div class="channel-detail-text">
特色酸汤鱼 - 观看《锦秀丹寨》- 篝火晚会
</div>
</div>
<div class="channel-title">
<span>第二天</span>
</div>
<div class="channel-text">
<div class="channel-detail-title">
<div class="route-play-tag"></div>
<div class="route-play-title">白天</div>
</div>
<div class="channel-detail-text">
环湖步道晨跑 - 高要梯田观景台 - 探访金汞矿
</div>
<div class="channel-detail-title">
<div class="route-play-tag"></div>
<div class="route-play-title">晚上</div>
</div>
<div class="channel-detail-text">
特色斗鸡肉 - 小镇酒吧一条街
</div>
</div>
<div class="channel-title">
<span>第三天</span>
</div>
<div class="channel-text">
探访石桥古法造纸 - 参观大簸箕苗寨
</div>
</div>
</div>
<div v-if="activeIdx===2" class="content">
<div class="content__text">
<div class="route-title">{{navs[activeIdx].title}}</div>
<div class="channel-title">
<span>第一天</span>
</div>
<div class="channel-text">
<div class="channel-detail-title">
<div class="route-play-tag"></div>
<div class="route-play-title">白天</div>
</div>
<div class="channel-detail-text">
扶贫茶园茶旅体验：采茶、炒茶、品茶<br/>
小镇打卡：东湖大水车、丹调图书馆、轮值镇长展示中心<br/>
小镇体验：蜡染体验、玻璃栈道、悬崖秋千、水上游船等<br/>
锦华酒店温泉体验<br/>
</div>
<div class="channel-detail-title">
<div class="route-play-tag"></div>
<div class="route-play-title">晚上</div>
</div>
<div class="channel-detail-text">
特色酸汤鱼 - 观看《锦秀丹寨》- 篝火晚会
</div>
</div>
<div class="channel-title">
<span>第二天</span>
</div>
<div class="channel-text">
<div class="channel-detail-title">
<div class="route-play-tag"></div>
<div class="route-play-title">白天</div>
</div>
<div class="channel-detail-text">
环湖步道晨跑 - 探访金汞矿 - 排廷瀑布 - 高要梯田观景台 - 探访卡拉村鸟笼
</div>
<div class="channel-detail-title">
<div class="route-play-tag"></div>
<div class="route-play-title">晚上</div>
</div>
<div class="channel-detail-text">
特色斗鸡肉 - 小镇酒吧一条街
</div>
</div>
<div class="channel-title">
<span>第三天</span>
</div>
<div class="channel-text">
<div class="channel-detail-title">
<div class="route-play-tag"></div>
<div class="route-play-title">白天</div>
</div>
<div class="channel-detail-text">
探访石桥古法造纸 - 大簸箕苗寨 - 周边村寨捉稻田鱼
</div>
<div class="channel-detail-title">
<div class="route-play-tag"></div>
<div class="route-play-title">晚上</div>
</div>
<div class="channel-detail-text">
特色稻田鱼 - 苗药足浴 SPA 体验
</div>
</div>
<div class="channel-title">
<span>第四天</span>
</div>
<div class="channel-text">
登龙泉山(尤公山)- 喝排佐鸡汤 - 游锦绣谷（韭菜沟森林公园）
</div>
</div>
</div>
<!--:style="{backgroundImage:'url('+navs[activeIdx].bg_image+')'}"-->
<div class="bottom" v-if="!showPoster">
<img @click="bindShareEvent" class="bottom__icon" src="./images/show/share.png"/>
</div>
<div class="modal-wrap" v-if="showPoster" @click="closeModal">
<div class="modal-container">
<div class="poster">
<img :src="navs[activeIdx].share_image" class="poster-img" />
<div @click.stop="refreshShareText" class="change-poster-btn">换一换</div>
<div class="poster-content">
<div class="poster-content__title">{{userInfo.nickname}}的<br/>2020幸运打卡地：丹寨</div>
<div class="poster-content__content">{{shareDesc}}</div>
<img class="poster-content__qrcode" :src="userInfo.qrcode"></img>
<div class="poster-content__userinfo">
<img class="headimg" :src="userInfo.head" />
<div class="tip">快跟着{{userInfo.nickname}}<br/>一起分享丹寨</div>
</div>
</div>
</div>
<div class="poster-action-box">
<div @click.stop="previewImg" class="poster-action-btn">保存图片并发送给好友</div>
<!-- <div @click.stop="shareToFirends" class="poster-action-btn">分享好友</div>-->
</div>
</div>
</div>
<div class="pic-modal-wrap" v-if="showPic" @click="showPic=false">
<div class="txt">长按图片分享给朋友</div><img class="pic" :src="posterUrl" />
</div>
</div>
</div>
<canvas id="canvasEle"></canvas>
<script src="./libs/helper.js"></script>
<script>
function createImgByAsync(url) {
return new Promise((resolve, reject) => {
let img = new Image();
img.setAttribute("crossOrigin", 'Anonymous');
img.src = url + '?time=' + new Date().valueOf();
img.onload = function () {
resolve(img)
}
img.onerror = function (err) {
reject(err)
}
})
}
function convertCanvasToImage(canvas) {
let image = new Image();
image.src = canvas.toDataURL("image/png");
return image;
}
function cutstrFun(str, len) {
// console.log(str.length)
var temp = str
if (str.length > len) {
temp = str.substr(0, len) + '..'
}
// console.log(temp)
return temp
}
/**
*
* @param str
* @param ctx
* @param canvasWidth
* @param initX
* @param initY
* @param lineHeight
* @param fontSize
* @param dpr
* @returns {number}
*/
function canvasTextAutoLine(str, ctx, canvasWidth, initX, initY, lineHeight, fontSize, dpr, bold = false) {
if(!str)return;
var lineWidth = 0
var lastSubStrIndex = 0,
totalLineHeight = 0
var fz = fontSize * dpr
ctx.font = (bold ? 'bold ' : '') + `${fz}px "微软雅黑"`;
ctx.fillStyle = "#fff";
ctx.shadowColor = "rgba(0,0,0,0.8)";
ctx.shadowBlur = 8;
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 {
showPic:false,
contentList: [],
loadReady: false,
showPoster: false,
shareTitle:'',
shareDesc:'',
activeIdx: 0,
posterUrl: '',
navs: [],
userInfo:{}
}
},
methods: {
async previewImg(){
this.posterUrl = await this.createdPoster()
this.showPic = true
// wx.previewImage({
// urls: [this.posterUrl] // 需要预览的图片http链接列表
// });
},
shareToFirends(){
const currentInfo = this.navs[this.activeIdx]
var shareDesc = this.navs[this.activeIdx].content
var largeShareName = `${this.userInfo.nickname}的`
var largeShareName2 = `2020幸运打卡地：丹寨`
var shareTitle = largeShareName+largeShareName2
if(wx){
wx.updateAppMessageShareData({
title: FRONT_TITLE, // 分享标题
desc: FRONT_DESC, // 分享描述
link: FRONT_URL+'?'+new Date().getTime(), // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: shareImg(), // 分享图标
success: function () {
// 设置成功
}
})
wx.updateTimelineShareData({
title: shareTitle, // 分享标题
link: FRONT_URL+'?'+new Date().getTime(), // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: shareImg(), // 分享图标
success: function () {
// 设置成功
}
})
}
},
closeModal() {
this.showPoster = false
this.posterUrl = ''
},
bindSave() {
// wx.previewImage({
// urls: [this.posterUrl] // 需要预览的图片http链接列表
// });
},
// 获取页面dpr和宽度
getWindowInfo() {
var windowInfo = {};
windowInfo.dpr = window.devicePixelRatio;
if (window.innerWidth) {
windowInfo.width = window.innerWidth;
} else {
windowInfo.width = document.body.clientWidth;
}
return windowInfo;
},
async createdPoster() {
const currentInfo = this.navs[this.activeIdx]
// console.log(currentInfo)
var userInfo = await getUserInfo();
// console.log(userInfo);
var shareName = `快跟着${userInfo.nickname.length > 4 ? userInfo.nickname.substr(0, 4) : userInfo.nickname} 一起分享丹寨`
var canvas = document.getElementById("canvasEle");
var ctx = canvas.getContext("2d");
//var clientWidth = this.getWindowInfo().width;  //获取屏幕宽度用于canvas宽度自适应移动端屏幕
var dpr = 1//this.getWindowInfo().dpr;
ctx.globalCompositeOperation = "source-atop";//** 坑锯齿感觉没什么用不知道是不是用错地方了 **
canvas.width = dpr * 652;  //由于手机屏幕时retina屏，都会多倍渲染，用dpr来动态设置画布宽高，避免图片模糊
canvas.height = dpr * 1066;//去掉微信头部的状态栏应该是603 没搞懂603还是不能让图片满屏直接多加到了609
let share_image = await createImgByAsync('https://wanda-static.bdideal.com/danzhai-holiday-test/danzhai-content-15993814862705.png');
ctx.drawImage(share_image, 0, 0, canvas.width, canvas.height);
//userInfo.qrcode = 'https://qingclouds-server.oss-cn-shanghai.aliyuncs.com/da43bbbbc9dd8c82/59a3da8c0f33cd98.png'//替换下
let qr_image = await createImgByAsync(userInfo.qrcode);
// console.log(qr_image)
ctx.drawImage(qr_image, dpr * 45, dpr * 923, dpr * 110, dpr * 110);
let head_image = await createImgByAsync(userInfo.head);
// console.log(head_image)
ctx.drawImage(head_image, dpr * 395, dpr * 980, dpr * 55, dpr * 55);
canvasTextAutoLine(shareName, ctx, dpr * 170, dpr * 465, dpr * 1005, 32, 24, dpr)
canvasTextAutoLine(currentInfo.content, ctx, dpr * 410, dpr * 45, dpr * 220, 45, 30, dpr, true)
var largeShareName = `${userInfo.nickname}的`
canvasTextAutoLine(largeShareName, ctx, canvas.width, dpr * 40, dpr * 84, 52, 52, dpr, true)
var largeShareName2 = `2020幸运打卡地：丹寨`
canvasTextAutoLine(largeShareName2, ctx, canvas.width, dpr * 40, dpr * 147, 52, 52, dpr, true)
return canvas.toDataURL("image/png");
},
async refreshShareText() {
var randStr = this.contentList[parseInt(Math.random()*this.contentList.length)].content
// console.log(randStr)
this.navs[this.activeIdx].content = randStr
this.shareDesc = randStr
// this.posterUrl = await this.createdPoster()
// this.posterUrl = currentInfo.poster
// this.showPoster = true
},
async bindShareEvent() {
// this.posterUrl = await this.createdPoster()
// this.posterUrl = currentInfo.poster
this.showPoster = true
},
setActive(idx,initJsSdk=true){
this.activeIdx = Number(idx)
// this.shareDesc = this.navs[this.activeIdx].content
this.refreshShareText();
if(initJsSdk)this.shareToFirends()
},
async _init_func() {
var category_id = getQueryByString(location.href, 'id')
// this.navs = await $get('/content/list?category_id='+category_id).then(res=>res.data).catch(err=>{throw err})
this.navs = [
{
title: '两天一晚',
icon:'https://wzw2020.oss-cn-beijing.aliyuncs.com/icon/route.png',icona:'https://wzw2020.oss-cn-beijing.aliyuncs.com/icon/route-a.png',
share_image:'https://wanda-static.bdideal.com/danzhai-holiday-test/danzhai-content-15993815184676.png',
small_image: 'https://wzw2020.oss-cn-beijing.aliyuncs.com/%E7%BB%84%2033.png',
bg_image: 'https://wzw2020.oss-cn-beijing.aliyuncs.com/bg.png',
image: 'https://wzw2020.oss-cn-beijing.aliyuncs.com/%E5%9C%86%E8%A7%92%E7%9F%A9%E5%BD%A2%201.png'
},
{
title: '三天两晚',
icon:'https://wzw2020.oss-cn-beijing.aliyuncs.com/icon/route.png',icona:'https://wzw2020.oss-cn-beijing.aliyuncs.com/icon/route-a.png',
share_image:'https://wanda-static.bdideal.com/danzhai-holiday-test/danzhai-content-15993815184676.png',
small_image: 'https://wzw2020.oss-cn-beijing.aliyuncs.com/%E7%BB%84%2034.png',
bg_image: 'https://wzw2020.oss-cn-beijing.aliyuncs.com/bg.png',
image: 'https://wzw2020.oss-cn-beijing.aliyuncs.com/%E5%9C%86%E8%A7%92%E7%9F%A9%E5%BD%A2%201.png'
},
{
title: '四天三晚',
icon:'https://wzw2020.oss-cn-beijing.aliyuncs.com/icon/route.png',icona:'https://wzw2020.oss-cn-beijing.aliyuncs.com/icon/route-a.png',
share_image:'https://wanda-static.bdideal.com/danzhai-holiday-test/danzhai-content-15993815184676.png',
small_image: 'https://wzw2020.oss-cn-beijing.aliyuncs.com/%E7%BB%84%20342.png',
bg_image: 'https://wzw2020.oss-cn-beijing.aliyuncs.com/bg.png',
image: 'https://wzw2020.oss-cn-beijing.aliyuncs.com/%E5%9C%86%E8%A7%92%E7%9F%A9%E5%BD%A2%201.png'
}
]
// console.log(this.navs)
this.contentList = await $get('/travel/desc').then(res => res.data).catch(err => {
throw err
})
this.refreshShareText()
// var idx = getQueryByString(location.href,'idx')
// if(!isNaN(idx) && idx>=0){
// this.setActive(idx)
// }
var userInfo = await getUserInfo();
// console.log(userInfo);
this.$set(this,'userInfo',userInfo)
var largeShareName = `${userInfo.nickname}的`
var largeShareName2 = `2020幸运打卡地：丹寨`
this.shareTitle = largeShareName+largeShareName2
this.setActive(0,false)
await WX_JSSDK_INIT(this).then(wxEnv=>{
// console.log(wxEnv)
this.shareToFirends()
this.shareToFirends()
}).catch(err=>{
// console.log(err)
})
this.loadReady = true
}
},
created() {
this._init_func()
},
mounted(){
var that = this
var panleft = _.debounce(function(){
that.activeIdx ++
that.refreshShareText();
}, 300)
var panright = _.debounce(function(){
that.activeIdx = that.activeIdx - 1
that.refreshShareText();
}, 300)
var dom = document.querySelector('#app1')
var hammerTest = new Hammer(dom);
hammerTest.on('pan', function(ev) {
if (ev.additionalEvent == 'panright') {
if(that.activeIdx != 2){
panleft()
}
}
if (ev.additionalEvent == 'panleft') {
if(that.activeIdx != 0){
panright()
}
}
})
}
})
</script>
</body>
</html>
travel copy.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" />
<script src="./libs/helper.js"></script>
<script src="./libs/vue/vue.js"></script>
<script src="./libs/axios.min.js"></script>
<style>
html,body{
background:#000;
}
#canvasEle{
position: fixed;
left: 200%;
width: 652px;
height: 1066px;
z-index: -3;
}
@font-face {
font-family: myFont;
src: url('./font/ltzk.ttf');
}
*{
margin: 0;
padding: 0;
border:none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.page-wrap{
position: fixed;
width: 100%;
height: 100%;
/*background-image: url("/images/show/fupin.png");*/
background-size: cover;
background-repeat: no-repeat;
background-position: bottom center;
/*padding-bottom: 1.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;
height: 0.56rem;
color: #fff;
width: 1.14rem;
display: block;
white-space: normal;
}
.mtitle{
font-family: myFont;
margin-top: 0.57rem;
color: #fff;
font-size: 0.72rem;
text-align: center;
position: relative;
}
.mtitle__icon{
position: absolute;
right: 0.43rem;
top: 50%;
transform: translateY(-50%);
width: 0.6rem;
height: 0.6rem;
}
.thumb{
padding: 0.45rem 0 0.54rem;
text-align: center;
}
.thumb__img{
width: 6.7rem;
vertical-align: top;
}
.content{
width: 6.7rem;
margin: 0 auto;
flex:1;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
.content::-webkit-scrollbar{
display: none;
}
.content__text{
font-size: 0.3rem;
color: #fff;
line-height: 0.55rem;
text-align: justify;
}
.bottom{
height: 1.14rem;
position: fixed;
left: 0;
bottom:0;
width: 100%;
background: none;
z-index: 999;
/*background-image: url("/images/show/fupin.png");*/
/*background-size: cover;*/
/*background-repeat: no-repeat;*/
/*background-position: bottom center;*/
}
.bottom__icon{
width: 0.55rem;
height: 0.84rem;
position: absolute;
right: 0.41rem;
bottom:0.51rem;
filter:drop-shadow(0 0 15px rgba(0,0,0,0.8));
}
.modal-wrap {
background: rgba(0, 0, 0, .7);
position: fixed;
z-index: 3;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.modal-container {
position: relative;
transform: scale(0.9);
}
.poster {
width: 6.51rem;
height: 10.65rem;
position: relative;
margin: 0rem auto 0.25rem;
}
.poster-img{
width: 100%;
height: 100%;
}
.change-poster-btn{
position: absolute;
right: 0.32rem;
top: 0.3rem;
width: 2.08rem;
height: 0.67rem;
background: #FFFFFF;
font-size: 0.3rem;
font-weight: 400;
color: #343434;;
line-height: 0.66rem;
border-radius: 0.33rem;
text-align: center;
z-index: 9;
}
.poster-action-box{
width: 6.51rem;
margin: 0 auto;
display: flex;
justify-content:center;
align-items: center;
}
.poster-action-btn{
height: 0.66rem;
padding: 0 0.33rem;
background: rgba(255,255,255,.8);
font-size: 0.3rem;
font-weight: 400;
color: #333333;
line-height: 0.66rem;
border-radius: 0.33rem;
text-align: center;
}
/*.poster-action-btn:last-child{*/
/* margin-left: 1.17rem;*/
/*}*/
.poster-content{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 3;
}
.poster-content__title{
margin-top: 1.14rem;
margin-left: 0.43rem;
font-size: 0.53rem;
font-weight: bold;
color: #FFFFFF;
line-height: 0.8rem;
text-shadow: 0 0 0.1rem rgba(0,0,0,1);
}
.poster-content__content{
width: 4.12rem;
margin-top: 0.35rem;
margin-left: 0.43rem;
font-size: 0.3rem;
font-weight: bold;
color: #FFFFFF;
line-height: 0.36rem;
text-shadow: 0 0 0.1rem rgba(0,0,0,1);
}
.poster-content__qrcode{
width: 1.07rem;
height: 1.07rem;
position: absolute;
left: 0.44rem;
bottom: 0.36rem;
}
.poster-content__userinfo{
position: absolute;
right: 0.47rem;
bottom: 0.32rem;
display: flex;
align-items: center;
}
.poster-content__userinfo .headimg{
width: 0.54rem;
height: 0.54rem;
background: #FFFFFF;
border-radius: 50%;
}
.poster-content__userinfo .tip{
font-size: 0.24rem;
font-weight: bold;
color: #FFFFFF;
line-height: 0.29rem;
margin-left: 0.11rem;
}
.content__text{
color: #fff;
font-size: 0.29rem;
text-align: justify;
}
.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;
}
.pic-modal-wrap{
background: #000000;
position: fixed;
z-index: 1004;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
user-select:none;
}
.pic-modal-wrap .txt{
font-size: 12px;
color: #fff;
opacity: 0.5;
margin-bottom: 10px;
}
.pic-modal-wrap .pic{
user-select:none;
width: 80%;
}
</style>
</head>
<body>
<!--:style="{backgroundImage:'url('+navs[activeIdx].bg_image+')'}"-->
<div id="app" class="page-wrap" v-if="loadReady" :class="{fixed:showPoster}" :style="{backgroundImage:'url(./images/show/fupin.png)'}">
<div class="nav-list">
<div class="nav-item" v-for="(item,idx) in navs" :key="idx" :class="{active:idx===activeIdx}" @click="setActive(idx,item)">
<div class="nav-item__iconbox">
<img v-if="idx===activeIdx" :src="item.icona" class="nav-item__icon" />
<img v-else :src="item.icon" class="nav-item__icon" />
</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" v-if="activeIdx===0">
<div class="channel-title" >
<img src="https://wzw2020.oss-cn-beijing.aliyuncs.com/keche-2%20%E6%8B%B7%E8%B4%9D.png" />
<span>客车</span>
</div>
<div class="channel-text" >
贵阳龙洞堡机场出站打车至贵阳客运东站，乘客车前往丹寨县（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-if="activeIdx===1">
<div class="channel-text" style="padding-top: 0.45rem;">
距离丹寨较近的高铁站为凯里南站、三都县站、都匀东站，从目的地乘坐高铁到达上述高铁站后，再换乘大巴车前往丹寨万达小镇，车程大约 30-40 分钟。
</div>
</div>
<div class="content__text" v-if="activeIdx===2">
<div class="channel-text" style="padding-top: 0.45rem;">
贵阳客运东站、凯里城南客运站、都匀客运站、三都普安高铁站出口都有直达丹寨的大巴车。
</div>
</div>
<div class="content__text" v-if="activeIdx===3">
<div class="channel-text" style="padding-top: 0.45rem;">
贵阳方向自驾出发：<br/>
G76 厦蓉高速 一 S62 余安高速一丹寨县；<br/>
长沙方向自驾出发：<br/>
S41 长潭西高速 一 S50 长韶娄高速 一 S55 二广高一 G60 沪昆高速一 S62 余安高速一丹寨县 ;<br/>
南宁方向自驾出发：<br/>
G75 兰海高速一 G76 厦蓉高速一 S62余安高速一丹寨县；<br/>
昆明方向自驾出发：<br/>
G65 杭瑞高速一 G60 沪昆高速一 G76 厦蓉高速一 S62 余安高速一丹寨县；<br/>
成都方向自驾出发：<br/>
G5 京昆高速一 G4215 蓉遵高速一 G56杭瑞高速一 G75 兰海高速一 G60 沪昆高速一 G76 厦蓉高速一 S62 余安高速一丹寨县 ;<br/>
重庆方向自驾出发：<br/>
G65 包茂高速 一 G75 兰海高速 一G6001 贵阳绕城高速一 G60 沪昆高速一 G76 厦蓉高速一 S62 余安高速一丹寨县。
</div>
</div>
<!-- <div class="content__text" v-html="navs[activeIdx].content"></div>-->
</div>
<!---->
<!--:style="{backgroundImage:'url('+navs[activeIdx].bg_image+')'}"-->
<div class="bottom" v-if="!showPoster">
<img @click="bindShareEvent" class="bottom__icon" src="./images/show/share.png" />
</div>
<div class="modal-wrap" v-if="showPoster" @click="closeModal">
<div class="modal-container">
<div class="poster">
<img :src="navs[activeIdx].share_image" class="poster-img" />
<div @click.stop="refreshShareText" class="change-poster-btn">换一换</div>
<div class="poster-content">
<div class="poster-content__title">{{userInfo.nickname}}的<br/>2020幸运打卡地：丹寨</div>
<div class="poster-content__content">{{shareDesc}}</div>
<img class="poster-content__qrcode" :src="userInfo.qrcode"></img>
<div class="poster-content__userinfo">
<img class="headimg" :src="userInfo.head" />
<div class="tip">快跟着{{userInfo.nickname}}<br/>一起分享丹寨</div>
</div>
</div>
</div>
<div class="poster-action-box">
<div @click.stop="previewImg" class="poster-action-btn">保存图片并发送给好友</div>
<!-- <div @click.stop="shareToFirends" class="poster-action-btn">分享好友</div>-->
</div>
</div>
</div>
<div class="pic-modal-wrap" v-if="showPic" @click="showPic=false">
<div class="txt">长按图片分享给朋友</div><img class="pic" :src="posterUrl" />
</div>
</div>
<canvas id="canvasEle"></canvas>
<script>
function createImgByAsync(url) {
return new Promise((resolve, reject) => {
let img = new Image();
img.setAttribute("crossOrigin", 'Anonymous');
img.src = url + '?time=' + new Date().valueOf();
img.onload = function () {
resolve(img)
}
img.onerror = function (err) {
reject(err)
}
})
}
function convertCanvasToImage(canvas) {
let image = new Image();
image.src = canvas.toDataURL("image/png");
return image;
}
function cutstrFun(str, len) {
// console.log(str.length)
var temp = str
if (str.length > len) {
temp = str.substr(0, len) + '..'
}
// console.log(temp)
return temp
}
function canvasTextAutoLine(str, ctx, canvasWidth, initX, initY, lineHeight,fontSize,dpr,bold=false) {
if(!str)return;
var lineWidth = 0
var lastSubStrIndex = 0,
totalLineHeight = 0
var fz = fontSize*dpr
ctx.font = (bold?'bold ':'')+`${fz}px "微软雅黑"`;
ctx.fillStyle = "#fff";
ctx.shadowColor = "rgba(0,0,0,0.8)";
ctx.shadowBlur = 8;
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 {
showPic:false,
contentList:[],
loadReady:false,
showPoster:false,
shareTitle:'',
shareDesc:'',
activeIdx:0,
posterUrl:'',
navs:[],
userInfo:{}
}
},
methods:{
async previewImg(){
this.posterUrl = await this.createdPoster()
this.showPic = true
// wx.previewImage({
// urls: [this.posterUrl] // 需要预览的图片http链接列表
// });
},
shareToFirends(){
const currentInfo = this.navs[this.activeIdx]
var shareDesc = this.navs[this.activeIdx].content
var largeShareName = `${this.userInfo.nickname}的`
var largeShareName2 = `2020幸运打卡地：丹寨`
var shareTitle = largeShareName+largeShareName2
if(wx){
wx.updateAppMessageShareData({
title: FRONT_TITLE, // 分享标题
desc: FRONT_DESC, // 分享描述
link: FRONT_URL+'?'+new Date().getTime(), // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: shareImg(), // 分享图标
success: function () {
// 设置成功
}
})
wx.updateTimelineShareData({
title: getUserInfoByLocalStorage()?`${getUserInfoByLocalStorage()}的2020幸运打卡地：丹寨`:FRONT_TITLE, // 分享标题
link: FRONT_URL+'?'+new Date().getTime(), // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: shareImg(), // 分享图标
success: function () {
// 设置成功
}
})
}
},
closeModal(){
this.showPoster = false
this.posterUrl = ''
},
bindSave(){
// wx.previewImage({
// urls: [this.posterUrl] // 需要预览的图片http链接列表
// });
},
// 获取页面dpr和宽度
getWindowInfo() {
var windowInfo = {};
windowInfo.dpr = window.devicePixelRatio;
if (window.innerWidth) {
windowInfo.width = window.innerWidth;
}
else {
windowInfo.width = document.body.clientWidth;
}
return windowInfo;
},
async createdPoster(){
const currentInfo = this.navs[this.activeIdx]
// console.log(currentInfo)
var userInfo = await getUserInfo();
// console.log(userInfo);
var shareName = `快跟着${userInfo.nickname.length > 4 ? userInfo.nickname.substr(0, 4) : userInfo.nickname} 一起分享丹寨`
var canvas = document.getElementById("canvasEle");
var ctx = canvas.getContext("2d");
//var clientWidth = this.getWindowInfo().width;  //获取屏幕宽度用于canvas宽度自适应移动端屏幕
var dpr = 1//this.getWindowInfo().dpr;
ctx.globalCompositeOperation = "source-atop";//** 坑锯齿感觉没什么用不知道是不是用错地方了 **
canvas.width = dpr * 652;  //由于手机屏幕时retina屏，都会多倍渲染，用dpr来动态设置画布宽高，避免图片模糊
canvas.height = dpr * 1066;//去掉微信头部的状态栏应该是603 没搞懂603还是不能让图片满屏直接多加到了609
let share_image = await createImgByAsync('https://wanda-static.bdideal.com/danzhai-holiday-test/danzhai-content-15993815184676.png');
ctx.drawImage(share_image, 0, 0, canvas.width, canvas.height);
//userInfo.qrcode = 'https://qingclouds-server.oss-cn-shanghai.aliyuncs.com/da43bbbbc9dd8c82/59a3da8c0f33cd98.png'//替换下
let qr_image = await createImgByAsync(userInfo.qrcode);
// console.log(qr_image)
ctx.drawImage(qr_image, dpr * 45, dpr * 923, dpr * 110, dpr * 110);
let head_image = await createImgByAsync(userInfo.head);
// console.log(head_image)
ctx.drawImage(head_image, dpr * 395, dpr * 980, dpr * 55, dpr * 55);
canvasTextAutoLine(shareName, ctx, dpr*170, dpr * 465, dpr * 1005,32,24,dpr)
canvasTextAutoLine(currentInfo.content, ctx, dpr*410, dpr * 45, dpr * 220,45,30,dpr,true)
var largeShareName = `${userInfo.nickname}的`
canvasTextAutoLine(largeShareName, ctx, canvas.width, dpr * 40, dpr * 84,52,52,dpr,true)
var largeShareName2 = `2020幸运打卡地：丹寨`
canvasTextAutoLine(largeShareName2, ctx, canvas.width, dpr * 40, dpr * 147,52,52,dpr,true)
return canvas.toDataURL("image/png");
},
async refreshShareText(){
var randStr = this.contentList[parseInt(Math.random()*this.contentList.length)].content
// console.log(randStr)
this.navs[this.activeIdx].content = randStr
this.shareDesc = randStr
// this.posterUrl = await this.createdPoster()
// // this.posterUrl = currentInfo.poster
// this.showPoster = true
},
async bindShareEvent(){
//this.posterUrl = await this.createdPoster()
// this.posterUrl = currentInfo.poster
this.showPoster = true
},
setActive(idx,initJsSdk=true){
this.activeIdx = Number(idx)
this.shareDesc = this.navs[this.activeIdx].content
this.refreshShareText();
if(initJsSdk)this.shareToFirends()
},
async _init_func(){
var category_id = getQueryByString(location.href,'id')
// this.navs = await $get('/content/list?category_id='+category_id).then(res=>res.data).catch(err=>{throw err})
this.navs = [
{title:'飞机',icon:'https://wzw2020.oss-cn-beijing.aliyuncs.com/icon/fly.png',icona:'https://wzw2020.oss-cn-beijing.aliyuncs.com/icon/fly-a.png',share_image:'https://wanda-static.bdideal.com/danzhai-holiday-test/danzhai-content-15993815184676.png',small_image:'https://wzw2020.oss-cn-beijing.aliyuncs.com/%E9%A3%9E%E6%9C%BA.png',bg_image:'https://wzw2020.oss-cn-beijing.aliyuncs.com/bg.png',image:'./images/route/map.png'},
{title:'高铁',icon:'https://wzw2020.oss-cn-beijing.aliyuncs.com/icon/tie.png',icona:'https://wzw2020.oss-cn-beijing.aliyuncs.com/icon/tie-a.png',share_image:'https://wanda-static.bdideal.com/danzhai-holiday-test/danzhai-content-15993815184676.png',small_image:'https://wzw2020.oss-cn-beijing.aliyuncs.com/%E9%AB%98%E9%93%81.png',bg_image:'https://wzw2020.oss-cn-beijing.aliyuncs.com/bg.png',image:'./images/route/map.png'},
{title:'客运',icon:'https://wzw2020.oss-cn-beijing.aliyuncs.com/icon/cart.png',icona:'https://wzw2020.oss-cn-beijing.aliyuncs.com/icon/cart-a.png',share_image:'https://wanda-static.bdideal.com/danzhai-holiday-test/danzhai-content-15993815184676.png',small_image:'https://wzw2020.oss-cn-beijing.aliyuncs.com/%E5%AE%A2%E8%BF%90.png',bg_image:'https://wzw2020.oss-cn-beijing.aliyuncs.com/bg.png',image:'./images/route/map.png'},
{title:'自驾',icon:'https://wzw2020.oss-cn-beijing.aliyuncs.com/icon/zijia.png',icona:'https://wzw2020.oss-cn-beijing.aliyuncs.com/icon/zijia-a.png',share_image:'https://wanda-static.bdideal.com/danzhai-holiday-test/danzhai-content-15993815184676.png',small_image:'https://wzw2020.oss-cn-beijing.aliyuncs.com/%E8%87%AA%E9%A9%BE.png',bg_image:'https://wzw2020.oss-cn-beijing.aliyuncs.com/bg.png',image:'./images/route/map.png'},
]
// console.log(this.navs)
this.contentList = await $get('/travel/desc').then(res=>res.data).catch(err=>{throw err})
this.refreshShareText()
// var idx = getQueryByString(location.href,'idx')
// if(!isNaN(idx) && idx>=0){
// this.setActive(idx)
// }
var userInfo = await getUserInfo();
// console.log(userInfo);
this.$set(this,'userInfo',userInfo)
var largeShareName = `${userInfo.nickname}的`
var largeShareName2 = `2020幸运打卡地：丹寨`
this.shareTitle = largeShareName+largeShareName2
this.setActive(0,false)
await WX_JSSDK_INIT(this).then(wxEnv=>{
// console.log(wxEnv)
this.shareToFirends()
}).catch(err=>{
console.log(err)
})
this.loadReady = true
}
},
created(){
this._init_func()
}
})
</script>
<script src="./libs/jweixin-1.6.0.js"></script>
<script src="./libs/rem.js"></script>
</body>
</html>
travel.html
...@@ -338,7 +338,7 @@ ...@@ -338,7 +338,7 @@
</head> </head>
<body> <body>
<!--:style="{backgroundImage:'url('+navs[activeIdx].bg_image+')'}"--> <!--:style="{backgroundImage:'url('+navs[activeIdx].bg_image+')'}"-->
<div id="app" class="page-wrap" v-if="loadReady" :class="{fixed:showPoster}" :style="{backgroundImage:'url('+navs[activeIdx].bg_image+')'}" > <div id="app" class="page-wrap" v-if="loadReady" :class="{fixed:showPoster}" :style="{backgroundImage:'url(./images/show/fupin.png)'}" >
<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)">
......
travel1.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" />
<script src="./libs/rem.js"></script>
<script src="./libs/jweixin-1.6.0.js"></script>
<script src="./libs/helper.js"></script>
<script src="./libs/vue/vue.js"></script>
<script src="./libs/axios.min.js"></script>
<script src="./libs/hammer.js"></script>
<script src="https://lib.baomitu.com/lodash.js/4.17.19/lodash.min.js"></script>
<style>
html,body{
background:#000;
}
#canvasEle{
position: fixed;
left: 200%;
width: 652px;
height: 1066px;
z-index: -3;
}
@font-face {
font-family: myFont;
src: url('./font/ltzk.ttf');
}
*{
margin: 0;
padding: 0;
border:none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.page-wrap{
position: fixed;
width: 100%;
height: 100%;
/*background-image: url("/images/show/fupin.png");*/
background-size: cover;
background-repeat: no-repeat;
background-position: bottom center;
/*padding-bottom: 1.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;
height: 0.56rem;
color: #fff;
width: 1.14rem;
display: block;
white-space: normal;
}
.mtitle{
font-family: myFont;
margin-top: 0.57rem;
color: #fff;
font-size: 0.72rem;
text-align: center;
position: relative;
}
.mtitle__icon{
position: absolute;
right: 0.43rem;
top: 50%;
transform: translateY(-50%);
width: 0.6rem;
height: 0.6rem;
}
.thumb{
padding: 0.45rem 0 0.54rem;
text-align: center;
}
.thumb__img{
width: 6.7rem;
vertical-align: top;
}
.content{
width: 6.7rem;
margin: 0 auto;
flex:1;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
.content::-webkit-scrollbar{
display: none;
}
.content__text{
font-size: 0.3rem;
color: #fff;
line-height: 0.55rem;
text-align: justify;
}
.bottom{
height: 1.14rem;
position: fixed;
left: 0;
bottom:0;
width: 100%;
background: none;
z-index: 999;
/*background-image: url("/images/show/fupin.png");*/
/*background-size: cover;*/
/*background-repeat: no-repeat;*/
/*background-position: bottom center;*/
}
.bottom__icon{
width: 0.55rem;
height: 0.84rem;
position: absolute;
right: 0.41rem;
bottom:0.51rem;
filter:drop-shadow(0 0 15px rgba(0,0,0,0.8));
}
.modal-wrap {
background: rgba(0, 0, 0, .7);
position: fixed;
z-index: 3;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.modal-container {
position: relative;
transform: scale(0.9);
}
.poster {
width: 6.51rem;
height: 10.65rem;
position: relative;
margin: 0rem auto 0.25rem;
}
.poster-img{
width: 100%;
height: 100%;
}
.change-poster-btn{
position: absolute;
right: 0.32rem;
top: 0.3rem;
width: 2.08rem;
height: 0.67rem;
background: #FFFFFF;
font-size: 0.3rem;
font-weight: 400;
color: #343434;;
line-height: 0.66rem;
border-radius: 0.33rem;
text-align: center;
z-index: 9;
}
.poster-action-box{
width: 6.51rem;
margin: 0 auto;
display: flex;
justify-content:center;
align-items: center;
}
.poster-action-btn{
height: 0.66rem;
padding: 0 0.33rem;
background: rgba(255,255,255,.8);
font-size: 0.3rem;
font-weight: 400;
color: #333333;
line-height: 0.66rem;
border-radius: 0.33rem;
text-align: center;
}
/*.poster-action-btn:last-child{*/
/* margin-left: 1.17rem;*/
/*}*/
.poster-content{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 3;
}
.poster-content__title{
margin-top: 1.14rem;
margin-left: 0.43rem;
font-size: 0.53rem;
font-weight: bold;
color: #FFFFFF;
line-height: 0.8rem;
text-shadow: 0 0 0.1rem rgba(0,0,0,1);
}
.poster-content__content{
width: 4.12rem;
margin-top: 0.35rem;
margin-left: 0.43rem;
font-size: 0.3rem;
font-weight: bold;
color: #FFFFFF;
line-height: 0.36rem;
text-shadow: 0 0 0.1rem rgba(0,0,0,1);
}
.poster-content__qrcode{
width: 1.07rem;
height: 1.07rem;
position: absolute;
left: 0.44rem;
bottom: 0.36rem;
}
.poster-content__userinfo{
position: absolute;
right: 0.47rem;
bottom: 0.32rem;
display: flex;
align-items: center;
}
.poster-content__userinfo .headimg{
width: 0.54rem;
height: 0.54rem;
background: #FFFFFF;
border-radius: 50%;
}
.poster-content__userinfo .tip{
font-size: 0.24rem;
font-weight: bold;
color: #FFFFFF;
line-height: 0.29rem;
margin-left: 0.11rem;
}
.content__text{
color: #fff;
font-size: 0.29rem;
text-align: justify;
}
.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;
}
.pic-modal-wrap{
background: #000000;
position: fixed;
z-index: 1004;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
user-select:none;
}
.pic-modal-wrap .txt{
font-size: 12px;
color: #fff;
opacity: 0.5;
margin-bottom: 10px;
}
.pic-modal-wrap .pic{
user-select:none;
width: 80%;
}
</style>
</head>
<body>
<!--:style="{backgroundImage:'url('+navs[activeIdx].bg_image+')'}"-->
<div id=app1>
<div id="app" class="page-wrap" v-if="loadReady" :class="{fixed:showPoster}" :style="{backgroundImage:'url(./images/show/fupin.png)'}">
<div class="nav-list">
<div class="nav-item" v-for="(item,idx) in navs" :key="idx" :class="{active:idx===activeIdx}" @click="setActive(idx,item)">
<div class="nav-item__iconbox">
<img v-if="idx===activeIdx" :src="item.icona" class="nav-item__icon" />
<img v-else :src="item.icon" class="nav-item__icon" />
</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" v-if="activeIdx===0">
<div class="channel-title" >
<img src="https://wzw2020.oss-cn-beijing.aliyuncs.com/keche-2%20%E6%8B%B7%E8%B4%9D.png" />
<span>客车</span>
</div>
<div class="channel-text" >
贵阳龙洞堡机场出站打车至贵阳客运东站，乘客车前往丹寨县（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-if="activeIdx===1">
<div class="channel-text" style="padding-top: 0.45rem;">
距离丹寨较近的高铁站为凯里南站、三都县站、都匀东站，从目的地乘坐高铁到达上述高铁站后，再换乘大巴车前往丹寨万达小镇，车程大约 30-40 分钟。
</div>
</div>
<div class="content__text" v-if="activeIdx===2">
<div class="channel-text" style="padding-top: 0.45rem;">
贵阳客运东站、凯里城南客运站、都匀客运站、三都普安高铁站出口都有直达丹寨的大巴车。
</div>
</div>
<div class="content__text" v-if="activeIdx===3">
<div class="channel-text" style="padding-top: 0.45rem;">
贵阳方向自驾出发：<br/>
G76 厦蓉高速 一 S62 余安高速一丹寨县；<br/>
长沙方向自驾出发：<br/>
S41 长潭西高速 一 S50 长韶娄高速 一 S55 二广高一 G60 沪昆高速一 S62 余安高速一丹寨县 ;<br/>
南宁方向自驾出发：<br/>
G75 兰海高速一 G76 厦蓉高速一 S62余安高速一丹寨县；<br/>
昆明方向自驾出发：<br/>
G65 杭瑞高速一 G60 沪昆高速一 G76 厦蓉高速一 S62 余安高速一丹寨县；<br/>
成都方向自驾出发：<br/>
G5 京昆高速一 G4215 蓉遵高速一 G56杭瑞高速一 G75 兰海高速一 G60 沪昆高速一 G76 厦蓉高速一 S62 余安高速一丹寨县 ;<br/>
重庆方向自驾出发：<br/>
G65 包茂高速 一 G75 兰海高速 一G6001 贵阳绕城高速一 G60 沪昆高速一 G76 厦蓉高速一 S62 余安高速一丹寨县。
</div>
</div>
<!-- <div class="content__text" v-html="navs[activeIdx].content"></div>-->
</div>
<!---->
<!--:style="{backgroundImage:'url('+navs[activeIdx].bg_image+')'}"-->
<div class="bottom" v-if="!showPoster">
<img @click="bindShareEvent" class="bottom__icon" src="./images/show/share.png" />
</div>
<div class="modal-wrap" v-if="showPoster" @click="closeModal">
<div class="modal-container">
<div class="poster">
<img :src="navs[activeIdx].share_image" class="poster-img" />
<div @click.stop="refreshShareText" class="change-poster-btn">换一换</div>
<div class="poster-content">
<div class="poster-content__title">{{userInfo.nickname}}的<br/>2020幸运打卡地：丹寨</div>
<div class="poster-content__content">{{shareDesc}}</div>
<img class="poster-content__qrcode" :src="userInfo.qrcode"></img>
<div class="poster-content__userinfo">
<img class="headimg" :src="userInfo.head" />
<div class="tip">快跟着{{userInfo.nickname}}<br/>一起分享丹寨</div>
</div>
</div>
</div>
<div class="poster-action-box">
<div @click.stop="previewImg" class="poster-action-btn">保存图片并发送给好友</div>
<!-- <div @click.stop="shareToFirends" class="poster-action-btn">分享好友</div>-->
</div>
</div>
</div>
<div class="pic-modal-wrap" v-if="showPic" @click="showPic=false">
<div class="txt">长按图片分享给朋友</div><img class="pic" :src="posterUrl" />
</div>
</div>
</div>
<canvas id="canvasEle"></canvas>
<script>
function createImgByAsync(url) {
return new Promise((resolve, reject) => {
let img = new Image();
img.setAttribute("crossOrigin", 'Anonymous');
img.src = url + '?time=' + new Date().valueOf();
img.onload = function () {
resolve(img)
}
img.onerror = function (err) {
reject(err)
}
})
}
function convertCanvasToImage(canvas) {
let image = new Image();
image.src = canvas.toDataURL("image/png");
return image;
}
function cutstrFun(str, len) {
// console.log(str.length)
var temp = str
if (str.length > len) {
temp = str.substr(0, len) + '..'
}
// console.log(temp)
return temp
}
function canvasTextAutoLine(str, ctx, canvasWidth, initX, initY, lineHeight,fontSize,dpr,bold=false) {
if(!str)return;
var lineWidth = 0
var lastSubStrIndex = 0,
totalLineHeight = 0
var fz = fontSize*dpr
ctx.font = (bold?'bold ':'')+`${fz}px "微软雅黑"`;
ctx.fillStyle = "#fff";
ctx.shadowColor = "rgba(0,0,0,0.8)";
ctx.shadowBlur = 8;
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 {
showPic:false,
contentList:[],
loadReady:false,
showPoster:false,
shareTitle:'',
shareDesc:'',
activeIdx:0,
posterUrl:'',
navs:[],
userInfo:{}
}
},
methods:{
async previewImg(){
this.posterUrl = await this.createdPoster()
this.showPic = true
// wx.previewImage({
// urls: [this.posterUrl] // 需要预览的图片http链接列表
// });
},
shareToFirends(){
const currentInfo = this.navs[this.activeIdx]
var shareDesc = this.navs[this.activeIdx].content
var largeShareName = `${this.userInfo.nickname}的`
var largeShareName2 = `2020幸运打卡地：丹寨`
var shareTitle = largeShareName+largeShareName2
if(wx){
wx.updateAppMessageShareData({
title: FRONT_TITLE, // 分享标题
desc: FRONT_DESC, // 分享描述
link: FRONT_URL+'?'+new Date().getTime(), // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: shareImg(), // 分享图标
success: function () {
// 设置成功
}
})
wx.updateTimelineShareData({
title: getUserInfoByLocalStorage()?`${getUserInfoByLocalStorage()}的2020幸运打卡地：丹寨`:FRONT_TITLE, // 分享标题
link: FRONT_URL+'?'+new Date().getTime(), // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: shareImg(), // 分享图标
success: function () {
// 设置成功
}
})
}
},
closeModal(){
this.showPoster = false
this.posterUrl = ''
},
bindSave(){
// wx.previewImage({
// urls: [this.posterUrl] // 需要预览的图片http链接列表
// });
},
// 获取页面dpr和宽度
getWindowInfo() {
var windowInfo = {};
windowInfo.dpr = window.devicePixelRatio;
if (window.innerWidth) {
windowInfo.width = window.innerWidth;
}
else {
windowInfo.width = document.body.clientWidth;
}
return windowInfo;
},
async createdPoster(){
const currentInfo = this.navs[this.activeIdx]
// console.log(currentInfo)
var userInfo = await getUserInfo();
// console.log(userInfo);
var shareName = `快跟着${userInfo.nickname.length > 4 ? userInfo.nickname.substr(0, 4) : userInfo.nickname} 一起分享丹寨`
var canvas = document.getElementById("canvasEle");
var ctx = canvas.getContext("2d");
//var clientWidth = this.getWindowInfo().width;  //获取屏幕宽度用于canvas宽度自适应移动端屏幕
var dpr = 1//this.getWindowInfo().dpr;
ctx.globalCompositeOperation = "source-atop";//** 坑锯齿感觉没什么用不知道是不是用错地方了 **
canvas.width = dpr * 652;  //由于手机屏幕时retina屏，都会多倍渲染，用dpr来动态设置画布宽高，避免图片模糊
canvas.height = dpr * 1066;//去掉微信头部的状态栏应该是603 没搞懂603还是不能让图片满屏直接多加到了609
let share_image = await createImgByAsync('https://wanda-static.bdideal.com/danzhai-holiday-test/danzhai-content-15993815184676.png');
ctx.drawImage(share_image, 0, 0, canvas.width, canvas.height);
//userInfo.qrcode = 'https://qingclouds-server.oss-cn-shanghai.aliyuncs.com/da43bbbbc9dd8c82/59a3da8c0f33cd98.png'//替换下
let qr_image = await createImgByAsync(userInfo.qrcode);
// console.log(qr_image)
ctx.drawImage(qr_image, dpr * 45, dpr * 923, dpr * 110, dpr * 110);
let head_image = await createImgByAsync(userInfo.head);
// console.log(head_image)
ctx.drawImage(head_image, dpr * 395, dpr * 980, dpr * 55, dpr * 55);
canvasTextAutoLine(shareName, ctx, dpr*170, dpr * 465, dpr * 1005,32,24,dpr)
canvasTextAutoLine(currentInfo.content, ctx, dpr*410, dpr * 45, dpr * 220,45,30,dpr,true)
var largeShareName = `${userInfo.nickname}的`
canvasTextAutoLine(largeShareName, ctx, canvas.width, dpr * 40, dpr * 84,52,52,dpr,true)
var largeShareName2 = `2020幸运打卡地：丹寨`
canvasTextAutoLine(largeShareName2, ctx, canvas.width, dpr * 40, dpr * 147,52,52,dpr,true)
return canvas.toDataURL("image/png");
},
async refreshShareText(){
var randStr = this.contentList[parseInt(Math.random()*this.contentList.length)].content
// console.log(randStr)
this.navs[this.activeIdx].content = randStr
this.shareDesc = randStr
// this.posterUrl = await this.createdPoster()
// // this.posterUrl = currentInfo.poster
// this.showPoster = true
},
async bindShareEvent(){
//this.posterUrl = await this.createdPoster()
// this.posterUrl = currentInfo.poster
this.showPoster = true
},
setActive(idx,initJsSdk=true){
this.activeIdx = Number(idx)
this.shareDesc = this.navs[this.activeIdx].content
this.refreshShareText();
if(initJsSdk)this.shareToFirends()
},
async _init_func(){
var category_id = getQueryByString(location.href,'id')
// this.navs = await $get('/content/list?category_id='+category_id).then(res=>res.data).catch(err=>{throw err})
this.navs = [
{title:'飞机',icon:'https://wzw2020.oss-cn-beijing.aliyuncs.com/icon/fly.png',icona:'https://wzw2020.oss-cn-beijing.aliyuncs.com/icon/fly-a.png',share_image:'https://wanda-static.bdideal.com/danzhai-holiday-test/danzhai-content-15993815184676.png',small_image:'https://wzw2020.oss-cn-beijing.aliyuncs.com/%E9%A3%9E%E6%9C%BA.png',bg_image:'https://wzw2020.oss-cn-beijing.aliyuncs.com/bg.png',image:'./images/route/map.png'},
{title:'高铁',icon:'https://wzw2020.oss-cn-beijing.aliyuncs.com/icon/tie.png',icona:'https://wzw2020.oss-cn-beijing.aliyuncs.com/icon/tie-a.png',share_image:'https://wanda-static.bdideal.com/danzhai-holiday-test/danzhai-content-15993815184676.png',small_image:'https://wzw2020.oss-cn-beijing.aliyuncs.com/%E9%AB%98%E9%93%81.png',bg_image:'https://wzw2020.oss-cn-beijing.aliyuncs.com/bg.png',image:'./images/route/map.png'},
{title:'客运',icon:'https://wzw2020.oss-cn-beijing.aliyuncs.com/icon/cart.png',icona:'https://wzw2020.oss-cn-beijing.aliyuncs.com/icon/cart-a.png',share_image:'https://wanda-static.bdideal.com/danzhai-holiday-test/danzhai-content-15993815184676.png',small_image:'https://wzw2020.oss-cn-beijing.aliyuncs.com/%E5%AE%A2%E8%BF%90.png',bg_image:'https://wzw2020.oss-cn-beijing.aliyuncs.com/bg.png',image:'./images/route/map.png'},
{title:'自驾',icon:'https://wzw2020.oss-cn-beijing.aliyuncs.com/icon/zijia.png',icona:'https://wzw2020.oss-cn-beijing.aliyuncs.com/icon/zijia-a.png',share_image:'https://wanda-static.bdideal.com/danzhai-holiday-test/danzhai-content-15993815184676.png',small_image:'https://wzw2020.oss-cn-beijing.aliyuncs.com/%E8%87%AA%E9%A9%BE.png',bg_image:'https://wzw2020.oss-cn-beijing.aliyuncs.com/bg.png',image:'./images/route/map.png'},
]
// console.log(this.navs)
this.contentList = await $get('/travel/desc').then(res=>res.data).catch(err=>{throw err})
this.refreshShareText()
// var idx = getQueryByString(location.href,'idx')
// if(!isNaN(idx) && idx>=0){
// this.setActive(idx)
// }
var userInfo = await getUserInfo();
// console.log(userInfo);
this.$set(this,'userInfo',userInfo)
var largeShareName = `${userInfo.nickname}的`
var largeShareName2 = `2020幸运打卡地：丹寨`
this.shareTitle = largeShareName+largeShareName2
this.setActive(0,false)
await WX_JSSDK_INIT(this).then(wxEnv=>{
// console.log(wxEnv)
this.shareToFirends()
}).catch(err=>{
console.log(err)
})
this.loadReady = true
}
},
created(){
this._init_func()
},
mounted(){
var that = this
var panleft = _.debounce(function(){
that.activeIdx ++
that.refreshShareText();
}, 300)
var panright = _.debounce(function(){
that.activeIdx = that.activeIdx - 1
that.refreshShareText();
}, 300)
var dom = document.querySelector('#app1')
var hammerTest = new Hammer(dom);
hammerTest.on('pan', function(ev) {
if (ev.additionalEvent == 'panright') {
if(that.activeIdx != 2){
panleft()
}
}
if (ev.additionalEvent == 'panleft') {
if(that.activeIdx != 0){
panright()
}
}
})
}
})
</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