book-hi/pages-mine/pages/order-detail.vue

<template>
    <view class="order-detail">
        <!-- 时间轴组件 -->
        <order-timeline :logVoList="orderInfo.logVoList"></order-timeline>

        <!-- orderInfo.firstOrder == 1 &&  -->
        <return-notice :orderInfo="orderInfo" v-if="orderInfo.restTime" @close="handleReturn"></return-notice>
        <!-- 书籍列表组件 -->
        <book-list :books="bookList" :totalNum="orderInfo.totalNum"></book-list>

        <!-- 收入信息区块 -->
        <view class="info-block">
            <view class=" flex-a flex-j-b">
                <text class="common-title font-32">卖书收入：</text>
                <text class="common-text" style="color: #FF0000;" v-if="orderInfo.finalMoney">¥{{
                    orderInfo.finalMoney }}</text>
                <text class="common-text" style="color: #FF0000;" v-else>待审核</text>
            </view>
            <view class="desc-bg">
                <view class="flex-a flex-j-b">
                    <text class="common-text-2 font-26">书籍数量：</text>
                    <text class="common-text font-26">{{ orderInfo.totalNum }}</text>
                </view>
                <view class="flex-a flex-j-b">
                    <view class="common-text-2 font-26">
                        预估书款：
                        <u-icon name="question-circle-fill" color="#333333" size="36"></u-icon>
                    </view>
                    <text class="common-text-2 font-26">¥{{ orderInfo.expectMoney }}</text>
                </view>
            </view>
        </view>
        <!-- 订单信息区块 -->
        <view class="info-block">
            <view class=" flex-a flex-j-b">
                <text class="common-title font-32">卖书编号：</text>
                <view class="common-text-2 font-26 flex-a">{{ orderInfo.orderId }}
                    <image src="../static/copy.png" style="width: 42rpx;height:42rpx;margin-left: 20rpx;"
                        @click="copyOrderNo"></image>
                </view>
            </view>
            <view class="desc-bg">
                <view class="flex-a flex-j-b">
                    <view class="common-text-2 font-26">快递备注：</view>
                    <text class="common-text font-26">{{ orderInfo.expressDelivery || '-' }}</text>
                </view>
            </view>
        </view>

        <!-- 地址信息区块 -->
        <view class="info-block">
            <view class=" flex-a flex-j-b">
                <text class="common-title font-32" style="width: 220rpx;">发货地址：</text>

                <view class="flex-d flex-j-e flex-1">
                    <view class="common-text-2 font-26 mb-12">
                        <text>{{ orderInfo.sendName }}</text>
                        <text class="ml-40">{{ orderInfo.sendMobile }}</text>
                    </view>
                    <text class="common-text" style="line-height: 42rpx;">
                        {{ orderInfo.sendAddress }}
                    </text>
                </view>
            </view>
        </view>

        <!-- 底部操作栏 -->
        <view class="bottom-fixed-con detail-bottom flex-d">
            <service-promise></service-promise>
            <view class="flex-a" style="width: 100%;padding: 0 30rpx;">
                <order-actions size="large" :order="orderInfo" :status="orderInfo.status" @action="handleAction"
                    style="width: 100%;" @success="getOrderInfo"></order-actions>
            </view>
        </view>

        <u-action-sheet v-model="showReportSheet" :list="actionList" @close="showReportSheet = false"
            @click="handleReportSelect" cancelText="取消" :mask-close-able="false" :safe-area-inset-bottom="true" />

        <CommonDialog ref="returnDialog" title="退回不通过书籍" :showFooter="false" @confirm="handleReturnConfirm" width="88%">
            <view class="flex-a flex-j-b">
                <button class="confirm-btn plain" @click="handleApplyBack">我要取回</button>
                <button class="confirm-btn plain" @click="handleRecycleWare">仓库循环处理</button>
            </view>
            <view class="button-bottom" @click="handleRecycle">
                <text style="font-size: 32rpx;font-weight: bold;">按纸价回收</text>
                <text style="margin-top: 2px;">补贴 ¥{{ orderInfo.basicRecycleMoney || 0 }} 到余额</text>
            </view>
        </CommonDialog>

        <CommonDialog ref="recycleDialog" title="是否按纸价回收" @confirm="handleReturnConfirm">
            补贴 ¥{{ orderInfo.basicRecycleMoney || 0 }} 到余额
        </CommonDialog>
        <CommonDialog ref="recycleWare" title="是否仓库循环处理" @confirm="handleRecycleWareConfirm">
            感谢您对环保事业的支持，仓库将循环处理
        </CommonDialog>
    </view>
