shuhi-app/pages/index/wms/task-detail.vue

<template>
    <view class="container">
        <!-- 顶部导航栏 -->
        <u-navbar title="下架任务" :border="false" fixed safe-area-inset-top>
            <template #left>
                <u-icon name="arrow-left" color="#333333" size="20" @click="goBack"></u-icon>
            </template>
            <template #right>
                <u-text type="primary" text="提交" @click="onSubmit"></u-text>
            </template>
        </u-navbar>

        <!-- 任务进度 -->
        <view class="progress-section">
            <u-alert title="当前任务" type="info" center></u-alert>
            <view class="flex flex-j-b pad-10" style="padding-right:40rpx">
                <view class="next-task" @click="handleNextTask">
                    <text>上一个</text>
                </view>
                <view class="flex-c">
                    <text>{{ currentTask }}<text class="progress-text font-18 color-green">/{{ totalTasks
                            }}</text></text>
                </view>
                <view class="color-green" @click="handleNextTask">
                    <text>下一个</text>
                </view>
            </view>
        </view>
        <!-- 库位信息 -->
        <view class="flex flex-j-b pad-10 next-location" style="padding-right:40rpx;align-items: center;">
            <view class="font-14 mb-20">{{ currentIndex }}/{{ totalTasks }}</view>
            <view class="flex-d">
                <view class="font-20 text-center">
                    {{ nextLocation }}
                </view>
                <view class="location-detail font-13 mt-10">下一库位 {{ nextLocation }}</view>
            </view>
            <u-icon name="attach" size="28"></u-icon>
        </view>


        <!-- 订单信息 -->
        <view class="order-info">
            <view class="info-item">订单编号：{{ orderInfo.orderNo }}</view>
            <view class="info-item">物流单号：{{ orderInfo.logisticsNo }}</view>
            <view class="info-item">不良数量：{{ orderInfo.badCount }}</view>
        </view>

        <!-- 极差商品列表 -->
        <view class="bad-list">
            <view class="list-title mb-6 mt-20">极差</view>
            <view v-for="(item, index) in badList" :key="index">
                <BadOutCard :item="item" />
            </view>
        </view>

        <!-- 底部搜索框 -->
        <view class="fixed-bottom pad-20" style="background: #ffffff;">
            <u-search v-model="searchText" placeholder="请输入订单编号" :show-action="false" :clearabled="true"
                @change="onSearch" height="40">
            </u-search>
            <u-icon name="scan" size="28" color="#19be6b" @click="openScan"></u-icon>
        </view>
    </view>
</template>

<script setup>
import {
    ref,onMounted
} from 'vue'
import BadOutCard from '@/pages/index/wms/components/BadOutCard.vue'
import VolumeTTS from '@/utils/VolumeTTS.js'

// 任务进度
const currentTask = ref(0)
const totalTasks = ref(77)
const currentIndex = ref(1)
const nextLocation = ref('K01-02-4A')

// 订单信息
const orderInfo = ref({
    orderNo: '4571211',
    logisticsNo: 'DPK203156442584',
    badCount: 10
})
const ttsModule = ref(null)
onMounted(() => {
    ttsModule.value = new VolumeTTS()
})

// 搜索文本
const searchText = ref('')

// 极差商品列表
const badList = ref([{
    image: 'https://img20.360buyimg.com/da/jfs/t1/141592/25/8861/261559/5f68d8c1E33ed78ab/698ad655bfcfbaed.png',
    title: '公文写作教程',
    isbn: '978704051555',
    price: 49.5,
    discount: 0.85,
    quantity: 5,
    set: '不是',
    good: 0,
    average: 0,
    bad: 1,
    reason: '明显泛黄水印/发霉/明显异味'
}])

// 处理下一个任务
const handleNextTask = () => {
    if (currentTask.value < totalTasks.value) {
        currentTask.value++
        VolumeTTS.speak(nextLocation.value)
    }
}

// 搜索处理
const onSearch = () => {
    // 实现搜索逻辑
}

// 提交处理
const onSubmit = () => {
    uni.showModal({
        title: '确认提示',
        content: '是否确认提交本次下架？',
        success: (res) => {
            if (res.confirm) {
                // 处理提交逻辑
                uni.showToast({
                    title: '提交成功',
                    icon: 'success'
                })
                ttsModule.value.speak('任务已提交')
            }
        }
    })
}

function goBack() {
    uni.showModal({
        title: '确认提示',
        content: '是否确认放弃本次下架？',
        success: (res) => {
            if (res.confirm) {
                uni.navigateBack()
                ttsModule.value.speak('任务已放弃')
            }
        }
    })
}

// 打开扫码
const openScan = () => {
    // #ifdef APP-PLUS || MP-WEIXIN
    uni.scanCode({
        success: (res) => {
            searchText.value = res.result
            onSearch()
        },
        fail: (err) => {
            uni.showToast({
                title: '扫码失败',
                icon: 'error'
            })
        }
    })
    // #endif

    // #ifdef H5
    uni.showToast({
        title: 'H5环境不支持扫码',
        icon: 'none'
    })
    // #endif
}
</script>

<style scoped>
.progress-section {
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10rpx;
    padding-top: 56px;
}
.next-location{
    background-color: #fff;
    border-bottom: 1rpx solid #f0f0f0;
    border-top: 1rpx solid #f0f0f0;
    padding: 20rpx;
}

.color-green {
    color: #4CAF50;
}

.location-info {
    background-color: #fff;
    padding: 20rpx;
    margin-top: 2rpx;
}

.location-detail {
    color: #666;
}

.order-info {
    background-color: #fff;
    padding: 20rpx;
}

.info-item {
    line-height: 1.8;
}

.list-title {
    font-size: 32rpx;
    font-weight: bold;
    background-color: rgb(222, 134, 143, 0.5);
    padding: 10rpx 0;
    padding-left: 30rpx;
}
</style>