veterans_H5/h5_web/pages/mine/mine.vue

<!-- 我的 -->
<template>
  <view class="mine">
    <!-- 背景 -->
    <view class="mine-bg"></view>

    <!-- 个人信息 -->
    <view class="mine-info">
      <!-- 头像和积分 -->
      <view class="mine-info-header">
        <view class="mine-info-header-left">
          <view class="avatar" @click="jumpPage('/pages/personalModify/personalModify')">
            <u-avatar :src="memberinfo.avatar" mode="circle" size="130" />
          </view>
          <view class="name">{{ memberinfo.name }}</view>
        </view>
        <view class="mine-info-header-right" @click="jumpPage('/pages/progressiveIntegral/progressiveIntegral')">
          <view>进步<br />积分</view>
          <view>{{ integral || 0 }}</view>
          <u-icon name="arrow-right" color="#fff" size="30" />
        </view>
      </view>

      <!-- 认证 -->
      <view class="mine-info-authentication">
        <view class="mine-info-authentication-item">
          <view>退役军人</view>
          <view v-if="memberinfo.auditStatus === 0" class="no-certified">认证中</view>
          <view v-else-if="memberinfo.auditStatus === 2" class="had certified">已认证</view>
          <view class="no-certified" v-else @click="jumpPage('/pages/applyEducationCode/applyEducationCode')">未认证</view>
        </view>
        <view class="mine-info-authentication-item">
          <view>适应性培训</view>
          <view v-if="memberinfo.adaptTrainIsPass === 1" class="had passed">已通过</view>
          <view @click="jumpPage('/pages/basicTraining/basicTraining')" class="no-certified" v-else>未通过</view>
        </view>
      </view>

      <!-- 个人获得 -->
      <view class="mine-info-gain">
        <view class="mine-info-gain-item">
          <view>{{ countData.classCount || 0 }}<text>个</text></view>
          <view>技能培训</view>
        </view>
        <view class="mine-info-gain-item">
          <view>{{ countData.learnTime ? (Number(countData.learnTime) / 3600).toFixed(2) : 0 }}<text>小时</text></view>
          <view>学习时长</view>
        </view>
        <view class="mine-info-gain-item">
          <view>{{ countData.interviewTimes || 0 }}<text>次</text></view>
          <view>获得面试</view>
        </view>
      </view>

      <!-- 单元格 -->
      <view class="mine-info-cell1">
        <u-cell-group :border="false">
          <u-cell-item title="我的简历" @click="jumpPage('/pages/myResume/myResume')">
            <u-image class="cell-icon jianli" width="34" height="33" slot="icon" src="../../static/img/jianlitongguo.png" mode="aspectFit"></u-image>
          </u-cell-item>
          <u-cell-item title="我的投递" @click="jumpPage('/pages/myDelivery/myDelivery')">
            <u-image class="cell-icon toudi" slot="icon" width="34" height="40" src="../../static/img/toudimoren.png" mode="aspectFit"></u-image>
          </u-cell-item>
          <u-cell-item title="我的面试" @click="jumpPage('/pages/myInterview/myInterview')">
            <u-image
              class="cell-icon mianshi"
              width="34"
              height="40"
              slot="icon"
              src="../../static/img/mianshi-houxuanren.png"
              mode="aspectFit"
            ></u-image>
          </u-cell-item>
        </u-cell-group>
      </view>
      <!-- 单元格 -->
      <view class="mine-info-cell1">
        <u-cell-group :border="false">
          <u-cell-item title="我的技能培训" @click="jumpPage('/pages/mine/skillsTraining/skillsTraining')">
            <u-image class="cell-icon peixun" width="34" height="40" slot="icon" src="../../static/img/jinengx.png" mode="aspectFit"></u-image>
          </u-cell-item>
          <u-cell-item title="我的评价" @click="jumpPage('/pages/inbuild/inbuild')">
            <u-image class="cell-icon pingjia" width="34" height="40" slot="icon" src="../../static/img/pingjia.png" mode="aspectFit"></u-image>
          </u-cell-item>
        </u-cell-group>
      </view>

      <!-- 单元格 -->
      <view class="mine-info-cell1">
        <u-cell-group :border="false">
          <u-cell-item title="设置" @click="jumpPage('/pages/setting/setting')">
            <u-image class="cell-icon shezhi" width="34" height="40" slot="icon" src="../../static/img/shezhi.png" mode="aspectFit"></u-image>
          </u-cell-item>
        </u-cell-group>
      </view>
    </view>
    <!-- ########################## -- 底部导航栏 -- ################################ -->
    <u-tabbar
      :list="tabbarConfig.tabbarList"
      :height="tabbarConfig.height"
      :mid-button="tabbarConfig.midButton"
      :inactive-color="tabbarConfig.inactiveColor"
      :active-color="tabbarConfig.activeColor"
      :mid-button-size="tabbarConfig.midButtonSize"
    ></u-tabbar>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
import tabbarconfig from 'tabbarconfig.js';

export default {
  name: 'Mine',
  data() {
    return {
      tabbarConfig: tabbarconfig,
      veteEducStatus: '',
      memberinfo: '',
      countData: '',
      integral: 0
    };
  },
  onShow() {
    this.getMemberinfo();
    this.getCountResul();
    this.getIntegralTotal();
  },
  methods: {
    /**
     * 获取个人总积分
     */
    getIntegralTotal() {
      this.$u.api.mine.getIntegralTotalApi().then((res) => {
        // console.log('用户统计信息:', res.data)
        if (res.code === 200) {
          this.integral = res.data;
        }
      });
    },
    /**
     * 获取用户统计信息
     */
    getCountResul() {
      this.$u.api.mine.getCountResulApi().then((res) => {
        // console.log('用户统计信息:', res.data)
        if (res.code === 200) {
          this.countData = res.data;
        }
      });
    },
    /**
     * 获取用户基本信息
     */
    getMemberinfo() {
      this.$u.api
        .getmemberinfo()
        .then((res) => {
          console.log('用户基本信息:', res.data);
          if (res.code === 200) {
            this.memberinfo = res.data;
            this.$u.vuex('vuex_memberInfo', res.data);
          } else {
            this.$refs.uToast.show({
              title: res.msg,
              type: 'error'
            });
          }
        })
        .catch((err) => {
          this.$refs.uToast.show({
            title: err.msg,
            type: 'error'
          });
        });
    },
    /**
     * 跳转到指定页面
     */
    jumpPage(url) {
      this.$u.route(url);
    }
  }
};
</script>

<style lang="scss" scoped>
@import './mine.scss';
</style>