161 lines
3.9 KiB
Vue
Executable File
161 lines
3.9 KiB
Vue
Executable File
<template>
|
|
<view class="page">
|
|
<view class="bg-wrapper" :style="{ height: screenHeight + 'px' }">
|
|
<image :src="faceUrl" class="bg-size" mode="aspectFill"></image>
|
|
<view
|
|
class="mbtn"
|
|
:class="{
|
|
'button-change-bg': !changeTouched,
|
|
'button-change-bg-touched': changeTouched,
|
|
}"
|
|
@touchstart="touchstartChange"
|
|
@touchend="touchendChange"
|
|
@click="changeFace">
|
|
<text class="btn-text">更换头像</text>
|
|
</view>
|
|
<view
|
|
class="mbtn"
|
|
:class="{
|
|
'button-change-bg': !closeTouched,
|
|
'button-change-bg-touched': closeTouched,
|
|
}"
|
|
@touchstart="touchstartClose"
|
|
@touchend="touchendClose"
|
|
@click="close"
|
|
style="margin-top: 10rpx">
|
|
<text class="btn-text">返回</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import storage from "@/utils/storage.js"; //缓存
|
|
let system = uni.getSystemInfoSync();
|
|
import api from "@/config/api.js";
|
|
export default {
|
|
data() {
|
|
return {
|
|
faceUrl: storage.getVlogUserInfo().face,
|
|
changeTouched: false,
|
|
closeTouched: false,
|
|
screenHeight: system.safeArea.bottom,
|
|
};
|
|
},
|
|
methods: {
|
|
close() {
|
|
uni.navigateBack({
|
|
delta: 1,
|
|
animationType: "slide-out-bottom",
|
|
});
|
|
},
|
|
touchstartChange() {
|
|
this.changeTouched = true;
|
|
},
|
|
touchendChange() {
|
|
this.changeTouched = false;
|
|
},
|
|
touchstartClose() {
|
|
this.closeTouched = true;
|
|
},
|
|
touchendClose() {
|
|
this.closeTouched = false;
|
|
},
|
|
changeFace() {
|
|
let me = this;
|
|
let userId = storage.getVlogUserInfo().id;
|
|
|
|
uni.chooseImage({
|
|
count: 1,
|
|
sizeType: ["original"],
|
|
crop: {
|
|
quality: 100,
|
|
width: 400,
|
|
height: 400,
|
|
},
|
|
success: (e) => {
|
|
let newFace = e.tempFilePaths[0];
|
|
me.faceUrl = newFace;
|
|
// 上传
|
|
uni.uploadFile({
|
|
header: {
|
|
headerUserId: userId,
|
|
headerUserToken: storage.getVlogToken(),
|
|
},
|
|
url:
|
|
api.vlog + "/userInfo/modifyImage?userId=" + userId + "&type=2",
|
|
name: "file",
|
|
filePath: newFace,
|
|
success(result) {
|
|
let userInfoUpdated = JSON.parse(result.data);
|
|
if (userInfoUpdated.status == 200) {
|
|
// 重置本地用户信息
|
|
storage.setVlogUserInfo(userInfoUpdated.data);
|
|
uni.showToast({
|
|
title: userInfoUpdated.msg,
|
|
icon: "none",
|
|
duration: 3000,
|
|
});
|
|
var timer = setTimeout(() => {
|
|
clearTimeout(timer)
|
|
uni.navigateBack({
|
|
delta: 1,
|
|
animationType: "fade-out",
|
|
});
|
|
}, 1000);
|
|
} else {
|
|
uni.showToast({
|
|
title: userInfoUpdated.msg,
|
|
icon: "none",
|
|
});
|
|
}
|
|
},
|
|
});
|
|
},
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.page {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
background-color: #000000;
|
|
.bg-wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
.bg-size {
|
|
align-self: center;
|
|
width: 750rpx;
|
|
height: 750rpx;
|
|
}
|
|
.mbtn {
|
|
width: 250rpx;
|
|
height: 80rpx;
|
|
border-radius: 100rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
margin-top: 150rpx;
|
|
align-self: center;
|
|
.btn-text {
|
|
color: #ffffff;
|
|
align-self: center;
|
|
}
|
|
}
|
|
.button-change-bg {
|
|
background-color: #1e1e1e;
|
|
}
|
|
.button-change-bg-touched {
|
|
background-color: #646262;
|
|
}
|
|
}
|
|
}
|
|
</style>
|