订单详情页面

components/pageScroll/index.vue

@@ -1,135 +1,148 @@
 <template>
-	<!-- 列表 -->
-	<scroll-view class="scroll-view" scroll-y refresher-enabled :refresher-triggered="isRefreshing"
-		@refresherrefresh="onRefresh" @scrolltolower="onLoadMore">
-		<!-- 空状态 -->
-		<view v-if="!loading && !dataList.length" class="empty-state">
-			<slot v-if="slotEmpty" name="empty"></slot>
-			<u-empty v-else mode="list" text="暂无扫描记录" margin-top="200"></u-empty>
-		</view>
+    <!-- 列表 -->
+    <scroll-view class="scroll-view" scroll-y refresher-enabled :refresher-triggered="isRefreshing"
+        @refresherrefresh="onRefresh" @scrolltolower="onLoadMore">
+        <!-- 空状态 -->
 
-		<slot></slot>
+        <view v-if="!loading && !dataList.length" class="empty-state">
+            <view class="flex-d flex-a-c" style="padding-top: 25vh;" v-if="slotEmpty">
+                <image src="@/pages-home/static/no-data.png" style="width:100%;height:260rpx" mode="heightFix"></image>
+                <view class="common-title" style="padding:33rpx 0 20rpx 0">暂无内容</view>
+                <view class="common-text" v-if="emptyText">{{ emptyText }}</view>
+            </view>
+            <u-empty v-else mode="list" text="暂无扫描记录" margin-top="200"></u-empty>
+        </view>
 
-		<!-- 加载更多 -->
-		<view class="load-more" v-if="dataList.length > 0">
-			<u-divider bg-color="#f8f8f8">{{ hasMore ? '加载中...' : '我是有底线的' }}</u-divider>
-		</view>
-	</scroll-view>
+        <slot></slot>
+
+        <!-- 加载更多 -->
+        <view class="load-more" v-if="dataList.length > 0">
+            <u-divider bg-color="#F5F5F5">{{ hasMore ? '加载中...' : '我是有底线的' }}</u-divider>
+        </view>
+    </scroll-view>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				isRefreshing: false,
-				loading: false,
-				page: 1,
-				hasMore: true,
-				dataList: [],
-			}
-		},
-		props: {
-			url: {
-				type: String,
-				required: true,
-				default: '/token/order/scanLogs'
-			},
-			pageSize: {
-				type: Number,
-				default: 10
-			},
-			slotEmpty: {
-				type: Boolean,
-				default: false
-			}
-		},
-		onLoad() {
-			this.loadData()
-		},
-		methods: {
-			// 加载数据
-			async loadData(isRefresh = false) {
-				if (isRefresh) {
-					this.page = 1
-					this.hasMore = true
-				}
-				console.log(this.dataList, this.hasMore, this.loading, 'xxxxx')
-				if (!this.hasMore || this.loading) return
-
-				this.loading = true
+export default {
+    data() {
+        return {
+            isRefreshing: false,
+            loading: false,
+            page: 1,
+            hasMore: true,
+            dataList: [],
+        }
+    },
+    props: {
+        url: {
+            type: String,
+            required: true,
+            default: '/token/order/scanLogs'
+        },
+        pageSize: {
+            type: Number,
+            default: 10
+        },
+        slotEmpty: {
+            type: Boolean,
+            default: false
+        },
+        emptyText: {
+            type: String,
+        }
+    },
+    onLoad() {
+        this.loadData()
+    },
+    methods: {
+        // 加载数据
+        async loadData(isRefresh = false) {
+            if (isRefresh) {
+                this.page = 1
+                this.hasMore = true
+            }
+            if (!this.hasMore || this.loading) return
 
-				try {
-					const res = await this.fetchBookList()
+            this.loading = true
+            try {
+                const res = await this.fetchBookList()
 
-					if (isRefresh) {
-						this.dataList = res.list
-					} else {
-						this.dataList = [...this.dataList, ...res.list]
-					}
-					this.$emit('updateList', this.dataList)
+                if (isRefresh) {
+                    this.dataList = res.list
+                } else {
+                    this.dataList = [...this.dataList, ...res.list]
+                }
+                this.$emit('updateList', this.dataList)
 
-					this.hasMore = res.hasMore
-					this.page++
-				} catch (error) {
-					uni.showToast({
-						title: '加载失败',
-						icon: 'none'
-					})
-				} finally {
-					this.loading = false
-					if (isRefresh) {
-						this.isRefreshing = false
-					}
-				}
-			},
+                this.hasMore = res.hasMore
+                this.page++
+            } catch (error) {
+                uni.showToast({
+                    title: '加载失败',
+                    icon: 'none'
+                })
+            } finally {
+                this.loading = false
+                if (isRefresh) {
+                    this.isRefreshing = false
+                }
+            }
+        },
 
-			// 模拟获取数据
-			fetchBookList() {
-				return new Promise((resolve) => {
-					uni.$u.http.get(this.url, {
-						pageSize: this.pageSize,
-						pageNum: this.page
-					}).then(res => {
-						resolve({
-							list: res.rows,
-							hasMore: res.rows.length < res.total - this.dataList.length
-						})
-					})
-				})
-			},
+        // 模拟获取数据
+        fetchBookList() {
+            return new Promise((resolve) => {
+                uni.showLoading({
+                    title: '加载中...',
+                })
+                uni.$u.http.get(this.url, {
+                    pageSize: this.pageSize,
+                    pageNum: this.page
+                }).then(res => {
+                    resolve({
+                        list: res.rows,
+                        hasMore: res.rows ? res.rows.length < res.total - this.dataList
+                            .length : false
+                    })
+                }).finally(() => {
+                    uni.hideLoading()
+                })
+            })
+        },
 
-			reloadData() {
-				this.page = 1
-				this.fetchBookList()
-			},
+        reloadData() {
+            this.page = 1
+            this.fetchBookList()
+        },
 
-			// 下拉刷新
-			async onRefresh() {
-				if (this.loading) return
-				this.isRefreshing = true
-				await this.loadData(true)
-			},
+        // 下拉刷新
+        async onRefresh() {
+            if (this.loading) return
+            this.isRefreshing = true
+            await this.loadData(true)
+        },
 
-			// 上拉加载更多
-			async onLoadMore() {
-				if (this.loading || !this.hasMore) return
-				await this.loadData()
-			},
-		}
-	}
+        // 上拉加载更多
+        async onLoadMore() {
+            if (this.loading || !this.hasMore) return
+            await this.loadData()
+        },
+    }
+}
 </script>
 
 <style lang="scss">
