165 lines
3.7 KiB
Vue
165 lines
3.7 KiB
Vue
<template>
|
||
<view class="content">
|
||
|
||
<u-navbar title="抽奖" back-icon-color="#fff" :background="{background:'transparent'}" immersive
|
||
:border-bottom="false" title-color="#fff"></u-navbar>
|
||
<view class="sm">
|
||
<HM-slotMachine ref="HMslotMachine"></HM-slotMachine>
|
||
</view>
|
||
<view class="start" @tap="start">
|
||
<text>开 始</text>
|
||
</view>
|
||
|
||
<ling-qu ref="refLingqu"></ling-qu>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import lingQu from './components/pop-ling-qu.vue'
|
||
|
||
function isAllElementssame(array, key) {
|
||
for (let index = 0; index < array.length; index++) {
|
||
if (array[index][key] != array[0][key]) {
|
||
return false
|
||
}
|
||
|
||
}
|
||
return true;
|
||
}
|
||
|
||
export default {
|
||
components: {
|
||
lingQu
|
||
},
|
||
data() {
|
||
return {
|
||
prizeList: [{
|
||
name: 'iPhone13',
|
||
value: 'iPhone',
|
||
img: require('@/other/static/1.png')
|
||
},
|
||
{
|
||
name: 'airPods3',
|
||
value: 'airPods',
|
||
img: require('@/other/static/2.png')
|
||
},
|
||
{
|
||
name: '行李箱',
|
||
value: 'luggage',
|
||
img: require('@/other/static/3.png')
|
||
},
|
||
{
|
||
name: '风筒',
|
||
value: 'dryer',
|
||
img: require('@/other/static/4.png')
|
||
},
|
||
{
|
||
name: '平行车',
|
||
value: 'balanceCar',
|
||
img: require('@/other/static/5.png')
|
||
},
|
||
{
|
||
name: 'iPad5',
|
||
value: 'iPad',
|
||
img: require('@/other/static/6.png')
|
||
}
|
||
]
|
||
}
|
||
},
|
||
onLoad() {
|
||
|
||
},
|
||
onReady() {
|
||
// init(options)初始化抽奖组件
|
||
// options参数说明
|
||
// prizeList 奖品列表，结构看上面
|
||
// defaultResults 默认显示奖品 初始化完成默认显示的奖品
|
||
// duration 总抽奖时长 毫秒
|
||
// direction 滚动方向 up|down
|
||
this.$refs.HMslotMachine.init({
|
||
prizeList: this.prizeList,
|
||
defaultResults: ['iPhone', 'iPhone', 'iPhone'],
|
||
duration: 4000,
|
||
direction: 'up'
|
||
})
|
||
},
|
||
methods: {
|
||
showLingPop(data) {
|
||
this.$refs.refLingqu.open(data)
|
||
},
|
||
start() {
|
||
// roll(options)开始摇奖
|
||
// 参数说明
|
||
// results 开奖结果，结构[value,value,value] value为奖品数据的value值
|
||
// success 开奖回调 e={results} results为开奖结果数据
|
||
const that = this;
|
||
this.$refs.HMslotMachine.roll({
|
||
results: this.getResults(),
|
||
success: (e) => {
|
||
console.log("success e: ", e);
|
||
const item = isAllElementssame(e.results, 'value') ? e.results[0] : undefined
|
||
if (item) {
|
||
that.showLingPop({...item,type:3})
|
||
} else {
|
||
uni.showToast({
|
||
title: '很遗憾，未中奖',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
|
||
}
|
||
})
|
||
},
|
||
getResults() {
|
||
// 生成随机的抽奖结果 实际应用应该ajax请求后台，让后台返回开奖结果
|
||
let max = this.prizeList.length - 1;
|
||
let arr = [Math.floor(Math.random() * (max - 1 + 1) + 1), Math.floor(Math.random() * (max - 1 + 1) + 1),
|
||
Math.floor(Math.random() * (max - 1 + 1) + 1)
|
||
];
|
||
return [
|
||
this.prizeList[arr[0]].value,
|
||
this.prizeList[arr[1]].value,
|
||
this.prizeList[arr[2]].value
|
||
]
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background-image: linear-gradient(to top, #8F1E70, #51279A);
|
||
min-height: calc(100vh - var(--window-bottom) - var(--window-top));
|
||
}
|
||
|
||
.content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
.sm {
|
||
margin-top: 200rpx;
|
||
}
|
||
|
||
.start {
|
||
width: 70%;
|
||
height: 80rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background-color: #f29c11;
|
||
border-radius: 40rpx;
|
||
margin-top: 30rpx;
|
||
box-shadow: 0 1px 2px rgba($color: #51279A, $alpha: 1);
|
||
border-bottom: solid 3px #8d5805;
|
||
box-sizing: border-box;
|
||
|
||
text {
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
color: #b51c06;
|
||
text-shadow: 1px 1px 1px #f2e811;
|
||
}
|
||
}
|
||
}
|
||
</style> |