写一个uni.getUserProfile的页面以及实现逻辑

页面代码：

<template>
  <view>
    <button @tap="getUserProfile">获取用户信息</button>
    <view v-if="userInfo">
      <image :src="userInfo.avatarUrl" mode="widthFix"></image>
      <view>昵称：{{userInfo.nickName}}</view>
      <view>性别：{{genderMap[userInfo.gender]}}</view>
      <view>城市：{{userInfo.city}}</view>
    </view>
  </view>
</template>

逻辑代码：

<script>
export default {
  data() {
    return {
      userInfo: null,
      genderMap: {
        0: "未知",
        1: "男性",
        2: "女性"
      }
    };
  },
  methods: {
    async getUserProfile() {
      try {
        const [error, res] = await uni.getUserProfile({
          desc: "获取你的昵称、头像、地区及性别"
        });
        if (error) {
          uni.showToast({
            title: "获取用户信息失败",
            icon: "none"
          });
          return;
        }
        this.userInfo = res.userInfo;
      } catch (err) {
        uni.showToast({
          title: "获取用户信息失败",
          icon: "none"
        });
      }
    }
  }
};
</script>

逻辑说明：

- 在 data 中定义了 userInfo 对象来存储获取到的用户信息，同时定义了 genderMap 对象用于处理性别。
- 在 getUserProfile 方法中使用了 async/await 来异步获取用户信息，如果获取成功则将结果存储到 userInfo 中；如果获取失败则使用 uni.showToast 方法提示用户。