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

<template>
    <view class="order-detail">
        <!-- 时间轴组件 -->
        <order-timeline></order-timeline>
        <return-notice></return-notice>
        <!-- 书籍列表组件 -->
        <book-list :books="bookList"></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;">待审核 / ¥33.00</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">3</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">¥29.70</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">465676768878
                    <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">京东</text>
                </view>
            </view>
        </view>

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

                <view class="flex-d flex-j-e">
                    <view class="common-text-2 font-26 mb-12">
                        <text>张三</text>
                        <text class="ml-40">151666666666</text>
                    </view>
                    <text class="common-text" style="line-height: 42rpx;">
                        这里显示详细地址过长会显示省略号这里显示详细地址过长会显示省略号这里显示详细地址过长会显示省略号
                    </text>
                </view>
            </view>
        </view>

        <!-- 底部操作栏 -->
        <view class="bottom-fixed-con" style="flex-direction: column;padding: 0;">
            <service-promise></service-promise>
            <view class="flex-a flex-j-b pad-20" style="width: 100%;">
                <u-button type="info">取消订单</u-button>

                <view class="flex">
                    <u-button type="primary" plain>投诉上报</u-button>
                    <u-button type="primary" class="ml-20">修改地址</u-button>
                </view>
            </view>
        </view>
    </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';

export default {
    components: {
        OrderTimeline,
        BookList,
        ReturnNotice,
        ServicePromise
    },
    data() {
        return {
            bookList: [
                {
                    cover: 'https://img3.doubanio.com/lpic/s1076932.jpg',
                    bookName: '这里是书本名称bu换行',
                    recycleMoney: '32.20',
                    num: 2,
                    suit: 1,
                    auditList: [
                        { status: '良好', price: '32.20' },
                        { status: '不通过', price: '32.20', auditReason: '原因:笔记杂乱/习题做完' },
                        { status: '良好', price: '32.20' },
                    ]
                },
                {
                    cover: 'https://img3.doubanio.com/lpic/s1076932.jpg',
                    bookName: '这里是书本名称bu换行',
                    recycleMoney: '32.20',
                    num: 2,
                    suit: 1,
                    maxNum: 5,
                    auditList: [
                        { status: '良好', price: '32.20' },
                        { status: '良好', price: '32.20' },
                        { status: '良好', price: '32.20' },
                    ]
                },
                {
                    cover: 'https://img3.doubanio.com/lpic/s1076932.jpg',
                    bookName: '这里是书本名称bu换行',
                    recycleMoney: '32.20',
                    num: 2,
                    suit: 1,
                },
                {
                    cover: 'https://img3.doubanio.com/lpic/s1076932.jpg',
                    bookName: '这里是书本名称bu换行',
                    recycleMoney: '32.20',
                    num: 2,
                    suit: 1,
                    maxNum: 5
                }
            ]
        }
    },
    methods: {
        copyOrderNo() {
            uni.setClipboardData({
                data: '465676768878',
                success: () => {
                    uni.$u.toast('复制成功')
                }
            })
        }
    }
}
</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;
    }
}
</style>