| | |
| | | <template> |
| | | <view class="person-msg"> |
| | | <view class="head c-content" @click="changeFace"> |
| | | <view class="head c-content"> |
| | | <image v-if="form.face" :src="endpoint + '/' + form.face" mode=""></image> |
| | | <image v-else :src="'/pages/subComponents/static/missing-face.png'" mode=""></image> |
| | | <view>点击修改头像</view> |
| | | <button class="avatar-button" type="default" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">点击修改头像</button> |
| | | </view> |
| | | <u-form :model="form" ref="uForm" class="form"> |
| | | <u-form-item label="昵称" label-width="150"> |
| | | <u-input v-model="form.nickName" placeholder="请输入昵称" /> |
| | | <u-input v-model="form.nickName" placeholder="请输入昵称" type="nickname"/> |
| | | |
| | | </u-form-item> |
| | | |
| | | <u-form-item label="性别" label-width="150"> |
| | | <u-radio-group v-model="form.sex" :active-color="lightColor"> |
| | | <u-radio name="1">男</u-radio> |
| | |
| | | this.getMemberTag() |
| | | }, |
| | | methods: { |
| | | |
| | | toggleTag(tag) { |
| | | console.log(tag) |
| | | }, |
| | |
| | | } |
| | | }); |
| | | }, |
| | | |
| | | /** |
| | | * 修改头像 |
| | | * @param {Object} e |
| | | */ |
| | | onChooseAvatar(e){ |
| | | console.log(e.detail.avatarUrl) |
| | | console.log("") |
| | | console.log(e.detail) |
| | | const tempFilePath = e.detail.avatarUrl; |
| | | let fileName = tempFilePath.substring(tempFilePath.lastIndexOf('/') + 1); |
| | | if (fileName.indexOf('%') > -1) { |
| | | fileName = decodeURIComponent(fileName); |
| | | } |
| | | const fileKey = getFileKey(fileName); |
| | | this.cosClient.uploadFile({ |
| | | Bucket: this.bucket, |
| | | Region: this.region, |
| | | Key: fileKey, |
| | | FilePath: tempFilePath, |
| | | SliceSize: 1024 * 1024 * 5 /* 触发分块上传的阈值,5M */ |
| | | }, (err, data) => { |
| | | if (err) { |
| | | console.log('上传失败', err); |
| | | } else { |
| | | this.form.face = fileKey; |
| | | } |
| | | }); |
| | | }, |
| | | /** |
| | | * 修改头像 |
| | | */ |
| | | changeFace(index) { |
| | | uni.chooseImage({ |
| | | count: 1, |
| | | sizeType: ['compressed'], |
| | | sourceType: ['album'], |
| | | success: (chooseImageRes) => { |
| | | const tempFilePath = chooseImageRes.tempFilePaths[0]; |
| | | let fileName = tempFilePath.substring(tempFilePath.lastIndexOf('/') + 1); |
| | | // 处理安卓可能的URI编码 |
| | | if (fileName.indexOf('%') > -1) { |
| | | fileName = decodeURIComponent(fileName); |
| | | } |
| | | const fileKey = getFileKey(fileName); |
| | | this.cosClient.uploadFile({ |
| | | Bucket: this.bucket, |
| | | Region: this.region, |
| | | Key: fileKey, |
| | | FilePath: tempFilePath, |
| | | SliceSize: 1024 * 1024 * 5 /* 触发分块上传的阈值,5M */ |
| | | }, (err, data) => { |
| | | if (err) { |
| | | console.log('上传失败', err); |
| | | } else { |
| | | this.form.face = fileKey; |
| | | } |
| | | }); |
| | | }, |
| | | }); |
| | | }, |
| | | // changeFace(index) { |
| | | // uni.chooseImage({ |
| | | // count: 1, |
| | | // sizeType: ['compressed'], |
| | | // sourceType: ['album'], |
| | | // success: (chooseImageRes) => { |
| | | |
| | | // const tempFilePath = chooseImageRes.tempFilePaths[0]; |
| | | // let fileName = tempFilePath.substring(tempFilePath.lastIndexOf('/') + 1); |
| | | // // 处理安卓可能的URI编码 |
| | | // if (fileName.indexOf('%') > -1) { |
| | | // fileName = decodeURIComponent(fileName); |
| | | // } |
| | | // const fileKey = getFileKey(fileName); |
| | | // this.cosClient.uploadFile({ |
| | | // Bucket: this.bucket, |
| | | // Region: this.region, |
| | | // Key: fileKey, |
| | | // FilePath: tempFilePath, |
| | | // SliceSize: 1024 * 1024 * 5 /* 触发分块上传的阈值,5M */ |
| | | // }, (err, data) => { |
| | | // if (err) { |
| | | // console.log('上传失败', err); |
| | | // } else { |
| | | // this.form.face = fileKey; |
| | | // } |
| | | // }); |
| | | // }, |
| | | // }); |
| | | // }, |
| | | |
| | | /** |
| | | * 选择地址 |
| | |
| | | color: #999; |
| | | font-size: 24rpx; |
| | | } |
| | | .avatar-button { |
| | | background: transparent; |
| | | color: $font-color-light; |
| | | font-size: $font-sm; |
| | | line-height: 2em; |
| | | margin: 0; |
| | | padding: 0; |
| | | border: none; |
| | | &::after { |
| | | border: none; |
| | | } |
| | | } |
| | | </style> |