apply-assistant-v3/root/person/agencyAvatar.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">
					<!-- || MP-WEIXIN -->
					<!-- #ifdef APP-PLUS || H5 || MP-TOUTIAO || MP-KUAISHOU  -->
					<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>
					<!-- #endif -->
					<!-- #ifdef MP-WEIXIN -->
					<!-- <button open-type="chooseAvatar" @chooseavatar="handleStartChangeAvatar" 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">更换图片</button> -->
					<button @click="handleOpenAvatar" 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">更换图片</button>
					<!-- #endif -->
				</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",
		});
	},
	onLoad(options) {
		let that = this;
		console.log("options", options);
		this.info = options;
		this.avatar = options.value;
		uni.setNavigationBarTitle({
			title: `修改${options.label}`,
		});
	},
	onShareAppMessage() {
		return this.G.shareFun();
	},
	data() {
		return {
			avatar: "",
			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(
				(res) => {
					console.log("获取数据", res);
					that.avatar = res.image;
					that.isEdit = true;
				},
				"default",
				1,
				$type
			);
		},
		handleCancel() {
			let that = this;
			that.isEdit = false;
			// that.avatar =  this.avatar;
		},
		handleConfirm() {
			let that = this;
			that.G.Put(
				"/yishoudan/agency/updateField",
				{
					fieldName: this.info.fieldName,
					fieldValue: that.avatar,
				},
				(res) => {
					that.isEdit = false;
					uni.showToast({
						title: "修改成功",
						icon: "success",
					});
					that.G.checkToken();
					setTimeout(() => {
						uni.navigateBack();
					}, 1500);
				}
			);
		},
	},
};
</script>

<style>
.g_mt_30{
	margin-top: 30px;
}
</style>