You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
112 lines
2.3 KiB
112 lines
2.3 KiB
<template>
|
|
<!-- 抽奖结果弹窗 -->
|
|
<view class="aleart flex-col flex-center" v-if="aleartStatus" @touchmove.stop.prevent>
|
|
<image :src="alData.image" class="w-180 h-180"></image>
|
|
<view class="fs-34 font-red fw-500 lh-48rpx mt-24"
|
|
:class="theme ? 'font-num' : 'font-red'"
|
|
>{{alData.type > 1 ? '恭喜你获得' : alData.name}}</view>
|
|
<view class="fs-26 text--w111-333 lh-36rpx mt-24">{{aleartData.msg}}</view>
|
|
<view class="btn flex-center fs-28 text--w111-fff mt-32" @tap="posterImageClose"
|
|
:class="theme ? 'bg-gradient1' : 'bg-red-g'"
|
|
>{{alData.type > 1 ? '立即领取' : '我知道了'}}</view>
|
|
<text class="close iconfont icon-ic_close1" @click="posterImageClose"></text>
|
|
<slot name="bottom"></slot>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
aleartData: {}
|
|
}
|
|
},
|
|
props: {
|
|
aleartType: {
|
|
type: Number,
|
|
default:0
|
|
},
|
|
alData: {
|
|
type: Object,
|
|
default:()=>{}
|
|
},
|
|
aleartStatus: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
theme:{
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
watch: {
|
|
aleartType(type) {
|
|
if (type === 1) {
|
|
this.aleartData = {
|
|
title: '暂无抽奖资格',
|
|
msg: `1、`,
|
|
btn: '我知道了'
|
|
}
|
|
} else if (type === 2) {
|
|
this.aleartData = {
|
|
title: '抽奖结果',
|
|
img: this.alData.image,
|
|
msg: this.alData.prompt,
|
|
btn: '好的',
|
|
type: this.alData.type
|
|
}
|
|
}
|
|
},
|
|
aleartStatus(status) {
|
|
if (!status) {
|
|
this.aleartData = {}
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
//隐藏弹窗
|
|
posterImageClose(type) {
|
|
this.$emit("close", false)
|
|
},
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.aleart {
|
|
width: 480rpx;
|
|
height: 544rpx;
|
|
position: fixed;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%,-50%);
|
|
z-index: 9999;
|
|
background-color: #fff;
|
|
border-radius: 48rpx;
|
|
background-image:url('../../static/alert_modal_bg.png');
|
|
background-size:100%;
|
|
background-repeat: no-repeat;
|
|
}
|
|
.aleart .close{
|
|
position: absolute;
|
|
left:50%;
|
|
bottom:-100rpx;
|
|
transform: translateX(-50%);
|
|
color: #fff;
|
|
font-size:50rpx;
|
|
|
|
}
|
|
.font-red{
|
|
color: #e93323;
|
|
}
|
|
.btn{
|
|
width: 280rpx;
|
|
height: 80rpx;
|
|
border-radius: 50rpx;
|
|
color: #fff;
|
|
}
|
|
.bg-red-g{
|
|
background: linear-gradient(90deg, #FF7931 0%, #E93323 100%);
|
|
}
|
|
</style>
|
|
|