394 lines
8.7 KiB
Vue
394 lines
8.7 KiB
Vue
<template>
|
|
<view class="life">
|
|
<!-- 账户信息 -->
|
|
<view class="life-header">
|
|
<view class="life-header-flex">
|
|
<view class="life-header-item">0.00共力值</view>
|
|
</view>
|
|
</view>
|
|
<!-- 共力人生 -->
|
|
<view class="life-cover">
|
|
<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">
|
|
<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 } from '@/apis/interfaces/life.js'
|
|
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
|
|
}
|
|
};
|
|
},
|
|
created() {
|
|
// 共力人生
|
|
life().then(res => {
|
|
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
|
|
}).catch(err => {
|
|
uni.showToast({
|
|
title: err.message,
|
|
icon : 'none'
|
|
})
|
|
})
|
|
},
|
|
methods: {
|
|
// 我的订单
|
|
onNav(name, type){
|
|
if(type){
|
|
this.$Router.pushTab({...name})
|
|
return
|
|
}
|
|
this.$Router.push({...name})
|
|
},
|
|
// 开发中提示
|
|
onToast(title){
|
|
uni.showToast({
|
|
title,
|
|
icon : 'none'
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<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: 28rpx;
|
|
}
|
|
}
|
|
}
|
|
// 角色信息
|
|
.life-cover{
|
|
position: relative;
|
|
width: 100%;
|
|
padding-top: 134%;
|
|
overflow: hidden;
|
|
.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>
|