You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
138 lines
3.4 KiB
Vue
138 lines
3.4 KiB
Vue
<template>
|
|
<view class="p-person-avatar g_flex_column_center g_w_all g_h_all g_bg_0 g_kuaishou">
|
|
<view>
|
|
<view :style="{
|
|
width:size.width + 'px',
|
|
height:size.width + 'px'
|
|
}"
|
|
style="overflow: hidden;"
|
|
class="g_flex_c"
|
|
>
|
|
<img :src="avatar" :style="{
|
|
width:size.width + 'px',
|
|
height:size.width + 'px'
|
|
}">
|
|
</view>
|
|
<view class="g_flex_row_center g_mt_30">
|
|
<view v-if="!isEdit" class="g_flex_row_center">
|
|
<!-- #ifdef APP-PLUS || H5 || MP-TOUTIAO || MP-KUAISHOU -->
|
|
<button aria-role="button"
|
|
class="g_w_110 g_h_32 g_flex_c g_radius_17 g_c_f"
|
|
style="border: 1px solid #fff;background-color: transparent;font-size: 14px;"
|
|
@click="handleOpenAvatar"
|
|
>更换头像</button>
|
|
<!-- #endif -->
|
|
<!-- #ifdef MP-WEIXIN -->
|
|
<button open-type="chooseAvatar"
|
|
@chooseavatar='handleStartChangeAvatar'
|
|
aria-role="button"
|
|
class="g_w_110 g_h_32 g_flex_c g_radius_17 g_c_f"
|
|
style="border: 1px solid #fff;background-color: transparent;font-size: 14px;"
|
|
>更换头像</button>
|
|
<!-- #endif -->
|
|
</view>
|
|
<view v-if="isEdit" class="g_flex_row_center">
|
|
<view class="g_w_110 g_h_32 g_flex_c g_radius_17 g_c_f g_mr_16"
|
|
style="border: 1px solid #fff;"
|
|
@click="handleCancel"
|
|
>取消</view>
|
|
<view class="g_w_112 g_h_34 g_flex_c g_radius_17 g_c_f g_bg_f40"
|
|
style="border: 2px solid #ff4400;"
|
|
@click="handleConfirm"
|
|
>确认</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default{
|
|
onReady() {
|
|
uni.setNavigationBarColor({
|
|
backgroundColor:"#000000",
|
|
frontColor:"#ffffff"
|
|
})
|
|
},
|
|
onShareAppMessage(){
|
|
return this.G.shareFun();
|
|
},
|
|
data(){
|
|
return {
|
|
avatar:uni.getStorageSync("apply-avatar"),
|
|
isEdit:false,
|
|
size:{
|
|
width:uni.getSystemInfoSync().windowWidth,
|
|
height:uni.getSystemInfoSync().windowHeight
|
|
}
|
|
}
|
|
},
|
|
methods:{
|
|
handleOpenAvatar(){
|
|
let that = this;
|
|
uni.showActionSheet({
|
|
itemList: ['从相册选择','使用相机'],
|
|
success: function (res) {
|
|
if(res.tapIndex == 0){
|
|
console.log('点击相册')
|
|
// 相册
|
|
that.setAvatar(['album'])
|
|
}else{
|
|
console.log('点击拍照')
|
|
// 拍照
|
|
that.setAvatar(['camera'])
|
|
}
|
|
},
|
|
fail: function (res) {}
|
|
});
|
|
},
|
|
setAvatar($type){
|
|
let that = this;
|
|
that.G.uploadImg((res)=>{
|
|
console.log('获取数据',res)
|
|
that.avatar = res.image;
|
|
that.isEdit = false;
|
|
uni.showToast({
|
|
title:'修改成功',
|
|
icon:'success'
|
|
})
|
|
uni.setStorageSync('apply-avatar',that.avatar)
|
|
setTimeout(()=>{
|
|
uni.navigateBack();
|
|
},1500)
|
|
},'default',1,$type)
|
|
},
|
|
|
|
|
|
// 开始更换头像
|
|
handleStartChangeAvatar(e){
|
|
let that = this;
|
|
console.log('获取用户头像：',e)
|
|
that.isEdit = true;
|
|
that.avatar = e.detail.avatarUrl;
|
|
},
|
|
handleCancel(){
|
|
let that = this;
|
|
that.isEdit = false;
|
|
that.avatar = uni.getStorageSync("apply-avatar");
|
|
},
|
|
handleConfirm(){
|
|
let that = this;
|
|
that.G.uploadFile(that.avatar,(res)=>{
|
|
that.isEdit = false;
|
|
uni.showToast({
|
|
title:'修改成功',
|
|
icon:'success'
|
|
})
|
|
uni.setStorageSync('apply-avatar',res)
|
|
setTimeout(()=>{
|
|
uni.navigateBack();
|
|
},1500)
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
</style> |