实例介绍
【实例简介】
【调试步骤】
# 安装依赖
npm install
# 开启本地服务器localhost:8088
npm run dev
# 发布环境
npm run build
#然后静待你的浏览器打开一个网页，按F12 进入手机模拟器，查看效果最佳(推荐chrome浏览器，前端开发者的必备)
【实例截图】
【核心代码】
<template>
<div class="container">
<div class="lucky-wheel">
<div class="lucky-title"></div>
<div class="wheel-main">
<div class="wheel-pointer-box">
<div class="wheel-pointer" @click="rotate_handle()" :style="{transform:rotate_angle_pointer,transition:rotate_transition_pointer}"></div>
</div>
<div class="wheel-bg" :style="{transform:rotate_angle,transition:rotate_transition}">
<div class="prize-list">
<div class="prize-item" v-for="(item,index) in prize_list" :key="index">
<div class="prize-pic">
<img :src="item.icon">
</div>
<div class="prize-count" v-if="item.count">
{{item.count}}
</div>
<div class="prize-type">
{{item.name}}
</div>
</div>
</div>
</div>
</div>
</div>
<div class="main">
<div class="main-bg"></div>
<div class="bg-p"></div>
<div class="content">
<div class="lottery_ticket">今日免费抽奖次数： {{ lottery_ticket}}</div>
</div>
<div class="tip">
<div class="tip-title">活动规则</div>
<div class="tip-content">
<p> 1.每日签到后，即可获得一次幸运大转盘的机会，仅限当天有效，过期作废。 2.金币抽奖，每10个金豆可兑换一次大转盘机会。</p>
<p> 2.金币抽奖，每10个金豆可以兑换一次大转盘抽奖机会</p>
<p> 3.所中金豆或积分到【我的账户】中查询。累计达到100金豆及以上，可以兑换相应奖品</p>
</div>
</div>
</div>
<div class="toast" v-show="toast_control">
<div class="toast-container">
<img :src="toast_pictrue" class="toast-picture">
<div class="close" @click="close_toast()"></div>
<div class="toast-title">
{{toast_title}}
</div>
<div class="toast-btn">
<div class="toast-cancel" @click="close_toast">关闭</div>
</div>
</div>
</div>
<div class="toast-mask" v-show="toast_control"></div>
</div>
</template>
<script>
export default {
data() {
return {
easejoy_bean: 0, //金豆
lottery_ticket: 0, //抽奖次数
prize_list: [
{
icon: require("../assets/img/bean_500.png"), // 奖品图片
count: 10, // 奖品数量
name: "易趣豆", // 奖品名称
isPrize: 1 // 该奖项是否为奖品
},
{
icon: require("../assets/img/bean_five.png"),
count: 5,
name: "豆",
isPrize: 1
},
{
icon: require("../assets/img/bean_one.png"),
count: 10,
name: "易趣豆",
isPrize: 1
},
{
icon: require("../assets/img/point_five.png"),
count: 5,
name: "积分",
isPrize: 1
},
{
icon: require("../assets/img/point_ten.png"),
count: 10,
name: "积分",
isPrize: 1
},
{
icon: require("../assets/img/bean_500.png"),
count: 10,
name: "易趣豆",
isPrize: 1
},
{
icon: require("../assets/img/give_up.png"),
count: 0,
name: "未中奖",
isPrize: 0
},
{
icon: require("../assets/img/bean_500.png"),
count: 10,
name: "易趣豆",
isPrize: 1
}
], //奖品列表
toast_control: false, //抽奖结果弹出框控制器
hasPrize: false, //是否中奖
start_rotating_degree: 0, //初始旋转角度
rotate_angle: 0, //将要旋转的角度
start_rotating_degree_pointer: 0, //指针初始旋转角度
rotate_angle_pointer: 0, //指针将要旋转的度数
rotate_transition: "transform 6s ease-in-out", //初始化选中的过度属性控制
rotate_transition_pointer: "transform 12s ease-in-out", //初始化指针过度属性控制
click_flag: true, //是否可以旋转抽奖
index: 0
};
},
created() {
this.init_prize_list();
},
computed: {
toast_title() {
return this.hasPrize
? "恭喜您，获得" this.prize_list[this.index].count ' ' this.prize_list[this.index].name
: "未中奖";
},
toast_pictrue() {
return this.hasPrize
? require("../assets/img/congratulation.png")
: require("../assets/img/sorry.png");
}
},
methods: {
//此方法为处理奖品数据
init_prize_list(list) {},
rotate_handle() {
this.index = 1 //指定每次旋转到的奖品下标
this.rotating();
},
rotating() {
if (!this.click_flag) return;
var type = 0; // 默认为 0 转盘转动 1 箭头和转盘都转动(暂且遗留)
var during_time = 5; // 默认为1s
var random = Math.floor(Math.random() * 7);
var result_index = this.index ; // 最终要旋转到哪一块，对应prize_list的下标
var result_angle = [337.5, 292.5, 247.5, 202.5, 157.5, 112.5, 67.5, 22.5]; //最终会旋转到下标的位置所需要的度数
var rand_circle = 6; // 附加多转几圈，2-3
this.click_flag = false; // 旋转结束前，不允许再次触发
if (type == 0) {
// 转动盘子
var rotate_angle =
this.start_rotating_degree
rand_circle * 360
result_angle[result_index] -
this.start_rotating_degree % 360;
this.start_rotating_degree = rotate_angle;
this.rotate_angle = "rotate(" rotate_angle "deg)";
// // //转动指针
// this.rotate_angle_pointer = "rotate(" this.start_rotating_degree_pointer 360*rand_circle "deg)";
// this.start_rotating_degree_pointer =360*rand_circle;
var that = this;
// 旋转结束后，允许再次触发
setTimeout(function() {
that.click_flag = true;
that.game_over();
}, during_time * 1000 1500); // 延时，保证转盘转完
} else {
//
}
},
game_over() {
this.toast_control = true;
this.hasPrize = this.prize_list[this.index].isPrize
},
//关闭弹窗
close_toast() {
this.toast_control = false;
}
}
};
</script>
<style scoped>
.container {
width: 100%;
}
.lucky-wheel {
width: 100%;
height: 31.5625rem;
background: rgb(252, 207, 133) url("../assets/img/color_pillar.png") no-repeat
center bottom;
background-size: 100%;
padding-top: 1.5625rem;
}
.lucky-title {
width: 100%;
height: 8.125rem;
background: url("../assets/img/lucky_title.png") no-repeat center top;
background-size: 100%;
}
.wheel-main {
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.wheel-bg {
width: 18.4375rem;
height: 18.4375rem;
background: url("../assets/img/draw_wheel.png") no-repeat center top;
background-size: 100%;
color: #fff;
font-weight: 500;
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
transition: transform 3s ease;
}
.wheel-pointer-box {
position: absolute;
top: 50%;
left: 50%;
z-index: 100;
transform: translate(-50%, -60%);
width: 5.3125rem;
height: 5.3125rem;
}
.wheel-pointer {
width: 5.3125rem;
height: 5.3125rem;
background: url("../assets/img/draw_btn.png") no-repeat center top;
background-size: 100%;
transform-origin: center 60%;
}
.wheel-bg div {
text-align: center;
}
.prize-list {
width: 100%;
height: 100%;
position: relative;
}
.prize-list .prize-item {
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
.prize-list .prize-item:first-child {
top: 0;
left: 8.3125rem;
transform: rotate(20deg);
}
.prize-list .prize-item:nth-child(2) {
top: 2.8rem;
left: 10.8rem;
transform: rotate(67deg);
}
.prize-list .prize-item:nth-child(3) {
top: 6.4rem;
left: 10.6rem;
transform: rotate(-250deg);
}
.prize-list .prize-item:nth-child(4) {
top: 9rem;
left: 8.2125rem;
transform: rotate(-210deg);
}
.prize-list .prize-item:nth-child(5) {
top: 9.2125rem;
left: 4.4rem;
transform: rotate(-160deg);
}
.prize-list .prize-item:nth-child(6) {
top: 6.3875rem;
left: 1.9rem;
transform: rotate(-111deg);
}
.prize-list .prize-item:nth-child(7) {
top: 2.8rem;
left: 1.8125rem;
transform: rotate(-69deg);
}
.prize-list .prize-item:nth-child(8) {
top: 0;
left: 4.5rem;
transform: rotate(-20deg);
}
.prize-item {
width: 5.875rem;
height: 9rem;
}
.prize-pic img {
width: 4.0625rem;
height: 2.5rem;
margin-top: 1.5625rem;
}
.prize-count {
font-size: 0.875rem;
}
.prize-type {
font-size: 0.75rem;
}
.main {
position: relative;
width: 100%;
min-height: 14.25rem;
background: rgb(243, 109, 86);
padding-bottom: 1.6875rem;
}
.main-bg {
width: 100%;
height: 6.5625rem;
position: absolute;
top: -3.4375rem;
left: 0;
background: url("../assets/img/luck_bg.png") no-repeat center top;
background-size: 100%;
}
.bg-p {
width: 100%;
height: 2.95rem;
background: rgb(252, 207, 133);
}
.content {
position: absolute;
top: 0.175rem;
left: 0;
background: rgb(243, 109, 86);
width: 100%;
height: 5.1875rem;
font-size: 1.125rem;
color: #ffeb39;
padding-left: 6.75rem;
}
.content div {
text-align: left;
}
.tip {
position: relative;
margin: 2.5rem auto 0;
width: 17.5rem;
border: 1px solid #fbc27f;
}
.tip-title {
position: absolute;
top: -1rem;
left: 50%;
transform: translate(-50%, 0);
font-size: 1rem;
color: #fccc6e;
background: rgb(243, 109, 86);
padding: 0.3125rem 0.625rem;
}
.tip-content {
padding: 1.5625rem 0.625rem;
font-size: 0.875rem;
color: #fff8c5;
line-height: 1.5;
}
.toast-mask {
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.6);
z-index: 10000;
width: 100%;
height: 100%;
}
.toast {
position: fixed;
top: 50%;
left: 50%;
z-index: 20000;
transform: translate(-50%, -50%);
width: 15.4375rem;
background: #fff;
border-radius: 0.3125rem;
padding: 0.3125rem;
background-color: rgb(252, 244, 224);
}
.toast-container {
position: relative;
width: 100%;
height: 100%;
border: 1px dotted #fccc6e;
}
.toast-picture {
position: absolute;
top: -6.5rem;
left: -1.5rem;
width: 18.75rem;
height: 8.5625rem;
}
.toast-pictrue-change {
position: absolute;
top: -1.5rem;
left: -1.375rem;
width: 17.5rem;
height: 3.125rem;
}
.toast-title {
padding: 2.8125rem 0;
font-size: 18px;
color: #fc7939;
text-align: center;
}
.toast-btn {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 0.9375rem;
}
.toast-btn div {
background-image: -moz-linear-gradient(
-18deg,
rgb(242, 148, 85) 0%,
rgb(252, 124, 88) 51%,
rgb(252, 124, 88) 99%
);
background-image: -ms-linear-gradient(
-18deg,
rgb(242, 148, 85) 0%,
rgb(252, 124, 88) 51%,
rgb(252, 124, 88) 99%
);
background-image: -webkit-linear-gradient(
-18deg,
rgb(242, 148, 85) 0%,
rgb(252, 124, 88) 51%,
rgb(252, 124, 88) 99%
);
box-shadow: 0px 4px 0px 0px rgba(174, 34, 5, 0.7);
width: 4.6875rem;
height: 1.875rem;
border-radius: 1.875rem;
text-align: center;
line-height: 1.875rem;
color: #fff;
}
.close {
position: absolute;
top: -0.9375rem;
right: -0.9375rem;
width: 2rem;
height: 2rem;
background: url("../assets/img/close_store.png") no-repeat center top;
background-size: 100%;
}
</style>
好例子网口号：伸出你的我的手 — 分享！
小贴士
感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论