veterans_H5/h5_web/pages/mine/mine.vue

<!-- 我的 -->
<template>
	<view class="mine">
		<view class="mine-bg"></view>
		<!--  用户信息   -->
		<u-card class="mine-card-1" :show-head="false">
			<view slot="body" class="mine-card-1-content">
				<view class="user-info">
					<view class="user-info-left">
						<view class="user-info-left-avatar" @click="jumpPage('/pages/personalModify/personalModify')">
							<u-avatar :src="vuex_user.avatar" mode="square" size="111"></u-avatar>
							<view class="name">{{ vuex_user.name }}</view>
						</view>
						<view class="user-info-left-attribute">
							<view class="veterans">
								<view>退役军人</view>
								<view class="link" @click="jumpPage('/pages/applyEducationCode/applyEducationCode')">未认证 ></view>
							</view>
							<view class="train">
								<view>适应性培训</view>
								<view class="link">未完成 ></view>
							</view>
						</view>
					</view>
					<view class="user-info-right">
						<view class="integral" @click="jumpPage('/pages/progressiveIntegral/progressiveIntegral')">
							<view>{{ userInfo.integral }}</view>
							<view>进步积分</view>
							<view>查看详情</view>
						</view>
					</view>
				</view>
				<u-divider :half-width="300" :height="50" :use-slot="false"></u-divider>
				<view class="user-integral">
					<view class="user-integral-item">
						<view>
							<text>8 </text>个
						</view>
						<view>技能培训</view>
					</view>
					<view class="user-integral-item">
						<view>
							<text>68.5 </text>小时
						</view>
						<view>学习时长</view>
					</view>
					<view class="user-integral-item">
						<view>
							<text>10 </text>次
						</view>
						<view>获得面试</view>
					</view>
				</view>
			</view>
		</u-card>

		<!-- 宫格 -->
		<u-card :show-head="false" class="grid-menu">
			<view slot="body">
				<u-grid :col="3" :border="false">
					<u-grid-item @click="jumpPage('/pages/myResume/myResume')">
						<view class="grid-menu-icon icon-resume-icon"></view>
						<view class="grid-text">我的简历</view>
					</u-grid-item>
					<u-grid-item @click="jumpPage('/pages/myDelivery/myDelivery')">
						<view class="grid-menu-icon icon-delivery-icon"></view>
						<view class="grid-text">我的投递</view>
					</u-grid-item>
					<u-grid-item @click="jumpPage('/pages/myInterview/myInterview')">
						<view class="grid-menu-icon icon-interview-icon"></view>
						<view class="grid-text">我的面试</view>
					</u-grid-item>
				</u-grid>
				<u-divider :half-width="300" :height="50" :use-slot="false"></u-divider>
				<u-grid :col="3" :border="false">
					<u-grid-item @click="jumpPage('/pages/mySkillsTraining/mySkillsTraining')">
						<view class="grid-menu-icon icon-train-icon"></view>
						<view class="grid-text">我的技能培训</view>
					</u-grid-item>
					<u-grid-item @click="jumpPage('/pages/myEvaluation/myEvaluation')">
						<view class="grid-menu-icon icon-evaluate-icon"></view>
						<view class="grid-text">我的评价</view>
					</u-grid-item>
					<u-grid-item @click="jumpPage('/pages/setting/setting')">
						<view class="grid-menu-icon icon-setting-icon"></view>
						<view class="grid-text">设置</view>
					</u-grid-item>
				</u-grid>
			</view>
		</u-card>
    
    <!-- ########################## -- 底部导航栏 -- ################################ -->
    <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>
	</view>
</template>

<script>
  import tabbarconfig from 'tabbarconfig.js';
  
	export default {
		name: 'Mine',
		data() {
			return {
				userInfo: {
					avatar: require('@/static/img/avatar.jpg'),
					nickName: '李明',
					integral: '688'
				},
        tabbarConfig: tabbarconfig
			}
		},
		methods: {
			/**
			 * 跳转到指定页面
			 */
			jumpPage(url) {
				this.$u.route(url)
			}
		}
	}
</script>

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