yanyan
3 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