quick/components/global/GSignMadel.vue
2022-10-26 11:14:13 +08:00

130 lines
2.4 KiB
Vue

<template>
<u-overlay
:show="show"
@click="show = false"
>
<view class="flex-1 flex-center">
<view class="content">
<view class="flex-row pt-120 pl-40">
<text class="content-one">
连续签到
</text>
<text class="content-to mx-10">
{{ content.day || 0 }}
</text>
<text class="content-one">
</text>
</view>
<view class="flex-row pt-100 pl-40">
<text class="content-text-one">
获得 {{ content.money || 0 }} K币
</text>
<u-icon
name="/static/images/member.png"
size="45rpx"
/>
</view>
<view
class="flex-row pl-36 mt-40"
>
<view
class="bottom-button flex-center"
@click="confirmHandler"
>
<text class="bottom-button-text">
去追剧
</text>
</view>
</view>
</view>
<view class="flex-center pt-100">
<image
class="close"
src="@/static/images/close.png"
mode="aspectFill"
/>
</view>
</view>
</u-overlay>
</template>
<script>
export default {
data() {
return {
show: false,
resolve: null,
reject: null,
content:{
money:0,
day:0
},
};
},
methods: {
open(data) {
this.content = data;
this.show = true;
return new Promise((resolve, reject) => {
this.reject = reject;
this.resolve = resolve;
});
},
cancelHandler() {
this.reject();
this.show = false;
},
confirmHandler() {
clearTimeout(this.timer);
this.timer = setTimeout(() => {
this.resolve();
this.show = false;
});
},
}
};
</script>
<style lang="scss">
.content {
width: 554rpx;
height: 526rpx;
background: url('https://diyyhdapi.qinjiu8.com/signInSuccess.png');
background-size: 100% 100%;
}
.bottom-button {
width: 496rpx;
height: 140rpx;
background: url('https://diyyhdapi.qinjiu8.com/signButton.png');
background-size: cover
}
.content-one {
font-size: 32rpx;
font-weight: 400;
color: #313131;
}
.content-to {
font-size: 32rpx;
font-weight: 400;
color: #FF6D35;
}
.content-text-one {
font-size: 40rpx;
font-weight: 400;
color: #FF6D35;
margin-right: 14rpx;
}
.bottom-button-text {
font-size: 36rpx;
font-weight: 500;
color: #FFFFFF;
}
.close {
width: 66rpx;
height: 66rpx;
}
</style>