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>