uniProject/pages/client/my/myInfo.vue

<template>
	<view class="my-info-page">
		<!-- 导航区域 -->
		<customNavbarVue title="个人信息" :show-back-btn="true" @back="handleBack"></customNavbarVue>
		<!-- 头像 -->
		<view class="user-img-box" >
			<view class="user-title">头像</view>

      <view v-if="!data.images" @click="openFilePicker">默认图</view>
<!--      <img v-else src="" @click="openFilePicker">-->

			<uni-file-picker ref="filePicker" v-show="false" return-type="object" v-model="data.images" :del-icon="false" mode="grid" disable-preview :auto-upload="false"
				@select="handleSelect" file-mediatype="image" class="phone-file-picker user-file-picker">
			</uni-file-picker>
			<icon class="user-jt-icon" :style="{ backgroundImage: 'url(' + data.jtIcon + ')' }"></icon>
		</view>
		<!-- 姓名 -->
		<view class="form-label-input">
			<view class="phone-form-label"><text class="form-label-require">*</text>姓名</view>
			<input v-model="data.realName"  placeholder="请输入姓名" />
			<icon :style="{ backgroundImage: 'url(' + data.jtIcon + ')' }"></icon>
		</view>
		<!-- 手机号 -->
		<view class="form-label-input">
			<view class="phone-form-label"><text class="form-label-require">*</text>手机号</view>
			<input v-model="data.userName"  placeholder="请输入手机号" />
			<icon :style="{ backgroundImage: 'url(' + data.jtIcon + ')' }"></icon>
		</view>
		<!-- 证件号 -->
		<view class="form-label-input">
			<view class="phone-form-label"><text class="form-label-require">*</text>证件号</view>
			<input v-model="data.idcard"  placeholder="请输入证件号" />
			<icon :style="{ backgroundImage: 'url(' + data.jtIcon + ')' }"></icon>
		</view>
		<!-- 电话 -->
		<view></view>
		<!-- 性别 -->
		<view class="form-label-radio">
			<view class="phone-form-label"><text class="form-label-require">*</text>性别</view>
			<view class="form-radio-group">
				<view class="form-radio-item" :class="{genderActive: data.gender===1}" @click="genderSelect(1)">男</view>
				<view class="form-radio-item" :class="{genderActive: data.gender===2}" @click="genderSelect(2)">女</view>
			</view>
		</view>

		<button type="default" class="phone-green-btn info-btn" @click="handleUpdate">修改资料</button>
	</view>
</template>

<script setup>
	import customNavbarVue from "@/components/custom-navbar/custom-navbar.vue";
	import * as myApi from "@/api/my.js";
	import {getAliyunPolicy} from "@/api/jiazheng.js"
	import {ref,reactive} from "vue"
	import {onLoad} from "@dcloudio/uni-app"
	import cacheManager from '@/utils/cacheManager.js';
	const filePicker = ref(null)
	const defaultImage1 = ref({
		url:'', extname: 'png', name: 'moren.png'
	})

	const imageStyles = ref({
		width: '50rpx',
		height: '50rpx',
		background: 'red'
	});

	const data = reactive({
		from: 'shouye', // my | kaoshi | shouye
		gender: 0,
		icon: '',
		realName: '',
		idcard: '',
		userName: '',
		userId: null,
		images: null,
		jtIcon: '',
	})

	onLoad((options) => {
		data.from = options.from || 'shouye';
		data.jtIcon= cacheManager.get('projectImg').nav_bar_jt_bottom;
		defaultImage1.url= cacheManager.get('projectImg').user_default_img;
		initPage();
	})
	
	function openFilePicker(){
		filePicker.value.upload()
	}

	function handleSelect(e) {
		console.log('eee',e)
		doUploadImage(e)
	}

	function genderSelect(genderValue){
		data.gender = genderValue;
	}

	function doUploadImage(params) {
		const filePath = params.tempFiles[0];
		const fileUrl = params.tempFilePaths;

		
		try {
			const suffix = filePath.file.name.split('.').pop();
			let req = {
				prefix: 'resource/',
				suffix: suffix,
			}
			uni.showLoading({
				title: '上传中...',
				mask: true
			});
			getAliyunPolicy(req).then(res => {
				if (res.code == 0) {
					const policyData = res.data;
					
					const formData = {
						key:  policyData.key,
						policy:  policyData.policy,
						signature:  policyData.signature,
						OSSAccessKeyId:  policyData.accessid,
						success_action_status:  '200',
					}
					
					uni.uploadFile({
						url: policyData.uploadUrl,
						filePath: fileUrl[0],
						name: 'file',
						formData: formData,
						success(uploadRes) {
							if (uploadRes.statusCode === 200) {
								console.log('uploadRes',uploadRes)
								data.icon = `${policyData.downloadUrl}/${policyData.key}`;
								console.log( `${policyData.downloadUrl}/${policyData.key}`)
								uni.showToast({
									title: '上传成功',
									icon: 'success'
								});
								// data.images = { url: data.icon, extname: 'png', name: 'touxiang.png' }

                data.images = data.icon

							} else {
								uni.showToast({
									icon: 'none',
									title: '上传失败',
								});
								uni.hideLoading();
							}
			
						},
						fail(err) {
							uni.showToast({
								icon: 'none',
								title: '上传失败',
							});
							uni.hideLoading();
						}
					});

				} else {
					uni.showToast({
						title: '获取凭证失败',
					});
					uni.hideLoading();
				}
			})
		} catch (error) {
			uni.showToast({
				title: '上传失败',
				icon: 'none'
			});
			uni.hideLoading();
		}
	}

	function handleUpdate() {
		let arr = [];
		if (!data.realName) {
			arr.push('姓名');
		}
		if (!data.userName) {
			arr.push('电话');
		}
		if (!data.icon) {
			arr.push('头像');
		}
		if (!data.idcard) {
			arr.push('证件号');
		}
		if (!data.realName || !data.userName||!data.icon||!data.idcard) {
			uni.showToast({
				icon: 'none',
				title: `请完善${arr.join('、')}信息！`
			})
			return;
		}
		
		const opt = {
			gender: data.gender,
			icon: data.icon, 
			idcard: data.idcard,
			realName: data.realName,
			userId: data.userId,
			userName: data.userName,
		}
		myApi.getMineUpdate(opt).then(res => {
			if (res.data) {
				uni.showToast({
					title: '更新成功'
				})
				handleBack();
			}
		})

	}

	function handleBack() {
		const pages = getCurrentPages();
		if (pages.length>1) {
			uni.navigateBack()
		} else {
			/* if (data.from == 'my') {
				uni.redirectTo({
					url: '/pages/client/my/index'
				})
			} else if (data.from == 'kaoshi') {
				uni.redirectTo({
					url: '/pages/client/ShouYe/shouye'
				})
			} else {
				uni.redirectTo({
					url: '/pages/client/my/index'
				})
			} */
			history.back();
		}
	}

	function initPage() {
		myApi.getMineUser().then(res => {
			const {gender,icon,idcard,realName,userName,userId} = res.data;
			data.gender = res.data.gender;
			data.icon = res.data.icon;
			data.idcard = res.data.idcard;
			data.realName = res.data.realName; 
			data.userName = res.data.userName;
			data.userId = res.data.userId;
			data.images = data.icon?{ url: data.icon, extname: 'png', name: 'touxiang.png' }:defaultImage1.value
		})
	}
</script>

<style>

</style>