library-wechat/subpkg/pages/user-info/user-info.vue

<template>
  <view class="user-info-page">
    <!-- 昵称 -->
    <view class="form-item">
      <text class="label">昵称</text>
      <input class="input" v-model="userInfo.nickname" placeholder="请输入昵称" />
      <uni-icons type="right" size="18"></uni-icons>
    </view>

    <!-- 性别（picker 选择） -->
    <view class="form-item">
      <text class="label">性别</text>
      <picker class="picker" :value="genderIndex" :range="genderList" @change="onGenderChange">
        <view class="picker-text">{{ userInfo.gender || "请选择" }}</view>
      </picker>
       <uni-icons type="right" size="18"></uni-icons>
    </view>

    <!-- 年龄 -->
    <view class="form-item">
      <text class="label">年龄</text>
      <input class="input" v-model="userInfo.age" placeholder="请输入年龄" type="number" />
       <uni-icons type="right" size="18"></uni-icons>
    </view>

    <!-- 职业 -->
    <view class="form-item">
      <text class="label">职业</text>
      <input class="input" v-model="userInfo.job" placeholder="请输入职业" />
       <uni-icons type="right" size="18"></uni-icons>
    </view>

    <!-- 保存按钮 -->
    <view class="save-box">
      <button class="save-btn" @click="saveUserInfo">保存</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 用户信息
      userInfo: {
        nickname: "小图",
        gender: "女",
        age: "",
        job: ""
      },
      // 性别选择器
      genderList: ["男", "女", "保密"],
      genderIndex: 1 // 默认选中女
    };
  },
  methods: {
    // 性别选择改变
    onGenderChange(e) {
      const index = e.detail.value;
      this.genderIndex = index;
      this.userInfo.gender = this.genderList[index];
    },
    
    // 保存个人信息
    saveUserInfo() {
      console.log("要保存的信息：", this.userInfo);
      
      // 对接你的保存接口
      uni.showToast({
        title: "保存成功",
        icon: "success"
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.user-info-page {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding: 10px;
  box-sizing: border-box;
  padding-bottom: 80px;
}

.form-item {
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px 0 15px;
  height: 50px;
  border-bottom: 1px solid #eee;
}

.label {
  width: 100px;
  font-size: 16px;
  color: #333;
}

/* 输入框样式 */
.input {
  flex: 1;
  font-size: 16px;
  color: #333;
  text-align: right;
  margin-right: 6px;
}

/* 选择器样式 */
.picker {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  margin-right: 6px;
}
.picker-text {
  font-size: 16px;
  color: #333;
  text-align: right;
}

/* 保存按钮 */
.save-box {
  position: fixed;
  left: 15px;
  right: 15px;
  bottom: 30px;
}
.save-btn {
  padding: 5px 0;
  background-color: #007aff;
  color: #fff;
  border-radius: 23px;
  font-size: 16px;
}
</style>