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.
324 lines
10 KiB
324 lines
10 KiB
<!--学生信息编辑弹窗组件-->
|
|
<template>
|
|
<uni-popup ref="popup" type="center">
|
|
<view class="popup-container student-edit-popup">
|
|
<view class="popup-header">
|
|
<view class="popup-title">{{ isEditing ? '编辑学生信息' : '添加学生信息' }}</view>
|
|
<view class="popup-close" @click="close">✕</view>
|
|
</view>
|
|
<scroll-view class="student-form-container" scroll-y="true">
|
|
<view class="form-section">
|
|
<!-- 基本信息 -->
|
|
<view class="form-group">
|
|
<view class="form-group-title">基本信息</view>
|
|
|
|
<view class="form-item">
|
|
<view class="form-label required">姓名</view>
|
|
<view class="form-input">
|
|
<input type="text" v-model="studentData.name" placeholder="请输入学生姓名" maxlength="20" />
|
|
</view>
|
|
</view>
|
|
|
|
<view class="form-item">
|
|
<view class="form-label required">性别</view>
|
|
<view class="form-input">
|
|
<picker :range="genderOptions" range-key="label" @change="onGenderChange">
|
|
<view class="picker-display">
|
|
{{ $util.formatGender(studentData.gender) || '请选择性别' }}
|
|
<text class="picker-arrow">›</text>
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="form-item">
|
|
<view class="form-label required">出生日期</view>
|
|
<view class="form-input">
|
|
<picker mode="date" :value="studentData.birthday" @change="onBirthdayChange">
|
|
<view class="picker-display">
|
|
{{ studentData.birthday || '请选择出生日期' }}
|
|
<text class="picker-arrow">›</text>
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="form-item">
|
|
<view class="form-label">联系电话</view>
|
|
<view class="form-input">
|
|
<input type="number" v-model="studentData.contact_phone" placeholder="请输入联系电话" maxlength="20" />
|
|
</view>
|
|
</view>
|
|
|
|
<view class="form-item">
|
|
<view class="form-label">紧急联系人</view>
|
|
<view class="form-input">
|
|
<input type="text" v-model="studentData.emergency_contact" placeholder="请输入紧急联系人" maxlength="255" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 学员信息 -->
|
|
<view class="form-group">
|
|
<view class="form-group-title">学员信息</view>
|
|
|
|
<view class="form-item">
|
|
<view class="form-label">会员标签</view>
|
|
<view class="form-input">
|
|
<input type="text" v-model="studentData.member_label" placeholder="请输入会员标签" maxlength="255" />
|
|
</view>
|
|
</view>
|
|
|
|
<view class="form-item">
|
|
<view class="form-label">体验课次数</view>
|
|
<view class="form-input">
|
|
<input type="number" v-model="studentData.trial_class_count" placeholder="体验课次数" />
|
|
</view>
|
|
</view>
|
|
|
|
<view class="form-item">
|
|
<view class="form-label">学员状态</view>
|
|
<view class="form-input">
|
|
<picker :range="statusOptions" range-key="label" @change="onStatusChange">
|
|
<view class="picker-display">
|
|
{{ studentData.status === 1 ? '有效' : '无效' }}
|
|
<text class="picker-arrow">›</text>
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 其他信息 -->
|
|
<view class="form-group">
|
|
<view class="form-group-title">其他信息</view>
|
|
|
|
<view class="form-item">
|
|
<view class="form-label">备注</view>
|
|
<view class="form-textarea">
|
|
<textarea v-model="studentData.note" placeholder="请输入备注信息" maxlength="200"></textarea>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
<view class="popup-footer">
|
|
<view class="popup-btn cancel-btn" @click="close">取消</view>
|
|
<view class="popup-btn confirm-btn" @click="confirm">保存</view>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'StudentEditPopup',
|
|
props: {
|
|
// 客户资源ID，用于关联学生
|
|
resourceId: {
|
|
type: [String, Number],
|
|
default: 0
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
isEditing: false, // 是否为编辑模式
|
|
|
|
// 学生数据
|
|
studentData: {
|
|
id: null,
|
|
name: '',
|
|
gender: 0, // 性别: 0未知, 1男, 2女
|
|
age: 0.00, // 年龄，支持小数表示，例如3.11表示3岁11个月
|
|
birthday: null,
|
|
user_id: 0, // 资源ID
|
|
campus_id: null,
|
|
class_id: null,
|
|
note: '', // 备注信息
|
|
status: 1, // 学员状态: 0无效, 1有效
|
|
emergency_contact: '', // 紧急联系人
|
|
contact_phone: '', // 联系人电话
|
|
member_label: '', // 会员标签
|
|
consultant_id: null,
|
|
coach_id: null,
|
|
trial_class_count: 2, // 体验课次数|默认2（新增学员赠送）
|
|
actionsExpanded: false // 操作面板展开状态
|
|
},
|
|
|
|
// 选项数据
|
|
genderOptions: [
|
|
{ label: '未知', value: 0 },
|
|
{ label: '男', value: 1 },
|
|
{ label: '女', value: 2 }
|
|
],
|
|
|
|
statusOptions: [
|
|
{ label: '无效', value: 0 },
|
|
{ label: '有效', value: 1 }
|
|
]
|
|
}
|
|
},
|
|
methods: {
|
|
// 打开弹窗 - 新增模式
|
|
openAdd() {
|
|
this.isEditing = false
|
|
this.resetStudentData()
|
|
this.studentData.user_id = this.resourceId
|
|
this.$refs.popup.open()
|
|
},
|
|
|
|
// 打开弹窗 - 编辑模式
|
|
openEdit(student) {
|
|
this.isEditing = true
|
|
this.studentData = {
|
|
id: student.id,
|
|
name: student.name,
|
|
gender: student.gender,
|
|
age: student.age,
|
|
birthday: student.birthday,
|
|
user_id: student.user_id,
|
|
campus_id: student.campus_id,
|
|
class_id: student.class_id,
|
|
note: student.note,
|
|
status: student.status,
|
|
emergency_contact: student.emergency_contact,
|
|
contact_phone: student.contact_phone,
|
|
member_label: student.member_label,
|
|
consultant_id: student.consultant_id,
|
|
coach_id: student.coach_id,
|
|
trial_class_count: student.trial_class_count,
|
|
actionsExpanded: student.actionsExpanded || false
|
|
}
|
|
this.$refs.popup.open()
|
|
},
|
|
|
|
// 关闭弹窗
|
|
close() {
|
|
this.$refs.popup.close()
|
|
this.resetStudentData()
|
|
this.$emit('close')
|
|
},
|
|
|
|
// 重置学生数据
|
|
resetStudentData() {
|
|
this.studentData = {
|
|
id: null,
|
|
name: '',
|
|
gender: 0,
|
|
age: 0.00,
|
|
birthday: null,
|
|
user_id: this.resourceId || 0,
|
|
campus_id: null,
|
|
class_id: null,
|
|
note: '',
|
|
status: 1,
|
|
emergency_contact: '',
|
|
contact_phone: '',
|
|
member_label: '',
|
|
consultant_id: null,
|
|
coach_id: null,
|
|
trial_class_count: 2,
|
|
actionsExpanded: false
|
|
}
|
|
},
|
|
|
|
// 性别选择器变化事件
|
|
onGenderChange(e) {
|
|
const selectedGender = this.genderOptions[e.detail.value]
|
|
this.studentData.gender = selectedGender.value
|
|
},
|
|
|
|
// 出生日期选择器变化事件
|
|
onBirthdayChange(e) {
|
|
this.studentData.birthday = e.detail.value
|
|
// 计算年龄（精确到月）
|
|
if (this.studentData.birthday) {
|
|
const today = new Date()
|
|
const birthday = new Date(this.studentData.birthday)
|
|
|
|
let years = today.getFullYear() - birthday.getFullYear()
|
|
let months = today.getMonth() - birthday.getMonth()
|
|
|
|
if (today.getDate() < birthday.getDate()) {
|
|
months--
|
|
}
|
|
|
|
if (months < 0) {
|
|
years--
|
|
months += 12
|
|
}
|
|
|
|
// 转换为小数表示：例如3岁11个月 = 3.11
|
|
const ageDecimal = years + (months / 100)
|
|
this.studentData.age = ageDecimal > 0 ? parseFloat(ageDecimal.toFixed(2)) : 0
|
|
}
|
|
},
|
|
|
|
// 学员状态选择器变化事件
|
|
onStatusChange(e) {
|
|
this.studentData.status = this.statusOptions[e.detail.value].value
|
|
},
|
|
|
|
// 确认保存
|
|
confirm() {
|
|
// 表单验证
|
|
if (!this.studentData.name.trim()) {
|
|
uni.showToast({
|
|
title: '请输入学生姓名',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
|
|
if (this.studentData.gender === 0) {
|
|
uni.showToast({
|
|
title: '请选择性别',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
|
|
if (!this.studentData.birthday) {
|
|
uni.showToast({
|
|
title: '请选择出生日期',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
|
|
// 构建保存参数
|
|
const params = {
|
|
name: this.studentData.name,
|
|
gender: this.studentData.gender,
|
|
age: this.studentData.age,
|
|
birthday: this.studentData.birthday,
|
|
user_id: this.resourceId, // 关联到当前客户资源ID
|
|
campus_id: this.studentData.campus_id,
|
|
class_id: this.studentData.class_id,
|
|
note: this.studentData.note,
|
|
status: this.studentData.status,
|
|
emergency_contact: this.studentData.emergency_contact,
|
|
contact_phone: this.studentData.contact_phone,
|
|
member_label: this.studentData.member_label,
|
|
consultant_id: this.studentData.consultant_id,
|
|
coach_id: this.studentData.coach_id,
|
|
trial_class_count: this.studentData.trial_class_count
|
|
}
|
|
|
|
if (this.isEditing) {
|
|
params.id = this.studentData.id
|
|
}
|
|
|
|
// 触发确认事件，将数据传递给父组件处理
|
|
this.$emit('confirm', {
|
|
isEditing: this.isEditing,
|
|
studentData: params
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
@import './student-edit-popup.less';
|
|
</style>
|