-	.scroll-view {
-		height: calc(100vh - 88rpx);
-	}
+.scroll-view {
+    height: calc(100vh - 88rpx);
+}
 
-	.load-more {
-		width: 100%;
-		display: flex;
-		color: #999999;
-		font-size: 24rpx;
-		padding: 30rpx 0;
-		justify-content: center;
-	}
+.load-more {
+    width: 100%;
+    display: flex;
+    color: #999999;
+    font-size: 24rpx;
+    padding: 30rpx 0;
+    justify-content: center;
+    padding-bottom: calc(env(safe-area-inset-bottom) + 30rpx);
+}
 </style>

pages-home/pages/scaned-book.vue

@@ -14,15 +14,7 @@
         </view>
 
         <!-- 书籍列表 -->
-        <page-scroll :page-size="12" @updateList="handleUpdateList" ref="pageRef" slotEmpty>
-            <template #empty>
-                <view class="flex-d flex-a-c" style="padding-top: 25vh;">
-                    <image src="../static/no-data.png" style="width:100%;height:260rpx" mode="heightFix"></image>
-                    <view class="common-title" style="padding:33rpx 0 20rpx 0">暂无内容</view>
-                    <view class="common-text">您暂未扫过书籍</view>
-                </view>
-            </template>
-
+        <page-scroll :page-size="12" @updateList="handleUpdateList" ref="pageRef" slotEmpty emptyText="您暂未扫过书籍">
             <u-checkbox-group v-model="checkedIds">
                 <view class="book-list">
                     <BookListItem v-for="book in bookList" :key="book.isbn" :book="book" :isEditMode="isEditMode" />

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

@@ -14,35 +14,45 @@
                         <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>
+                <view v-if="isReturn" class="book-price">退回信息</view>
+                <template v-else>
+                    <view class="book-price" v-if="book.auditList && book.auditList.length">审核信息</view>
+                    <view v-else class="book-price">暂无审核信息</view>
                 </template>
-                <view v-else class="book-price mt-20">暂无审核信息</view>
             </view>
             <view class="delete-btn">
                 <text>×{{ book.num }}</text>
             </view>
         </view>
+        <view class="mt-10" style="padding-left: 150rpx;">
+            <view class="audit-info" v-if="isReturn">
+                <view class="audit-item" v-for="(audit, index) in book.auditList" :key="index">
+                    <view class="audit-reason" v-if="audit.auditReason">
+                        原因：{{ audit.auditReason }}
+                    </view>
+                </view>
+            </view>
+            <template v-else>
+                <view class="audit-info" v-if="book.auditList && book.auditList.length">
+                    <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>
 
         <common-dialog ref="deleteDialog" title="温馨提示" @confirm="confirmDelete">
             <text>确定删除这本图书吗？</text>
