修改bug

pages-home/components/BookItem.vue

@@ -47,7 +47,7 @@
 	}
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 	.book-item {
 		background: #FFFFFF;
 		padding: 20rpx;

pages-mine/components/book-list.vue

@@ -0,0 +1,78 @@
+<template>
+    <view class="book-list">
+        <view class="header-info flex-a flex-j-b mb-20">
+            <text class="common-title">共20本</text>
+            <view class="common-text" @click="showRules">
+                <text class="mr-10">卖书审核规则</text>
+                <u-icon name="question-circle-fill" size="36" top="4rpx" color="#333"></u-icon>
+            </view>
+        </view>
+
+        <detail-book-item :book="item" v-for="(item, index) in books" :key="index"
+            v-if="isExpanded || (index < 3 && !isExpanded)"></detail-book-item>
+
+
+        <!-- 添加底部展开/收起按钮 -->
+        <view class="expand-btn" @click="toggleExpand">
+            <text>{{ isExpanded ? '收起' : '查看全部' }}</text>
+            <u-icon :name="isExpanded ? 'arrow-up' : 'arrow-down'" size="24" color="#666"></u-icon>
+        </view>
+    </view>
+</template>
+
+<script>
+import detailBookItem from './detail-book-item.vue';
+export default {
+    components: {
+        detailBookItem
+    },
+    name: 'book-list',
+    data() {
+        return {
+            isExpanded: false
+        }
+    },
+    props: {
+        books: {
+            type: Array,
+            default: () => []
+        }
+    },
+    methods: {
+        showRules() {
+            console.log('showRules');
+        },
+        toggleExpand() {
+            this.isExpanded = !this.isExpanded;
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.book-list {
+    background: #FFFFFF;
+    padding: 20rpx 30rpx;
+    margin: 30rpx;
+    border-radius: 10rpx;
+    box-sizing: border-box;
+
+    .expand-btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: #fff;
+        font-size: 28rpx;
+        color: #333;
+
+        height: 88rpx;
+        background: #F8F8F8;
+        border-radius: 10rpx;
+
+        .u-icon {
+            margin-left: 8rpx;
+        }
+    }
+
+}
+</style>

pages-mine/components/detail-book-item.vue

@@ -0,0 +1,195 @@
+<template>
+    <view class="book-item">
+        <view class="book-info">
+            <image class="book-cover" :src="book.cover" mode="aspectFill" />
+            <view class="book-detail">
+                <view class="top-info">
+                    <view class="book-title">{{ book.bookName }}</view>
+                    <view class="book-tags">
+                        <text class="tzs tag-text" v-if="book.suit == 1">套装书</text>
+                        <text class="kmdb tag-text" v-if="book.maxNum > 1">可卖多本</text>
+                    </view>
+
+                    <view class="flex flex-j-b flex-a-c mt-20">
+                        <view class="book-price">预估价： ¥{{ book.recycleMoney }}</view>
+                    </view>
+                </view>
+                <view class="book-price mb-16 mt-20" v-if="book.auditList && book.auditList.length">审核信息</view>
+
+                <template v-if="book.auditList && book.auditList.length">
+                    <view class="audit-info">
+                        <view class="audit-item" v-for="(audit, index) in book.auditList" :key="index">
+                            <view class="flex-a w100">
+                                <view class="flex-a flex-1">
+                                    <view class="common-text-2 mr-16">第{{ index + 1 }}本</view>
+                                    <view class="audit-status"
+                                        :class="audit.status === '良好' ? 'status-good' : 'status-bad'">
+                                        {{ audit.status }}
+                                    </view>
+                                </view>
+                                <view class="audit-price flex-1"><text class="common-text-2">审核：</text> ¥{{ audit.price }}
+                                </view>
+                            </view>
+                            <view class="audit-reason" v-if="audit.auditReason">
+                                原因：{{ audit.auditReason }}
+                            </view>
+                        </view>
+
+                    </view>
+                </template>
+                <view v-else class="book-price mt-20">暂无审核信息</view>
+            </view>
+            <view class="delete-btn">
+                <text>×{{ book.num }}</text>
+            </view>
+        </view>
+
+        <common-dialog ref="deleteDialog" title="温馨提示" @confirm="confirmDelete">
+            <text>确定删除这本图书吗？</text>
+        </common-dialog>
+    </view>
+</template>
+
+<script>
+import commonDialog from '@/components/common-dialog.vue';
+export default {
+    components: {
+        commonDialog
+    },
+    props: {
+        book: {
+            type: Object,
+            required: true
+        }
+    },
+    data() {
+        return {}
+    },
+    methods: {
+
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.book-item {
+    background: #FFFFFF;
+    margin-bottom: 30rpx;
+    border-radius: 10rpx;
+
+    .tag-text {
+        font-family: Source Han Sans CN;
+        font-weight: 400;
+        font-size: 24rpx;
+        color: #FFFFFF;
+    }
+
+    .tzs {
+        width: 91rpx;
+        height: 30rpx;
+        background: linear-gradient(263deg, #98E05F, #0DE3AC);
+        border-radius: 2rpx;
+        padding: 4rpx 10rpx;
+        margin-right: 10rpx;
+    }
+
+    .kmdb {
+        width: 117rpx;
+        height: 30rpx;
+        background: linear-gradient(263deg, #F7CB6B, #FBA980);
+        border-radius: 2rpx;
+        padding: 4rpx 10rpx;
+        margin-right: 10rpx;
+    }
+
+    .book-info {
+        display: flex;
+        position: relative;
+
+        .book-cover {
+            width: 140rpx;
+            height: 196rpx;
+            border-radius: 8rpx;
+        }
+
+        .book-detail {
+            flex: 1;
+            margin-left: 20rpx;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+
+            :v-deep .u-number-input {
+                background: #F9F9F9 !important;
+                border-radius: 6rpx;
+            }
+
+            .book-title {
+                max-width: 400rpx;
+                font-size: 28rpx;
+                color: #333;
+                line-height: 1.4;
+                margin-bottom: 20rpx;
+                display: -webkit-box;
+                -webkit-box-orient: vertical;
+                -webkit-line-clamp: 2;
+                overflow: hidden;
+                font-family: Source Han Sans CN;
+                font-weight: 400;
+            }
+
+            .book-price {
+                font-family: Source Han Sans CN;
+                font-weight: 400;
+                font-size: 24rpx;
+                color: #999999;
+            }
+        }
+
+        .delete-btn {
+            position: absolute;
+            right: 0;
+            top: -10rpx;
+            padding: 10rpx;
+        }
+    }
+
+    .audit-info {
+        min-height: 60rpx;
+        background: #FAFAFA;
+        border-radius: 10rpx;
+        padding: 16rpx 22rpx;
+        box-sizing: border-box;
+
+        .audit-item {
+            margin-bottom: 6rpx;
+            font-size: 24rpx;
+            line-height: 42rpx;
+        }
+
+        .audit-status {
+            margin-right: 20rpx;
+
+            &.status-good {
+                color: #67C23A;
+            }
+
+            &.status-bad {
+                color: #F56C6C;
+            }
+        }
+
+        .audit-price {
+            color: #F56C6C;
+        }
+
+        .audit-reason {
+            font-size: 26rpx;
+            color: #999;
+            font-weight: 400;
+            font-family: PingFang SC;
+            margin-top: 6rpx;
+        }
+    }
+}
+</style>

pages-mine/components/order-item.vue

@@ -74,7 +74,7 @@ export default {
         },
         goToDetail() {
             uni.navigateTo({
-                url: `/pages/order/detail?id=${this.order.orderNo}`
+                url: `/pages-mine/pages/order-detail?id=${this.order.orderNo}`
             })
         },
         handleAction(action) {

pages-mine/components/order-timeline.vue

@@ -0,0 +1,225 @@
+<template>
+    <view class="timeline-section">
+        <view class="time-info" @click="toggleExpand" v-if="!isExpanded">
+            <text>下拉查看更多</text>
+            <u-icon :name="isExpanded ? 'arrow-up' : 'arrow-down'" size="24" color="#333333"></u-icon>
+        </view>
+
+        <view class="time-info-expanded" v-else  @click="toggleExpand">
+            <u-icon name="arrow-up" size="36" color="#333333"></u-icon>
+        </view>
+
+        <view class="timeline-content" :class="{ 'collapsed': !isExpanded }">
+            <view class="timeline-list">
+                <view class="timeline-item" v-for="(item, index) in timelineData" :key="index">
+                    <view class="timeline-dot"></view>
+                    <view class="timeline-info">
+                        <view class="status">{{ item.status }}</view>
+                        <view class="time" v-if="item.time">{{ item.time }}</view>
+                        <view class="desc" v-if="item.desc">{{ item.desc }}</view>
+                        <!-- 快递单号 -->
+                        <view class="express-no" v-if="item.expressNo">
+                            <text>{{ item.expressNo }}</text>
+                            <image src="../static/copy.png" style="width: 42rpx;height:42rpx;margin-left: 20rpx;"
+                            @click.stop="copyExpressNo(item.expressNo)"></image>
+                        </view>
+                        <!-- 物流信息 -->
+                        <view class="express-info" v-if="item.expressInfo">
+                            {{ item.expressInfo }}
+                        </view>
+                    </view>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+    name: 'order-timeline',
+    data() {
+        return {
+            isExpanded: false,
+            timelineData: [
+                {
+                    status: '已到款',
+                    time: '2024-10-25 12:00:15',
+                    desc: '品相审核不通过的书籍可以在审核后48小时之内申请退回，逾期不予退回。(寄单不含快递费可以免费申请退回，后续订单不含快递费需要支付运费退回。)'
+                },
+                {
+                    status: '审核成功',
+                    time: '2024-10-25 12:00:15'
+                },
+                {
+                    status: '待审核',
+                    desc: '毕业季订单繁忙，预计订单包裹签收15天完成书籍审核并支付书款，请您耐心等待~'
+                },
+                {
+                    status: '快递取件',
+                    expressNo: 'SF313996799456',
+                    expressInfo: '暂无物流信息'
+                },
+                {
+                    status: '待取件',
+                    desc: '书籍平台已为您安排【顺丰标快】，请您注意查看三方来电'
+                },
+                {
+                    status: '初审成功',
+                    time: '2024-10-25 12:00:15'
+                },
+                {
+                    status: '待初审',
+                    desc: '取件时间：2024-10-28 09:00-10:00\n预约取件时间前20分钟内将完成订单审核，请您留意初审结果。如初审通过请您准备好快件，并等待订单信息。感谢您的配合。'
+                },
+                {
+                    status: '回收订单提交',
+                    time: '2024-10-25 12:00:15'
+                }
+            ]
+        }
+    },
+    computed: {
+        currentStatus() {
+            return this.timelineData[0]?.status || ''
+        }
+    },
+    methods: {
+        toggleExpand() {
+            this.isExpanded = !this.isExpanded
+        },
+        copyExpressNo(no) {
+            uni.setClipboardData({
+                data: no,
+                success: () => {
+                    uni.$u.toast('复制成功')
+                }
+            })
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.timeline-section {
+    position: relative;
+
+    .time-info {
+        display: flex;
+        align-items: center;
+        font-size: 26rpx;
+        color: #333333;
+        position: absolute;
+        top: 40rpx;
+        right: 40rpx;
+        z-index: 9;
+
+        .u-icon {
+            margin-left: 4rpx;
+        }
+    }
+    .time-info-expanded {
+        position: absolute;
+        bottom: 40rpx;
+        right: 40rpx;
+        z-index: 9;
+    }
+
+    .timeline-content {
+        position: relative;
+        padding: 30rpx;
+
+        &.collapsed {
+            max-height: 180rpx;
+            overflow: hidden;
+
+            &::after {
+                content: '';
+                position: absolute;
+                left: -30rpx;
+                right: 0;
+                bottom: 0;
+                height: 80rpx;
+                width: calc(100% + 60rpx);
+                background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #FFF 100%);
+                pointer-events: none;
+            }
+        }
+
+        .timeline-list {
+            position: relative;
+
+            &::before {
+                content: '';
+                position: absolute;
+                left: 6rpx;
+                top: 0;
+                bottom: 0;
+                width: 2rpx;
+                height: calc(100% - 60rpx);
+                background: #38C148;
+            }
+
+            .timeline-item {
+                display: flex;
+                position: relative;
+                padding-bottom: 40rpx;
+
+                &:last-child {
+                    padding-bottom: 0;
+                }
+
+                .timeline-dot {
+                    width: 14rpx;
+                    height: 14rpx;
+                    border-radius: 50%;
+                    background: #38C148;
+                    margin-right: 20rpx;
+                    flex-shrink: 0;
+                    z-index: 1;
+                }
+
+                .timeline-info {
+                    flex: 1;
+                    margin-top: -10rpx;
+
+                    .status {
+                        font-size: 28rpx;
+                        color: #38C148;
+                        margin-bottom: 8rpx;
+                    }
+
+                    .time,
+                    .desc {
+                        font-family: PingFang SC;
+                        font-weight: 400;
+                        font-size: 24rpx;
+                        color: #999999;
+                        line-height: 36rpx;
+                        white-space: pre-wrap;
+                    }
+
+                    .express-no {
+                        display: flex;
+                        align-items: center;
+                        font-size: 26rpx;
+                        color: #666;
+                        margin: 8rpx 0;
+
+                        .u-icon {
+                            margin-left: 10rpx;
+                        }
+                    }
+
+                    .express-info {
+                        font-size: 24rpx;
+                        color: #999;
+                        padding: 20rpx;
+                        background: #dcdcdc;
+                        border-radius: 8rpx;
+                    }
+                }
+            }
+        }
+    }
+}
+</style>

pages-mine/components/return-notice.vue

@@ -0,0 +1,63 @@
+<template>
+    <!-- 添加退回提示区域 -->
+    <view class="return-notice">
+        <view class="notice-content">
+            <view class="title-row">
+                <text class="title">退回不通过书籍</text>
+                <text class="tag">首次免费退</text>
+            </view>
+            <view class="countdown">
+                您需要在<text class="time">3天05小时16分52秒</text>内处理
+            </view>
+        </view>
+        <u-icon name="arrow-right" size="28" color="#999"></u-icon>
+    </view>
+</template>
+
+<style lang="scss" scoped>
+// 添加新的样式
+.return-notice {
+    margin: 30rpx;
+    padding: 30rpx;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: #FFF4F4;
+    border-radius: 10rpx;
+    border: 2rpx solid #FF0000;
+
+    .notice-content {
+        flex: 1;
+
+        .title-row {
+            display: flex;
+            align-items: center;
+            margin-bottom: 12rpx;
+
+            .title {
+                font-size: 32rpx;
+                font-weight: 500;
+                color: #333;
+            }
+
+            .tag {
+                margin-left: 12rpx;
+                padding: 4rpx 12rpx;
+                background: #FF4B4B;
+                color: #fff;
+                font-size: 24rpx;
+                border-radius: 4rpx;
+            }
+        }
+
+        .countdown {
+            font-size: 28rpx;
+            color: #666;
+
+            .time {
+                color: #FF4B4B;
+            }
+        }
+    }
+}
+</style>

pages-mine/components/service-promise.vue

@@ -0,0 +1,46 @@
+<template>
+    <!-- 服务承诺栏 -->
+    <view class="service-promise">
+        <view class="promise-item">
+            <u-icon name="gift-fill" color="#FFFFFF" size="32"></u-icon>
+            <text>免费退回</text>
+        </view>
+        <view class="promise-item">
+            <u-icon name="clock-fill" color="#FFFFFF" size="32"></u-icon>
+            <text>24小时验</text>
+        </view>
+        <view class="promise-item">
+            <u-icon name="yuan-circle-fill" color="#FFFFFF" size="32"></u-icon>
+            <text>极速打款</text>
+        </view>
+        <view class="promise-item">
+            <u-icon name="rmb-circle-fill" color="#FFFFFF" size="32"></u-icon>
+            <text>卖亏必赔</text>
+        </view>
+    </view>
+</template>
+
+
+<style lang="scss" scoped>
+.service-promise {
+    background: #1F1303;
+    padding: 10rpx 30rpx;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 40rpx;
+    width: calc(100% + 60rpx);
+    margin-left: -30rpx;
+
+    .promise-item {
+        display: flex;
+        align-items: center;
+        color: #FFFFFF;
+        font-size: 24rpx;
+
+        .u-icon {
+            margin-right: 10rpx;
+        }
+    }
+}
+</style>

pages-mine/pages/order-detail.vue

@@ -0,0 +1,170 @@
+<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>

pages-mine/pages/withdraw.vue

@@ -16,7 +16,7 @@
             <view class="input-box flex-a">
                 <text class="currency">¥</text>
                 <u-input class="flex-1" v-model="withdrawAmount" type="number" :border="false" placeholder="请输入提现金额"
-                    @input="onAmountInput" placeholder-style="font-size:50rpx;color:#c1c1c1"
+                    @input="onAmountInput" placeholder-style="font-size:50rpx;color:#c1c1c1;font-weight:400"
                     :custom-style="{ fontSize: '50rpx' }"></u-input>
                 <text class="all-btn" @click="withdrawAll">全部提现</text>
             </view>

pages.json

@@ -210,6 +210,12 @@
                         "navigationBarTitleText": "卖书订单"
                     }
                 },
+                {
+                    "path": "pages/order-detail",
+                    "style": {
+                        "navigationBarTitleText": "卖书订单详情"
+                    }
+                },
                 {
                     "path": "pages/notice",
                     "style": {

static/css/common.scss

@@ -409,7 +409,6 @@ view {
     font-weight: 500;
     font-size: 28rpx;
     color: #333333;
-    line-height: 1.4;
 }
 
 .bottom-fixed-con {