sqxp/sqxp-wx/pages/deliverer/snatch/snatch.vue

<script setup>
import { 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';
import ClientSkeleton from '@/components/client/client-skeleton.vue';
import { IMG_EMPTY, IMG_LOGO_WATERMARK } from '@/utils/staticAsset';
const userStore = useUserStore();
const list = ref([]);
const loading = ref(false);
const snatchingId = ref('');
async function fetchList() {
    loading.value = true;
    try {
        const res = await request({
            url: '/mini/deliverer/snatch/pending?page=1&pageSize=20',
            method: 'GET'
        });
        const body = parseResponseJson(res);
        if (body.code === 200) {
            list.value = body.data?.list ?? [];
        }
    }
    finally {
        loading.value = false;
    }
}
async function snatchTask(taskId) {
    snatchingId.value = taskId;
    try {
        const res = await request({
            url: `/mini/deliverer/snatch/${taskId}`,
            method: 'POST'
        });
        const body = parseResponseJson(res);
        if (body.code === 200) {
            uni.showToast({ title: '抢单成功', icon: 'success' });
            fetchList();
        }
        else {
            uni.showToast({ title: body.message || '抢单失败', icon: 'none' });
        }
    }
    finally {
        snatchingId.value = '';
    }
}
onMounted(() => {
    if (!userStore.isLoggedIn) {
        uni.reLaunch({ url: '/pages/login/login' });
        return;
    }
    if (!userStore.isDeliverer) {
        uni.showToast({ title: '仅配送员可访问', icon: 'none' });
        setTimeout(() => userStore.navigateToHome(), 1200);
        return;
    }
    fetchList();
});

onShow(() => {
    if (!userStore.isLoggedIn || !userStore.isDeliverer)
        return;
    void fetchList();
});
</script>

<template>
  <view class="snatch-page">
    <view class="header">
      <view class="header-inner">
        <text class="title">抢单大厅</text>
        <text class="sub">待抢任务</text>
      </view>
      <image class="header-watermark" :src="staticAssetUrl('images/logo11.png')" mode="aspectFit" />
    </view>

    <view v-if="loading" class="tip">
      <ClientSkeleton variant="list" :rows="4" />
    </view>
    <scroll-view v-else scroll-y class="scroll">
      <view v-for="task in list" :key="task.id" class="card">
        <view class="row">
          <text class="no">{{ task.taskNo }}</text>
          <text class="sub"
            >{{ task.clientCount ?? 0 }} 客户 / {{ task.itemCount ?? 0 }} 明细</text
          >
        </view>
        <text class="name">{{ task.supplierName }}</text>
        <text v-if="task.supplierAddress" class="addr">{{ task.supplierAddress }}</text>
        <PhoneDialInline
          v-if="task.supplierPhone"
          class="snatch-phone"
          :phone="task.supplierPhone"
          color="#189b65"
          expand
        />
        <text v-if="task.remainingMinutes != null" class="time">剩余约 {{ task.remainingMinutes }} 分钟</text>
        <button
          class="btn"
          :disabled="snatchingId === task.id"
          @click="snatchTask(task.id)"
        >
          {{ snatchingId === task.id ? '抢单中…' : '抢单' }}
        </button>
      </view>
      <view v-if="list.length === 0" class="empty">
        <image class="empty-image" :src="IMG_EMPTY" mode="aspectFit" />
        <text class="empty-text">暂无可抢任务</text>
      </view>
    </scroll-view>
  </view>
</template>

<style lang="scss" scoped>
.snatch-page {
  min-height: 100vh;
  background: #f3f7f5;
}

.header {
  position: relative;
  margin: 16rpx 16rpx 8rpx;
  border-radius: 18rpx;
  padding: 18rpx 16rpx;
  background: linear-gradient(145deg, #087f57, #0a9f6d);
  color: #fff;
  overflow: hidden;
}

.header-inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12rpx;
}

.title {
  font-size: 32rpx;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.sub {
  font-size: 22rpx;
  opacity: 0.92;
}

.header-watermark {
  position: absolute;
  right: -10rpx;
  top: 50%;
  transform: translateY(-50%);
  width: 220rpx;
  height: 220rpx;
  opacity: 0.12;
  z-index: 1;
}
.tip {
  text-align: center;
  padding: 40rpx;
  color: #6f7e77;
}
.scroll {
  height: 100vh;
  padding: 24rpx;
}
.card {
  background: #fff;
  border-radius: 18rpx;
  padding: 18rpx 16rpx;
  margin-bottom: 12rpx;
  border: 1rpx solid #d9e9e1;
  box-shadow: 0 4rpx 12rpx rgba(10, 159, 109, 0.06);
  .row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12rpx;
  }
  .no {
    font-size: 24rpx;
    font-weight: 700;
    color: #1f2a26;
  }
  .sub {
    font-size: 22rpx;
    color: #6f7e77;
  }
  .name {
    font-size: 28rpx;
    font-weight: 700;
    color: #1f2a26;
    display: block;
  }
  .addr {
    font-size: 24rpx;
    color: #6f7e77;
    margin-top: 8rpx;
    display: block;
    line-height: 1.4;
  }
  .snatch-phone {
    margin-top: 10rpx;
  }
  .snatch-phone :deep(.phone-dial-inline__text) {
    font-size: 26rpx;
    color: #1f2a26;
  }
  .time {
    font-size: 22rpx;
    color: #189b65;
    margin-top: 8rpx;
    display: block;
  }
  .btn {
    margin-top: 20rpx;
    width: 100%;
    height: 72rpx;
    line-height: 72rpx;
    background: #10b981;
    color: #fff;
    font-size: 28rpx;
    border-radius: 14rpx;
    border: none;
    &::after {
      border: none;
    }
    &[disabled] {
      opacity: 0.68;
    }
  }
}
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 88rpx 0;
  .empty-image {
    width: 160rpx;
    height: 160rpx;
    margin-bottom: 12rpx;
  }
  .empty-text {
    font-size: 24rpx;
    color: #6f7e77;
    text-align: center;
  }
}
</style>