代码优化&接口对接

pages-mine/components/city-picker - 副本.vue

@@ -1,241 +0,0 @@
-<template>
-	<u-popup
-		v-model="value"
-		mode="bottom"
-		:popup="false"
-		:mask="true"
-		:closeable="true"
-		:safe-area-inset-bottom="true"
-		close-icon-color="#ffffff"
-		:z-index="uZIndex"
-		:maskCloseAble="maskCloseAble"
-		@close="close"
-	>
-		<u-tabs v-if="value" :list="genTabsList" :is-scroll="true" :current="tabsIndex" @change="tabsChange" ref="tabs"></u-tabs>
-		<view class="area-box">
-			<view class="u-flex" :class="{ change: isChange }">
-				<view class="area-item">
-					<view class="u-padding-10 u-bg-gray" style="height: 100%;">
-						<scroll-view :scroll-y="true" style="height: 100%">
-							<u-cell-group>
-								<u-cell-item v-for="(item, index) in provinces" :title="item.label" :arrow="false" :index="index" :key="index" @click="provinceChange">
-									<u-icon v-if="isChooseP && province === index" slot="right-icon" size="34" name="checkbox-mark"></u-icon>
-								</u-cell-item>
-							</u-cell-group>
-						</scroll-view>
-					</view>
-				</view>
-				<view class="area-item">
-					<view class="u-padding-10 u-bg-gray" style="height: 100%;">
-						<scroll-view :scroll-y="true" style="height: 100%">
-							<u-cell-group v-if="isChooseP">
-								<u-cell-item v-for="(item, index) in citys" :title="item.label" :arrow="false" :index="index" :key="index" @click="cityChange">
-									<u-icon v-if="isChooseC && city === index" slot="right-icon" size="34" name="checkbox-mark"></u-icon>
-								</u-cell-item>
-							</u-cell-group>
-						</scroll-view>
-					</view>
-				</view>
-
-				<view class="area-item">
-					<view class="u-padding-10 u-bg-gray" style="height: 100%;">
-						<scroll-view :scroll-y="true" style="height: 100%">
-							<u-cell-group v-if="isChooseC">
-								<u-cell-item v-for="(item, index) in areas" :title="item.label" :arrow="false" :index="index" :key="index" @click="areaChange">
-									<u-icon v-if="isChooseA && area === index" slot="right-icon" size="34" name="checkbox-mark"></u-icon>
-								</u-cell-item>
-							</u-cell-group>
-						</scroll-view>
-					</view>
-				</view>
-			</view>
-		</view>
-	</u-popup>
-</template>
-
-<script>
-import provinces from 'uview-ui/libs/util/province.js';
-import citys from 'uview-ui/libs/util/city.js';
-import areas from 'uview-ui/libs/util/area.js';
-export default {
-	name: 'city-picker',
-	props: {
-		// 通过双向绑定控制组件的弹出与收起
-		value: {
-			type: Boolean,
-			default: false
-		},
-		// 默认显示的地区，可传类似["河北省", "秦皇岛市", "北戴河区"]
-		defaultRegion: {
-			type: Array,
-			default() {
-				return [];
-			}
-		},
-		// 默认显示地区的编码，defaultRegion和areaCode同时存在，areaCode优先，可传类似["13", "1303", "130304"]
-		areaCode: {
-			type: Array,
-			default() {
-				return [];
-			}
-		},
-		// 是否允许通过点击遮罩关闭Picker
-		maskCloseAble: {
-			type: Boolean,
-			default: true
-		},
-		// 弹出的z-index值
-		zIndex: {
-			type: [String, Number],
-			default: 0
-		}
-	},
-	data() {
-		return {
-			regionList:[],
-			cityValue: '',
-			isChooseP: false, //是否已经选择了省
-			province: 0, //省级下标
-			provinces: provinces,
-			isChooseC: false, //是否已经选择了市
-			city: 0, //市级下标
-			citys: citys[0],
-			isChooseA: false, //是否已经选择了区
-			area: 0, //区级下标
-			areas: areas[0][0],
-			tabsIndex: 0
-		};
-	},
-	mounted() {
-		this.getRegionList();
-		this.init();
-	},
-	computed: {
-		isChange() {
-			return this.tabsIndex > 1;
-		},
-		genTabsList() {
-			let tabsList = [
-				{
-					name: '请选择'
-				}
-			];
-			if (this.isChooseP) {
-				tabsList[0]['name'] = this.provinces[this.province]['label'];
-				tabsList[1] = {
-					name: '请选择'
-				};
-			}
-			if (this.isChooseC) {
-				tabsList[1]['name'] = this.citys[this.city]['label'];
-				tabsList[2] = {
-					name: '请选择'
-				};
-			}
-			if (this.isChooseA) {
-				tabsList[2]['name'] = this.areas[this.area]['label'];
-			}
-			return tabsList;
-		},
-		uZIndex() {
-			// 如果用户有传递z-index值，优先使用
-			return this.zIndex ? this.zIndex : this.$u.zIndex.popup;
-		}
-	},
-	methods: {		
-		getRegionList(){
-			this.$u.api.getRegionListAjax().then(({code,data})=>{
-				if(code==1){
-					this.regionList = true;
-				}
-			})
-		},
-		init() {
-			if (this.areaCode.length == 3) {
-				this.setProvince('', this.areaCode[0]);
-				this.setCity('', this.areaCode[1]);
-				this.setArea('', this.areaCode[2]);
-			} else if (this.defaultRegion.length == 3) {
-				this.setProvince(this.defaultRegion[0], '');
-				this.setCity(this.defaultRegion[1], '');
-				this.setArea(this.defaultRegion[2], '');
-			}
-		},
-		setProvince(label = '', value = '') {
-			this.provinces.map((v, k) => {
-				if (value ? v.value == value : v.label == label) {
-					this.provinceChange(k);
-				}
-			});
-		},
-		setCity(label = '', value = '') {
-			this.citys.map((v, k) => {
-				if (value ? v.value == value : v.label == label) {
-					this.cityChange(k);
-				}
-			});
-		},
-		setArea(label = '', value = '') {
-			this.areas.map((v, k) => {
-				if (value ? v.value == value : v.label == label) {
-					this.isChooseA = true;
-					this.area = k;
-				}
-			});
-		},
-		close() {
-			this.$emit('input', false);
-		},
-		tabsChange(index) {
-			this.tabsIndex = index;
-		},
-		provinceChange(index) {
-			this.isChooseP = true;
-			this.isChooseC = false;
-			this.isChooseA = false;
-			this.province = index;
-			this.citys = citys[index];
-			this.tabsIndex = 1;
-		},
-		cityChange(index) {
-			this.isChooseC = true;
-			this.isChooseA = false;
-			this.city = index;
-			this.areas = areas[this.province][index];
-			this.tabsIndex = 2;
-		},
-		areaChange(index) {
-			this.isChooseA = true;
-			this.area = index;
-			let result = {};
-			result.province = this.provinces[this.province];
-			result.city = this.citys[this.city];
-			result.area = this.areas[this.area];
-			this.$emit('city-change', result);
-			this.close();
-		},
-	}
-};
-</script>
-<style lang="scss" scoped>
-.area-box {
-	width: 100%;
-	overflow: hidden;
-	height: 800rpx;
-
-	> view {
-		width: 150%;
-		transition: transform 0.3s ease-in-out 0s;
-		transform: translateX(0);
-
-		&.change {
-			transform: translateX(-33.3333333%);
-		}
-	}
-
-	.area-item {
-		width: 33.3333333%;
-		height: 800rpx;
-	}
-}
-</style>

