shuhi-app/pages/index/wms/bad-out-order.vue

<template>
    <view class="container">
        <!-- 搜索框 -->
        <u-sticky>
            <view class="search-area flex-c mb-20">
                <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>
        </u-sticky>

        <view class="content">
            <!-- 基本信息 -->
            <view class="info-section">
                <view class="info-item">库位：{{ locationInfo.location }}</view>
                <view class="info-item">物流单号：{{ locationInfo.logisticsNo }}</view>
                <view class="info-item">订单编号：{{ locationInfo.orderNo }}</view>
                <view class="info-item">订单商品：{{ locationInfo.goodsCount }}</view>
                <view class="info-item">备注信息：{{ locationInfo.remark }}</view>
            </view>

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

        <!-- 底部按钮 -->
        <view class="fixed-bottom">
            <u-button size="large" type="warning" text="反馈" @click="openRemarkDialog" />
            <u-button size="large" type="primary" text="确定出库" @click="onConfirm" />
        </view>

        <!-- 备注弹窗 -->
        <remark-dialog v-model:visible="remarkVisible" :initial-value="currentRemark"
            @confirm="handleRemarkConfirm"></remark-dialog>
    </view>
</template>

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

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

// 位置信息
const locationInfo = ref({
    location: 'K01-01-1A',
    logisticsNo: 'DPK20232154221',
    orderNo: '7516531',
    goodsCount: '10',
    remark: ''
})

// 极差商品列表
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: '不是',
        estimate: 4.11,
        review: 0,
        good: 0,
        average: 0,
        bad: 1,
        reason: '明显泛黄水印/发霉/明显异味'
    },
    {
        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: '不是',
        estimate: 4.11,
        review: 0,
        good: 0,
        average: 0,
        bad: 1,
        reason: '明显泛黄水印/发霉/明显异味'
    }
])

onMounted(() => {
    ttsModule.value = new VolumeTTS()
})

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

// 打开扫码
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
}

// 确认出库
const onConfirm = () => {
    uni.showModal({
        title: '确认提示',
        content: '是否确认出库？',
        success: (res) => {
            if (res.confirm) {
                // 处理确认出库逻辑
                uni.showToast({
                    title: '出库成功',
                    icon: 'success'
                })
                ttsModule.value.speak('出库成功')
            }
        }
    })
}

// 备注弹窗相关
const remarkVisible = ref(false)
const currentRemark = ref('')
const currentEditIndex = ref(-1)

// 打开备注弹窗
const openRemarkDialog = (index, remark = '') => {
    currentEditIndex.value = index
    currentRemark.value = remark
    remarkVisible.value = true
}

// 处理备注确认
const handleRemarkConfirm = (remark) => {
    if (currentEditIndex.value >= 0) {
        orders.value[currentEditIndex.value].remark = remark
    }
    currentEditIndex.value = -1
    currentRemark.value = ''
}
</script>

<style scoped>
.container {
    padding-bottom: 120rpx;
}


.info-section {
    background-color: #fff;
    padding: 20rpx;
    border-radius: 8rpx;
    margin-bottom: 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;
}

.bad-list {
    margin-bottom: 20rpx;
}

.footer {
    position: fixed;
    bottom: 100rpx;
    left: 0;
    right: 0;
    background-color: #fff;
    padding: 20rpx;
}

.btn-group {
    display: flex;
    justify-content: space-around;
}

.search-wrapper {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    padding: 20rpx;
    box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
}
</style>