uni-app修改头像和个人信息

这篇具有很好参考价值的文章主要介绍了uni-app修改头像和个人信息。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

效果图

uni-app修改头像和个人信息,uni-app,uni-app,javascript,前端文章来源地址https://www.toymoban.com/news/detail-816789.html

代码(总)

<script setup lang="ts">
import { reqMember, reqMemberProfile } from '@/services/member/member'
import type { MemberResult, Gender } from '@/services/member/type'
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
import { useMemberStore } from '@/stores/modules/member'
let useMemberStores = useMemberStore()
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
let memberList = ref<MemberResult>({} as MemberResult)
// 获取个人信息
let getMember = async () => {
  let res = await reqMember()
  memberList.value = res.result
}
// 修改头像
let onAvatatChange = () => {
  // 调用拍照/选择图片
  uni.chooseMedia({
    count: 1,
    mediaType: ['image'],
    success: (res) => {
      // 本地路径
      let { tempFilePath } = res.tempFiles[0]
      uni.uploadFile({
        url: '/member/profile/avatar',
        name: 'file',
        filePath: tempFilePath,
        success: (res) => {
          if (res.statusCode === 200) {
            let avatar = JSON.parse(res.data).result.avatar
            memberList.value!.avatar = avatar
            // 同步修改pina仓库的头像信息
            useMemberStores.profile!.avatar = avatar
            uni.showToast({ icon: 'success', title: '修改成功' })
          } else {
            uni.showToast({ icon: 'error', title: '出现错误' })
          }
        },
      })
    },
  })
}
// 修改性别
const onGenderChange: UniHelper.RadioGroupOnChange = (e) => {
  memberList.value.gender = e.detail.value as Gender
}
// 修改生日
const onBirthday: UniHelper.DatePickerOnChange = (ev) => {
  memberList.value.birthday = ev.detail.value
  // console.log(ev)
}
// 修改城市
let fullLocationCode: [string, string, string] = ['', '', '']
const onFullLocationChange: UniHelper.RegionPickerOnChange = (ev) => {
  memberList.value.fullLocation = ev.detail.value.join(' ')
  fullLocationCode = ev.detail.code!
  console.log(ev.detail)
}
// 点击保保存
const onSave = async () => {
  const res = await reqMemberProfile({
    nickname: memberList.value.nickname,
    gender: memberList.value.gender,
    birthday: memberList.value.birthday,
    provinceCode: fullLocationCode[0] || undefined,
    cityCode: fullLocationCode[1] || undefined,
    countyCode: fullLocationCode[2] || undefined,
  })
  // 同步更改仓库的用户昵称
  useMemberStores.profile!.nickname = res.result.nickname
  uni.showToast({ icon: 'success', title: '保存成功' })
  setTimeout(() => {
    uni.navigateBack()
  }, 500)
}
onLoad(() => {
  getMember()
})
</script>

