php
/
ZhiHuiJiaoWu_UniApp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

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

- 引入 AQUplodeImage 组件用于头像上传上传逻辑
- 优化个人信息展示
- 修改头像预览和和编辑功能
- 添加年龄输入限制
- 更新性别选择器数据源
- 移除不必要的邮箱和住址输入字段
-调整课程选择和生日选择器样式
master
liutong 10 months ago
parent
d052d5f8b9
commit
9734dff9eb
2 changed files with 146 additions and 107 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      components/AQ/AQUplodeImage.vue
  2. 252
      pages/student/my/personal_data.vue

1
components/AQ/AQUplodeImage.vue
View File

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

252
pages/student/my/personal_data.vue
View File

@ -5,11 +5,16 @@
<view class="main_section"> <view class="main_section">
<view class="section"> <view class="section">
<view class="item"> <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>
</view> </view>
@ -28,18 +33,18 @@
账号 <text class="required"></text> 账号 <text class="required"></text>
</view> </view>
<view class="input"> <view class="input">
<input disabled placeholder="暂无" v-model="formData.username" /> <input disabled placeholder="暂无" v-model="formData.memberHasOne.mobile" />
</view> </view>
</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="item">
<view class="title"> <view class="title">
@ -57,33 +62,30 @@
性别 <text class="required">*</text> 性别 <text class="required">*</text>
</view> </view>
<view class="input"> <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" <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> </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="请选择生日" @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> </view>
<view class="section"> <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="item">
<view class="title"> <view class="title">
@ -102,45 +104,37 @@
</template> </template>
<script> <script>
import apiRoute from '@/api/apiRoute.js';
import member from '@/api/member.js'; import member from '@/api/member.js';
import { import {
Api_url Api_url
} from "@/common/config.js"; } from "@/common/config.js";
import AQTabber from "@/components/AQ/AQTabber" import AQTabber from "@/components/AQ/AQTabber"
import AQUplodeImage from '@/components/AQ/AQUplodeImage';//单图上传组件
export default { export default {
components: { components: {
AQTabber, AQTabber,
AQUplodeImage,
}, },
data() { data() {
return { return {
member_info: [], member_info: {},
formData: {
images_arr: [],
name: '', //姓名
email: '', //邮箱
tel: '', //手机
wx: '', //微信
sex: '', //性别
birthday: '', //生日
},
//上传图片APi路径 //上传图片APi路径
uploadUrl: `${Api_url}/file/image`, uploadUrl: `${Api_url}/memberUploadImage`,
//性别选择器 相关 //性别选择器 相关
picker_show_sex: false, picker_show_sex: false,
sex_name: '请选择', sex_name: '请选择',
options_sex_arr: [{ options_sex_arr: [
value: 1, // {
text: '男' // value: 1,
}, // text: '男'
{ // },
value: 2, ],
text: '女'
},
],
//生日选择器相关 //生日选择器相关
minDate: '', minDate: '',
@ -149,79 +143,81 @@
upload_type: 1, upload_type: 1,
uploadHeadimg: '', uploadHeadimg: '',
editHeadimg: '', editHeadimg: '',
//表单
formData: {
headimg:'',//头像
name:'',//姓名
course_arr:[],//课程
gender:'',//性别: male-男性, female-女性, other-其他
gender_name:'',//性别: male-男性, female-女性, other-其他
age:'',//年龄
phone_number:'',//手机号
},
} }
}, },
onLoad() {}, onLoad() {},
onShow() { onShow() {
this.init() this.init()
this.member_init()
}, },
methods: { methods: {
async init() { async init() {
await this.memberInfo()
await this.getSexDict()
this.getBirthday() 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')
this.editHeadimg = this.formData.headimg
console.log('xq',this.formData)
}, },
// 修改头像按钮 //获取性别字典
changeAvatar() { async getSexDict() {
uni.chooseImage({ let res = await apiRoute.common_Dictionary({key:'zy_sex'})
count: 1, if(res.code != 1){
sizeType: ['compressed'], uni.showToast({
sourceType: ['album', 'camera'], title: res.msg,
success: (res) => { icon: 'none'
const tempFilePath = res.tempFilePaths[0] })
// 这里可以调用上传接口 return
this.uploadFilePromise(tempFilePath) }
}
}) let dictionary = res.data.dictionary
}, let arr = []
uploadFilePromise(url) { dictionary.forEach((v,k)=>{
let token = uni.getStorageSync('token') || '' arr.push({
let a = uni.uploadFile({ text: v.name,
url: this.uploadUrl, //仅为示例，非真实的接口地址 value: v.value,
filePath: url, })
name: 'file', })
header: { this.options_sex_arr = arr
'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'
})
}
},
});
},
//性别选择相关 //性别选择相关
changePickerSex(e) { changePickerSex(e) {
console.log('监听选择', 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.picker_show_sex = false this.cancelPickerSex()
}, },
cancelPickerSex(){
this.picker_show_sex = false
},
//生日选择相关 //生日选择相关
//获取当前年月日+获取30年前的日期 //获取当前年月日+获取30年前的日期
@ -270,12 +266,52 @@
this.picker_show_birthday = false 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() { submit() {
console.log(this.editHeadimg, '111') console.log(this.editHeadimg, '111')
if(this.editHeadimg == ''){ // if(this.editHeadimg == ''){
this.editHeadimg = this.formData.headimg // this.editHeadimg = this.formData.headimg
} // }
member.member_edit({ member.member_edit({
header: this.editHeadimg, header: this.editHeadimg,
name: this.formData.name, name: this.formData.name,
@ -297,7 +333,9 @@
}) })
} }
}) })
} },
} }
} }

Write Preview
Loading…
Cancel
Save