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>
      <!-- #ifdef APP-PLUS||H5 -->
      <view style="height: var(--status-bar-height);"></view>
      <view style="height: 100rpx"></view>
      <!-- #endif -->
      <!-- <view v-if="!$store.state.app.token" class="my_head">
        <view class="department flex_a_c">
          <view class="section">产品技术部</view>
          <view class="" @click="login">去登陆</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.avatar||'../../static/img/public/avatar.png'" width="112.28rpx" height="112.28rpx" shape="circle">
            </u--image>
            <view v-if="!$store.state.app.token" @click="login" class="name_work">
              <view class="name">
                <text class="nickname">立即登录</text>
              </view>
              <view class="work">
                登录后可查看更多
              </view>
            </view>
            <view v-else class="name_work">
              <view class="name">
                <text class="nickname">姓名:{{ oaUserInfo.nickname }}</text>
                <!-- <text class="omit" v-if="oaUserInfo.admin.company">所属公司:{{ oaUserInfo.admin.company.company_name }}</text> -->
              </view>
              <view class="work">
				  电话:{{oaUserInfo.account}}
				
                <!-- 所属公司:<text class="omit" v-if="oaUserInfo.admin.company">{{ oaUserInfo.admin.company.company_name }}</text> -->
                <!-- {{ oaUserInfo.did_name }}({{ oaUserInfo.label_name }}) -->
              </view>
            </view>
          </view>
          <view v-if="$store.state.app.token" class="compile" @click="naviTo()">
            <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" v-if="!$store.state.app.token">*</view>
              <view class="num" v-else-if="eyeType">{{oaUserInfo.user_money||'0.00'}}</view>
              <view class="num" v-if="!eyeType">****</view>
              <view class="name">账户余额(元)</view>
            </view>
            <!-- <view class="cent_item" @click="naviTo('/subpkg/finance/finance')">
              <view class="num">0.00</view>
              <view class="name">冻结金额</view>
            </view> -->
            <view class="cent_item" @click="naviTo('/subpkg/finance/finance')">
              <!-- <view class="num">{{ oaUserInfo.company_money }}</view> -->
              <view class="num" v-if="!$store.state.app.token">*</view>
              <view class="num" v-else-if="eyeType">{{oaUserInfo.income||'0.00'}}</view>
              <view class="num" v-if="!eyeType">****</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 left">
            <!-- <view class="iconfont2" :class="item.icon"></view> -->
            <image :src="item.icon"></image>
            <view class="text">{{ item.name }}</view>
          </view>
          <uni-icons type="forward"></uni-icons>
        </view>
      </block>
    </view>
    <view class="log_out" v-if="$store.state.app.token" @click="logout">退出登录</view>
    <view class="log_out" v-else @click="login">登录账号</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',
      }
    },
    onReady() {
      uni.setNavigationBarColor({
        frontColor: '#ffffff',
        backgroundColor: '#3175f9'
      })
    },
    onLoad() {},
    onShow() {
      this.getOaUserInfo();
    },
    computed:{
      eyeType(){
        return this.$store.state.config.eyeType;
      },
      oaUserInfo(){
        return this.$store.state.app.userInfo||{avatar:'',admin:{company:{company_name:''}}};
      }
    },
    methods: {
      ...mapActions(['getWxLogin']),
      login() {
        uni.navigateTo({
          url:'/pages/oaLogin/oaLogin'
        })
      },
      logout(){
        let that = this;
        uni.showModal({
          content:'确定要退出登录吗',
          success: (e) => {
            if(e.confirm){
              that.$store.commit('SET_USERINFO',{
                user: null,
                token: null
              })
              that.$store.commit('LOGOUT');
              uni.navigateTo({
                url:'/pages/oaLogin/oaLogin'
              })
            }
          }
        })
      },
      async getOaUserInfo() {
        const res = await userInfo();
        this.$store.commit('setUserInfo', res.data);
      },
      naviTo(url) {
        url ?
          uni.navigateTo({
            url: url,
            fail(e) {
              uni.switchTab({
                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 0 28.07rpx 0;
    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;
      .name{
        .nickname{
          font-size: 32rpx;
          font-weight: 500;
          margin-right: 30rpx;
        }
      }
      .work {
        margin-top: 14.04rpx;
      }
      .omit{
        white-space: nowrap;
        /* 禁止换行 */
        overflow: hidden;
        /* 溢出隐藏 */
        text-overflow: ellipsis;
        /* 使用省略号代表被截断的文本 */
      }
    }

    .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);
      justify-content: space-around;

      .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: 20.56rpx;
      }
      
      .left{
        align-items: center;
      }
      
      image{
        width: 42rpx;
        height: 42rpx;
      }

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