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" @click="goToAgreement">《书嗨用户协议》</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.submitData.addressId) {
                this.$u.toast("请选择取货地址");
                return;
            }
            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,
                }));
            });
        },
        goToAgreement() {
            uni.navigateTo({
                url: "/pages-home/pages/user-agreement",
            });
        },
    },
    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>