SmartParks_uniapp/pages/sys/user/mine.vue

<template>
  <view class="mine-container">
    <!-- 顶部蓝色背景和个人信息 -->
    <view class="mine-header">
      <image class="mine-bg" src="/static/ic_mine_topbg.png" mode="widthFix" />
      <view class="mine-info-row">
        <image class="mine-avatar" src="/static/ic_mine_head.png" />
        <view class="mine-userinfo">
          <view class="mine-nick">昵称</view>
          <view class="mine-phone">1789548878</view>
        </view>
      </view>
      <view class="mine-header-icons">
        <image class="mine-header-icon" src="/static/ic_mine_notice.png" @click="handleItemClick(-1)"/>
        <image class="mine-header-icon2" src="/static/ic_mine_setting.png" @click="handleItemClick(-2)"/>
      </view>
      <view class="mine-header-wave"></view>
    </view>
    <!-- 白色圆角面板 -->
    <view class="mine-panel">
      <view class="mine-list">
        <view class="mine-list-item" v-for="(item, idx) in list" :key="idx" @click="handleItemClick(idx)">
          <image class="mine-list-icon" :src="item.icon" />
          <text class="mine-list-text">{{ item.text }}</text>
          <text v-if="item.extra" class="mine-list-extra">{{ item.extra }}</text>
          <image v-if="!item.extra" class="mine-list-arrow" src="/static/ic_arrow_gray.webp" />
        </view>
      </view>
      <button class="logout-btn">退出登录</button>
    </view>
  </view>
</template>

<script>
export default {
  name: 'Mine',
  data() {
    return {
      list: [
        { icon: '/static/ic_mine_info.png', text: '我的信息' },
        { icon: '/static/ic_mine_pay.png', text: '我的缴费' },
        { icon: '/static/ic_mine_repair.png', text: '我的报修' },
        { icon: '/static/ic_mine_visitor.png', text: '我的访客' },
        { icon: '/static/ic_mine_check.png', text: '我的考勤' },
        { icon: '/static/ic_mine_pwd.png', text: '修改密码' },
        { icon: '/static/ic_mine_version.png', text: '系统版本', extra: 'v1.00.01' },
        { icon: '/static/ic_mine_setting2.png', text: '设置' }
      ]
    }
  },
  onLoad() {
  	this.$u.api.getUserInfo().then(res => {
  		if (res.code == '200'){
  			
  		}
  	});
  },
  methods: {
    handleItemClick(idx) {
      if (idx === 0) {
        uni.navigateTo({ url: '/pages/sys/user/changeInfo/changeInfo' });
      }else if(idx === -1){
		  uni.navigateTo({ url: '/pages/sys/user/message/message' });
	  }else if(idx === -2){
		  uni.navigateTo({ url: '/pages/sys/user/serviceCenter/serviceCenter' });
	  }else if(idx === 1){
		  uni.navigateTo({ url: '/pages/sys/user/myPayment/myPayment' });
	  }else if(idx === 2){
		  uni.navigateTo({ url: '/pages/sys/user/myRepair/myRepair' });
	  }else if(idx === 3){
		  uni.navigateTo({ url: '/pages/sys/user/myVisitor/myVisitor' });
	  }else if(idx === 4){
		  uni.navigateTo({ url: '/pages/sys/user/myRecord/myRecord' });
		  // uni.navigateTo({ url: '/pages/workbench/oa/oa' });
	  }
    }
  }
}
</script>

<style scoped>
.mine-container {
  height: 100vh;
  background: #f8f8f8;
  display: flex;
  flex-direction: column;
}
.mine-header {
  width: 100%;
  height: 343rpx;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 0;
  flex-shrink: 0; /* 防止被压缩 */
}
.mine-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 343rpx;
  z-index: 0;
}
.mine-header-wave {
  position: absolute;
  left: 0;
  bottom: -18rpx;
  width: 100%;
  height: 36rpx;
  background: #fff;
  border-bottom-left-radius: 36rpx;
  border-bottom-right-radius: 36rpx;
  z-index: 2;
}
.mine-info-row {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 3;
  margin-left: 32rpx;
  bottom: 127rpx;
}
.mine-header-icons {
  position: absolute;
  right: 22rpx;
  top: 86rpx;
  display: flex;
  z-index: 4;
}
.mine-avatar {
  width: 90rpx;
  height: 90rpx;
  border-radius: 50%;
  background: #fff;
  margin-right: 24rpx;
  border: 4rpx solid #fff;
}
.mine-userinfo {
  display: flex;
  flex-direction: column;
}
.mine-nick {
  color: #fff;
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 6rpx;
}
.mine-phone {
  color: #fff;
  font-size: 24rpx;
}

.mine-header-icon {
  width: 30rpx;
  height: 35rpx;
  margin-left: 24rpx;
}
.mine-header-icon2 {
  width: 33rpx;
  height: 33rpx;
  margin-left: 24rpx;
}
.mine-panel {
  position: relative;
  z-index: 10;
  background: #fff;
  border-top-left-radius: 30rpx;
  border-top-right-radius: 30rpx;
  margin-top: -51rpx;
  box-shadow: 0 -2rpx 16rpx rgba(0,0,0,0.04);
  padding: 0 0 40rpx 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1; /* 占据剩余空间 */
  overflow-y: auto; /* 开启滚动 */
}
.mine-list {
  width: 92vw;
  background: transparent;
  border-radius: 0;
  margin: 51rpx auto;
  box-shadow: none;
  padding: 0;
}
.mine-list-item {
  display: flex;
  align-items: center;
  padding: 0 0 0 0;
  height: 96rpx;
  position: relative;
  background: transparent;
}
.mine-list-item:last-child {
  border-bottom: none;
}
.mine-list-icon {
  width: 38rpx;
  height: 38rpx;
  margin: 0 24rpx 0 30rpx;
}
.mine-list-text {
  flex: 1;
  font-size: 28rpx;
  color: #1A1A1A;
}
.mine-list-extra {
  color: #999;
  font-size: 24rpx;
  margin-right: 10rpx;
}
.mine-list-arrow {
  width: 18rpx;
  height: 28rpx;
  margin-right: 24rpx;
}
.logout-btn {
  width: 88vw;
  height: 80rpx;
  background: #0090FF;
  color: #fff;
  font-size: 32rpx;
  border: none;
  border-radius: 40rpx;
  margin: 100rpx auto 0 auto;
  display: block;
  box-shadow: 0 18rpx 24rpx rgba(0,0,0,0.18);
  font-weight: bold;
}
</style>