781 lines
17 KiB
Vue
781 lines
17 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>
|
|
<!-- 微信阅读 -->
|
|
<view class="reading" v-if="!isOver">
|
|
<view class="reading-icon number-float" @click="onReading">
|
|
<image class="reading-icon-image" :src="require('@/static/icon/reading_btn.png')" alt="签到"></image>
|
|
</view>
|
|
<view class="reading-title">共力分加成</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="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 {
|
|
readingUrl
|
|
} from '@/apis/interfaces/reading.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,
|
|
isOver : 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
|
|
this.isOver = res.is_over
|
|
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
|
|
}
|
|
this.checkIMEI().then(res => {
|
|
switch (res) {
|
|
case 'Permanent':
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '签到功能需使用您的电话状态和网络信息，请在手机设置中权限开启您的权限',
|
|
showCancel: false,
|
|
})
|
|
break;
|
|
case 'Temporary':
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '签到功能需使用您的电话状态和网络信息，请点击设置开启应用权限',
|
|
cancelText: '获取权限',
|
|
confirmText: '稍后再说',
|
|
success: e => {
|
|
if (e.cancel) {
|
|
this.checkIMEI().then(IMEI => {
|
|
if (IMEI === 'Success') {
|
|
this.showAd()
|
|
}
|
|
})
|
|
}
|
|
}
|
|
})
|
|
break;
|
|
case 'Success':
|
|
this.showAd()
|
|
break;
|
|
}
|
|
})
|
|
},
|
|
// 微信阅读
|
|
onReading(){
|
|
uni.showLoading({
|
|
title: ''
|
|
})
|
|
readingUrl().then(res => {
|
|
if(!res.is_over){
|
|
try{
|
|
plus.runtime.openURL(res.ticket)
|
|
}catch(e){
|
|
console.log(e)
|
|
}
|
|
}
|
|
uni.hideLoading()
|
|
}).catch(err => {
|
|
uni.showToast({
|
|
title: err.message,
|
|
icon : 'none'
|
|
})
|
|
})
|
|
},
|
|
// 激励广告
|
|
showAd() {
|
|
AD.show({
|
|
adpid: 1428308887,
|
|
adType: 'RewardedVideo'
|
|
}, detail => {
|
|
if (detail && detail.isEnded) {
|
|
this.Sign()
|
|
}
|
|
}, err => {
|
|
// this.Sign()
|
|
})
|
|
},
|
|
// 签到
|
|
Sign(){
|
|
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'
|
|
})
|
|
},
|
|
// imei权限
|
|
checkIMEI() {
|
|
// 检查imei权限
|
|
return new Promise((resolve, reject) => {
|
|
if (plus.os.name == "Android") {
|
|
plus.android.requestPermissions(['android.permission.READ_PHONE_STATE'], (e) => {
|
|
if (e.deniedAlways.length > 0) {
|
|
resolve('Permanent');
|
|
}
|
|
if (e.deniedPresent.length > 0) {
|
|
resolve('Temporary');
|
|
}
|
|
if (e.granted.length > 0) {
|
|
resolve('Success');
|
|
}
|
|
}, (e) => {
|
|
uni.showToast({
|
|
title: JSON.stringify(e),
|
|
icon: 'none'
|
|
})
|
|
})
|
|
return
|
|
}
|
|
reject('非安卓设备');
|
|
})
|
|
}
|
|
},
|
|
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;
|
|
// 加成
|
|
.reading{
|
|
position: absolute;
|
|
top: 35vh;
|
|
left: $margin * 3;
|
|
z-index: 999;
|
|
text-align: center;
|
|
.reading-icon{
|
|
display: inline-block;
|
|
width: 78rpx;
|
|
height: 78rpx;
|
|
border-radius: 50%;
|
|
position: relative;
|
|
.reading-icon-image {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 78rpx;
|
|
height: 78rpx;
|
|
}
|
|
}
|
|
.reading-title{
|
|
font-size: 26rpx;
|
|
color: #333;
|
|
}
|
|
}
|
|
// 签到
|
|
.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>
|