From 9734dff9eba501a8e0bc4d09e1845a9fc5bace90 Mon Sep 17 00:00:00 2001
From: liutong <836164388@qq.com>
Date: Wed, 4 Jun 2025 19:48:30 +0800
Subject: [PATCH] =?UTF-8?q?refactor(student):=20=E9=87=8D=E6=9E=84?=
 =?UTF-8?q?=E5=AD=A6=E7=94=9F=E4=B8=AA=E4=BA=BA=E4=BF=A1=E6=81=AF=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 引入 AQUplodeImage 组件用于头像上传上传逻辑
- 优化个人信息展示
- 修改头像预览和和编辑功能
- 添加年龄输入限制
- 更新性别选择器数据源
- 移除不必要的邮箱和住址输入字段
-调整课程选择和生日选择器样式
---
 components/AQ/AQUplodeImage.vue    |   1 +
 pages/student/my/personal_data.vue | 252 +++++++++++++++++------------
 2 files changed, 146 insertions(+), 107 deletions(-)

diff --git a/components/AQ/AQUplodeImage.vue b/components/AQ/AQUplodeImage.vue
index 7d67ef8..2bfd03e 100644
--- a/components/AQ/AQUplodeImage.vue
+++ b/components/AQ/AQUplodeImage.vue
@@ -1,3 +1,4 @@
+<!--单图自定义按钮上传-->
 <template>
   <view @click="chooseImage">
     <slot></slot>
diff --git a/pages/student/my/personal_data.vue b/pages/student/my/personal_data.vue
index 3ff5d33..cfe9868 100644
--- a/pages/student/my/personal_data.vue
+++ b/pages/student/my/personal_data.vue
@@ -5,11 +5,16 @@
 		<view class="main_section">
 			<view class="section">
 				<view class="item">
-					<image @click="changeAvatar()" class="pic" :src="$util.img(formData.headimg)"
-						v-if="upload_type == 1">
-						<image @click="changeAvatar()" class="pic" :src="uploadHeadimg" v-else>
-						</image>
-						<view class="btn" @click="changeAvatar()">修改头像</view>
+          <image @click="previewImage(editHeadimg)" class="pic" :src="editHeadimg"></image>
+          <view class="btn">
+            <AQUplodeImage
+                :uploadUrl=uploadUrl
+                :extraData="{ input_name: 'headimg', formData:{} }"
+                @uplodeImageRes="uplodeImageRes"
+            >
+              修改头像
+            </AQUplodeImage>
+          </view>
 				</view>
 			</view>
 
@@ -28,18 +33,18 @@
 						账号 <text class="required"></text>
 					</view>
 					<view class="input">
-						<input disabled placeholder="暂无" v-model="formData.username" />
+						<input disabled placeholder="暂无" v-model="formData.memberHasOne.mobile" />
 					</view>
 				</view>
 
-				<view class="item">
-					<view class="title">
-						住址 <text class="required"></text>
-					</view>
-					<view class="input">
-						<input placeholder="暂无" v-model="formData.address" />
-					</view>
-				</view>
+<!--				<view class="item">-->
+<!--					<view class="title">-->
+<!--						住址 <text class="required"></text>-->
+<!--					</view>-->
+<!--					<view class="input">-->
+<!--						<input placeholder="暂无" v-model="formData.address" />-->
+<!--					</view>-->
+<!--				</view>-->
 
 				<view class="item">
 					<view class="title">
@@ -57,33 +62,30 @@
 						性别 <text class="required">*</text>
 					</view>
 					<view class="input">
-						<input placeholder="请选择性别" v-model="sex_name" @click="picker_show_sex=true" />
+						<input placeholder="请选择性别" v-model="formData.gender_name" @click="picker_show_sex=true" />
 						<fui-picker layer="1" :linkage="true" :options="options_sex_arr" :show="picker_show_sex"
-							@change="changePickerSex" @cancel="picker_sex_show=false"></fui-picker>
+							@change="changePickerSex" @cancel="cancelPickerSex"></fui-picker>
 					</view>
 				</view>
 
 				<view class="item">
 					<view class="title">
