346 lines
8.4 KiB
Plaintext
346 lines
8.4 KiB
Plaintext
<template>
|
||
<view>
|
||
<image
|
||
v-if="data.show && data.pageThatAppears === type && !rbagmodelshow && !openrbagmodelshow"
|
||
:style="{bottom: bottom+'px'}"
|
||
:src="staticUrl + 'home/redBag.png'"
|
||
:ref="'redBag'+data.id" class="redBag" @click="openrbagbtn"></image>
|
||
|
||
<div class="mark" v-if="rbagmodelshow" @touchmove.prevent.stop>
|
||
<div class="mark-wrapper" ref="wrapper">
|
||
<image :src="staticUrl + 'home/redBagClose.png'" mode="widthFix" class="mark-wrapper-img"></image>
|
||
<div class="mark-wrapper-con">
|
||
<div class="mark-wrapper-con-txt">
|
||
<text class="mark-wrapper-title">{{data.titleName}}</text>
|
||
<text class="mark-wrapper-desc">{{data.describeDetails}}</text>
|
||
</div>
|
||
<div class="mark-wrapper-btn" ref="btn" @tap.stop="move">
|
||
<text class="mark-wrapper-btn-txt">立即领取</text>
|
||
</div>
|
||
</div>
|
||
<icon type="cancel" color="#fbd977" size="28" @click="rbagmodelshow = false"/>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mark" v-if="openrbagmodelshow" @touchmove.prevent.stop>
|
||
<div class="mark-wrapper" ref="wrapperOpen">
|
||
<image :src="staticUrl + 'home/redBagOpen.png'" mode="widthFix" class="mark-wrapper-img"></image>
|
||
<div class="mark-wrapper-con" style="top: 400rpx; height: 380rpx;">
|
||
<div class="mark-wrapper-con-txt" v-if="!isTake">
|
||
<text class="mark-wrapper-title">恭喜您获得</text>
|
||
<text class="mark-wrapper-tip">{{data.receiveDetails}}</text>
|
||
</div>
|
||
<div class="mark-wrapper-con-txt" v-else>
|
||
<text class="mark-wrapper-tip">您已领取过专享红包</text>
|
||
</div>
|
||
<div class="mark-wrapper-btn2" ref="btn" @tap.stop="checkMoney">
|
||
<text class="mark-wrapper-btn2-txt">查看我的福利</text>
|
||
</div>
|
||
</div>
|
||
<icon type="cancel" color="#fbd977" size="28" style="margin-top: 50rpx;" @click="close"/>
|
||
</div>
|
||
</div>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { mapState } from "vuex"
|
||
import { sendRequest } from "@/common/http/api.js"
|
||
import url from "@/common/http/url.js"
|
||
import { getUUID } from "@/common/utils/index.js"
|
||
const music = uni.createInnerAudioContext(); //创建播放器对象
|
||
const animation = weex.requireModule('animation');
|
||
export default{
|
||
props: {
|
||
type: {
|
||
type: Number,
|
||
default: 0
|
||
},
|
||
data: {
|
||
type: Object,
|
||
default: {}
|
||
},
|
||
bottom: {
|
||
type: Number,
|
||
default: 100
|
||
}
|
||
},
|
||
computed: {
|
||
...mapState(["userInfo"])
|
||
},
|
||
data(){
|
||
return{
|
||
rbagmodelshow: false,
|
||
openrbagmodelshow: false,
|
||
isTake: false // 是否已领取过了
|
||
}
|
||
},
|
||
mounted() {
|
||
let that = this
|
||
let el = this.$refs["redBag"+this.data.id]
|
||
setInterval(function(){
|
||
that.onState(el)
|
||
}, 800)
|
||
|
||
// 如果需要自动领取
|
||
if (this.data.automaticCollection === 2 && this.data.pageThatAppears === this.type) {
|
||
this.openrbagbtn()
|
||
setTimeout(()=>{
|
||
this.move()
|
||
}, 500)
|
||
}
|
||
},
|
||
methods:{
|
||
// 领取红包动效
|
||
move(){
|
||
let that = this
|
||
let btn = this.$refs.btn
|
||
animation.transition(btn, {
|
||
styles: {
|
||
transform: 'rotateY(360deg)',
|
||
transformOrigin: 'center center'
|
||
},
|
||
duration: 1000, //ms
|
||
timingFunction: 'ease',
|
||
delay: 0 //ms
|
||
}, function(){
|
||
sendRequest("POST", url.cms.receiveRedEnvelopes, {id: that.data.id}).then(res => {
|
||
if (that.data.audioUrl) {
|
||
music.loop = false; //循环播放
|
||
music.src = that.data.audioUrl;
|
||
music.play(); //执行播放
|
||
}
|
||
that.data.show = false
|
||
that.rbagmodelshow = false
|
||
// #ifdef APP-PLUS
|
||
// 如果返回imAccount，并且直推人奖励开启，并且需要提示声音
|
||
if (res.data && that.data.directPushRewardStatus === 1 && that.data.directPushRewardAudioUrl) {
|
||
that.imSendMsg(res.data)
|
||
}
|
||
// #endif
|
||
that.redOpenAnimation()
|
||
}).catch(()=>{
|
||
that.rbagmodelshow = false
|
||
})
|
||
animation.transition(btn, {
|
||
styles: {
|
||
transform: 'rotateY(0)',
|
||
transformOrigin: 'center center'
|
||
},
|
||
duration: 10, //ms
|
||
timingFunction: 'ease',
|
||
delay: 0 //ms
|
||
})
|
||
})
|
||
},
|
||
// 领取红包后显示结果
|
||
redOpenAnimation(){
|
||
let that = this
|
||
that.openrbagmodelshow = true
|
||
setTimeout(()=>{
|
||
let wrapperOpen = that.$refs.wrapperOpen
|
||
animation.transition(wrapperOpen, {
|
||
styles: {
|
||
transform: 'scale(1.2)',
|
||
transformOrigin: 'center center'
|
||
},
|
||
duration: 500, //ms
|
||
timingFunction: 'ease',
|
||
delay: 0 //ms
|
||
}, function(){
|
||
animation.transition(wrapperOpen, {
|
||
styles: {
|
||
transform: 'scale(1)',
|
||
transformOrigin: 'center center'
|
||
},
|
||
duration: 500, //ms
|
||
timingFunction: 'ease',
|
||
delay: 0 //ms
|
||
})
|
||
})
|
||
}, 100)
|
||
},
|
||
// 点击红包展示的动效
|
||
openrbagbtn(){
|
||
let that = this
|
||
if (this.isTake) {
|
||
that.redOpenAnimation()
|
||
} else {
|
||
that.rbagmodelshow = true
|
||
setTimeout(()=>{
|
||
let wrapper = that.$refs.wrapper
|
||
animation.transition(wrapper, {
|
||
styles: {
|
||
transform: 'scale(1.2)',
|
||
transformOrigin: 'center center'
|
||
},
|
||
duration: 500, //ms
|
||
timingFunction: 'ease',
|
||
delay: 0 //ms
|
||
}, function(){
|
||
animation.transition(wrapper, {
|
||
styles: {
|
||
transform: 'scale(1)',
|
||
transformOrigin: 'center center'
|
||
},
|
||
duration: 500, //ms
|
||
timingFunction: 'ease',
|
||
delay: 0 //ms
|
||
})
|
||
})
|
||
}, 100)
|
||
}
|
||
},
|
||
onState(el){
|
||
animation.transition(el, {
|
||
styles: {
|
||
transform: 'rotate(-5deg)',
|
||
transformOrigin: 'center center'
|
||
},
|
||
duration: 400, //ms
|
||
timingFunction: 'ease',
|
||
delay: 0 //ms
|
||
}, function(){
|
||
animation.transition(el, {
|
||
styles: {
|
||
transform: 'rotate(5deg)',
|
||
transformOrigin: 'center center'
|
||
},
|
||
duration: 400, //ms
|
||
timingFunction: 'ease',
|
||
delay: 0 //ms
|
||
})
|
||
})
|
||
},
|
||
close(){
|
||
this.openrbagmodelshow = false
|
||
this.isTake = true
|
||
},
|
||
checkMoney(){
|
||
let path = ""
|
||
if (this.data.welfareType === "1") {
|
||
path = "/pages/user/cardBag"
|
||
} else {
|
||
path = "/pages/user/wallet/index"
|
||
}
|
||
uni.navigateTo({
|
||
url: path
|
||
})
|
||
},
|
||
imSendMsg(toImAccount){
|
||
sendRequest("GET", url.im.createConversation, {toImAccount: toImAccount, type: 1}).then(doc =>{
|
||
let conversationId = doc.data.id
|
||
let uid = getUUID() + this.userInfo.recommendCode
|
||
let params = {
|
||
conversationId: conversationId,
|
||
id: uid,
|
||
uid: uid,
|
||
from: this.userInfo.imAccount,
|
||
to: toImAccount,
|
||
cmd: 11,
|
||
createTime: new Date().getTime(),
|
||
chatType: 2,
|
||
msgType: 77,
|
||
content: JSON.stringify({
|
||
conversationId: conversationId,
|
||
type: 1,
|
||
musicUrl: this.data.directPushRewardAudioUrl
|
||
})
|
||
};
|
||
getApp().globalData.socket.sendSocketMessage(params)
|
||
})
|
||
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.redBag{
|
||
width: 133rpx;
|
||
height: 85rpx;
|
||
position: fixed;
|
||
right: 0;
|
||
}
|
||
.mark{
|
||
position: fixed;
|
||
left: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
right: 0;
|
||
background-color: rgba(0,0,0,0.5);
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.mark-wrapper{
|
||
width: 600rpx;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.mark-wrapper-img{
|
||
width: 660rpx;
|
||
margin-left: 0rpx;
|
||
}
|
||
.mark-wrapper-con{
|
||
height: 500rpx;
|
||
position: absolute;
|
||
left: 0;
|
||
top: 150rpx;
|
||
right: 0;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
}
|
||
.mark-wrapper-con-txt{
|
||
flex: 1;
|
||
}
|
||
.mark-wrapper-title{
|
||
width: 500rpx;
|
||
lines: 1;
|
||
font-size: 60rpx;
|
||
color: #FFFFFF;
|
||
text-align: center;
|
||
}
|
||
.mark-wrapper-desc{
|
||
width: 500rpx;
|
||
font-size: 34rpx;
|
||
color: #FFFFFF;
|
||
text-align: center;
|
||
margin-top: 20rpx;
|
||
}
|
||
.mark-wrapper-tip{
|
||
width: 500rpx;
|
||
text-align: center;
|
||
font-size:50upx;
|
||
font-weight: bold;
|
||
color: #ffcc1a;
|
||
margin-top: 30rpx;
|
||
}
|
||
.mark-wrapper-btn{
|
||
box-shadow:inset 0 0 0 10upx #fff06e,0 10upx 0 0 #f69614;
|
||
background-image:linear-gradient(to bottom, #fff6a5,#ffcd1b);
|
||
width: 160upx;
|
||
height:160upx;
|
||
border-radius: 100rpx;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.mark-wrapper-btn-txt{
|
||
color: white;
|
||
font-size: 32rpx;
|
||
}
|
||
.mark-wrapper-btn2{
|
||
width: 300upx;
|
||
height:60upx;
|
||
line-height: 60upx;
|
||
border-radius: 30upx;
|
||
box-shadow:inset 0 0 0 10upx #fff06e,0 10upx 0 0 #f69614;
|
||
background-image:linear-gradient(to bottom, #fff6a5,#ffcd1b);
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.mark-wrapper-btn2-txt{
|
||
font-size:26upx;
|
||
color:#ff2400;
|
||
}
|
||
</style> |