<template>
  <view class="container">
    <!-- 顶部导航栏 -->
<!--    <view class="header">-->
<!--      <view class="back-icon" @click="goBack">-->
<!--        <image class="icon" :src="require('@/static/images/my/notice.png')" mode="aspectFit"></image>-->
<!--      </view>-->
<!--      <text class="title">个人信息</text>-->
<!--    </view>-->

    <!-- 菜单列表 -->
    <view class="menu-list">
      <view
        v-for="(item, index) in menuItems"
        :key="index"
        class="menu-item"
        @click="navigateTo(item.path)"
      >
        <text class="menu-text">{{ item.title }}</text>
        <image class="arrow-icon" :src="require('@/static/images/my/enter.png')" mode="aspectFit"></image>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      menuItems: [
        {
          title: '基本信息',
          path: '/pages/mine/me/basicInfo'
        },
        {
          title: '我的地址',
          path: '/pages/my-address/index'
        },
        {
          title: '健康信息',
          path: '/pages/health-info/index'
        },
        {
          title: '人脸上传',
          path: '/pages/face-upload/index'
        },
        {
          title: '修改密码',
          path: '/pages/change-password/index'
        },
        {
          title: '挂失解绑',
          path: '/pages/unbind/index'
        }
      ]
    }
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    navigateTo(url) {
      uni.navigateTo({
        url
      })
    }
  }
}
</script>

<style lang="scss">
.container {
  background-color: #FBFCFF;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 88rpx;
  background: #fff;
  display: flex;
  align-items: center;
  padding: 0 32rpx;
  padding-top: 44px;
  z-index: 100;

  .back-icon {
    padding: 20rpx;
    margin-left: -20rpx;

    .icon {
      width: 40rpx;
      height: 40rpx;
    }
  }

  .title {
    flex: 1;
    text-align: center;
    font-size: 34rpx;
    font-weight: 500;
    color: #333;
    margin-right: 60rpx;
  }
}

.menu-list {
  margin-top: 50rpx;
  background: #FFFFFF;

  .menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 32rpx;
    border-bottom: 1rpx solid #f5f5f5;

    &:last-child {
      border-bottom: none;
    }

    .menu-text {
      font-size: 32rpx;
      color: #333;
    }

    .arrow-icon {
      width: 32rpx;
      height: 32rpx;
    }
  }
}
</style>