pages-mine/components/order-item.vue

@@ -0,0 +1,137 @@
+<template>
+    <view class="order-item" @click="goToDetail">
+        <!-- 订单头部 -->
+        <view class="order-header">
+            <text class="common-text-2">卖书编号：{{ order.orderNo }}</text>
+            <text class="order-status" :style="{ color: statusColorMap[order.status] }">{{ statusTextMap[order.status]
+                }}</text>
+        </view>
+
+        <!-- 书籍列表 - 改为横向滚动 -->
+        <scroll-view scroll-x class="book-scroll" :show-scrollbar="false" enhanced>
+            <view class="book-list">
+                <image v-for="(book, index) in order.books" :key="index" :src="book.cover" class="book-cover"
+                    mode="aspectFill" />
+            </view>
+        </scroll-view>
+
+        <!-- 订单信息 -->
+        <view class="flex-a flex-j-b">
+            <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">
+            <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>
+    </view>
+</template>
+
+<script>
+export default {
+    name: 'order-item',
+    props: {
+        order: {
+            type: Object,
+            required: true
+        }
+    },
+    data() {
+        return {
+            statusTextMap: {
+                'pending_review': '待初审',
+                'cancelled': '已取消',
+                'pending_audit': '待审核',
+            },
+            statusColorMap: {
+                'pending_review': '#FF5B5B',
+                'cancelled': '#999999',
+                'pending_audit': '#FF5B5B',
+            },
+            customStyle: {
+                height: '60rpx',
+                borderRadius: '10rpx',
+                width: '170rpx',
+                fontSize: '28rpx',
+            }
+        }
+    },
+    methods: {
+        getActions(status) {
+            const actionMap = {
+                'pending_review': [
+                    { text: '取消交易', type: 'info', plain: true, action: 'cancel' },
+                    { text: '投诉上报', type: 'primary', plain: true, action: 'report' },
+                    { text: '修改地址', type: 'primary', plain: false, action: 'editAddress' }
+                ],
+                'pending_audit': [
+                    { text: '提醒审核', type: 'primary', plain: false, action: 'remind' }
+                ]
+            }
+            return actionMap[status] || []
+        },
+        goToDetail() {
+            uni.navigateTo({
+                url: `/pages/order/detail?id=${this.order.orderNo}`
+            })
+        },
+        handleAction(action) {
+            this.$emit(action, this.order)
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.order-item {
+    background: #FFFFFF;
+    border-radius: 12rpx;
+    padding: 30rpx;
+    margin-bottom: 20rpx;
+
+    .order-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .order-status {
+            font-size: 28rpx;
+        }
+    }
+
+    // 修改图片滚动区域样式
+    .book-scroll {
+        width: 100%;
+        white-space: nowrap;
+        margin: 30rpx 0 20rpx 0;
+
+        .book-list {
+            display: inline-flex;
+            padding-right: 20rpx; // 为最后一张图片添加右边距
+            gap: 20rpx;
+            .book-cover {
+                width: 132rpx;
+                height: 185rpx;
+                border-radius: 10rpx;
+                flex-shrink: 0; // 防止图片被压缩
+            }
+        }
+    }
+
+    .order-actions {
+        display: flex;
+        justify-content: flex-end;
+        gap: 12rpx;
+        margin-top: 30rpx;
+    }
+}
+
+// 隐藏滚动条
+::-webkit-scrollbar {
+    display: none;
+    width: 0;
+    height: 0;
+    color: transparent;
+}
+</style>

pages-mine/pages/address/add-or-update.vue

@@ -1,141 +1,128 @@
 <template>
-	<view class="page">
-		<view class="form">
-			<u-form :model="form" ref="form" label-width="180rpx">
-				<u-form-item label="收货人">
-					<u-input v-model="form.name" placeholder="请输入收货人姓名" />
-				</u-form-item>
-				<u-form-item label="联系方式">
-					<u-input v-model="form.mobile" placeholder="请输入联系方式" />
-				</u-form-item>
-				<u-form-item label="所在地区">
-					<uni-data-picker v-model="selAddressCodes" :localdata="dataList" placeholder="请选择所在地区"
-						popup-title="请选择所在地区" @change="cityChange"></uni-data-picker>
-				</u-form-item>
-				<u-form-item label="详细地址">
-					<u-input v-model="form.detailAddress" placeholder="请输入详细地址" />
-				</u-form-item>
-				<u-form-item :border-bottom="false" label="设为默认地址">
-					<u-switch slot="right" v-model="form.defaultFlag" :active-value="1" :inactive-value="0"
-						:active-color="appThemeColor"></u-switch>
-				</u-form-item>
-			</u-form>
-		</view>
-		<view class="btn">
-			<u-button type="primary" shape="circle" @click="submit">
-				<u-icon name="plus"></u-icon>
-				<text>保存地址</text>
-			</u-button>
-		</view>
-	</view>
+    <view class="page">
+        <view class="form">
+            <u-form :model="form" ref="form" label-width="180rpx">
+                <u-form-item label="收货人">
+                    <u-input v-model="form.name" placeholder="请输入收货人姓名" />
+                </u-form-item>
+                <u-form-item label="联系方式">
+                    <u-input v-model="form.mobile" placeholder="请输入联系方式" />
+                </u-form-item>
+                <u-form-item label="所在地区">
+                    <uni-data-picker v-model="selAddressCodes" :localdata="dataList" placeholder="请选择所在地区"
+                        popup-title="请选择所在地区" @change="cityChange"></uni-data-picker>
+                </u-form-item>
+                <u-form-item label="详细地址">
+                    <u-input v-model="form.detailAddress" placeholder="请输入详细地址" />
+                </u-form-item>
+                <u-form-item :border-bottom="false" label="设为默认地址">
+                    <u-switch slot="right" v-model="form.defaultFlag" :active-value="1" :inactive-value="0"
+                        :active-color="appThemeColor"></u-switch>
+                </u-form-item>
+            </u-form>
+        </view>
+        <view class="btn">
+            <u-button type="primary" shape="circle" @click="submit">
+                <u-icon name="plus"></u-icon>
+                <text>保存地址</text>
+            </u-button>
+        </view>
+    </view>
 </template>
 
 <script>
-	import CityPicker from '@/pages-mine/components/city-picker.vue';
-	export default {
-		components: {
-			CityPicker
-		},
-		data() {
-			return {
-				// 标题
-				title: '收货地址',
-				appThemeColor: this.$appTheme.appThemeColor,
-				// 表单
-				form: {
-					id: null,
-					"provinceId": '',
-					"cityId": '',
-					"districtId": '',
-					"detailAddress": "",
-					"name": "",
-					"mobile": "",
-					"defaultFlag": 0
-				},
-				// 省市区
-				selAddressCodes: [],
-				dataList: [],
-			};
-		},
-		onLoad(ops) {
-			if (ops.id) {
-				this.form.id = ops.id;
-				this.form.type = 'edit';
-				this.title = '修改地址';
-				this.getAddressDetail(ops.id);
-			} else {
-				this.form.id = null;
-				this.form.type = 'add';
-				this.title = '新建地址';
-			}
-			uni.setNavigationBarTitle({
-				title: this.title
-			})
+import CityPicker from '@/pages-mine/components/city-picker.vue';
+export default {
+    components: {
+        CityPicker
+    },
+    data() {
+        return {
+            // 标题
+            title: '收货地址',
+            appThemeColor: this.$appTheme.appThemeColor,
+            // 表单
+            form: {
+                id: null,
+                "provinceId": '',
+                "cityId": '',
+                "districtId": '',
+                "detailAddress": "",
+                "name": "",
+                "mobile": "",
+                "defaultFlag": 0
+            },
+            // 省市区
+            selAddressCodes: [],
+            dataList: [],
+        };
+    },
+    onLoad(ops) {
+        if (ops.id) {
+            this.form.id = ops.id;
+            this.form.type = 'edit';
+            this.title = '修改地址';
+            this.getAddressDetail(ops.id);
+        } else {
+            this.form.id = null;
+            this.form.type = 'add';
+            this.title = '新建地址';
+        }
+        uni.setNavigationBarTitle({
+            title: this.title
+        })
 
-			uni.$u.http.get('/token/getAllDistrict').then(res => {
-				if (res.code == 200) {
-					this.dataList = res.data
-				}
-			})
-		},
-		methods: {
-			// 省市区选择回调
-			cityChange(e) {
-				let {
-					value
-				} = e.detail
-				if (!value.length) return
-				this.form.provinceId = value[0].value;
-				this.form.cityId = value[1].value
-				this.form.districtId = value[2].value || ''
-			},
+        uni.$u.http.get('/token/getAllDistrict').then(res => {
+            if (res.code == 200) {
+                this.dataList = res.data
+            }
+        })
+    },
+    methods: {
+        // 省市区选择回调
+        cityChange(e) {
+            let {
+                value
+            } = e.detail
+            if (!value.length) return
+            this.form.provinceId = value[0].value;
+            this.form.cityId = value[1].value
+            this.form.districtId = value[2].value || ''
+        },
 
-			// 提交表单
-			submit() {
-				uni.$u.http.post('/token/user/address/add', this.form).then(res => {
-					if (res.code == 200) {
-						uni.showToast('保存成功');
-						uni.navigateBack();
-					}
-				})
-			},
-			// 编辑
-			getAddressDetail(id) {
-				uni.showLoading();
-				this.$u.api.getAddressDetailAjax(id).then(({
-					code,
-					data
-				}) => {
-					uni.hideLoading();
-					if (code == 1) {
-						this.form = {
-							...this.form,
-							id: data.id,
-							name: data.name,
-							mobile: data.mobile,
-							provinceId: data.provinceId,
-							city: data.city,
-							area: data.area,
-							detailAddress: data.detailAddress,
-							addressCode: data.addressCode,
-							defaultFlag: data.defaultFlag,
-						};
-					}
-				}).catch(() => {
-					uni.hideLoading();
-				})
-			},
-		}
-	};
+        // 提交表单
+        submit() {
+            uni.$u.http.post('/token/user/address/add', this.form).then(res => {
+                if (res.code == 200) {
+                    uni.showToast('保存成功');
+                    uni.navigateBack();
+                }
+            })
+        },
+        // 编辑
+        getAddressDetail(id) {
+            uni.showLoading();
+
+            uni.$u.http.get(`/token/user/address/getDetail/${id}`).then((res) => {
+                if (res.code == 200) {
+                    this.form = res.data;
+                    this.selAddressCodes = [res.data.provinceId, res.data.cityId, res.data.districtId]
+                }
+            }).finally(() => {
+                uni.hideLoading();
+            })
+        },
+    }
+};
 </script>
 
 <style lang="scss" scoped>
-	.form {
-		background-color: $app-theme-bg-color;
-		padding: 30rpx;
-	}
+.form {
+    background-color: $app-theme-bg-color;
+    padding: 30rpx;
+}
 
-	.btn {
-		padding: 60rpx 30rpx;
-	}
+.btn {
+    padding: 60rpx 30rpx;
+}
 </style>

pages-mine/pages/order-page.vue

@@ -0,0 +1,221 @@
+<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>
+
+		<!-- 订单列表 -->
+		<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>
+</template>
+
+<script>
+	import OrderItem from '../components/order-item.vue'
+
+	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'
+							}
+						]
+					}
+				]
+
+				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'
+				})
+			}
+		}
+	}
+</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;
+		}
+	}
+
+	// 修改tabs样式
+	:deep(.u-tabs__wrapper__nav__line) {
+		bottom: 10rpx;
+		height: 4rpx;
+		background: #38C148;
+	}
+</style>

