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() {
		this.getData()
	},
	methods: {
		getData() {
			let data = {
				page: 1,
				limit: 6
			}
			this.$Request.getT('/app/lover-set/page', data).then((res) => {
				console.log(res, 966)
			})
		},
		// 选择条件
		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>