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

<template>
    <view class="order-detail" :class="{ 'fixed-bottom-2': type == 2 }">
        <scroll-view class="scroller" :scroll-into-view="toView" scroll-y="true" scroll-with-animation="true">
            <view class="flex flex-a-c flex-j-b bg-white bind-audit mb-16">
                <text>绑定审核员</text>
                <text class="text-center flex-1">{{ orderDetail.auditUserName || selectedAuditor?.userName || ''
                    }}</text>
                <text @click="showAuditorSelector = true" class="color-primary">绑定</text>
            </view>

            <OrderInfo :detail="orderDetail" />

            <UserInfoCard :detail="orderDetail" />

            <view class="mt-16" style="padding: 0 6rpx;">
                <u-subsection :list="list" mode="subsection" :current="current"
                    @change="handleSectionChange"></u-subsection>
                <BookInfo v-if="current == 0" :bookList="orderDetail.detailVoList" :detail="orderDetail"
                    @get-all-firstLetter="onGetAllFirstLetter" />
                <LogisticsTimeline v-if="current == 1" :list="orderDetail.trackingVoList" />
                <FileInfo v-if="current == 2" :orderId="orderDetail.orderId" />
            </view>
        </scroll-view>

        <view class="fixed-left">
            <view class="bind-code common-bg" style="margin-bottom: 30px;padding:20rpx" @click="handleBindCode">绑码
            </view>

            <view class="common-bg flex flex-a-c flex-j-c flex-d">
                <view class="book-status-item" @click="scrollToView('good')">良好</view>
                <view class="book-status-item item-center" @click="scrollToView('average')">一般</view>
                <view class="book-status-item" @click="scrollToView('poor')">极差</view>
            </view>
        </view>

        <view class="fixed-right">
            <view class="letter-bg flex flex-a-c flex-j-c flex-d">
                <view class="letter-item"><u-icon name="arrow-up-fill" size="20" color="#ffffff"
                        @click="scrollToTop"></u-icon></view>
                <view class="letter-item" v-for="item in allLetters" @click="scrollToView(item)">{{ item }}</view>
            </view>
        </view>

        <view class="common-bg fixed-bottom" v-if="type != 2">
            <u-button type="warning" size="large" v-if="orderDetail.status == 5"
                @click="handleLogisticsConfirm">物流签收</u-button>
            <u-button type="primary" size="large" v-if="orderDetail.status == 6" @click="handleConfirm">确认收货</u-button>

            <template v-if="orderDetail.status == 8 || orderDetail.status == 9 || orderDetail.status == 10">
                <u-button type="warning" size="large" @click="handleScanCode">扫码</u-button>
                <u-button type="primary" size="large" @click="handleComplete">完成</u-button>
            </template>
        </view>

        <AuditorSelector :show="showAuditorSelector" @update:show="showAuditorSelector = $event"
            @auditor-selected="handleAuditorSelected" />
    </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import AuditorSelector from './components/AuditorSelector.vue';
import OrderInfo from './components/OrderInfo.vue';
import UserInfoCard from './components/UserInfoCard.vue';
import LogisticsTimeline from '../express/components/LogisticsTimeline.vue';
import BookInfo from './components/BookInfo.vue';
import FileInfo from './components/FileInfo.vue';

const showAuditorSelector = ref(false);
const selectedAuditor = ref({});
const handleAuditorSelected = (auditor) => {
    selectedAuditor.value = auditor;
    orderDetail.value.auditUserId = auditor.userId
    orderDetail.value.auditUserName = auditor.userName
};

//点击滚动的位置
const toView = ref('')
function scrollToView(to) {
    toView.value = to

    uni.pageScrollTo({
        selector: '#' + to,
        duration: 200
    })
}
//回到顶部
function scrollToTop() {
    uni.pageScrollTo({
        top: 0,
        duration: 200
    })
}

//绑码
function handleBindCode() {
    uni.$u.toast('暂无开发')
}


