bocai_supplyChain_uni/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">
					<!-- #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>
					<!-- #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"
			})
		},
		onShareAppMessage(){
			return this.G.shareFun();
		},
		data(){
			return {
				avatar:uni.getStorageSync("apply-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 = false;
					uni.showToast({
						title:'修改成功',
						icon:'success'
					})
					uni.setStorageSync('apply-avatar',that.avatar)
					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-avatar");
			},
			handleConfirm(){
				let that = this;
				that.G.uploadFile(that.avatar,(res)=>{
					that.isEdit = false;
					uni.showToast({
						title:'修改成功',
						icon:'success'
					})
					uni.setStorageSync('apply-avatar',res)
					setTimeout(()=>{
						uni.navigateBack();
					},1500)
				});
			}
		}
	}
</script>

<style>
</style>