baodeng_xcx/page_shanghu/orderlist.vue

<template>
	<view class="page">
		<!-- 顶部导航栏 -->
		<u-navbar title="订单管理" :border-bottom="false" :background="bgc" :is-back="false" title-color='#fff'
			title-size='36' height='36' id="navbar">
		</u-navbar>
		<!-- 背景图片 -->
		<image src="https://api.ccttiot.com/smartmeter/img/static/uo5KnRUd2Lbmx6kqLD8y" class="bj" mode="widthFix"></image>
		
		<!-- 时间选择和搜索区域 -->
		<view class="search-section">
			<!-- <view class="time-range">
				<text class="label">时间范围</text>
				<view class="date-picker">
					<view class="date-box" @click="showStartDatePicker">{{startDate}}</view>
					<text class="divider">--</text>
					<view class="date-box" @click="showEndDatePicker">{{endDate}}</view>
				</view>
			</view> -->
			<view class="time">
				<view class="timewz">
					时间范围 
				</view>
				<view class="inptime">
					<view class="" @click="showTimePicker('start')">
						{{kstime}}
					</view> 
					--
			        <view class="" @click="showTimePicker('end')">
			        	{{jstime}}
			        </view> 					
				</view>
			</view>
			<u-picker mode="time" v-model="oneshow" :params="oneparams" @confirm="confirmone"></u-picker>
			<u-picker mode="time" v-model="twoshow" :params="twoparams" @confirm="confirmtwo"></u-picker>
			
			<view class="search-box">
				<u-search placeholder="订单编号" v-model="searchText" :show-action="false" bg-color="rgba(17, 17, 17, 0.8)" border-color="rgba(17, 17, 17, 0.8)" placeholder-color="#666" height="70" search-icon-color="#666" @input="searchOrder"></u-search>
			</view>
		</view>
		
		<!-- 订单类型切换 -->
		<view class="order-tabs">
			<view class="tab-item" :class="{active: currentType === 1}" @click="switchType(1)">
				<text>爆灯订单</text>
				<view class="active-line" v-if="currentType === 1"></view>
			</view>
			<view class="tab-item" :class="{active: currentType === 2}" @click="switchType(2)">
				<text>赠礼订单</text>
				<view class="active-line" v-if="currentType === 2"></view>
			</view>
			<view class="tab-item" :class="{active: currentType === 3}" @click="switchType(3)">
				<text>免费订单</text>
				<view class="active-line" v-if="currentType === 3"></view>
			</view>
		</view>
		
		<!-- 订单列表 refresher-enabled :refresher-triggered="isRefreshing" @refresherrefresh="onRefresh"-->
		<scroll-view scroll-y class="order-list" @scrolltolower="loadMoreOrders" refresher-enabled @refresherrefresh="onRefresh" :refresher-triggered="isRefreshing" refresher-default-style="white">
			<view>
				<view class="order-item" v-for="(item, index) in orderList" :key="index" @click="goOrderDetail(item)">
					<view class="order-header">
						<text class="order-num">订单编号：{{item.orderNo}}</text>
						<text class="order-status" v-if="item.status == 'CANCELED'" :class="{'canceled': item.status == 'CANCELED'}">已取消</text>
						<text class="order-status" v-if="item.status == 'FINISHED'" :class="{'canceled': item.status == 'CANCELED'}">已完成</text>
						<text class="order-status" v-if="item.status == 'WAIT_PAY'" :class="{'canceled': item.status == 'CANCELED'}">待支付</text>
						<text class="order-status" v-if="item.status == 'REFUNDED'" :class="{'canceled': item.status == 'CANCELED'}">已退款</text>
					</view>		
					<view class="order-content">
						<text class="shop-name">店铺名称：{{item.storeName == null ? '--' : item.storeName}}</text>
						<text class="light-times">爆灯次数：{{item.suitNum == null ? '--' : item.suitNum}}次</text>
						<text class="order-time">订单时间：{{item.createTime == null ? '--' : item.createTime}}</text>
					</view>
					<view class="order-footer">
						<text class="shop-name">订单金额：</text>
						<text class="price">¥{{item.payedAmount == null ? '0' : item.payedAmount}}</text>
					</view>
				</view>
				
				<!-- 加载更多 -->
				<!-- <view class="loading-more" v-if="hasMoreData">
					<text>加载中...</text>
				</view> -->
				<view class="no-more-data">
					<text>没有更多数据了...</text>
				</view>
			</view>
			
			<!-- 空状态 -->
			<!-- <view class="empty-state" v-else>
				<image src="https://lxnapi.ccttiot.com/smartmeter/img/static/empty_orders.png" mode="aspectFit"></image>
				<text>暂无订单数据</text>
			</view> -->
		</scroll-view>

		<!-- 日期选择器弹窗 -->
		<u-picker mode="date" :show="showDatePicker" :params="datePickerParams" @confirm="confirmDate" @cancel="cancelDatePicker"></u-picker>

		<!-- 退款确认弹窗 -->
		<u-popup :show="showRefundPopup" mode="center" width="600rpx" height="auto" border-radius="20" @close="closeRefundPopup">
			<view class="refund-popup">
				<view class="refund-title">确认退款</view>
				<view class="refund-content">
					<text>确定要对此订单进行退款操作吗？</text>
					<text class="refund-order-no">订单号：{{currentRefundOrder.orderNo}}</text>
				</view>
				<view class="refund-btns">
					<button class="cancel-btn" @click="closeRefundPopup">取消</button>
					<button class="confirm-btn" @click="confirmRefund">确认退款</button>
				</view>
			</view>
		</u-popup>

		<!-- 底部导航栏 -->
		<view class="tab_list">
			<view class="tab_list_item" @click="btntab(1)">
				<image src="https://lxnapi.ccttiot.com/smartmeter/img/static/uiw8EIRhLgNUXRFEhdVQ" mode=""></image>
				<text>工作台</text>
			</view>
			<view class="tab_list_item" @click="btntab(2)">
				<image src="https://lxnapi.ccttiot.com/smartmeter/img/static/ugQrdopAf0yS4YkyKtZG" mode=""></image>
				<text>运营</text>
			</view>
			<view class="tab_list_item" @click="btntab(3)">
				<image src="https://lxnapi.ccttiot.com/smartmeter/img/static/uGf55UsYl89B2mceXR69" mode=""></image>
				<text style="color: #FF8998;">订单</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgc: {
					backgroundColor: "",
				},
				searchText: '',
				currentType: 1, // 1: 爆灯订单, 2: 赠礼订单, 3: 免费订单
				orderList: [],
				// 分页相关
				page: 1,
				pageSize: 10,
				hasMoreData: true,
				isRefreshing: false,
				
				// 日期选择相关
				startDate: '2025-03-18',
				endDate: '2025-05-18',
				showDatePicker: false,
				datePickerParams: {},
				currentPickerType: '', // 'start' 或 'end'
				
				// 退款相关
				showRefundPopup: false,
				currentRefundOrder: {},
				pageNum:1,
				total:'',
				oneparams: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				oneshow: false,
				twoparams: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				twoshow: false,
				kstime:'',
				jstime:'',
				isRefreshing:false
			}
		},
		onLoad() {
			const currentDate = new Date()
			const year = currentDate.getFullYear()
			const month = currentDate.getMonth() + 1
			const day = currentDate.getDate()
			const formatDate = (year, month, day) => {
			    const formattedMonth = month < 10 ? `0${month}` : month
			    const formattedDay = day < 10 ? `0${day}` : day
			    return `${year}-${formattedMonth}-${formattedDay}`
			}
			this.kstime = formatDate(year, month, day)
			this.jstime = formatDate(year, month, day)
			this.pageNum = 1
			this.loadOrderData();
		},
		onShow() {
			
		},
		methods: {
			// 下拉刷新
			onRefresh() {
				this.isRefreshing = true
				this.pageNum = 1
				this.loadOrderData();
				setTimeout(() => {
					this.isRefreshing = false
				}, 1000)
			},
			// 选择开始时间
			confirmone(e){
				this.kstime = e.year + '-' + e.month + '-' + e.day
				this.pageNum = 1
				this.loadOrderData()
			},
			// 选择结束时间
			confirmtwo(e){
				this.jstime = e.year + '-' + e.month + '-' + e.day
				this.pageNum = 1
				this.loadOrderData()
			},
			showTimePicker(type) {
				if(type === 'start') {
					this.oneshow = true
				} else {
					this.twoshow = true
				}
			},
			// 切换订单类型
			switchType(type) {
				this.currentType = type;
				this.orderList = [];
				if(type == 1){
					this.pageNum = 1
					this.loadOrderData();
				}
			},
			// 点击跳转到订单详情
			goOrderDetail(item) {
				uni.navigateTo({
					url: '/page_shanghu/order/orderxq?orderid=' + item.id
				})
			},
			// 加载订单数据
			loadOrderData() {
				// 模拟API请求
                this.$u.get(`/bst/order/list?storeId=${this.$store.state.storeId}&pageNum=${this.pageNum}&pageSize=20&beginTime=${this.kstime}&endTime=${this.jstime}&keyword=${this.searchText}`).then(res =>{
                	if(res.code == 200){
                		this.total = res.total
						if (this.pageNum == 1) {
							this.orderList = res.rows
							this.pageNum++
						} else {
							this.orderList = this.orderList.concat(res.rows)
							this.pageNum++
						}
                	}
                })
			},
			
			// 加载更多
			loadMoreOrders() {
				if(this.total > this.orderList.length){
					this.loadOrderData();
				}else{
					console.log(111);
				}
			},
			
			// // 下拉刷新
			// onRefresh() {
			// 	this.isRefreshing = true;
			// 	this.pageNum = 1;
			// 	this.hasMoreData = true;
			// 	this.loadOrderData();
			// 	console.log('1111')
			// },
			
			// 搜索订单
			searchOrder() {
				this.pageNum = 1;
				this.loadOrderData();
			},
			
			// 底部导航切换
			btntab(num) {
				if(num == 1) {
					uni.reLaunch({
						url:'/page_shanghu/index'
					})
				} else if(num == 2) {
					uni.reLaunch({
						url:'/page_shanghu/yuying'
					})
				}
			},
			
			// 日期选择相关
			showStartDatePicker() {
				this.currentPickerType = 'start';
				this.datePickerParams = {
					year: true,
					month: true,
					day: true,
					timestamp: false
				}
				this.showDatePicker = true
			},
			
			showEndDatePicker() {
				this.currentPickerType = 'end'
				this.datePickerParams = {
					year: true,
					month: true,
					day: true,
					timestamp: false
				}
				this.showDatePicker = true
			},
			
			confirmDate(e) {
				const date = e.year + '-' + this.formatNum(e.month) + '-' + this.formatNum(e.day);
				if (this.currentPickerType === 'start') {
					this.startDate = date;
				} else {
					this.endDate = date;
				}
				this.showDatePicker = false;
				// 重新加载数据
				this.page = 1;
				this.orderList = [];
				this.hasMoreData = true;
				this.loadOrderData();
			},
			
			cancelDatePicker() {
				this.showDatePicker = false;
			},
			
			formatNum(num) {
				return num < 10 ? '0' + num : num;
			},
			
			// 处理退款
			handleRefund(item) {
				this.currentRefundOrder = item;
				this.showRefundPopup = true;
			},
			
			closeRefundPopup() {
				this.showRefundPopup = false;
			},
			
			confirmRefund() {
				// 这里应该调用退款API
				uni.showLoading({
					title: '处理中...'
				})
				setTimeout(() => {
					uni.hideLoading();
					uni.showToast({
						title: '退款成功',
						icon: 'success'
					})
					// 更新订单状态
					this.orderList = this.orderList.map(item => {
						if (item.orderNo === this.currentRefundOrder.orderNo) {
							return {
								...item,
								status: '已退款',
								canRefund: false
							}
						}
						return item
					})
					this.showRefundPopup = false
				}, 1000)
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #000;
	}
	
	.page {
		min-height: 100vh;
		padding-bottom: 176rpx;
		box-sizing: border-box;
	}
	
	.bj {
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: -1;
	}
	
	/* 搜索区域 */
	.search-section {
		padding: 10rpx 20rpx;
		.time{
			width: 696rpx;
			height: 96rpx;
			background: #000000;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			margin: auto;
			margin-top: 20rpx;
			display: flex;
			justify-content: space-between;
			padding: 22rpx 34rpx;
			box-sizing: border-box;
			align-items: center;
			.timewz{
				font-weight: 400;
				font-size: 28rpx;
				color: #fff;
			}
			.inptime{
				display: flex;
				align-items: center;
				color: #979797;
				view{
					margin-left: 10rpx;
					margin-right: 10rpx;
					width: 196rpx;
					height: 52rpx;
					border-radius: 6rpx 6rpx 6rpx 6rpx;
					border: 1rpx solid #808080;
					text-align: center;
					line-height: 52rpx;
					font-size: 28rpx;
					color: #979797;
				}
			}
		}
		.time-range {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 30rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
			
			.label {
				font-size: 24rpx;
				color: #888;
				display: block;
			}
			
			.date-picker {
				display: flex;
				align-items: center;
				
				.date-box {
					color: #fff;
					font-size: 24rpx;
					background-color: #222;
					padding: 10rpx 20rpx;
					border-radius: 4rpx;
					text-align: center;
					min-width: 180rpx;
					
					&:active {
						opacity: 0.8;
					}
				}
				
				.divider {
					margin: 0 15rpx;
					color: #666;
					font-size: 24rpx;
				}
			}
		}
		
		.search-box {
			margin-top: 30rpx;
			margin-bottom: 40rpx;
		}
	}
	
	/* 订单标签 */
	.order-tabs {
		display: flex;
		height: 70rpx;
		border-bottom: 1rpx solid #1a1a1a;
		border-top: 1rpx solid #1a1a1a;
		background-color: rgba(0, 0, 0, 0.7);
		
		.tab-item {
			flex: 1;
			text-align: center;
			position: relative;
			line-height: 70rpx;
			
			text {
				font-size: 28rpx;
				color: #fff;
			}
			
			&.active {
				text {
					color: #FF8998;
				}
				
				.active-line {
					position: absolute;
					left: 50%;
					bottom: 0;
					width: 40rpx;
					height: 4rpx;
					background-color: #FF8998;
					transform: translateX(-50%);
				}
			}
		}
	}
	
	/* 订单列表 */
	.order-list {
		// padding: 0 20rpx;
		height: 60vh;
		overflow: scroll;
		.refund-btn {
					background-color: transparent;
					border: 1px solid #FF8998;
					color: #FF8998;
					font-size: 24rpx;
					padding: 3rpx 20rpx;
					border-radius: 30rpx;
					line-height: 1.5;
					height: 100rpx;
					&:active {
						opacity: 0.8;
					}
				}
		.order-item {
			background-color: rgba(17, 17, 17, 0.8);
			padding: 20rpx;
			border-bottom: 1px solid #222;
			
			.order-header {
				display: flex;
				justify-content: space-between;
				margin-bottom: 10rpx;
				
				.order-num {
					font-size: 24rpx;
					color: #fff;
				}
				
				.order-status {
					font-size: 24rpx;
					color: #FF8998;
					
					&.canceled {
						color: #888;
					}
				}
			}
			
			.order-content {
				.shop-name, .light-times, .order-time {
					font-size: 24rpx;
					color: #fff;
					display: block;
					margin-bottom: 10rpx;
				}
			}
			
			.order-footer {
				display: flex;
				align-items: center;
				margin-top: 10rpx;
				.shop-name, .light-times, .order-time {
					font-size: 24rpx;
					color: #fff;
					display: block;
				}
				.price {
					color: #FF8998;
					font-size: 30rpx;
					font-weight: bold;
				}
			}
		}
		
		/* 加载更多 */
		.loading-more, .no-more-data {
			text-align: center;
			padding: 20rpx 0;
			
			text {
				font-size: 24rpx;
				color: #666;
			}
		}
		
		/* 空状态 */
		.empty-state {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			height: 600rpx;
			
			image {
				width: 200rpx;
				height: 200rpx;
				margin-bottom: 20rpx;
			}
			
			text {
				font-size: 28rpx;
				color: #666;
			}
		}
	}
	
	/* 退款弹窗 */
	.refund-popup {
		padding: 30rpx;
		
		.refund-title {
			font-size: 32rpx;
			color: #333;
			text-align: center;
			margin-bottom: 30rpx;
		}
		
		.refund-content {
			margin-bottom: 30rpx;
			
			text {
				font-size: 28rpx;
				color: #666;
				display: block;
				line-height: 1.5;
			}
			
			.refund-order-no {
				margin-top: 20rpx;
				color: #999;
				font-size: 24rpx;
			}
		}
		
		.refund-btns {
			display: flex;
			justify-content: space-between;
			
			button {
				flex: 1;
				margin: 0 10rpx;
				font-size: 28rpx;
				border-radius: 10rpx;
				
				&.cancel-btn {
					background-color: #f5f5f5;
					color: #666;
				}
				
				&.confirm-btn {
					background-color: #FF8998;
					color: #fff;
				}
			}
		}
	}
	
	/* 底部导航 */
	.tab_list {
		width: 750rpx;
		height: 176rpx;
		background: #0B0B0B;
		box-shadow: 0rpx 6rpx 64rpx 0rpx rgba(0,0,0,0.08);
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		z-index: 100;
		
		.tab_list_item {
			width: 33%;
			text-align: center;
			
			image {
				width: 36rpx;
				height: 36rpx;
			}
			
			text {
				font-size: 26rpx;
				color: #FFFFFF;
				display: block;
				margin-top: 12rpx;
			}
		}
	}
</style>