book-hi/pages-home/pages/book-order.vue

<template>
    <view class="book-order">
        <!-- 取货地址部分 -->
        <view class="section-card">
            <view class="flex-a flex-j-b mb-20" @click="handleAddress" v-if="defaultAddr.id">
                <image src="../static/adderss.png" style="width:40rpx;height: 40rpx;"></image>
                <view class="flex-d flex-1 ml-24" style="margin-right: 90rpx;">
                    <view class="flex-a flex-j-b  mb-10">
                        <view :style="titleStyle">发货人：{{ defaultAddr.name }}</view>
                        <view :style="titleStyle">{{ defaultAddr.mobile }}</view>
                    </view>
                    <view :style="titleStyle">地址：{{ defaultAddr.fullAddress }}</view>
                </view>
                <u-icon name="arrow-right" :size="28" color="#666" top="4"></u-icon>
            </view>

            <view class="flex-a flex-j-b" @click="handleAddress" v-else>
                <view class="flex-a">
                    <u-icon name="plus-circle-fill" :size="48" color="#38C148" top="2"></u-icon>
                    <view :style="titleStyle" class="ml-10 font-30">取货地址</view>
                    <text class="u-required">*</text>
                </view>

                <view class="flex-a">
                    <view :style="titleStyle" class="ml-10">请添加</view>
                    <u-icon name="arrow-right" :size="28" color="#666" top="4"></u-icon>
                </view>
            </view>

            <view class="free-pickup mb-20 mt-20">
                <view class="pickup-title">免费上门取货</view>
                <view class="pickup-desc">书嗨将预约指定快递上门取件，邮费由书嗨承担</view>
            </view>
            <view class="flex-a flex-j-b time-card" style="padding:0 10rpx" @click="showTimePicker = true">
                <view class="flex-a">
                    <view :style="titleStyle" class="ml-10 font-28">取件时间</view>
                    <text class="u-required">*</text>
                </view>

                <view class="flex-a">

                    <view v-if="selectedTime.day" :style="titleStyle" class="ml-10">{{ selectedTime.day }}
                        {{ selectedTime.time }}
                    </view>
                    <view v-else :style="titleStyle" class="ml-10">请选择快递上门取件时间</view>
                    <u-icon name="arrow-right" :size="28" color="#666" top="4"></u-icon>
                </view>
            </view>
        </view>

        <!-- 快递备注部分 -->
        <view class="section-card">
            <view class="flex-a flex-j-b mb-20" @click="showExpressPicker">
                <view class="flex-a">
                    <view :style="titleStyle" class="font-28">快递备注</view>
                </view>

                <view class="flex-a">
                    <view :style="titleStyle" class="ml-10">{{ submitData.expressDelivery || '请选择' }}</view>
                    <u-icon name="arrow-right" :size="28" color="#666" top="3"></u-icon>
                </view>
            </view>
            <view class="express-desc">请从【顺丰】或【京东】中选择可正常收寄的快递，如您不选择，则由系统根据区域情况自动分配</view>
        </view>

        <!-- 书籍列表 -->
        <view class="book-list">
            <book-item v-for="book in books" :key="book.id" :book="book"></book-item>
        </view>

        <!-- 底部栏 -->
        <view class="bottom-bar">
            <view class="agreement">
                <u-checkbox v-model="agreed" shape="circle">
                    <text class="agreement-text">我已阅读并同意</text>
                    <text class="agreement-link">《书嗨用户协议》</text>
                </u-checkbox>
            </view>
            <view class="order-summary">
                <view class="total">
                    共<text class="price">{{ totalBooks }}</text>件 预估回收价
                    <text class="price">¥{{ totalPrice }}</text>
                </view>
                <u-button type="primary" @click="submitOrder" :custom-style="{ margin: 0 }">提交订单</u-button>
            </view>
        </view>

        <!-- 添加快递选择器 -->
        <u-picker v-model="showPicker" mode="selector" :range="expressList" @confirm="onExpressConfirm"
            @cancel="showPicker = false" range-key="name"></u-picker>

        <pickup-time-picker :show.sync="showTimePicker" @confirm="onTimeConfirm"></pickup-time-picker>

        <submit-confirm ref="submitConfirmDialog" @confirm="handleConfirmSubmit"></submit-confirm>
    </view>
</template>

<script>
import bookItem from '@/pages-home/components/BookItem.vue'
import pickupTimePicker from '@/pages-home/components/PickupTimePicker.vue'
import SubmitConfirm from '@/pages-home/components/SubmitConfirm.vue'

