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.
334 lines
6.6 KiB
334 lines
6.6 KiB
<template>
|
|
<view class="assign-order-page">
|
|
<!-- 顶部导航 -->
|
|
<u-navbar :is-back="true" title="分配订单" :background="{'background':'#1479ff'}" title-color="#fff"
|
|
:border-bottom="false">
|
|
</u-navbar>
|
|
<view class="b-border"></view>
|
|
|
|
<!-- 护工列表 -->
|
|
<view class="nurse-list">
|
|
<view class="section-title">选择护工</view>
|
|
<view class="search-box">
|
|
<u-search v-model="searchKeyword" placeholder="搜索护工姓名" @search="searchNurse" @custom="searchNurse"></u-search>
|
|
</view>
|
|
|
|
<scroll-view scroll-y style="height: 400rpx;" @scrolltolower="loadMoreNurses">
|
|
<view v-if="hasNurseList" class="nurse-items">
|
|
<view
|
|
v-for="nurse in nurseList"
|
|
:key="nurse.id"
|
|
:class="['nurse-item', { active: selectedNurseId === nurse.id }]"
|
|
@click="selectNurse(nurse)"
|
|
>
|
|
<view class="nurse-avatar">
|
|
<u-avatar :src="getNurseAvatar(nurse)" size="80"></u-avatar>
|
|
</view>
|
|
<view class="nurse-info">
|
|
<view class="nurse-name">{{ nurse.name }}</view>
|
|
<view class="nurse-phone">{{ nurse.mobile }}</view>
|
|
</view>
|
|
<view class="nurse-select">
|
|
<u-icon v-if="selectedNurseId === nurse.id" name="checkmark-circle" color="#1479ff" size="40"></u-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-else class="empty-state">
|
|
<u-empty mode="list" text="暂无护工"></u-empty>
|
|
</view>
|
|
|
|
<u-loadmore v-if="hasNurseList" :margin-top="20" :margin-bottom="40" :status="loadStatus"></u-loadmore>
|
|
</scroll-view>
|
|
</view>
|
|
|
|
<!-- 分配按钮 -->
|
|
<view class="assign-btn-wrapper">
|
|
<u-button
|
|
type="primary"
|
|
shape="circle"
|
|
class="assign-btn"
|
|
:disabled="!selectedNurseId"
|
|
@click="assignOrder"
|
|
>
|
|
确认分配
|
|
</u-button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
orderId: '',
|
|
nurseList: [],
|
|
selectedNurseId: null,
|
|
searchKeyword: '',
|
|
loadStatus: 'loadmore',
|
|
page: 1,
|
|
pageSize: 10,
|
|
hasMore: true
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
if (options.id) {
|
|
this.orderId = options.id;
|
|
}
|
|
this.getNurseList();
|
|
},
|
|
methods: {
|
|
// 获取护工列表
|
|
async getNurseList(isLoadMore = false) {
|
|
try {
|
|
if (!isLoadMore) {
|
|
this.page = 1;
|
|
this.nurseList = [];
|
|
}
|
|
|
|
const params = {
|
|
page: this.page,
|
|
page_size: this.pageSize
|
|
};
|
|
|
|
// 如果有搜索关键词，添加搜索条件
|
|
if (this.searchKeyword) {
|
|
params['filter[0][key]'] = 'name';
|
|
params['filter[0][op]'] = 'like';
|
|
params['filter[0][value]'] = this.searchKeyword;
|
|
}
|
|
|
|
// 只显示在线护工
|
|
params['filter[1][key]'] = 'status';
|
|
params['filter[1][op]'] = 'eq';
|
|
params['filter[1][value]'] = 1;
|
|
|
|
const res = await this.$u.api.nurseIndex(params);
|
|
|
|
if (res && res.data) {
|
|
if (isLoadMore) {
|
|
this.nurseList.push(...res.data);
|
|
} else {
|
|
this.nurseList = res.data;
|
|
}
|
|
|
|
this.hasMore = res.data.length === this.pageSize;
|
|
this.loadStatus = this.hasMore ? 'loadmore' : 'nomore';
|
|
} else {
|
|
this.loadStatus = 'nomore';
|
|
if (!isLoadMore) {
|
|
this.nurseList = [];
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.error('获取护工列表失败:', error);
|
|
this.loadStatus = 'nomore';
|
|
uni.showToast({
|
|
title: '获取护工列表失败',
|
|
icon: 'none'
|
|
});
|
|
}
|
|
},
|
|
|
|
// 搜索护工
|
|
searchNurse() {
|
|
this.getNurseList();
|
|
},
|
|
|
|
// 加载更多护工
|
|
loadMoreNurses() {
|
|
if (this.hasMore && this.loadStatus === 'loadmore') {
|
|
this.page++;
|
|
this.getNurseList(true);
|
|
}
|
|
},
|
|
|
|
// 选择护工
|
|
selectNurse(nurse) {
|
|
this.selectedNurseId = nurse.id;
|
|
},
|
|
|
|
// 分配订单
|
|
async assignOrder() {
|
|
if (!this.selectedNurseId) {
|
|
uni.showToast({
|
|
title: '请选择护工',
|
|
icon: 'none'
|
|
});
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const res = await this.$u.api.operatorOrderSave({
|
|
id: this.orderId,
|
|
nurse_id: this.selectedNurseId
|
|
});
|
|
|
|
if (res.errorCode === 0 || res.errorCode === undefined || res.errorCode === null) {
|
|
uni.showToast({
|
|
title: '分配成功',
|
|
icon: 'success'
|
|
});
|
|
|
|
// 延迟返回上一页
|
|
setTimeout(() => {
|
|
uni.navigateBack();
|
|
}, 1500);
|
|
} else {
|
|
uni.showToast({
|
|
title: '分配失败',
|
|
icon: 'none'
|
|
});
|
|
}
|
|
} catch (error) {
|
|
console.error('分配订单失败:', error);
|
|
uni.showToast({
|
|
title: '分配失败',
|
|
icon: 'none'
|
|
});
|
|
}
|
|
},
|
|
|
|
// 获取护工头像
|
|
getNurseAvatar(nurse) {
|
|
if (nurse.avatar) {
|
|
return nurse.avatar_detail.url;
|
|
}
|
|
return '/static/default-avatar.png';
|
|
}
|
|
},
|
|
computed: {
|
|
hasNurseList() {
|
|
return this.nurseList.length > 0;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.assign-order-page {
|
|
background: #f6f8fb;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.b-border {
|
|
width: 100%;
|
|
height: 30rpx;
|
|
border-radius: 0 0 120rpx 120rpx;
|
|
background-color: #1479ff;
|
|
}
|
|
|
|
.nurse-list {
|
|
padding: 30rpx;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
margin-bottom: 30rpx;
|
|
}
|
|
|
|
.search-box {
|
|
margin-bottom: 30rpx;
|
|
}
|
|
|
|
.nurse-items {
|
|
background: #fff;
|
|
border-radius: 20rpx;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.nurse-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 30rpx;
|
|
border-bottom: 1rpx solid #f5f5f5;
|
|
transition: all 0.3s ease;
|
|
|
|
&:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
&.active {
|
|
background: #f0f8ff;
|
|
border-left: 6rpx solid #1479ff;
|
|
}
|
|
|
|
&:active {
|
|
background: #f0f8ff;
|
|
}
|
|
}
|
|
|
|
.nurse-avatar {
|
|
margin-right: 30rpx;
|
|
}
|
|
|
|
.nurse-info {
|
|
flex: 1;
|
|
}
|
|
|
|
.nurse-name {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.nurse-phone {
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.nurse-status {
|
|
font-size: 24rpx;
|
|
padding: 4rpx 12rpx;
|
|
border-radius: 20rpx;
|
|
display: inline-block;
|
|
|
|
&.online {
|
|
background: #e8f5e8;
|
|
color: #52c41a;
|
|
}
|
|
|
|
&.offline {
|
|
background: #f5f5f5;
|
|
color: #999;
|
|
}
|
|
}
|
|
|
|
.nurse-select {
|
|
margin-left: 20rpx;
|
|
}
|
|
|
|
.empty-state {
|
|
background: #fff;
|
|
border-radius: 20rpx;
|
|
padding: 60rpx 0;
|
|
}
|
|
|
|
.assign-btn-wrapper {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 40rpx;
|
|
padding: 0 30rpx;
|
|
z-index: 1001;
|
|
}
|
|
|
|
.assign-btn {
|
|
width: 100%;
|
|
background: linear-gradient(to right, #476de4, #7bb9f7);
|
|
color: #fff;
|
|
font-size: 32rpx;
|
|
border-radius: 50rpx;
|
|
height: 88rpx;
|
|
line-height: 88rpx;
|
|
|
|
&:disabled {
|
|
background: #ccc;
|
|
color: #999;
|
|
}
|
|
}
|
|
</style>
|