vue-fortune-wheel-extended/demo/js/app.b0e49296.js

Component "Wheel of Fortune" for Vue

(function(t){function e(e){for(var r,o,s=e[0],u=e[1],l=e[2],f=0,d=[];f<s.length;f++)o=s[f],Object.prototype.hasOwnProperty.call(i,o)&&i[o]&&d.push(i[o][0]),i[o]=0;for(r in u)Object.prototype.hasOwnProperty.call(u,r)&&(t[r]=u[r]);c&&c(e);while(d.length)d.shift()();return a.push.apply(a,l||[]),n()}function n(){for(var t,e=0;e<a.length;e++){for(var n=a[e],r=!0,s=1;s<n.length;s++){var u=n[s];0!==i[u]&&(r=!1)}r&&(a.splice(e--,1),t=o(o.s=n[0]))}return t}var r={},i={app:0},a=[];function o(e){if(r[e])return r[e].exports;var n=r[e]={i:e,l:!1,exports:{}};return t[e].call(n.exports,n,n.exports,o),n.l=!0,n.exports}o.m=t,o.c=r,o.d=function(t,e,n){o.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},o.r=function(t){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},o.t=function(t,e){if(1&e&&(t=o(t)),8&e)return t;if(4&e&&"object"===typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(o.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)o.d(n,r,function(e){return t[e]}.bind(null,r));return n},o.n=function(t){var e=t&&t.__esModule?function(){return t["default"]}:function(){return t};return o.d(e,"a",e),e},o.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},o.p="";var s=window["webpackJsonp"]=window["webpackJsonp"]||[],u=s.push.bind(s);s.push=e,s=s.slice();for(var l=0;l<s.length;l++)e(s[l]);var c=u;a.push([0,"chunk-vendors"]),n()})({0:function(t,e,n){t.exports=n("56d7")},"40e8":function(t,e,n){t.exports=n.p+"img/wheel.1feeccf9.png"},5033:function(t,e,n){"use strict";var r=n("9ea4"),i=n.n(r);i.a},"56d7":function(t,e,n){"use strict";n.r(e);n("cadf"),n("551c"),n("f751"),n("097d");var r=n("2b0e"),i=function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("div",{staticClass:"container",attrs:{id:"app"}},[r("div",{staticClass:"row"},[r("div",{staticClass:"col-md-6"},[r("h2",[t._v(" Canvas ")]),r("FortuneWheel",{staticStyle:{width:"500px"},attrs:{btnWidth:140,borderColor:"#584b43",borderWidth:6,prizes:t.prizes,verify:t.canvasVerify},on:{rotateStart:t.onCanvasRotateStart,rotateEnd:t.onRotateEnd}})],1),r("div",{staticClass:"col-md-6"},[r("h2",[t._v(" Image ")]),r("FortuneWheel",{staticStyle:{width:"500px"},attrs:{type:"image",prizeId:t.prizeId,prizes:t.prizes,angleBase:-2},on:{rotateStart:t.onImageRotateStart,rotateEnd:t.onRotateEnd}},[r("img",{staticStyle:{transform:"rotateZ(60deg)"},attrs:{slot:"wheel",src:n("40e8")},slot:"wheel"}),r("img",{staticStyle:{width:"180px"},attrs:{slot:"button",src:n("675d")},slot:"button"})]),r("div",{staticClass:"btn-list"},t._l(t.prizes,(function(e,n){return r("div",{key:n,staticClass:"btn",style:{background:e.bgColor},on:{click:function(n){return t.onChangePrize(e.id)}}})})),0),r("div",{staticClass:"wheel-result"},[t._v("\n        当前 100% "),r("span",{style:{background:t.prizeRes.bgColor}}),r("br"),t._v(" 点击按钮，可在旋转中强行改变结果,\n        "),r("br"),t._v(" 最好在旋转减速前, 大约一半的时间之前, 最好一次旋转只改变一次\n      ")])],1)])])},a=[],o=(n("7f7f"),function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"vue-fortuneWheel"},[n("div",{ref:"fortuneWheelBox",staticClass:"fortuneWheel-box",style:t.fortuneWheelStyle,on:{transitionend:t.onRotateEnd,webkitTransitionend:t.onRotateEnd}},["canvas"===t.type?n("canvas",{ref:"fortuneWheelCanvas",attrs:{width:2*t.radius,height:2*t.radius}}):t._t("wheel")],2),n("div",{staticClass:"fortuneWheel-wrapper"},[n("div",{staticClass:"btn-container",on:{click:t.onClickBtn}},["canvas"===t.type?n("div",{staticClass:"fortuneWheel-btn",style:{width:t.btnWidth+"px",height:t.btnWidth+"px"}},[t._v(t._s(t.btnText))]):t._t("button")],2)])])}),s=[],u=(n("20d6"),n("28a5"),n("55dd"),n("75fc")),l=(n("6c7b"),n("ac6a"),n("c5f6"),n("a481"),n("6b54"),function(t,e){return Math.floor(Math.random()*(e-t+1))+t}),c=function(t,e){return t.map("function"===typeof e?e:function(t){return t[e]}).reduce((function(t,e){return f(t,e)}),0)},f=function(t,e){var n,r,i;try{n=t.toString().split(".")[1].length}catch(a){n=0}try{r=e.toString().split(".")[1].length}catch(a){r=0}return i=Math.pow(10,Math.max(n,r)),(d(t,i)+d(e,i))/i},d=function(t,e){var n=0,r=t.toString(),i=e.toString();try{n+=r.split(".")[1].length}catch(a){}try{n+=i.split(".")[1].length}catch(a){}return Number(r.replace(".",""))*Number(i.replace(".",""))/Math.pow(10,n)},h={name:"FortuneWheel",props:{type:{type:String,default:"canvas"},disabled:{type:Boolean,default:!1},verify:{type:Boolean,default:!1},radius:{type:Number,default:250},textRadius:{type:Number,default:190},textLength:{type:Number,default:6},lineHeight:{type:Number,default:20},borderWidth:{type:Number,default:0},borderColor:{type:String,default:"transparent"},btnText:{type:String,default:"GO"},btnWidth:{type:Number,default:140},fontSize:{type:Number,default:34},duration:{type:Number,default:6e3},timingFun:{type:String,default:"cubic-bezier(0.36, 0.95, 0.64, 1)"},angleBase:{type:Number,default:10},prizeId:{type:Number,default:0},prizes:{type:Array,default:function(){return[]}}},data:function(){return{isRotating:!1,rotateEndDeg:0,prizeRes:{}}},computed:{probabilityTotal:function(){return c(this.prizes,(function(t){return t.probability}))},prizesIdArr:function(){var t=this,e=[];return this.prizes.forEach((function(n){var r=Math.round(n.probability*t.decimalSpaces),i=new Array(r).fill(n.id);e.push.apply(e,Object(u["a"])(i))})),e},decimalSpaces:function(){var t=Object(u["a"])(this.prizes).sort((function(t,e){var n=String(t.probability).split(".")[1],r=String(e.probability).split(".")[1],i=n?n.length:0,a=r?r.length:0;return a-i})),e=String(t[0].probability).split(".")[1],n=e?e.length:0;return[1,10,100,1e3,1e4][n>4?4:n]},rotateDuration:function(){return this.isRotating?this.duration/1e3:0},fortuneWheelStyle:function(){return{"-webkit-transform":"rotateZ(".concat(this.rotateEndDeg,"deg)"),transform:"rotateZ(".concat(this.rotateEndDeg,"deg)"),"-webkit-transition-duration":"".concat(this.rotateDuration,"s"),"transition-duration":"".concat(this.rotateDuration,"s"),"-webkit-transition-timing-function:":this.timingFun,"transition-timing-function":this.timingFun}},rotateBase:function(){var t=360*this.angleBase;return this.angleBase<0&&(t-=360),t},canRotate:function(){return!this.disabled&&!this.isRotating&&100===this.probabilityTotal}},watch:{prizeId:function(t){if(this.isRotating){var e=this.getTargetDeg(t);this.angleBase<0&&(e-=360);var n=this.rotateEndDeg,r=360*this.angleBase+e,i=360*Math.floor((r-n)/360);this.angleBase>=0?r+=Math.abs(i):r+=-360-i,this.rotateEndDeg=r}}},created:function(){this.checkProbability()},mounted:function(){"canvas"===this.type&&this.drawCanvas()},methods:{checkProbability:function(){return 100===this.probabilityTotal||(console.error("Prizes Is Error: Sum of probabilities is not 100!"),!1)},drawCanvas:function(){var t=this,e=this.$refs.fortuneWheelCanvas;if(e.getContext){var n=Math.PI/(this.prizes.length/2),r=e.getContext("2d");r.clearRect(0,0,2*this.radius,2*this.radius),r.strokeStyle=this.borderColor,r.lineWidth=2*this.borderWidth,r.font="".concat(this.fontSize,"px Arial"),this.prizes.forEach((function(e,i){var a=i*n-Math.PI/2;if(r.fillStyle=e.bgColor,r.beginPath(),r.arc(t.radius,t.radius,t.radius-t.borderWidth,a,a+n,!1),r.stroke(),r.arc(t.radius,t.radius,0,a+n,a,!0),r.fill(),r.save(),r.fillStyle=e.color,r.translate(t.radius+Math.cos(a+n/2)*t.textRadius,t.radius+Math.sin(a+n/2)*t.textRadius),r.rotate(a+n/2+Math.PI/2),e.name.length>t.textLength)for(var o=[e.name.substring(0,t.textLength),e.name.substring(t.textLength)],s=0;s<o.length;s++)r.fillText(o[s],-r.measureText(o[s]).width/2,(s+1)*t.lineHeight);else r.fillText(e.name,-r.measureText(e.name).width/2,t.lineHeight);r.restore()}))}},onClickBtn:function(){this.canRotate&&(this.verify?this.$emit("rotateStart",this.onRotateStart):(this.$emit("rotateStart"),this.onRotateStart()))},onRotateStart:function(){this.isRotating=!0;var t=this.prizeId||this.getRandomPrize();this.rotateEndDeg=this.rotateBase+this.getTargetDeg(t)},onRotateEnd:function(){this.isRotating=!1,this.rotateEndDeg%=360,this.$emit("rotateEnd",this.prizeRes)},getRandomPrize:function(){var t=this.prizesIdArr[l(0,100*this.decimalSpaces-1)];return t},getTargetDeg:function(t){var e=360/this.prizes.length,n=this.prizes.findIndex((function(e){return e.id===t}));return this.prizeRes=this.prizes[n],360-(e*n+e/2)}}},p=h,b=(n("5033"),n("2877")),g=Object(b["a"])(p,o,s,!1,null,"be86221c",null),v=g.exports;v.install=function(t){t.component(v.name,v)};var y=v,m={name:"app",components:{FortuneWheel:y},data:function(){return{prizeId:1,canvasVerify:!0,prizes:[{id:1,name:"Blue",value:"Blue's value",bgColor:"#45ace9",color:"#ffffff",probability:30},{id:2,name:"Red",value:"Red's value",bgColor:"#dd3832",color:"#ffffff",probability:40},{id:3,name:"Yellow",value:"Yellow's value",bgColor:"#fef151",color:"#ffffff",probability:30}]}},computed:{prizeRes:function(){var t=this;return this.prizes.filter((function(e){return e.id===t.prizeId}))[0]||[]}},methods:{onCanvasRotateStart:function(t){var e=this;if(this.canvasVerify){var n=!0;this.DoServiceVerify(n,2e3).then((function(n){t(),n?(console.log("验证通过, 开始旋转"),t(),e.canvasVerify=!1):alert("未通过验证")}))}else console.log("onCanvasRotateStart")},onImageRotateStart:function(){console.log("onImageRotateStart")},onRotateEnd:function(t){alert(t.value)},onChangePrize:function(t){this.prizeId=t},DoServiceVerify:function(t,e){return new Promise((function(n){setTimeout((function(){n(t)}),e)}))}}},S=m,z=(n("5c0b"),Object(b["a"])(S,i,a,!1,null,null,null)),w=z.exports;r["a"].config.productionTip=!1,new r["a"]({render:function(t){return t(w)}}).$mount("#app")},"5c0b":function(t,e,n){"use strict";var r=n("e332"),i=n.n(r);i.a},"675d":function(t,e,n){t.exports=n.p+"img/button.7e09e29c.png"},"9ea4":function(t,e,n){},e332:function(t,e,n){}});