You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
397 lines
8.6 KiB
397 lines
8.6 KiB
<!--授课统计-详情-->
|
|
<template>
|
|
<view class="main_box">
|
|
|
|
<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>
|
|
</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="暂无" v-model="formData.username"/>
|
|
</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 disabled placeholder="暂无" :value="formData.classes_list"/>
|
|
</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>
|
|
|
|
<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.mobile" placeholder="请输入手机" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<view class="submet_btn" @click="submit">提交</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import member from '@/api/member.js';
|
|
import {
|
|
Api_url
|
|
} from "@/common/config.js";
|
|
import AQTabber from "@/components/AQ/AQTabber"
|
|
|
|
|
|
export default {
|
|
components: {
|
|
AQTabber,
|
|
},
|
|
data() {
|
|
return {
|
|
member_info: [],
|
|
formData: {
|
|
images_arr: [],
|
|
name: '', //姓名
|
|
email: '', //邮箱
|
|
tel: '', //手机
|
|
wx: '', //微信
|
|
sex: '', //性别
|
|
birthday: '', //生日
|
|
},
|
|
|
|
//上传图片APi路径
|
|
uploadUrl: `${Api_url}/file/image`,
|
|
|
|
//性别选择器 相关
|
|
picker_show_sex: false,
|
|
sex_name: '请选择',
|
|
options_sex_arr: [{
|
|
value: 0,
|
|
text: '保密'
|
|
},{
|
|
value: 1,
|
|
text: '男'
|
|
},
|
|
{
|
|
value: 2,
|
|
text: '女'
|
|
},
|
|
],
|
|
|
|
//生日选择器相关
|
|
minDate: '',
|
|
maxDate: '',
|
|
picker_show_birthday: false,
|
|
upload_type: 1,
|
|
uploadHeadimg: '',
|
|
}
|
|
},
|
|
onLoad() {},
|
|
onShow() {
|
|
this.init()
|
|
this.member_init()
|
|
},
|
|
methods: {
|
|
|
|
async init() {
|
|
this.getBirthday()
|
|
},
|
|
|
|
//获取学员信息
|
|
member_init() {
|
|
member.member().then(res => {
|
|
if(res.code == 1){
|
|
this.member_info = res.data
|
|
this.formData = {...this.member_info}
|
|
if(res.data.sex == 0){
|
|
this.sex_name = '保密'
|
|
}else if(this.formData.sex == 1){
|
|
this.sex_name = '男'
|
|
}else if(this.formData.sex == 2){
|
|
this.sex_name = '女'
|
|
}
|
|
}else{
|
|
this.member_info = []
|
|
}
|
|
})
|
|
},
|
|
|
|
// 修改头像按钮
|
|
changeAvatar() {
|
|
uni.chooseImage({
|
|
count: 1,
|
|
sizeType: ['compressed'],
|
|
sourceType: ['album', 'camera'],
|
|
success: (res) => {
|
|
const tempFilePath = res.tempFilePaths[0]
|
|
// 这里可以调用上传接口
|
|
this.uploadFilePromise(tempFilePath)
|
|
}
|
|
})
|
|
},
|
|
async uploadFilePromise(url) {
|
|
let token = uni.getStorageSync('token') || ''
|
|
console.log(token,'AQ', this.uploadUrl, this.$store.state.token)
|
|
return new Promise((resolve, reject) => {
|
|
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.uploadHeadimg = res.data.url
|
|
} else {
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none'
|
|
})
|
|
}
|
|
setTimeout(() => {
|
|
resolve(res.data);
|
|
}, 1000);
|
|
},
|
|
});
|
|
});
|
|
},
|
|
//性别选择相关
|
|
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
|
|
},
|
|
|
|
//提交信息
|
|
submit(){
|
|
member.member_edit({
|
|
header: this.formData.headimg,
|
|
name: this.formData.name,
|
|
address: this.formData.address,
|
|
gender: this.formData.sex,
|
|
birthday: this.formData.birthday,
|
|
email: this.formData.email,
|
|
phone: this.formData.mobile,
|
|
}).then(res => {
|
|
if(res.code == 1){
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none'
|
|
})
|
|
}else{
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none'
|
|
})
|
|
}
|
|
})
|
|
}
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<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>
|