1 changed files with 358 additions and 15 deletions
@ -1,22 +1,365 @@ |
|||||
|
<!--授课统计-详情--> |
||||
<template> |
<template> |
||||
<view> |
<view class="main_box"> |
||||
|
|
||||
</view> |
<view class="main_section"> |
||||
|
<view class="section"> |
||||
|
<view class="item"> |
||||
|
<image @click="changeAvatar()" class="pic" src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image> |
||||
|
<view class="btn" @click="changeAvatar()">修改头像</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="section"> |
||||
|
<view class="item"> |
||||
|
<view class="title"> |
||||
|
姓名 <text class="required">*</text> |
||||
|
</view> |
||||
|
<view class="input"> |
||||
|
<input v-model="formData.name" placeholder="请输入姓名" /> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="item"> |
||||
|
<view class="title"> |
||||
|
账号 <text class="required"></text> |
||||
|
</view> |
||||
|
<view class="input"> |
||||
|
<input disabled placeholder="暂无" /> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="item"> |
||||
|
<view class="title"> |
||||
|
部门 <text class="required"></text> |
||||
|
</view> |
||||
|
<view class="input"> |
||||
|
<input disabled placeholder="暂无" /> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="item"> |
||||
|
<view class="title"> |
||||
|
等级 <text class="required"></text> |
||||
|
</view> |
||||
|
<view class="input"> |
||||
|
<input disabled placeholder="暂无" /> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="section"> |
||||
|
<view class="item"> |
||||
|
<view class="title"> |
||||
|
性别 <text class="required">*</text> |
||||
|
</view> |
||||
|
<view class="input"> |
||||
|
<input placeholder="请选择性别" v-model="sex_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> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="item"> |
||||
|
<view class="title"> |
||||
|
生日 <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> |
||||
|
</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"> |
||||
|
手机 <text class="required">*</text> |
||||
|
</view> |
||||
|
<view class="input"> |
||||
|
<input v-model="formData.tel" placeholder="请输入手机" /> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="item"> |
||||
|
<view class="title"> |
||||
|
微信 <text class="required"></text> |
||||
|
</view> |
||||
|
<view class="input"> |
||||
|
<input v-model="formData.wx" placeholder="请输入微信" /> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="submet_btn">提交</view> |
||||
|
</view> |
||||
|
</view> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
export default { |
import user from '@/api/user.js'; |
||||
data() { |
import {Api_url} from "@/common/config.js"; |
||||
return { |
import AQTabber from "@/components/AQ/AQTabber" |
||||
|
|
||||
} |
|
||||
}, |
export default { |
||||
methods: { |
components: { |
||||
|
AQTabber, |
||||
} |
}, |
||||
} |
data() { |
||||
|
return { |
||||
|
formData:{ |
||||
|
images_arr:[], |
||||
|
name:'',//姓名 |
||||
|
email:'',//邮箱 |
||||
|
tel:'',//手机 |
||||
|
wx:'',//微信 |
||||
|
sex:'',//性别 |
||||
|
birthday:'',//生日 |
||||
|
}, |
||||
|
|
||||
|
//上传图片APi路径 |
||||
|
uploadUrl: `${Api_url}/salesmanapi/common/uploadFile`, |
||||
|
|
||||
|
//性别选择器 相关 |
||||
|
picker_show_sex: false, |
||||
|
sex_name:'请选择', |
||||
|
options_sex_arr:[ |
||||
|
{ value: 1, text: '男' }, |
||||
|
{ value: 2, text: '女' }, |
||||
|
], |
||||
|
|
||||
|
//生日选择器相关 |
||||
|
minDate:'', |
||||
|
maxDate:'', |
||||
|
picker_show_birthday:false, |
||||
|
} |
||||
|
}, |
||||
|
onLoad() { |
||||
|
}, |
||||
|
onShow() { |
||||
|
this.init() |
||||
|
}, |
||||
|
methods: { |
||||
|
|
||||
|
async init(){ |
||||
|
this.getBirthday() |
||||
|
}, |
||||
|
|
||||
|
// 修改头像按钮 |
||||
|
changeAvatar() { |
||||
|
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; |
||||
|
} |
||||
|
if (month_30 == 9 && day_30 > 30) { |
||||
|
month_30 = 10; |
||||
|
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> |
||||
|
|
||||
<style> |
<style lang="less" scoped> |
||||
|
|
||||
|
.main_box{ |
||||
|
background: #292929 ; |
||||
|
} |
||||
|
|
||||
|
//自定义导航栏 |
||||
|
.navbar_section{ |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
background: #29d3b4; |
||||
|
.title{ |
||||
|
padding: 20rpx 0; |
||||
|
font-size: 30rpx; |
||||
|
color: #315d55; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.main_section{ |
||||
|
min-height: 100vh; |
||||
|
background: #292929 100%; |
||||
|
padding: 0 0rpx; |
||||
|
padding-top: 32rpx; |
||||
|
padding-bottom: 150rpx; |
||||
|
font-size: 28rpx; |
||||
|
color: #fff; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 20rpx; |
||||
|
|
||||
|
.section{ |
||||
|
background-color: #434544; |
||||
|
.item{ |
||||
|
padding: 20rpx 40rpx; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
.pic{ |
||||
|
width: 82rpx; |
||||
|
height: 82rpx; |
||||
|
border-radius: 50%; |
||||
|
} |
||||
|
.btn{} |
||||
|
|
||||
|
.title{ |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
font-size: 26rpx; |
||||
|
color: #D7D7D7; |
||||
|
.required{ |
||||
|
margin-left: 10rpx; |
||||
|
color: red; |
||||
|
} |
||||
|
} |
||||
|
.input{ |
||||
|
input{ |
||||
|
text-align: right; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.submet_btn{ |
||||
|
margin: 0 auto; |
||||
|
margin-top: 40rpx; |
||||
|
border: 2px solid #25a18b; |
||||
|
color: #25a18b; |
||||
|
width: 80%; |
||||
|
height: 80rpx; |
||||
|
font-size: 30rpx; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
} |
||||
|
|
||||
|
|
||||
</style> |
</style> |
||||
Loading…
Reference in new issue