Skip to content

A
Athena
Commit b111c554 authored by 华国豪's avatar 华国豪 🙄
Browse files
Options

新增抽奖活动

parent 94133101
Hide whitespace changes
Inline Side-by-side
Showing with 496 additions and 1 deletion
src/components/ActivityCenter/ActivityCenter.vue 0 → 100644
View file @ b111c554
<style scoped>
</style>
<template>
<el-row class="page_ActivityCenter">
<el-col :span="20" :offset="2">
<p @click="goUrl('TurnaroundDraw')">抽奖</p>
</el-col>
</el-row>
</template>
<script>
export default {
data () {
return {
}
},
mounted () {
},
methods: {
goUrl: function (path) {
this.$router.push({name: path});
}
}
}
</script>
src/components/ActivityCenter/TurnaroundDraw.vue 0 → 100644
View file @ b111c554
<style scoped>
.page_TurnaroundDraw .main_box {
height: 766px;
background: #d1f3f2 url(../../assets/img/active/active_bg_s.png) no-repeat 0
100%/115% auto;
background-position: -115px 13px;
}
.page_TurnaroundDraw .main_box .info_box {
width: 1000px;
margin: 0 auto;
background-color: transparent;
padding-top: 80px;
position: relative;
padding-left: 96px;
}
.page_TurnaroundDraw .main_box .info_box .info_left{
width: 350px;
float: left;
}
.page_TurnaroundDraw .main_box .info_box .info_left .turnplate {
display: block;
width: 330px;
position: relative;
margin: 0 15px;
background-image: url(../../assets/img/active/cj_bg.png);
background-size: 100% 99%;
background-repeat: no-repeat;
z-index: 2;
}
.page_TurnaroundDraw .main_box .info_box .info_left .turnplate canvas.item {
width: 100%;
}
.page_TurnaroundDraw .main_box .info_box .info_left .turnplate img.pointer {
position: absolute;
width: 33%;
/* height: 40%; */
left: 34%;
top: 19%;
}
.page_TurnaroundDraw .main_box .info_box .info_left .Cushion{
position: relative;
height: 100px;
}
.page_TurnaroundDraw .main_box .info_box .info_left .trapezoid {
border-bottom: 100px solid #f97571;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
width: 134px;
position: absolute;
left: 62px;
top: -43px;
z-index: 1;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.page_TurnaroundDraw .main_box .info_box .info_left .Cushion p{
position: absolute;
left: 67px;
top: -8px;
z-index: 1;
padding-left: 39px;
color: #FFF3DC;
display: flex;
align-items: center;
}
.page_TurnaroundDraw .main_box .info_box .info_left .Cushion p span{
width:34px;
height:28px;
background:rgba(255,243,220,.15);
border-radius:4px;
display: inline-block;
line-height: 28px;
text-align: center;
margin-left: 25px;
}
.page_TurnaroundDraw .main_box .info_box .info_left ._scushion{
width:284px;
height:21px;
background:rgba(2,131,79,1);
opacity:0.3;
border-radius:50%;
position: relative;
left: 38px;
top: -53px;
}
.page_TurnaroundDraw .main_box .info_box .info_right{
padding: 35px 22px 15px 134px;
background-color: white;
margin-left: 125px;
margin-top: 60px;
position: relative;
height: 230px;
width: 620px;
}
.page_TurnaroundDraw .main_box .info_box .info_right .info_right_roll{
width: 60%;
height: 84%;
overflow: hidden;
position: absolute;
margin-left: 120px;
}
.page_TurnaroundDraw .main_box .info_box .info_right >img{
height: 110px;
position: absolute;
top: -68px;
right: 40px;
}
.page_TurnaroundDraw .main_box .info_box .info_right .info_right_roll ul li{
list-style: none;
background:rgba(255,222,67,1);
border-radius:15px;
margin-bottom: 12px;
padding:0 20px;
font-size: 12px;
}
.page_TurnaroundDraw .main_box .info_box .info_right .info_right_roll ul li>span{
margin-right: 40px;
overflow: hidden;
display: inline-block;
height: 30px;
line-height: 30px;
}
.page_TurnaroundDraw .main_box .info_box .info_right .info_right_roll ul li>span._name{
max-width: 60px;
}
.page_TurnaroundDraw .main_box .info_box .info_right .info_right_roll ul li>span._acc{
max-width: 72px;
}
.page_TurnaroundDraw .main_box .info_box .info_right .info_right_roll ul li>span._last{
max-width: 150px;
margin-right: 10px;
}
.page_TurnaroundDraw .main_box .info_box .info_right .info_right_roll ul li>span ._prize{
margin-left: 5px;
font-weight: bold;
color: #E53E48;
}
.info_rule{
position: absolute;
left: 173px;
bottom: -95px;
}
.info_rule p {
font-size: 14px;
color: #FFFFFF;
}
.info_rule div{
font-size: 12px;
color: white;
}
</style>
<template>
<el-row class="page_TurnaroundDraw">
<el-col class="main_box" :span="20" :offset="2">
<div class="info_box clearfix">
<div class="info_left">
<div class="turnplate">
<canvas class="item" id="wheelcanvas" ref="wheelcanvas" width="422px" height="422px"></canvas>
<img class="pointer" @click="startUp" src="../../assets/img/active/jt_2.png">
</div>
<div class="Cushion">
<div class="trapezoid">
</div>
<p class="">抽奖次数： <span>02</span></p>
</div>
<div class="_scushion">
</div>
</div>
<div class="info_right">
<img src="../../assets/img/active/active_tittle.png" alt="">
<div class="info_right_roll">
<ul id="RollBox">
<li>
<span class="_name">非法所得发</span>
<span class="_acc">158****1254</span>
<span class="_last">抽中<span class="_prize">满2000元减500元券</span></span>
</li>
<li>
<span class="_name">非法所得发</span>
<span class="_acc">158****1254</span>
<span class="_last">抽中<span class="_prize">满2000元减500元券</span></span>
</li>
<li>
<span class="_name">非法所得发</span>
<span class="_acc">158****1254</span>
<span class="_last">抽中<span class="_prize">满2000元减500元券</span></span>
</li>
<li>
<span class="_name">非法所得发</span>
<span class="_acc">158****1254</span>
<span class="_last">抽中<span class="_prize">满2000元减500元券</span></span>
</li>
<li>
<span class="_name">非法所得发</span>
<span class="_acc">158****1254</span>
<span class="_last">抽中<span class="_prize">满2000元减500元券</span></span>
</li>
<li>
<span class="_name">非法所得发</span>
<span class="_acc">158****1254</span>
<span class="_last">抽中<span class="_prize">满2000元减500元券</span></span>
</li>
<li>
<span class="_name">非法所得发</span>
<span class="_acc">158****1254</span>
<span class="_last">抽中<span class="_prize">满2000元减500元券</span></span>
</li>
<li>
<span class="_name">非法所得发</span>
<span class="_acc">158****1254</span>
<span class="_last">抽中<span class="_prize">满2000元减500元券</span></span>
</li>
<li>
<span class="_name">非法所得发</span>
<span class="_acc">158****1254</span>
<span class="_last">抽中<span class="_prize">满2000元减500元券</span></span>
</li>
<li>
<span class="_name">非法所得发</span>
<span class="_acc">158****1254</span>
<span class="_last">抽中<span class="_prize">满2000元减500元券</span></span>
</li>
<li>
<span class="_name">非法所得发</span>
<span class="_acc">158****1254</span>
<span class="_last">抽中<span class="_prize">满2000元减500元券</span></span>
</li>
</ul>
</div>
</div>
<div class="info_rule">
<p>活动规则</p>
<div>
1、本次秒杀活动为中国电信天翼用户专享。<br>
2、活动期间使用任何舞弊行为的用户一经发现，即刻取消秒杀活动资格。<br>
3、每日秒杀的礼品数量有限，秒完即止。秒杀礼品库存数量在秒杀过程中实时变化，秒杀成功与否以实际结果为准。<br>
4、每名用户每天可成功参与一次秒杀，活动期间每名用户最高可成功秒杀5次。<br>
5、在成功秒杀后，用户需提供真实信息。如因用户资料不全导致活动奖品无法正确发放的情况，主办方不对由此产生的任何后果负责。<br>
6、所有礼品将在活动结束后的15个工作日内免费寄出。<br>
7、本活动最终解释权归中国电信天翼爱游戏所有。
</div>
</div>
</div>
</el-col>
</el-row>
</template>
<script>
export default {
data() {
return {
turnplate: {
restaraunts: [], //大转盘奖品名称
colors: [], //大转盘奖品区块对应背景颜色
outsideRadius: 192, //大转盘外圆的半径
textRadius: 155, //大转盘奖品位置距离圆心的距离
insideRadius: 68, //大转盘内圆的半径
startAngle: 0, //开始角度
bRotate: false, //false:停止;ture:旋转
time: 2000,
noBegun: false
},
LotteryAward: [
{
name: "一等奖"
}
]
};
},
mounted() {
this.turnplate.restaraunts = [
"碧根果一袋",
"年货红包",
"水果拼盘300元月卡",
"2元现金红包",
"夏威夷果一袋",
"3元现金红包",
"松子一袋 ",
"5元现金红包"
];
this.turnplate.colors = [
"#FFFFFF",
"#5fcbd5",
"#FFFFFF",
"#5fcbd5",
"#FFFFFF",
"#5fcbd5",
"#FFFFFF",
"#5fcbd5"
];
this.drawRouletteWheel();
this.startmarquee('30', 20, 0, 'RollBox')
},
methods: {
startUp: function() {
var item = this.rnd(1, this.turnplate.restaraunts.length);
var angles = item * (360 / this.turnplate.restaraunts.length) - (360 / (this.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('恭喜中奖了');
}
});
},
rnd: function(n, m) {
var random = Math.floor(Math.random() * (m - n + 1) + n);
return random;
},
startmarquee(lh,speed,delay,marqueeObj) { //lh---每行列表的高度，speed---滚动的速度，delay---间隔多久滚动一次,marqueeObj---需要实现这个效果的id
var p=false;
var t;
var o=document.getElementById(marqueeObj);
o.innerHTML+=o.innerHTML;
o.style.marginTop=0;
o.onmouseover=function(){p=true;} //鼠标移入，停止滚动
o.onmouseout=function(){p=false;}//鼠标移出，继续滚动
function start(){
t=setInterval(scrolling,speed); //定时器，自动滚动
if(!p) o.style.marginTop=parseInt(o.style.marginTop)-1+"px";
}
function scrolling(){
if(parseInt(o.style.marginTop)%lh!=0){
o.style.marginTop=parseInt(o.style.marginTop)-1+"px";
if(Math.abs(parseInt(o.style.marginTop))>=o.scrollHeight/2) o.style.marginTop=0;
}else{
clearInterval(t);
setTimeout(start,delay);
}
}
setTimeout(start,delay);
},
drawRouletteWheel: function() {
var canvas = document.getElementById("wheelcanvas");
let _this = this;
if (canvas.getContext) {
//根据奖品个数计算圆周角度
var arc = Math.PI / (_this.turnplate.restaraunts.length / 2);
var ctx = canvas.getContext("2d");
//在给定矩形内清空一个矩形
ctx.clearRect(0, 0, 422, 422);
//strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式
ctx.strokeStyle = "#E53E48";
//font 属性设置或返回画布上文本内容的当前字体属性
ctx.font = "bold 18px Microsoft YaHei";
for (var i = 0; i < _this.turnplate.restaraunts.length; i++) {
var angle = _this.turnplate.startAngle + i * arc;
ctx.fillStyle = _this.turnplate.colors[i];
ctx.beginPath();
//arc(x,y,r,起始角,结束角,绘制方向) 方法创建弧/曲线（用于创建圆或部分圆）
ctx.arc(
211,
211,
_this.turnplate.outsideRadius,
angle,
angle + arc,
false
);
ctx.arc(
211,
211,
_this.turnplate.insideRadius,
angle + arc,
angle,
true
);
ctx.stroke();
ctx.fill();
//锁画布(为了保存之前的画布状态)
ctx.save();
//改变画布文字颜色
var b = i + 2;
if (b % 2) {
ctx.fillStyle = "#FFFFFF";
} else {
ctx.fillStyle = "#E5302F";
}
//----绘制奖品开始----
var text = _this.turnplate.restaraunts[i];
var line_height = 17;
//translate方法重新映射画布上的 (0,0) 位置
ctx.translate(
211 + Math.cos(angle + arc / 2) * _this.turnplate.textRadius,
211 + Math.sin(angle + arc / 2) * _this.turnplate.textRadius
);
//rotate方法旋转当前的绘图
ctx.rotate(angle + arc / 2 + Math.PI / 2);
/** 下面代码根据奖品类型、奖品名称长度渲染不同效果，如字体、颜色、图片效果。(具体根据实际情况改变) **/
if (text.indexOf("盘") > 0) {
//判断字符进行换行
var texts = text.split("盘");
for (var j = 0; j < texts.length; j++) {
ctx.font =
j == 0
? "bold 20px Microsoft YaHei"
: "bold 18px Microsoft YaHei";
if (j == 0) {
ctx.fillText(
texts[j] + "盘",
-ctx.measureText(texts[j] + "盘").width / 2,
j * line_height
);
} else {
ctx.fillText(
texts[j],
-ctx.measureText(texts[j]).width / 2,
j * line_height * 1.2
); //调整行间距
}
}
} else if (text.indexOf("盘") == -1 && text.length > 8) {
//奖品名称长度超过一定范围
text = text.substring(0, 8) + "||" + text.substring(8);
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);
}
//把当前画布返回（调整）到上一个save()状态之前
ctx.restore();
//----绘制奖品结束----
}
}
},
}
};
</script>
src/router.js
View file @ b111c554
......@@ -195,7 +195,24 @@ export default new Router({
title: "机票订单"
}
},
{
path: "/TurnaroundDraw",
name: "TurnaroundDraw",
component: resolve =>
require(["@/components/ActivityCenter/TurnaroundDraw"], resolve),
meta: {
title: "转盘抽奖"
}
},
{
path: "/ActivityCenter",
name: "ActivityCenter",
component: resolve =>
require(["@/components/ActivityCenter/ActivityCenter"], resolve),
meta: {
title: "活动中心"
}
},
]
},
{
......
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 to comment