pages.json

@@ -41,7 +41,7 @@
 			"path": "pages/mine/index",
 			"style": {
 				"navigationBarTitleText": "我的",
-				"navigationBarBackgroundColor": "#22ac38",
+				"navigationBarBackgroundColor": "#38C148",
 				"navigationBarTextStyle": "white"
 			}
 		},
@@ -232,6 +232,12 @@
 				"style": {
 					"navigationBarTitleText": "投诉/建议"
 				}
+			},
+			{
+				"path": "pages/order-page",
+				"style": {
+					"navigationBarTitleText": "卖书订单"
+				}
 			}
 		]
 	}, {

pages/mine/index.vue

@@ -1,160 +1,295 @@
 <template>
-	<view class="minepage">
-		<!-- 用户 -->
-		<UserInfo :data="userInfo" :isLogin="token"></UserInfo>
-		<!-- 用户数据 -->
-		<!-- <view class="user-count"><LabelCount :ops="mineCountOps"></LabelCount></view> -->
-		<!-- 我的订单 -->
-		<view class="order-nav">
-			<DialNav :mode="5" shadow :list="orderNavOps" nameSize="24rpx" imgSize="72rpx">
-				<TitleOperate
-					padding="30rpx 30rpx 0 30rpx"
-					showMore
-					title="我的订单"
-					moreLabel="全部订单"
-					@clickMore="$u.route({ url: '/pages-mall/pages/order/list' })"
-				></TitleOperate>
-			</DialNav>
-		</view>
-		
-	
-		<view class="oparbox shadow">
-			<!-- <view class="oparTit">
-				常用工具
-			</view> -->
-			<!--  title="常用工具" -->
-			<u-cell-group :border="false">
-				<u-cell-item icon="star" title="我的收藏" :border-bottom="false" @click="goUrl('/pages-mine/pages/collection')"></u-cell-item>
-				<u-cell-item icon="clock" title="我的足迹" :border-bottom="false" @click="goUrl('/pages-mine/pages/history')"></u-cell-item>
-				<u-cell-item icon="coupon" title="我的优惠券" :border-bottom="false" @click="goUrl('/pages-mine/pages/discounts')"></u-cell-item>
-				<u-cell-item icon="map" title="地址管理" :border-bottom="false" @click="goUrl('/pages-mine/pages/address/list')"></u-cell-item>
-			</u-cell-group>
-		</view>
-		<view class="oparbox shadow">
-			<!-- <view class="oparTit">
-				常用工具
-			</view> -->
-			<!--  title="常用工具" -->
-			<u-cell-group :border="false">
-				<u-cell-item icon="info-circle" title="关于我们" :border-bottom="false" @click="goArticleDetail('about_us','关于我们')"></u-cell-item>
-				<u-cell-item icon="error-circle" title="投诉/建议" :border-bottom="false" @click="goUrl('/pages-mine/pages/feedback')"></u-cell-item>
-				<u-cell-item icon="setting" title="设置中心" :border-bottom="false" @click="goUrl('/pages-mine/pages/setting')"></u-cell-item>
-			</u-cell-group>
-		</view>
-		<!-- <view class="loginBox">
-			<u-button type="primary" shape="circle" @click="logout"><text>退出登录</text></u-button>
-		</view> -->
-	</view>
+    <view class="mine-page">
+        <!-- 顶部用户信息 -->
+        <view class="user-info">
+            <view class="user-header">
+                <view class="user-avatar">
+                    <image class="avatar" :src="userInfo.avatar || '/static/img/logo3.png'" mode="aspectFill"></image>
+                </view>
+                <view class="user-detail">
+                    <view class="nickname">{{ userInfo.nickname }}</view>
+                    <view class="user-tag">{{ userInfo.tag }}</view>
+                </view>
+            </view>
+
+            <!-- 用户数据 -->
+            <view class="user-data">
+                <view class="data-item">
+                    <view class="amount">{{ userInfo.balance }}</view>
+                    <view class="label">我的钱包</view>
+                </view>
+                <view class="data-item">
+                    <view class="amount">{{ userInfo.couponCount }}</view>
+                    <view class="label">优惠券</view>
+                    <view class="badge" v-if="userInfo.availableCoupons">{{ userInfo.availableCoupons }}张可领</view>
+                </view>
+                <view class="data-item">
+                    <view class="amount">{{ userInfo.points }}</view>
+                    <view class="label">我的积分</view>
+                </view>
+            </view>
+        </view>
+
+        <!-- 卖书订 -->
+        <view class="order-section">
+            <view class="section-header">
+                <text>卖书订单</text>
+                <view class="view-all" @click="viewAllOrders">
+                    <text>查看全部</text>
+                    <u-icon name="arrow-right" size="24" color="#999"></u-icon>
+                </view>
+            </view>
+            <view class="order-types" style="padding: 0 20rpx;">
+                <view class="type-item flex-d flex-a-c" v-for="(item, index) in orderTypes" :key="index"
+                    @click="navigateToOrder(item.path)">
+                    <image class="type-icon" :src="'/pages-mine/static/' + item.icon" mode="aspectFit"></image>
+                    <text>{{ item.name }}</text>
+                </view>
+            </view>
+        </view>
+
+        <!-- 实用工具 -->
+        <view class="tools-section">
+            <view class="section-title">实用工具</view>
+            <view class="tools-grid">
+                <view class="tool-item flex-d flex-a-c" v-for="(tool, index) in tools" :key="index"
+                    @click="navigateToTool(tool.path)">
+                    <image class="tool-icon" :src="'/pages-mine/static/' + tool.icon" mode="aspectFit"></image>
+                    <text>{{ tool.name }}</text>
+                </view>
+            </view>
+        </view>
+    </view>
 </template>
 
 <script>
-import UserInfo from '@/pages/mine/components/user-info.vue';
-import LabelCount from '@/components/nav/label-count.vue';
-import DialNav from '@/components/nav/dial-nav.vue';
-import TitleOperate from '@/components/title-operate.vue';
-import {articleOpar} from '@/pages-pub/mixins/article.js'
 export default {
-	mixins:[articleOpar],
-	components: {
-		UserInfo,
-		LabelCount,
-		DialNav,
-		TitleOperate
-	},
-	data() {
-		return {
-			token:'',
-			isLogin:false,
-			// 用户信息
-			userInfo: {
-				nickname: '',
-				avatar: ''
-			},
-			// 订单导航配置
-			orderNavOps: [
-				{ name: '待付款', img: require('../../static/nav/mine-order-1.png'), url: '/pages-mall/pages/order/list?tabIndex=1' },
-				{ name: '待发货', img: require('../../static/nav/mine-order-2.png'), url: '/pages-mall/pages/order/list?tabIndex=2' },
-				{ name: '待收货', img: require('../../static/nav/mine-order-3.png'), url: '/pages-mall/pages/order/list?tabIndex=3' },
-				{ name: '已完成', img: require('../../static/nav/mine-order-4.png'), url: '/pages-mall/pages/order/list?tabIndex=4' },
-				{ name: '退款售后', img: require('../../static/nav/mine-order-5.png'), url: '/pages-mall/pages/after-sales/list' },
-			],
-		};
-	},
-	onShow() {
-		this.token = uni.getStorageSync('token');
-	},
-	onLoad(){
-		this.getUserInfo();
-		uni.$on('getUserInfo',()=>{
-			this.getUserInfo();
-		})
-	},
-	methods: {
-		getUserInfo(){
-			this.$u.api.getUserBaseInfoAjax().then(({code,data}) => {
-				console.log({code,data});
-				if(code==1){
-					this.userInfo = data;
-					// this.isLogin = true;
-				}
-			}).catch((error)=>{
-				console.log('error>>>>',error)
-			})
-		},
-		goUrl(url){
-			uni.navigateTo({
-				url:url
-			})
-		},
-		// 退出登录
-		logout() {
-			console.log(11)
-			uni.showModal({
-				title: '提示',
-				content: '是否退出当前账号？',
-				confirmColor: this.$appTheme.appThemeColor,
-				success(res) {
-					if (res.confirm) {
-						uni.removeStorageSync('token');
-						uni.navigateTo({
-							url:'/pages/login/index'
-						})
-					}
-				}
-			});
-		},
-	}
-};
+    data() {
+        return {
+            userInfo: {
+                avatar: '',
+                nickname: '这里是微信昵称.',
+                tag: '合伙人',
+                balance: '26.00',
+                couponCount: '66',
+                availableCoupons: '99',
+                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' }
+            ],
+            tools: [
+                { name: '消息通知', icon: 't1.png', path: '/pages/tools/notification' },
+                { name: '我的收藏', icon: 't2.png', path: '/pages/tools/collection' },
+                { name: '我的足迹', icon: 't3.png', path: '/pages/tools/footprint' },
+                { name: '我的地址', icon: 't4.png', path: '/pages/tools/address' },
+                { name: '我的优惠券', icon: 't5.png', path: '/pages/tools/coupon' },
+                { name: '联系客服', icon: 't6.png', path: '/pages/tools/service' },
+                { name: '意见反馈', icon: 't7.png', path: '/pages/tools/feedback' },
+                { name: '到货提醒', icon: 't8.png', path: '/pages/tools/arrival-notice' },
+                { name: '合伙人计划', icon: 't9.png', path: '/pages/tools/partner' },
+                { name: '买卖答疑', icon: 't10.png', path: '/pages/tools/faq' },
+                { name: '关于书嗨', icon: 't11.png', path: '/pages/tools/about' },
+                { name: '我的余额', icon: 't12.png', path: '/pages/tools/balance' },
+                { name: '用户设置', icon: 't13.png', path: '/pages/tools/settings' }
+            ]
+        }
+    },
+    methods: {
+        viewAllOrders() {
+            uni.navigateTo({
+                url: '/pages-mine/pages/order-page'
+            })
+        },
+        navigateToOrder(path) {
+            uni.navigateTo({
+                url: path
+            })
+        },
+        navigateToTool(path) {
+            uni.navigateTo({
+                url: path
+            })
+        }
+    }
+}
 </script>
 
 <style lang="scss" scoped>
