moxuan_takeaway_user/my/taocan/list.vue

<template>
	<view class="content">
		<!-- 不同条件筛选 -->
		<view class="select">
			<view class="select_k" :class="selected==0? 'selected':''" @click="selece(0)">全部</view>
			<view class="select_k" :class="selected==1? 'selected':''" @click="selece(1)">已支付</view>
			<view class="select_k" :class="selected==2? 'selected':''" @click="selece(2)">使用中</view>
			<view class="select_k" :class="selected==3? 'selected':''" @click="selece(3)">已使用</view>
			<view class="select_k" :class="selected==4? 'selected':''" @click="selece(4)">已过期</view>
		</view>
		<!-- 订单列表 -->
		<view class="order">
			<view class="order_l1">
				<view>已支付</view>
				<view style="font-size: 24rpx;font-weight: 400;">2025-08-11 12:21:21</view>
			</view>
			<view class="order_line"></view>
			<view class="title title2" style="margin-top: 23rpx;">
				<view class="cicle"></view>
				<view style="margin-left: 16rpx;">创海便利店（二食堂1楼)    13267827921</view>
			</view>
			<view class="xiangnei" v-for="(item,index) in 2" :key="index">
				例假期每天一杯红糖姜茶
			</view>
			<!-- 订单数据 -->
			<view class="order_list">
				<view v-for="(item,index) in 7" :key="index" class="list_time">
					2025-08-11 10:21:21
					<view style="margin-top: 5rpx;font-size: 24rpx;">64874983774848987484</view>
				</view>
			</view>
			<!-- 按钮 -->
			<view class="button">
				<view class="button1">退款</view>
				<view class="button2" @click="bianji">编辑</view>
			</view>
		</view>
		
		<!-- 编辑时间弹框 -->
		<u-popup v-model="changeShow" mode="center" :closeable="true" border-radius="20">
			<view style="width: 700rpx">
				<view class="text-center text-lg text-bold padding-tb">编辑</view>
				<view class="popup-list">
					<view style="padding-top: 20rpx;">第1笔</view>
					<view class="popup-yell">2025-08-11 10:21:21</view>
					<view style="padding-top: 20rpx;">第2笔</view>
					<view class="popup-red">2025-08-11 10:21:21</view>
					<view style="padding-top: 20rpx;">第3笔</view>
					<view class="custom-item">
					    <view class="item-label">
							<uni-datetime-picker
							v-model="datetimerange" :border="false"
							type="datetimerange"
							rangeSeparator="~" />
						</view>
					    <view class="item-value">
							<!-- 箭头图标，可使用 uni-app 内置图标或自定义图片 -->
							<uni-icons type="calendar" color="#000000" />
						</view>
					</view>
					<view style="padding-top: 20rpx;">第4笔</view>
					<view class="custom-item">
					    <view class="item-label">
							<uni-datetime-picker
							v-model="datetimerange" :border="false"
							type="datetimerange"
							rangeSeparator="~" />
						</view>
					    <view class="item-value">
							<!-- 箭头图标，可使用 uni-app 内置图标或自定义图片 -->
							<uni-icons type="calendar" color="#000000" />
						</view>
					</view>
					<!-- 按钮 -->
					<view class="popup_butt">
						<view class="button3">取消</view>
						<view class="button4" @click="bianji">确定</view>
					</view>
				</view>
				
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selected:0,//0全部，1已支付，2使用中，3已使用，4已过期
				changeShow: false,
				datetimerange:[],
			}
		},
		onLoad() {
			
		},
		methods:{
			// 选择条件
			selece(e){
				this.selected=e
			},
			//编辑时间
			bianji(){
				this.changeShow=true
			},
		},
	}
</script>

