cashier_app/pageMarket/exchangeCoupon/getDetail.vue

<template>
	<view class="container">
		<view class="search-header-wrap">
			<view class="search-header">
				<div class="row">
					<view class="ipt" @click="showStatusSheet = true">
						<u-input suffix-icon="arrow-down" readonly placeholder="全部" :customStyle="inputStyle" v-model="statusValue"></u-input>
					</view>
					<view class="ipt" style="flex: 1.5" @click="showTime = true">
						<u-input suffix-icon="arrow-right" readonly placeholder="请选择日期" :customStyle="inputStyle" v-model="timeVlaue"></u-input>
					</view>
				</div>
				<div class="row" style="margin-top: 10px">
					<view class="ipt">
						<u-input prefix-icon="search" shape="circle" placeholder="用户昵称/用户ID" :customStyle="inputStyle"></u-input>
					</view>
					<div class="btn" style="width: 80px">
						<u-button shape="circle" type="primary" :customStyle="inputStyle" @click="resetGetTabdleData">搜索</u-button>
					</div>
				</div>
			</view>
		</view>
		<view class="list">
			<view class="item" v-for="item in tableData.list" :key="item.id">
				<view class="header">
					<view class="user-info">
						<u-image :src="item.headImg" width="40px" height="40px"></u-image>
						<view class="info">
							<view class="id">
								<text class="t">ID:{{ item.id }}</text>
							</view>
							<view class="name">
								<text class="t">{{ item.nickName }}</text>
							</view>
						</view>
					</view>
					<view class="status">
						<u-tag :type="getStatus(item.status).type">{{ getStatus(item.status).label }}</u-tag>
					</view>
				</view>
				<view class="content">
					<view class="row">
						<text class="title">领取时间</text>
						<text class="b">领取时间</text>
					</view>
					<view class="row">
						<text class="title">使用时间</text>
						<text class="b">-</text>
					</view>
					<view class="row">
						<text class="title">获得来源</text>
						<text class="b">-</text>
					</view>
					<view class="row">
						<text class="title">使用门店</text>
						<text class="b">-</text>
					</view>
					<view class="row">
						<text class="title">优惠金额</text>
						<text class="b">-</text>
					</view>
				</view>
				<!-- <view class="footer-wrap">
					<view class="btn">
						<u-button shape="circle">删除</u-button>
					</view>
				</view> -->
			</view>
			<u-loadmore :status="tableData.listStatus"></u-loadmore>
		</view>
		<u-action-sheet
			title="领取状态"
			:show="showStatusSheet"
			:actions="statusSheetList"
			closeOnClickOverlay
			@close="showStatusSheet = false"
			:round="20"
			safeAreaInsetBottom
			cancelText="取消"
			@select="selectStatus"
		></u-action-sheet>
		<u-datetime-picker
			title="开始时间"
			:round="20"
			:show="showTime"
			:minDate="minDate"
			:maxDate="maxDate"
			mode="date"
			closeOnClickOverlay
			@cancel="showTime = false"
			@close="showTime = false"
			@confirm="selectTime"
		></u-datetime-picker>
		<u-datetime-picker
			title="结束时间"
			:round="20"
			:show="showTime2"
			:minDate="dayjs(tableData.startTime || new Date()).valueOf()"
			:maxDate="maxDate"
			mode="date"
			closeOnClickOverlay
			@cancel="showTime2 = false"
			@close="showTime2 = false"
			@confirm="selectTime2"
		></u-datetime-picker>
	</view>
</template>

<script setup>
import dayjs from 'dayjs';
import { reactive, ref } from 'vue';
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
import { couponGetRecord } from '@/http/api/market/index.js';

const inputStyle = {
	height: '35px'
};

const shopInfo = ref({});

const statusValue = ref('');
const showStatusSheet = ref(false);
const statusSheetList = ref([
	{
		value: '',
		name: '全部'
	},
	{
		value: 0,
		name: '未使用',
		type: 'warning'
	},
	{
		value: 1,
		name: '已使用',
		type: 'primary'
	},
	{
		value: 2,
		name: '已过期',
		type: 'error'
	}
]);

// 获取状态参数
function getStatus(val) {
	let obj = statusSheetList.value.find(val.value == val);
	if (obj) {
		return obj;
	} else {
		return val;
	}
}

// 选择状态
function selectStatus(e) {
	console.log(e);
	if (e.value === '') {
		statusValue.value = '';
	} else {
		statusValue.value = e.name;
	}
	tableData.status = e.value;
	resetGetTabdleData();
}

const showTime = ref(false);
const minDate = ref(dayjs().add(-3, 'year').valueOf());
const maxDate = ref(dayjs().valueOf());

// 选择日期范围
const timeVlaue = ref('');
function selectTime(e) {
	tableData.startTime = dayjs(e.value).format('YYYY-MM-DD 00:00:00');
	showTime.value = false;
	showTime2.value = true;
}

const showTime2 = ref(false);
function selectTime2(e) {
	tableData.endTime = dayjs(e.value).format('YYYY-MM-DD 23:59:59');
	showTime2.value = false;
	timeVlaue.value = `${tableData.startTime} - ${tableData.endTime}`;
	resetGetTabdleData();
}

// 重置获取列表数据
function resetGetTabdleData() {
	tableData.page = 1;
	tableData.listStatus = 'loading';
	couponGetRecordAjax();
}

const tableData = reactive({
	couponId: '',
	startTime: '',
	endTime: '',
	status: '',
	listStatus: 'loading',
	page: 1,
	size: 10,
	list: []
});

onReachBottom(() => {
	if (tableData.listStatus != 'nomore') {
		tableData.page++;
		couponGetRecordAjax();
	}
});

// 获取已领取优惠券详情列表
async function couponGetRecordAjax() {
	try {
		const res = await couponGetRecord({
			startTime: tableData.startTime,
			endTime: tableData.endTime,
			shopId: shopInfo.value.id,
			userId: '',
			couponId: tableData.couponId,
			source: '',
			status: tableData.status,
			page: tableData.page,
			size: tableData.size
		});

		if (tableData.page == 1) {
			tableData.list = res.records;
		} else {
			tableData.list.push(...res.records);
		}

		if (res.pageNumber >= res.totalPage) {
			tableData.listStatus = 'nomore';
		}
	} catch (error) {
		console.log(error);
	}
}

onLoad((options) => {
	shopInfo.value = uni.getStorageSync('shopInfo');
	tableData.couponId = options.couponId;
	couponGetRecordAjax();
});
</script>

<style>
page {
	background-color: #f7f7f7;
}
</style>
<style scoped lang="scss">
.search-header-wrap {
	$height: 100px;
	width: 100%;
	height: $height;
	.search-header {
		width: 100%;
		height: $height;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		background-color: #fff;
		padding: 10px 14px;
		.row {
			display: flex;
			gap: 14px;
		}
		.ipt {
			flex: 1;
		}
	}
}
.list {
	padding: 28upx;
	.item {
		padding: 28upx;
		border-radius: 20upx;
		background-color: #fff;
		&:not(:first-child) {
			margin-top: 28upx;
		}
		.header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			.user-info {
				display: flex;
				.info {
					display: flex;
					flex-direction: column;
				}
			}
		}
		.content {
			padding: 28upx;
			.row {
			}
		}
		.footer-wrap {
			display: flex;
			justify-content: flex-end;
			.btn {
				width: 200upx;
			}
		}
	}
}
</style>