baodeng_xcx/page_user/diandanjilu.vue

        <template>
        	<view class="container">
        		<!-- 订单卡片容器 -->
        		<u-navbar title="点单记录" :border-bottom="false" :background="bgc" back-icon-color="#fff"
        			title-color='#fff' title-size='36' height='36' id="navbar">
        		</u-navbar>
        		<scroll-view class="list" @scrolltolower="handqixing" scroll-y refresher-enabled
        			@refresherrefresh="onRefresh" :refresher-triggered="isRefreshing" refresher-default-style="white">
        			<view class="order-container" v-for="(order, index) in orders" :key="index" @click="btnxq(order.orderNo)">
        				<view class="order-content">
        					<view class="header-group">
        						<text class="bar-title">{{ order.storeName == null ? '--' : order.storeName }}</text>
        						<text class="status-tag" v-if="order.status == 'WAIT_DELIVERY'">待配送</text>
								<text class="status-tag" v-if="order.status == 'WAIT_PAY'">待支付</text>
								<text class="status-tag" v-if="order.status == 'FINISHED'">已结束</text>
								<text class="status-tag" v-if="order.status == 'CANCELED'">已取消</text>
								<text class="status-tag" v-if="order.status == 'REFUNDED'">已退款</text>
        					</view>
        					<view class="main-row">
        						<view class="goods-imgs">
        							<view v-for="(sku, idx) in order.goodsOrderSkuVOList" :key="idx" class="goods-img">
        								<image v-if="sku.picture" :src="sku.picture" mode="aspectFill" class="goods-image"></image>
        								<view v-else class="goods-placeholder"></view>
        							</view>
        						</view>
        						<view class="info-col">
        							<view class="info-group">
        								<text class="time-text">{{ order.createTime }}</text>
        								<text class="goods-text">共{{ getTotalQuantity(order.goodsOrderSkuVOList) }}件商品</text>
        							</view>
        							<text class="amount-text">合计：￥{{ order.payAmount }}</text>
        						</view>
        					</view>
        				</view>
        			</view>
					<view class="" style="width: 100%;text-align: center;margin-top: 50rpx;color: #ccc;">
						当前没有更多点单记录咯...
					</view>
        		</scroll-view>
        	</view>
        </template>
        <script>
        	export default {
        		data() {
        			return {
        				orders: [],
        				total: '',
        				pageNum: 1,
        				isRefreshing: false,
						bgc: {
							backgroundColor: "#000000",
						},
        			}
        		},
        		onLoad() {
                   this.getlist()
        		},
        		methods: {
					// 点击跳转到详情
					btnxq(orderNo){
						uni.navigateTo({
							url:'/page_user/diandanxq?no=' + orderNo
						})
					},
					// 请求订单记录列表
					getlist(){
						this.$u.get(`/app/goodsOrder/list?pageNum=${this.pageNum}&pageSize=20&orderByColumn=createTime&isAsc=desc`).then(res =>{
							 if(res.code == 200){
								 this.total = res.total
								 if(this.pageNum == 1){
									 this.orders = res.rows
									 this.pageNum++
								 }else{
									 this.orders = this.orders.concat(res.rows)
									 this.pageNum++
								 }
							 }else if(res.code == 401){
								 uni.showModal({
								   title: '提示',
								   content: '你还未登录，是否去登录？', 
								   success: function (res) {
								     if (res.confirm) {
								       console.log('用户点击确定')
								 	  uni.reLaunch({
								 	  	url:'/pages/login/login'
								 	  })
								     } else if (res.cancel) {
								       console.log('用户点击取消')
								     }
								   }
								 })
							 }
						})
					},
        			// 下拉刷新
        			onRefresh() {
        				this.isRefreshing = true
        				this.pageNum = 1
						this.getlist()
        				setTimeout(() => {
        					this.isRefreshing = false
        				}, 1000)
        			},
        			// 上拉加载更多
        			handqixing() {
        				if (this.total > this.orders.length) {
                            this.getlist()
        				} else {
        					console.log(11);
        				}
        			},
					getTotalQuantity(goodsOrderSkuVOList) {
						return goodsOrderSkuVOList.reduce((total, sku) => total + sku.number, 0);
					},
        		}
        	}
        </script>

        <style scoped>
        	.list {
        		height: 90vh;
        		overflow: scroll;
				margin-top: 30rpx;
				padding-bottom: 100rpx;
				box-sizing: border-box;
        	}

        	.container {
        		background: #000000;
        		padding: 24rpx;
				height: 100vh;
				overflow: hidden;
        	}

        	.order-container {
        		margin-bottom: 32rpx;
        	}

        	.order-content {
        		background: #1A1A1A;
        		padding:20rpx;
        		/* border-radius: 16rpx; */
        		position: relative;
        		overflow: hidden;
        	}

        	.header-group {
        		display: flex;
        		justify-content: space-between;
        		align-items: center;
        		margin-bottom: 20rpx;
        	}

        	.bar-title {
        		font-size: 36rpx;
        		font-weight: 600;
        		color: #FFFFFF;
        	}

        	.status-tag {
        		font-size: 24rpx;
        		padding: 8rpx 20rpx;
        		border-radius: 32rpx;
				font-size: 28rpx;
				color: #FF8998;
        	}

        	.status-tag.completed {
        		font-size: 28rpx;
        		color: #FF8998;
        	}

        	.main-row {
        		flex-direction: row;
        		align-items: flex-start;
        		justify-content: flex-start;
        		margin-top: 12rpx;
        	}

        	.goods-imgs {
        		display: flex;
        		flex-direction: row;
        		flex-wrap: wrap;
        		gap: 16rpx;
        	}

        	.goods-img {
        		width: 148rpx;
        		height: 148rpx;
        		background: #D8D8D8;
        		border-radius: 8rpx;
        	}

        	.goods-image {
        		width: 100%;
        		height: 100%;
        		border-radius: 8rpx;
        	}

        	.goods-placeholder {
        		width: 100%;
        		height: 100%;
        		background: #D8D8D8;
        		border-radius: 8rpx;
        	}

        	.info-col {
        		flex: 1;
        		display: flex;
        		align-items: center;
        		justify-content: space-between;
        		margin-top: 20rpx;
        	}

        	.info-group {
        		display: flex;
        		align-items: center;
        	}

        	.time-text {
        		display: block;
        		font-size: 24rpx;
        		color: #999999;
        		margin-right: 10rpx;
        	}

        	.goods-text {
        		font-size: 28rpx;
        		color: #CCCCCC;
        	}

        	.amount-text {
        		font-size: 32rpx;
        		font-weight: 500;
        		color: #FFFFFF;
        	}
        </style>