573 lines
12 KiB
Vue
573 lines
12 KiB
Vue
<template>
|
||
<view>
|
||
<!-- 左侧红包 -->
|
||
<view class="r_bag" v-if="data.show && data.pageThatAppears === type">
|
||
<image
|
||
class="bag1 animated tada infinite"
|
||
:style="{bottom: bottom+'px'}"
|
||
v-if="!rbagmodelshow && !openrbagmodelshow"
|
||
:src="staticUrl + 'home/redBag.png'" mode="" @click="openrbagbtn()"></image>
|
||
</view>
|
||
<!-- 红包封面 -->
|
||
<view class="rbag_model" v-if="rbagmodelshow" @touchmove.prevent.stop>
|
||
<view class="close animated rubberBand">
|
||
<image class="redBag" :src="staticUrl + 'home/redBagClose.png'" mode="widthFix"></image>
|
||
<view class="redBag-word">
|
||
<view class="subTit">{{data.titleName}}</view>
|
||
<view class="tips">{{data.describeDetails}}</view>
|
||
</view>
|
||
<button class='getMoney' type='primary' :animation="openbrnanimation" hover-class="btnDown" withCredentials="true" lang="zh_CN" @click="imageanimation">
|
||
立即领取
|
||
</button>
|
||
<view class="hide_btn" @click.stop="hidebtn">
|
||
<icon type="cancel" color="#fbd977" size="28" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 打开红包 -->
|
||
<view class="open_rbag_model" v-if="openrbagmodelshow" @touchmove.prevent.stop>
|
||
<view class="close animated rubberBand">
|
||
<image class="redBag" :src="staticUrl + 'home/redBagOpen.png'" mode="widthFix"></image>
|
||
<view v-if="!isTake">
|
||
<view class="youhuiTip">
|
||
<text>{{data.receiveDetails}}</text>
|
||
<!-- <view class="youhuiTit">专享红包</view> -->
|
||
</view>
|
||
<view class="redBag-word">
|
||
<view class="subTit">恭喜您获得</view>
|
||
</view>
|
||
<button class='getYouhui' type='primary' lang="zh_CN" @click="checkMoney" hover-class="btnDown">
|
||
查看我的福利
|
||
</button>
|
||
</view>
|
||
<view v-else class="youhuiTip">
|
||
<view class="subTit">您已领取过专享红包</view>
|
||
<button class='getYouhui old' type='primary' lang="zh_CN" @click="checkMoney" hover-class="btnDown">
|
||
查看我的福利
|
||
</button>
|
||
</view>
|
||
<view class="hide_btn" @click.stop="hidebtnALL">
|
||
<icon type="cancel" color="#fbd977" size="28" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { mapState } from "vuex"
|
||
import url from "@/common/http/url.js"
|
||
import { getUUID } from "@/common/utils/index.js"
|
||
const music = uni.createInnerAudioContext(); //创建播放器对象
|
||
export default{
|
||
props: {
|
||
type: {
|
||
type: Number,
|
||
default: 0
|
||
},
|
||
data: {
|
||
type: Object,
|
||
default: {}
|
||
},
|
||
bottom: {
|
||
type: Number,
|
||
default: 100
|
||
}
|
||
},
|
||
computed: {
|
||
...mapState(["userInfo"])
|
||
},
|
||
data(){
|
||
return{
|
||
staticUrl: this.$staticUrl,
|
||
rbagmodelshow: false,
|
||
openrbagmodelshow: false,
|
||
isTake: false, // 是否已领取过了
|
||
openbrnanimation: {}
|
||
}
|
||
},
|
||
mounted() {
|
||
if (this.data.automaticCollection === 2 && this.data.pageThatAppears === this.type) {
|
||
this.openrbagbtn()
|
||
setTimeout(()=>{
|
||
this.imageanimation()
|
||
}, 500)
|
||
}
|
||
},
|
||
methods:{
|
||
imageanimation: function() {
|
||
var that = this;
|
||
var next = true;
|
||
var animation = uni.createAnimation({
|
||
duration: 1000,
|
||
timingFunction: 'ease',
|
||
})
|
||
this.$http("POST", url.cms.receiveRedEnvelopes, {id: this.data.id}).then(res =>{
|
||
that.openbrnanimation = animation;
|
||
animation.rotateY(360).step();
|
||
if (this.data.audioUrl) {
|
||
music.loop = false; //循环播放
|
||
music.src = this.data.audioUrl;
|
||
music.play(); //执行播放
|
||
}
|
||
setTimeout(function() {
|
||
that.openbrnanimation = animation.export()
|
||
that.rbagmodelshow = false
|
||
that.openrbagmodelshow = true
|
||
that.data.show = false
|
||
// #ifdef APP-PLUS
|
||
// 如果返回imAccount，并且直推人奖励开启，并且需要提示声音
|
||
if (res.data && that.data.directPushRewardStatus === 1 && that.data.directPushRewardAudioUrl) {
|
||
that.imSendMsg(res.data)
|
||
}
|
||
// #endif
|
||
}, 1100)
|
||
}).catch(err=>{
|
||
console.log(err)
|
||
this.rbagmodelshow = false
|
||
})
|
||
},
|
||
openrbagbtn(){
|
||
if (this.isTake) {
|
||
this.openrbagmodelshow = true
|
||
} else {
|
||
this.rbagmodelshow = true
|
||
}
|
||
},
|
||
hidebtn(){
|
||
this.rbagmodelshow = false
|
||
},
|
||
hidebtnALL(){
|
||
this.openrbagmodelshow = false
|
||
this.isTake = true
|
||
},
|
||
checkMoney(){
|
||
if (this.data.welfareType === "1") {
|
||
this.$navigateTo("/pages/user/cardBag")
|
||
} else {
|
||
this.$navigateTo("/pages/user/wallet/index")
|
||
}
|
||
},
|
||
imSendMsg(toImAccount){
|
||
this.$http("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 lang="scss" scoped>
|
||
.rbag_model .close,.open_rbag_model .close{
|
||
position: fixed;
|
||
top:50%;
|
||
left:0%;
|
||
width:750upx;
|
||
transform: translate(-50%,-50%);
|
||
image{
|
||
width:100%;
|
||
}
|
||
.redBag{
|
||
width:600upx;
|
||
z-index:9;
|
||
position: absolute;
|
||
top:50%;
|
||
left:50%;
|
||
transform: translate(-50%,-50%);
|
||
}
|
||
.openImg{
|
||
z-index:99;
|
||
position: absolute;
|
||
top: 180upx;
|
||
left: 0;
|
||
right: 0;
|
||
width: 140upx;
|
||
height: 140upx;
|
||
margin: 0 auto;
|
||
}
|
||
.redBag-word{
|
||
z-index:99;
|
||
position: absolute;
|
||
// top: 340upx;
|
||
top: -180upx;
|
||
left: 0;
|
||
right: 0;
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
text-align: center;
|
||
color:#fff;
|
||
.subTit{
|
||
font-size:70upx;
|
||
line-height: 100upx;
|
||
font-weight: bold;
|
||
}
|
||
.tips{
|
||
width: 60%;
|
||
}
|
||
}
|
||
.getMoney{
|
||
z-index:99;
|
||
position: absolute;
|
||
// top: 520upx;
|
||
left: 0;
|
||
right: 0;
|
||
// width: 400upx;
|
||
// height:80upx;
|
||
// line-height: 80upx;
|
||
// border-radius: 40upx;
|
||
// color:#af8b00;
|
||
// line-height: 80upx;
|
||
top:80upx;
|
||
width: 160upx;
|
||
height:160upx;
|
||
line-height: 50upx;
|
||
vertical-align: middle;
|
||
font-weight:bold;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size:40upx;
|
||
border-radius: 50%;
|
||
box-shadow:inset 0 0 0 10upx #fff06e,0 10upx 0 0 #f69614;
|
||
margin: 0 auto;
|
||
background:linear-gradient(to bottom, #fff6a5,#ffcd1b);
|
||
color:#ff2400;
|
||
}
|
||
.hide_btn{
|
||
// margin-top:200upx;
|
||
z-index:99;
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
top:360upx;
|
||
text-align: center;
|
||
}
|
||
button.btnDown{
|
||
background:#ebcc3d;
|
||
color:#c19a1e;
|
||
}
|
||
}
|
||
.open_rbag_model .close{
|
||
.openImg{
|
||
top: 300upx;
|
||
}
|
||
.redBag-word{
|
||
// top: 420upx;
|
||
top: -20upx;
|
||
}
|
||
.getYouhui{
|
||
z-index:99;
|
||
position: absolute;
|
||
// top: 630upx;
|
||
top: 280upx;
|
||
left: 0;
|
||
right: 0;
|
||
width: 300upx;
|
||
height:60upx;
|
||
line-height: 60upx;
|
||
border-radius: 30upx;
|
||
text-align: center;
|
||
margin: 0 auto;
|
||
font-size:26upx;
|
||
box-shadow:inset 0 0 0 10upx #fff06e,0 10upx 0 0 #f69614;
|
||
background:linear-gradient(to bottom, #fff6a5,#ffcd1b);
|
||
color:#ff2400;
|
||
}
|
||
.getYouhui.old{
|
||
top:120upx;
|
||
}
|
||
.youhuiTip{
|
||
z-index:99;
|
||
position: absolute;
|
||
top: 100upx;
|
||
left: 0;
|
||
right: 0;
|
||
width: 100%;
|
||
text-align: center;
|
||
color:#fff06e;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
text{
|
||
width: 60%;
|
||
font-size:50upx;
|
||
font-weight: bold;
|
||
color: #ffcc1a;
|
||
}
|
||
}
|
||
.hide_btn{
|
||
z-index:99;
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
top:420upx;
|
||
text-align: center;
|
||
}
|
||
}
|
||
.zaiui-modal-box {
|
||
position: fixed;
|
||
width:100vw;
|
||
height:100vh;
|
||
opacity: 0;
|
||
top: inherit;
|
||
left: inherit;
|
||
right: inherit;
|
||
bottom: inherit;
|
||
z-index: 99999999;
|
||
text-align: center;
|
||
background: rgba(0, 0, 0, 0.6);
|
||
transition: all 0.3s;
|
||
pointer-events: none;
|
||
&::before {
|
||
content: "\200B";
|
||
display: inline-block;
|
||
height: 100%;
|
||
vertical-align: middle;
|
||
}
|
||
.dialog {
|
||
position: relative;
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
width: 618.18rpx;
|
||
position: relative;
|
||
.img {
|
||
width: 100%;
|
||
border-radius: 3%;
|
||
}
|
||
.close {
|
||
color: #dadada;
|
||
top: 18.18rpx;
|
||
position: relative;
|
||
font-size: 54.54rpx;
|
||
}
|
||
.bottom{
|
||
background:#FDEB03;
|
||
color:#D82817;
|
||
font-weight:bold;
|
||
width:400upx;
|
||
border-radius: 100upx;
|
||
position: absolute;
|
||
bottom:80upx;
|
||
height:100upx;
|
||
line-height: 100upx;
|
||
left:50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
}
|
||
}
|
||
.zaiui-modal-box.show {
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
opacity: 1;
|
||
pointer-events: auto;
|
||
}
|
||
.r_bag {
|
||
.bag1 {
|
||
position: fixed;
|
||
right: -30upx;
|
||
bottom: 200upx;
|
||
width: 130upx;
|
||
height: 85upx;
|
||
z-index: 99;
|
||
}
|
||
}
|
||
|
||
// 红包封面
|
||
.rbag_model {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100vh;
|
||
background-color: rgba(0,0,0,0.3);
|
||
z-index: 1000;
|
||
.rbag_con {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
width: 80%;
|
||
height: 840upx;
|
||
background-color: #da4d44;
|
||
margin: auto;
|
||
border-radius: 14upx;
|
||
box-shadow: 0upx 0upx 10upx rgba(0,0,0,0.2);
|
||
.rbag_top {
|
||
position: absolute;
|
||
left: -20%;
|
||
top: 0;
|
||
width: 140%;
|
||
height: 540upx;
|
||
background-color: #e0534a;
|
||
border-radius: 0 0 50% 50%;
|
||
box-shadow: 0 0 14upx rgba(0,0,0,0.4);
|
||
z-index: 1001;
|
||
.rbag_top_info {
|
||
margin-top: 60upx;
|
||
.rbag_logo {
|
||
width: 160upx;
|
||
height: 160upx;
|
||
border-radius: 50%;
|
||
display: block;
|
||
margin: 0 auto;
|
||
overflow: hidden;
|
||
}
|
||
.app_name {
|
||
font-size: 38upx;
|
||
color: #f6ac96;
|
||
text-align: center;
|
||
margin-top: 18upx;
|
||
letter-spacing: 1upx;
|
||
}
|
||
.rbag_tips {
|
||
font-size: 50upx;
|
||
color: #edddd3;
|
||
text-align: center;
|
||
margin-top: 34upx;
|
||
letter-spacing: 1upx;
|
||
}
|
||
}
|
||
}
|
||
.open_rbag_btn {
|
||
position: absolute;
|
||
top: 450upx;
|
||
left: 0;
|
||
right: 0;
|
||
width: 180upx;
|
||
height: 180upx;
|
||
line-height: 180upx;
|
||
border-radius: 50%;
|
||
margin: 0 auto;
|
||
text-align: center;
|
||
background-color: #ffd287;
|
||
font-size: 55upx;
|
||
color: #fef5e8;
|
||
box-shadow: 2upx 2upx 6upx rgba(0,0,0,0.2);
|
||
z-index: 1002;
|
||
}
|
||
.hide_btn {
|
||
position: absolute;
|
||
bottom: -110upx;
|
||
left: 0;
|
||
right: 0;
|
||
width: 80upx;
|
||
height: 80upx;
|
||
line-height: 80upx;
|
||
text-align: center;
|
||
margin: 0 auto;
|
||
}
|
||
}
|
||
.hidden {
|
||
overflow: hidden;
|
||
}
|
||
}
|
||
|
||
// 打开红包
|
||
.open_rbag_model {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100vh;
|
||
background-color: rgba(0,0,0,0.3);
|
||
z-index: 1000;
|
||
.rbag_conbg {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
width: 80%;
|
||
height: 840upx;
|
||
margin: auto;
|
||
z-index: 1001;
|
||
}
|
||
.open_rbag_con {
|
||
z-index: 1002;
|
||
.open_title {
|
||
height: 120upx;
|
||
line-height: 120upx;
|
||
text-align: center;
|
||
font-size: 38upx;
|
||
letter-spacing: 2upx;
|
||
color: #e46965;
|
||
}
|
||
.rbag_detail {
|
||
margin-top: 90upx;
|
||
.open_money {
|
||
text-align: center;
|
||
font-size: 80upx;
|
||
color: #c95948;
|
||
font-weight: bold;
|
||
display: flex;
|
||
justify-content: center;
|
||
.danwei {
|
||
font-size: 30upx;
|
||
margin-left: 16upx;
|
||
margin-top: 24upx;
|
||
}
|
||
}
|
||
.open_tips {
|
||
text-align: center;
|
||
font-size: 30upx;
|
||
color: #d26762;
|
||
margin-top: 30upx;
|
||
}
|
||
}
|
||
.lookbag_box {
|
||
margin-top: 200upx;
|
||
display: flex;
|
||
justify-content: center;
|
||
.lookbag_btn {
|
||
width: 70%;
|
||
height: 90upx;
|
||
line-height: 90upx;
|
||
text-align: center;
|
||
font-size: 32upx;
|
||
color: #c95948;
|
||
letter-spacing: 2upx;
|
||
background-color: #ffd356;
|
||
border-radius: 50upx;
|
||
box-shadow: 0upx 0upx 4upx rgba(0,0,0,0.2);
|
||
}
|
||
}
|
||
.hide_btn {
|
||
position: absolute;
|
||
bottom: -110upx;
|
||
left: 0;
|
||
right: 0;
|
||
width: 80upx;
|
||
height: 80upx;
|
||
line-height: 80upx;
|
||
text-align: center;
|
||
margin: 0 auto;
|
||
}
|
||
}
|
||
}
|
||
</style>
|