yanyan
2 years ago
12 changed files with 302 additions and 23 deletions
|
After Width: | Height: | Size: 131 KiB |
@ -0,0 +1,118 @@ |
|||
<template> |
|||
<view> |
|||
<view class="item"> |
|||
<view class="tip">编辑用户昵称</view> |
|||
<input type="nickname" @blur="updateUserNameMethod" v-model="name" > |
|||
</view> |
|||
<view class="line"></view> |
|||
<view class="item" @click="chooseImage()"> |
|||
<view class="tip">点击修改头像</view> |
|||
<image :src="avatarUrl"></image> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import {mapState,mapMutations} from 'vuex' |
|||
export default { |
|||
data() { |
|||
return { |
|||
avatarUrl:"", |
|||
name:"" |
|||
}; |
|||
}, |
|||
onLoad(options) { |
|||
wx.cloud.init({ traceUser: true}); |
|||
this.avatarUrl = options.avatarUrl |
|||
this.name = options.name |
|||
}, |
|||
|
|||
computed: { |
|||
...mapState('m_user', ['userId']) |
|||
}, |
|||
methods:{ |
|||
...mapMutations('m_user', ['updateUserName','updateAvatarUrl', 'updateRedirectInfo']), |
|||
//选择图片 |
|||
chooseImage() { |
|||
wx.chooseMedia({ |
|||
count: 1, |
|||
mediaType: ['image'], |
|||
sizeType: ['compressed'], //可以指定是原图还是压缩图，这里用压缩 |
|||
sourceType: ['album', 'camera'], //从相册选择 |
|||
success: (res) => { |
|||
this.updateUserAvatarUrl(res.tempFiles[0].tempFilePath) |
|||
} |
|||
}) |
|||
}, |
|||
//编辑名称 |
|||
async updateUserNameMethod(){ |
|||
const { |
|||
data: res |
|||
} = await uni.$http.post('/small/wechat/editInfo',{guid:this.userId,nickname:this.name}) |
|||
if (!res.success) return uni.$showMsg() |
|||
this.updateUserName(this.name) |
|||
uni.showToast({ |
|||
icon:'none', |
|||
title:'编辑成功' |
|||
}) |
|||
}, |
|||
async updateUserAvatarUrl(url){ |
|||
//wx.uploadFile本身有一个this，所以要通过外部var _this = this 把this带进来 |
|||
var _this = this |
|||
wx.uploadFile({ |
|||
url: uni.$http.baseUrl + '/small/wechat/editUserAvatar', |
|||
filePath: url, |
|||
name: 'file', |
|||
formData:{ |
|||
'guid':this.userId |
|||
}, |
|||
success:function(res){ |
|||
if (res.data!=null) { |
|||
const obj = JSON.parse(res.data); |
|||
if (obj==null || !obj.success) return uni.$showMsg() |
|||
_this.avatarUrl = uni.$http.baseUrl + obj.data; |
|||
_this.updateAvatarUrl(uni.$http.baseUrl + obj.data) |
|||
uni.showToast({ |
|||
icon:'none', |
|||
title:'编辑成功' |
|||
}) |
|||
} |
|||
}, |
|||
}) |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.item { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
margin: 15rpx; |
|||
border-bottom: 1rpx solid gray; |
|||
padding-bottom: 20rpx; |
|||
} |
|||
|
|||
.tip { |
|||
font-size: 44rpx; |
|||
margin: 20rpx; |
|||
color: red; |
|||
} |
|||
|
|||
.item image { |
|||
width: 200rpx; |
|||
height: 200rpx; |
|||
border-radius: 10rpx; |
|||
margin: 10rpx 30rpx; |
|||
|
|||
} |
|||
|
|||
.item input { |
|||
flex: 1; |
|||
border: 1px solid gray; |
|||
border-radius: 20rpx; |
|||
padding: 5rpx 15rpx; |
|||
} |
|||
|
|||
</style> |
|||
Loading…
Reference in new issue