214 lines
4.4 KiB
Vue
214 lines
4.4 KiB
Vue
<template>
|
||
<view class="content">
|
||
<!-- <view class="remaining">
|
||
<text>剩余领取次数：{{userinfo.receive_num}}</text>
|
||
</view> -->
|
||
<view></view>
|
||
<view class="record-button" @click="navigateToRecord">
|
||
<text>领取记录</text>
|
||
</view>
|
||
|
||
<view v-if="btn_show" class="button" @click="getPacket"></view>
|
||
|
||
|
||
<u-overlay :show="show" class="overlay">
|
||
<view class="slot-content">
|
||
<text class="title">领取成功</text>
|
||
<text>恭喜您购买成功请到<b>领取记录</b>兑换立减金</text>
|
||
<u-button class="packet-btn" @click="navigateToRecord">去兑换</u-button>
|
||
</view>
|
||
<view>
|
||
<u-icon name="close" color="#ffffff" size="28" @click="hideDialog"></u-icon>
|
||
</view>
|
||
</u-overlay>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import api from '@/api/api.js'
|
||
import {Debounce} from "@/util/common.js"
|
||
export default {
|
||
data() {
|
||
return {
|
||
userinfo: {
|
||
receive_num:0
|
||
},
|
||
show: false,
|
||
btn_show:true,
|
||
}
|
||
},
|
||
methods: {
|
||
getPacket:Debounce(function(){
|
||
api.lottery({
|
||
id:11
|
||
}).then((res)=>{
|
||
if(res.data.code == 200){
|
||
this.show = true
|
||
this.getAccountInfo()
|
||
this.btn_show = false
|
||
}else{
|
||
uni.showToast({
|
||
title: res.data.message,
|
||
icon: "none"
|
||
})
|
||
}
|
||
})
|
||
},1000),
|
||
getAccountInfo(){
|
||
api.getAccountInfo().then((res)=>{
|
||
if(res.data.code == 200){
|
||
this.userinfo = res.data.data
|
||
}else{
|
||
uni.showToast({
|
||
title: res.data.message,
|
||
icon: "none"
|
||
})
|
||
}
|
||
})
|
||
},
|
||
addUser(){
|
||
api.getAccountInfo().then((res)=>{
|
||
if(res.data.code == 200){
|
||
this.userinfo = res.data.data
|
||
if(this.userinfo.flag == false){
|
||
api.create().then((res)=>{
|
||
if(res.data.code == 200){
|
||
this.getAccountInfo()
|
||
}else{
|
||
// uni.showToast({
|
||
// title: res.data.message,
|
||
// icon: "none"
|
||
// })
|
||
}
|
||
})
|
||
}
|
||
|
||
}else{
|
||
uni.showToast({
|
||
title: res.data.message,
|
||
icon: "none"
|
||
})
|
||
}
|
||
})
|
||
|
||
},
|
||
navigateToRecord(){
|
||
uni.navigateTo({
|
||
url:"/pages/packet/record/record"
|
||
})
|
||
},
|
||
hideDialog(){
|
||
this.show = false
|
||
},
|
||
onShow(){
|
||
this.addUser()
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
background-image: url('@/static/images/packetbackground.png');
|
||
background-repeat: no-repeat;
|
||
background-position: center;
|
||
background-size: cover;
|
||
background-color: #00A8EA;
|
||
width: 100%;
|
||
overflow-x: hidden;
|
||
height: 100%;
|
||
}
|
||
.remaining{
|
||
width: 516rpx;
|
||
height: 52rpx;
|
||
background: linear-gradient( 180deg, #FE9977 0%, #FA6873 100%);
|
||
border-radius: 25rpx 25rpx 25rpx 25rpx;
|
||
margin-top: 200rpx;
|
||
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #FFFFFF;
|
||
line-height: 40rpx;
|
||
letter-spacing: 5px;
|
||
text-align: left;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
.button{
|
||
width: 476rpx;
|
||
height: 156rpx;
|
||
margin-bottom: 80rpx;
|
||
background-image: url('@/static/images/packet-button.png');
|
||
background-size: cover;
|
||
}
|
||
.overlay {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
.slot-content {
|
||
margin: 0;
|
||
width: 420rpx;
|
||
height: 512rpx;
|
||
background-image: url('@/static/images/packet-dialog.png');
|
||
background-repeat: no-repeat;
|
||
background-size: contain;
|
||
padding: 68rpx;
|
||
padding-top: 192rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
gap: 37rpx;
|
||
|
||
font-weight: 400;
|
||
font-size: 32rpx;
|
||
color: #DE6868;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
}
|
||
.packet-btn{
|
||
width: 426rpx;
|
||
height: 64rpx;
|
||
background: linear-gradient( 90deg, #FF416F 0%, #FF8A6C 100%);
|
||
border-radius: 56rpx 56rpx 56rpx 56rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
.title{
|
||
color: #333333;
|
||
font-size: 60rpx;
|
||
font-weight: bold;
|
||
}
|
||
.record-button{
|
||
width: 168rpx;
|
||
height: 48rpx;
|
||
background: linear-gradient( 90deg, #FF7B91 0%, #FFBE9F 100%);
|
||
border-radius: 25rpx 0rpx 0rpx 25rpx;
|
||
position: absolute;
|
||
top:300rpx;
|
||
right: 0;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
font-weight: 400;
|
||
font-size: 32rpx;
|
||
color: #FFFFFF;
|
||
line-height: 28rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
}
|
||
</style>
|