Dining_Hall/pages/mine/me/index.vue

<template>
	<page-meta :page-font-size="fontValue+'px'" :root-font-size="fontValue+'px'"></page-meta>
  <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>
	
	<u-button shape="circle" color="#FF6816" @click="onLoginOut" style="width: 90%;margin: 0 auto;height: 40px;position:absolute;bottom: 50px;left: 5%;font-size: 30rpx;">
	  退出登录
	</u-button>

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

<script>
	import Cookies from "js-cookie";
	import UModal from '@/uni_modules/uview-ui/components/u-modal/u-modal.vue'
	
export default {
  components: { UModal },
  data() {
    return {
      fontValue:Cookies.get('fontSize') || 8,
      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/mine/me/changePassword'
        },
		{
		  title: '绑定手机号',
		  path: '/pages/mine/me/bindingPhone'
		},
        {
          title: '挂失解绑',
          path: '/pages/mine/me/carteenCard'
        }
      ],
      showDialog: false, // 控制弹框显示隐藏
      dialogContent: '' // 弹框内容
    }
  },
  methods: {
	//返回
    goBack() {
      uni.navigateBack()
    },
	//退出
	onLoginOut() {
		this.$modal.confirm('确定注销并退出系统吗？').then(() => {
		  this.$store.dispatch('LogOut').then(() => {
			  Cookies.remove('token')
			  uni.reLaunch({ url: '/pages/login' })
		  })
		})
    },
    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;
  height: 100vh;
  position: relative;
}

.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>