mtsd/sqxp-wx/pages/deliverer/task/task.vue

<script setup>
import { computed, onMounted, ref } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import { useUserStore } from '@/stores/user';
import { request, parseResponseJson } from '@/utils/request';
import PhoneDialInline from '@/components/phone-dial-inline.vue';
const userStore = useUserStore();
const activeTab = ref('pending');
const keyword = ref('');
const tasks = ref([]);
const loading = ref(false);
const tabToStatus = {
    pending: 'pending',
    delivering: 'delivering',
    completed: 'completed'
};
const statusMap = {
    pending_pickup: { text: '待取货', color: '#07c160' },
    pending: { text: '待分配', color: '#07c160' },
    assigned: { text: '待取货', color: '#07c160' },
    picking: { text: '取货中', color: '#05a050' },
    delivering: { text: '配送中', color: '#05a050' },
    delivered: { text: '已完成', color: '#07c160' },
    completed: { text: '已完成', color: '#07c160' },
    cancelled: { text: '已取消', color: '#909399' }
};
function rowStatusBadge(row) {
    const ds = String(row.delivererStatus || '').toLowerCase();
    if (ds && statusMap[ds])
        return statusMap[ds];
    const st = String(row.status || '').toLowerCase();
    return statusMap[st] || { text: row.status || '-', color: '#909399' };
}
function rowStatusClass(row) {
    const ds = String(row.delivererStatus || row.status || '').toLowerCase();
    if (['pending_pickup', 'pending', 'assigned', 'picked'].includes(ds))
        return 'pending';
    if (['delivering', 'picking'].includes(ds))
        return 'delivering';
    if (['delivered', 'completed'].includes(ds))
        return 'completed';
    if (['cancelled', 'canceled'].includes(ds))
        return 'cancelled';
    return 'default';
}
const tabs = [
    { key: 'pending', label: '待取货' },
    { key: 'delivering', label: '配送中' },
    { key: 'completed', label: '已完成' }
];
function normalizeText(v) {
    return String(v || '').trim().toLowerCase();
}
const filteredTasks = computed(() => {
    const kw = normalizeText(keyword.value);
    if (!kw)
        return tasks.value;
    return tasks.value.filter((t) => {
        const taskNo = normalizeText(t.taskNo);
        const supplierName = normalizeText(t.supplierName);
        return [taskNo, supplierName].some((x) => x.includes(kw));
    });
});
async function fetchTasks() {
    loading.value = true;
    try {
        const st = tabToStatus[activeTab.value] || activeTab.value;
        const res = await request({
            url: `/mini/deliverer/tasks?status=${encodeURIComponent(st)}&page=1&pageSize=50`,
            method: 'GET'
        });
        const body = parseResponseJson(res);
        if (Number(body.code) === 200) {
            tasks.value = body.data?.list || [];
        }
    }
    finally {
        loading.value = false;
    }
}
function switchTab(key) {
    activeTab.value = key;
    fetchTasks();
}
function goDetail(id) {
    uni.navigateTo({ url: `/pages/deliverer/task/detail/detail?id=${id}` });
}
function onSearchClick() {
    uni.hideKeyboard && uni.hideKeyboard();
}
onMounted(() => {
    if (!userStore.isLoggedIn) {
        uni.reLaunch({ url: '/pages/login/login' });
        return;
    }
    if (!userStore.isDeliverer) {
        uni.showToast({ title: '仅配送员可访问', icon: 'none' });
        setTimeout(() => userStore.navigateToHome(), 1200);
        return;
    }
    fetchTasks();
});
onShow(() => {
    if (!userStore.isLoggedIn || !userStore.isDeliverer)
        return;
    fetchTasks();
});
</script>

