<template>
|
<!-- 我的 -->
|
<view class="container">
|
<!-- #ifndef H5 -->
|
<view class="status_bar"></view>
|
<!-- #endif -->
|
<view class="header">
|
<view class="right">
|
<text class=" white iconfont iconshezhi icon" @click="toSetting"></text>
|
</view>
|
<view class="flex align-center">
|
<image class="header-img ml-10" :src="userInfo.photo?userInfo.photo:'../../static/images/default-avatar.png'"></image>
|
<view class="flex flex-v ml-15">
|
<navigator url="./myInfo" hover-class="none">
|
<text class="font-18 white mr-5">{{userInfo.name}}</text>
|
<text class="white font-16 iconfont iconxiugai"></text>
|
</navigator>
|
<view class="flex mt-10">
|
<view class="mr-20 ellipsis ellipsis-rolename">
|
<text class="white mr-5 font-14">职位:</text>
|
<text class="white font-14">{{userInfo.roleName}}</text>
|
</view>
|
<view class="ellipsis ellipsis-shopname">
|
<text class="white mr-5 font-14">门店:</text>
|
<text class="white font-14">{{userInfo.shopName}}</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<view class="content">
|
<view class="tab-box">
|
<h-tabs
|
class="tab"
|
:activeIndex="type-1"
|
:tabData="tabs"
|
@tabClick="tabChange"
|
:config="{
|
color: '#abb1cc',
|
activeColor: '#518EFF',
|
underLineColor: '#518EFF',
|
underLineHeight: 4,
|
fontSize: 26,
|
itemWidth: 70,
|
underLineWidth: 60,
|
}"
|
/>
|
<view class="look-more" @click="lookMore">
|
更多<text class="iconfont iconarrow-backimg light-gray"></text>
|
</view>
|
<view class="performance-content">
|
<view class="flex justify-around">
|
<view class="flex flex-v align-center performance-item">
|
<text class="font-16 green">{{userAchieve.orderCash | formatNum}}</text>
|
<text class="mt-5">现金业绩</text>
|
</view>
|
<view class="flex flex-v align-center performance-item">
|
<text class="font-16 purple">{{userAchieve.cash | formatNum}}</text>
|
<text class="mt-5">划扣业绩</text>
|
</view>
|
<view class="flex flex-v align-center performance-item">
|
<text class="font-16 red">{{userAchieve.cardUse | formatNum}}</text>
|
<text class="mt-5">业绩提成</text>
|
</view>
|
</view>
|
<view class="flex justify-around mt-15">
|
<view class="flex flex-v align-center performance-item">
|
<text class="font-16 blueness">{{userAchieve.hisConsume | formatNum}}</text>
|
<text class="mt-5">本金消耗</text>
|
</view>
|
<view class="flex flex-v align-center performance-item">
|
<text class="font-16 orange">{{userAchieve.freeConsume | formatNum}}</text>
|
<text class="mt-5">赠送消耗</text>
|
</view>
|
<view class="flex flex-v align-center performance-item">
|
<text class="font-16 yellow">{{userAchieve.projCommission | formatNum}}</text>
|
<text class="mt-5">服务提成</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
<navigator url="./knowledge" class="flex align-center justify-between repository mt-10" v-if="$utils.hasPermission('zhishiku')">
|
<view class="flex align-center">
|
<image class="title-img mr-10" src="../../static/images/mine2.png"></image>
|
<text>知识库</text>
|
</view>
|
<text class="icon iconfont iconarrow-backimg gray"></text>
|
</navigator>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import HTabs from "@/components/liuyuno-tabs/liuyuno-tabs.vue";
|
export default {
|
components: {
|
HTabs
|
},
|
data() {
|
return {
|
type: 1, //1-今日 2-昨天 3-本月 4-上月
|
tabs:[
|
{
|
state: 1,
|
name: '今日'
|
},
|
{
|
state: 2,
|
name: '昨日'
|
},
|
{
|
state: 3,
|
name: '本月'
|
},
|
{
|
state: 4,
|
name: '上月'
|
},
|
],
|
userAchieve: {},
|
userInfo: {}
|
}
|
},
|
onShow() {
|
this.getUserAchieve();
|
this.getUserInfo();
|
},
|
methods: {
|
getUserInfo(){
|
let roleInfo = this.$httpUtils.getRoleInfo();
|
this.userInfo = roleInfo || {};
|
},
|
getUserAchieve(){
|
this.$httpUtils.request('/api/user/findUserAchieve/'+this.type).then((res) => {
|
if(res.status == 200){
|
let {achieve} = res.mapInfo;
|
this.userAchieve = achieve || {};
|
}else{
|
this.userAchieve = {};
|
}
|
})
|
},
|
tabChange(e){
|
this.type = e + 1;
|
this.getUserAchieve()
|
},
|
toSetting(){
|
let isLogin = (JSON.stringify(this.userInfo) !== '{}')?1:0;
|
uni.navigateTo({
|
url: './setting?isLogin='+isLogin
|
})
|
},
|
lookMore(){
|
uni.navigateTo({
|
url: '../manager/employeeReport'
|
})
|
}
|
}
|
}
|
</script>
|
|
<style>
|
page{
|
background: #F6F6F8;
|
}
|
.status_bar{
|
background: #518EFF;
|
color: #FFFFFF;
|
}
|
.header{
|
background: #518EFF;
|
border-bottom-left-radius: 20px;
|
border-bottom-right-radius: 20px;
|
padding: 15px 10px;
|
}
|
.icon {
|
font-size: 18px;
|
font-family: texticons;
|
}
|
.header-img{
|
width: 64px;
|
height: 64px;
|
border-radius: 50%;
|
flex: 0 0 64px;
|
}
|
.content{
|
padding: 0 10px;
|
}
|
.performance{
|
padding: 0 3px;
|
margin: 15px 0px 10px;
|
}
|
.title-img{
|
width: 16px;
|
height: 16px;
|
}
|
.tab-box{
|
background: #FFFFFF;
|
border-radius: 4px;
|
margin-top: 10px;
|
position: relative;
|
}
|
.tab{
|
border-bottom: 1px solid #EDEAF4;
|
}
|
.look-more{
|
position: absolute;
|
z-index: 99;
|
top: 22rpx;
|
right: 10px;
|
color: rgb(171, 177, 204);
|
font-size: 26rpx;
|
}
|
.performance-content{
|
padding: 20px 0;
|
}
|
.performance-item{
|
width: 33.3%;
|
font-size: 13px;
|
}
|
.repository{
|
border-radius: 4px;
|
padding: 12px 10px;
|
background: #FFFFFF;
|
font-size: 15px;
|
}
|
.ellipsis{
|
color: #FFFFFF;
|
overflow: hidden;
|
text-overflow:ellipsis;
|
white-space: nowrap;
|
}
|
.ellipsis-rolename{
|
max-width: 125px;
|
}
|
.ellipsis-shopname{
|
max-width: 90px;
|
}
|
</style>
|