</template>

<script>
import OrderTimeline from '../components/order-timeline.vue'
import BookList from '../components/book-list.vue'
import ReturnNotice from '../components/return-notice.vue';
import ServicePromise from '../components/service-promise.vue';
import btnAction from '../mixin/btnAction';
import OrderActions from '../components/order-actions.vue';
import CommonDialog from '@/components/common-dialog.vue';

export default {
    mixins: [btnAction],
    components: {
        OrderTimeline,
        BookList,
        ReturnNotice,
        ServicePromise,
        OrderActions,
        CommonDialog
    },
    data() {
        return {
            bookList: [],
            // 订单信息
            orderInfo: {},
            orderId: ''
        }
    },
    onLoad(options) {
        if (options.orderId) {
            this.orderId = options.orderId
            this.getOrderInfo(options.orderId)
        }
    },
    methods: {
        copyOrderNo() {
            uni.setClipboardData({
                data: this.orderInfo.orderId,
                success: () => {
                    uni.$u.toast('复制成功')
                }
            })
        },
        //获取订单信息
        getOrderInfo() {
            uni.$u.http.get('/token/order/getOrderDetail?orderId=' + this.orderId).then(res => {
                if (res.code === 200) {
                    this.orderInfo = res.data
                    this.bookList = res.data.detailVoList
                }
            })
        },
        handleReturn() {
            console.log('退回不通过书籍');
            this.$refs.returnDialog?.openPopup()
        },
        //仓库循环处理
        handleRecycleWare() {
            this.$refs.recycleWare?.openPopup()
        },
        //仓库循环处理确认
        handleRecycleWareConfirm() {
            console.log('仓库循环处理确认');
            uni.$u.http.post('/token/order/notNeed', {
                orderId: this.orderInfo.orderId
            }).then(res => {
                if (res.code === 200) {
                    uni.$u.toast(`已补贴 ${this.orderInfo.basicRecycleMoney || 0} 到余额`)
                    this.getOrderInfo(this.orderInfo.orderId)
                }
            })
        },
        //纸价回收
        handleRecycle() {
            this.$refs.recycleDialog?.openPopup()
        },
        //纸价回收确认
        handleRecycleConfirm() {
            uni.$u.http.post('/token/order/basicRecycle', {
                orderId: this.orderInfo.orderId
            }).then(res => {
                if (res.code === 200) {
                    uni.$u.toast('纸价回收成功')
                    this.getOrderInfo(this.orderInfo.orderId)
                }
            })
        },
        //我要取回
        handleApplyBack() {
            console.log(this.orderInfo, 'xxxxx')
            uni.navigateTo({
                url: `/pages-mine/pages/apply?orderId=${this.orderInfo.orderId}`
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.order-detail {
    min-height: 100vh;
    background: #f8f8f8;
    padding-bottom: 230rpx;

    .desc-bg {
        background: #fafafa;
        padding: 20rpx 30rpx;
        border-radius: 10rpx;
        margin-top: 20rpx;
    }

    .info-block {
        background: #FFFFFF;
        padding: 30rpx;
        margin: 30rpx;
        border-radius: 10rpx;
    }

    .detail-bottom {
        flex-direction: column;
        padding-left: 0;
        padding-right: 0;
        padding-top: 0;
    }
}

.button-bottom {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 30rpx 0;
    background-color: #38C148;
    color: #ffffff;
    font-size: 24rpx;
    line-height: 32rpx;
    padding: 16rpx 0;
    border-radius: 10rpx;
}
</style>