Dining_Hall/pages/mine/me/index.vue

<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="handleMenuItemClick(item.path, item.title)"
      >
        <text class="menu-text">{{ item.title }}</text>
        <image class="arrow-icon" :src="require('@/static/images/my/enter.png')" mode="aspectFit"></image>
      </view>
    </view>

    <!-- uView 弹框组件 -->
    <u-modal
      :show="showDialog"
      :show-cancel-button="true"
      title="提示"
      :content="dialogContent"
      @confirm="handleConfirm"
      @cancel="handleCancel"
    ></u-modal>
  </view>
</template>

<script>
import UModal from '@/uni_modules/uview-ui/components/u-modal/u-modal.vue'

export default {
  components: { UModal },
  data() {
    return {
      menuItems: [
        {
          title: '基本信息',
          path: '/pages/mine/me/basicInfo'
        },
        {
          title: '我的地址',
          path: '/pages/mine/me/myAddress'
        },
        {
          title: '健康信息',
          path: '/pages/mine/me/healthInformation'
        },
        {
          title: '人脸上传',
          path: '/pages/mine/me/faceUpload'
        },
        {
          title: '修改密码',
          path: '/pages/change-password/index'
        },
        {
          title: '挂失解绑',
          path: '/pages/unbind/index'
        }
      ],
      showDialog: false, // 控制弹框显示隐藏
      dialogContent: '' // 弹框内容
    }
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    handleMenuItemClick(path, title) {
      if (title === '挂失解绑') {
        console.log('挂失解绑')
        this.dialogContent = '您确定要执行挂失解绑操作吗？'
        this.showDialog = true
      } else {
        this.navigateTo(path)
      }
    },
    navigateTo(url) {
      uni.navigateTo({
        url
      })
    },
    handleConfirm() {
      console.log('用户点击了确认')
      // 在这里处理确认逻辑
      this.showDialog = false
      // 例如：执行挂失解绑操作
      this.unbind()
    },
    handleCancel() {
      console.log('用户点击了取消')
      // 在这里处理取消逻辑
      this.showDialog = false
    },
    unbind() {
      // 挂失解绑的具体逻辑
      console.log('执行挂失解绑操作')
      // 例如：调用 API 进行挂失解绑
    }
  }
}
</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>