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

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

- 引入 AQUplodeImage 组件用于头像上传上传逻辑
- 优化个人信息展示
- 修改头像预览和和编辑功能
- 添加年龄输入限制
- 更新性别选择器数据源
- 移除不必要的邮箱和住址输入字段
-调整课程选择和生日选择器样式
master
liutong 1 year 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
Split 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>
<view @click="chooseImage">
<slot></slot>

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

@ -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 @@
})
}
})
}
},
}
}

Write Preview
Loading…
Cancel
Save