const list = ref(['图书清单', '物流信息', '上传附件']);
const current = ref(0);
const handleSectionChange = (index) => {
    current.value = index;
}

//监听书籍的首字母
const allLetters = ref([])
function onGetAllFirstLetter(data) {
    allLetters.value = data
}

//物流签收 /app/orderinfo/signLogistics
function handleLogisticsConfirm() {
    uni.showModal({
        title: '提示',
        content: '是否确认物流签收？',
        success: (res) => {
            if (res.confirm) {
                uni.showLoading({ title: '加载中...', mask: true })
                uni.$u.http.post('/app/orderinfo/signLogistics', {
                    params: {
                        searchType: 1,
                        "search": orderId.value
                    }
                }).then(res => {
                    if (res.code == 200) {
                        uni.showToast({ title: '签收成功', icon: 'none' })
                        uni.$u.ttsModule.speak('签收成功')
                        uni.navigateBack()
                    }
                }).finally(() => {
                    uni.hideLoading()
                })
            }
        }
    })
}

//确认收货 /app/orderinfo/confirmOrder
function handleConfirm() {
    uni.showLoading({ title: '加载中...', mask: true })
    uni.$u.http.post('/app/orderinfo/confirmOrder', {
        searchType: 1,
        "search": orderDetail.value.orderId
    }).then(res => {
        if (res.code == 200) {
            uni.showToast({ title: '确认收货成功', icon: 'none' })
            uni.$u.ttsModule.speak('确认收货成功')
            getOrderDetail()
        }
    }).finally(() => {
        uni.hideLoading()
    })
}
//完成
function handleComplete() {
    let bookList = orderDetail.value.detailVoList
    let bool = bookList.some(item => item.auditCommentList?.length < item.num)
    if (bool) {
        let text = '还有未审核的书'
        uni.$u.toast(text)
        uni.$u.ttsModule.speak(text)
        return
    } else {
        uni.$u.http.post('/app/orderinfo/checkOrderFinish', {
            checkUserId: orderDetail.value.auditUserId,
            "orderId": orderDetail.value.orderId
        }).then(res => {
            if (res.code == 200) {
                uni.showToast({ title: '审核完成', icon: 'none' })
                uni.$u.ttsModule.speak('审核完成')
                uni.navigateBack()
            }
        })
    }
}

const orderDetail = ref({ status: 0 });
//获取订单详情
function getOrderDetail() {
    if (!orderId.value) return
    uni.showLoading({
        title: '加载中...',
        mask: true
    })
    uni.$u.http.get('/app/orderinfo/getOrderInfoForCheck', {
        params: {
            searchType: 1,
            "search": orderId.value
        }
    }).then(res => {
        if (res.code == 200) {
            orderDetail.value = res.data
            if (isOnLoad.value) {
                if (res.data.manageRemark.length > 0 && res.data.status < 10) {
                    uni.$u.ttsModule.speak('此订单有备注信息，请注意查看')
                }
                if (res.data.warnArea && res.data.warnArea.length > 0) {
                    let text = `此订单来源于${res.data.warnArea}`
                    uni.$u.ttsModule.speak(text)
                }
                isOnLoad.value = false

                if (res.data.auditUserId) {
                    let auditUserInfo = {
                        userName: res.data.auditUserName,
                        userId: res.data.auditUserId
                    }
                    uni.setStorageSync('checkUserInfo', auditUserInfo)
                } else {
                    let userInfo = uni.getStorageSync('userInfo')
                    if (userInfo) {
                        orderDetail.value.auditUserName = userInfo.userName
                        orderDetail.value.auditUserId = userInfo.userId
                        uni.setStorageSync('checkUserInfo', {
                            userName: userInfo.userName,
                            userId: userInfo.userId
                        })
                    }
                }
            }
        } else {
            uni.$u.toast(res.msg)
        }
    }).finally(() => {
        uni.hideLoading()
    })
}
//isbn正则校验是否符合
function checkIsbn(isbn) {
    const isbn13Regex = /^(?:97[89]-?\d{1,5}-?\d{1,7}-?\d{1,6}-?\d)$/;
    if (isbn13Regex.test(isbn)) {
        return true
    }
    return false
}

