book-hi/pages/home/index.vue

<template>
    <view class="container" :style="{ background: containerBg }" :class="bookList.length ? 'book-list' : 'no-list'">
        <u-navbar :is-back="false" :border-bottom="false" :background="{ background: navbarBackground }">
            <text class="nav-title">卖书给书嗨</text>
        </u-navbar>

        <not-scanned v-if="!bookList.length"></not-scanned>
        <scan-book-list v-else @updateBooks="updateBooksList" @deleted="handleDeleteBook" :bookList="bookList"
            ref="scanBookList" @upsell="handleUpsell" @refresh="getLastOrder"></scan-book-list>
        <!-- 底部固定按钮 -->
        <view class="bottom-fixed">
            <view class="btn-wrap mb-20">
                <button class="scan-btn flex-1" @click="handleScan">
                    <u-icon name="scan" color="#FFFFFF" size="40"></u-icon>
                    <text>扫码卖书</text>
                </button>
                <button class="isbn-btn flex-1" @click="goToInputISBN">
                    <u-icon name="edit-pen" color="#4CD964" size="40"></u-icon>
                    <text>输入ISBN</text>
                </button>
            </view>

            <view class="flex-a flex-j-b pad-20" style="padding-top: 0" v-if="bookList.length">
                <view class="left-info" style="min-width: 194px">
                    <view class="flex-a common-text">
                        共
                        <text class="color-red">{{ orderInfo.totalNum }}</text>
                        件 预估回收价
                        <text class="color-red">¥{{ orderInfo.totalRecycleMoney || 0 }}</text>
                    </view>
                    <text class="common-text tip">
                        *<text v-if="orderInfo.minOrderNum > 1">旧书满{{ orderInfo.minOrderNum
                        }}本，{{ orderInfo.recycleOrderAndOr == 2 ? '且' : '或' }}</text>预估价格满{{ orderInfo.minOrderMoney}}元起收
                    </text>
                </view>

                <button class="scan-btn next-btn" @click="handleValidate" :disabled="isDisabled">
                    下一步
                </button>
            </view>

            <service-info v-if="bookList.length" :serviceList="serviceList"
                :firstOrder="orderInfo.firstOrder"></service-info>
        </view>

        <InputIsbn ref="isbnPopup" @submit="(isbn) => checkBookISBN(isbn, 'input')" />
        <!-- 套装书说明弹窗 -->
        <CommonDialog ref="setBookDialog" title="套装书说明" :showCancel="false" @confirm="handleSetBookConfirm">
            <text>套装书(ISBN码相同的系列书箱)只需扫描其中一册，扫码价即套装价。打包时请把所有单册统在一起或放在一个袋子里寄出。</text>
        </CommonDialog>

        <!-- 暂不回收弹窗 -->
        <CommonDialog ref="notAcceptDialog" title="暂不回收" :showCancel="false">
            <text>这本书暂时不回收，请您过段时间再来试试~</text>
        </CommonDialog>

        <!-- 暂无信息弹窗 -->
        <CommonDialog ref="noInfoDialog" title="暂无信息" :showCancel="false">
            <text>抱歉，没有该书的信息，书嗨会定期补充图书信息，请您过段时间再来试试~</text>
        </CommonDialog>

        <!-- 扫累了弹窗 -->
        <CommonDialog ref="tiredDialog" title="温馨提示" :showCancel="false">
            <text>扫累了，休息休息吧~</text>
        </CommonDialog>

        <!-- 该书超出最大回收本数  maxAcceptDialog-->
        <CommonDialog ref="maxAcceptDialog" title="温馨提示" :showCancel="false">
            <text>该书超出最大回收本数</text>
        </CommonDialog>

        <!-- 单个订单最多40本书  orderMaxNumDialog-->
        <CommonDialog ref="orderMaxNumDialog" title="温馨提示" :showCancel="false">
            <text>单个订单最多40本书</text>
        </CommonDialog>

        <!-- 删除活动书籍弹窗 -->
        <common-dialog ref="deleteDialog" title="温馨提示" @confirm="confirmDelete">
            <text>{{
                deleteBook.upsellMoney
                    ? "此书为限时加价收图书，删除后再次添加将失去加价收资格，确定删除吗?"
                    : "确定删除这本图书吗？"
            }}</text>
        </common-dialog>

        <!-- 此订单还有未加价的图书，提交订单后将失去加价资格，确定提交吗? -->
        <common-dialog ref="noUpsellDialog" title="温馨提示" @confirm="onNext">
            <text>此订单还有未加价的图书，提交订单后将失去加价资格，确定提交吗?</text>
        </common-dialog>

        <!-- 温馨提示弹窗 -->
        <KindReminder ref="kindReminder" @start="handleStartSelling" />

        <!-- 客服按钮 -->
        <FloatingDrag :width="126" :height="140" :initial-position="servicePosition"
            @position-change="handlePositionChange">
            <!-- #ifdef MP-ALIPAY -->
            <button class="service-btn" @click="navigateToCustomerService">
                <image src="/static/img/kf.png" mode="widthFix" style="width: 126rpx; height: 140rpx"></image>
            </button>
            <!-- #endif -->
            <!-- #ifndef MP-ALIPAY -->
            <button class="service-btn" open-type="contact">
                <image src="/static/img/kf.png" mode="widthFix" style="width: 126rpx; height: 140rpx"></image>
            </button>
            <!-- #endif -->
        </FloatingDrag>

        <ConfirmBooks ref="confirmBooks" @incomplete="handleIncomplete" />
        <!-- 首单免费弹窗 -->
        <FirstOrderFreePopup ref="firstOrderFreePopup" />

        <!-- 图书加价弹窗 -->
        <UpsellBook ref="upsellRef" @scan="handleScanCode" />

        <!-- 加价分享弹窗 -->
        <UpsellShare ref="shareRef" @viewRules="handleViewSellRules" />
        <!-- 加价二维码弹窗 -->
        <UpsellQrcode ref="upsellQrcodeRef" />

        <!-- 加价规则弹窗 -->
        <UpsellRules ref="upsellRulesRef" />
        
        <!-- 减价分享弹窗 -->
        <ReduceShare ref="reduceShareRef" @viewRules="handleViewSellRules" />
    </view>