<template>
  <view class="viewport">
    <!-- 导航栏 -->
    <view class="navbar" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
      <navigator open-type="navigateBack" class="back icon-left" hover-class="none"></navigator>
      <view class="title">个人信息</view>
    </view>
    <!-- 头像 -->
    <view class="avatar">
      <view class="avatar-content" @tap="onAvatatChange">
        <image class="image" :src="memberList?.avatar" mode="aspectFill" />
        <text class="text">点击修改头像</text>
      </view>
    </view>
    <!-- 表单 -->
    <view class="form">
      <!-- 表单内容 -->
      <view class="form-content">
        <view class="form-item">
          <text class="label">账号</text>
          <text class="account">{{ memberList?.account }}</text>
        </view>
        <view class="form-item">
          <text class="label">昵称</text>
          <input class="input" type="text" placeholder="请填写昵称" v-model="memberList.nickname" />
        </view>
        <view class="form-item">
          <text class="label">性别</text>
          <radio-group @change="onGenderChange">
            <label class="radio">
              <radio value="男" color="#27ba9b" :checked="memberList?.gender === '男'" /></label>
            <label class="radio">
              <radio value="女" color="#27ba9b" :checked="memberList?.gender === '女'" /></label>
          </radio-group>
        </view>
        <view class="form-item">
          <text class="label">生日</text>
          <picker
            class="picker"
            mode="date"
            start="1900-01-01"
            :end="new Date()"
            :value="memberList?.birthday"
            @change="onBirthday"
          >
            <view v-if="memberList?.birthday">{{ memberList.birthday }}</view>
            <view class="placeholder" v-else>请选择日期</view>
          </picker>
        </view>
        <view class="form-item">
          <text class="label">城市</text>
          <picker
            class="picker"
            mode="region"
            :value="memberList.fullLocation?.split(' ')"
            @change="onFullLocationChange"
          >
            <view v-if="memberList?.fullLocation">{{ memberList.fullLocation }}</view>
            <view class="placeholder" v-else>请选择城市</view>
          </picker>
        </view>
        <view class="form-item">
          <text class="label">职业</text>
          <input
            class="input"
            type="text"
            placeholder="请填写职业"
            :value="memberList?.profession"
          />
        </view>
      </view>
      <!-- 提交按钮 -->
      <button class="form-button" @tap="onSave">保 存</button>
    </view>
  </view>
</template>

<style lang="scss">
page {
  background-color: #f4f4f4;
}

.viewport {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-image: url(https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/order_bg.png);
  background-size: auto 420rpx;
  background-repeat: no-repeat;
}

