apply-assistant-v3/root/person/avatar.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.uploadImgToOss()
      return
			that.G.uploadImg(
				(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);
					});
				},
				"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>