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