562 lines
15 KiB
Vue
562 lines
15 KiB
Vue
|
<template>
|
|||
|
|
<view>
|
|||
|
|
<statusNav returnColor="#ffffff" fontWeight="800" titleColor="rgba(255, 255, 255, 100)" backgroudColor="#F37A61"
|
|||
|
|
navBarTitle="天天签到">
|
|||
|
|
</statusNav>
|
|||
|
|
|
|||
|
|
<view class="head">
|
|||
|
|
<view class="integral">
|
|||
|
|
当前积分
|
|||
|
|
</view>
|
|||
|
|
<view class="num">
|
|||
|
|
<text class="bold">3000</text>积分
|
|||
|
|
</view>
|
|||
|
|
<view class="text">
|
|||
|
|
每日签到领取积分，连续签到领大礼~
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="button">
|
|||
|
|
兑换商城
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="signin-content">
|
|||
|
|
<view class="text">
|
|||
|
|
已连续签到<text class="cF37A61 bold">3</text>天
|
|||
|
|
</view>
|
|||
|
|
<view class="icon-content">
|
|||
|
|
<view class="li" v-for="(item,index) in signinData">
|
|||
|
|
<view class="icon" :class="item.state?'on':''">
|
|||
|
|
<image src="" v-if="item.state" mode=""></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="icon-text">
|
|||
|
|
{{item.title}}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="button" @click="signinFun()">
|
|||
|
|
立即签到
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="conversion">
|
|||
|
|
<view class="title">
|
|||
|
|
兑换红包
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="conversion-content">
|
|||
|
|
<view class="li" v-for="(item,index) in 4" @click="redPacketFun()">
|
|||
|
|
<image src="" class="img" mode=""></image>
|
|||
|
|
<view class="text">
|
|||
|
|
限量3000个
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="welfare">
|
|||
|
|
<view class="title">
|
|||
|
|
福利任务
|
|||
|
|
</view>
|
|||
|
|
<view class="welfare-content">
|
|||
|
|
<view class="li" v-for="(item,index) in welfareData">
|
|||
|
|
<view class="left">
|
|||
|
|
<view class="text">
|
|||
|
|
{{item.title}} <text class="ml" v-if="item.num>0">{{item.num}}/3</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="num">
|
|||
|
|
<image src="" class="icon" mode=""></image>
|
|||
|
|
<view class="">
|
|||
|
|
积分+40
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="button" :class="item.state?'on':''">
|
|||
|
|
<text v-if="item.state">待领取</text>
|
|||
|
|
<text v-else>+40积分</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="welfare time-limit">
|
|||
|
|
<view class="title">
|
|||
|
|
限时任务
|
|||
|
|
</view>
|
|||
|
|
<view class="welfare-content">
|
|||
|
|
<view class="li" v-for="(item,index) in welfareData">
|
|||
|
|
<view class="left">
|
|||
|
|
<view class="text">
|
|||
|
|
{{item.title}} <text class="ml" v-if="item.num>0">{{item.num}}/3</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="num">
|
|||
|
|
<image src="" class="icon" mode=""></image>
|
|||
|
|
<view class="">
|
|||
|
|
积分+40
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="right">
|
|||
|
|
<view class="button" :class="item.state?'on':''">
|
|||
|
|
<text v-if="item.state">待领取</text>
|
|||
|
|
<text v-else>+40积分</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="date">
|
|||
|
|
剩余时间20小时30分
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<view class="make" v-if="isSignin">
|
|||
|
|
<view class="make-content">
|
|||
|
|
<view class="title">
|
|||
|
|
恭喜签到成功
|
|||
|
|
</view>
|
|||
|
|
<view class="signin-make">
|
|||
|
|
<view class="text">
|
|||
|
|
+50积分
|
|||
|
|
</view>
|
|||
|
|
<view class="button" @click="signinFun()">
|
|||
|
|
明天提醒我
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="make-close" @click="signinFun()">
|
|||
|
|
<!-- <image src="" class="make-close-img" mode=""></image> -->
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="make" v-if="isRedPacket">
|
|||
|
|
<view class="make-content">
|
|||
|
|
<view class="title">
|
|||
|
|
恭喜签到成功
|
|||
|
|
</view>
|
|||
|
|
<view class="PacketFun-make">
|
|||
|
|
+0.3元
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="make-close" @click="redPacketFun()">
|
|||
|
|
<!-- <image src="" class="make-close-img" mode=""></image> -->
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import footTabOne from "../../components/foot-tabs/foot-tab-one.vue"
|
|||
|
|
import statusNav from '../../components/status-nav.vue';
|
|||
|
|
export default {
|
|||
|
|
components: {
|
|||
|
|
footTabOne,
|
|||
|
|
statusNav
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
isRedPacket:false,
|
|||
|
|
isSignin: false,
|
|||
|
|
signinData: [{
|
|||
|
|
title: "第1天",
|
|||
|
|
state: true
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: "第2天",
|
|||
|
|
state: false
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: "第3天",
|
|||
|
|
state: false
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: "第4天",
|
|||
|
|
state: false
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: "第5天",
|
|||
|
|
state: false
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: "第6天",
|
|||
|
|
state: false
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: "第7天",
|
|||
|
|
state: false
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
],
|
|||
|
|
welfareData: [{
|
|||
|
|
title: "邀请好友注册",
|
|||
|
|
state: false,
|
|||
|
|
num: 0,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: "参与抽奖",
|
|||
|
|
state: true,
|
|||
|
|
num: 2,
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
signinFun() {
|
|||
|
|
this.isSignin=!this.isSignin
|
|||
|
|
},
|
|||
|
|
redPacketFun() {
|
|||
|
|
this.isRedPacket=!this.isRedPacket
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style>
|
|||
|
|
.head {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 360rpx;
|
|||
|
|
line-height: 40rpx;
|
|||
|
|
padding: 0 22rpx 0 26rpx;
|
|||
|
|
background-color: rgba(243, 122, 97, 100);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.head .integral {
|
|||
|
|
color: rgba(227, 227, 227, 100);
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
position: relative;
|
|||
|
|
font-family: PingFangSC-regular;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.head .num {
|
|||
|
|
color: rgba(255, 255, 255, 100);
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
margin-top: 16rpx;
|
|||
|
|
font-family: PingFangSC-regular;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.head .num .bold {
|
|||
|
|
font-size: 44rpx;
|
|||
|
|
line-height: 60rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.head .text {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
margin-top: 12rpx;
|
|||
|
|
color: #E3E3E3;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.head .button {
|
|||
|
|
width: 184rpx;
|
|||
|
|
height: 72rpx;
|
|||
|
|
position: absolute;
|
|||
|
|
right: 22rpx;
|
|||
|
|
top: 245rpx;
|
|||
|
|
border-radius: 60rpx;
|
|||
|
|
background-color: rgba(255, 221, 221, 100);
|
|||
|
|
text-align: center;
|
|||
|
|
line-height: 72rpx;
|
|||
|
|
color: rgba(243, 122, 97, 100);
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.signin-content {
|
|||
|
|
width: 702rpx;
|
|||
|
|
height: 368rpx;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
background-color: #FFFFFF;
|
|||
|
|
margin: auto;
|
|||
|
|
padding: 20rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
margin-top: -138rpx;
|
|||
|
|
box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(0, 0, 0, 0.08);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.signin-content .text {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.signin-content .text .bold {
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.icon-content {
|
|||
|
|
display: flex;
|
|||
|
|
margin-top: 36rpx;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
color: rgba(208, 208, 208, 100);
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.icon-content .li .icon {
|
|||
|
|
width: 60rpx;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
margin-bottom: 16rpx;
|
|||
|
|
height: 60rpx;
|
|||
|
|
background-color: rgba(227, 227, 227, 100);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.icon-content .li .on {
|
|||
|
|
background-color: rgba(249, 197, 29, 100);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.signin-content .button {
|
|||
|
|
width: 602rpx;
|
|||
|
|
height: 84rpx;
|
|||
|
|
line-height: 84rpx;
|
|||
|
|
border-radius: 60rpx;
|
|||
|
|
color: rgba(255, 255, 255, 100);
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
margin: auto;
|
|||
|
|
margin-top: 54rpx;
|
|||
|
|
background-color: rgba(249, 197, 29, 100);
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.conversion {
|
|||
|
|
padding: 20rpx 26rpx;
|
|||
|
|
width: 702rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
background-color: #FFFFFF;
|
|||
|
|
height: 378rpx;
|
|||
|
|
margin: auto;
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(0, 0, 0, 0.08);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.conversion .title {
|
|||
|
|
color: rgba(16, 16, 16, 100);
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
font-family: PingFangSC-regular;
|
|||
|
|
padding-bottom: 16rpx;
|
|||
|
|
border-bottom: 2rpx solid rgba(227, 227, 227, 100);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.conversion-content {
|
|||
|
|
display: flex;
|
|||
|
|
margin-top: 30rpx;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.conversion-content .li .img {
|
|||
|
|
width: 122rpx;
|
|||
|
|
height: 196rpx;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
background-color: rgba(227, 227, 227, 100);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.conversion-content .li .text {
|
|||
|
|
color: rgba(16, 16, 16, 100);
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
margin-top: 16rpx;
|
|||
|
|
font-family: PingFangSC-regular;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.welfare {
|
|||
|
|
padding: 20rpx 26rpx 28rpx;
|
|||
|
|
width: 702rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
background-color: #FFFFFF;
|
|||
|
|
margin: auto;
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(0, 0, 0, 0.08);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.welfare .title {
|
|||
|
|
color: rgba(16, 16, 16, 100);
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
font-family: PingFangSC-regular;
|
|||
|
|
padding-bottom: 16rpx;
|
|||
|
|
border-bottom: 2rpx solid rgba(227, 227, 227, 100);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.welfare-content .li {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 20rpx 0rpx;
|
|||
|
|
border-bottom: 2rpx solid rgba(227, 227, 227, 100)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.welfare-content .li .text {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
margin-bottom: 18rpx;
|
|||
|
|
font-family: PingFangSC-regular;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.welfare-content .li .text .ml {
|
|||
|
|
margin-left: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.welfare-content .li .num {
|
|||
|
|
display: flex;
|
|||
|
|
color: rgba(16, 16, 16, 100);
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.welfare-content .li .num .icon {
|
|||
|
|
width: 28rpx;
|
|||
|
|
height: 28rpx;
|
|||
|
|
margin-right: 10rpx;
|
|||
|
|
background-color: rgba(208, 208, 208, 100);
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.welfare-content .li .button {
|
|||
|
|
width: 164rpx;
|
|||
|
|
height: 64rpx;
|
|||
|
|
border-radius: 60rpx;
|
|||
|
|
color: rgba(255, 255, 255, 100);
|
|||
|
|
line-height: 64rpx;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
background-color: rgba(243, 122, 97, 100);
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
.time-limit .li .right .date {
|
|||
|
|
color: rgba(243, 122, 97, 100);
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.time-limit .li .right {
|
|||
|
|
text-align: right;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.time-limit .li .button {
|
|||
|
|
width: 164rpx;
|
|||
|
|
display: inline-block;
|
|||
|
|
height: 56rpx;
|
|||
|
|
margin-bottom: 22rpx;
|
|||
|
|
border-radius: 60rpx;
|
|||
|
|
color: rgba(255, 255, 255, 100);
|
|||
|
|
line-height: 56rpx;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
background-color: rgba(243, 122, 97, 100);
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.time-limit .li .text {
|
|||
|
|
margin-bottom: 30rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.welfare-content .li .on {
|
|||
|
|
background-color: rgba(243, 188, 97, 100);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.make {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
position: fixed;
|
|||
|
|
z-index: 100;
|
|||
|
|
left: 0rpx;
|
|||
|
|
top: 0rpx;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
background-color: rgba(0, 0, 0, 0.54);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.make-close {
|
|||
|
|
width: 84rpx;
|
|||
|
|
height: 84rpx;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background-color: rgba(255, 255, 255, 0.6);
|
|||
|
|
text-align: center;
|
|||
|
|
margin-top: 48rpx;
|
|||
|
|
border: 2rpx solid rgba(255, 255, 255, 100);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.make-content .title {
|
|||
|
|
width: 524rpx;
|
|||
|
|
height: 168rpx;
|
|||
|
|
font-size: 36rpx;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
padding-top: 74rpx;
|
|||
|
|
position: relative;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
border-radius: 20rpx 20rpx 0px 0px;
|
|||
|
|
background-color: rgba(243, 122, 97, 100);
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.make-content .title::after {
|
|||
|
|
position: absolute;
|
|||
|
|
content: "";
|
|||
|
|
left: 76rpx;
|
|||
|
|
top: -36rpx;
|
|||
|
|
width: 46rpx;
|
|||
|
|
height: 106rpx;
|
|||
|
|
line-height: 20px;
|
|||
|
|
border-radius: 12px;
|
|||
|
|
background-color: rgba(249, 70, 70, 100);
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.make-content .title::before {
|
|||
|
|
position: absolute;
|
|||
|
|
content: "";
|
|||
|
|
right: 76rpx;
|
|||
|
|
top: -36rpx;
|
|||
|
|
width: 46rpx;
|
|||
|
|
height: 106rpx;
|
|||
|
|
line-height: 20px;
|
|||
|
|
border-radius: 12px;
|
|||
|
|
background-color: rgba(249, 70, 70, 100);
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.signin-make {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 374rpx;
|
|||
|
|
border-radius: 0px 0px 20rpx 20rpx;
|
|||
|
|
background-color: #FFFFFF;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.signin-make .text {
|
|||
|
|
color: rgba(243, 122, 97, 100);
|
|||
|
|
font-size: 40rpx;
|
|||
|
|
padding-top: 74rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
text-align: center;
|
|||
|
|
font-family: PingFangSC-medium;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.signin-make .button {
|
|||
|
|
width: 387rpx;
|
|||
|
|
margin: auto;
|
|||
|
|
height: 84rpx;
|
|||
|
|
color: rgba(255, 255, 255, 100);
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
margin-top: 90rpx;
|
|||
|
|
line-height: 84rpx;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
background-color: rgba(243, 122, 97, 100);
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
.PacketFun-make{
|
|||
|
|
width: 100%;
|
|||
|
|
height: 280rpx;
|
|||
|
|
border-radius: 0px 0px 20rpx 20rpx;
|
|||
|
|
background-color: #FFFFFF;
|
|||
|
|
color: rgba(243, 122, 97, 100);
|
|||
|
|
font-size: 96rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
line-height: 280rpx;
|
|||
|
|
}
|
|||
|
|
</style>
|