|
@@ -0,0 +1,234 @@
|
|
|
+<extend name="public@base"/>
|
|
|
+<block name="css">
|
|
|
+ <link rel="stylesheet" href="__TMPL__/public/assets/css/lottery.css">
|
|
|
+ <style>
|
|
|
+ #app {background: #FF589B;}
|
|
|
+ </style>
|
|
|
+</block>
|
|
|
+<block name="body">
|
|
|
+ <van-nav-bar>
|
|
|
+ <template #title>
|
|
|
+ <span>抽奖</span>
|
|
|
+ </template>
|
|
|
+ </van-nav-bar>
|
|
|
+ <volist name="$images" id="v" key="k">
|
|
|
+ <img src="{$v}" id="gift-img{$k-1}" style="display:none;"/>
|
|
|
+ </volist>
|
|
|
+ <div class="banner">
|
|
|
+ <div class="bgbox">
|
|
|
+ <div class="tabbox clearfix" id="tabbox">
|
|
|
+ <div class="boxlist">
|
|
|
+ <div class="turnplate">
|
|
|
+ <canvas class="item" id="wheelcanvas" width="422px" height="422px"></canvas>
|
|
|
+ <img class="pointer" src="__TMPL__/public/assets/images/lottery/btn_start.png"/>
|
|
|
+ <div class="panbg"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="content_box content_box_one">
|
|
|
+ <p class="lottery_description">
|
|
|
+ <span class="description_title">※抽奖机会:</span>
|
|
|
+ <span class="description_content">活动期间,每对结婚成功的情侣都有一次抽奖机会,100%中奖;</span>
|
|
|
+ </p>
|
|
|
+ <p class="lottery_description">
|
|
|
+ <span class="description_title">※抽奖说明:</span>
|
|
|
+ <span class="description_content">男女双方都可以在平台确认结婚,抽奖只能是女方账号;</span>
|
|
|
+ </p>
|
|
|
+ <p class="lottery_description">
|
|
|
+ <span class="description_title">※领奖说明:</span>
|
|
|
+ <span class="description_content">到指定地点领取奖品,需要携带结婚证和女方账号登录系统,打开抽奖记录;</span>
|
|
|
+ </p>
|
|
|
+ <p class="lottery_description mt20">
|
|
|
+ <span class="description_title black">领取方式:</span>
|
|
|
+ <span class="description_content">上班期间,晋江经济开发区人才服务共享中心进行登记兑奖。</span>
|
|
|
+ </p>
|
|
|
+ <p class="lottery_description">
|
|
|
+ <span class="description_content">图片仅供参考,礼品以最终实物为准。</span>
|
|
|
+ </p>
|
|
|
+ <p class="lottery_description">
|
|
|
+ <span class="description_content">晋江聚才网客服热线:0595-88223456。</span>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+</block>
|
|
|
+<block name="script">
|
|
|
+ <script type="text/javascript" src="__TMPL__/public/assets/js/awardRotate.js"></script>
|
|
|
+ <script>
|
|
|
+ new Vue({
|
|
|
+ el: '#app',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ onBack() {
|
|
|
+ history.back();
|
|
|
+ },
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+
|
|
|
+ }
|
|
|
+ });
|
|
|
+ </script>
|
|
|
+ <script type="text/javascript">
|
|
|
+ // 欢乐转盘
|
|
|
+ var turnplate = {
|
|
|
+ ids: [], //id列表
|
|
|
+ restaraunts: [], //大转盘奖品名称
|
|
|
+ colors: [], //大转盘奖品区块对应背景颜色
|
|
|
+ images: [], //图片列表
|
|
|
+ outsideRadius: 140, //大转盘外圆的半径
|
|
|
+ textRadius: 150, //大转盘奖品位置距离圆心的距离
|
|
|
+ insideRadius: 68, //大转盘内圆的半径
|
|
|
+ startAngle: 0, //开始角度
|
|
|
+ randomRate: [], //控制获奖率,百分制(相加需等于100%),对应restaraunts(顺序需要保持一致),
|
|
|
+ bRotate: false //false:停止;ture:旋转
|
|
|
+ };
|
|
|
+
|
|
|
+ $(document).ready(function () {
|
|
|
+ //动态添加大转盘的奖品与奖品区域背景颜色
|
|
|
+ // 欢乐转盘
|
|
|
+ turnplate.ids = {:json_encode($ids)};
|
|
|
+ turnplate.restaraunts = {:json_encode($restaraunts)};
|
|
|
+ turnplate.colors = {:json_encode($colors)};
|
|
|
+ turnplate.images = {:json_encode($images)};
|
|
|
+
|
|
|
+
|
|
|
+ var rotateTimeOut = function () {
|
|
|
+ $('#wheelcanvas').rotate({
|
|
|
+ angle: 0,
|
|
|
+ animateTo: 2160,
|
|
|
+ duration: 8000,
|
|
|
+ callback: function () {
|
|
|
+ alert('网络超时,请检查您的网络设置!');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ };
|
|
|
+
|
|
|
+ //欢乐旋转转盘 item:奖品位置; txt:提示语;
|
|
|
+ var rotateFn = function (item, txt) {
|
|
|
+ var angles = item * (360 / turnplate.restaraunts.length) - (360 / (turnplate.restaraunts.length * 2));
|
|
|
+ if (angles < 270) {
|
|
|
+ angles = 270 - angles;
|
|
|
+ } else {
|
|
|
+ angles = 360 - angles + 270;
|
|
|
+ }
|
|
|
+ $('#wheelcanvas').stopRotate();
|
|
|
+ $('#wheelcanvas').rotate({
|
|
|
+ angle: 0,
|
|
|
+ animateTo: angles + 1800,
|
|
|
+ duration: 8000,
|
|
|
+ callback: function () {
|
|
|
+ alert(txt);//欢乐转盘弹出框
|
|
|
+ turnplate.bRotate = !turnplate.bRotate;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ };
|
|
|
+ // 欢乐转盘
|
|
|
+ $('.pointer').click(function () {
|
|
|
+ if (turnplate.bRotate) return;
|
|
|
+ turnplate.bRotate = !turnplate.bRotate;
|
|
|
+ //获取随机数(奖品个数范围内)
|
|
|
+ $.get('{:url("lotteryPost")}', function (json) {
|
|
|
+ if (json.code == 1) {
|
|
|
+ var item = 0;
|
|
|
+ for (var i = 0; i < turnplate.ids.length; i++) {
|
|
|
+ if (turnplate.ids[i] == json.data.id) {
|
|
|
+ item = i + 1;
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //奖品数量等于10,指针落在对应奖品区域的中心角度[252, 216, 180, 144, 108, 72, 36, 360, 324, 288]
|
|
|
+ rotateFn(item, json.msg);
|
|
|
+ } else {
|
|
|
+ alert(json.msg);
|
|
|
+ }
|
|
|
+ }, 'json');
|
|
|
+
|
|
|
+ });
|
|
|
+
|
|
|
+ });
|
|
|
+
|
|
|
+ //页面所有元素加载完毕后执行drawRouletteWheel()方法对转盘进行渲染
|
|
|
+ window.onload = function () {
|
|
|
+ drawRouletteWheel();// 欢乐转盘
|
|
|
+ };
|
|
|
+
|
|
|
+ // 欢乐转盘
|
|
|
+ function drawRouletteWheel() {
|
|
|
+ var canvas = document.getElementById("wheelcanvas");
|
|
|
+ if (canvas.getContext) {
|
|
|
+ //根据奖品个数计算圆周角度
|
|
|
+ var arc = Math.PI / (turnplate.restaraunts.length / 2);
|
|
|
+ var ctx = canvas.getContext("2d");
|
|
|
+ //在给定矩形内清空一个矩形
|
|
|
+ ctx.clearRect(0, 0, 422, 422);
|
|
|
+ //strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式
|
|
|
+ ctx.strokeStyle = "#FFBE04";
|
|
|
+ //font 属性设置或返回画布上文本内容的当前字体属性
|
|
|
+ ctx.font = '16px Microsoft YaHei';
|
|
|
+ for (var i = 0; i < turnplate.restaraunts.length; i++) {
|
|
|
+ var angle = turnplate.startAngle + i * arc;
|
|
|
+ ctx.fillStyle = turnplate.colors[i];
|
|
|
+ ctx.beginPath();
|
|
|
+ //arc(x,y,r,起始角,结束角,绘制方向) 方法创建弧/曲线(用于创建圆或部分圆)
|
|
|
+ ctx.arc(211, 211, turnplate.outsideRadius, angle, angle + arc, false);
|
|
|
+ ctx.arc(211, 211, turnplate.insideRadius, angle + arc, angle, true);
|
|
|
+ ctx.stroke();
|
|
|
+ ctx.fill();
|
|
|
+ //锁画布(为了保存之前的画布状态)
|
|
|
+ ctx.save();
|
|
|
+
|
|
|
+ //----绘制奖品开始----
|
|
|
+ ctx.fillStyle = "#E5302F";
|
|
|
+ var text = turnplate.restaraunts[i];
|
|
|
+ var line_height = 17;
|
|
|
+ //translate方法重新映射画布上的 (0,0) 位置
|
|
|
+ ctx.translate(211 + Math.cos(angle + arc / 2) * turnplate.textRadius, 211 + Math.sin(angle + arc / 2) * turnplate.textRadius);
|
|
|
+
|
|
|
+ //rotate方法旋转当前的绘图
|
|
|
+ ctx.rotate(angle + arc / 2 + Math.PI / 2);
|
|
|
+
|
|
|
+ /** 下面代码根据奖品类型、奖品名称长度渲染不同效果,如字体、颜色、图片效果。(具体根据实际情况改变) **/
|
|
|
+ if (text.indexOf("M") > 0) {
|
|
|
+ //流量包
|
|
|
+ var texts = text.split("M");
|
|
|
+ for (var j = 0; j < texts.length; j++) {
|
|
|
+ ctx.font = j == 0 ? 'bold 20px Microsoft YaHei' : '16px Microsoft YaHei';
|
|
|
+ if (j == 0) {
|
|
|
+ ctx.fillText(texts[j] + "M", -ctx.measureText(texts[j] + "M").width / 2, j * line_height);
|
|
|
+ } else {
|
|
|
+ ctx.fillText(texts[j], -ctx.measureText(texts[j]).width / 2, j * line_height);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else if (text.indexOf("M") == -1 && text.length > 6) {
|
|
|
+ //奖品名称长度超过一定范围
|
|
|
+ text = text.substring(0, 6) + "||" + text.substring(6);
|
|
|
+ var texts = text.split("||");
|
|
|
+ for (var j = 0; j < texts.length; j++) {
|
|
|
+ ctx.fillText(texts[j], -ctx.measureText(texts[j]).width / 2, j * line_height);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ //在画布上绘制填色的文本。文本的默认颜色是黑色
|
|
|
+ //measureText()方法返回包含一个对象,该对象包含以像素计的指定字体宽度
|
|
|
+ ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
|
|
|
+ }
|
|
|
+
|
|
|
+ //添加对应图标
|
|
|
+ var img = document.getElementById("gift-img" + i);
|
|
|
+ img.onload = function () {
|
|
|
+ ctx.drawImage(img, -18, 25, 40, 40);
|
|
|
+ };
|
|
|
+ ctx.drawImage(img, -18, 25, 40, 40);
|
|
|
+
|
|
|
+ //把当前画布返回(调整)到上一个save()状态之前
|
|
|
+ ctx.restore();
|
|
|
+ //----绘制奖品结束----
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ </script>
|
|
|
+</block>
|