hitap-chat/pages/mine/index.vue

<template>
  <view id="page">
    <view class="Width100 Box BorderBox" :style="bgUrl1">
		<view class="Content BorderBox">
			<top-title :is-show-left="false" :rightWidth='120'>
			  <template slot="right">
				<image :src="$.imgSrc + '/mine/setting.png'" @click="$.open('/pages/mine/setting')" mode="aspectFit" class="InlineBlock img"></image>
				<image :src="$.imgSrc + '/mine/chat.png'" mode="aspectFit" @click="$.open('/pages/mine/notice')" class="InlineBlock img"></image>
			  </template>
			</top-title>
			<view class="user Flex BorderBox" @click="checkObjEmpty(userInfo) ? $.open('/pages/logIn/userInfo'):$.open('/pages/logIn/logIn')">
				<u-avatar :src="userInfo.headUrl" :size="78"></u-avatar>
				<view class="name FontS_50rpx FontBold MarginL_15rpx">
					{{ userInfo.realName || userInfo.username || '请登录'}}
				</view>
			</view>
		</view>
		<view class="func PositionR BorderR_20rpx BG_FFFFFF BorderBox">
			<view class="title FontBold FontS_40rpx">
				常用功能
			</view>
			<view class="list Flex Flex_Warp">
				<view class="item Flex MarginT_10rpx PositionR" v-for="item in funcList" @click="handleClick(item)" :key="item.name">
					<image :src="$.imgSrc + item.icon" mode="aspectFit"></image>
					<view class="info">{{ item.name }}</view>
				</view>
			</view>
		</view>
	</view>
  </view>
</template>

<script>
import TopTitle from "../../components/top-title";
export default {
  components:{TopTitle},
  data() {
    return {
      $:this.$,
	  bgUrl1: '',
	  userInfo: {},
	  timer: null,
	  num: 0
	  // funcList: [
		 //  { id:1,name:'个人信息',url:'/pages/logIn/userInfo',icon:'/mine/userinfo.png' },
		 //  { id:2,name:'劳务保险',url:'/pages/mine/insurance',icon:'/mine/insurance.png' },
		 //  { id:3,name:'打卡记录',url:'',icon:'/mine/lean.png' },
		 //  { id:4,name:'培训记录',url:'/pages/mine/train',icon:'/mine/train.png' },
		 //  { id:5,name:'找活记录',url:'/pages/mine/jobfind',icon:'/mine/jobfind.png' },
		 //  { id:6,name:'人员管理',url:'/pages/mine/worker',icon:'/mine/jobfind.png' },
	  // ]
    }
  },
  computed:{
	  funcList(){
		  return [{ id:1,name:'个人信息',url:'/pages/logIn/userInfo',icon:'/mine/userinfo.png' }]
	  }

  },
  onShow(){
    let token = this.$.getData('token')
    const userInfo = this.$.getData('userInfo')
    if(userInfo) {
      this.userInfo = userInfo
    }
	// 顶部背景图
	this.bgUrl1 = "background-image:url('" + this.$.imgSrc + "/mine/mineBG.png');background-repeat: no-repeat;background-position: center top;background-size:100% 472rpx;"
    // if(!token){
    //   this.$.openNew('/pages/logIn/logIn')
    //   return
    // }
	if(this.userInfo.projectRole <= 1 && !this.timer) {
		this.timer = setInterval(() => {
			this.getReviewNum()
		},10 * 1000)
	}
  },
  onHide() {
  	this.timer && clearInterval(this.timer)
  },
  onLoad() {
  },
  methods: {
    checkObjEmpty(obj){
      if(JSON.stringify(obj) == '{}'){
        return false
      }
      return true
    },
    getBG(url){
      return "background-image:url('" + url + "');background-repeat: no-repeat;background-position: center top;background-size:100% 100%;"
    },
	handleClick(row) {
		this.$.open(row.url)
	},
	getReviewNum() {
		this.$request.globalRequest('/hyjg-admin/mapi/projectworker/getApplyWorkerCount', {}, 'POST').then(res => {
			if (res.code == 0) {
				this.num = res.data;
			}
		})
	}
  }
}
</script>

<style lang="scss" scoped>
page{
  background: #F2F2F2;
}

.Box {
	padding: 30rpx;
	padding-top:var(--status-bar-height);

	.img {
		width: 50rpx;
		height: 100%;
	}

	.img:nth-of-type(2) {
		margin-left: 20rpx;
	}

	.Content {
		.user {
			height: 500rpx;
			align-items: center;
		}
	}

	.func {
		width: 100%;
		height: 430rpx;
		top: -60rpx;
		padding: 30rpx;

		.title {
			margin-bottom: 20rpx;
		}

		.list {
			margin: auto;
			.item {
				padding: 12rpx;
				width: 25%;
				justify-content: center;
				flex-direction: column;
				align-items: center;
				box-sizing: border-box;

				image {
					width: 60rpx;
					height: 60rpx;
					margin-bottom: 20rpx;
				}
			}
		}
	}
}
</style>