-	.minepage{
-		padding-bottom: 20rpx;
-	}
-.order-nav{
-	margin-top: -70rpx;
-}
-.user-count,
-.order-nav,
-.other-nav {
-	position: relative;
-	z-index: $app-zIndex-normal;
-	padding: 0 30rpx 30rpx 30rpx;
-}
-.oparbox{
-	border-radius: 16rpx;
-	background-color: $app-theme-bg-color;
-	overflow: hidden;
-	margin: 0 30rpx 20rpx;
-	&.shadow {
-		box-shadow: $app-theme-shadow;
-	}
-	.oparTit{
-		padding: 30rpx 30rpx 20rpx;
-		font-size: 34rpx;
-	}
-}
-.loginBox {
-	padding: 60rpx;
+.mine-page {
+    min-height: 100vh;
+    background-color: #f5f5f5;
+
+    .user-info {
+        background-color: #38C148;
+        padding: 20rpx 50rpx 120rpx;
+        color: #fff;
+        position: relative;
+
+        &::after {
+            width: 140%;
+            position: absolute;
+            left: -20%;
+            top: 0;
+            z-index: -1;
+            content: '';
+            border-radius: 0 0 50% 50%;
+            background: #fd6954;
+        }
+
+        .user-header {
+            display: flex;
+            align-items: center;
+            margin-bottom: 40rpx;
+
+            .user-avatar {
+                border-radius: 50%;
+                margin-right: 20rpx;
+                border: 4rpx solid #fff;
+
+                .avatar {
+                    width: 120rpx;
+                    height: 120rpx;
+                }
+            }
+
+            .user-detail {
+                .nickname {
+                    font-size: 32rpx;
+                    font-weight: 500;
+                    margin-bottom: 8rpx;
+                }
+
+                .user-tag {
+                    display: inline-block;
+                    font-size: 22rpx;
+                    padding: 4rpx 12rpx;
+                    background: linear-gradient(-90deg, #272321, #4B4542);
+                    border-radius: 4rpx;
+                    margin-top: 8rpx;
+                }
+            }
+        }
+
+        .user-data {
+            display: flex;
+            justify-content: space-between;
+            position: relative;
+            z-index: 1;
+            padding: 0 40rpx;
+
+            .data-item {
+                position: relative;
+                text-align: center;
+
+                .amount {
+                    font-size: 38rpx;
+                    font-weight: 500;
+                    margin-bottom: 8rpx;
+                }
+
+                .label {
+                    font-size: 24rpx;
+                    font-weight: 400;
+                    opacity: 0.9;
+                }
+
+                .badge {
+                    position: absolute;
+                    top: -15rpx;
+                    right: -120%;
+                    padding: 0 10rpx;
+                    font-size: 20rpx;
+                    line-height: 30rpx;
+                    height: 30rpx;
+                    background: #FF8400;
+                    border-radius: 15rpx 15rpx 15rpx 0rpx;
+                }
+            }
+        }
+    }
+
+    .order-section {
+        margin: -80rpx 30rpx 20rpx;
+        background: #fff;
+        border-radius: 12rpx;
+        padding: 30rpx;
+        position: relative;
+        z-index: 2;
+
+        .section-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 30rpx;
+
+            .view-all {
+                display: flex;
+                align-items: center;
+                color: #999;
+                font-size: 26rpx;
+            }
+        }
+
+        .order-types {
+            display: flex;
+            justify-content: space-between;
+
+            .type-item {
+                text-align: center;
+
+                .type-icon {
+                    width: 60rpx;
+                    height: 60rpx;
+                    margin-bottom: 12rpx;
+                }
+
+                text {
+                    font-size: 24rpx;
+                    color: #333;
+                }
+            }
+        }
+    }
+
+    .tools-section {
+        margin: 30rpx;
+        background: #fff;
+        border-radius: 12rpx;
+        padding: 30rpx;
+        position: relative;
+        z-index: 2;
+
+        .section-title {
+            font-size: 30rpx;
+            font-weight: 500;
+            margin-bottom: 30rpx;
+        }
+
+        .tools-grid {
+            display: grid;
+            grid-template-columns: repeat(4, 1fr);
+            gap: 30rpx;
+
+            .tool-item {
+                text-align: center;
+
+                .tool-icon {
+                    width: 60rpx;
+                    height: 60rpx;
+                    margin-bottom: 12rpx;
+                }
+
+                text {
+                    font-size: 24rpx;
+                    color: #333;
+                }
+            }
+        }
+    }
 }
 </style>

pages/mine/index2.vue

@@ -0,0 +1,160 @@
+<template>
+	<view class="minepage">
+		<!-- 用户 -->
+		<UserInfo :data="userInfo" :isLogin="token"></UserInfo>
+		<!-- 用户数据 -->
+		<!-- <view class="user-count"><LabelCount :ops="mineCountOps"></LabelCount></view> -->
+		<!-- 我的订单 -->
+		<view class="order-nav">
+			<DialNav :mode="5" shadow :list="orderNavOps" nameSize="24rpx" imgSize="72rpx">
+				<TitleOperate
+					padding="30rpx 30rpx 0 30rpx"
+					showMore
+					title="我的订单"
+					moreLabel="全部订单"
+					@clickMore="$u.route({ url: '/pages-mall/pages/order/list' })"
+				></TitleOperate>
+			</DialNav>
+		</view>
+		
+	
+		<view class="oparbox shadow">
+			<!-- <view class="oparTit">
+				常用工具
+			</view> -->
+			<!--  title="常用工具" -->
+			<u-cell-group :border="false">
+				<u-cell-item icon="star" title="我的收藏" :border-bottom="false" @click="goUrl('/pages-mine/pages/collection')"></u-cell-item>
+				<u-cell-item icon="clock" title="我的足迹" :border-bottom="false" @click="goUrl('/pages-mine/pages/history')"></u-cell-item>
+				<u-cell-item icon="coupon" title="我的优惠券" :border-bottom="false" @click="goUrl('/pages-mine/pages/discounts')"></u-cell-item>
+				<u-cell-item icon="map" title="地址管理" :border-bottom="false" @click="goUrl('/pages-mine/pages/address/list')"></u-cell-item>
+			</u-cell-group>
+		</view>
+		<view class="oparbox shadow">
+			<!-- <view class="oparTit">
+				常用工具
+			</view> -->
+			<!--  title="常用工具" -->
+			<u-cell-group :border="false">
+				<u-cell-item icon="info-circle" title="关于我们" :border-bottom="false" @click="goArticleDetail('about_us','关于我们')"></u-cell-item>
+				<u-cell-item icon="error-circle" title="投诉/建议" :border-bottom="false" @click="goUrl('/pages-mine/pages/feedback')"></u-cell-item>
+				<u-cell-item icon="setting" title="设置中心" :border-bottom="false" @click="goUrl('/pages-mine/pages/setting')"></u-cell-item>
+			</u-cell-group>
+		</view>
+		<!-- <view class="loginBox">
+			<u-button type="primary" shape="circle" @click="logout"><text>退出登录</text></u-button>
+		</view> -->
+	</view>
+</template>
+
+<script>
+import UserInfo from '@/pages/mine/components/user-info.vue';
+import LabelCount from '@/components/nav/label-count.vue';
+import DialNav from '@/components/nav/dial-nav.vue';
+import TitleOperate from '@/components/title-operate.vue';
+import {articleOpar} from '@/pages-pub/mixins/article.js'
+export default {
+	mixins:[articleOpar],
+	components: {
+		UserInfo,
+		LabelCount,
+		DialNav,
+		TitleOperate
+	},
+	data() {
+		return {
+			token:'',
+			isLogin:false,
+			// 用户信息
+			userInfo: {
+				nickname: '',
+				avatar: ''
+			},
+			// 订单导航配置
+			orderNavOps: [
+				{ name: '待付款', img: require('../../static/nav/mine-order-1.png'), url: '/pages-mall/pages/order/list?tabIndex=1' },
+				{ name: '待发货', img: require('../../static/nav/mine-order-2.png'), url: '/pages-mall/pages/order/list?tabIndex=2' },
+				{ name: '待收货', img: require('../../static/nav/mine-order-3.png'), url: '/pages-mall/pages/order/list?tabIndex=3' },
+				{ name: '已完成', img: require('../../static/nav/mine-order-4.png'), url: '/pages-mall/pages/order/list?tabIndex=4' },
+				{ name: '退款售后', img: require('../../static/nav/mine-order-5.png'), url: '/pages-mall/pages/after-sales/list' },
+			],
+		};
+	},
+	onShow() {
+		this.token = uni.getStorageSync('token');
+	},
+	onLoad(){
+		this.getUserInfo();
+		uni.$on('getUserInfo',()=>{
+			this.getUserInfo();
+		})
+	},
+	methods: {
+		getUserInfo(){
+			this.$u.api.getUserBaseInfoAjax().then(({code,data}) => {
+				console.log({code,data});
+				if(code==1){
+					this.userInfo = data;
+					// this.isLogin = true;
+				}
+			}).catch((error)=>{
+				console.log('error>>>>',error)
+			})
+		},
+		goUrl(url){
+			uni.navigateTo({
+				url:url
+			})
+		},
+		// 退出登录
+		logout() {
+			console.log(11)
+			uni.showModal({
+				title: '提示',
+				content: '是否退出当前账号？',
+				confirmColor: this.$appTheme.appThemeColor,
+				success(res) {
+					if (res.confirm) {
+						uni.removeStorageSync('token');
+						uni.navigateTo({
+							url:'/pages/login/index'
+						})
+					}
+				}
+			});
+		},
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+	.minepage{
+		padding-bottom: 20rpx;
+	}
+.order-nav{
+	margin-top: -70rpx;
+}
+.user-count,
+.order-nav,
+.other-nav {
+	position: relative;
+	z-index: $app-zIndex-normal;
+	padding: 0 30rpx 30rpx 30rpx;
+}
+.oparbox{
+	border-radius: 16rpx;
+	background-color: $app-theme-bg-color;
+	overflow: hidden;
+	margin: 0 30rpx 20rpx;
+	&.shadow {
+		box-shadow: $app-theme-shadow;
+	}
+	.oparTit{
+		padding: 30rpx 30rpx 20rpx;
+		font-size: 34rpx;
+	}
+}
+.loginBox {
+	padding: 60rpx;
+}
+</style>

unpackage/dist/dev/.sourcemap/mp-weixin/pages-mine/order-page.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["uni-app:///main.js"],"names":["wx","__webpack_require_UNI_MP_PLUGIN__","__webpack_require__","createPage","Page"],"mappings":";;;;;;;;;;;;;AAAA;AAGA;AACA;AAHA;AACAA,EAAE,CAACC,iCAAiC,GAAGC,mBAAmB;AAG1DC,UAAU,CAACC,kBAAI,CAAC,C","file":"pages-mine/order-page.js","sourcesContent":["import 'uni-pages';\n// @ts-ignore\nwx.__webpack_require_UNI_MP_PLUGIN__ = __webpack_require__;\nimport Vue from 'vue'\nimport Page from './pages-mine/order-page.vue'\ncreatePage(Page)"],"sourceRoot":""}