</template>

<script>
    import notScanned from "./components/notScanned.vue";
    import InputIsbn from "./components/InputIsbn.vue";
    import ScanBookList from "./components/ScanBookList.vue";
    import CommonDialog from "@/components/common-dialog.vue";
    import KindReminder from "./components/KindReminder.vue";
    import ServiceInfo from "./components/ServiceInfo.vue";
    import ConfirmBooks from "./components/ConfirmBooks.vue";
    import FirstOrderFreePopup from "./components/FirstOrderFreePopup.vue";
    import UpsellBook from "./components/upsell-book.vue";
    import UpsellRules from "./components/upsell-rules.vue";
    import UpsellShare from "./components/upsell-share.vue";
    import UpsellQrcode from "./components/upsell-qrcode.vue";
import ReduceShare from "./components/reduce-share.vue";
    import FloatingDrag from "@/components/floating-drag.vue";
    import { eventBus } from "@/utils/event-bus";

    const app = getApp();

export default {
    components: {
        notScanned,
        InputIsbn,
        ScanBookList,
        CommonDialog,
        KindReminder,
        ServiceInfo,
        ConfirmBooks,
        FirstOrderFreePopup,
        UpsellBook,
        UpsellRules,
        UpsellShare,
        UpsellQrcode,
        ReduceShare,
        FloatingDrag,
    },
    data() {
        return {
            orderInfo: {},
            collapseState: {
                step1: false,
                step3: false,
            },
            scrollTop: 0,
            bookList: [],
            serviceList: [],
            currentBook: {},
            // 客服按钮位置
            servicePosition: {
                left: "auto",
                right: 0,
                bottom: "20%",
            },
            shareData: {},
            deleteBook: {},
        };
    },
    computed: {
        navbarBackground() {
            if (this.scrollTop > 0) {
                return "linear-gradient(180deg, #4CD964 0%, #5ff178 100%)";
            }
            return "transparent";
        },
        containerBg() {
            return this.bookList.length > 0
                ? "linear-gradient(180deg, #4CD964 0%, #F8F8F8 25%)"
                : "linear-gradient(180deg, #4CD964 0%, #ffffff 25%)";
        },
        containerPb() {
            return this.bookList.length > 0 ? "300rpx" : "110rpx";
        },
        totalBooks() {
            return this.bookList.reduce((sum, book) => sum + (book.num || 1), 0);
        },
        totalPrice() {
            return this.bookList
                .reduce(
                    (sum, book) =>
                        sum + book.recyclePrice * (book.num || 1) + book.currUpsellMoney ||
                        0,
                    0
                )
                .toFixed(2);
        },
        isDisabled() {
            //minOrderNum或minOrderMoney可能没有值，
            let { minOrderNum, minOrderMoney } = this.orderInfo
            if (!minOrderMoney && !minOrderNum) return false
            //minOrderMoney没有值，minOrderNum有值
            if (minOrderNum && !minOrderMoney) return minOrderNum > this.totalBooks
            if (minOrderNum && !minOrderMoney) return minOrderMoney > this.totalPrice
            if (minOrderNum && minOrderMoney) return minOrderNum > this.totalBooks && minOrderMoney > this.totalPrice
        },
    },
    onPageScroll(e) {
        this.$nextTick(() => {
            this.scrollTop = e.scrollTop;
        });
    },
    // 分享配置
    onShareAppMessage(res) {
        if (res.from === "button" && res.target && res.target.dataset && res.target.dataset.shareType === "upsell") {
            let upsellCode = uni.getStorageSync("upsellCodeShare");
            console.log(upsellCode, "分享");
            // 调用分享接口
            uni.$u.http.get("/token/order/goToShare?upsellCode=" + upsellCode);
            return {
                title: "书嗨",
                path: "/pages/home/index?upsellCode=" + upsellCode,
                imageUrl: "https://shuhi.oss-cn-qingdao.aliyuncs.com/mini/share.jpg",
                desc: "书嗨，专注于书籍交易的平台，提供新书和二手书的买卖服务",
            };
        } else if (res.from === "button" && res.target && res.target.dataset && res.target.dataset.shareType === "reduce") {
            let reduceCode = uni.getStorageSync("reduceCodeShare");
            if (uni.$u && uni.$u.api && uni.$u.api.goToReduceShareAjax) {
                uni.$u.api.goToReduceShareAjax({ reduceCode: reduceCode });
            } else {
                uni.$u && uni.$u.http && uni.$u.http.get('/token/shop/order/goToShare', { reduceCode: reduceCode });
            }
            return {
                title: "快来帮我减钱买书吧！",
                path: "/pages/home/index?reduceCode=" + reduceCode,
                imageUrl: "https://shuhi.oss-cn-qingdao.aliyuncs.com/mini/share.jpg",
                desc: "书嗨，专注于书籍交易的平台，提供新书和二手书的买卖服务",
            };
        } else {
            return {
                title: "书嗨",
                page: "/pages/home/index",
            };
        }
    },

    // 分享到朋友圈
    onShareTimeline(res) {
        if (res.from === "button" && res.target && res.target.dataset && res.target.dataset.shareType === "upsell") {
            let upsellCode = uni.getStorageSync("upsellCodeShare");
            // 调用分享接口
            uni.$u.http.get("/token/order/goToShare?upsellCode=" + upsellCode);
            return {
                title: "书嗨",
                path: "/pages/home/index?upsellCode=" + upsellCode,
                imageUrl: "https://shuhi.oss-cn-qingdao.aliyuncs.com/mini/share.jpg",
                desc: "书嗨，专注于书籍交易的平台，提供新书和二手书的买卖服务",
            };
        } else if (res.from === "button" && res.target && res.target.dataset && res.target.dataset.shareType === "reduce") {
            let reduceCode = uni.getStorageSync("reduceCodeShare");
            if (uni.$u && uni.$u.api && uni.$u.api.goToReduceShareAjax) {
                uni.$u.api.goToReduceShareAjax({ reduceCode: reduceCode });
            } else {
                uni.$u && uni.$u.http && uni.$u.http.get('/token/shop/order/goToShare', { reduceCode: reduceCode });
            }
            return {
                title: "快来帮我减钱买书吧！",
                path: "/pages/home/index?reduceCode=" + reduceCode,
                imageUrl: "https://shuhi.oss-cn-qingdao.aliyuncs.com/mini/share.jpg",
                desc: "书嗨，专注于书籍交易的平台，提供新书和二手书的买卖服务",
            };
        } else {
            return {
                title: "书嗨",
                page: "/pages/home/index",
            };
        }
    },
    onReady() {
        // 获取屏幕宽度和高度
        uni.getSystemInfo({
            success: (res) => {
                this.screenWidth = res.windowWidth;
                this.screenHeight = res.windowHeight;
            },
        });
    },
    onShow() {
        this.$updateCartBadge();
        if (!app.globalData.isColdLaunch) {
            let token = uni.getStorageSync("token");
            if (token) {
                this.getLastOrder();
            }
            return
        }
        eventBus.on("loginSuccess", (data) => {
            console.log(data, "登录成功loginSuccess");
            this.loginSuccess(data);
            app.globalData.isColdLaunch = false;
        });;
    },

        //针对多次扫码的热启动场景，需要判断是否是冷启动
        onLoad(options) {
            console.log(options, app.globalData.isColdLaunch, "onLoad");
            if (app.globalData.isColdLaunch) return

            if (options.scene) {
                let params = {};
                // 对 scene 进行解码
                const decodeScene = decodeURIComponent(options.scene);
                // 拆分参数
                const paramPairs = decodeScene.split('&');
                paramPairs.forEach((pair) => {
                    const [key, value] = pair.split('=');
                    params[key] = value;
                });

            if (params.upsellCode) {
                this.$refs.shareRef?.open(params.upsellCode);
                this.getLastOrder();
            }
            if (params.reduceCode) {
                this.$refs.reduceShareRef?.open(params.reduceCode);
            }
        } else if (options.upsellCode) {
            this.$refs.shareRef?.open(options.upsellCode);
        } else if (options.reduceCode) {
            this.$refs.reduceShareRef?.open(options.reduceCode);
        } else {
            this.getLastOrder();
        }
    },
    // #ifdef MP-ALIPAY
    onPullDownRefresh() {
        this.getLastOrder()
    },
    // #endif

        //卸载loginSuccess事件
        onUnload() {
            uni.removeStorageSync("upsellCode");
            eventBus.off("loginSuccess");
        },

    methods: {
        // 登录成功之后
        loginSuccess(data) {
            let upsellCode = uni.getStorageSync("upsellCode");
            if (upsellCode) {
                console.log(upsellCode, "登录成功之后助力的 code值：", upsellCode);
                this.$refs.shareRef?.open(upsellCode);
            }
            let reduceCode = data.params.reduceCode;
            if (reduceCode) {
                console.log(reduceCode, "登录成功之后助力的 code值：", reduceCode);
                this.$refs.reduceShareRef?.open(reduceCode);
            }
            this.getLastOrder();
        },

            //删除书籍
            handleDeleteBook(book) {
                this.deleteBook = book;
                this.$refs.deleteDialog.openPopup(book);
            },
            //支付宝小程序的客服
            navigateToCustomerService() {
                uni.navigateTo({
                    url: "/pages-mine/pages/customer-service",
                });
            },

            confirmDelete() {
                uni.$u.http
                    .post("/token/order/removeBook", {
                        orderId: this.deleteBook.orderId,
                        isbn: this.deleteBook.isbn,
                    })
                    .then((res) => {
                        if (res.code == 200) {
                            this.$u.toast("删除成功");
                            this.getLastOrder();
                        }
                    });
            },

            //扫码助力
            handleScanCode(data = {}) {
                this.$refs.upsellQrcodeRef.open(data);
            },

            //查看活动规则
            handleViewSellRules() {
                this.$refs.upsellRulesRef.open();
            },

            handleStart() {
                this.showPopup = true;
            },
            //套装书确认
            handleSetBookConfirm() {
                this.$refs.confirmBooks.openPopup(this.currentBook);
            },
            //书册补全
            handleIncomplete() {
                this.$refs.scanBookList.handleDeleteBook(this.currentBook);
            },

            handleValidate() {
                if (this.bookList.some((v) => v.canInvite == 1)) {
                    this.$refs.noUpsellDialog.openPopup();
                } else {
                    this.onNext();
                }
            },

            //提交
            onNext() {
                let orderId = this.orderInfo.orderId;
                //预提交
                uni.$u.http
                    .get("/token/order/preSubmit?orderId=" + orderId)
                    .then((res) => {
                        if (res.code == 200) {
                            if (res.data.code == 1 || res.data.code == 2) {
                                uni.navigateTo({
                                    url: "/pages-home/pages/book-order",
                                });
                                uni.setStorageSync("orderId", orderId);
                            } else {
                                uni.showToast({
                                    icon: "none",
                                    title: res.msg,
                                });
                            }
                        } else {
                            uni.showToast({
                                icon: "none",
                                title: res.msg,
                            });
                        }
                    });
            },
            // 加价
            handleUpsell(book) {
                this.$refs.upsellRef.open(book);
            },

            updateBooksList(data, book) {
                this.bookList = data;
                // book.upsellMoney && this.getLastOrder();
                this.getLastOrder();
            },

            toggleCollapse(step) {
                this.$set(this.collapseState, step, !this.collapseState[step]);
            },
            handleScan() {
                uni.scanCode({
                    scanType: ["barCode"],
                    success: (res) => {
                        this.checkBookISBN(res.result, "scan");
                    },
                    fail: () => {
                        uni.showToast({
                            title: "扫码失败",
                            icon: "none",
                        });
                    },
                });
            },
            checkBookISBN(isbn, type) {
                let url =
                    type == "input"
                        ? `/token/order/inputIsbn?isbn=${isbn}`
                        : `/token/order/scanIsbn?isbn=${isbn}`;
                uni.$u.http.get(url).then((res) => {
                    if (res.code == 200) {
                        let code = res.data.code;
                        if (code == 1) {
                            res.data.num = 1;
                            res.data.status = 1;
                            res.data.recyclePrice = res.data.recycleMoney;
                            this.currentBook = res.data;
                            this.bookList.unshift(res.data);
                            if (res.data.suit == 1) {
                                this.$refs.setBookDialog.openPopup();
                            }
                            if (res.data.canInvite == 1) {
                                this.$refs.upsellRef.open(res.data);
                            }
                        } else if (code == 2) {
                            let item = this.bookList.find((v) => v.isbn === isbn);
                            item.num = item.num + 1;
                            if (res.data.canInvite == 1) {
                                this.$refs.upsellRef.open(res.data);
                            }
                        } else {
                            this.handleBookCode(res.data.code);
                        }
                        this.getLastOrder();
                    } else {
                        uni.showToast({
                            title: res.msg,
                            icon: "none",
                        });
                    }
                });
            },
            //处理扫码之后不同的状态 0-扫码频繁 1-成功 2-本单已有该书，数量+1  3-没有该书 4-本书暂不回收 5-超过每单最大可卖数量  6-单个订单最多40本书
            handleBookCode(code) {
                if (code == 1) {
                    this.bookList.push();
                }
                let tempKeys = [
                    "tiredDialog",
                    "",
                    "",
                    "noInfoDialog",
                    "notAcceptDialog",
                    "maxAcceptDialog",
                    "orderMaxNumDialog",
                ];
                let key = tempKeys[code];
                if (key) {
                    this.$refs[key].openPopup();
                }
            },
            //获取当前用户未提交订单 /api/token/order/lastOrder
            getLastOrder() {
                uni.$u.http.get("/token/order/lastOrder").then((res) => {
                    if (res.code == 200) {
                        this.orderInfo = res.data;
                        if (res.data.showDialog == 1) {
                            this.$refs.firstOrderFreePopup.openPopup();
                        } else if (res.data.showDialog == 2) {
                            this.$refs.kindReminder.openPopup();
                        }

                        this.bookList = res.data?.orderDetailList
                            ? res.data.orderDetailList.map((v) => {
                                v.orderId = res.data.orderId;
                                return v;
                            })
                            : [];
                        this.serviceList = res.data.serviceList || [];
                    } else {
                        uni.showToast({
                            title: res.msg,
                            icon: "none",
                        });
                    }
                }).finally(() => {
                    // #ifdef MP-ALIPAY
                    my.stopPullDownRefresh()
                    // #endif
                })
            },

            goToScannedBooks() {
                uni.navigateTo({
                    url: "/pages-home/pages/scaned-book",
                });
            },
            goToInputISBN() {
                this.$refs.isbnPopup.openPopup();
            },
            handleStartSelling() {
                // 标记已显示过温馨提示
                uni.setStorageSync("kindReminderShown", true);
            },
            // 处理位置变更
            handlePositionChange(position) {
                this.servicePosition = position;
            },
        },
    };
