JiangNingUmale-h5/pages/mine/index.vue

<template>
  <view class="mine-container">
    <view class="mine-bg"></view>
    <view class="mine-main" :style="{ top: statusBarHeight + 'px' }">
      <view class="mine-name">我的</view>
      <view class="user-cell">
        <image
          class="user-image"
          src="/static/images/user-image.png"
          mode="aspectFill"
          @click="handleProfile()"
        ></image>
        <view class="user-systeam">
          <view class="user-isLogin">{{ userInfo ? userInfo.account : "登录/注册" }}</view>
          <view class="user-hint">欢迎来到系统</view>
        </view>
      </view>
      <view class="mine-cell-group">
        <u-cell-group :border="false">
          <u-cell icon="setting-fill" title="我的事件" :isLink="true" @click="myEvent">
            <image
              src="/static/images/cell1-mine.png"
              mode="aspectFill"
              slot="icon"
              class="cell-icon"
            >
            </image>
          </u-cell>
          <u-cell icon="setting-fill" title="我的任务" :isLink="true" @click="myTask">
            <image
              src="/static/images/cell2-mine.png"
              mode="aspectFill"
              slot="icon"
              class="cell-icon"
            >
            </image>
          </u-cell>
          <!-- <u-cell icon="setting-fill" title="我的考勤" :isLink="true">
            <image
              src="/static/images/cell3-mine.png"
              mode="aspectFill"
              slot="icon"
              class="cell-icon"
            >
            </image>
          </u-cell>
          <u-cell icon="setting-fill" title="我的请假" :isLink="true">
            <image
              src="/static/images/cell4-mine.png"
              mode="aspectFill"
              slot="icon"
              class="cell-icon"
            >
            </image>
          </u-cell>
          <u-cell
            icon="setting-fill"
            title="修改密码"
            :isLink="true"
            url="/subcontract/mine/ChangePassword/ChangePassword"
          >
            <image
              src="/static/images/cell5-mine.png"
              mode="aspectFill"
              slot="icon"
              class="cell-icon"
            >
            </image>
          </u-cell> -->
          <u-cell
            :border="false"
            icon="setting-fill"
            title="检查更新"
            :isLink="true"
            value="版本1.0.1"
          >
            <image
              src="/static/images/cell6-mine.png"
              mode="aspectFill"
              slot="icon"
              class="cell-icon"
            >
            </image>
          </u-cell>
        </u-cell-group>
      </view>
      <u-button
		@click="editCG"
        class="view-global"
        :text="userInfo ? '退出登录' : '前往登录'"
		:color="userInfo ? 'linear-gradient(90deg, #EA3330 0%, #F8404C 100%)' : 'linear-gradient(90deg, #3976F1 0%, #3CA0F6 100%)'"
        :customStyle="{
          height: '88rpx',
          borderRadius: '24rpx',
        }"
      ></u-button>
    </view>
  </view>
</template>
<script>
	import {
		removeToken
	} from '@/utils/auth'
	import { listNews } from "@/api/jn/news";
export default {
  data() {
    return {
      statusBarHeight: null,
	  userInfo:null,
    };
  },
  onLoad() {
    this.statusBarHeight = uni.$u.sys().statusBarHeight; //去掉了系统导航栏后，要获取系统状态栏高度以免页面塌陷
  },
  mounted() {
  	this.userInfo = uni.getStorageSync("userInfo")
  },
  onShow() {
  	this.getNumber();
  },
  methods: {
	  getNumber(){
	  	listNews({status: 0}).then((res) => {
	  		if(res.code == 200) {
	  			this.$nextTick(()=>{
	  				uni.setTabBarBadge({
	  					//显示数字
	  					index: 1, //tabbar下标
	  					text: res.total + '', //数字
	  				});
	  			})
	  		}
	  	})
	  },
    //前往修改头像页面
    handleProfile() {
      uni.$u.route({
        url: "/subcontract/mine/ChangeProfile/ChangeProfile",
      });
    },
	// 退出登录,前往登录
	editCG(){
		if(this.userInfo) {
			this.$modal.confirm('确定注销并退出系统吗？').then(() => {
				removeToken();
				this.$tab.reLaunch("/pages/myLogin");
			})
			
		}
	},
	// 跳转我的事件
	myEvent(){
		uni.$u.route({
		  url: "/subcontract/mine/event/index",
		});
	},
	// 跳转我的任务
	myTask(){
		uni.$u.route({
		  url: "/subcontract/mine/task/task",
		});
	}
  },
};
</script>
<style lang="scss" scoped>
.mine-bg {
  height: 380rpx;
  width: 100%;
  background: url("@/static/images/mineBg.png");
  background-size: 100% 100%;
}

.mine-main {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  box-sizing: border-box;
  padding: 0 30rpx;

  .mine-name {
    height: 44px;
    line-height: 44px;
    font-size: 40rpx;
    font-weight: bold;
    color: #ffffff;
    text-align: center;
    letter-spacing: 2px;
    margin-bottom: 130rpx;
  }

  .user-cell {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 25rpx 45rpx;
    background-color: #ffffff;
    border-radius: 24rpx;
    box-shadow: 0rpx 6rpx 20rpx rgba(57, 118, 241, 0.1);

    .user-image {
      height: 128rpx;
      width: 128rpx;
      border-radius: 50%;
      margin-right: 20rpx;
    }

    .user-isLogin {
      font-size: 44rpx;
      font-weight: bold;
      color: #34373b;
    }

    .user-hint {
      font-size: 28rpx;
      font-weight: 400;
      color: #aec1d9;
      margin-top: 20rpx;
    }
  }

  .mine-cell-group {
    margin-top: 50rpx;
    background: #ffffff;
    box-shadow: 0rpx 6rpx 20rpx rgba(57, 118, 241, 0.1);
    border-radius: 24rpx;
    box-sizing: border-box;
    padding: 0rpx 20rpx;
    overflow: hidden;
    margin-bottom: 39rpx;
  }
}

.cell-icon {
  display: inline-block;
  height: 39rpx;
  width: 37rpx;
  margin-right: 25rpx;
}

/deep/.u-cell .u-cell__body {
  padding: 30rpx 20rpx;
}

/deep/.u-cell__title .u-cell__title-text {
  font-size: 34rpx;
  font-weight: 500;
  color: #34373b;
}

/deep/.u-cell__body .u-cell__value {
  font-size: 28rpx;
  font-weight: 400;
  color: #616367;
}
</style>