OfficeApp/pages/oaMy/oaMy.vue

<template>
  <view class="my">
    <view class="head_box">
      <image class="head_img" src="../../static/img/home/head-bg.png"></image>
      <view v-if="!oaUserInfo" class="my_head">
        <view class="department flex_a_c">
          <view class="section">产品技术部</view>
          <view class="" @click="login">去登陆</view>
        </view>
      </view>
      <view v-else class="personage">
        <view class="my_msg flex_a_c_j_sb">
          <view class="flex_a_c">
            <u--image :showLoading="true" :src="oaUserInfo.avatar" width="112.28rpx" height="112.28rpx" shape="circle">
            </u--image>
            <view class="name_work">
              <view class="name">
                <text style="margin-right: 30rpx;">{{ oaUserInfo.nickname }}</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" @click="naviTo('/subpkg/finance/finance')">
              <!-- <view class="num">{{ oaUserInfo.achievements_money }}</view> -->
              <view class="num">1000</view>
              <view class="name">可提现金额</view>
            </view>
            <view class="cent_item">
              <!-- <view class="num">{{ oaUserInfo.department_money }}</view> -->
              <view class="num">0</view>
              <view class="name">冻结金额</view>
            </view>
            <view class="cent_item" @click="test">
              <!-- <view class="num">{{ oaUserInfo.company_money }}</view> -->
              <view class="num">0</view>
              <view class="name">充值金额</view>
            </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="naviTo(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" @click="naviTo('/pages/oaLogin/oaLogin')">退出登录</view>
    <!-- <tabbar></tabbar> -->
  </view>
</template>

<script>
  import { mapActions } from 'vuex'
  import { getUserIndexAPI } from '@/api/oaApi.js'
  import { userInfo } from '@/api/oaUser.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: '#3175f9'
      })
    },
    onLoad() {
      this.getOaUserInfo()
    },
    onShow() {},
    methods: {
      ...mapActions(['getWxLogin']),
      login() {
        // #ifndef H5 || APP
        // #endif
        // #ifdef MP-WEIXIN || MP
        this.getWxLogin()
        // #endif
      },
      async getOaUserInfo() {
        const res = await userInfo()
        this.oaUserInfo = res.data;
        this.$store.commit('setUserInfo', this.oaUserInfo);
      },
      naviTo(url) {
        url ?
          uni.navigateTo({
            url: url
          }) : Toast('暂未开放')
      },
      alterMyInfo() {
        uni.navigateTo({
          url: '/pages/views/personal_center'
        })
      }
    },
    onPullDownRefresh() {
      this.getOaUserInfo()
      uni.stopPullDownRefresh()
    }
  }
</script>

<style lang="scss">
  .my {
    .head_box {
      position: relative;
      width: 100vw;
      padding-top: 30rpx;
      margin-bottom: 30rpx;

      .head_img {
        position: absolute;
        // z-index: -1;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
      }
    }

  }

  .my_head {
    padding: 0 28.07rpx;
    height: 90.39rpx;
    position: relative;
    // z-index: 1;
    // top: 20rpx;
    // background-color: $theme-oa-color;
    // background-image: url('../../static/img/home/head-bg.png');

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

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

  .personage {
    // position: relative;
    padding: 42.11rpx 28.07rpx 28.07rpx 28.07rpx;
    border-radius: 12px;
    // background-color: #fff;
    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: rgba(#fff, 0.18);

      .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>