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.
421 lines
9.4 KiB
421 lines
9.4 KiB
<!--授课统计-详情-->
|
|
<template>
|
|
<view class="main_box">
|
|
|
|
<view class="main_section">
|
|
<view class="section">
|
|
<view class="item">
|
|
<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>
|
|
|
|
<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.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 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="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="cancelPickerSex"></fui-picker>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="item">
|
|
<view class="title">
|
|
年龄 <text class="required">*</text>
|
|
</view>
|
|
<view class="input">
|
|
<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.phone_number" placeholder="请输入手机" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<view class="submet_btn" @click="submit">提交</view>
|
|
</view>
|
|
</view>
|
|
</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: {},
|
|
|
|
|
|
//上传图片APi路径
|
|
uploadUrl: `${Api_url}/memberUploadImage`,
|
|
|
|
//性别选择器 相关
|
|
picker_show_sex: false,
|
|
sex_name: '请选择',
|
|
options_sex_arr: [
|
|
// {
|
|
// value: 1,
|
|
// text: '男'
|
|
// },
|
|
],
|
|
|
|
//生日选择器相关
|
|
minDate: '',
|
|
maxDate: '',
|
|
picker_show_birthday: false,
|
|
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()
|
|
},
|
|
methods: {
|
|
|
|
async init() {
|
|
await this.memberInfo()
|
|
await this.getSexDict()
|
|
this.getBirthday()
|
|
},
|
|
|
|
//获取学员信息
|
|
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)
|
|
},
|
|
|
|
//获取性别字典
|
|
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.formData.gender_name = e.text
|
|
this.formData.gender = e.value
|
|
this.cancelPickerSex()
|
|
},
|
|
cancelPickerSex(){
|
|
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
|
|
},
|
|
|
|
//监听-年龄修改
|
|
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;
|
|
}
|
|
},
|
|
|
|
//图片预览
|
|
previewImage(url){
|
|
uni.previewImage({
|
|
current: url, // 当前图片地址
|
|
urls: [url] // 所有图片列表（可以是多个）
|
|
});
|
|
},
|
|
|
|
//提交信息
|
|
async submit() {
|
|
if (this.editHeadimg) {
|
|
this.formData.headimg = this.editHeadimg
|
|
}
|
|
let params = {
|
|
...this.formData
|
|
}
|
|
|
|
let res = await apiRoute.xy_memberEdit(params)
|
|
if(res.code != 1){
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'success'
|
|
})
|
|
},
|
|
|
|
|
|
|
|
}
|
|
}
|
|
</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>
|