ChuangHengWx/pagesMy/userInfo.vue

<template>
	<view class="default_page adffc" :style="{'height':h+'px', 'padding-top':mt+'px'}">
		<cus-header title='用户信息'></cus-header>
		<view class="info adffcac">
			<image class="info-avatar" :src="userInfo.headUrl||defaultAvatar" @click="changeAvatar"></image>
			<view class="info-text">上传头像</view>
			<view class="info-form">
				<view class="info-form-item adfac">
					<view class="info-form-item-left">姓名</view>
					<view class="info-form-item-right">
						<u-input border="none" v-model="userInfo.realName" placeholder="请输入姓名" style="color: #193D59;font-size: 30rpx;" placeholder-style="color:#99A9B5;font-size: 30rpx;"></u-input>
					</view>
				</view>
				<view class="info-form-item adfac">
					<view class="info-form-item-left">性别</view>
					<view class="info-form-item-right adfac">
						<view class="info-form-item-right-pre adfac" @click="changeGender(0)">
							<image :src="imgBase+'selected.png'" v-if="userInfo.gender==0"></image>
							<image :src="imgBase+'not_select.png'" v-else></image>
							<text>男</text>
						</view>
						<view class="info-form-item-right-pre adfac" @click="changeGender(1)" style="margin-left: 80rpx;">
							<image :src="imgBase+'selected.png'" v-if="userInfo.gender==1"></image>
							<image :src="imgBase+'not_select.png'" v-else></image>
							<text>女</text>
						</view>
					</view>
				</view>
				<view class="info-form-item adfac">
					<view class="info-form-item-left">手机</view>
					<view class="info-form-item-right">{{ jmPhone }}</view>
				</view>
				<view class="info-form-item adfac">
					<view class="info-form-item-left">邮箱</view>
					<view class="info-form-item-right">
						<u-input border="none" v-model="userInfo.email" placeholder="请输入邮箱" style="color: #193D59;font-size: 30rpx;" placeholder-style="color:#99A9B5;font-size: 30rpx;"></u-input>
					</view>
				</view>
			</view>
		</view>
		<view class="zt_btn" @click="handleSave">保存</view>
		<qf-image-cropper :width="500" :height="500" :radius="30" @crop="handleCrop" ref="qicRef" v-if="qicShow"></qf-image-cropper>
	</view>
</template>

<script>
	import { BaseApi } from '@/http/baseApi.js'
	export default {
		data(){
			return {
				defaultAvatar:this.$imgBase+'upload.png',
				userInfo:{
					id:'',
					headUrl:'',
					realName:'',
					gender:null,
					email:'',
				},
				jmPhone:'',
				qicShow:false
			}
		},
		onLoad() {
			if(uni.getStorageSync('userInfo')){
				let ui = JSON.parse(uni.getStorageSync('userInfo'));
				this.jmPhone = ui.mobile?.replace(/(\d{3})\d{4}(\d{4})/, '$1 **** $2');
				this.userInfo.id = ui.id;
				this.userInfo.headUrl = ui.headUrl;
				this.userInfo.realName = ui.realName;
				this.userInfo.gender = ui.gender;
				this.userInfo.email = ui.email;
			}
		},
		methods:{
			changeGender(gender){
				this.userInfo.gender = gender;
			},
			changeAvatar(){
				uni.showActionSheet({
					itemList: ['从手机相册选择'],
					success: (res) => {
					  if (res.tapIndex === 0) { // 从手机相册选择
						this.chooseLocalImage();
					  }
					}
				});
			},
			uploadAvatar(url){
				uni.uploadFile({
					url: BaseApi + '/uploadFile',
					filePath: url,
					name: 'file',
					success: (res) => {
						try{
							let data = JSON.parse(res.data);
							if(data.code!==0) return this.$showToast(data.msg)
							this.userInfo.headUrl = data.data||'';
							this.qicShow = false;
							this.$refs.qicRef.resetData();
						}catch(e){
							//TODO handle the exception
						}
					},
					fail: (err) => {
						console.log(err,'err');
					}
				});
			},
			// 从本地选择图片并显示
			chooseLocalImage() {
			  uni.chooseImage({
				count: 1, // 只能选择一张
				sizeType: ['compressed'], // 压缩图片
				sourceType: ['album', 'camera'], // 可以从相册或相机选择
				success: (res) => {
				  const tempFilePaths = res.tempFilePaths;
				  if (tempFilePaths && tempFilePaths.length > 0) {
					this.qicShow = true;
					this.$nextTick(()=>{
						this.$refs.qicRef.initImage(tempFilePaths[0],true)
					})
				  }
				},
				fail: (err) => {
				  console.error('选择图片失败', err);
				}
			  });
			},
			handleCrop(e){
				this.uploadAvatar(e.tempFilePath);
			},
			handleSave(){
				if(!this.userInfo.headUrl) return this.$showToast('请上传头像');
				if(!this.userInfo.realName) return this.$showToast('请输入姓名');
				if(this.userInfo.gender==null) return this.$showToast('请选择性别');
				if(!this.$reg.email(this.userInfo.email)) return this.$showToast('请输入正确的邮箱');
				
				this.$api.put('/wx/updateUser',this.userInfo).then(({data:res})=>{
					if(res.code!==0) return this.$showToast(res.msg)
					this.$showToast('保存成功')
					let ui = JSON.parse(uni.getStorageSync('userInfo'));
					ui.headUrl = this.userInfo.headUrl;
					ui.realName = this.userInfo.realName;
					ui.gender = this.userInfo.gender;
					ui.email = this.userInfo.email;
					uni.setStorageSync('userInfo',JSON.stringify(ui));
					setTimeout(()=>{
						uni.reLaunch({
							url:'/pages/my'
						})
					},1500)
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.default_page{
		padding: 0 24rpx 306rpx;
		box-sizing: border-box;
		background: #F7F7F7;
		justify-content: space-between;
		
		.info{
			margin-top: 68rpx;
			flex: 1;
			&-avatar{
				width: 168rpx;
				height: 168rpx;
				border-radius: 50%;
			}
			&-text{
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 30rpx;
				color: #002846;
				line-height: 42rpx;
				margin-top: 24rpx;
				text-align: center;
			}
			&-form{
				width: 100%;
				margin-top: 68rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				padding: 0 24rpx;
				box-sizing: border-box;
				&-item{
					height: 98rpx;
					box-shadow: inset 0rpx -1rpx 0rpx 0rpx #EFEFEF;
					&-left{
						width: 140rpx;
						font-family: PingFang-SC, PingFang-SC;
						font-weight: bold;
						font-size: 30rpx;
						color: #002846;
						line-height: 42rpx;
					}
					&-right{
						width: calc(100% - 140rpx);
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 30rpx;
						color: #193D59;
						line-height: 32rpx;
						
						&-pre{
							image{
								width: 36rpx;
								height: 36rpx;
							}
							text{
								font-family: PingFang-SC, PingFang-SC;
								font-weight: bold;
								font-size: 30rpx;
								color: #193D59;
								line-height: 42rpx;
								margin-left: 20rpx;
							}
						}
					}
				}
			}
		}
		
		.zt_btn{
			width: calc(100% - 32rpx);
			margin-left: 16rpx;
		}
	}
</style>