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.
1173 lines
36 KiB
1173 lines
36 KiB
<!--新增订单表单弹窗-->
|
|
<template>
|
|
<view class="order-form-popup">
|
|
<view class="popup-header">
|
|
<text class="popup-title">新增订单</text>
|
|
<view class="close-btn" @click="handleCancel">×</view>
|
|
</view>
|
|
|
|
<view class="popup-content">
|
|
<scroll-view class="form-section" scroll-y="true" enable-passive="true" show-scrollbar="false">
|
|
<view class="form-item">
|
|
<text class="label">学生信息</text>
|
|
<view class="student-info">
|
|
<text class="student-name">{{ studentInfo.name || '未选择学生' }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="form-item">
|
|
<text class="label">校区选择 <text class="required">*</text></text>
|
|
<view class="picker-wrapper" @click="showCampusPicker">
|
|
<text class="picker-text" :class="{ 'placeholder': !formData.campus_id }">
|
|
{{ selectedCampus && selectedCampus.label || '请选择校区' }}
|
|
</text>
|
|
<text class="picker-arrow">▼</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="form-item">
|
|
<text class="label">课程选择 <text class="required">*</text></text>
|
|
<view class="picker-wrapper" @click="showCoursePicker">
|
|
<text class="picker-text" :class="{ 'placeholder': !formData.course_id }">
|
|
{{ selectedCourse && selectedCourse.name || '请选择课程' }}
|
|
</text>
|
|
<text class="picker-arrow">▼</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="form-item">
|
|
<text class="label">支付方式 <text class="required">*</text></text>
|
|
<view class="picker-wrapper" @click="showPaymentPicker">
|
|
<text class="picker-text" :class="{ 'placeholder': !formData.payment_type }">
|
|
{{ selectedPaymentType && selectedPaymentType.label || '请选择支付方式' }}
|
|
</text>
|
|
<text class="picker-arrow">▼</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="form-item">
|
|
<text class="label">订单类型 <text class="required">*</text></text>
|
|
<view class="picker-wrapper" @click="showOrderTypePicker">
|
|
<text class="picker-text" :class="{ 'placeholder': !formData.order_type }">
|
|
{{ selectedOrderType && selectedOrderType.label || '请选择订单类型' }}
|
|
</text>
|
|
<text class="picker-arrow">▼</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="form-item">
|
|
<text class="label">订单金额 <text class="required">*</text></text>
|
|
<input
|
|
class="form-input readonly"
|
|
type="digit"
|
|
v-model="formData.order_amount"
|
|
placeholder="请先选择课程"
|
|
readonly
|
|
disabled
|
|
/>
|
|
</view>
|
|
|
|
<view class="form-item" v-if="needPaymentVoucher">
|
|
<text class="label">支付凭证 <text class="required">*</text></text>
|
|
<view class="voucher-upload">
|
|
<view class="voucher-grid">
|
|
<!-- 已上传的图片 -->
|
|
<view
|
|
class="voucher-item"
|
|
v-for="(img, index) in voucherImages"
|
|
:key="index"
|
|
>
|
|
<image :src="img" class="voucher-image" mode="aspectFill"></image>
|
|
<view class="voucher-delete" @click="deleteVoucherImage(index)">×</view>
|
|
</view>
|
|
|
|
<!-- 上传按钮 -->
|
|
<view
|
|
class="voucher-item voucher-upload-btn"
|
|
v-if="voucherImages.length < maxVoucherImages"
|
|
@click="chooseVoucherImage"
|
|
>
|
|
<text class="upload-icon">+</text>
|
|
<text class="upload-text">上传凭证</text>
|
|
</view>
|
|
</view>
|
|
<text class="voucher-tip">最多上传{{ maxVoucherImages }}张图片</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="form-item" v-if="giftList.length > 0">
|
|
<text class="label">选择赠品</text>
|
|
<view class="picker-wrapper" @click="showGiftPicker">
|
|
<text class="picker-text" :class="{ 'placeholder': !formData.gift_id }">
|
|
{{ selectedGift && selectedGift.label || '请选择赠品（可选）' }}
|
|
</text>
|
|
<text class="picker-arrow">▼</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="form-item" v-if="formData.gift_id">
|
|
<text class="label">赠品核销类型 <text class="required">*</text></text>
|
|
<view class="picker-wrapper" @click="showGiftTypePicker">
|
|
<text class="picker-text" :class="{ 'placeholder': !formData.gift_type }">
|
|
{{ selectedGiftType && selectedGiftType.label || '请选择核销类型' }}
|
|
</text>
|
|
<text class="picker-arrow">▼</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="form-item">
|
|
<text class="label">班级选择</text>
|
|
<view class="picker-wrapper" @click="showClassPicker">
|
|
<text class="picker-text" :class="{ 'placeholder': !formData.class_id }">
|
|
{{ selectedClass && selectedClass.label || '请选择班级（可选）' }}
|
|
</text>
|
|
<text class="picker-arrow">▼</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="form-item">
|
|
<text class="label">备注</text>
|
|
<textarea
|
|
class="form-textarea"
|
|
v-model="formData.remark"
|
|
placeholder="请输入备注信息"
|
|
maxlength="200"
|
|
></textarea>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
|
|
<view class="popup-footer">
|
|
<view class="footer-btn cancel-btn" @click="handleCancel">取消</view>
|
|
<view class="footer-btn confirm-btn" @click="handleConfirm">确认创建</view>
|
|
</view>
|
|
|
|
<!-- 选择器弹窗 -->
|
|
<uni-popup ref="pickerPopup" type="bottom">
|
|
<view class="picker-content">
|
|
<view class="picker-header">
|
|
<view class="picker-btn" @click="closePicker">取消</view>
|
|
<text class="picker-title">{{ pickerTitle }}</text>
|
|
<view class="picker-btn confirm" @click="confirmPicker">确定</view>
|
|
</view>
|
|
<picker-view class="picker-view" :value="pickerValue" @change="onPickerChange">
|
|
<picker-view-column>
|
|
<view class="picker-item" v-for="(item, index) in pickerOptions" :key="index">
|
|
{{ item.label || item.name }}
|
|
</view>
|
|
</picker-view-column>
|
|
</picker-view>
|
|
</view>
|
|
</uni-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import apiRoute from '@/api/apiRoute.js'
|
|
import dictUtilSimple from '@/common/dictUtilSimple.js'
|
|
import { uploadFile } from '@/common/util.js'
|
|
|
|
export default {
|
|
name: 'OrderFormPopup',
|
|
props: {
|
|
visible: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
studentInfo: {
|
|
type: Object,
|
|
default: () => ({})
|
|
},
|
|
resourceId: {
|
|
type: [String, Number],
|
|
default: ''
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
formData: {
|
|
student_id: '',
|
|
campus_id: '', // 校区ID,必填字段
|
|
course_id: '',
|
|
payment_type: '',
|
|
payment_voucher: '', // 支付凭证,多张图片URL用逗号分隔
|
|
order_type: '',
|
|
order_amount: '',
|
|
total_hours: '',
|
|
gift_hours: '',
|
|
gift_id: '', // 赠品ID
|
|
gift_type: '', // 赠品核销类型：1-减现, 2-赠课
|
|
remark: '',
|
|
class_id: '' // 班级ID，可选字段
|
|
},
|
|
|
|
// 选择器相关
|
|
currentPicker: '',
|
|
pickerTitle: '',
|
|
pickerValue: [0],
|
|
pickerOptions: [],
|
|
selectedIndex: 0,
|
|
|
|
// 为每个选择器维护独立的索引状态
|
|
campusSelectedIndex: -1,
|
|
courseSelectedIndex: -1,
|
|
paymentSelectedIndex: -1,
|
|
orderTypeSelectedIndex: -1,
|
|
giftSelectedIndex: -1,
|
|
giftTypeSelectedIndex: -1,
|
|
classSelectedIndex: -1,
|
|
|
|
// 数据选项
|
|
campusList: [], // 校区列表
|
|
courseList: [],
|
|
paymentTypes: [], // 从字典接口获取
|
|
orderTypes: [], // 从字典接口获取
|
|
giftList: [], // 可用赠品列表
|
|
classList: [], // 班级列表
|
|
giftTypes: [ // 赠品核销类型
|
|
{ value: '1', label: '减现' },
|
|
{ value: '2', label: '赠课' }
|
|
],
|
|
|
|
// 支付凭证相关
|
|
voucherImages: [], // 支付凭证图片数组,最多9张
|
|
maxVoucherImages: 9 // 最多上传9张图片
|
|
}
|
|
},
|
|
computed: {
|
|
selectedCampus() {
|
|
return this.campusList.find(item => item.value == this.formData.campus_id)
|
|
},
|
|
selectedCourse() {
|
|
return this.courseList.find(item => item.id == this.formData.course_id)
|
|
},
|
|
selectedPaymentType() {
|
|
return this.paymentTypes.find(item => item.value === this.formData.payment_type)
|
|
},
|
|
selectedOrderType() {
|
|
return this.orderTypes.find(item => item.value === this.formData.order_type)
|
|
},
|
|
selectedGift() {
|
|
return this.giftList.find(item => item.value == this.formData.gift_id)
|
|
},
|
|
selectedGiftType() {
|
|
return this.giftTypes.find(item => item.value === this.formData.gift_type)
|
|
},
|
|
selectedClass() {
|
|
return this.classList.find(item => item.value == this.formData.class_id)
|
|
},
|
|
// 是否需要上传支付凭证
|
|
needPaymentVoucher() {
|
|
// 扫码支付、订阅支付、微信在线代付不需要上传凭证
|
|
const noVoucherTypes = ['scan_code', 'subscription', 'wxpay_online']
|
|
return this.formData.payment_type && !noVoucherTypes.includes(this.formData.payment_type)
|
|
}
|
|
},
|
|
watch: {
|
|
visible(newVal) {
|
|
console.log('visible changed:', newVal)
|
|
if (newVal) {
|
|
console.log('开始初始化表单和加载数据')
|
|
this.initForm()
|
|
this.loadCampusList() // 加载校区列表
|
|
this.loadCourseList()
|
|
this.loadDictionaries() // 加载字典数据
|
|
this.loadGiftList() // 加载可用赠品列表
|
|
this.loadClassList() // 加载班级列表
|
|
}
|
|
},
|
|
studentInfo: {
|
|
handler(newVal) {
|
|
if (newVal && newVal.id) {
|
|
this.formData.student_id = newVal.id
|
|
// 同步校区ID
|
|
if (newVal.campus_id) {
|
|
this.formData.campus_id = newVal.campus_id
|
|
// 当学生信息变化时，重新加载班级列表
|
|
this.loadClassList()
|
|
}
|
|
}
|
|
},
|
|
immediate: true,
|
|
deep: true
|
|
}
|
|
},
|
|
mounted() {
|
|
console.log('OrderFormPopup mounted, visible:', this.visible)
|
|
// 如果组件挂载时 visible 为 true，主动加载数据
|
|
if (this.visible) {
|
|
console.log('组件挂载时 visible 为 true，开始加载数据')
|
|
this.loadCampusList()
|
|
this.loadCourseList()
|
|
this.loadDictionaries()
|
|
this.loadGiftList()
|
|
this.loadClassList()
|
|
}
|
|
},
|
|
methods: {
|
|
initForm() {
|
|
this.formData = {
|
|
student_id: this.studentInfo && this.studentInfo.id || '',
|
|
campus_id: this.studentInfo && this.studentInfo.campus_id || '', // 校区ID,必填字段,从studentInfo回显
|
|
course_id: '',
|
|
payment_type: '',
|
|
payment_voucher: '', // 支付凭证,多张图片URL用逗号分隔
|
|
order_type: '',
|
|
order_amount: '',
|
|
total_hours: '',
|
|
gift_hours: '',
|
|
gift_id: '',
|
|
gift_type: '',
|
|
remark: '',
|
|
class_id: '' // 班级ID，可选字段
|
|
}
|
|
|
|
// 重置选择器索引状态
|
|
this.campusSelectedIndex = -1
|
|
this.courseSelectedIndex = -1
|
|
this.paymentSelectedIndex = -1
|
|
this.orderTypeSelectedIndex = -1
|
|
this.giftSelectedIndex = -1
|
|
this.giftTypeSelectedIndex = -1
|
|
this.classSelectedIndex = -1
|
|
|
|
// 重置支付凭证
|
|
this.voucherImages = []
|
|
},
|
|
|
|
/**
|
|
* 加载校区列表
|
|
*/
|
|
async loadCampusList() {
|
|
console.log('开始加载校区列表')
|
|
try {
|
|
const res = await apiRoute.common_getCampusesList({})
|
|
console.log('校区列表API响应:', res)
|
|
|
|
if (res.code === 1) {
|
|
// 过滤状态为1的校区,并格式化数据结构
|
|
this.campusList = (res.data || [])
|
|
.filter(campus => campus.campus_status === 1)
|
|
.map(campus => ({
|
|
value: campus.id,
|
|
label: campus.campus_name,
|
|
...campus
|
|
}))
|
|
console.log('校区列表加载成功:', this.campusList)
|
|
} else {
|
|
console.error('获取校区列表失败:', res.msg)
|
|
this.campusList = []
|
|
}
|
|
} catch (error) {
|
|
console.error('获取校区列表异常:', error)
|
|
this.campusList = []
|
|
}
|
|
},
|
|
|
|
async loadCourseList() {
|
|
console.log('loadCourseList 方法被调用')
|
|
try {
|
|
console.log('正在调用课程API: common_getCourseAll')
|
|
const res = await apiRoute.common_getCourseAll({})
|
|
console.log('课程API响应:', res)
|
|
if (res.code === 1) {
|
|
// 过滤状态为1的课程，并格式化数据结构
|
|
this.courseList = (res.data || [])
|
|
.filter(course => course.status === 1)
|
|
.map(course => ({
|
|
id: course.id,
|
|
name: course.course_name,
|
|
price: parseFloat(course.price || 0),
|
|
hours: course.session_count || 0,
|
|
gift_hours: course.gift_session_count || 0,
|
|
duration: course.duration || 0,
|
|
course_type: course.course_type,
|
|
remarks: course.remarks
|
|
}))
|
|
} else {
|
|
console.error('获取课程列表失败:', res.msg)
|
|
this.courseList = []
|
|
}
|
|
} catch (error) {
|
|
console.error('获取课程列表异常:', error)
|
|
this.courseList = []
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 加载字典数据 - 支付方式和订单类型
|
|
*/
|
|
async loadDictionaries() {
|
|
console.log('开始加载字典数据')
|
|
try {
|
|
const dictResult = await dictUtilSimple.getBatchDict(['payment_type', 'order_type'])
|
|
console.log('字典数据获取结果:', dictResult)
|
|
|
|
// 处理支付方式字典
|
|
if (dictResult.payment_type && Array.isArray(dictResult.payment_type)) {
|
|
this.paymentTypes = dictResult.payment_type.map(item => ({
|
|
value: item.value,
|
|
label: item.name
|
|
}))
|
|
console.log('支付方式字典加载成功:', this.paymentTypes)
|
|
} else {
|
|
console.warn('支付方式字典数据格式不正确:', dictResult.payment_type)
|
|
// 使用备用数据
|
|
this.paymentTypes = [
|
|
{ value: 'cash', label: '现金支付' },
|
|
{ value: 'scan_code', label: '扫码支付' },
|
|
{ value: 'subscription', label: '订阅支付' },
|
|
{ value: 'wxpay_online', label: '微信在线代付' },
|
|
{ value: 'client_wxpay', label: '客户自行付款' },
|
|
{ value: 'deposit', label: '定金' }
|
|
]
|
|
}
|
|
|
|
// 处理订单类型字典
|
|
if (dictResult.order_type && Array.isArray(dictResult.order_type)) {
|
|
this.orderTypes = dictResult.order_type.map(item => ({
|
|
value: item.value,
|
|
label: item.name
|
|
}))
|
|
console.log('订单类型字典加载成功:', this.orderTypes)
|
|
} else {
|
|
console.warn('订单类型字典数据格式不正确:', dictResult.order_type)
|
|
// 使用备用数据
|
|
this.orderTypes = [
|
|
{ value: '1', label: '新订单' },
|
|
{ value: '2', label: '续费订单' },
|
|
{ value: '3', label: '内部员工订单' },
|
|
{ value: '4', label: '转校' },
|
|
{ value: '5', label: '客户内转课订单' }
|
|
]
|
|
}
|
|
|
|
} catch (error) {
|
|
console.error('加载字典数据失败:', error)
|
|
|
|
// 使用备用数据
|
|
this.paymentTypes = [
|
|
{ value: 'cash', label: '现金支付' },
|
|
{ value: 'scan_code', label: '扫码支付' },
|
|
{ value: 'subscription', label: '订阅支付' },
|
|
{ value: 'wxpay_online', label: '微信在线代付' },
|
|
{ value: 'client_wxpay', label: '客户自行付款' },
|
|
{ value: 'deposit', label: '定金' }
|
|
]
|
|
|
|
this.orderTypes = [
|
|
{ value: '1', label: '新订单' },
|
|
{ value: '2', label: '续费订单' },
|
|
{ value: '3', label: '内部员工订单' },
|
|
{ value: '4', label: '转校' },
|
|
{ value: '5', label: '客户内转课订单' }
|
|
]
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 加载可用赠品列表
|
|
*/
|
|
async loadGiftList() {
|
|
console.log('开始加载赠品列表，资源ID:', this.resourceId)
|
|
try {
|
|
if (!this.resourceId) {
|
|
console.warn('缺少资源ID，无法加载赠品列表')
|
|
this.giftList = []
|
|
return
|
|
}
|
|
|
|
const res = await apiRoute.xs_customerResourcesGetGiftRecordList({
|
|
resource_id: this.resourceId
|
|
})
|
|
console.log('赠品列表API响应:', res)
|
|
|
|
if (res.code === 1) {
|
|
// 过滤gift_status=1的可用赠品
|
|
this.giftList = (res.data || [])
|
|
.filter(gift => gift.gift_status === 1)
|
|
.map(gift => ({
|
|
value: gift.id,
|
|
label: gift.gift_name,
|
|
gift_type: gift.gift_type,
|
|
gift_type_text: gift.gift_type_text,
|
|
gift_time: gift.gift_time,
|
|
gift_time_formatted: gift.gift_time_formatted,
|
|
giver_name: gift.giver_name
|
|
}))
|
|
console.log('可用赠品列表:', this.giftList)
|
|
} else {
|
|
console.error('获取赠品列表失败:', res.msg)
|
|
this.giftList = []
|
|
}
|
|
} catch (error) {
|
|
console.error('获取赠品列表异常:', error)
|
|
this.giftList = []
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 加载班级列表
|
|
* @param {Number} campusId - 校区ID，如果不传则使用formData.campus_id
|
|
*/
|
|
async loadClassList(campusId) {
|
|
const targetCampusId = campusId || this.formData.campus_id
|
|
console.log('开始加载班级列表，校区ID:', targetCampusId)
|
|
try {
|
|
if (!targetCampusId) {
|
|
console.warn('缺少校区ID，无法加载班级列表')
|
|
this.classList = []
|
|
return
|
|
}
|
|
|
|
const res = await apiRoute.getClassListForSchedule({
|
|
campus_id: targetCampusId
|
|
})
|
|
console.log('班级列表API响应:', res)
|
|
|
|
if (res.code === 1) {
|
|
// 格式化班级数据结构，使用 id 和 class_name
|
|
this.classList = (res.data || []).map(cls => ({
|
|
value: cls.id,
|
|
label: cls.class_name || `班级${cls.id}`,
|
|
...cls
|
|
}))
|
|
console.log('班级列表加载成功:', this.classList)
|
|
} else {
|
|
console.error('获取班级列表失败:', res.msg)
|
|
this.classList = []
|
|
}
|
|
} catch (error) {
|
|
console.error('获取班级列表异常:', error)
|
|
this.classList = []
|
|
}
|
|
},
|
|
|
|
showCampusPicker() {
|
|
this.currentPicker = 'campus'
|
|
this.pickerTitle = '选择校区'
|
|
this.pickerOptions = this.campusList
|
|
|
|
// 根据当前选中的校区设置初始索引
|
|
if (this.formData.campus_id) {
|
|
const currentIndex = this.campusList.findIndex(item => item.value == this.formData.campus_id)
|
|
this.campusSelectedIndex = currentIndex >= 0 ? currentIndex : 0
|
|
} else {
|
|
this.campusSelectedIndex = 0
|
|
}
|
|
|
|
this.pickerValue = [this.campusSelectedIndex]
|
|
this.selectedIndex = this.campusSelectedIndex
|
|
this.$refs.pickerPopup.open()
|
|
},
|
|
|
|
showCoursePicker() {
|
|
this.currentPicker = 'course'
|
|
this.pickerTitle = '选择课程'
|
|
this.pickerOptions = this.courseList
|
|
|
|
// 根据当前选中的课程设置初始索引
|
|
if (this.formData.course_id) {
|
|
const currentIndex = this.courseList.findIndex(item => item.id == this.formData.course_id)
|
|
this.courseSelectedIndex = currentIndex >= 0 ? currentIndex : 0
|
|
} else {
|
|
this.courseSelectedIndex = 0
|
|
}
|
|
|
|
this.pickerValue = [this.courseSelectedIndex]
|
|
this.selectedIndex = this.courseSelectedIndex
|
|
this.$refs.pickerPopup.open()
|
|
},
|
|
|
|
showPaymentPicker() {
|
|
this.currentPicker = 'payment'
|
|
this.pickerTitle = '选择支付方式'
|
|
this.pickerOptions = this.paymentTypes
|
|
|
|
// 根据当前选中的支付方式设置初始索引
|
|
if (this.formData.payment_type) {
|
|
const currentIndex = this.paymentTypes.findIndex(item => item.value === this.formData.payment_type)
|
|
this.paymentSelectedIndex = currentIndex >= 0 ? currentIndex : 0
|
|
} else {
|
|
this.paymentSelectedIndex = 0
|
|
}
|
|
|
|
this.pickerValue = [this.paymentSelectedIndex]
|
|
this.selectedIndex = this.paymentSelectedIndex
|
|
this.$refs.pickerPopup.open()
|
|
},
|
|
|
|
showOrderTypePicker() {
|
|
this.currentPicker = 'orderType'
|
|
this.pickerTitle = '选择订单类型'
|
|
this.pickerOptions = this.orderTypes
|
|
|
|
// 根据当前选中的订单类型设置初始索引
|
|
if (this.formData.order_type) {
|
|
const currentIndex = this.orderTypes.findIndex(item => item.value === this.formData.order_type)
|
|
this.orderTypeSelectedIndex = currentIndex >= 0 ? currentIndex : 0
|
|
} else {
|
|
this.orderTypeSelectedIndex = 0
|
|
}
|
|
|
|
this.pickerValue = [this.orderTypeSelectedIndex]
|
|
this.selectedIndex = this.orderTypeSelectedIndex
|
|
this.$refs.pickerPopup.open()
|
|
},
|
|
|
|
showGiftPicker() {
|
|
this.currentPicker = 'gift'
|
|
this.pickerTitle = '选择赠品'
|
|
|
|
// 添加一个"不选择"的选项
|
|
this.pickerOptions = [
|
|
{ value: '', label: '不选择赠品' },
|
|
...this.giftList
|
|
]
|
|
|
|
// 根据当前选中的赠品设置初始索引
|
|
if (this.formData.gift_id) {
|
|
const currentIndex = this.pickerOptions.findIndex(item => item.id == this.formData.gift_id)
|
|
this.giftSelectedIndex = currentIndex >= 0 ? currentIndex : 0
|
|
} else {
|
|
this.giftSelectedIndex = 0
|
|
}
|
|
|
|
this.pickerValue = [this.giftSelectedIndex]
|
|
this.selectedIndex = this.giftSelectedIndex
|
|
this.$refs.pickerPopup.open()
|
|
},
|
|
|
|
showGiftTypePicker() {
|
|
this.currentPicker = 'giftType'
|
|
this.pickerTitle = '选择核销类型'
|
|
this.pickerOptions = this.giftTypes
|
|
|
|
// 根据当前选中的核销类型设置初始索引
|
|
if (this.formData.gift_type) {
|
|
const currentIndex = this.giftTypes.findIndex(item => item.value === this.formData.gift_type)
|
|
this.giftTypeSelectedIndex = currentIndex >= 0 ? currentIndex : 0
|
|
} else {
|
|
this.giftTypeSelectedIndex = 0
|
|
}
|
|
|
|
this.pickerValue = [this.giftTypeSelectedIndex]
|
|
this.selectedIndex = this.giftTypeSelectedIndex
|
|
this.$refs.pickerPopup.open()
|
|
},
|
|
|
|
showClassPicker() {
|
|
this.currentPicker = 'class'
|
|
this.pickerTitle = '选择班级'
|
|
|
|
// 添加一个"不选择"的选项
|
|
this.pickerOptions = [
|
|
{ value: '', label: '不选择班级' },
|
|
...this.classList
|
|
]
|
|
|
|
// 根据当前选中的班级设置初始索引
|
|
if (this.formData.class_id) {
|
|
const currentIndex = this.pickerOptions.findIndex(item => item.value == this.formData.class_id)
|
|
this.classSelectedIndex = currentIndex >= 0 ? currentIndex : 0
|
|
} else {
|
|
this.classSelectedIndex = 0
|
|
}
|
|
|
|
this.pickerValue = [this.classSelectedIndex]
|
|
this.selectedIndex = this.classSelectedIndex
|
|
this.$refs.pickerPopup.open()
|
|
},
|
|
|
|
onPickerChange(e) {
|
|
this.selectedIndex = e.detail.value[0]
|
|
},
|
|
|
|
confirmPicker() {
|
|
const selectedOption = this.pickerOptions[this.selectedIndex]
|
|
if (!selectedOption) return
|
|
|
|
switch (this.currentPicker) {
|
|
case 'campus':
|
|
this.campusSelectedIndex = this.selectedIndex
|
|
this.formData.campus_id = selectedOption.value
|
|
// 清空已选择的班级
|
|
this.formData.class_id = ''
|
|
this.classSelectedIndex = -1
|
|
// 重新加载该校区的班级列表
|
|
this.loadClassList(selectedOption.value)
|
|
console.log('校区选择后更新表单数据，已清空班级选择:', this.formData)
|
|
break
|
|
case 'course':
|
|
this.courseSelectedIndex = this.selectedIndex
|
|
this.formData.course_id = selectedOption.id
|
|
// 自动填充课程相关信息
|
|
if (selectedOption.price !== undefined) {
|
|
this.formData.order_amount = selectedOption.price.toString()
|
|
}
|
|
if (selectedOption.hours !== undefined) {
|
|
this.formData.total_hours = selectedOption.hours.toString()
|
|
}
|
|
if (selectedOption.gift_hours !== undefined) {
|
|
this.formData.gift_hours = selectedOption.gift_hours.toString()
|
|
}
|
|
console.log('课程选择后更新表单数据:', this.formData)
|
|
break
|
|
case 'payment':
|
|
this.paymentSelectedIndex = this.selectedIndex
|
|
this.formData.payment_type = selectedOption.value
|
|
// 切换支付方式时,清空支付凭证
|
|
this.voucherImages = []
|
|
this.formData.payment_voucher = ''
|
|
console.log('支付方式选择后更新表单数据:', this.formData)
|
|
break
|
|
case 'orderType':
|
|
this.orderTypeSelectedIndex = this.selectedIndex
|
|
this.formData.order_type = selectedOption.value
|
|
break
|
|
case 'gift':
|
|
this.giftSelectedIndex = this.selectedIndex
|
|
this.formData.gift_id = selectedOption.value
|
|
// 如果选择了"不选择赠品"，清空赠品类型
|
|
if (!selectedOption.id) {
|
|
this.formData.gift_type = ''
|
|
this.giftTypeSelectedIndex = -1
|
|
}
|
|
console.log('赠品选择后更新表单数据:', this.formData)
|
|
break
|
|
case 'giftType':
|
|
this.giftTypeSelectedIndex = this.selectedIndex
|
|
this.formData.gift_type = selectedOption.value
|
|
console.log('赠品类型选择后更新表单数据:', this.formData)
|
|
break
|
|
case 'class':
|
|
this.classSelectedIndex = this.selectedIndex
|
|
this.formData.class_id = selectedOption.value
|
|
console.log('班级选择后更新表单数据:', this.formData)
|
|
break
|
|
}
|
|
|
|
this.closePicker()
|
|
},
|
|
|
|
closePicker() {
|
|
this.$refs.pickerPopup.close()
|
|
this.currentPicker = ''
|
|
},
|
|
|
|
/**
|
|
* 选择支付凭证图片
|
|
*/
|
|
chooseVoucherImage() {
|
|
const remainCount = this.maxVoucherImages - this.voucherImages.length
|
|
if (remainCount <= 0) {
|
|
uni.showToast({ title: '最多上传9张图片', icon: 'none' })
|
|
return
|
|
}
|
|
|
|
uni.chooseImage({
|
|
count: remainCount,
|
|
sizeType: ['compressed'],
|
|
sourceType: ['album', 'camera'],
|
|
success: (res) => {
|
|
console.log('选择的图片:', res.tempFilePaths)
|
|
// 逐个上传图片
|
|
res.tempFilePaths.forEach(filePath => {
|
|
this.uploadVoucherImage(filePath)
|
|
})
|
|
}
|
|
})
|
|
},
|
|
|
|
/**
|
|
* 上传单张支付凭证图片
|
|
*/
|
|
uploadVoucherImage(filePath) {
|
|
uni.showLoading({ title: '上传中...' })
|
|
|
|
uploadFile(
|
|
filePath,
|
|
(fileData) => {
|
|
// 上传成功
|
|
console.log('图片上传成功:', fileData)
|
|
this.voucherImages.push(fileData.url)
|
|
// 更新formData中的payment_voucher字段
|
|
this.formData.payment_voucher = this.voucherImages.join(',')
|
|
console.log('支付凭证已更新:', this.formData.payment_voucher)
|
|
uni.hideLoading()
|
|
uni.showToast({ title: '上传成功', icon: 'success' })
|
|
},
|
|
(error) => {
|
|
// 上传失败
|
|
console.error('图片上传失败:', error)
|
|
uni.hideLoading()
|
|
}
|
|
)
|
|
},
|
|
|
|
/**
|
|
* 删除支付凭证图片
|
|
*/
|
|
deleteVoucherImage(index) {
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '确定删除这张图片吗?',
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
this.voucherImages.splice(index, 1)
|
|
// 更新formData中的payment_voucher字段
|
|
this.formData.payment_voucher = this.voucherImages.join(',')
|
|
console.log('支付凭证已更新:', this.formData.payment_voucher)
|
|
uni.showToast({ title: '删除成功', icon: 'success' })
|
|
}
|
|
}
|
|
})
|
|
},
|
|
|
|
validateForm() {
|
|
if (!this.formData.student_id) {
|
|
uni.showToast({ title: '请选择学生', icon: 'none' })
|
|
return false
|
|
}
|
|
if (!this.formData.campus_id) {
|
|
uni.showToast({ title: '请选择校区', icon: 'none' })
|
|
return false
|
|
}
|
|
if (!this.formData.course_id) {
|
|
uni.showToast({ title: '请选择课程', icon: 'none' })
|
|
return false
|
|
}
|
|
if (!this.formData.payment_type) {
|
|
uni.showToast({ title: '请选择支付方式', icon: 'none' })
|
|
return false
|
|
}
|
|
if (!this.formData.order_type) {
|
|
uni.showToast({ title: '请选择订单类型', icon: 'none' })
|
|
return false
|
|
}
|
|
if (!this.formData.order_amount || this.formData.order_amount <= 0) {
|
|
uni.showToast({ title: '请输入有效的订单金额', icon: 'none' })
|
|
return false
|
|
}
|
|
if (this.formData.gift_id && !this.formData.gift_type) {
|
|
uni.showToast({ title: '请选择赠品核销类型', icon: 'none' })
|
|
return false
|
|
}
|
|
return true
|
|
},
|
|
|
|
async handleConfirm() {
|
|
if (!this.validateForm()) return
|
|
|
|
try {
|
|
uni.showLoading({ title: '创建中...' })
|
|
|
|
const orderData = {
|
|
...this.formData,
|
|
resource_id: this.resourceId,
|
|
staff_id: '', // 将从用户信息中获取
|
|
order_status: 'pending'
|
|
}
|
|
|
|
// 如果没有选择赠品，确保传递空值而不是空字符串
|
|
if (!orderData.gift_id) {
|
|
orderData.gift_id = null
|
|
orderData.gift_type = null
|
|
}
|
|
|
|
console.log('准备提交的订单数据:', orderData)
|
|
|
|
const res = await apiRoute.xs_orderTableAdd(orderData)
|
|
|
|
if (res.code === 1) {
|
|
uni.showToast({ title: '订单创建成功', icon: 'success' })
|
|
this.$emit('confirm', { orderData, result: res.data })
|
|
} else {
|
|
uni.showToast({ title: res.msg || '创建失败', icon: 'none' })
|
|
}
|
|
} catch (error) {
|
|
console.error('创建订单失败:', error)
|
|
uni.showToast({ title: '创建失败', icon: 'none' })
|
|
} finally {
|
|
uni.hideLoading()
|
|
}
|
|
},
|
|
|
|
handleCancel() {
|
|
this.$emit('cancel')
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.order-form-popup {
|
|
background: #1a1a1a;
|
|
border-radius: 20rpx 20rpx 0 0;
|
|
color: #ffffff;
|
|
height: 80vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.popup-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 30rpx 40rpx;
|
|
border-bottom: 1px solid #333;
|
|
|
|
.popup-title {
|
|
font-size: 36rpx;
|
|
font-weight: 600;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.close-btn {
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 40rpx;
|
|
color: #888;
|
|
border-radius: 50%;
|
|
background: #333;
|
|
}
|
|
}
|
|
|
|
.popup-content {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
min-height: 0; /* 确保flex子项可以收缩 */
|
|
height: 0; /* 在微信小程序中确保flex子项正确计算高度 */
|
|
}
|
|
|
|
.form-section {
|
|
height: 100%;
|
|
width: 100%;
|
|
padding: 40rpx 40rpx 60rpx 40rpx; // 增加底部间距，防止最后一项被遮挡
|
|
/* 确保滚动区域正确计算 */
|
|
box-sizing: border-box;
|
|
|
|
.form-item {
|
|
margin-bottom: 40rpx;
|
|
|
|
.label {
|
|
display: block;
|
|
font-size: 28rpx;
|
|
color: #cccccc;
|
|
margin-bottom: 20rpx;
|
|
|
|
.required {
|
|
color: #ff4757;
|
|
}
|
|
}
|
|
|
|
.student-info {
|
|
padding: 20rpx;
|
|
background: #2a2a2a;
|
|
border-radius: 12rpx;
|
|
|
|
.student-name {
|
|
font-size: 30rpx;
|
|
color: #29D3B4;
|
|
}
|
|
}
|
|
|
|
.picker-wrapper {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 24rpx 30rpx;
|
|
background: #2a2a2a;
|
|
border-radius: 12rpx;
|
|
border: 1px solid #444;
|
|
|
|
.picker-text {
|
|
flex: 1;
|
|
font-size: 30rpx;
|
|
color: #ffffff;
|
|
|
|
&.placeholder {
|
|
color: #888;
|
|
}
|
|
}
|
|
|
|
.picker-arrow {
|
|
font-size: 24rpx;
|
|
color: #888;
|
|
}
|
|
}
|
|
|
|
.form-input, .form-textarea {
|
|
width: 100%;
|
|
padding: 24rpx 30rpx;
|
|
background: #2a2a2a;
|
|
border: 1px solid #444;
|
|
border-radius: 12rpx;
|
|
color: #ffffff;
|
|
font-size: 30rpx;
|
|
|
|
&::placeholder {
|
|
color: #888;
|
|
}
|
|
|
|
&.readonly {
|
|
background: #1a1a1a;
|
|
border-color: #333;
|
|
color: #888;
|
|
height: 100rpx;
|
|
&::placeholder {
|
|
color: #666;
|
|
}
|
|
}
|
|
}
|
|
|
|
.form-textarea {
|
|
height: 120rpx;
|
|
resize: none;
|
|
}
|
|
|
|
// 支付凭证上传样式
|
|
.voucher-upload {
|
|
.voucher-grid {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 20rpx;
|
|
|
|
.voucher-item {
|
|
width: 200rpx;
|
|
height: 200rpx;
|
|
border-radius: 12rpx;
|
|
overflow: hidden;
|
|
position: relative;
|
|
background: #2a2a2a;
|
|
border: 1px solid #444;
|
|
|
|
.voucher-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.voucher-delete {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
background: rgba(255, 71, 87, 0.8);
|
|
color: #ffffff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 40rpx;
|
|
border-radius: 0 12rpx 0 12rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
&.voucher-upload-btn {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 2px dashed #666;
|
|
background: transparent;
|
|
|
|
.upload-icon {
|
|
font-size: 60rpx;
|
|
color: #888;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.upload-text {
|
|
font-size: 24rpx;
|
|
color: #888;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.voucher-tip {
|
|
display: block;
|
|
margin-top: 20rpx;
|
|
font-size: 24rpx;
|
|
color: #888;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.popup-footer {
|
|
display: flex;
|
|
padding: 30rpx 40rpx;
|
|
padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
|
|
border-top: 1px solid #333;
|
|
gap: 30rpx;
|
|
flex-shrink: 0; /* 确保底部按钮区域不被压缩 */
|
|
background: #1a1a1a; /* 确保背景色一致 */
|
|
|
|
.footer-btn {
|
|
flex: 1;
|
|
height: 88rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 12rpx;
|
|
font-size: 32rpx;
|
|
font-weight: 500;
|
|
|
|
&.cancel-btn {
|
|
background: #cccccc;
|
|
}
|
|
|
|
&.confirm-btn {
|
|
background: linear-gradient(45deg, #29D3B4, #1DB584);
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 选择器样式
|
|
.picker-content {
|
|
background: #1a1a1a;
|
|
border-radius: 20rpx 20rpx 0 0;
|
|
|
|
.picker-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 30rpx 40rpx;
|
|
border-bottom: 1px solid #333;
|
|
|
|
.picker-btn {
|
|
font-size: 30rpx;
|
|
color: #888;
|
|
|
|
&.confirm {
|
|
color: #29D3B4;
|
|
}
|
|
}
|
|
|
|
.picker-title {
|
|
font-size: 32rpx;
|
|
color: #ffffff;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
.picker-view {
|
|
height: 400rpx;
|
|
color: #ffffff;
|
|
|
|
.picker-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 30rpx;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
}
|
|
</style>
|