//扫码之后的逻辑
function handleScan(isbn) {
    if (!checkIsbn(isbn)) {
        let text = `不是正确的ISBN码`
        uni.$u.ttsModule.speak(text)
        return
    }

    if (orderDetail.value.status == 10) {
        uni.$u.ttsModule.speak('此订单已审核')
        return
    }

    let isbns = orderDetail.value.detailVoList.map(item => item.isbn)
    console.log(isbns.includes(isbn), 'isbns')

    if (isbns.includes(isbn)) {
        let book = orderDetail.value.detailVoList.find(item => item.isbn == isbn)
        console.log(orderDetail.value.detailVoList, book, 'book')
        if (book.auditCommentList.every(item => item.sts == 1)) {
            let text = `${isbn}已审核为良好`
            return uni.$u.ttsModule.speak(text)
        }

        //扫描到套装书
        if (book.suit == 1) {
            let text = `${isbn}请注意套装书是否齐全`
            uni.$u.ttsModule.speak(text)
        }
        //扫描到需要取出的书
        if (book.bookWarn == 1) {
            let text = `请注意${isbn}需要取出`
            uni.$u.ttsModule.speak(text)
        }

        uni.navigateTo({
            url: `/pages/index/detail/book-audit?isbn=${isbn}&orderId=${orderDetail.value.orderId}`
        })
        uni.setStorageSync('auditBook', book)
        uni.setStorageSync('orderDetail', orderDetail.value)
    } else {
        let text = `此订单中不存在${isbn}这本书 `
        uni.$u.ttsModule.speak(text)
    }
}

//扫码
function handleScanCode() {
    uni.scanCode({
        success: (res) => {
            console.log(typeof res.result, 'res')
            res.result && handleScan(res.result)
        },
    })
}

const orderId = ref('')
const isOnLoad = ref(false)

// 1 表示到货审核 2 表示查看订单
const type = ref(1)
onLoad((option) => {
    orderId.value = option.id
    getOrderDetail()
    isOnLoad.value = true
    type.value = option.type || 1

    uni.removeStorageSync('scannedBooks')

    // #ifdef APP-PLUS
    uni.$u.useGlobalEvent((e) => {
        if (e.barcode) {
            handleScan(e.barcode)
        }
    })
    // #endif
})


onShow(() => {
    getOrderDetail()
})
</script>

<style>
page {
    background-color: #f5f5f5;
}
</style>
<style lang="scss" scoped>
.order-detail {
    font-size: 30rpx;
    padding-bottom: 140rpx;
    position: relative;

    &.fixed-bottom-2 {
        padding-bottom: 30rpx;
    }

    .bind-audit {
        padding: 20rpx 30rpx;
        border-bottom: 1px solid #e5e5e5;
    }

    .fixed-left {
        position: fixed;
        left: 0;
        top: 150px;
        width: 100rpx;

        .common-bg {
            background-color: rgba(34, 172, 56, 0.7);
            border-radius: 0 30rpx 30rpx 0;
            font-weight: 500;
            color: #ffffff;
        }

        .book-status-item {
            padding: 20rpx;
            border-top: 1rpx solid #ffffff;
            border-bottom: 1rpx solid #ffffff;
        }
    }

    .fixed-right {
        position: fixed;
        right: 0;
        top: 180px;
        width: 70rpx;

        .letter-bg {
            background-color: rgba(34, 172, 56, 0.7);
            border-radius: 10rpx 0 0 10rpx;
            font-weight: 500;
            color: #ffffff;
            padding: 12rpx 0;
            padding-bottom: 6rpx;
        }

        .letter-item {
            padding-bottom: 12rpx;
        }
    }
}
</style>