修改红包弹窗
This commit is contained in:
parent
c97811b50d
commit
e7d2b21ec2
|
|
@ -0,0 +1,175 @@
|
|||
<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: 42px;" src="/static/red-pack.png" mode="heightFix"></image>
|
||||
</view>
|
||||
<view class="u-flex u-row-center">
|
||||
<view class="type">物品</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;">元</view>
|
||||
</view>
|
||||
<view class="u-flex u-row-center">
|
||||
<view class="type">现金红包</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
</view>
|
||||
<view class="u-flex u-row-center btn-box">
|
||||
<view class="btn" @click="lingqu">立即领取</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-flex u-row-center">
|
||||
<u-icon name="close-circle" :size="54" @click="close" color="#fff"></u-icon>
|
||||
</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
|
||||
},
|
||||
lingqu() {
|
||||
const {
|
||||
orderId,
|
||||
id
|
||||
} = this.result
|
||||
this.$Request.postJson('app/discSpinning/receive', this.result).then(res => {
|
||||
this.result = ''
|
||||
console.log(res)
|
||||
if (res.code == 0) {
|
||||
uni.showToast({
|
||||
title: '领取成功',
|
||||
icon: 'none'
|
||||
})
|
||||
this.$emit('success')
|
||||
this.close()
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '领取失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
close() {
|
||||
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) {
|
||||
this.$emit('success')
|
||||
this.close()
|
||||
} 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: 72rpx;
|
||||
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/ling-qu.png");
|
||||
position: relative;
|
||||
|
||||
@media (-webkit-min-device-pixel-ratio: 2),
|
||||
(min-device-pixel-ratio: 2) {
|
||||
background-image: url("~static/images/zhuanpan/ling-qu@2x.png");
|
||||
}
|
||||
|
||||
.title {
|
||||
position: absolute;
|
||||
top: 238rpx;
|
||||
text-align: center;
|
||||
left: 0;
|
||||
right: 0;
|
||||
font-weight: 700;
|
||||
font-size: 58rpx;
|
||||
color: #AF6920;
|
||||
letter-spacing: 4rpx;
|
||||
}
|
||||
|
||||
.goods {
|
||||
position: absolute;
|
||||
top: 326rpx;
|
||||
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;
|
||||
}
|
||||
|
||||
.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,6 +1,6 @@
|
|||
<template>
|
||||
<view>
|
||||
<u-popup v-model="show" mode="center">
|
||||
<u-popup v-model="show" mode="center" @close="close">
|
||||
<view class="bg">
|
||||
<view class="title">恭喜您获得</view>
|
||||
<view class="goods">
|
||||
|
|
@ -15,18 +15,22 @@
|
|||
<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;">元</view>
|
||||
<view class="font-bold " style="margin-top: 20rpx;font-size: 36rpx;">元</view>
|
||||
</view>
|
||||
<view class="u-flex u-row-center">
|
||||
<view class="u-flex u-m-t-24 u-row-center">
|
||||
<view class="type">现金红包</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
</view>
|
||||
<view class="u-flex u-row-center btn-box">
|
||||
<!-- <view class="u-flex u-row-center btn-box">
|
||||
<view class="btn" @click="lingqu">立即领取</view>
|
||||
</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>
|
||||
|
|
@ -70,6 +74,22 @@
|
|||
},
|
||||
close() {
|
||||
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) {
|
||||
this.$emit('close')
|
||||
this.close()
|
||||
} else {
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -86,7 +106,7 @@
|
|||
|
||||
.money {
|
||||
font-weight: 700;
|
||||
font-size: 72rpx;
|
||||
font-size: 96rpx;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
|
|
@ -98,29 +118,29 @@
|
|||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-size: cover;
|
||||
background-image: url("~static/images/zhuanpan/ling-qu.png");
|
||||
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/ling-qu@2x.png");
|
||||
background-image: url("~static/images/zhuanpan/gift@2x.png");
|
||||
}
|
||||
|
||||
.title {
|
||||
position: absolute;
|
||||
top: 238rpx;
|
||||
top: 218rpx;
|
||||
text-align: center;
|
||||
left: 0;
|
||||
right: 0;
|
||||
font-weight: 700;
|
||||
font-size: 58rpx;
|
||||
font-size: 60rpx;
|
||||
color: #AF6920;
|
||||
letter-spacing: 4rpx;
|
||||
}
|
||||
|
||||
.goods {
|
||||
position: absolute;
|
||||
top: 326rpx;
|
||||
top: 336rpx;
|
||||
text-align: center;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
|
@ -135,7 +155,12 @@
|
|||
color: #fff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.close{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
.btn-box {
|
||||
position: absolute;
|
||||
top: 574rpx;
|
||||
|
|
|
|||
|
|
@ -76,7 +76,7 @@
|
|||
</template> -->
|
||||
</view>
|
||||
</view>
|
||||
<ling-qu ref="refLingqu" @success="getRedPack"></ling-qu>
|
||||
<ling-qu ref="refLingqu" @close="lingquClose"></ling-qu>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
|
@ -530,6 +530,10 @@
|
|||
this.freeNum=res.count||0
|
||||
}
|
||||
},
|
||||
lingquClose(){
|
||||
this.getCount()
|
||||
this.getRedPack()
|
||||
},
|
||||
showLingPop(data){
|
||||
this.$refs.refLingqu.open(data)
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 93 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 286 KiB |
Loading…
Reference in New Issue