Browse Source

feat(coach): 完善教练个人信息页面功能

- 添加头像修改功能
- 实现姓名、邮箱、手机、微信等信息的输入
- 增加性别和生日的选择器
- 优化页面布局和提示文本
master
liutong 1 year ago
parent
commit
3e39f61784
  1. 225
      pages/coach/my/info.vue

225
pages/coach/my/info.vue

@ -5,8 +5,8 @@
<view class="main_section"> <view class="main_section">
<view class="section"> <view class="section">
<view class="item"> <view class="item">
<image class="pic" src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image> <image @click="changeAvatar()" class="pic" src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
<view class="btn">修改头像</view> <view class="btn" @click="changeAvatar()">修改头像</view>
</view> </view>
</view> </view>
@ -16,7 +16,7 @@
姓名 <text class="required">*</text> 姓名 <text class="required">*</text>
</view> </view>
<view class="input"> <view class="input">
<input placeholder="请输入" /> <input v-model="formData.name" placeholder="请输入姓名" />
</view> </view>
</view> </view>
@ -25,7 +25,7 @@
账号 <text class="required"></text> 账号 <text class="required"></text>
</view> </view>
<view class="input"> <view class="input">
<input disabled placeholder="请输入" /> <input disabled placeholder="暂无" />
</view> </view>
</view> </view>
@ -34,7 +34,7 @@
部门 <text class="required"></text> 部门 <text class="required"></text>
</view> </view>
<view class="input"> <view class="input">
<input disabled placeholder="请选择" /> <input disabled placeholder="暂无" />
</view> </view>
</view> </view>
@ -43,7 +43,7 @@
等级 <text class="required"></text> 等级 <text class="required"></text>
</view> </view>
<view class="input"> <view class="input">
<input disabled placeholder="请输入" /> <input disabled placeholder="暂无" />
</view> </view>
</view> </view>
</view> </view>
@ -54,8 +54,15 @@
性别 <text class="required">*</text> 性别 <text class="required">*</text>
</view> </view>
<view class="input"> <view class="input">
<input placeholder="请输入" /> <input placeholder="请选择性别" v-model="sex_name" @click="picker_show_sex=true"/>
<fui-picker :options="options" :show="show" @change="change" @cancel="cancel"></fui-picker> <fui-picker
layer="1"
:linkage="true"
:options="options_sex_arr"
:show="picker_show_sex"
@change="changePickerSex"
@cancel="picker_sex_show=false"
></fui-picker>
</view> </view>
</view> </view>
@ -64,8 +71,15 @@
生日 <text class="required">*</text> 生日 <text class="required">*</text>
</view> </view>
<view class="input"> <view class="input">
<input disabled placeholder="请输入" /> <input placeholder="请选择生日" @click="picker_show_birthday=true" v-model="formData.birthday"/>
<fui-date-picker :show="show" type="3" @change="change" @cancel="cancel"></fui-date-picker> <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>
@ -74,7 +88,7 @@
邮箱 <text class="required">*</text> 邮箱 <text class="required">*</text>
</view> </view>
<view class="input"> <view class="input">
<input disabled placeholder="请选择" /> <input v-model="formData.email" placeholder="请输入邮箱" />
</view> </view>
</view> </view>
@ -83,7 +97,7 @@
手机 <text class="required">*</text> 手机 <text class="required">*</text>
</view> </view>
<view class="input"> <view class="input">
<input disabled placeholder="请选择" /> <input v-model="formData.tel" placeholder="请输入手机" />
</view> </view>
</view> </view>
@ -92,7 +106,7 @@
微信 <text class="required"></text> 微信 <text class="required"></text>
</view> </view>
<view class="input"> <view class="input">
<input disabled placeholder="请输入" /> <input v-model="formData.wx" placeholder="请输入微信" />
</view> </view>
</view> </view>
</view> </view>
@ -104,74 +118,165 @@
<script> <script>
import user from '@/api/user.js'; import user from '@/api/user.js';
import AQUplodeImgMulti from '@/components/AQ/AQUplodeImgMulti'; import {Api_url} from "@/common/config.js";
import AQTabber from "@/components/AQ/AQTabber" import AQTabber from "@/components/AQ/AQTabber"
export default { export default {
components: { components: {
AQTabber, AQTabber,
AQUplodeImgMulti,
}, },
data() { data() {
return { return {
formData:{ formData:{
images_arr:[] images_arr:[],
name:'',//
email:'',//
tel:'',//
wx:'',//
sex:'',//
birthday:'',//
}, },
// //APi
show_course:false,// uploadUrl: `${Api_url}/salesmanapi/common/uploadFile`,
//
course_name:'课程',//
options_course: [
{
text: '请选择课程',
value: '',
checked: true
}, {
text: '羽毛球课程1',
value: '1'
}, {
text: '篮球课程2',
value: '2'
}
],
// //
show_classroom:false,// picker_show_sex: false,
// sex_name:'请选择',
classroom_name:'课室',// options_sex_arr:[
options_classroom: [ { value: 1, text: '男' },
{ { value: 2, text: '女' },
text: '请选择课室',
value: '',
checked: true
}, {
text: '羽毛球201',
value: '1'
}, {
text: '篮球室101',
value: '2'
}
], ],
//
minDate:'',
maxDate:'',
picker_show_birthday:false,
} }
}, },
onLoad() { onLoad() {
}, },
onShow() {
this.init()
},
methods: { methods: {
//######AQ######
// async init(){
AQUploadSuccess(res){ this.getBirthday()
console.log('接收AQ上传回调xxx1',res) },
// 使 split
let _inputValue = [] //
if(res.filePathArr.length){ changeAvatar() {
_inputValue = res.filePathArr uni.chooseImage({
count: 1,
sizeType: ['compressed'],
sourceType: ['album', 'camera'],
success: (res) => {
const tempFilePath = res.tempFilePaths[0]
//
this.uploadFilePromise(tempFilePath)
}
})
},
async uploadFilePromise(url) {
console.log('AQ',this.uploadUrl,url)
return new Promise((resolve, reject) => {
let a = uni.uploadFile({
url: this.uploadUrl, //
filePath: url,
name: "file",
formData: {
token: this.$store.state.token,
},
success: (e) => {
console.log('上传成功1',e)
let res = JSON.parse(e.data.replace(/\ufeff/g, "") || "{}")
console.log('上传成功2',res)
if (res.code >= 0){
this.userInfo.pic = res.data.pic_path
this.editPic(res.data.pic_path)
}else{
this.$util.showToast({
title: res.message
});
}
setTimeout(() => {
resolve(res.data.data);
}, 1000);
},
});
});
},
//Api
async editPic(pic) {
let res = await salesmanApi.editPic({pic: pic})
if (res.code >= 0) {
this.$util.showToast({
title: '修改成功'
})
} else {
this.$util.showToast({
title: res.message
})
}
},
//
changePickerSex(e){
console.log('监听选择',e)
this.sex_name = e.text
this.formData.sex = e.value
this.picker_show_sex = false
},
//
//+30
getBirthday(){
let date = new Date();
let year = date.getFullYear();
let month = date.getMonth() + 1;
let day = date.getDate();
let year_30 = year - 30;
let month_30 = month;
let day_30 = day;
if (month_30 == 2 && day_30 > 28) {
month_30 = 3;
day_30 = 1;
}
if (month_30 == 4 && day_30 > 30) {
month_30 = 5;
day_30 = 1;
}
if (month_30 == 6 && day_30 > 30) {
month_30 = 7;
day_30 = 1;
} }
this.formData[res.inputName]=_inputValue if (month_30 == 9 && day_30 > 30) {
// console.log('AQxxx1',res) month_30 = 10;
// console.log('AQxxx2',this.formData.member_store_certification_arr) day_30 = 1;
}
if (month_30 == 11 && day_30 > 30) {
month_30 = 12;
day_30 = 1;
}
if (month_30 > 12) {
month_30 = month_30 - 12;
year_30 = year_30 + 1;
}
let minDate = year_30 + "-" + month_30 + "-" + day_30
let maxDate = year + "-" + month + "-" + day
this.minDate = minDate
this.maxDate = maxDate
}, },
//
changePickerBirthday(e){
console.log('监听生日选择',e)
this.formData.birthday = e.result
this.picker_show_birthday = false
},
} }
} }
</script> </script>

Loading…
Cancel
Save