<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/mine/me/faceUpload'
        },
        {
          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 {
  margin-top: -20px;
  background-color: #FFFFFF;
}

.menu-list {
  background: #FFFFFF;

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

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

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

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