<style>
	.content{
		width: 100%;
		height: 100%;
		background-color: #F2F2F2;
	}
	/* 不同条件筛选 */
	.select{
		display: flex;
		width: 100%;
		height: 100%;
	}
	.select_k{
		margin: 20rpx 0 0 15rpx;
		width: 140rpx;
		height: 60rpx;
		opacity: 1;
		border-radius: 9rpx;
		background: #FFFFFF;
		font-size: 28rpx;
		line-height: 60rpx;
		color: rgba(128, 128, 128, 1);
		text-align: center;
	}
	.selected{
		font-weight: 700;
		color: rgba(255, 141, 26, 1);
	}
	/* 订单列表 */
	.order{
		margin: 30rpx 0 0 20rpx;
		width: 710rpx;
		height: 100%;
		opacity: 1;
		border-radius: 9rpx;
		background: #FFFFFF;
	}
	.order_l1{
		display: flex;
		padding: 19rpx 19rpx 0 19rpx;
		/* 让子元素两端对齐，价格居左，按钮居右 */
		justify-content: space-between; 
		/* 垂直方向居中（可选，根据需求调整） */
		align-items: center; 
		font-size: 32rpx;
		font-weight: 500;
		color: rgba(0, 0, 0, 1);
	}
	.order_line{
		margin-top: 31rpx;
		width: 100%;
		height: 1rpx;
		opacity: 1;
		background-color: rgba(230, 230, 230, 1);
	}
	.title{
		margin: 13rpx 0 0 23rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: rgba(0, 0, 0, 1);
	}
	.cicle{
		margin: 12rpx 0 0 0;
		width: 10rpx;
		height: 10rpx;
		background: #CCCCCC;
		border-radius: 50%;
	}
	.title2{
		display: flex;
	}
	.xiangnei{
		width: 633rpx;
		display: flex;
		/* 让子元素两端对齐，价格居左，按钮居右 */
		justify-content: space-between; 
		/* 垂直方向居中（可选，根据需求调整） */
		margin: 0 0 0 45rpx;
		padding-top: 10rpx;
		font-size: 24rpx;
		color: rgba(102, 102, 102, 1);
	}
	.order_list{
		display: flex;
		flex-wrap: wrap;
		width: 583rpx;
		height: 100%;
		/* 让子元素两端对齐，价格居左，按钮居右 */
		justify-content: space-between; 
		/* 垂直方向居中（可选，根据需求调整） */
		margin: 10rpx 0 0 41rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: rgba(0, 0, 0, 1);
		word-wrap: break-word;
		word-break: break-all;
	}
	.list_time{
		margin-top: 10rpx;
		width: 260rpx;
		height: 71rpx;
		/* 核心属性：强制文字在一行显示，不自动换行 */
		white-space: nowrap;
	}
	/* 按钮 */
	.button{
		display: flex;
		margin: 39rpx 0 0 278rpx;
		height: 100rpx;
		font-size: 28rpx;
		font-weight: 500;
		line-height: 75rpx;
	}
	.button1{
		width: 190rpx;
		height: 75rpx;
		opacity: 1;
		border-radius: 105rpx;
		background: rgba(242, 242, 242, 1);
		color: rgba(0, 0, 0, 1);
		text-align: center;
	}
	.button2{
		margin: 0 0 0 29rpx;
		width: 190rpx;
		height: 75rpx;
		opacity: 1;
		border-radius: 105rpx;
		background: rgba(255, 141, 26, 1);
		color: rgba(255, 255, 255, 1);
		text-align: center;
	}
	/* 编辑时间弹框 */
	.popup-list{
		margin: 25rpx 0 0 41rpx;
		font-size: 28rpx;
		color: rgba(0, 0, 0, 1);
	}
	.popup-yell{
		color: rgba(255, 141, 26, 1);
		font-size: 32rpx;
		font-weight: 500;
		padding-top: 20rpx;
	}
	.popup-red{
		color: rgba(212, 48, 48, 1);
		font-size: 32rpx;
		font-weight: 500;
		padding-top: 20rpx;
	}
	.custom-item {
	  margin: 17rpx 0 0 0;
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	  padding: 12rpx 16rpx;
	  width: 651rpx;
	  height: 83rpx;
	  opacity: 1;
	  border-radius: 130rpx;
	  background: rgba(242, 242, 242, 1);
	}
	.item-label {
	  font-size: 28rpx;
	  color: rgba(0, 0, 0, 1);
	}
	.item-value {
	  display: flex;
	  font-size: 28rpx;
	  color: rgba(0, 0, 0, 1);
	}
	/* 按钮 */
	.popup_butt{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 54rpx 0 0 0;
		height: 200rpx;
		font-size: 28rpx;
		font-weight: 500;
		line-height: 99rpx;
	}
	.button3{
		width: 250rpx;
		height: 99rpx;
		opacity: 1;
		border-radius: 138rpx;
		border: 1px solid rgba(255, 141, 26, 1);
		color: rgba(255, 141, 26, 1);
		text-align: center;
	}
	.button4{
		width: 250rpx;
		height: 99rpx;
		opacity: 1;
		border-radius: 105rpx;
		background: rgba(255, 141, 26, 1);
		color: rgba(255, 255, 255, 1);
		text-align: center;
	}
</style>