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"
                        >*旧书预估价格满
                        {{ 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"
            @viewRules="handleViewRules"
        />

        <view
            class="customer-service"
            :style="{
                left: servicePosition.left + 'px',
                right: servicePosition.right + 'px',
                bottom: servicePosition.bottom + 'px',
            }"
            @touchstart="touchStart"
            @touchmove="touchMove"
            @touchend="touchEnd"
        >
            <!-- #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 -->
        </view>

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

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

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

        <!-- 加价规则弹窗 -->
        <UpsellRules ref="upsellRulesRef" />
    </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 { silentLogin } from "@/api/auth";
const app = getApp();

export default {
    components: {
        notScanned,
        InputIsbn,
        ScanBookList,
        CommonDialog,
        KindReminder,
        ServiceInfo,
        ConfirmBooks,
        FirstOrderFreePopup,
        UpsellBook,
        UpsellRules,
        UpsellShare,
        UpsellQrcode,
    },
    data() {
        return {
            orderInfo: {},
            collapseState: {
                step1: false,
                step3: false,
            },
            scrollTop: 0,
            bookList: [],
            serviceList: [],
            currentBook: {},
            // 客服按钮位置
            servicePosition: {
                left: "auto",
                right: 0,
                bottom: "20%",
            },
            // 触摸开始位置
            startX: 0,
            startY: 0,
            // 屏幕宽度和高度
            screenWidth: 0,
            screenHeight: 0,
            // 初始位置记录，用于计算拖动
            initialLeft: 0,
            initialBottom: 0,
            // 是否正在更新位置，用于防止频繁更新
            isUpdatingPosition: false,
            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() {
            return this.totalPrice < this.orderInfo.minOrderMoney;
        },
    },
    onPageScroll(e) {
        this.$nextTick(() => {
            this.scrollTop = e.scrollTop;
        });
    },
    // 分享配置
    onShareAppMessage(res) {
        if (res.from === "button") {
            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",
            };
        } else {
            return {
                title: "书嗨",
                page: "/pages/home/index",
            };
        }
    },

    // 分享到朋友圈
    onShareTimeline(res) {
        if (res.from === "button") {
            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",
            };
        } else {
            return {
                title: "书嗨",
                page: "/pages/home/index",
            };
        }
    },
    onReady() {
        // 获取屏幕宽度和高度
        uni.getSystemInfo({
            success: (res) => {
                this.screenWidth = res.windowWidth;
                this.screenHeight = res.windowHeight;
            },
        });
        setTimeout(() => {
            let loginSuccess = uni.getStorageSync("loginSuccess");
            let upsellCode = app.globalData.upsellCode;

            if (loginSuccess && upsellCode) {
                console.log(loginSuccess, "登录成功loginSuccess");
                this.$refs.shareRef?.open(upsellCode);
                uni.removeStorageSync("loginSuccess");
                this.getLastOrder();
            }
        }, 1000);
    },

    methods: {
        //删除书籍
        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);
        },

        slientLogin() {
            let inviteCode = uni.getStorageSync("inviteCode") || "";
            let token = uni.getStorageSync("token");
            if (token) return;
            uni.login({
                success(res) {
                    uni.$u.http
                        .post("/user/wxLogin", {
                            code: res.code,
                            inviteCode,
                        })
                        .then((response) => {
                            if (response.code == 200) {
                                uni.setStorageSync(
                                    "token",
                                    response.data.token
                                );
                            }
                        });
                },
                fail: (err) => {
                    console.log(err, "wx.login登录失败");
                },
            });
        },

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

        // 触摸开始
        touchStart(e) {
            const touch = e.touches[0];
            this.startX = touch.clientX;
            this.startY = touch.clientY;

            // 记录初始位置，用于计算移动距离
            if (this.servicePosition.right !== "auto") {
                // 如果是靠右定位，记录当前位置但不立即改变显示位置
                // 只在内部计算中使用，避免视觉上的位置跳动
                this.initialLeft = this.screenWidth - 126;
            } else {
                this.initialLeft = parseFloat(this.servicePosition.left);
            }

            // 如果bottom是百分比，转换为具体像素值，但不改变显示位置
            if (
                typeof this.servicePosition.bottom === "string" &&
                this.servicePosition.bottom.includes("%")
            ) {
                const percentage =
                    parseFloat(this.servicePosition.bottom) / 100;
                this.initialBottom = this.screenHeight * percentage;
            } else {
                this.initialBottom = parseFloat(this.servicePosition.bottom);
            }
        },

        // 触摸移动
        touchMove(e) {
            // 阻止默认行为，防止页面滚动
            e.preventDefault && e.preventDefault();
            e.stopPropagation && e.stopPropagation();

            const touch = e.touches[0];

            // 计算移动距离
            const deltaX = touch.clientX - this.startX;
            const deltaY = touch.clientY - this.startY;

            // 使用初始位置计算新位置，避免累积误差
            let newLeft = this.initialLeft + deltaX;
            let newBottom = this.initialBottom - deltaY; // 注意：y轴方向是相反的

            // 确保按钮不超出屏幕边界
            if (newLeft < 0) {
                newLeft = 0;
            } else if (newLeft > this.screenWidth - 126) {
                newLeft = this.screenWidth - 126;
            }

            // 确保按钮不超出屏幕垂直边界
            if (newBottom < 20) {
                newBottom = 20;
            } else if (newBottom > this.screenHeight - 160) {
                newBottom = this.screenHeight - 160;
            }

            // 使用节流方式更新位置，避免过于频繁的更新
            if (!this.isUpdatingPosition) {
                this.isUpdatingPosition = true;

                // 更新位置 - 第一次移动时才真正改变right为auto
                this.servicePosition = {
                    left: newLeft,
                    right: "auto",
                    bottom: newBottom,
                };

                // 使用setTimeout代替requestAnimationFrame，在微信小程序中更兼容
                setTimeout(() => {
                    this.isUpdatingPosition = false;
                }, 16); // 约等于60fps的刷新率
            }

            // 不更新起始点，保持相对于初始触摸点的位移计算
            // 这样可以避免累积误差，使拖动更精确
        },

        // 触摸结束，实现吸附效果
        touchEnd() {
            // 确保不再有待处理的更新
            this.isUpdatingPosition = false;

            const buttonCenter = this.servicePosition.left + 63; // 按钮中心位置
            const halfScreen = this.screenWidth / 2;

            // 判断是吸附到左边还是右边
            if (buttonCenter < halfScreen) {
                // 吸附到左边
                this.servicePosition = {
                    left: 0,
                    right: "auto",
                    bottom: this.servicePosition.bottom,
                };
            } else {
                // 吸附到右边
                this.servicePosition = {
                    left: "auto",
                    right: 0,
                    bottom: this.servicePosition.bottom,
                };
            }
        },

        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);
                    }
                } 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 || [];
                }
            });
        },

        goToScannedBooks() {
            uni.navigateTo({
                url: "/pages-home/pages/scaned-book",
            });
        },
        goToInputISBN() {
            this.$refs.isbnPopup.openPopup();
        },
        handleStartSelling() {
            // 标记已显示过温馨提示
            uni.setStorageSync("kindReminderShown", true);
        },
    },

    onShow() {
        // 获取上一个订单
        setTimeout(() => {
            let token = uni.getStorageSync("token");
            token && this.getLastOrder();
        }, 300);
    },
};
</script>

<style lang="scss" scoped>
.customer-service {
    position: fixed;
    width: 126rpx;
    height: 140rpx;
    bottom: 20%;
    z-index: 999;
    transition: all 0.3s ease;

    /* 添加过渡效果使吸附更平滑 */
    button {
        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;
    }
}

.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: 20rpx;

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