-						生日 <text class="required">*</text>
+						年龄 <text class="required">*</text>
 					</view>
 					<view class="input">
-						<input placeholder="请选择生日" @click="picker_show_birthday=true" v-model="formData.birthday" />
-						<fui-date-picker :minDate="minDate" :maxDate="maxDate" :show="picker_show_birthday" type="3"
-							@change="changePickerBirthday" @cancel="picker_show_birthday=false"></fui-date-picker>
-					</view>
+            <input type="number" v-model.number="formData.age" :min="3" :max="18" placeholder="请输入年龄" @input="handleAgeInput" />          </view>
 				</view>
 			</view>
 
 			<view class="section">
-				<view class="item">
-					<view class="title">
-						邮箱 <text class="required">*</text>
-					</view>
-					<view class="input">
-						<input v-model="formData.email" placeholder="请输入邮箱" />
-					</view>
-				</view>
+<!--				<view class="item">-->
+<!--					<view class="title">-->
+<!--						邮箱 <text class="required">*</text>-->
+<!--					</view>-->
+<!--					<view class="input">-->
+<!--						<input v-model="formData.email" placeholder="请输入邮箱" />-->
+<!--					</view>-->
+<!--				</view>-->
 
 				<view class="item">
 					<view class="title">
@@ -102,45 +104,37 @@
 </template>
 
 <script>
+	import apiRoute from '@/api/apiRoute.js';
 	import member from '@/api/member.js';
 	import {
 		Api_url
 	} from "@/common/config.js";
 	import AQTabber from "@/components/AQ/AQTabber"
