是由好几张背景图构成的
- 样式
<div class="one_big_header"
<div id="app">
<!-- //时间 -->
<div class="activity-time">活动时间:{{activitiesData.activitiesStartTime|filterTime}}-{{activitiesData.activitiesEndTime|filterTime}}</div>
<div class="activity-count">剩余{{count}}次机会</div>
<!-- 转盘 -->
<div class="wheel-wrapper">
<div class="wheel-pointer" @click="onClickRotate"></div>
<div
class="wheel-bg"
:class="{ freeze: freeze }"
:style="`transform: rotate(${wheelDeg}deg)`"
>
<div class="prize-list">
<div
class="prize-item-wrapper"
v-for="(item, index) in activitiesData.activitiesPrizeList"
:key="index"
>
<div
class="prize-item"
:style="`transform: rotate(${
(360 / 8) * index
}deg)`"
>
<div class="prize-name" :style="item.isPrize?'color:#a3873c':'color:#ea6a5d'">
{{ item.name }}
</div>
<div class="prize-icon">
<img :src="item.picture" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
- 点击抽奖
onClickRotate () {
const that = this
if (that.activitiesData.activitiesPrizeList.length != 8) {
Toast('奖品还没有创建完成')
return
}
if (!that.isNormal) {
Toast('活动尚未开始')
return
}
if (!wxUser.getActivitiesToken()) { // 判定活动token
that.showPhoneDialog = true
return
}
if (that.rolling) {
return
}
if (!that.count) {
Toast('抽奖次数已经用完')
return
}
that.rolling = true
const accountId = that.$route.query.accountId
const activitiesId = that.$route.query.activitiesId
luckDraw(accountId, activitiesId).then(
(response) => {
const resultId = response.data.id
const resultIndex = that.activitiesData.activitiesPrizeList.findIndex(item => item.id === resultId)
if (resultIndex == -1) {
Toast('中奖信息有误')
that.rolling = false
} else {
const result = response.data
that.roll(result, resultIndex)
}
},
(error) => {
that.rolling = false
}
)
},
roll (result, resultIndex) {
const that = this
const { wheelDeg } = this
that.wheelDeg =
wheelDeg -
(wheelDeg % 360) +
6 * 360 +
(360 - (360 / 8) * resultIndex)
setTimeout(() => {
that.rolling = false
that.awardStr = result.name
if (result.isWinning == 'NOT_WON') { // 谢谢参与
that.showThanksDialog = true
} else { // 中奖
that.showAwardDialog = true
}
that.getCount()
}, 4500)
},
- 样式
<style lang="scss" scoped>
.one_big_header {
min-height: 100% ;
height: auto !important;
background-color: #f4f4f4;
text-align: center;
font-size: 14px;
background: url('../../../assets/prize/bg-1.png') no-repeat;
background-size: 100% auto;
margin: auto;
width: 7.5rem;
padding-top: 2.5rem;
overflow: visible !important;
.activity-time{
color: #fff;
text-align: center;
background: url('../../../assets/prize/activity-bg-1.png') no-repeat;
background-size:4.24rem 0.64rem;
margin: auto;
width: 4.24rem;
height: 0.64rem;
font-size: 0.2rem;
line-height: 0.64rem;
}
.activity-count{
margin: 0.64rem 0.8rem 0.68rem;
color: #fff;
text-align: center;
font-size: 12px;
line-height: 0.36rem;
}
.free-title {
color: #333;
font-weight: 500;
margin-bottom: 0.5rem;
}
.explain-box {
background: url('../../../assets/prize/bottom-title-bg.png') no-repeat;
background-size: 2.87rem 0.27rem;
margin: auto;
width: 2.87rem;
height: 0.27rem;
margin-top: 3rem;
}
.explain-image-box{
background: url('../../../assets/prize/bottom-box.png') no-repeat;
background-size: 7rem 100%;
width: 7rem;
margin: 0.3rem auto 0 auto;
padding: 0.1rem;
}
.explain-detail {
margin: 0.2rem;
text-align: left;
color: #999;
background: #fff;
padding: 0.4rem;
border-radius: 5px;
word-break: break-word;
}
.my-prize {
position: fixed;
bottom: 2rem;
right: -0.6rem;
width: 2.16rem;
height: 2.26rem;
background-size: 2.16rem 2.26rem;
background-image: url('../../../assets/prize/my-prize.png');
}
}
.wheel-wrapper {
width: 5.43rem;
height: 5.43rem;
position: relative;
margin: 0 auto 1rem;
}
.wheel-pointer {
background-image: url('../../../assets/prize/point-1.png');
width: 2.12rem;
height: 2.22rem;
background-size:2.12rem 2.22rem;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 10;
cursor: pointer;
}
.wheel-bg {
width: 100%;
height: 100%;
overflow: hidden;
transition: transform 4s ease-in-out;
background-image: url('../../../assets/prize/zhuan.png');
width: 5.43rem;
height: 5.43rem;
background-size:5.43rem 5.43rem ;
&.freeze {
transition: none;
background: red;
}
}
.prize-list {
width: 100%;
height: 100%;
position: relative;
text-align: center;
}
.prize-item-wrapper {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 2.716rem;
height: 2.716rem;
}
.prize-item {
width: 100%;
height: 100%;
transform-origin: bottom;
.prize-name {
padding: 16px 0;
font-size: 10px;
font-weight: 600;
}
.prize-icon {
img{
height: 0.5rem;
}
}
}
</style>