554 lines
12 KiB
Vue
554 lines
12 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>
|
|
<block v-if="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 :time="nextSignAt" format="HH:mm:ss" @change="TimeDown">
|
|
<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>
|
|
</block>
|
|
</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="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'}, '')">
|
|
<view class="other-title">
|
|
<image src="../../static/life/icon_04.png" mode="widthFix"></image>
|
|
我的订单
|
|
</view>
|
|
<view class="other-subtitle">{{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'
|
|
|
|
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,
|
|
};
|
|
},
|
|
onShow() {
|
|
this.getLife()
|
|
},
|
|
methods: {
|
|
// 倒计时
|
|
TimeDown(e){
|
|
this.timeData = e
|
|
},
|
|
// 共力人生
|
|
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(){
|
|
account = setInterval(() =>{
|
|
let newGlz = (Number(this.glz) + this.base_seconds)
|
|
this.glz = newGlz.toFixed(4)
|
|
}, 1000)
|
|
},
|
|
// 签到
|
|
onSign(){
|
|
|
|
console.log(this.isSign)
|
|
|
|
if(this.isSign){
|
|
this.$Router.push({name: 'Capacity'})
|
|
return
|
|
}
|
|
uni.showLoading({
|
|
title: '签到中..'
|
|
})
|
|
sign().then(res => {
|
|
uni.showToast({
|
|
title: '签到成功',
|
|
icon : 'none'
|
|
})
|
|
this.getLife()
|
|
}).catch(err => {
|
|
uni.showToast({
|
|
title: err.message,
|
|
icon : 'none'
|
|
})
|
|
})
|
|
},
|
|
// 我的订单
|
|
onNav(name, type){
|
|
if(type){
|
|
this.$Router.pushTab({...name})
|
|
return
|
|
}
|
|
this.$Router.push({...name})
|
|
},
|
|
// 开发中提示
|
|
onToast(title){
|
|
uni.showToast({
|
|
title,
|
|
icon : 'none'
|
|
})
|
|
}
|
|
},
|
|
onHide() {
|
|
clearInterval(account)
|
|
}
|
|
}
|
|
</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>
|