<template>
|
<view class="content">
|
<u-navbar placeholder bgColor="#FB282A" leftIcon=""><view slot="left"></view></u-navbar>
|
<view class="header-card">
|
<view class="header-card-info">
|
<view class="avatar"><image :src="userInfo.imgTx" mode="widthFix"></image></view>
|
<view class="user-info">
|
<view class="user-info-name">{{userInfo.nickname}}</view>
|
<view class="user-info-fan">
|
<view class="user-info-fan-num">关注<text class="_number">{{userInfo.gzNum }}</text></view>
|
<view class="user-info-fan-num">粉丝<text class="_number">{{userInfo.fansNum }}</text></view>
|
</view>
|
</view>
|
<view class="user-info-signin" @click="signIn" v-if="!isSignin">签到</view>
|
<view class="user-info-signin" @click="signIn" v-if="isSignin">已签到</view>
|
</view>
|
<view class="header-card-desc">
|
<view class="user-introduction u-line-1">{{userInfo.individuation }}</view>
|
<view class="user-edit">
|
<image class="user-edit-image" src="/static/icon/user/icon_user_edit.png" mode=""></image>
|
<view class="user-edit-title" @click="$navTo('/pages/user/index/setting')">编辑资料</view>
|
</view>
|
</view>
|
</view>
|
<view class="info-card">
|
<view class="info-card-tab">
|
<view class="info-card-tab-title">常用功能</view>
|
<view class="info-card-tab-list">
|
<view @click="$navTo('/pages/user/money/index')" class="info-card-tab-item">
|
<view class="info-card-tab-item-icon"><image mode="widthFix" src="/static/icon/user/icon_user_money.png"></image></view>
|
<view class="info-card-tab-item-title">钱包</view>
|
</view>
|
<view @click="$navTo('/pages/user/task/index')" class="info-card-tab-item">
|
<view class="info-card-tab-item-icon"><image mode="widthFix" src="/static/icon/user/icon_user_task.png"></image></view>
|
<view class="info-card-tab-item-title">任务</view>
|
</view>
|
<view @click="$navTo('/pages/user/setup/index')" class="info-card-tab-item">
|
<view class="info-card-tab-item-icon"><image mode="widthFix" src="/static/icon/user/icon_user_setup.png"></image></view>
|
<view class="info-card-tab-item-title">设置</view>
|
</view>
|
</view>
|
</view>
|
<view class="info-card-tab">
|
<view class="info-card-tab-title">更多功能</view>
|
<view class="info-card-tab-list">
|
<view class="info-card-tab-item" @click="$navTo('/pages/user/help/index')">
|
<view class="info-card-tab-item-icon"><image mode="widthFix" src="/static/icon/user/icon_user_help.png"></image></view>
|
<view class="info-card-tab-item-title">帮助中心</view>
|
</view>
|
<view class="info-card-tab-item" @click="$navTo('/pages/user/bindCard/index')">
|
<view class="info-card-tab-item-icon"><image mode="widthFix" src="/static/icon/user/icon_user_Combined Shape.png"></image></view>
|
<view class="info-card-tab-item-title">绑卡服务</view>
|
</view>
|
<view class="info-card-tab-item" @click="$navTo('/pages/user/share/index')">
|
<view class="info-card-tab-item-icon"><image mode="widthFix" src="/static/icon/user/icon_user_share.png"></image></view>
|
<view class="info-card-tab-item-title">分享</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
<u-loading-page :loading="loading"></u-loading-page>
|
<signIn :isSignin="isSignin" ref="signIn" @signInRes="init"></signIn>
|
<!-- <u-tabbar @change="$TabBar.change">
|
<u-tabbar-item text="饮水" icon="/static/icon/tabBar/icon_tabbar_index.png"></u-tabbar-item>
|
<u-tabbar-item text="我的" icon="/static/icon/tabBar/icon_tabbar_user_active.png"></u-tabbar-item>
|
</u-tabbar> -->
|
<k-tabbar :list="TabBar.list" v-model="TabBar.current" inactiveColor="rgba(0,0,0,.5)" activeColor="rgba(0,0,0,.8)" icon-size="32rpx" ></k-tabbar>
|
</view>
|
</template>
|
|
<script>
|
import {
|
mapState,
|
mapMutations
|
} from 'vuex'
|
export default {
|
data() {
|
return {
|
loading:true,
|
userInfo:{},
|
isSignin: false,
|
};
|
},
|
onLoad() {
|
},
|
onShow() {
|
if(!this.isLogin){
|
uni.reLaunch({
|
url:'/pages/login/index'
|
})
|
}else{
|
this.init()
|
}
|
},
|
computed:{
|
...mapState({
|
isLogin: state=>state.isLogin
|
}),
|
TabBar() {
|
return this.$TabBar
|
},
|
},
|
methods:{
|
...mapMutations(['setUserInfo']),
|
init(){
|
this.$apis.user.getUserInfo().then(res=>{
|
this.loading = false
|
this.userInfo = res.data
|
this.setUserInfo(this.userInfo)
|
})
|
this.$apis.user.getNowSignin().then(res=>{
|
this.isSignin = res.data.state == 1?false:true
|
})
|
},
|
signIn(){
|
this.$refs.signIn.open()
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
|
</style>
|
|
<style lang="scss" scoped>
|
.content{
|
.header-card {
|
background-color: #FB282A;
|
// height: 486.54rpx;
|
padding: 18rpx 26rpx 106rpx 28rpx;
|
.header-card-info {
|
display: flex;
|
align-items: center;
|
.avatar {
|
width: 132rpx;
|
height: 132rpx;
|
border-radius: 100%;
|
overflow: hidden;
|
image{
|
width: 132rpx;
|
height: 132rpx;
|
}
|
}
|
.user-info {
|
flex: 1;
|
padding-left: 20rpx;
|
.user-info-name {
|
font-size: 36rpx;
|
color: #FFFFFF;
|
line-height: 50rpx;
|
}
|
.user-info-fan {
|
display: flex;
|
align-items: center;
|
margin-top: 16rpx;
|
.user-info-fan-num {
|
font-size: 28rpx;
|
color: rgba(255,255,255,0.8);
|
line-height: 38rpx;
|
margin-right: 30rpx;
|
._number{
|
font-size: 32rpx;
|
line-height: 38rpx;
|
color: #FFFFFF;
|
margin-left: 12rpx;
|
}
|
}
|
}
|
}
|
.user-info-signin {
|
width: 135rpx;
|
height: 58rpx;
|
background: #FFFFFF;
|
border-radius: 30rpx;
|
font-size: 27rpx;
|
color: #FB282A;
|
line-height: 27rpx;
|
font-style: normal;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
&.isSignin{
|
background: #bfbfbf;
|
color: #8a8888;
|
}
|
}
|
}
|
.header-card-desc {
|
display: flex;
|
align-items: center;
|
margin-top: 22rpx;
|
.user-introduction {
|
flex: 1;
|
font-family: PingFang-SC, PingFang-SC;
|
font-weight: 500;
|
font-size: 24rpx;
|
color: #FFFFFF;
|
line-height: 32rpx;
|
font-style: normal;
|
}
|
.user-edit {
|
display: flex;
|
align-items: center;
|
.user-edit-image {
|
width: 30rpx;
|
height: 30rpx;
|
}
|
.user-edit-title {
|
font-size: 24rpx;
|
color: rgba(255,255,255,0.8);
|
line-height: 24rpx;
|
font-style: normal;
|
margin-left: 12rpx;
|
}
|
}
|
}
|
}
|
.info-card{
|
width: 750rpx;
|
background: #FFFFFF;
|
border-radius: 20rpx 20rpx 0rpx 0rpx;
|
margin-top: -64rpx;
|
padding: 0 26rpx 28rpx 28rpx;
|
.info-card-tab{
|
border-bottom: 1rpx solid rgba(39, 40, 45, .06);
|
padding-bottom: 22rpx;
|
padding-top: 28rpx;
|
margin-bottom: 10rpx;
|
.info-card-tab-title{
|
padding-bottom: 18rpx;
|
font-size: 32rpx;
|
color: rgba(0, 0, 0, 0.6);
|
line-height: 32rpx;
|
}
|
.info-card-tab-list{
|
display: flex;
|
.info-card-tab-item{
|
padding: 18rpx 0;
|
margin-right: 50rpx;
|
height: 136rpx;
|
width: 108rpx;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: space-between;
|
.info-card-tab-item-icon{
|
image{
|
width: 47.98rpx;
|
|
}
|
}
|
.info-card-tab-item-title{
|
font-size: 24rpx;
|
color: #000000;
|
line-height: 24rpx;
|
}
|
}
|
}
|
}
|
|
}
|
}
|
</style>
|
