616 lines
14 KiB
Vue
616 lines
14 KiB
Vue
<template>
|
||
<view class="life">
|
||
<!-- 账户信息 -->
|
||
<view class="life-header">
|
||
<view class="life-header-flex">
|
||
<view class="life-header-item">{{glz}}<text>GLF</text></view>
|
||
</view>
|
||
</view>
|
||
<!-- 共力人生 -->
|
||
<view class="life-cover">
|
||
<view class="life-sign">
|
||
<view class="life-sign-icon number-float" @click="onSign">
|
||
<view class="life-sign-icon-text">{{isSign ? 'GLF': '签到'}}</view>
|
||
<image class="life-sign-icon-image" :src="require('@/static/icon/sign_btn.png')" alt="签到"></image>
|
||
</view>
|
||
<view v-show="isSign">
|
||
<view class="life-sign-num">{{base_hour}}</view>
|
||
<view class="life-sign-unit">GLF/h</view>
|
||
<view class="life-sign-time">
|
||
<u-count-down ref="countDown" :time="nextSignAt" format="HH:mm:ss" :autoStart="false" @change="TimeDown" @finish="TimeFinish">
|
||
<view class="time">
|
||
<text class="time__item">{{ timeData.hours > 9 ? timeData.hours: '0'+timeData.hours}}:</text>
|
||
<text class="time__item">{{ timeData.minutes > 9 ? timeData.minutes: '0'+timeData.minutes }}:</text>
|
||
<text class="time__item">{{ timeData.seconds > 9 ? timeData.seconds: '0'+timeData.seconds }}</text>
|
||
</view>
|
||
</u-count-down>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<image class="life-cover-back" :src="require('@/static/life/back.png')"></image>
|
||
<view class="life-role">
|
||
<image class="life-role-src" :src="figurePath" mode="widthFix"/>
|
||
<view class="life-role-content">
|
||
<view class="life-role-nick">{{nickname || '-'}}</view>
|
||
<view class="life-role-card">
|
||
<image :src="identity.button_cover_url" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 功能入口 -->
|
||
<view class="life-flex">
|
||
<view class="life-flex-item house" @click="onNav({name: 'Store'}, 'tab')">
|
||
<view class="house-content">
|
||
<view class="house-title">DT商城</view>
|
||
<view class="house-subtitle">共力共惠</br>健康生活馆</view>
|
||
</view>
|
||
<image src="../../static/img/house_back.jpg" mode="aspectFill"></image>
|
||
</view>
|
||
<view class="life-flex-item both">
|
||
<!-- <view class="both-item team" @click="onToast('共力文娱暂未开放尽情期待')">
|
||
<view class="team-content">
|
||
<view class="team-title">共力文娱</view>
|
||
<view class="team-subtitle">文娱短视频近期开放</view>
|
||
</view>
|
||
<image src="../../static/img/text_back.jpg" mode="aspectFill"></image>
|
||
</view> -->
|
||
<view class="both-item team" @click="goRank">
|
||
<view class="team-content">
|
||
<view class="team-title">共力排行</view>
|
||
<view class="team-subtitle">推动全体成员共同富裕！</view>
|
||
</view>
|
||
<image src="../../static/img/text_back.jpg" mode="aspectFill"></image>
|
||
</view>
|
||
|
||
<view class="both-item team" @click="onNav({name: 'Team'}, '')">
|
||
<view class="team-content">
|
||
<view class="team-title">共力团队</view>
|
||
<view class="team-subtitle">
|
||
近期{{children.indirect}}人成为伙伴</br>
|
||
近期{{children.recommend}}人加入家族
|
||
</view>
|
||
</view>
|
||
<image src="../../static/img/team_back.jpg" mode="aspectFill"></image>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="life-flex-item other" @click="onToast('消息中心暂未开放尽情期待')">
|
||
<view class="other-title">
|
||
<image src="../../static/life/icon_05.png" mode="widthFix"></image>
|
||
消息中心
|
||
</view>
|
||
<view class="other-subtitle">{{message > 0 ? message + '条未读消息': '暂无消息'}}</view>
|
||
<image class="other-back" src="../../static/life/icon_07.png"></image>
|
||
</view> -->
|
||
<view class="life-flex-item other" @click="onNav({name: 'Invitation'}, '')">
|
||
<view class="other-title">
|
||
<image src="../../static/life/icon_03.png" mode="widthFix"></image>
|
||
邀请朋友
|
||
</view>
|
||
<view class="other-subtitle">加速共力分增长</view>
|
||
<image class="other-back" src="../../static/life/icon_08.png"></image>
|
||
</view>
|
||
<view class="life-flex-item other" @click="onNav({name: 'Order',params:{index:0}})">
|
||
<view class="other-title">
|
||
<image src="../../static/life/icon_04.png" mode="widthFix"></image>
|
||
我的订单
|
||
</view>
|
||
<view class="other-subtitle">{{order.all === 0 ? '暂无订单': '订单数量' + order.all}}</view>
|
||
<image class="other-back" src="../../static/life/icon_09.png"></image>
|
||
</view>
|
||
<!-- <view class="life-flex-item other" @click="onToast('共力好友暂未开放尽情期待')">
|
||
<view class="other-title">
|
||
<image src="../../static/life/icon_06.png" mode="widthFix"></image>
|
||
共力好友
|
||
</view>
|
||
<view class="other-subtitle">在线即时互动</view>
|
||
<image class="other-back" src="../../static/life/icon_10.png"></image>
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { life, sign } from '@/apis/interfaces/life.js'
|
||
import AD from '@/utils/ad.js'
|
||
var account;
|
||
export default {
|
||
data() {
|
||
return {
|
||
nickname: '',
|
||
figurePath: '',
|
||
identity: {
|
||
button_cover_url: ''
|
||
},
|
||
children: {
|
||
recommend: 0,
|
||
indirect : 0
|
||
},
|
||
message: 0,
|
||
order: {
|
||
all : 0,
|
||
init : 0,
|
||
pay : 0,
|
||
delivered : 0
|
||
},
|
||
nextSignAt : 0,
|
||
glz : 0,
|
||
base_hour : 0,
|
||
base_seconds: 0,
|
||
timeData : {},
|
||
isSign : false,
|
||
isAccount : false,
|
||
};
|
||
},
|
||
onShow() {
|
||
this.getLife()
|
||
},
|
||
methods: {
|
||
// 倒计时
|
||
TimeDown(e){
|
||
this.timeData = e
|
||
},
|
||
// 倒计时结束
|
||
TimeFinish(){
|
||
this.isSign = false
|
||
if(this.isAccount){
|
||
this.isAccount = false;
|
||
clearInterval(account)
|
||
}
|
||
},
|
||
// 共力人生
|
||
getLife(){
|
||
life().then(res => {
|
||
this.glz = res.account.glz
|
||
this.base_hour = res.account.base_hour
|
||
this.base_seconds = res.account.base_seconds
|
||
this.nextSignAt = res.next_sign_at * 1000
|
||
this.nickname = res.nickname
|
||
this.figurePath = res.figure_path
|
||
this.identity = res.identity
|
||
this.children = res.children
|
||
this.message = res.message
|
||
this.order = res.order
|
||
this.isSign = res.is_sign
|
||
if(res.is_sign){
|
||
this.outTime()
|
||
}
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon : 'none'
|
||
})
|
||
})
|
||
},
|
||
// 计时器
|
||
outTime(){
|
||
this.$nextTick(() => {
|
||
try{
|
||
// 计算数值
|
||
if(!this.isAccount){
|
||
this.isAccount = true;
|
||
account = setInterval(() =>{
|
||
let newGlz = (Number(this.glz) + this.base_seconds)
|
||
this.glz = newGlz.toFixed(4)
|
||
}, 1000)
|
||
}
|
||
// 签到开始倒计时
|
||
this.$refs.countDown.start();
|
||
}catch(e){
|
||
uni.showToast({
|
||
title: e,
|
||
icon : 'none'
|
||
})
|
||
}
|
||
})
|
||
},
|
||
// 签到
|
||
onSign(){
|
||
if(this.isSign){
|
||
this.$Router.push({name: 'Capacity'})
|
||
return
|
||
}
|
||
// 激励视频广告
|
||
AD.show({
|
||
adpid : 1428308887,
|
||
adType : 'RewardedVideo',
|
||
urlCallback : {
|
||
userId: 'TMMM',
|
||
}
|
||
},(res) => {
|
||
const detail = e.detail
|
||
if (detail && detail.isEnded) {
|
||
uni.showLoading({
|
||
title: '签到中..'
|
||
})
|
||
sign().then(res => {
|
||
uni.showToast({
|
||
title: '签到成功',
|
||
icon : 'none'
|
||
})
|
||
this.getLife()
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon : 'none'
|
||
})
|
||
})
|
||
} else {
|
||
console.log('用户主动关闭')
|
||
console.log("onadclose " + detail.isEnded);
|
||
}
|
||
},(err) => {
|
||
uni.showToast({
|
||
title: e.detail
|
||
})
|
||
})
|
||
},
|
||
// 我的订单
|
||
onNav(name, type){
|
||
if(type){
|
||
this.$Router.pushTab({...name})
|
||
return
|
||
}
|
||
this.$Router.push({...name})
|
||
},
|
||
// 开发中提示
|
||
onToast(title){
|
||
uni.showToast({
|
||
title,
|
||
icon : 'none'
|
||
})
|
||
},
|
||
goRank(){
|
||
uni.navigateTo({
|
||
url:'pages/rank/index',
|
||
})
|
||
}
|
||
},
|
||
onHide() {
|
||
try{
|
||
clearInterval(account)
|
||
this.$refs.countDown.pause();
|
||
this.isAccount = false;
|
||
}catch(err){
|
||
uni.showToast({
|
||
title: err,
|
||
icon : 'none'
|
||
})
|
||
}
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* 气泡漂浮 */
|
||
.number-float{
|
||
animation: 4s octfloat infinite;
|
||
}
|
||
@keyframes octfloat{
|
||
0%{
|
||
margin-top: 0;
|
||
}
|
||
50%{
|
||
margin-top: 15rpx;
|
||
}
|
||
100%{
|
||
margin-top: 0;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<style lang="scss" scoped>
|
||
.life{
|
||
min-height: 100vh;
|
||
background: #f8f8f8;
|
||
}
|
||
// 功能栏目
|
||
.life-flex{
|
||
padding: 30rpx 20rpx 30rpx;
|
||
border-radius: 30rpx;
|
||
margin-top: -30rpx;
|
||
background: $window-color;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
position: relative;
|
||
z-index: 1;
|
||
.life-flex-item{
|
||
background: white;
|
||
border-radius: 20rpx;
|
||
width: calc(50% - 20rpx);
|
||
margin: 10rpx;
|
||
padding: 30rpx;
|
||
box-sizing: border-box;
|
||
&.house{
|
||
height: 400rpx;
|
||
position: relative;
|
||
overflow: hidden;
|
||
background-color: #555;
|
||
image{
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
top: 0;
|
||
left: 0;
|
||
opacity: .5;
|
||
}
|
||
.house-content{
|
||
position: relative;
|
||
z-index: 1;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
.house-title{
|
||
color: white;
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
}
|
||
.house-subtitle{
|
||
color: white;
|
||
font-size: 26rpx;
|
||
}
|
||
}
|
||
}
|
||
&.nav{
|
||
width: calc(33.33% - 20rpx);
|
||
height: 150rpx;
|
||
position: relative;
|
||
overflow: hidden;
|
||
background-color: #555;
|
||
image{
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
top: 0;
|
||
left: 0;
|
||
opacity: .5;
|
||
}
|
||
.nav-content{
|
||
position: relative;
|
||
z-index: 1;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
.nav-title{
|
||
color: white;
|
||
font-size: 40rpx;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
}
|
||
&.both{
|
||
background: none;
|
||
padding: 0;
|
||
border-radius: 0;
|
||
.both-item{
|
||
background: white;
|
||
height: 190rpx;
|
||
border-radius: 20rpx;
|
||
padding: 20rpx;
|
||
box-sizing: border-box;
|
||
&:first-child{
|
||
margin-bottom: 20rpx;
|
||
}
|
||
&.team{
|
||
position: relative;
|
||
overflow: hidden;
|
||
background-color: #555;
|
||
image{
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
top: 0;
|
||
left: 0;
|
||
opacity: .5;
|
||
}
|
||
.team-content{
|
||
position: relative;
|
||
z-index: 1;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
.team-title{
|
||
color: white;
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
}
|
||
.team-subtitle{
|
||
color: white;
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
&.other{
|
||
height: 160rpx;
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
.other-back{
|
||
width: 150rpx;
|
||
height: 150rpx;
|
||
position: absolute;
|
||
bottom: 0;
|
||
right: 0;
|
||
}
|
||
.other-title{
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
image{
|
||
width: 36rpx;
|
||
vertical-align: middle;
|
||
margin-bottom: 4rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
}
|
||
.other-subtitle{
|
||
font-size: 26rpx;
|
||
color: gray;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
// 入口模块
|
||
.life-nav{
|
||
padding: 20rpx 20rpx 10rpx;
|
||
display: flex;
|
||
&-item{
|
||
margin: 10rpx;
|
||
border-radius: 20rpx;
|
||
width: 33.33%;
|
||
padding: 30rpx 20rpx;
|
||
text-align: center;
|
||
color: white;
|
||
font-weight: bold;
|
||
font-size: 36rpx;
|
||
image{
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
vertical-align: top;
|
||
}
|
||
&:nth-child(1){
|
||
background-color: #6da2f8;
|
||
}
|
||
&:nth-child(2){
|
||
background-color: #faa471;
|
||
}
|
||
&:nth-child(3){
|
||
background-color: #8c79f9;
|
||
}
|
||
}
|
||
}
|
||
// header
|
||
.life-header{
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 999;
|
||
@extend .ios-top;
|
||
.life-header-flex{
|
||
padding: 20rpx 30rpx 30rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
height: 70rpx;
|
||
line-height: 70rpx;
|
||
.life-header-item{
|
||
border-radius: 35rpx;
|
||
padding: 0 20rpx;
|
||
margin-right: 20rpx;
|
||
font-size: 42rpx;
|
||
font-weight: bold;
|
||
text{
|
||
font-weight: normal;
|
||
padding-left: 5rpx;
|
||
font-size: 70%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
// 角色信息
|
||
.life-cover{
|
||
position: relative;
|
||
width: 100%;
|
||
padding-top: 134%;
|
||
overflow: hidden;
|
||
.life-sign{
|
||
position: absolute;
|
||
top: 15vh;
|
||
right: $margin * 2;
|
||
z-index: 999;
|
||
text-align: center;
|
||
.life-sign-icon{
|
||
display: inline-block;
|
||
width: 98rpx;
|
||
height: 98rpx;
|
||
border-radius: 50%;
|
||
position: relative;
|
||
.life-sign-icon-image{
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 98rpx;
|
||
height: 98rpx;
|
||
}
|
||
.life-sign-icon-text{
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 98rpx;
|
||
height: 98rpx;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
z-index: 1;
|
||
font-size: 28rpx;
|
||
color: white;
|
||
}
|
||
}
|
||
.life-sign-num{
|
||
color: #f79824;
|
||
font-size: 36rpx;
|
||
line-height: 30rpx;
|
||
height: 30rpx;
|
||
text-shadow: 0 2rpx 2rpx rgba(0, 0, 0, .3);
|
||
}
|
||
.life-sign-unit{
|
||
font-weight: bold;
|
||
color: #f79824;
|
||
font-size: 30rpx;
|
||
line-height: 40rpx;
|
||
text-shadow: 0 2rpx 2rpx rgba(0, 0, 0, .3);
|
||
}
|
||
.life-sign-time{
|
||
.time{
|
||
@include flex;
|
||
align-items: center;
|
||
&__item {
|
||
color: #333;
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.life-cover-back{
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
top: 0;
|
||
left: 0;
|
||
}
|
||
.life-role{
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: 0;
|
||
width: 100%;
|
||
z-index: 99;
|
||
text-align: center;
|
||
.life-role-src{
|
||
width: 400rpx;
|
||
}
|
||
.life-role-content{
|
||
padding-bottom: 50rpx;
|
||
font-weight: bold;
|
||
.life-role-nick{
|
||
color: #333;
|
||
font-size: 40rpx;
|
||
}
|
||
.life-role-card{
|
||
padding-top: 10rpx;
|
||
image{
|
||
width: 240rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|