app/pages/me/myBackImg.vue

<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.showLoading({
						title: '上传中'
					});
					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'
								});
							}
						},
						complete() {
							uni.hideLoading();
						}
					});
				}
			});
		}
	}
};
</script>

<style scoped>
.bg-size {
	align-items: center;
	width: 750rpx;
	height: 750rpx;
}
.btn-text {
	color: #ffffff;
	align-items: center;
}
.mbtn {
	margin: 0 auto;
	width: 250rpx;
	height: 80rpx;
	border-radius: 100rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-top: 150rpx;
	align-items: 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>