uni-app 政务相关APP的个人中心页面

在开发政务相关APP的个人中心页面时，使用uni-app框架可以很好地实现跨平台开发，保证在iOS、Android以及小程序等平台上有一致的用户体验。以下是一个简要的个人中心页面代码示例，涵盖了一些常见的功能，如用户信息展示、修改密码、退出登录等。

首先，在pages目录下创建一个新的页面文件夹，例如user-center，并在其中创建user-center.vue文件。

<template>
  <view class="container">
    <view class="user-info">
      <image class="avatar" :src="userInfo.avatarUrl"></image>
      <text class="name">{{ userInfo.name }}</text>
      <text class="email">{{ userInfo.email }}</text>
    </view>
    <button @click="changePassword">修改密码</button>
    <button @click="logout">退出登录</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        avatarUrl: 'https://example.com/avatar.png',
        name: '张三',
        email: 'zhangsan@example.com'
      }
    };
  },
  methods: {
    changePassword() {
      uni.showModal({
        title: '修改密码',
        content: '请前往设置页面修改密码',
        showCancel: false,
        success: function (res) {
          if (res.confirm) {
            uni.navigateTo({
              url: '/pages/settings/change-password/change-password'
            });
          }
        }
      });
    },
    logout() {
      uni.showModal({
        title: '确认退出',
        content: '您确定要退出登录吗？',
        success: function (res) {
          if (res.confirm) {
            // 清除用户信息，比如通过uni.setStorageSync或其他方式
            uni.setStorageSync('userInfo', null);
            uni.removeStorageSync('token'); // 如果有token也一并清除
            uni.switchTab({
              url: '/pages/login/login'
            });
          } else if (res.cancel) {
            console.log('取消退出登录');
          }
        }
      });
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20px;
}
.user-info {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
.name {
  font-size: 18px;
  margin-top: 10px;
}
.email {
  font-size: 14px;
  color: #888;
  margin-top: 5px;
}
button {
  margin-top: 20px;
}
</style>

在这个示例中，我们展示了一个简单的个人中心页面，包括用户头像、姓名和邮箱，并提供了修改密码和退出登录的按钮。修改密码的功能通过导航到设置页面实现，而退出登录则通过清除用户信息和token，并重定向到登录页面来完成。你可以根据实际需求进一步扩展和修改这些功能。