Commit 79ab6f308d8567805647a77c41900782b0626593
1 parent
e9c0c452
用户修改昵称
Showing
2 changed files
with
59 additions
and
19 deletions
yudao-ui-app/common/api.js
| 1 | +//请求工具参考https://ext.dcloud.net.cn/plugin?id=392 | ||
| 1 | const { http } = uni.$u | 2 | const { http } = uni.$u |
| 2 | 3 | ||
| 3 | /* login */ | 4 | /* login */ |
| @@ -19,6 +20,11 @@ export const updateAvatar = filePath => | @@ -19,6 +20,11 @@ export const updateAvatar = filePath => | ||
| 19 | fileType: 'image', | 20 | fileType: 'image', |
| 20 | filePath: filePath | 21 | filePath: filePath |
| 21 | }) | 22 | }) |
| 23 | +//修改用户昵称 | ||
| 24 | +export const updateNickname = params => | ||
| 25 | + http.put('/app-api/member/user/update-nickname', {}, { | ||
| 26 | + params | ||
| 27 | + }) | ||
| 22 | 28 | ||
| 23 | /* index */ | 29 | /* index */ |
| 24 | // 获取滚动图数据 | 30 | // 获取滚动图数据 |
yudao-ui-app/pages/profile/profile.vue
| @@ -10,9 +10,33 @@ | @@ -10,9 +10,33 @@ | ||
| 10 | </view> | 10 | </view> |
| 11 | <view class="info-item"> | 11 | <view class="info-item"> |
| 12 | <view class="label">昵称：</view> | 12 | <view class="label">昵称：</view> |
| 13 | - <view class="info"> | 13 | + <view v-if="!nameEditOn" class="info"> |
| 14 | <view class="value">{{ userInfo.nickname }}</view> | 14 | <view class="value">{{ userInfo.nickname }}</view> |
| 15 | - <u-icon class="btn" name="edit-pen"></u-icon> | 15 | + <u-icon |
| 16 | + class="btn" | ||
| 17 | + name="edit-pen" | ||
| 18 | + @click=" | ||
| 19 | + tempName = userInfo.nickname | ||
| 20 | + nameEditOn = true | ||
| 21 | + " | ||
| 22 | + ></u-icon> | ||
| 23 | + </view> | ||
| 24 | + <view v-else class="name-edit"> | ||
| 25 | + <u--input maxlength="10" border="bottom" v-model="tempName"></u--input> | ||
| 26 | + <view class="edit-btn-group"> | ||
| 27 | + <u-tag class="edit-btn" text="保存" plain size="mini" type="primary" @click="handleSaveBtnClick"></u-tag> | ||
| 28 | + <u-tag | ||
| 29 | + class="edit-btn" | ||
| 30 | + text="取消" | ||
| 31 | + plain | ||
| 32 | + size="mini" | ||
| 33 | + type="info" | ||
| 34 | + @click=" | ||
| 35 | + tempName = '' | ||
| 36 | + nameEditOn = false | ||
| 37 | + " | ||
| 38 | + ></u-tag> | ||
| 39 | + </view> | ||
| 16 | </view> | 40 | </view> |
| 17 | </view> | 41 | </view> |
| 18 | <view class="info-item"> | 42 | <view class="info-item"> |
| @@ -27,7 +51,7 @@ | @@ -27,7 +51,7 @@ | ||
| 27 | </template> | 51 | </template> |
| 28 | 52 | ||
| 29 | <script> | 53 | <script> |
| 30 | -import { getUserInfo, updateAvatar } from '../../common/api' | 54 | +import { getUserInfo, updateAvatar, updateNickname } from '../../common/api' |
| 31 | 55 | ||
| 32 | export default { | 56 | export default { |
| 33 | data() { | 57 | data() { |
| @@ -37,7 +61,9 @@ export default { | @@ -37,7 +61,9 @@ export default { | ||
| 37 | avatar: '', | 61 | avatar: '', |
| 38 | mobile: '' | 62 | mobile: '' |
| 39 | }, | 63 | }, |
| 40 | - avatarFiles: [] | 64 | + avatarFiles: [], |
| 65 | + nameEditOn: false, | ||
| 66 | + tempName: '' | ||
| 41 | } | 67 | } |
| 42 | }, | 68 | }, |
| 43 | onLoad() { | 69 | onLoad() { |
| @@ -45,28 +71,27 @@ export default { | @@ -45,28 +71,27 @@ export default { | ||
| 45 | }, | 71 | }, |
| 46 | methods: { | 72 | methods: { |
| 47 | loadUserInfoData() { | 73 | loadUserInfoData() { |
| 48 | - getUserInfo() | ||
| 49 | - .then(res => { | ||
| 50 | - this.userInfo = res.data | ||
| 51 | - }) | ||
| 52 | - .catch(err => { | ||
| 53 | - //console.log(err) | ||
| 54 | - }) | 74 | + getUserInfo().then(res => { |
| 75 | + this.userInfo = res.data | ||
| 76 | + }) | ||
| 55 | }, | 77 | }, |
| 56 | handleAvatarClick() { | 78 | handleAvatarClick() { |
| 57 | uni.chooseImage({ | 79 | uni.chooseImage({ |
| 58 | success: chooseImageRes => { | 80 | success: chooseImageRes => { |
| 59 | const tempFilePaths = chooseImageRes.tempFilePaths | 81 | const tempFilePaths = chooseImageRes.tempFilePaths |
| 60 | - console.log(tempFilePaths) | ||
| 61 | - updateAvatar(tempFilePaths[0]) | ||
| 62 | - .then(res => { | ||
| 63 | - console.log(res) | ||
| 64 | - }) | ||
| 65 | - .catch(err => { | ||
| 66 | - //console.log(err) | ||
| 67 | - }) | 82 | + updateAvatar(tempFilePaths[0]).then(res => { |
| 83 | + this.userInfo.avatar = res.data | ||
| 84 | + this.$store.commit('setUserInfo', this.userInfo) | ||
| 85 | + }) | ||
| 68 | } | 86 | } |
| 69 | }) | 87 | }) |
| 88 | + }, | ||
| 89 | + handleSaveBtnClick() { | ||
| 90 | + updateNickname({ nickname: this.tempName }).then(res => { | ||
| 91 | + this.nameEditOn = false; | ||
| 92 | + this.userInfo.nickname = this.tempName | ||
| 93 | + this.$store.commit('setUserInfo', this.userInfo) | ||
| 94 | + }) | ||
| 70 | } | 95 | } |
| 71 | } | 96 | } |
| 72 | } | 97 | } |
| @@ -90,6 +115,15 @@ export default { | @@ -90,6 +115,15 @@ export default { | ||
| 90 | margin-left: 30rpx; | 115 | margin-left: 30rpx; |
| 91 | } | 116 | } |
| 92 | } | 117 | } |
| 118 | + .name-edit { | ||
| 119 | + @include flex-left; | ||
| 120 | + .edit-btn-group { | ||
| 121 | + @include flex; | ||
| 122 | + .edit-btn { | ||
| 123 | + margin-left: 20rpx; | ||
| 124 | + } | ||
| 125 | + } | ||
| 126 | + } | ||
| 93 | } | 127 | } |
| 94 | } | 128 | } |
| 95 | </style> | 129 | </style> |