</script>

<style lang="scss" scoped>
    .service-btn {
        height: max-content;
        background-color: transparent;
        padding: 0;
    }

    .container {
        height: 100%;
        position: relative;
        overflow: auto;
        z-index: 1;
        /* #ifdef MP-WEIXIN */
        min-height: 100vh;
        /* #endif */
        /* #ifndef MP-WEIXIN */
        min-height: calc(100vh - 120rpx);

        /* #endif */
        &.book-list {
            padding-bottom: 300rpx;
        }

        padding-bottom: 130rpx;

        .nav-title {
            font-family: PingFang SC;
            font-weight: bold;
            font-size: 34rpx;
            color: #ffffff;
            padding-left: 40rpx;
            /* #ifdef MP-ALIPAY */
            padding-left: 70rpx;
            /* #endif */
        }
    }

    .common-text {
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 28rpx;
        color: #999999;

        &.tip {
            color: #ff8a4b;
            font-size: 26rpx;
        }
    }

    .color-red {
        color: #ff0000;
        margin: 0 10rpx;
    }

    .color-green {
        color: #276f1e;
    }

    .bottom-fixed {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9;
        background-color: #ffffff;
        /* #ifdef H5 */
        padding-bottom: 120rpx;
        /* #endif */

        .btn-wrap {
            display: flex;
            gap: 20rpx;
            padding: 20rpx;
            padding-bottom: 0;

            button {
                flex: 1;
                height: 88rpx;
                border-radius: 10rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 10rpx;
                border: none;

                text {
                    font-size: 32rpx;
                }

                &::after {
                    border: none;
                }
            }

            .isbn-btn {
                background-color: #ffffff;
                color: #4cd964;
                border: 3rpx solid #4cd964;
            }
        }

        .scan-btn {
            background-color: #4cd964;
            color: #ffffff;
        }

        .next-btn {
            margin: 0;
            margin-left: 40rpx;

            &[aria-disabled="true"] {
                background-color: #cccccc;
                color: #ffffff;
                opacity: 0.7;
                cursor: not-allowed;
            }
        }
    }
</style>