export default {
    components: {
        bookItem,
        pickupTimePicker,
        SubmitConfirm
    },
    data() {
        return {
            titleStyle: {
                'font-family': 'PingFang SC',
                'font-weight': 400,
                color: '#333333',
            },
            agreed: false,
            books: [],

            showPicker: false,
            expressList: [],
            showTimePicker: false,
            selectedTime: {},
            defaultAddr: {},

            submitData: {
                expressDelivery: '',
                "orderId": "",
                "addressId": "",
                "schedulePickupStartTime": "",
                "schedulePickupEndTime": "",
                "expressDelivery": "",
                "remark": ""
            }
        }
    },
    computed: {
        totalBooks() {
            return this.books.reduce((sum, book) => sum + (book.num || 1), 0)
        },
        totalPrice() {
            return this.books.reduce((sum, book) => sum + book.recycleMoney, 0).toFixed(2)
        }
    },
    methods: {
        //时间选择
        onTimeConfirm(data) {
            this.selectedTime = data
            //格式化提交数据的时间
            let date = this.$u.timeFormat(data.date, 'yyyy-mm-dd')
            let times = data.time.split('-')

            this.submitData.schedulePickupStartTime = `${date} ${times[0]}`
            this.submitData.schedulePickupEndTime = `${date} ${times[1]}`
            console.log(date, this.submitData, 'data')
        },

        //打开快递选择器
        showExpressPicker() {
            this.showPicker = true
        },
        //确认选择快递  
        onExpressConfirm(e) {
            if (!e.length) return
            let item = this.expressList[e[0]]
            this.submitData.expressDelivery = item.name
            this.showPicker = false
        },
        //添加或者选择地址
        handleAddress() {
            uni.navigateTo({
                url: `/pages-mine/pages/address/list?id=${this.defaultAddr.id}&isSelect=1`
            })
        },

        calculateTotal() {
            this.totalBooks = this.books.reduce((sum, book) => sum + book.quantity, 0)
            this.totalPrice = this.books
                .reduce((sum, book) => sum + book.quantity * parseFloat(book.price), 0)
                .toFixed(2)
        },
        submitOrder() {
            if (!this.selectedTime.day) {
                this.$u.toast('请选择取件时间')
                return
            }
            if (!this.agreed) {
                this.$u.toast('请先同意用户协议')
                return
            }
            // 显示确认弹窗
            this.$refs.submitConfirmDialog.openPopup()
        },
        
        // 确认提交订单
        handleConfirmSubmit() {
            // 处理订单提交
            uni.$u.http.post('/token/order/submitOrder', this.submitData).then(res => {
                if (res.code == 200) {
                    uni.navigateTo({
                        url: "/pages-home/pages/order-success"
                    })
                    uni.removeStorageSync('selectAddr')
                } else {
                    uni.showToast({
                        title: res.msg,
                        icon: 'none'
                    })
                }
            })
        },
        //获取默认地址 /api/token/user/address/getDefault
        getDefaultAddress() {
            uni.$u.http.get('/token/user/address/getDefault').then(res => {
                if (res.code == 200) {
                    this.defaultAddr = res.data
                    this.submitData.addressId = this.defaultAddr.id
                }
            })
        },
        //获取当前用户未提交订单 /api/token/order/lastOrder
        getLastOrder() {
            uni.$u.http.get('/token/order/lastOrder').then(res => {
                if (res.code == 200) {
                    this.books = res.data?.orderDetailList ? res.data.orderDetailList?.map(v => {
                        v.orderId = res.data.orderId
                        return v
                    }) : [],

                        this.submitData.orderId = this.books[0].orderId
                }
            })
        },
        //获取预提交订单
        getPreSubmitOrder() {
            let orderId = uni.getStorageSync('orderId')
            uni.$u.http.get('/token/order/preSubmit?orderId=' + orderId).then(res => {
                this.submitData.orderId = orderId
                this.defaultAddr = res.data.defaultAddress
                this.submitData.addressId = this.defaultAddr.id

                this.books = res.data.orderDetailList
                this.expressList = res.data.expressTypes.map(v => ({
                    name: v
                }))
            })
        },

    },
    mounted() {
        this.getPreSubmitOrder()
    },

    onShow() {
        let selectAddr = uni.getStorageSync('selectAddr')
        if (selectAddr) {
            this.defaultAddr = selectAddr
            this.submitData.addressId = selectAddr.id
        }
    },
}
</script>

<style lang="scss">
.book-order {
    min-height: 100vh;
    background: #f5f5f5;
    padding: 20rpx 30rpx;
    padding-bottom: calc(env(safe-area-inset-bottom) + 190rpx);
}

.section-card {
    background: #fff;
    margin-bottom: 20rpx;
    padding: 30rpx;
    border-radius: 10rpx;
    box-sizing: border-box;
}

.u-required {
    color: #FF0000;
    margin-left: 8rpx;
}

.time-card {
    height: 80rpx;
    background: #F8F8F8;
    border-radius: 10rpx;
}

.free-pickup {
    .pickup-title {
        font-weight: bold;
        font-size: 28rpx;
        color: #333333;
        margin-bottom: 10rpx;
    }

    .pickup-desc {
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #999999;
    }
}

.express-desc {
    font-size: 24rpx;
    color: #666;
    line-height: 1.4;
}

.bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    padding: 20rpx 30rpx;
    padding-bottom: env(safe-area-inset-bottom);

    .agreement {
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 28rpx;
        color: #333333;

        &-link {
            color: #07c160;
        }
    }

    .order-summary {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 28rpx;
        color: #999999;

        .price {
            color: #ff0000;
            margin: 0 10rpx;
        }
    }
}
</style>