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.
133 lines
3.1 KiB
Vue
133 lines
3.1 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">
|
|
<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>
|
|
</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-userinfo").user.imgSrc,
|
|
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(
|
|
that.G.uploadImgToOss(
|
|
(res) => {
|
|
console.log("获取数据", res);
|
|
that.avatar = res.image;
|
|
that.G.Post(that.api.user_changeAvatarWithUrl, { avatar: that.avatar }, (res) => {
|
|
that.isEdit = false;
|
|
uni.showToast({
|
|
title: "修改成功",
|
|
icon: "success",
|
|
});
|
|
that.G.checkToken();
|
|
uni.setStorageSync("apply-avatar", res);
|
|
setTimeout(() => {
|
|
uni.navigateBack();
|
|
}, 1500);
|
|
});
|
|
},
|
|
'avatar',
|
|
"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-userinfo").user.imgSrc;
|
|
},
|
|
handleConfirm() {
|
|
let that = this;
|
|
that.G.uploadFile(that.avatar, (res) => {
|
|
that.isEdit = false;
|
|
uni.showToast({
|
|
title: "修改成功",
|
|
icon: "success",
|
|
});
|
|
that.G.checkToken();
|
|
setTimeout(() => {
|
|
uni.redirectTo({
|
|
url: "/root/person/info",
|
|
});
|
|
}, 1500);
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style></style>
|