OfficeApp/pages/office_app/oaMy/oaMy.vue

<template>
  <view class="">
    <view class="my_head">
      <!-- <view class="department flex_a_c">
        <view class="section">产品技术部</view>
        <view class="">直属领导：XXX</view>
      </view> -->
    </view>
    <view class="personage">
      <view class="my_msg flex_a_c_j_sb">
        <view class="flex_a_c">
          <u--image :showLoading="true" :src="oaUserInfo.thumb" width="112.28rpx" height="112.28rpx" shape="circle">
          </u--image>
          <view class="name_work">
            <view class="name">
              <text>{{ oaUserInfo.did_leader }}</text>
              <text>{{ oaUserInfo.mobile }}</text>
            </view>
            <view class="work">
              {{ oaUserInfo.did_name }}({{ oaUserInfo.label_name }})
            </view>
          </view>
        </view>
        <view class="compile" @click="alterMyInfo">
          <view class="iconfont icon-bianji"></view>
          <view class="">编辑</view>
        </view>
      </view>
      <view class="assess">
        <view class="ass_cent flex_a_c_j_sb">
          <view class="cent_item">
            <view class="num">{{ oaUserInfo.achievements_money }}</view>
            <view class="name">绩效考核</view>
          </view>
          <view class="cent_item">
            <view class="num">{{ oaUserInfo.department_money }}</view>
            <view class="name">部门奖金</view>
          </view>
          <view class="cent_item">
            <view class="num">{{ oaUserInfo.company_money }}</view>
            <view class="name">公司奖金</view>
          </view>
        </view>
      </view>
    </view>
    <view class="other_guide">
      <block v-for="(item,i) in myOaData" :key="i">
        <view class="other_item flex_a_c_j_sb" @click="navTo(item.url)">
          <view class="flex_a_c">
            <view class="iconfont2" :class="item.icon"></view>
            <view class="text">{{ item.name }}</view>
          </view>
          <view class="iconfont icon-you"></view>
        </view>
      </block>
    </view>
    <view class="log_out">退出登录</view>
    <tabbar></tabbar>
  </view>
</template>

<script>
  import { getUserIndexAPI } from '@/api/oaApi.js'
  import { Toast } from '@/libs/uniApi.js'
  import { myOaData } from '@/static/server/server.js'
  import tabbar from '../components/tabbar'
  export default {
    components: {
      tabbar
    },
    data() {
      return {
        myOaData: myOaData,
        src: 'https://cdn.uviewui.com/uview/album/1.jpg',
        oaUserInfo: {}
      }
    },
    onReady() {
      uni.setNavigationBarColor({
        frontColor: '#ffffff',
        backgroundColor: '#0122c7'
      })
    },
    onLoad() {
      this.getOaUserInfo()
    },
    onShow() {},
    methods: {
      async getOaUserInfo() {
        const res = await getUserIndexAPI()
		console.log(res,'111');
        this.oaUserInfo = res
      },
      navTo(url) {
        url ?
          uni.navigateTo({
            url: url
          }) : Toast('暂未开放')
      },
      alterMyInfo() {
        uni.navigateTo({
          url: '/pages/office_app/personal_center'
        })
      }
    },
    onPullDownRefresh() {
      this.getOaUserInfo()
      uni.stopPullDownRefresh()
    }
  }
</script>

<style lang="scss">
  .my_head {
    padding: 0 28.07rpx;
    height: 154.39rpx;
    background-color: $theme-oa-color;

    .department {
      padding-top: 38.6rpx;
      font-size: 31.58rpx;
      color: #fff;

      .section {
        margin-right: 57.89rpx;
      }
    }
  }

  .personage {
    position: relative;
    padding: 42.11rpx 28.07rpx;
    border-radius: 12px;
    background-color: #fff;
    width: 694.74rpx;
    margin-left: 50%;
    transform: translate(-50%, -43.86rpx);

    .name_work {
      margin-left: 31.58rpx;
      font-size: 28.07rpx;

      .work {
        margin-top: 14.04rpx;
      }
    }

    .my_msg {
      .compile {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
    }

    .assess {
      height: 170.18rpx;
    }

    .ass_cent {
      width: 100%;
      padding: 31.58rpx 66.67rpx;
      position: absolute;
      left: 0;
      bottom: 0;
      height: 170.18rpx;
      border-radius: 12px;
      background-color: $theme-oa-color;

      .cent_item {
        font-size: 24.56rpx;
        color: #fff;
        text-align: center;

        .num {
          font-size: 38.6rpx;
          margin-bottom: 21.05rpx;
        }

      }
    }
  }

  .other_guide {
    width: 694.74rpx;
    margin: 0 auto;
    padding: 28.07rpx;
    background-color: #fff;
    border-radius: 12px;

    .other_item {
      height: 87.72rpx;
      border-bottom: 1px solid #F0F5F7;

      .text {
        font-size: 28.07rpx;
        margin-left: 24.56rpx;
      }

      .iconfont2 {
        font-size: 42.11rpx;
      }
    }
  }

  .log_out {
    color: #fff;
    border-radius: 100px;
    text-align: center;
    line-height: 84.21rpx;
    margin: 0 auto;
    margin-top: 84.21rpx;
    width: 614.04rpx;
    height: 84.21rpx;
    background: #3274F9;
    box-shadow: 0px 9px 26px 1px #E9EFF5;
  }
</style>