新生报到移动端V1.0

2025-07-16 17:44:45 +08:00
commit 50d2d6a12d
1058 changed files with 146425 additions and 0 deletions
--- a/pages/Photo/Photo.vue
+++ b/pages/Photo/Photo.vue
@@ -0,0 +1,181 @@
+<!-- 照片采集 -->
+<template>
+	<view class="Photo">
+
+		<view class="Picture_box" @tap="choosePic">
+			<text v-if="!photo" class="Picture_text">图片上传</text>
+			<image v-if="photo" :src="photo" mode=""></image>
+		</view>
+
+		<button class="Picture_button" @tap="submitOwnPhoto">上传图片</button>
+		
+		<!-- 报错显示 -->
+		<u-toast ref="uToast"></u-toast>
+		<!-- 上传后加一段动画 -->
+		<zero-loading v-if="loading"></zero-loading>
+		<FloatBall />
+	</view>
+</template>
+
+<script>
+	//接口：
+	//本地存储接口
+	//获取个人信息接口
+
+	//图片上传接口
+	import {
+		getOwnPhoto, //获取新生照片
+		submitOwnPhoto //上传新生照片
+	} from "@/api/photo.js";
+
+	import {
+		isEmpty
+	} from '../../api/helpFunc';
+	//自定义组件
+	import FloatBall from "@/pages/compoents/FloatBall.vue";
+	//
+	export default {
+		components: {
+			FloatBall
+		},
+		data() {
+			return {
+				photo: null, //图片文件(base64编码)
+				loading: false //上传动画
+			}
+		},
+		async onLoad() {
+			this.loading = true
+			await this.getOwnPhoto();
+			this.loading = false
+		},
+		methods: {
+			//用户选择图片
+			choosePic: async function() {
+				//获取本地图片并且展示
+				let that = this;
+				uni.chooseImage({
+					count: 1, //图片选择一张
+					sizeType: ['compressed'],
+					sourceType: ['album', 'camera'],
+					success: (res) => {
+						// 保存图片路径
+						//this.photo=res.tempFilePaths[0];
+						
+						let tempImgPath = res.tempFilePaths[0];
+						
+						//修改图片编码
+						//将图片路径转换为 Blob 对象
+						fetch(tempImgPath)
+							.then(response => response.blob())
+							.then(blob => {
+								// 修改图片编码
+								let reader = new FileReader();
+								reader.onload = function(event) {
+									that.photo = event.target.result;
+									//console.log(that.photo);
+								};
+								// 读取文件并将其转换为 Base64 编码
+								reader.readAsDataURL(blob);
+								// 读取文件并将其转换为 UTF-8 编码的文本格式
+								//reader.readAsText(blob, 'UTF-8');
+							})
+							.catch(err => {
+								this.$refs.uToast.show({
+									type: 'error',
+									message: '获取文件失败:' + err.message,
+									duration: 1500
+								});
+							});
+					},
+					fail: (err) => {
+						this.$refs.uToast.show({
+							type: 'error',
+							message: '选择图片失败:' + err.message,
+							duration: 1500
+						});
+					}
+				});
+			},
+			//新增图片到服务器
+			async submitOwnPhoto() {
+				let sdata = {
+					//表单数据
+					// 照片(base64编码)：photo
+					photo: this.photo,
+				}
+				//表单数据判定
+				if (isEmpty(sdata.photo)) {
+					this.$refs.uToast.show({
+						type: 'error',
+						message: '请选择图片',
+						duration: 1500
+					});
+					return;
+				}
+				//动画显示
+				this.loading = true;
+				let res = await submitOwnPhoto(sdata);
+				this.loading = false;
+				if (res.code == 200) {
+					this.$refs.uToast.show({
+						type: "success",
+						message: res.msg,
+						duration: 1500,
+					});
+				} else {
+					console.log(res.msg);
+					this.$refs.uToast.show({
+						type: "error",
+						message: res.msg,
+						duration: 1500,
+					});
+				}
+			},
+			//从服务器获得新生照片照片
+			async getOwnPhoto() {
+				let that = this;
+				let res = await getOwnPhoto(); //连接服务器传入照片id
+				if (res.code == 200) {
+					if (!isEmpty(res.data)) {
+						let data = {
+							...res.data
+						};
+						that.photo = data.photo;
+					}
+				}
+			},
+		},
+	}
+</script>
+
+<style lang="less" scoped>
+	.Photo {
+		flex: 1;
+
+		.Picture_box {
+			height: 60vh;
+			margin: 10%;
+			border: 2px dashed gray;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			flex-wrap: wrap;
+
+			.Picture_text {
+				font-size: 45rpx;
+				writing-mode: vertical-rl;
+				text-orientation: upright;
+				color: #c5c5c5;
+			}
+
+			image {
+				height: 100%;
+			}
+		}
+
+		.Picture_button {
+			margin: 10%;
+		}
+	}
+</style>