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" @refresh="getOrderDetail" />

            <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;

    uni.setStorageSync("checkUserInfo", {
        userName: auditor.userName,
        userId: auditor.userId,
    });
};

//点击滚动的位置
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", {
                        searchType: 1,
                        search: orderDetail.value.orderId,
                    })
                    .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;
                getCheckUserInfo();

                if (res.data.auditUserId) {
                    let auditUserInfo = {
                        userName: res.data.auditUserName,
                        userId: res.data.auditUserId,
                    };
                    uni.setStorageSync("checkUserInfo", auditUserInfo);
                } else {
                    let userInfo = uni.getStorageSync("checkUserInfo");
                    orderDetail.value.auditUserName = userInfo.userName;
                    orderDetail.value.auditUserId = userInfo.userId;
                }
                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;
                }
            } else {
                uni.$u.toast(res.msg);
            }
        })
        .finally(() => {
            uni.hideLoading();
        });
}
//获取上一次绑定的审核员信息
function getCheckUserInfo() {
    uni.$u.http.get("/app/orderinfo/getCheckUser").then((res) => {
        if (res.code == 200) {
            let userInfo = res.data;
            orderDetail.value.auditUserName = userInfo.userName;
            orderDetail.value.auditUserId = userInfo.userId;
            uni.setStorageSync("checkUserInfo", {
                userName: userInfo.userName,
                userId: userInfo.userId,
            });
        }
    });
}

//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);

    if (isbns.includes(isbn)) {
        let book = orderDetail.value.detailVoList.find((item) => item.isbn == isbn);

        //扫描到套装书
        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) => {
            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(() => {
    uni.$u.updateActivePageOnShow();
    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: 11%;
        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: 12%;
        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>