refactor(student): 重构学生个人信息页面

- 引入 AQUplodeImage 组件用于头像上传上传逻辑
- 优化个人信息展示
- 修改头像预览和和编辑功能
- 添加年龄输入限制
- 更新性别选择器数据源
- 移除不必要的邮箱和住址输入字段
-调整课程选择和生日选择器样式

components/AQ/AQUplodeImage.vue

@@ -1,3 +1,4 @@
+<!--单图自定义按钮上传-->
 <template>
   <view @click="chooseImage">
     <slot></slot>

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)"
+          <image @click="previewImage(editHeadimg)" class="pic" :src="editHeadimg"></image>
-						v-if="upload_type == 1">
+          <view class="btn">
-						<image @click="changeAvatar()" class="pic" :src="uploadHeadimg" v-else>
+            <AQUplodeImage
-						</image>
+                :uploadUrl=uploadUrl
-						<view class="btn" @click="changeAvatar()">修改头像</view>
+                :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="item">-->
-					<view class="title">
+<!--					<view class="title">-->
-						住址 <text class="required"></text>
+<!--						住址 <text class="required"></text>-->
-					</view>
+<!--					</view>-->
-					<view class="input">
+<!--					<view class="input">-->
-						<input placeholder="暂无" v-model="formData.address" />
+<!--						<input placeholder="暂无" v-model="formData.address" />-->
-					</view>
+<!--					</view>-->
-				</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" />
+            <input type="number" v-model.number="formData.age" :min="3" :max="18" placeholder="请输入年龄" @input="handleAgeInput" />          </view>
-						<fui-date-picker :minDate="minDate" :maxDate="maxDate" :show="picker_show_birthday" type="3"
-							@change="changePickerBirthday" @cancel="picker_show_birthday=false"></fui-date-picker>
-					</view>
 				</view>
 			</view>
 
 			<view class="section">
-				<view class="item">
+<!--				<view class="item">-->
-					<view class="title">
+<!--					<view class="title">-->
-						邮箱 <text class="required">*</text>
+<!--						邮箱 <text class="required">*</text>-->
-					</view>
+<!--					</view>-->
-					<view class="input">
+<!--					<view class="input">-->
-						<input v-model="formData.email" placeholder="请输入邮箱" />
+<!--						<input v-model="formData.email" placeholder="请输入邮箱" />-->
-					</view>
+<!--					</view>-->
-				</view>
+<!--				</view>-->
 
 				<view class="item">
 					<view class="title">
@@ -102,44 +104,36 @@
 </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: [],
+				member_info: {},
-				formData: {
+
-					images_arr: [],
-					name: '', //姓名
-					email: '', //邮箱
-					tel: '', //手机
-					wx: '', //微信
-					sex: '', //性别
-					birthday: '', //生日
-				},
 
 				//上传图片APi路径
-				uploadUrl: `${Api_url}/file/image`,
+				uploadUrl: `${Api_url}/memberUploadImage`,
 
 				//性别选择器 相关
 				picker_show_sex: false,
 				sex_name: '请选择',
-				options_sex_arr: [{
+        options_sex_arr: [
-						value: 1,
+          // {
-						text: '男'
+          //   value: 1,
-					},
+          //   text: '男'
-					{
+          // },
-						value: 2,
-						text: '女'
-					},
         ],
 
 				//生日选择器相关
@@ -149,77 +143,79 @@
 				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() {
+			async memberInfo() {
-				const member_in = await member.member();
+				let res = await apiRoute.xy_memberInfo({})
-				if (member_in.code == 1) {
+        if(res.code != 1){
-					this.member_info = member_in.data
+          uni.showToast({
-					this.formData = {
+            title: res.msg,
-						...this.member_info
+            icon: 'none'
-					}
+          })
-					this.sex_name = member_in.data.gender
+          return
-				} else {
-					this.member_info = []
         }
-			},
+        this.formData = res.data
 
-			// 修改头像按钮
+        this.formData.headimg = res.data.memberHasOne ? res.data.memberHasOne.headimg  : $util.img('/uniapp_src/static/images/common/yong_hu.png')
-			changeAvatar() {
+        this.editHeadimg = this.formData.headimg
-				uni.chooseImage({
+
-					count: 1,
+        console.log('xq',this.formData)
-					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)
+      async getSexDict() {
-						if (res.code == 1) {
+        let res = await apiRoute.common_Dictionary({key:'zy_sex'})
-							this.upload_type = 2
+        if(res.code != 1){
-							this.formData.headimg = res.data.path
-							this.editHeadimg = res.data.path
-							this.uploadHeadimg = res.data.url
-						} else {
           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.gender_name = e.text
-				this.formData.sex = e.value
+				this.formData.gender = e.value
+				this.cancelPickerSex()
+			},
+      cancelPickerSex(){
 			  this.picker_show_sex = false
       },
 
@@ -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 == ''){
+				// if(this.editHeadimg == ''){
-					this.editHeadimg = this.formData.headimg
+				// 	this.editHeadimg = this.formData.headimg
-				}
+				// }
 				member.member_edit({
 					header: this.editHeadimg,
 					name: this.formData.name,
@@ -297,7 +333,9 @@
 						})
 					}
 				})
-			}
+			},
+
+
 
 		}
 	}