BJ_ZTEITS-Developers / parking-cloud-yudao

Commit 79ab6f308d8567805647a77c41900782b0626593

Authored by sfmind
1 parent e9c0c452

用户修改昵称

Inline Side-by-side
Showing 2 changed files with 59 additions and 19 deletions
yudao-ui-app/common/api.js
  View file @79ab6f3
  1 +//请求工具参考https://ext.dcloud.net.cn/plugin?id=392
1 2 const { http } = uni.$u
2 3  
3 4 /* login */
... ... @@ -19,6 +20,11 @@ export const updateAvatar = filePath =>
19 20 fileType: 'image',
20 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 29 /* index */
24 30 // 获取滚动图数据
... ...
yudao-ui-app/pages/profile/profile.vue
  View file @79ab6f3
... ... @@ -10,9 +10,33 @@
10 10 </view>
11 11 <view class="info-item">
12 12 <view class="label">昵称：</view>
13   - <view class="info">
  13 + <view v-if="!nameEditOn" class="info">
14 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 40 </view>
17 41 </view>
18 42 <view class="info-item">
... ... @@ -27,7 +51,7 @@
27 51 </template>
28 52  
29 53 <script>
30   -import { getUserInfo, updateAvatar } from '../../common/api'
  54 +import { getUserInfo, updateAvatar, updateNickname } from '../../common/api'
31 55  
32 56 export default {
33 57 data() {
... ... @@ -37,7 +61,9 @@ export default {
37 61 avatar: '',
38 62 mobile: ''
39 63 },
40   - avatarFiles: []
  64 + avatarFiles: [],
  65 + nameEditOn: false,
  66 + tempName: ''
41 67 }
42 68 },
43 69 onLoad() {
... ... @@ -45,28 +71,27 @@ export default {
45 71 },
46 72 methods: {
47 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 78 handleAvatarClick() {
57 79 uni.chooseImage({
58 80 success: chooseImageRes => {
59 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 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 129 </style>
... ...