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="getLastOrder"
            :bookList="bookList"></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">
                    <view class="flex-a common-text">
                        共<text class="color-red">{{ totalBooks }}</text>件
                        预估回收价 <text class="color-red">¥{{ totalPrice || 0 }}</text>
                    </view>
                    <text class="common-text tip">*旧书预估价格满30元起收</text>
                </view>

                <button class="scan-btn next-btn" @click="onNext">下一步</button>
            </view>

            <view class="service-icons" v-if="bookList.length">
                <view class="icon-item" v-for="(item, index) in serviceItems" :key="index" @tap="showServiceGuarantee">
                    <u-icon :name="item.icon" size="32" color="#FFF6ED"></u-icon>
                    <text style="margin-left: 6rpx;">{{ item.text }}</text>
                </view>
            </view>
        </view>

        <InputIsbn ref="isbnPopup" />
        <!-- 套装书说明弹窗 -->
        <CommonDialog ref="setBookDialog" title="套装书说明" :showCancel="false">
            <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>
    </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';
export default {
    components: {
        notScanned,
        InputIsbn,
        ScanBookList,
        CommonDialog
    },
    data() {
        return {
            collapseState: {
                step1: false,
                step3: false
            },
            scrollTop: 0,
            bookList: [],
            serviceItems: [{
                icon: 'gift',
                text: '免费退回'
            },
            {
                icon: 'clock',
                text: '24小时验'
            },
            {
                icon: 'rmb-circle',
                text: '极速打款'
            },
            {
                icon: 'shield',
                text: '卖亏必赔'
            }
            ]
        }
    },
    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.recycleMoney * (book.num || 1), 0).toFixed(2)
        }
    },
    onPageScroll(e) {
        this.$nextTick(() => {
            this.scrollTop = e.scrollTop
        })
    },
    methods: {
        //提交
        onNext() {
            if (this.totalPrice < 30) {
                uni.showToast({
                    title: '预估价格需满30元才能回收',
                    icon: 'none'
                })
                return
            }

            let orderId = this.bookList[0].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
                        })
                    }
                }
            })
        },

        updateBooksList(data) {
            this.bookList = data
        },

        toggleCollapse(step) {
            this.$set(this.collapseState, step, !this.collapseState[step])
        },
        handleScan() {
            uni.scanCode({
                scanType: ['barCode'],
                success: (res) => {
                    this.checkBookISBN(res.result)
                },
                fail: () => {
                    uni.showToast({
                        title: '扫码失败',
                        icon: 'none'
                    })
                }
            })
        },
        checkBookISBN(isbn) {
            uni.$u.http.get('/token/order/scanIsbn?isbn=' + isbn).then(res => {
                if (res.code == 200) {
                    let code = res.data.code
                    if (code == 1) {
                        res.data.num = 1
                        this.bookList.push(res.data)
                    } else if (code == 2) {
                        let item = this.bookList.find(v => v.isbn === isbn)
                        item.num = item.num + 1
                    } else {
                        this.handleBookCode(res.data.code)
                    }
                }
            })
        },
        //处理扫码之后不同的状态 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.bookList = res.data ? res.data.orderDetailList.map(v => {
                        v.orderId = res.data.orderId
                        return v
                    }) : []
                }
            })
        },

        goToScannedBooks() {
            uni.navigateTo({
                url: '/pages-home/pages/scaned-book'
            })
        },
        goToRules() {
            uni.navigateTo({
                url: '/pages/rules/index'
            })
        },
        showServiceGuarantee() {
            this.$refs.serviceGuarantee.openPopup()
        },
        goToInputISBN() {
            this.$refs.isbnPopup.openPopup()
        }
    },
    mounted() {
        setTimeout(() => {
            this.getLastOrder()
        }, 300)
    }
}
</script>

<style lang="scss" scoped>
.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;
    }
}

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

    &.tip {
        color: #FF8A4B;
    }
}

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

.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;
        width: 208rpx;
    }
}

.service-icons {
    display: flex;
    justify-content: space-around;
    padding: 14rpx;
    background: #1F1303;
    box-sizing: border-box;

    .icon-item {
        display: flex;
        align-items: center;
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 24rpx;
        color: #FFF6ED;
    }
}
</style>