<template>
  <view v-if="pageLoading" class="page-loading-wrap">
    <ClientSkeleton variant="hero-list" :rows="3" />
  </view>
  <view v-else class="task-page">
    <view class="panel">
      <view class="search-row">
        <view class="search-bar">
          <input
            v-model.trim="keyword"
            class="search-input"
            type="text"
            placeholder="搜索任务号 / 供应商"
            confirm-type="search"
            @confirm="onSearchClick"
          />
          <text class="search-action" @click="onSearchClick">搜索</text>
        </view>
      </view>

      <view class="tabs">
        <view
          v-for="t in tabs"
          :key="t.key"
          class="tab"
          :class="{ active: activeTab === t.key }"
          @click="switchTab(t.key)"
        >
          <text>{{ t.label }}</text>
        </view>
      </view>
    </view>

    <ClientSkeleton v-if="loading" variant="list" :rows="3" />
    <scroll-view v-else scroll-y class="list">
      <view
        v-for="task in filteredTasks"
        :key="task.id"
        class="task-card"
        @click="goDetail(task.id)"
      >
        <view class="line1">
          <text class="no">任务号：{{ task.taskNo || '-' }}</text>
          <text class="status" :class="`status--${rowStatusClass(task)}`">{{ rowStatusBadge(task).text }}</text>
        </view>
        <text class="supplier">{{ task.supplierName || '—' }}</text>
        <view class="foot" @click.stop>
          <text class="qty">共 {{ task.totalQuantity != null ? task.totalQuantity : 0 }} 件</text>
          <PhoneDialInline
            v-if="task.supplierPhone"
            class="dial"
            :phone="task.supplierPhone"
            icon-only
            color="#189b65"
          />
          <text v-else class="muted">暂无电话</text>
        </view>
      </view>

      <view v-if="filteredTasks.length === 0" class="empty">
        <text>暂无任务</text>
      </view>
    </scroll-view>
  </view>
</template>

<style lang="scss">
page {
  height: 100%;
  overflow: hidden;
}
</style>

<style lang="scss" scoped>
.page-loading-wrap {
  min-height: 100vh;
}

.task-page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #f3f7f5;
}

.panel {
  margin: 12rpx 16rpx 10rpx;
  padding: 12rpx;
  border-radius: 16rpx;
  background: #ffffff;
  border: 1rpx solid #d9e9e1;
  box-sizing: border-box;
}

.search-row {
  margin-bottom: 10rpx;
}

.search-bar {
  display: flex;
  align-items: center;
  width: 100%;
  height: 72rpx;
  background: #ffffff;
  border: 1rpx solid #d9e9e1;
  border-radius: 36rpx;
  padding: 0 8rpx 0 24rpx;
  box-sizing: border-box;
}

.search-input {
  flex: 1;
  min-width: 0;
  height: 72rpx;
  background: transparent;
  border: none;
  padding: 0;
  font-size: 28rpx;
  color: #303133;
  box-sizing: border-box;
}

.search-input::placeholder {
  color: #909399;
}

.search-action {
  flex-shrink: 0;
  padding: 0 16rpx 0 8rpx;
  font-size: 24rpx;
  color: #0a9f6d;
  font-weight: 600;
}

.tabs {
  display: flex;
  background: #fff;
  border-radius: 14rpx;
  border: 1rpx solid #d9e9e1;
  padding: 4rpx;
  .tab {
    flex: 1;
    text-align: center;
    min-height: 64rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24rpx;
    color: #6f7e77;
    border-radius: 10rpx;
    &.active {
      background: #e9f9f2;
      color: #189b65;
      font-weight: 600;
    }
  }
}
.hint {
  text-align: center;
  padding: 40rpx;
  color: #6f7e77;
}
.list {
  flex: 1;
  min-height: 0;
  padding: 0 16rpx calc(16rpx + env(safe-area-inset-bottom, 0px));
}

.task-card {
  background: #ffffff;
  border: 1rpx solid #d9e9e1;
  border-radius: 18rpx;
  padding: 16rpx;
  margin-top: 12rpx;
  box-shadow: 0 4rpx 12rpx rgba(10, 159, 109, 0.06);
}

.line1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12rpx;
  margin-bottom: 10rpx;
}

.no {
  flex: 1;
  min-width: 0;
  font-size: 24rpx;
  font-weight: 700;
  color: #1f2a26;
  word-break: break-all;
}

.status {
  flex-shrink: 0;
  min-height: 44rpx;
  padding: 0 16rpx;
  border-radius: 999rpx;
  font-size: 20rpx;
  display: inline-flex;
  align-items: center;
}

.status--pending {
  background: #fff4dd;
  color: #cf8a19;
}

.status--delivering {
  background: #e9f9f2;
  color: #189b65;
}

.status--completed {
  background: #d1fae5;
  color: #087f57;
}

.status--cancelled {
  background: #f1f5f9;
  color: #64748b;
}

.status--default {
  background: #eef3f1;
  color: #6f7e77;
}

.supplier {
  display: block;
  font-size: 26rpx;
  color: #1f2a26;
  margin-bottom: 10rpx;
}

.foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12rpx;
}

.qty {
  font-size: 22rpx;
  color: #6f7e77;
}

.dial :deep(.phone-dial-inline__btn) {
  width: 44rpx;
  height: 44rpx;
  background: transparent;
  border-radius: 0;
}

.muted {
  font-size: 22rpx;
  color: #9aa9a2;
}
.empty {
  text-align: center;
  padding: 120rpx;
  color: #6f7e77;
  font-size: 24rpx;
}
</style>