uniapp个人信息页面模版

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，可以编译到 iOS、Android、H5、以及各种小程序等多个平台。个人信息页面是应用中常见的一种页面类型，用于展示用户的基本信息，并可能包含编辑信息的功能。在uni-app中，你可以使用Vue的模板语法来构建个人信息页面。

以下是一个简单的uni-app个人信息页面模板示例：

<template>
  <view class="container">
    <!-- 头部标题 -->
    <view class="header">
      <text>个人信息</text>
    </view>
    <!-- 个人头像 -->
    <view class="avatar-area">
      <image :src="user.avatarUrl" class="avatar"></image>
    </view>
    <!-- 基本信息列表 -->
    <view class="info-list">
      <view class="info-item">
        <text>用户名：</text>
        <text>{{ user.username }}</text>
      </view>
      <view class="info-item">
        <text>手机号：</text>
        <text>{{ user.phoneNumber }}</text>
      </view>
      <view class="info-item">
        <text>邮箱：</text>
        <text>{{ user.email }}</text>
      </view>
      <!-- 更多个人信息 -->
    </view>
    <!-- 编辑按钮 -->
    <button @click="editInfo">编辑信息</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      user: {
        avatarUrl: '/static/avatar.png', // 用户头像地址
        username: '张三', // 用户名
        phoneNumber: '13800138000', // 手机号
        email: 'zhangsan@example.com' // 邮箱
        // 更多个人信息...
      }
    }
  },
  methods: {
    editInfo() {
      // 跳转到编辑信息页面或弹出编辑信息的模态框
      console.log('编辑信息功能尚未实现');
    }
  }
}
</script>

<style>
.container {
  padding: 10px;
}
.header {
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  margin: 20px 0;
}
.avatar-area {
  text-align: center;
  margin-bottom: 20px;
}
.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
.info-list {
  margin-bottom: 20px;
}
.info-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
</style>

这个模板展示了一个基础的个人信息页面布局，包括头部标题、用户头像、基本信息列表和编辑按钮。页面样式使用了内联的 `<style>` 标签定义，实际开发中也可以使用外部样式表。