| | |
| | | <view class="status_bar"></view> |
| | | <!-- #endif --> |
| | | <view class="header"> |
| | | <view class="icon white iconfont iconshezhi right"></view> |
| | | <view class="right"> |
| | | <text class=" white iconfont iconshezhi icon" @click="toSetting"></text> |
| | | </view> |
| | | <view class="flex align-center"> |
| | | <image class="header-img ml-15" src="../../static/images/head-img.jpg"></image> |
| | | <view class="flex flex-v ml-20"> |
| | | <image class="header-img ml-10" :src="userInfo.photo?userInfo.photo:'../../static/images/default-avatar.png'"></image> |
| | | <view class="flex flex-v ml-15"> |
| | | <view> |
| | | <text class="font-18 white mr-5">222是个帅哥</text> |
| | | <text class="font-18 white mr-5">{{userInfo.name}}</text> |
| | | <text class="white icon iconfont iconxiugai"></text> |
| | | </view> |
| | | <view class="flex mt-10"> |
| | | <view class="mr-20"> |
| | | <view class="mr-20 ellipsis ellipsis-rolename"> |
| | | <text class="white mr-5 font-14">职位:</text> |
| | | <text class="white font-14">靓仔</text> |
| | | <text class="white font-14">{{userInfo.roleName}}</text> |
| | | </view> |
| | | <view> |
| | | <text class="white mr-5 font-14">工号:</text> |
| | | <text class="white font-14">9527</text> |
| | | <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 class="content"> |
| | | <view class="flex align-center performance"> |
| | | <image class="title-img mr-10" src="../../static/images/mine1.png"></image> |
| | | <text class="font-18">我的业绩</text> |
| | | </view> |
| | | <view class="tab-box"> |
| | | <liuyuno-tabs |
| | | <h-tabs |
| | | class="tab" |
| | | :activeIndex="type-1" |
| | | :tabData="tabs" |
| | | @tabClick="tabChange" |
| | | :config="{ |
| | | color: '#abb1cc', |
| | | activeColor: '#518EFF', |
| | | underLineColor: '#518EFF', |
| | | underLineHeight: 5, |
| | | fontSize: 30, |
| | | underLineHeight: 4, |
| | | fontSize: '30px', |
| | | itemWidth: 70, |
| | | underLineWidth: 50, |
| | | underLineWidth: 60, |
| | | }" |
| | | /> |
| | | <view class="performance-content"> |
| | | <view class="flex justify-around"> |
| | | <view class="flex flex-v align-center performance-item"> |
| | | <text class="font-16 red">600.00</text> |
| | | <text class="font-14 mt-5">总现金业绩</text> |
| | | <text class="font-16 red">{{userAchieve.orderCash | formatNum}}</text> |
| | | <text class="mt-5">订单业绩</text> |
| | | </view> |
| | | <view class="flex flex-v align-center performance-item"> |
| | | <text class="font-16 green">600.00</text> |
| | | <text class="font-14 mt-5">售卡业绩</text> |
| | | <text class="font-16 green">{{userAchieve.cash | formatNum}}</text> |
| | | <text class="mt-5">现金业绩</text> |
| | | </view> |
| | | <view class="flex flex-v align-center performance-item"> |
| | | <text class="font-16 purple">600.00</text> |
| | | <text class="font-14 mt-5">项目业绩</text> |
| | | <text class="font-16 purple">{{userAchieve.cardUse | formatNum}}</text> |
| | | <text class="mt-5">划扣业绩</text> |
| | | </view> |
| | | </view> |
| | | <view class="flex justify-around mt-20"> |
| | | <view class="flex justify-around mt-15"> |
| | | <view class="flex flex-v align-center performance-item"> |
| | | <text class="font-16 blueness">600.00</text> |
| | | <text class="font-14 mt-5">产品业绩</text> |
| | | <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">600.00</text> |
| | | <text class="font-14 mt-5">余额划扣业绩</text> |
| | | <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">600.00</text> |
| | | <text class="font-14 mt-5">服务提成</text> |
| | | <text class="font-16 yellow">{{userAchieve.projCommission | formatNum}}</text> |
| | | <text class="mt-5">服务提成</text> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | <view class="flex align-center justify-between repository mt-20"> |
| | | <navigator url="./knowledge" class="flex align-center justify-between repository mt-10"> |
| | | <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> |
| | | </view> |
| | | </navigator> |
| | | </view> |
| | | </view> |
| | | </template> |
| | | |
| | | <script> |
| | | import liuyunoTabs from "@/components/liuyuno-tabs/liuyuno-tabs.vue"; |
| | | import HTabs from "@/components/liuyuno-tabs/liuyuno-tabs.vue"; |
| | | export default { |
| | | components: { |
| | | liuyunoTabs |
| | | HTabs |
| | | }, |
| | | data() { |
| | | return { |
| | | tabs:[ |
| | | { |
| | | state: 1, |
| | | name: '今日' |
| | | }, |
| | | { |
| | | state: 2, |
| | | name: '昨日' |
| | | }, |
| | | { |
| | | state: 3, |
| | | name: '本月' |
| | | }, |
| | | { |
| | | state: 4, |
| | | name: '上月' |
| | | }, |
| | | ], |
| | | 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 |
| | | }) |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style> |
| | | page{ |
| | | background: #F6F6F8; |
| | | } |
| | | .status_bar{ |
| | | background: #518EFF; |
| | | color: #FFFFFF; |
| | | } |
| | | .header{ |
| | | height: 100px; |
| | | background: #518EFF; |
| | | border-bottom-left-radius: 20px; |
| | | border-bottom-right-radius: 20px; |
| | | padding: 15px; |
| | | padding: 15px 10px; |
| | | } |
| | | .icon { |
| | | font-size: 18px; |
| | |
| | | width: 64px; |
| | | height: 64px; |
| | | border-radius: 50%; |
| | | flex: 0 0 64px; |
| | | } |
| | | .content{ |
| | | padding: 0 10px; |
| | |
| | | margin: 15px 0px 10px; |
| | | } |
| | | .title-img{ |
| | | width: 18px; |
| | | height: 18px; |
| | | width: 16px; |
| | | height: 16px; |
| | | } |
| | | .tab-box{ |
| | | border: 1px solid #EDEAF4; |
| | | background: #FFFFFF; |
| | | border-radius: 4px; |
| | | box-shadow:0 6px 6px rgba(237,234,244,0.5); |
| | | padding: 10px; |
| | | margin-top: 10px; |
| | | } |
| | | .tab{ |
| | | border-bottom: 1px solid #EDEAF4; |
| | | } |
| | | .performance-content{ |
| | | padding: 10px 0; |
| | | padding: 20px 0; |
| | | } |
| | | .performance-item{ |
| | | width: 33.3%; |
| | | font-size: 13px; |
| | | } |
| | | .repository{ |
| | | border: 1px solid #EDEAF4; |
| | | border-radius: 4px; |
| | | padding: 10px 3px; |
| | | box-shadow:0 6px 6px rgba(237,234,244,0.5); |
| | | 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> |