SxsnWechat/pagesMy/information.vue

<template>
	<view class="common_page" :style="{'height':h+'px', 'padding-top':mt+'px'}">
		<cus-header title="个人资料" bgColor="#FFFFFF"></cus-header>
		<view class="form" v-if="userInfo">
			<view class="avatar">
				<view class="title">头像</view>
				<view class="adfac" style="margin: 34rpx 0 47rpx;">
					<view class="imgbox">
						<image class="imgbox-avatar" :src="userInfo.avatarPath||defaultAvatar" @click="changeAvatar"></image>
					</view>
					<image class="add-avatar" src="https://oss.familydaf.cn/sxsnfile/20251219/0b4d0f26464945dbae17491f1b529229.png" @click="changeAvatar"></image>
				</view>
			</view>
			<view class="item adfacjb">
				<view class="left">用户名</view>
				<view class="right">
					<up-input v-model="userInfo.realName" border="none" placeholder="请输入用户名"></up-input>
				</view>
			</view>
			<!-- <view class="item adfacjb">
				<view class="left">手机号码</view>
				<view class="right">
					<up-input v-model="userInfo.phone" border="none" placeholder="请输入手机号码"></up-input>
				</view>
			</view> -->
			<view class="item adfacjb">
				<view class="left">家庭公益名称</view>
				<view class="right">
					<up-input v-model="userInfo.welfareName" border="none" placeholder="请输入家庭公益名称"></up-input>
				</view>
			</view>
			<view class="item adfacjb">
				<view class="left">家庭公益口号</view>
				<view class="right">
					<up-input v-model="userInfo.welfareSlogan" border="none" placeholder="请输入家庭公益口号"></up-input>
				</view>
			</view>
		</view>
		<view class="btn" @click="save">保存</view>
		<qf-image-cropper :width="500" :height="500" :radius="30" @crop="handleCrop" ref="qicRef" v-if="qicShow"></qf-image-cropper>
	</view>
</template>

<script setup name="">
	import { BaseApi2 } from '../common/api/baseApi';
	import CusHeader from '@/components/CusHeader/index.vue'
	import { ref, onMounted, getCurrentInstance, nextTick } from 'vue'
	const { proxy } = getCurrentInstance()
	
	const defaultAvatar = ref('https://oss.familydaf.cn/sxsnfile/20251218/3821654e080945998d464f3c3aa64122.png')
	const userInfo = ref({
		avatarPath:''
	})
	const qicShow = ref(false)
	
	const save = () => {
		if(!userInfo.value?.avatarPath) return proxy.$showToast('请上传用户头像')
		if(!userInfo.value?.realName) return proxy.$showToast('请输入用户名')
		// if(!proxy.$reg.mobile(userInfo.value.phone)) return proxy.$showToast('请输入正确的手机号')
		if(!userInfo.value?.welfareName) return proxy.$showToast('请输入家庭公益名称')
		if(!userInfo.value?.welfareSlogan) return proxy.$showToast('请输入家庭公益口号')
		
		userInfo.value.id = uni.getStorageSync('userInfo')&&JSON.parse(uni.getStorageSync('userInfo')).id;
		proxy.$api.put('/wx/update',userInfo.value).then(({data:res})=>{
			if(res.code!==0) return proxy.$showToast(res.msg)
			proxy.$showToast('保存成功')
			setTimeout(()=>{
				uni.reLaunch({
					url:'/pages/my'
				})
			},1000)
		})
	}
	
	const changeAvatar = () => {
		uni.showActionSheet({
			itemList: ['从手机相册选择'],
			success: (res) => {
			  if (res.tapIndex === 0) { // 从手机相册选择
				chooseLocalImage();
			  }
			}
		});
	}
	
	// 从本地选择图片并显示
	const chooseLocalImage = () => {
	  uni.chooseImage({
		count: 1, // 只能选择一张
		sizeType: ['compressed'], // 压缩图片
		sourceType: ['album', 'camera'], // 可以从相册或相机选择
		success: (res) => {
		  const tempFilePaths = res.tempFilePaths;
		  if (tempFilePaths && tempFilePaths.length > 0) {
			qicShow.value = true;
			nextTick(()=>{
				proxy.$refs.qicRef.initImage(tempFilePaths[0],true)
			})
		  }
		},
		fail: (err) => {
		  console.error('选择图片失败', err);
		}
	  });
	}
	
	
	const handleCrop = async (e) => {
		const result = await uploadFilePromise(e.tempFilePath);
		userInfo.value.avatarPath = result||'';
		qicShow.value = false;
	}
	
	const uploadFilePromise = (url) => {
	  return new Promise((resolve, reject) => {
	    let a = uni.uploadFile({
	      url: BaseApi2+'/sys/oss/upload',
	      filePath: url,
	      name: 'file',
	      success: (res) => {
	        setTimeout(() => {
				let data = JSON.parse(res.data)
				if(data&&data.code===0){
					resolve(data.data);
				}else proxy.$showToast(data?.msg)
	        }, 1000);
	      },
		  fail: err =>{
			resolve('');
		  }
	    });
	  });
	};
	
	const getUserInfo = () => {
		try{
			proxy.$api.get(`/wx/${JSON.parse(uni.getStorageSync('userInfo')).id}`).then(({data:res})=>{
				if(res.code!==0) return proxy.$showToast(res.msg)
				userInfo.value = res.data;
			})
		}catch(e){
			userInfo.value = null
		}
	}
	
	onMounted(()=>{
		getUserInfo()
	})
</script>

<style scoped lang="scss">
	::v-deep .u-input__content input{
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 30rpx !important;
		color: #252525 !important;
		line-height: 42rpx !important;
		text-align: right !important;
		caret-color: #252525; 
	}
	
	.common_page{
		.form{
			background: #FFFFFF;
			border-radius: 24rpx;
			padding: 14rpx 22rpx 0;
			margin-top: 20rpx;
			
			.avatar{
				.title{
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 30rpx;
					color: #252525;
					line-height: 42rpx;
				}
				.imgbox{
					width: 122rpx;
					height: 122rpx;
					&-avatar{
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}
				.add-avatar{
					margin-left: 40rpx;
					width: 122rpx;
					height: 122rpx;
					border-radius: 50%;
				}
				border-bottom: 1rpx solid #E6E6E6;
			}
			.item{
				height: 110rpx;
				box-shadow: inset 0rpx -1rpx 0rpx 0rpx #E6E6E6;
				.left{
					width: 200rpx;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 30rpx;
					color: #252525;
					line-height: 42rpx;
					padding-right: 20rpx;
					box-sizing: border-box;
				}
				.right{
					width: calc(100% - 200rpx);
				}
			}
		}
		
		.btn{
			width: calc(100% - 80rpx);
			height: 90rpx;
			background: #B7F358;
			border-radius: 45rpx;
			font-family: PingFang-SC, PingFang-SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #151B29;
			line-height: 90rpx;
			text-align: center;
			letter-spacing: 2rpx;
			position: fixed;
			left: 40rpx;
			bottom: 64rpx;
		}
	}
</style>