@@ -60,6 +70,10 @@ export default {
         book: {
             type: Object,
             required: true
+        },
+        isReturn: {
+            type: Boolean,
+            default: false
         }
     },
     data() {
@@ -158,7 +172,7 @@ export default {
         min-height: 60rpx;
         background: #FAFAFA;
         border-radius: 10rpx;
-        padding: 16rpx 22rpx;
+        padding: 12rpx 20rpx;
         box-sizing: border-box;
 
         .audit-item {

pages-mine/components/order-item.vue

@@ -2,7 +2,7 @@
     <view class="order-item" @click="goToDetail">
         <!-- 订单头部 -->
         <view class="order-header">
-            <text class="common-text-2">卖书编号：{{ order.orderNo }}</text>
+            <text class="common-text-2 font-30">卖书编号：{{ order.orderNo }}</text>
             <text class="order-status" :style="{ color: statusColorMap[order.status] }">{{ statusTextMap[order.status]
                 }}</text>
         </view>
@@ -16,13 +16,14 @@
         </scroll-view>
 
         <!-- 订单信息 -->
-        <view class="flex-a flex-j-b">
+        <view class="flex-a flex-j-b mb-20">
             <text class="common-text">提交时间：{{ order.submitTime }}</text>
             <text class="common-title">共{{ order.books.length }}本</text>
         </view>
 
         <!-- 底部按钮 -->
-        <view class="order-actions mt-20" v-if="getActions(order.status).length > 0">
+        <view class="order-actions" v-if="getActions(order.status).length > 0">
+		
             <u-button v-for="(action, index) in getActions(order.status)" :key="index" :type="action.type" size="mini"
                 :plain="action.plain" class="action-btn" @click.stop="handleAction(action.action)" :customStyle="customStyle">{{ action.text }}</u-button>
         </view>
@@ -36,6 +37,10 @@ export default {
         order: {
             type: Object,
             required: true
+        },
+        isReturn: {
+            type: Boolean,
+            default: false
         }
     },
     data() {
@@ -73,9 +78,15 @@ export default {
             return actionMap[status] || []
         },
         goToDetail() {
-            uni.navigateTo({
-                url: `/pages-mine/pages/order-detail?id=${this.order.orderNo}`
-            })
+            if (this.isReturn) {
+                uni.navigateTo({
+                    url: `/pages-mine/pages/apply?id=${this.order.orderNo}`
+                })
+            } else {
+                uni.navigateTo({
+                    url: `/pages-mine/pages/order-detail?id=${this.order.orderNo}`
+                })
+            }
         },
         handleAction(action) {
             this.$emit(action, this.order)
@@ -89,7 +100,7 @@ export default {
     background: #FFFFFF;
     border-radius: 12rpx;
     padding: 30rpx;
-    margin-bottom: 20rpx;
+	margin-bottom: 20rpx;
 
     .order-header {
         display: flex;

pages-mine/components/service-promise.vue

@@ -29,8 +29,7 @@
     justify-content: center;
     align-items: center;
     gap: 40rpx;
-    width: calc(100% + 60rpx);
-    margin-left: -30rpx;
+    width: 100vw;
 
     .promise-item {
         display: flex;

pages-mine/pages/apply-return.vue

@@ -0,0 +1,135 @@
+<template>
+	<view class="order-page">
+		<!-- 标签页 -->
+		<view class="tabs-wrapper">
+			<u-tabs :list="tabList" :current="currentTab" @change="handleTabChange" :is-scroll="false"
+				active-color="#38C148" bar-width="60"></u-tabs>
+		</view>
+
+		<!-- 订单列表 -->
+		<page-scroll :page-size="12" @updateList="handleUpdateList" ref="pageRef" slotEmpty url="/token/order/scanLogs">
+			<view v-if="orderList.length > 0" class="pad-20">
+				<order-item isReturn v-for="order in orderList" :key="order.orderNo" :order="order" @cancel="handleCancel"
+					@report="handleReport" @editAddress="handleEditAddress" @remind="handleRemind"></order-item>
+			</view>
+		</page-scroll>
+	</view>
+</template>
+
+<script>
+	import OrderItem from '../components/order-item.vue'
+	import pageScroll from '@/components/pageScroll/index.vue'
+
+	export default {
+		components: {
+			OrderItem,
+			pageScroll
+		},
+		data() {
+			return {
+				tabList: [{
+						name: '已申请'
+					},
+					{
+						name: '可退回'
+					},
+				],
+				currentTab: 0,
+				orderList: [],
+			}
+		},
+		onLoad(options) {
+			// 如果有传入状态，切换到对应tab
+			if (options.status) {
+				const index = this.tabList.findIndex(tab => tab.value === options.status)
+				if (index !== -1) {
+					this.currentTab = index
+				}
+			}
+			this.loadOrders(true)
+		},
+		methods: {
+			// 加载订单 
+			loadOrders(bool = false) {
+				this.$refs.pageRef?.loadData(bool)
+			},
+
+			handleTabChange(index) {
+				this.currentTab = index
+				this.page = 1
+				this.loadOrders(true)
+			},
+
+			handleUpdateList(list) {
+				this.orderList = list.map(item => {
+					return {
+						orderNo: '54631435441',
+						status: 'pending_review',
+						submitTime: '2024-12-06 15:00:00',
+						books: [{
+								cover: 'https://shuhi.oss-cn-qingdao.aliyuncs.com/20241206/08ea280b-8627-4525-9e31-ed25cdce9094.jpg'
+							},
+							{
+								cover: 'https://shuhi.oss-cn-qingdao.aliyuncs.com/20241206/08ea280b-8627-4525-9e31-ed25cdce9094.jpg'
+							},
+							{
+								cover: 'https://shuhi.oss-cn-qingdao.aliyuncs.com/20241206/08ea280b-8627-4525-9e31-ed25cdce9094.jpg'
+							},
+							{
+								cover: 'https://shuhi.oss-cn-qingdao.aliyuncs.com/20241206/08ea280b-8627-4525-9e31-ed25cdce9094.jpg'
+							},
+							{
+								cover: 'https://shuhi.oss-cn-qingdao.aliyuncs.com/20241206/08ea280b-8627-4525-9e31-ed25cdce9094.jpg'
+							},
+							{
+								cover: 'https://shuhi.oss-cn-qingdao.aliyuncs.com/20241206/08ea280b-8627-4525-9e31-ed25cdce9094.jpg'
+							}
+						]
+					}
+				})
+			},
+			// 订单操作方法
+			handleCancel(order) {
+				uni.showModal({
+					title: '提示',
+					content: '确定要取消该订单吗？',
+					success: (res) => {
+						if (res.confirm) {
+							// 调用取消订单接口
+						}
+					}
+				})
+			},
+			handleReport(order) {
+				uni.navigateTo({
+					url: `/pages/order/report?orderNo=${order.orderNo}`
+				})
+			},
+			handleEditAddress(order) {
+				uni.navigateTo({
+					url: `/pages/order/address?orderNo=${order.orderNo}`
+				})
+			},
+			handleRemind(order) {
+				uni.showToast({
+					title: '已提醒审核',
+					icon: 'none'
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.order-page {
+		min-height: 100vh;
+		background-color: #F5F5F5;
+
+		.tabs-wrapper {
+			position: sticky;
+			top: 0;
+			z-index: 99;
+			background: #FFFFFF;
+		}
+	}
+</style>

pages-mine/pages/apply.vue

@@ -0,0 +1,165 @@
+<template>
+    <view class="apply-page">
+        <view class="common-card flex-a flex-j-b mb-20" @click="handleAddress" v-if="defaultAddr.id">
+            <image src="../../pages-mine/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 v-else class="common-card flex-a flex-j-b mb-20" @click="handleAddress">
+            <view class="flex-a">
+                <u-icon name="plus-circle-fill" size="50" color="#38C148"></u-icon>
+                <text class="required">退回地址</text>
+            </view>
+            <view class="flex-a">
+                <view class="flex-d mr-10 flex-a-e">
+                    <text class="common-text-2 font-28">请添加</text>
+                    <text class="common-text font-24">提交后无法修改</text>
+                </view>
+                <u-icon name="arrow-right" size="32" color="#666666"></u-icon>
+            </view>
+        </view>
+
+        <view class="common-card flex-a flex-j-b mb-20" style="padding: 30rpx;" @click="selectBooks">
+            <text class="required">选择退回书籍</text>
+            <view class="flex-a">
+                <text class="common-text-2 font-26">请选择</text>
+                <u-icon name="arrow-right" size="32" color="#666666"></u-icon>
+            </view>
+        </view>
+
+        <!-- 退回书籍 -->
+        <view class="common-card mb-20">
+            <view class="common-title mb-20"> <text>订单编号: {{ orderId }}</text></view>
+
+            <!-- 书籍列表 -->
+            <detail-book-item :book="item" v-for="(item, index) in bookItems" isReturn :key="index" />
+        </view>
+
+        <view class="common-card" style="padding: 30rpx;" @click="selectBooks">
+            <view class="flex-a flex-j-b mb-20">
+                <text class="common-text-2 font-30">退回邮费：</text>
+                <text class="common-title" style="color: #FF0000;">首次免费退回/￥33.00</text>
+            </view>
+            <view class="common-card flex-a flex-j-b" style="background: #fafafa;">
+                <text class="common-text-2">书籍数量</text>
+                <text class="common-text-2">3</text>
+            </view>
+        </view>
+
+        <view class="bottom-fixed-con">
+            <u-button type="primary">确认退回</u-button>
+        </view>
+    </view>
+</template>
+
+<script>
+import OrderItem from '../components/order-item.vue'
+import detailBookItem from '../components/detail-book-item.vue';
+
+export default {
+    components: {
+        OrderItem,
+        detailBookItem
+    },
+
+    data() {
+        return {
+            defaultAddr: {},
+            orderId: '54631435441',
+            bookItems: [
+                {
+                    cover: 'https://img3.doubanio.com/lpic/s1076932.jpg',
+                    bookName: '这里是书本名称bu换行',
+                    recycleMoney: '32.20',
+                    num: 2,
+                    suit: 1,
+                    auditList: [
+                        { status: '良好', price: '32.20', auditReason: '原因:笔记杂乱/习题做完' },
+                        { status: '不通过', price: '32.20', auditReason: '原因:笔记杂乱/习题做完' },
+                        { status: '良好', price: '32.20', auditReason: '原因:笔记杂乱/习题做完' },
+                    ]
+                },
+                {
+                    cover: 'https://img3.doubanio.com/lpic/s1076932.jpg',
+                    bookName: '这里是书本名称bu换行',
+                    recycleMoney: '32.20',
+                    num: 2,
+                    suit: 1,
+                    auditList: [
+                        { status: '良好', price: '32.20', auditReason: '原因:笔记杂乱/习题做完' },
+                        { status: '不通过', price: '32.20', auditReason: '原因:笔记杂乱/习题做完' },
+                        { status: '良好', price: '32.20', auditReason: '原因:笔记杂乱/习题做完' },
+                    ]
+                },
+                {
+                    cover: 'https://img3.doubanio.com/lpic/s1076932.jpg',
+                    bookName: '这里是书本名称bu换行',
+                    recycleMoney: '32.20',
+                    num: 2,
+                    suit: 1,
+                    auditList: [
+                        { status: '良好', price: '32.20', auditReason: '原因:笔记杂乱/习题做完' },
+                        { status: '不通过', price: '32.20', auditReason: '原因:笔记杂乱/习题做完' },
+                        { status: '良好', price: '32.20', auditReason: '原因:笔记杂乱/习题做完' },
+                    ]
+                },
+            ]
+        }
+    },
+
+    methods: {
+        addAddress() {
+            // 添加地址逻辑
+        },
+
+        selectBooks() {
+            // 选择书籍逻辑
+        },
+
+        //添加或者选择地址
+        handleAddress() {
+            uni.navigateTo({
+                url: `/pages-mine/pages/address/list?id=${this.defaultAddr.id}&isSelect=1`
+            })
+        },
+
+    },
+    mounted() {
+        uni.$on('selectAddr', (item) => {
+            if (item.id) {
+                this.defaultAddr = item
+            }
+        })
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.apply-page {
+    min-height: 100vh;
+    background: #f5f7fa;
+    padding: 20rpx;
+    padding-bottom: calc(env(safe-area-inset-bottom) + 130rpx);
+
+    .required {
+        font-size: 32rpx;
+        color: #333;
+        font-weight: 400;
+        position: relative;
+        margin-left: 10rpx;
+
+        &::after {
+            content: '*';
+            color: #fa3534;
+            margin-left: 4rpx;
+        }
+    }
+}
+</style>

pages-mine/pages/complaint.vue

@@ -0,0 +1,141 @@
+<template>
+	<view class="complaint-page">
+		<!-- 表单区域 -->
+		<view class="form-block">
+			<!-- 投诉原因 -->
+			<view class="form-item flex-a">
+				<view class="common-text-2 required">投诉原因</view>
+				<view class="input-wrapper flex-1" @click="showReasonPicker">
+					<text class="placeholder" v-if="!complaintReason">请选择投诉原因</text>
+					<text v-else>{{ complaintReason }}</text>
+					<u-icon name="arrow-right" color="#333" size="32" top="3rpx"></u-icon>
+				</view>
+			</view>
+		</view>
+
+		<view class="form-block">
+			<!-- 联系方式 -->
+			<view class="form-item flex-a" style="padding:14rpx 0">
+				<view class="common-text-2 required">联系方式</view>
+				<u-input class="flex-1" input-align="right" placeholder-style="color:#999;font-size:28rpx;"
+					v-model="phone" placeholder="请输入联系方式" :border="false" type="number" maxlength="11"></u-input>
+			</view>
+		</view>
+
+		<view class="common-text-2 required mb-20">投诉说明</view>
+		<view class="form-block" style="padding: 20rpx;">
+			<!-- 投诉说明 -->
+			<u-input v-model="description" type="textarea" placeholder="请描述投诉情况，有助于客服更快处理" :height="200"
+				:border="false"></u-input>
+		</view>
+
+		<!-- 图片上传 -->
+		<view class="common-text-2 required mb-20">上传凭证(最多3张)</view>
+
+		<u-upload class="upload-image" :fileList="fileList" @afterRead="afterRead" @delete="deletePic" :maxCount="3"
+			:previewFullImage="true" uploadText="点击上传"></u-upload>
+
+		<!-- 底部按钮 -->
+		<view class="bottom-fixed-con">
+			<u-button type="primary" @click="submitComplaint">提交</u-button>
+		</view>
+
+		<!-- 投诉原因选择器 -->
+		<u-picker v-model="showPicker" mode="selector" :range="reasonList" @confirm="confirmReason"
+			@cancel="showPicker = false"></u-picker>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				complaintReason: '',
+				phone: '',
+				description: '',
+				fileList: [],
+				showPicker: false,
+				reasonList: ['价格问题', '质量问题', '服务态度', '其他问题']
+			}
+		},
+		methods: {
+			showReasonPicker() {
+				this.showPicker = true
+			},
+			confirmReason(e) {
+				this.complaintReason = e.value[0]
+				this.showPicker = false
+			},
+			afterRead(event) {
+				const {
+					file
+				} = event
+				this.fileList.push({
+					url: file.url,
+					status: 'success',
+					message: '上传成功'
+				})
+			},
+			deletePic(event) {
+				this.fileList.splice(event.index, 1)
+			},
+			submitComplaint() {
+				if (!this.complaintReason) {
+					return uni.$u.toast('请选择投诉原因')
+				}
+				if (!this.phone) {
+					return uni.$u.toast('请输入联系方式')
+				}
+				if (!this.description) {
+					return uni.$u.toast('请输入投诉说明')
+				}
+				// TODO: 提交投诉信息
+				uni.$u.toast('投诉上报已上报给管理员')
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.complaint-page {
+		min-height: 100vh;
+		background: #F8F8F8;
+		padding: 20rpx;
+		padding-bottom: 120rpx;
+
+		.form-block {
+			background: #FFFFFF;
+			border-radius: 12rpx;
+			padding: 0 30rpx;
+			margin-bottom: 20rpx;
+		}
+
+		.required::before {
+			content: '*';
+			color: #FF5B5B;
+			margin-right: 4rpx;
+		}
+
+		.form-item {
+			padding: 30rpx 0;
+
+			.input-wrapper {
+				display: flex;
+				justify-content: flex-end;
+				align-items: center;
+				font-size: 28rpx;
+				color: #333;
+
+				.placeholder {
+					color: #999;
+				}
+			}
+		}
+	}
+
+	::v-deep .upload-image {
+		.u-list-item {
+			background: #ffffff;
+		}
+	}
+</style>

pages-mine/pages/order-detail.vue

@@ -61,13 +61,13 @@
         </view>
 
         <!-- 底部操作栏 -->
-        <view class="bottom-fixed-con" style="flex-direction: column;padding: 0;">
+        <view class="bottom-fixed-con detail-bottom flex-d">
             <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" plain @click="toComplaint">投诉上报</u-button>
                     <u-button type="primary" class="ml-20">修改地址</u-button>
                 </view>
             </view>
@@ -142,6 +142,11 @@ export default {
                     uni.$u.toast('复制成功')
                 }
             })
+        },
+        toComplaint() {
+            uni.navigateTo({
+                url: '/pages-mine/pages/complaint'
+            })
         }
     }
 }
@@ -166,5 +171,12 @@ export default {
         margin: 30rpx;
         border-radius: 10rpx;
     }
+
+    .detail-bottom{
+        flex-direction: column;
+        padding-left: 0;
+        padding-right: 0;
+        padding-top: 0;
+    }
 }
 </style>

pages-mine/pages/order-page.vue

@@ -1,221 +1,145 @@
 <template>
-	<view class="order-page">
-		<!-- 标签页 -->
-		<view class="tabs-wrapper">
-			<u-tabs :list="tabList" :current="currentTab" @change="handleTabChange" :is-scroll="false"
-				active-color="#38C148" bar-width="60"></u-tabs>
-		</view>
+    <view class="order-page">
+        <!-- 标签页 -->
+        <view class="tabs-wrapper">
+            <u-tabs :list="tabList" :current="currentTab" @change="handleTabChange" :is-scroll="false"
+                active-color="#38C148" bar-width="60"></u-tabs>
+        </view>
 
-		<!-- 订单列表 -->
-		<scroll-view scroll-y class="order-scroll" @scrolltolower="loadMore" refresher-enabled
-			:refresher-triggered="isRefreshing" @refresherrefresh="onRefresh">
-			<block v-if="orderList.length > 0">
-				<order-item v-for="order in orderList" :key="order.orderNo" :order="order" @cancel="handleCancel"
-					@report="handleReport" @editAddress="handleEditAddress" @remind="handleRemind"></order-item>
-			</block>
-
-			<!-- 空状态 -->
-			<u-empty v-else mode="list" text="暂无订单"></u-empty>
-		</scroll-view>
-	</view>
+        <!-- 订单列表 -->
+        <page-scroll :page-size="12" @updateList="handleUpdateList" ref="pageRef" slotEmpty url="/token/order/scanLogs">
+            <view v-if="orderList.length > 0" class="pad-20">
+                <order-item v-for="order in orderList" :key="order.orderNo" :order="order" @cancel="handleCancel"
+                    @report="handleReport" @editAddress="handleEditAddress" @remind="handleRemind"></order-item>
+            </view>
+        </page-scroll>
+    </view>
 </template>
 
 <script>
-	import OrderItem from '../components/order-item.vue'
+import OrderItem from '../components/order-item.vue'
+import pageScroll from '@/components/pageScroll/index.vue'
+
+export default {
+    components: {
+        OrderItem,
+        pageScroll
+    },
+    data() {
+        return {
+            tabList: [{
+                name: '全部'
+            },
+            {
+                name: '待初审'
+            },
+            {
+                name: '待取件'
+            },
+            {
+                name: '待审核'
+            },
+            {
+                name: '待到款'
+            }
+            ],
+            currentTab: 0,
+            orderList: [],
+            isRefreshing: false,
+            page: 1,
+            pageSize: 10,
+            hasMore: true
+        }
+    },
+    onLoad(options) {
+        // 如果有传入状态，切换到对应tab
+        if (options.status) {
+            this.currentTab = options.status * 1
+        }
+        this.loadOrders(true)
+    },
+    methods: {
+        // 加载订单 
+        loadOrders(bool = false) {
+            this.$refs.pageRef?.loadData(bool)
+        },
 
-	export default {
-		components: {
-			OrderItem
-		},
-		data() {
-			return {
-				tabList: [{
-						name: '全部'
-					},
-					{
-						name: '待初审'
-					},
-					{
-						name: '待取件'
-					},
-					{
-						name: '待审核'
-					},
-					{
-						name: '待到款'
-					}
-				],
-				currentTab: 0,
-				orderList: [],
-				isRefreshing: false,
-				page: 1,
-				pageSize: 10,
-				hasMore: true
-			}
-		},
-		onLoad(options) {
-			// 如果有传入状态，切换到对应tab
-			if (options.status) {
-				const index = this.tabList.findIndex(tab => tab.value === options.status)
-				if (index !== -1) {
-					this.currentTab = index
-				}
-			}
-			this.loadOrders()
-		},
-		methods: {
-			handleTabChange(index) {
-				this.currentTab = index
-				this.page = 1
-				this.orderList = []
-				this.hasMore = true
-				this.loadOrders()
-			},
-			async loadOrders() {
-				// 模拟数据，实际开发需要对接接口
-				const mockData = [{
-						orderNo: '54631435441',
-						status: 'pending_review',
-						submitTime: '2024-12-06 15:00:00',
-						books: [{
-								cover: 'https://shuhi.oss-cn-qingdao.aliyuncs.com/20241206/08ea280b-8627-4525-9e31-ed25cdce9094.jpg'
-							},
-							{
-								cover: 'https://shuhi.oss-cn-qingdao.aliyuncs.com/20241206/08ea280b-8627-4525-9e31-ed25cdce9094.jpg'
-							},
-							{
-								cover: 'https://shuhi.oss-cn-qingdao.aliyuncs.com/20241206/08ea280b-8627-4525-9e31-ed25cdce9094.jpg'
-							},
-							{
-								cover: 'https://shuhi.oss-cn-qingdao.aliyuncs.com/20241206/08ea280b-8627-4525-9e31-ed25cdce9094.jpg'
-							},
-							{
-								cover: 'https://shuhi.oss-cn-qingdao.aliyuncs.com/20241206/08ea280b-8627-4525-9e31-ed25cdce9094.jpg'
-							},
-							{
-								cover: 'https://shuhi.oss-cn-qingdao.aliyuncs.com/20241206/08ea280b-8627-4525-9e31-ed25cdce9094.jpg'
-							}
-						]
-					}, {
-						orderNo: '54631435442',
-						status: 'cancelled',
-						submitTime: '2024-12-06 14:30:00',
-						books: [{
-								cover: 'https://shuhi.oss-cn-qingdao.aliyuncs.com/20241206/08ea280b-8627-4525-9e31-ed25cdce9094.jpg'
-							},
-							{
-								cover: 'https://shuhi.oss-cn-qingdao.aliyuncs.com/20241206/08ea280b-8627-4525-9e31-ed25cdce9094.jpg'
-							},
-							{
-								cover: 'https://shuhi.oss-cn-qingdao.aliyuncs.com/20241206/08ea280b-8627-4525-9e31-ed25cdce9094.jpg'
-							},
-							{
-								cover: 'https://shuhi.oss-cn-qingdao.aliyuncs.com/20241206/08ea280b-8627-4525-9e31-ed25cdce9094.jpg'
-							},
-							{
-								cover: 'https://shuhi.oss-cn-qingdao.aliyuncs.com/20241206/08ea280b-8627-4525-9e31-ed25cdce9094.jpg'
-							},
-							{
-								cover: 'https://shuhi.oss-cn-qingdao.aliyuncs.com/20241206/08ea280b-8627-4525-9e31-ed25cdce9094.jpg'
-							}
-						]
-					},
-					{
-						orderNo: '54631435443',
-						status: 'pending_audit',
-						submitTime: '2024-12-06 13:45:00',
-						books: [{
-								cover: 'https://shuhi.oss-cn-qingdao.aliyuncs.com/20241206/08ea280b-8627-4525-9e31-ed25cdce9094.jpg'
-							},
-							{
-								cover: 'https://shuhi.oss-cn-qingdao.aliyuncs.com/20241206/08ea280b-8627-4525-9e31-ed25cdce9094.jpg'
-							},
-							{
-								cover: 'https://shuhi.oss-cn-qingdao.aliyuncs.com/20241206/08ea280b-8627-4525-9e31-ed25cdce9094.jpg'
-							},
-							{
-								cover: 'https://shuhi.oss-cn-qingdao.aliyuncs.com/20241206/08ea280b-8627-4525-9e31-ed25cdce9094.jpg'
-							},
-							{
-								cover: 'https://shuhi.oss-cn-qingdao.aliyuncs.com/20241206/08ea280b-8627-4525-9e31-ed25cdce9094.jpg'
-							},
-							{
-								cover: 'https://shuhi.oss-cn-qingdao.aliyuncs.com/20241206/08ea280b-8627-4525-9e31-ed25cdce9094.jpg'
-							}
-						]
-					}
-				]
+        handleTabChange(index) {
+            this.currentTab = index
+            this.page = 1
+            this.loadOrders(true)
+        },
 
-				this.orderList = [...this.orderList, ...mockData]
-				this.hasMore = mockData.length === this.pageSize
-			},
-			loadMore() {
-				if (!this.hasMore) return
-				this.page++
-				this.loadOrders()
-			},
-			async onRefresh() {
-				this.isRefreshing = true
-				this.page = 1
-				this.orderList = []
-				await this.loadOrders()
-				this.isRefreshing = false
-			},
-			// 订单操作方法
-			handleCancel(order) {
-				uni.showModal({
-					title: '提示',
-					content: '确定要取消该订单吗？',
-					success: (res) => {
-						if (res.confirm) {
-							// 调用取消订单接口
-						}
-					}
-				})
-			},
-			handleReport(order) {
-				uni.navigateTo({
-					url: `/pages/order/report?orderNo=${order.orderNo}`
-				})
-			},
-			handleEditAddress(order) {
-				uni.navigateTo({
-					url: `/pages/order/address?orderNo=${order.orderNo}`
-				})
-			},
-			handleRemind(order) {
-				uni.showToast({
-					title: '已提醒审核',
-					icon: 'none'
-				})
-			}
-		}
-	}
+        handleUpdateList(list) {
+            this.orderList = list.map(item => {
+                return {
+                    orderNo: '54631435441',
+                    status: 'pending_review',
+                    submitTime: '2024-12-06 15:00:00',
+                    books: [{
+                        cover: 'https://shuhi.oss-cn-qingdao.aliyuncs.com/20241206/08ea280b-8627-4525-9e31-ed25cdce9094.jpg'
+                    },
+                    {
+                        cover: 'https://shuhi.oss-cn-qingdao.aliyuncs.com/20241206/08ea280b-8627-4525-9e31-ed25cdce9094.jpg'
+                    },
+                    {
+                        cover: 'https://shuhi.oss-cn-qingdao.aliyuncs.com/20241206/08ea280b-8627-4525-9e31-ed25cdce9094.jpg'
+                    },
+                    {
+                        cover: 'https://shuhi.oss-cn-qingdao.aliyuncs.com/20241206/08ea280b-8627-4525-9e31-ed25cdce9094.jpg'
+                    },
+                    {
+                        cover: 'https://shuhi.oss-cn-qingdao.aliyuncs.com/20241206/08ea280b-8627-4525-9e31-ed25cdce9094.jpg'
+                    },
+                    {
+                        cover: 'https://shuhi.oss-cn-qingdao.aliyuncs.com/20241206/08ea280b-8627-4525-9e31-ed25cdce9094.jpg'
+                    }
+                    ]
+                }
+            })
+        },
+        // 订单操作方法
+        handleCancel(order) {
+            uni.showModal({
+                title: '提示',
+                content: '确定要取消该订单吗？',
+                success: (res) => {
+                    if (res.confirm) {
+                        // 调用取消订单接口
+                    }
+                }
+            })
+        },
+        handleReport(order) {
+            uni.navigateTo({
+                url: `/pages/order/report?orderNo=${order.orderNo}`
+            })
+        },
+        handleEditAddress(order) {
+            uni.navigateTo({
+                url: `/pages/order/address?orderNo=${order.orderNo}`
+            })
+        },
+        handleRemind(order) {
+            uni.showToast({
+                title: '已提醒审核',
+                icon: 'none'
+            })
+        }
+    }
+}
 </script>
 
 <style lang="scss" scoped>
-	.order-page {
-		min-height: 100vh;
-		background-color: #F5F5F5;
-
-		.tabs-wrapper {
-			position: sticky;
-			top: 0;
-			z-index: 99;
-			background: #FFFFFF;
-		}
-
-		.order-scroll {
-			height: calc(100vh - 88rpx); // 减去navbar和tabs的高度
-			box-sizing: border-box;
-			padding: 20rpx;
-		}
-	}
+.order-page {
+    min-height: 100vh;
+    background-color: #F5F5F5;
 
-	// 修改tabs样式
-	:deep(.u-tabs__wrapper__nav__line) {
-		bottom: 10rpx;
-		height: 4rpx;
-		background: #38C148;
-	}
+    .tabs-wrapper {
+        position: sticky;
+        top: 0;
+        z-index: 99;
+        background: #FFFFFF;
+    }
+}
 </style>

pages.json

@@ -216,6 +216,24 @@
                         "navigationBarTitleText": "卖书订单详情"
                     }
                 },
+                {
+                    "path": "pages/apply-return",
+                    "style": {
+                        "navigationBarTitleText": "申请退回"
+                    }
+                },
+                {
+                    "path": "pages/apply",
+                    "style": {
+                        "navigationBarTitleText": "申请退回"
+                    }
+                },
+                {
+                    "path": "pages/complaint",
+                    "style": {
+                        "navigationBarTitleText": "投诉上报"
+                    }
+                },
                 {
                     "path": "pages/notice",
                     "style": {

pages/mine/index.vue

@@ -76,11 +76,11 @@ export default {
                 points: '3630'
             },
             orderTypes: [
-                { name: '待初审', icon: '1.png', path: '/pages/order/pending-review' },
-                { name: '待取件', icon: '2.png', path: '/pages/order/pending-pickup' },
-                { name: '待审核', icon: '3.png', path: '/pages/order/pending-audit' },
-                { name: '待到款', icon: '4.png', path: '/pages/order/pending-payment' },
-                { name: '申请退回', icon: '5.png', path: '/pages/order/return-request' }
+                { name: '待初审', icon: '1.png', path: '/pages-mine/pages/order-page?status=1' },
+                { name: '待取件', icon: '2.png', path: '/pages-mine/pages/order-page?status=2' },
+                { name: '待审核', icon: '3.png', path: '/pages-mine/pages/order-page?status=3' },
+                { name: '待到款', icon: '4.png', path: '/pages-mine/pages/order-page?status=4' },
+                { name: '申请退回', icon: '5.png', path: '/pages-mine/pages/apply-return' }
             ],
             tools: [
                 { name: '消息通知', icon: 't1.png', path: '/pages-mine/pages/notice' },

static/css/common.scss

@@ -234,7 +234,7 @@ view {
     }
 
     .font-#{20 + $i * 2} {
-        font-size: #{22 + $i * 2}rpx;
+        font-size: #{22 + $i * 2}rpx !important;
     }
 }
 
@@ -339,9 +339,9 @@ view {
 }
 
 .common-card {
-    padding: 14px 12px 21px;
+    padding: 26rpx 30rpx;
     background: #FFFFFF;
-    border-radius: 10px;
+    border-radius: 10rpx;
     opacity: 1;
 }
 
@@ -417,11 +417,11 @@ view {
     background-color: #ffffff;
     width: 100%;
     position: fixed;
-    bottom: env(safe-area-inset-bottom);
+    bottom: 0;
     left: 0;
     right: 0;
-    display: flex;
-    align-items: center;
+    padding-bottom: calc(16rpx + constant(safe-area-inset-bottom));
+    padding-bottom: calc(16rpx + env(safe-area-inset-bottom));
 
     button {
         width: 100%;