Uni-app + uview 个人信息页修改用户昵称、性别、个性签名

Profile.vue >

<template><view class="profile"><u-navbar title="个人信息" :background="background"></u-navbar><!-- 第一组cell --><u-cell-group class="profile-content"><!-- 头像 --><u-cell-item title="头像" :arrow="false" @tap="chooseAvatar"><view class="right-icon" slot="right-icon"><!-- 剪裁头像 --><image class="avatar" :src="userInfo.avatar" mode="aspectFill"></image><u-icon name="camera" class="camera"></u-icon></view></u-cell-item><!-- 昵称 --><u-cell-item title="昵称" :arrow="false" @tap="nickNameChange('nickName')"><view class="nick-right" slot="right-icon"><!-- 编辑状态 --><u-input v-if="isEdit" class="edit-input" v-model="userInfo.nickName" input-align='right' :focus="true":clearable="false" @confirm="inputNameChange('nickName')"></u-input><!-- 一开始为非编辑状态 --><block v-else><view class="">{{userInfo.nickName}}</view><u-icon name="edit-pen" color="#a2a2a2"></u-icon></block></view></u-cell-item><!-- 性别 --><u-cell-item title="性别" :arrow="false"><view class="nick-right" slot="right-icon"><u-radio-group v-model="userInfo.gender" @change="radioGroupChange"><u-radio :name="1">男生</u-radio><u-radio :name="0">女生</u-radio></u-radio-group></view></u-cell-item><!-- 个性签名 --><u-cell-item title="个性签名" @tap="signatureChange"></u-cell-item></u-cell-group><!-- 第二组cell --><u-cell-group class="profile-content"><u-cell-item title="手机号"></u-cell-item><u-cell-item title="邮箱"></u-cell-item><u-cell-item title="修改密码"></u-cell-item><u-cell-item title="注销账号"></u-cell-item></u-cell-group><!-- 个性签名模态框 confirm点击确认触发--><u-modal v-model="signShow" :show-cancel-button="true" title="个性签名" @confirm="signChange('personalSignature')"><view class="slot-content"><u-input v-model="userInfo.personalSignature" type="textarea" :border="true" height="150" :auto-height="true"></u-input></view></u-modal><u-toast ref="uToast" /></view>
</template><script>import {mapState,mapActions} from 'vuex'import {Encrypt,EncryptMd5} from '@/utils/aes/aes.js'import userApi from '@/service/mine.js'import tokenApi from '@/service/token.js'export default {data() {return {background: {backgroundColor: '#f5f5f5'},isEdit: false, //最初为非编辑状态signShow: false,//个性签名模态框}},computed: {...mapState({userInfo: state => state.user.userInfo})},methods: {...mapActions(['changeUserInfoActions']),//获取用户信息请求 刷新vuex getUserInfo() {userApi.getUserInfo().then(res => {if (res.meta.code === '200') {let info = res.data.data// 上面显示 昵称 与 头像  info.nickName = info.nickName ? info.nickName : '默认昵称'info.avatar = info.avatar ? info.avatar : '/static/me/avatar.jpeg'// 存储到vuex中this.changeUserInfoActions(info)}})},//更新用户信息请求updateProfile(info) {//console.log(this.userInfo[info]) //测试名tokenApi.createToken().then(res => { //请求到防止重复提交的token的接口后，再请求更新profilelet params = {//比如avatar: this.userInfo[avatar] 就是找到this.userInfo.avatar[info]: this.userInfo[info],id: this.userInfo.id,token: res.data.token}//console.log(params)if (res.meta.code === '200') {userApi.updateProfile(params).then(res => {if (res.meta.code === '200') {//提示更新用户信息成功this.$refs.uToast.show({title: '更新用户信息成功',type: 'success',icon: false})//**刷新vuex中数据 渲染this.getUserInfo()//console.log(this.userInfo.nickName)}}).catch(err => {this.$refs.uToast.show({title: err.meta.msg,type: 'error',icon: false})})}})},//点击cell框修改昵称nickNameChange(nickName) {//点击变成编辑状态this.isEdit = !this.isEditif (!this.isEdit) { //点击后，为false也就是非编辑状态，才发送请求更新数据console.log(this.userInfo.nickName)this.updateProfile(nickName)}},//input框点击完成确认修改昵称inputNameChange(nickName){this.updateProfile(nickName)this.isEdit = false//改为非编辑状态},//更新性别radioGroupChange(e) { //e为v-model绑定的0/1console.log(e);//0,1console.log(this.userInfo.gender)//0,1this.updateProfile('gender')       },//修改个人签名signatureChange(){this.signShow=true},//在模态框中提交个人签名signChange(Signature){this.updateProfile(Signature)}}}
</script>

mine.js > api

import $http from './request.js'
import {Decrypt} from'@/utils/aes/aes.js'export default {//获取用户信息getUserInfo() {return $http.request({url: '/member/getInfo',method: 'GET',header:{"Content-Type": "application/json","Authorization": Decrypt(uni.getStorageSync('token'))}})},//修改个人信息updateProfile({token,...params}){return $http.request({url: '/member/update',method: 'POST',data:{...params},header:{"Content-Type": "application/json","token":token,"Authorization":Decrypt(uni.getStorageSync('token'))}})}
}

Uni-app + uview 个人信息页修改用户昵称、性别、个性签名相关推荐

微信系统维护用户暂时无法修改头像、昵称和个性签名
微信系统维护,部分功能将暂时受到影响.昨天,微信发布系统维护消息:近期微信将进行系统维护,即日起至本月底,用户暂时无法修改头像.昵称和个性签名.其他功能不受影响.由此带来的不便,请广大用户谅解.稍早时 ...
Uni-app + uview 个人信息页上传、剪裁头像至服务器
AvatarCropper 头像裁剪 | uView - 多平台快速开发的UI框架 - uni-app UI框架 profile.vue > <template><view c ...
微信小程序-获取用户头像信息以及修改用户头像
这里主要用到button的open-type功能,官网已有说明: 给button设置open-type="chooseAvatar",来使bindchooseavatar方法生效, ...
java怎么修改会员信息_JavaWeb用户信息管理系统-修改用户操作的实现
1创建更新用户持久层 void updateUserByUserId(Users users); /** * 更新用户 * @param users */ @Override public void ...
JavaWeb用户信息管理系统-修改用户操作的实现
1 创建更新用户持久层 void updateUserByUserId(Users users); /*** 更新用户* @param users*/@Overridepublic void upda ...
CSDN 如何修改用户昵称？
温馨提示:用户昵称30天内仅能修改1次. PC端修改步骤: step 1.打开个人中心-个人资料,鼠标移动到用户昵称上后,点击编辑 step 2.输入新的用户昵称,点击提交,待审核通过即可 APP端 ...
uni.app小程序登录页持久化存储和退出后清除本地缓存
持久化存储在store里面的user.js(自己创建的)中 export default {state: {status: false, //登录的状态,获取数据中status是1,登录成功时状态为 ...
微信小程序如何获取用户昵称性别地区等信息
在inde.wxml文件中添加一个按钮,当点击按钮时获取用户信息 <button open-type="getUserInfo" bindgetuserinfo=" ...
用户控件（显示用户信息，修改用户名密码）的WebPart预览版
*********************************************************************** * ...

Uni-app + uview 个人信息页修改用户昵称、性别、个性签名

Uni-app + uview 个人信息页修改用户昵称、性别、个性签名相关推荐

最新文章

热门文章

Uni-app + uview 个人信息页 修改用户昵称、性别、个性签名

Uni-app + uview 个人信息页 修改用户昵称、性别、个性签名相关推荐

最新文章

热门文章

Uni-app + uview 个人信息页修改用户昵称、性别、个性签名

Uni-app + uview 个人信息页修改用户昵称、性别、个性签名相关推荐