// 导航栏
.navbar {
  position: relative;

  .title {
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
  }

  .back {
    position: absolute;
    height: 40px;
    width: 40px;
    left: 0;
    font-size: 20px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

// 头像
.avatar {
  text-align: center;
  width: 100%;
  height: 260rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .image {
    width: 160rpx;
    height: 160rpx;
    border-radius: 50%;
    background-color: #eee;
  }

  .text {
    display: block;
    padding-top: 20rpx;
    line-height: 1;
    font-size: 26rpx;
    color: #fff;
  }
}

// 表单
.form {
  background-color: #f4f4f4;

  &-content {
    margin: 20rpx 20rpx 0;
    padding: 0 20rpx;
    border-radius: 10rpx;
    background-color: #fff;
  }

  &-item {
    display: flex;
    height: 96rpx;
    line-height: 46rpx;
    padding: 25rpx 10rpx;
    background-color: #fff;
    font-size: 28rpx;
    border-bottom: 1rpx solid #ddd;

    &:last-child {
      border: none;
    }

    .label {
      width: 180rpx;
      color: #333;
    }

    .account {
      color: #666;
    }

    .input {
      flex: 1;
      display: block;
      height: 46rpx;
    }

    .radio {
      margin-right: 20rpx;
    }

    .picker {
      flex: 1;
    }
    .placeholder {
      color: #808080;
    }
  }

  &-button {
    height: 80rpx;
    text-align: center;
    line-height: 80rpx;
    margin: 30rpx 20rpx;
    color: #fff;
    border-radius: 80rpx;
    font-size: 30rpx;
    background-color: #27ba9b;
  }
}
</style>

到了这里,关于uni-app修改头像和个人信息的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uni-app通过uni.getSystemInfoSync()获得的手机信息

    突发奇想,记录一下,hbuilder的真机测试可以获取到哪些手机信息。 console.log(uni.getSystemInfoSync()) 打印之后的信息为: 假设,我设计一个页面,设计图如下所示:已知button部分的高度为100rpx,空白求空白部分的高度。 设:空白部分高度为heightW,空白部分的高度为: uni.height

    2024年02月20日
    浏览(39)
  • uni-app:登录与支付--用户信息

    实现用户头像昵称区域的基本布局 在  my-userinfo  组件中,定义如下的 UI 结构: 美化当前组件的样式: 在  my.vue  页面中,为最外层包裹性质的  view  容器,添加  class=\\\"my-container\\\"  的类名,并美化样式如下:       渲染用户的头像和昵称 在  my-userinfo  组件中,通过 

    2023年04月17日
    浏览(46)
  • uni-app获取位置信息(经纬度转换地址信息)

    1.使用uni.getLocation()获取位置信息 2.下载qqmap-wx-jssdk.js插件插件下载地址 3.使用腾讯位置服务器对经纬度进行一个地址信息转换(自己创建一个应用即可) 全都勾选上 4.注意!!关键之处!! 一定要在微信公众号平台上 服务器配置 apis.map.qq.com 上代码 template js 效果图 不当之处望

    2024年02月13日
    浏览(49)
  • 微信小程序修改原生组件样式(uni-app)

    微信小程序修改原生组件样式 全局修改,直接将修改的样式写在全局的样式文件中; 特殊情况:修改swiper指示点样式时,需要包裹在swiper的样式选择器下才生效。 直接将下列代码放在全局样式中是不会生效的,需要加上swiper组件的元素选择器或swiper组件的其他样式名也可。

    2024年02月05日
    浏览(76)
  • uni-app:js修改元素样式(宽度、外边距)

    效果 代码 1、在 view 元素上添加一个 ref 属性 ,用于在JavaScript代码中获取对该元素的引用:view ref=\\\" myView \\\" id=\\\"mybox\\\"/view 2、获取元素引用 :const viewElement = this.$refs. myView .$el; 3、修改元素宽度:viewElement.style.width = \\\'100px\\\'; 4、修改元素左外边距:viewElement.style.marginLeft = \\\'20px\\\'; 这种

    2024年02月07日
    浏览(47)
  • uni-app如何获取位置信息(经纬度)

    提示:这里可以添加本文要记录的大概内容: 在实际项目中很多时候我们需要获取设备的位置信息,去展示给客户,或者以位置信息为参数,继续向服务器获取一些数据。接下来以uni-app小程序项目为例来介绍获取位置信息的思路 提示:以下是本篇文章正文内容,下面案例可

    2024年02月11日
    浏览(54)
  • 前端-vscode中开发uni-app

    node -v npm install @vue/ cli@4.5.15 -g 指定版本号:4.5.15 在自己电脑目录下创建项目: demo02是自己项目名字 在D/AllCode/vs_vue2_uniapp目录下执行一下命令: vue create -p dcloudio/uni-preset-vue demo02 要想在vscode执行npm命令 我们打开pages.json和manifest.json,发现会报红,这是因为在json中是不能写注

    2024年01月18日
    浏览(67)
  • uni-app自定义多环境配置,动态修改appid

    在企业级项目开发中,一般都会分为开发、测试、预发布、生产等多个环境,在工程化中使用不同的打包命令改变环境变量解决不同环境各种变量需要手动修改的问题,比如接口请求地址,不同环境的请求路径前缀都是不同的。在使用 uni-app 开发项目时,一般都是选择使用

    2024年02月12日
    浏览(40)
  • uni-app 获取用户的openID和基本信息

    在微信公众平台, https://mp.weixin.qq.com/ ,找到小程序的id和密钥 (1)uni.login:获取用户的登录凭证。 https://uniapp.dcloud.io/api/plugins/login?id=login (2)uni.request:发送网络请求,通过登录凭证获取用户的openID。 https://uniapp.dcloud.io/api/request/request?id=request (3)请求接口说明 https:/

    2023年04月08日
    浏览(57)
  • UNI-APP 人脸识别分析及实现(前端)

    实现流程: 1、打开摄像头——自动读取照片——传输给后端——后端交由第三发或自主开发来识别——返回结果(相识度比) 2、打开摄像头——自动读取视频——传输给后端——后端通过解析视频,截取图片交由第三发或自主开发来识别——返回结果(相识度比) 通过分

    2023年04月08日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包