增加other分包页面
我的页面里增加跳转other分包跳转（仅在ios不是浏览器审核时展示）
This commit is contained in:
163
other/slotMachine/components/pop-ling-qu.vue
Normal file
163
other/slotMachine/components/pop-ling-qu.vue
Normal file
@@ -0,0 +1,163 @@
|
||||
<template>
|
||||
<view>
|
||||
<u-popup v-model="show" mode="center" @close="close">
|
||||
<view class="bg">
|
||||
<view class="title">恭喜您获得</view>
|
||||
<view class="goods">
|
||||
<template v-if="result&&result.type==3">
|
||||
<view class="u-flex u-col-center u-row-center">
|
||||
<image style="height: 100px;" :src="result.img" mode="heightFix"></image>
|
||||
</view>
|
||||
<view class="u-flex u-row-center u-m-t-30">
|
||||
<view class="type">{{result.name}}</view>
|
||||
</view>
|
||||
</template>
|
||||
<template v-if="result&&result.type==2">
|
||||
<view class="u-flex color-money u-col-center u-row-center">
|
||||
<view class="money">{{result.number}}</view>
|
||||
<view class="font-bold " style="margin-top: 20rpx;font-size: 36rpx;">元</view>
|
||||
</view>
|
||||
<view class="u-flex u-m-t-24 u-row-center">
|
||||
<view class="type">现金红包</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
</view>
|
||||
|
||||
<view class="u-flex close u-row-center">
|
||||
<u-icon name="close-circle" :size="54" @click="close" color="#fff"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
result: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
open(data) {
|
||||
console.log(data);
|
||||
this.result = data
|
||||
this.show = true
|
||||
},
|
||||
close() {
|
||||
console.log('抽奖弹窗关闭');
|
||||
this.show = false
|
||||
// if(!this.result){
|
||||
// return
|
||||
// }
|
||||
// const {
|
||||
// orderId,
|
||||
// id
|
||||
// } = this.result
|
||||
// this.$Request.postJson('app/discSpinning/receive', this.result).then(res => {
|
||||
// this.result = ''
|
||||
// console.log(res)
|
||||
// if (res.code == 0) {
|
||||
// console.log('抽奖领取成功');
|
||||
// const key=res.data==0?'isBindAliPay':undefined
|
||||
// this.$emit('close',key)
|
||||
// if(key&&key=='isBindAliPay'){
|
||||
// uni.navigateTo({
|
||||
// url:'/me/invite/zhifubao'
|
||||
// })
|
||||
// }
|
||||
// } else {
|
||||
// }
|
||||
// })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .u-mode-center-box {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.color-money {
|
||||
color: #E42F00;
|
||||
}
|
||||
|
||||
.money {
|
||||
font-weight: 700;
|
||||
font-size: 96rpx;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.bg {
|
||||
width: 628rpx;
|
||||
height: 770rpx;
|
||||
margin-right: 10rpx;
|
||||
background-color: transparent;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-size: cover;
|
||||
background-image: url("~static/images/zhuanpan/gift.png");
|
||||
position: relative;
|
||||
|
||||
@media (-webkit-min-device-pixel-ratio: 2),
|
||||
(min-device-pixel-ratio: 2) {
|
||||
background-image: url("~static/images/zhuanpan/gift@2x.png");
|
||||
}
|
||||
|
||||
.title {
|
||||
position: absolute;
|
||||
top: 218rpx;
|
||||
text-align: center;
|
||||
left: 0;
|
||||
right: 0;
|
||||
font-weight: 700;
|
||||
font-size: 60rpx;
|
||||
color: #AF6920;
|
||||
letter-spacing: 4rpx;
|
||||
}
|
||||
|
||||
.goods {
|
||||
position: absolute;
|
||||
top: 336rpx;
|
||||
text-align: center;
|
||||
left: 0;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.type {
|
||||
padding: 6rpx 28rpx;
|
||||
border-radius: 100rpx;
|
||||
background: #E25B41;
|
||||
font-size: 28rpx;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
}
|
||||
.close{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
.btn-box {
|
||||
position: absolute;
|
||||
top: 574rpx;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
.btn {
|
||||
padding: 10rpx 60rpx 10rpx 64rpx;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
font-size: 44rpx;
|
||||
color: #AF6920;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
@@ -1,33 +1,73 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
|
||||
<u-navbar title="抽奖" back-icon-color="#fff" :background="{background:'transparent'}" immersive :border-bottom="false"
|
||||
title-color="#fff"></u-navbar>
|
||||
|
||||
<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')}
|
||||
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)初始化抽奖组件
|
||||
@@ -37,30 +77,45 @@
|
||||
// duration 总抽奖时长 毫秒
|
||||
// direction 滚动方向 up|down
|
||||
this.$refs.HMslotMachine.init({
|
||||
prizeList:this.prizeList,
|
||||
defaultResults:['iPhone','iPhone','iPhone'],
|
||||
duration:4000,
|
||||
direction:'up'
|
||||
prizeList: this.prizeList,
|
||||
defaultResults: ['iPhone', 'iPhone', 'iPhone'],
|
||||
duration: 4000,
|
||||
direction: 'up'
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
start(){
|
||||
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);
|
||||
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(){
|
||||
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)];
|
||||
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,
|
||||
@@ -71,19 +126,22 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page{
|
||||
background-image: linear-gradient(to top,#8F1E70, #51279A);
|
||||
min-height: calc(100vh - var(--window-bottom) - var(--window-top));
|
||||
}
|
||||
<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{
|
||||
|
||||
.sm {
|
||||
margin-top: 200rpx;
|
||||
}
|
||||
.start{
|
||||
|
||||
.start {
|
||||
width: 70%;
|
||||
height: 80rpx;
|
||||
display: flex;
|
||||
@@ -95,7 +153,8 @@ page{
|
||||
box-shadow: 0 1px 2px rgba($color: #51279A, $alpha: 1);
|
||||
border-bottom: solid 3px #8d5805;
|
||||
box-sizing: border-box;
|
||||
text{
|
||||
|
||||
text {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: #b51c06;
|
||||
@@ -103,6 +162,4 @@ page{
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
</style>
|
||||
Reference in New Issue
Block a user