<template>
|
<view class="cp-content">
|
<u-popup :show="signInPopup" mode="center" zIndex="20000" bgColor="transparent" :safeAreaInsetBottom="false" @close="signInPopup = false">
|
<view class="signInPopup">
|
<view class="top-button" @click="signIn">
|
<block v-if="!isSignin">
|
<view>点我</view>
|
<view>签到</view>
|
</block>
|
<block v-else>
|
<view>已</view>
|
<view>签到</view>
|
</block>
|
<view style="font-size: 24rpx;">+{{now.gold}}</view>
|
</view>
|
<view class="long-time">
|
<view class="long-time-text">您已连续签到</view>
|
<view class="long-time-image">{{dayNum}}</view>
|
<view class="long-time-text">天</view>
|
</view>
|
<view class="gap-line"></view>
|
<view class="date-list">
|
<view class="date-list-item" :class="{'item-isSignin':item.isSignin}" v-for="(item,index) of monthList" :key="index">
|
<view class="item-gold-box">
|
<image v-if="item.isSignin" src="/static/icon/signIn/icon_Group5.png" mode="widthFix" class="is-sign"></image>
|
<view class="gold-number">+{{item.gold}}</view>
|
<image v-if="item.state == 1" src="/static/icon/signIn/icon_gold.png" mode="widthFix" class="gold-icon"></image>
|
<image v-if="item.state == 2" src="/static/icon/signIn/icon_water_coin.png" mode="widthFix" class="gold-icon"></image>
|
</view>
|
<view class="item-date">{{item.day}}</view>
|
</view>
|
</view>
|
</view>
|
</u-popup>
|
<u-popup :show="signInOkPopup" mode="center" zIndex="20000" bgColor="transparent" :safeAreaInsetBottom="false">
|
<view class="signInOkPopup">
|
<view class="signInOkPopup-title">签到成功！</view>
|
<view class="signInOkPopup-content" v-if="now.state == 2"><text class="text">{{now.gold}}</text>饮水币已经放入您的钱包</view>
|
<button class="button signInOkPopup-button" @click="ok">确定</button>
|
</view>
|
</u-popup>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
name:"signIn",
|
props:{
|
isSignin:{
|
type:Boolean,
|
default: false
|
}
|
},
|
data() {
|
return {
|
signInPopup:false,
|
signInOkPopup: false,
|
monthList:[],
|
now:{},
|
dayNum:0
|
};
|
},
|
created() {
|
|
},
|
methods:{
|
async init(){
|
await this.$apis.user.DlDay({pageNum:1,pageSize:32}).then(res=>{
|
this.monthList = res.data.map(item=>{
|
item.isSignin = false
|
return item
|
})
|
|
this.now = res.data.find(item=>item.day == this.$dayjs().date())
|
})
|
await this.$apis.user.benyaddDlDay().then(res=>{
|
res.data.forEach(item=>{
|
this.monthList[item.num - 1].isSignin = true
|
})
|
})
|
this.$apis.user.lxDlDay().then(res=>{
|
this.dayNum = res.data.dayNum
|
})
|
},
|
open(){
|
this.init()
|
this.signInPopup = true
|
},
|
signIn(){
|
if(this.isSignin) return
|
this.$loading()
|
this.$apis.user.addDlDay({did:this.now.id}).then(res=>{
|
uni.hideLoading()
|
this.$emit('signInRes')
|
this.signInOkPopup = true
|
this.signInPopup = false
|
})
|
},
|
ok(){
|
this.signInOkPopup = false
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.cp-content{
|
.signInPopup{
|
width: 686rpx;
|
height: 822.38rpx;
|
background-image: url(/static/icon/signIn/background_signin_calendar.png);
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
position: relative;
|
.top-button{
|
width: 240rpx;
|
height: 240rpx;
|
background-image: url(/static/icon/signIn/icon_Group2.png);
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
position: absolute;
|
top: 0;
|
left: 50%;
|
transform: translate(-50%,-48%);
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
flex-direction: column;
|
view{
|
font-weight: 700;
|
font-size: 40rpx;
|
color: #FFFFFF;
|
line-height: 52rpx;
|
}
|
}
|
.long-time{
|
width: 342rpx;
|
height: 52rpx;
|
background: #FFBF00;
|
box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(255,191,0,0.3);
|
border-radius: 26rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
margin: 0 auto;
|
margin-top: 140rpx;
|
.long-time-text{
|
font-weight: 700;
|
font-size: 24rpx;
|
color: #FFFFFF;
|
line-height: 33rpx;
|
}
|
.long-time-image{
|
width: 44rpx;
|
height: 44rpx;
|
background-image: url(/static/icon/signIn/icon_calendar.png);
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
margin: 0 12rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 20rpx;
|
color: #FF2729;
|
line-height: 20rpx;
|
padding-top: 4rpx;
|
}
|
}
|
.gap-line{
|
width: 590rpx;
|
height: 0;
|
border: 2rpx dashed #CFCFCF;
|
margin: 0 auto;
|
margin-top: 24rpx;
|
}
|
.date-list{
|
display: flex;
|
align-items: center;
|
flex-wrap: wrap;
|
padding: 0 40rpx;
|
padding-top: 20rpx;
|
.date-list-item{
|
margin: 0 14rpx;
|
margin-bottom: 20rpx;
|
&.item-isSignin{
|
.item-gold-box{
|
background-color: #FF2729;
|
.gold-number{
|
color: #F7FF00;
|
}
|
}
|
}
|
.item-gold-box{
|
width: 60rpx;
|
height: 60rpx;
|
background-color: rgba(0, 0, 0, 0.06);
|
border-radius: 100%;
|
position: relative;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
|
.is-sign{
|
width: 26rpx;
|
height: 26rpx;
|
position: absolute;
|
top: -8rpx;
|
right: -8rpx;
|
}
|
.gold-number{
|
font-size: 20rpx;
|
color: rgba(0, 0, 0, 0.6);
|
line-height: 29rpx;
|
transform: translateY(-6rpx);
|
}
|
.gold-icon{
|
width: 16rpx;
|
height: 16rpx;
|
position: absolute;
|
bottom: 2rpx;
|
left: 50%;
|
transform: translateX(-50%) translateY(-4rpx);
|
}
|
}
|
.item-date{
|
text-align: center;
|
}
|
}
|
}
|
}
|
.signInOkPopup{
|
width: 640.38rpx;
|
height: 653.85rpx;
|
background-image: url(/static/icon/signIn/background_sign_in.png);
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
position: relative;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
.signInOkPopup-title{
|
font-weight: 700;
|
font-size: 48rpx;
|
color: #FFFFFF;
|
line-height: 65rpx;
|
margin-top: 376rpx;
|
}
|
.signInOkPopup-content{
|
font-weight: 700;
|
font-size: 28rpx;
|
color: #FFFFFF;
|
line-height: 46rpx;
|
margin-top: 15rpx;
|
.text{
|
color: #FBE945;
|
margin-right: 12rpx;
|
line-height: 46rpx;
|
font-size: 32rpx;
|
}
|
}
|
.signInOkPopup-button{
|
width: 200rpx;
|
height: 72rpx;
|
background: #FFD100;
|
border-radius: 36rpx;
|
font-weight: 700;
|
font-size: 32rpx;
|
color: #FF2729;
|
line-height: 46rpx;
|
margin-top: 30rpx;
|
}
|
}
|
}
|
</style>
|
