cashier_app/pageMarket/exchangeCoupon/index.vue

<template>
	<view class="container">
		<view class="header-wrap">
			<view class="fixed-header-wrap">
				<scroll-view scroll-x direction="horizontal" class="tabs-wrap">
					<view class="item" :class="{ active: couponType == item.value }" v-for="item in emunList.couponTypes" :key="item.value" @click="changeType(item.value)">
						<div class="item-flex">
							<text class="t">{{ item.label }}</text>
						</div>
					</view>
				</scroll-view>
				<view class="search-wrap">
					<view class="ipt">
						<u-input
							placeholder="搜索优惠券名称"
							shape="circle"
							prefixIcon="search"
							prefixIconStyle="font-size: 22px;color: #909399"
							clearable
							:customStyle="{ border: 'none', background: '#F9F9F9' }"
							v-model="tableData.query"
							@confirm="searchHandle"
							@clear="searchHandle"
						></u-input>
					</view>
					<div class="btn">
						<u-button shape="circle" type="primary" :customStyle="{ height: '36px' }" @click="searchHandle">搜索</u-button>
					</div>
				</view>
			</view>
		</view>
		<view class="my-coupon-item-list">
			<view class="my-coupon-item-item" v-for="item in tableData.list" :key="item.id">
				<my-coupon-item :item="item">
					<view class="my-coupon-item-row-wrap">
						<template v-if="couponType == 5">
							<view class="row">
								<text class="title">赠券门槛</text>
								<text class="info">满{{ item.fullAmount }}元赠送</text>
							</view>
							<view class="row">
								<text class="title">每人限量</text>
								<text class="info">
									<template v-if="item.useLimit == -10086">无限制</template>
									<template v-else>{{ item.useLimit }}张</template>
								</text>
							</view>
							<view class="row">
								<text class="title">每次赠送</text>
								<text class="info">
									<template v-if="item.getLimit == -10086">无限制</template>
									<template v-else>{{ item.getLimit }}张</template>
								</text>
							</view>
						</template>
						<template v-else>
							<view class="row" v-if="couponType == 1">
								<text class="title">使用门槛</text>
								<text class="info">满{{ item.fullAmount }}元减{{ item.discountAmount }}元</text>
							</view>
							<view class="row" v-if="couponType == 2">
								<text class="title">使用门槛</text>
								<text class="info">满{{ item.fullAmount }}元可用</text>
							</view>
							<view class="row" v-if="couponType == 3">
								<text class="title">最大折扣金额</text>
								<text class="info">满{{ item.discountAmount }}元可用</text>
							</view>
							<view class="row">
								<text class="title">发放方式</text>
								<text class="info">用户{{ getEmunListLabel('getType', item.getType) }}</text>
							</view>
							<view class="row">
								<text class="title">有效期</text>
								<text class="info">
									<template v-if="item.validType == 'fixed'">领券后{{ item.validDays }}天过期</template>
									<template v-if="item.validType == 'custom'">{{ item.validStartTime }}至{{ item.validEndTime }}</template>
								</text>
							</view>
						</template>
						<view class="row">
							<text class="title">创建时间</text>
							<text class="info">{{ item.createTime }}</text>
						</view>
					</view>
				</my-coupon-item>
			</view>
		</view>
		<u-loadmore :status="tableData.status"></u-loadmore>
		<my-footer-btn confirmText="+ 添加商品兑换券" @confirm="go.to('PAGES_ADD_COUPON')"></my-footer-btn>
	</view>
</template>

<script setup>
import { ref, reactive } from 'vue';
import go from '@/commons/utils/go.js';
import { couponPage } from '@/http/api/market/index.js';
import { onLoad, onShow, onReachBottom } from '@dcloudio/uni-app';
import { getEmunListLabel, emunList } from '../utils/couponUtils.js';

// 切换类型
function changeType(type) {
	couponType.value = type;
	resetGetData();
}

// 搜索
function searchHandle() {
	resetGetData();
}

function resetGetData() {
	tableData.page = 1;
	tableData.status = 'loading';
	tableData.list = [];
	couponPageAjax();
}

// 获取优惠券
const couponType = ref(1);
const tableData = reactive({
	query: '',
	status: 'loading',
	page: 1,
	size: 10,
	list: []
});
async function couponPageAjax() {
	try {
		tableData.status = 'loading';
		const res = await couponPage({
			couponType: couponType.value,
			title: tableData.query,
			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.status = 'nomore';
		}
	} catch (error) {
		console.log(error);
	}
}

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

onShow(() => {
	couponPageAjax();
});

onLoad((options) => {
	couponType.value = options.coupon_type;
});
</script>

<style>
page {
	background-color: #f7f7f7;
}
</style>
<style scoped lang="scss">
.container {
	padding: 28upx;
}
.header-wrap {
	$height: 86px;
	$scrollHeight: 30px;
	$color: #318afe;
	width: 100%;
	height: $height;
	.fixed-header-wrap {
		width: 100%;
		height: $height;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
		background-color: #fff;
		.tabs-wrap {
			white-space: nowrap;
			width: 100%;
			height: $scrollHeight;
			box-sizing: border-box;
			.item {
				height: 100%;
				display: inline-block;
				margin-left: 28upx;
				&:last-child {
					margin-right: 28upx;
				}
				&.active {
					.item-flex {
						background-color: #e6f0ff;
						.t {
							color: $color;
						}
					}
				}
				.item-flex {
					width: 100%;
					height: 100%;
					display: flex;
					align-items: center;
					padding: 0 20upx;
					border-radius: 4upx;
					background-color: #f7f7fa;
					.t {
						color: #666666;
						font-size: 28upx;
					}
				}
			}
		}
		.search-wrap {
			height: $height - $scrollHeight;
			display: flex;
			align-items: center;
			padding: 10px 28upx 10px;
			gap: 28upx;
			box-sizing: border-box;
			.ipt {
				flex: 1;
				height: 36px;
			}
			.btn {
				width: 160upx;
				height: 36px;
			}
		}
	}
}
</style>