+  import AQUplodeImage from '@/components/AQ/AQUplodeImage';//单图上传组件
 
 
 	export default {
 		components: {
 			AQTabber,
+      AQUplodeImage,
 		},
 		data() {
 			return {
-				member_info: [],
-				formData: {
-					images_arr: [],
-					name: '', //姓名
-					email: '', //邮箱
-					tel: '', //手机
-					wx: '', //微信
-					sex: '', //性别
-					birthday: '', //生日
-				},
+				member_info: {},
+
 
 				//上传图片APi路径
-				uploadUrl: `${Api_url}/file/image`,
+				uploadUrl: `${Api_url}/memberUploadImage`,
 
 				//性别选择器 相关
 				picker_show_sex: false,
 				sex_name: '请选择',
-				options_sex_arr: [{
-						value: 1,
-						text: '男'
-					},
-					{
-						value: 2,
-						text: '女'
-					},
-				],
+        options_sex_arr: [
+          // {
+          //   value: 1,
+          //   text: '男'
+          // },
+        ],
 
 				//生日选择器相关
 				minDate: '',
@@ -149,79 +143,81 @@
 				upload_type: 1,
 				uploadHeadimg: '',
 				editHeadimg: '',
+
+        //表单
+        formData: {
+          headimg:'',//头像
+          name:'',//姓名
+          course_arr:[],//课程
+          gender:'',//性别: male-男性, female-女性, other-其他
+          gender_name:'',//性别: male-男性, female-女性, other-其他
+          age:'',//年龄
+          phone_number:'',//手机号
+        },
 			}
 		},
 		onLoad() {},
 		onShow() {
 			this.init()
-			this.member_init()
 		},
 		methods: {
 
 			async init() {
+			  await this.memberInfo()
+			  await this.getSexDict()
 				this.getBirthday()
 			},
 
 			//获取学员信息
-			async member_init() {
-				const member_in = await member.member();
-				if (member_in.code == 1) {
-					this.member_info = member_in.data
-					this.formData = {
-						...this.member_info
-					}
-					this.sex_name = member_in.data.gender
-				} else {
-					this.member_info = []
-				}
+			async memberInfo() {
+				let res = await apiRoute.xy_memberInfo({})
+        if(res.code != 1){
+          uni.showToast({
+            title: res.msg,
+            icon: 'none'
+          })
+          return
+        }
+        this.formData = res.data
+
+        this.formData.headimg = res.data.memberHasOne ? res.data.memberHasOne.headimg  : $util.img('/uniapp_src/static/images/common/yong_hu.png')
+        this.editHeadimg = this.formData.headimg
+
+        console.log('xq',this.formData)
 			},
 
-			// 修改头像按钮
-			changeAvatar() {
-				uni.chooseImage({
-					count: 1,
-					sizeType: ['compressed'],
-					sourceType: ['album', 'camera'],
-					success: (res) => {
-						const tempFilePath = res.tempFilePaths[0]
-						// 这里可以调用上传接口
-						this.uploadFilePromise(tempFilePath)
-					}
-				})
-			},
-			uploadFilePromise(url) {
-				let token = uni.getStorageSync('token') || ''
-				let a = uni.uploadFile({
-					url: this.uploadUrl, //仅为示例，非真实的接口地址
-					filePath: url,
-					name: 'file',
-					header: {
-						'token': `${token}`, //请求头设置token
-					},
-					success: (e) => {
-						let res = JSON.parse(e.data.replace(/\ufeff/g, "") || "{}")
-						console.log('上传成功2', res)
-						if (res.code == 1) {
-							this.upload_type = 2
-							this.formData.headimg = res.data.path
-							this.editHeadimg = res.data.path
-							this.uploadHeadimg = res.data.url
-						} else {
-							uni.showToast({
-								title: res.msg,
-								icon: 'none'
-							})
-						}
-					},
-				});
-			},
+      //获取性别字典
+      async getSexDict() {
+        let res = await apiRoute.common_Dictionary({key:'zy_sex'})
+        if(res.code != 1){
+          uni.showToast({
+            title: res.msg,
+            icon: 'none'
+          })
+          return
+        }
+
+        let dictionary =  res.data.dictionary
+        let arr = []
+        dictionary.forEach((v,k)=>{
+          arr.push({
+            text: v.name,
+            value: v.value,
+          })
+        })
+        this.options_sex_arr = arr
+      },
+
 			//性别选择相关
 			changePickerSex(e) {
 				console.log('监听选择', e)
-				this.sex_name = e.text
-				this.formData.sex = e.value
-				this.picker_show_sex = false
+				this.formData.gender_name = e.text
+				this.formData.gender = e.value
+				this.cancelPickerSex()
 			},
+      cancelPickerSex(){
+			  this.picker_show_sex = false
+      },
 
 			//生日选择相关
 			//获取当前年月日+获取30年前的日期
@@ -270,12 +266,52 @@
 				this.picker_show_birthday = false
 			},
 
+      //监听-年龄修改
+      handleAgeInput(e) {
+        let age = e.detail.value;
+        if (age < 3) {
+          uni.showToast({
+            title: '年龄不能小于3岁',
+            icon: 'none'
+          });
+          this.formData.age = 3;
+        } else if (age > 18) {
+          uni.showToast({
+            title: '年龄不能大于18岁',
+            icon: 'none'
+          });
+          this.formData.age = 18;
+        } else {
+          this.formData.age = age;
+        }
+      },
+
+
+      //文件上传回调
+      uplodeImageRes(resData,extraData){
+        console.log('上传成功回调',resData,extraData)
+        //判断是不是上传相册图片
+        if (extraData.input_name == 'headimg') {
+          console.log('收到的图片地址:', resData.url);
+          this.editHeadimg = resData.url;
+          alert(this.formData.headimg)
+        }
+      },
+
+      //图片预览
+      previewImage(url){
+        uni.previewImage({
+          current: url, // 当前图片地址
+          urls: [url]   // 所有图片列表（可以是多个）
+        });
+      },
+
 			//提交信息
 			submit() {
 				console.log(this.editHeadimg, '111')
-				if(this.editHeadimg == ''){
-					this.editHeadimg = this.formData.headimg
-				}
+				// if(this.editHeadimg == ''){
+				// 	this.editHeadimg = this.formData.headimg
+				// }
 				member.member_edit({
 					header: this.editHeadimg,
 					name: this.formData.name,
@@ -297,7 +333,9 @@
 						})
 					}
 				})
-			}
+			},
+
+
 
 		}
 	}