357 lines
7.9 KiB
Vue
357 lines
7.9 KiB
Vue
<template>
|
||
<view class="container">
|
||
<!-- 订单信息 -->
|
||
<view class="order-card">
|
||
<view class="card-title">订单信息</view>
|
||
<view class="info-row">
|
||
<text class="label">服务名称：</text>
|
||
<text class="value">{{ orderInfo.serviceName }}</text>
|
||
</view>
|
||
<view class="info-row">
|
||
<text class="label">服务时间：</text>
|
||
<text class="value">{{ form.serviceDate }} {{ form.timeSlot }}</text>
|
||
</view>
|
||
<view class="info-row">
|
||
<text class="label">服务地址：</text>
|
||
<text class="value">{{ form.serviceAddress }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 选择陪伴员 -->
|
||
<view class="section">
|
||
<view class="section-title">选择陪伴员</view>
|
||
|
||
<view class="teacher-list">
|
||
<view
|
||
v-for="teacher in teacherList"
|
||
:key="teacher.id"
|
||
class="teacher-item"
|
||
:class="{ selected: form.teacherId === teacher.id }"
|
||
@click="selectTeacher(teacher)"
|
||
>
|
||
<image :src="teacher.avatar || '/static/images/avatar.png'" mode="aspectFill" />
|
||
<view class="teacher-info">
|
||
<text class="teacher-name">{{ teacher.teacherName }}</text>
|
||
<text class="teacher-subjects">{{ teacher.subjects || '暂无科目' }}</text>
|
||
<text class="teacher-level">{{ getLevelText(teacher.level) }}</text>
|
||
</view>
|
||
<view class="check-icon" v-if="form.teacherId === teacher.id">
|
||
<text class="iconfont icon-check"></text>
|
||
</view>
|
||
</view>
|
||
|
||
<view v-if="teacherList.length === 0" class="empty">
|
||
<text>暂无可用陪伴员</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 服务要求 -->
|
||
<view class="section">
|
||
<view class="section-title">服务要求</view>
|
||
<textarea
|
||
v-model="form.serviceRequirement"
|
||
placeholder="请输入服务要求（选填）"
|
||
maxlength="500"
|
||
/>
|
||
<view class="count">{{ form.serviceRequirement.length }}/500</view>
|
||
</view>
|
||
|
||
<!-- 提交按钮 -->
|
||
<view class="submit-btn">
|
||
<button @click="submit" :disabled="!canSubmit">确认派单</button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { managerApi, orderApi } from '@/api/index.js'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
orderId: null,
|
||
workOrderId: null,
|
||
managerId: null,
|
||
orderInfo: {},
|
||
teacherList: [],
|
||
form: {
|
||
teacherId: null,
|
||
serviceDate: '',
|
||
timeSlot: '',
|
||
serviceAddress: '',
|
||
serviceRequirement: ''
|
||
}
|
||
}
|
||
},
|
||
computed: {
|
||
canSubmit() {
|
||
return this.form.teacherId && this.form.serviceDate && this.form.timeSlot
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
this.orderId = options.orderId
|
||
this.workOrderId = options.workOrderId
|
||
this.managerId = options.managerId
|
||
this.loadOrderInfo()
|
||
},
|
||
methods: {
|
||
async loadOrderInfo() {
|
||
try {
|
||
const res = await orderApi.getOrderDetail(this.orderId)
|
||
this.orderInfo = res
|
||
|
||
this.form.serviceDate = res.serviceDate
|
||
this.form.timeSlot = res.timeSlot
|
||
this.form.serviceAddress = res.serviceAddress
|
||
|
||
this.loadAvailableTeachers()
|
||
} catch (error) {
|
||
uni.showToast({ title: '加载订单信息失败', icon: 'none' })
|
||
}
|
||
},
|
||
|
||
async loadAvailableTeachers() {
|
||
try {
|
||
const res = await managerApi.getAvailableTeachers({
|
||
serviceId: this.orderInfo.serviceId,
|
||
serviceDate: this.form.serviceDate,
|
||
timeSlot: this.form.timeSlot
|
||
})
|
||
this.teacherList = res
|
||
} catch (error) {
|
||
uni.showToast({ title: '加载陪伴员列表失败', icon: 'none' })
|
||
}
|
||
},
|
||
|
||
selectTeacher(teacher) {
|
||
this.form.teacherId = teacher.id
|
||
},
|
||
|
||
getLevelText(level) {
|
||
const levelMap = {
|
||
normal: '普通教师',
|
||
gold: '金牌教师',
|
||
scholar: '学霸教师'
|
||
}
|
||
return levelMap[level] || '普通教师'
|
||
},
|
||
|
||
async submit() {
|
||
if (!this.canSubmit) return
|
||
|
||
uni.showLoading({ title: '派单中...' })
|
||
|
||
try {
|
||
await managerApi.assignOrder({
|
||
orderId: this.orderId,
|
||
managerId: this.managerId,
|
||
teacherId: this.form.teacherId,
|
||
serviceDate: this.form.serviceDate,
|
||
timeSlot: this.form.timeSlot,
|
||
serviceAddress: this.form.serviceAddress,
|
||
serviceRequirement: this.form.serviceRequirement
|
||
})
|
||
|
||
uni.hideLoading()
|
||
uni.showToast({
|
||
title: '派单成功',
|
||
icon: 'success',
|
||
duration: 2000
|
||
})
|
||
|
||
setTimeout(() => {
|
||
uni.navigateBack()
|
||
}, 2000)
|
||
} catch (error) {
|
||
uni.hideLoading()
|
||
uni.showToast({
|
||
title: error.message || '派单失败',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.container {
|
||
min-height: 100vh;
|
||
background: #f8f8f8;
|
||
padding: 20rpx 30rpx 120rpx;
|
||
}
|
||
|
||
.order-card {
|
||
background: #fff;
|
||
border-radius: 16rpx;
|
||
padding: 30rpx;
|
||
margin-bottom: 20rpx;
|
||
|
||
.card-title {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
margin-bottom: 20rpx;
|
||
padding-left: 20rpx;
|
||
border-left: 6rpx solid #667eea;
|
||
}
|
||
|
||
.info-row {
|
||
display: flex;
|
||
margin-bottom: 16rpx;
|
||
font-size: 28rpx;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.label {
|
||
color: #999;
|
||
min-width: 180rpx;
|
||
}
|
||
|
||
.value {
|
||
flex: 1;
|
||
color: #333;
|
||
}
|
||
}
|
||
}
|
||
|
||
.section {
|
||
background: #fff;
|
||
border-radius: 16rpx;
|
||
padding: 30rpx;
|
||
margin-bottom: 20rpx;
|
||
|
||
.section-title {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
margin-bottom: 20rpx;
|
||
padding-left: 20rpx;
|
||
border-left: 6rpx solid #667eea;
|
||
}
|
||
|
||
textarea {
|
||
width: 100%;
|
||
min-height: 200rpx;
|
||
padding: 20rpx;
|
||
background: #f8f8f8;
|
||
border-radius: 12rpx;
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
}
|
||
|
||
.count {
|
||
text-align: right;
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
margin-top: 10rpx;
|
||
}
|
||
}
|
||
|
||
.teacher-list {
|
||
.teacher-item {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 24rpx;
|
||
background: #f8f8f8;
|
||
border-radius: 12rpx;
|
||
margin-bottom: 16rpx;
|
||
position: relative;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
&.selected {
|
||
background: #e6f7ff;
|
||
border: 2rpx solid #667eea;
|
||
}
|
||
|
||
image {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
border-radius: 50rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.teacher-info {
|
||
flex: 1;
|
||
|
||
.teacher-name {
|
||
display: block;
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.teacher-subjects {
|
||
display: block;
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.teacher-level {
|
||
display: inline-block;
|
||
padding: 4rpx 16rpx;
|
||
background: #fff7e6;
|
||
color: #fa8c16;
|
||
font-size: 22rpx;
|
||
border-radius: 20rpx;
|
||
}
|
||
}
|
||
|
||
.check-icon {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
background: #667eea;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.iconfont {
|
||
font-size: 32rpx;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.empty {
|
||
text-align: center;
|
||
padding: 80rpx 0;
|
||
color: #999;
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
|
||
.submit-btn {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
padding: 20rpx 30rpx;
|
||
background: #fff;
|
||
border-top: 1rpx solid #eee;
|
||
|
||
button {
|
||
width: 100%;
|
||
height: 88rpx;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
color: #fff;
|
||
border: none;
|
||
border-radius: 44rpx;
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
|
||
&[disabled] {
|
||
background: #ccc;
|
||
}
|
||
}
|
||
}
|
||
</style>
|