完成优惠券页面

2025-11-21 16:03:04 +08:00
parent e6212251e3
commit df8a700aec
14 changed files with 1069 additions and 64 deletions
--- a/pageMarket/exchangeCoupon/index.vue
+++ b/pageMarket/exchangeCoupon/index.vue
@@ -2,8 +2,15 @@
 	<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)">
+				<scroll-view scroll-x direction="horizontal" class="tabs-wrap" :scroll-left="scrollLeft" scroll-with-animation>
+					<view
+						class="item"
+						:class="{ active: couponType == item.value }"
+						v-for="(item, index) in emunList.couponTypes"
+						:key="index"
+						:data-index="index"
+						@click="changeType(item.value, index)"
+					>
 						<div class="item-flex">
 							<text class="t">{{ item.label }}</text>
 						</div>
@@ -95,18 +102,69 @@

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

+const instance = getCurrentInstance();
+const couponType = ref(1); // 当前选中的优惠券类型
+const scrollLeft = ref(0); // scroll-view的滚动距离
+
 // 切换类型
-function changeType(type) {
+function changeType(type, index) {
 	couponType.value = type;
 	resetGetData();
+	calculateCenterScroll(index);
 }

+// item居中
+const calculateCenterScroll = (activeIndex) => {
+	// 1. 查询ScrollView的可视宽度（全局查询，无需ref）
+	uni.createSelectorQuery()
+		.select('.tabs-wrap')
+		.boundingClientRect((scrollViewRect) => {
+			if (!scrollViewRect) return;
+			const viewWidth = scrollViewRect.width; // ScrollView可视宽度（px）
+			const viewHalfWidth = viewWidth / 2; // ScrollView中心位置（px）
+
+			// 2. 查询所有Tab项的DOM信息（计算选中项左侧总宽度）
+			uni.createSelectorQuery()
+				.selectAll('.item')
+				.boundingClientRect((tabItemsRect) => {
+					if (!tabItemsRect || tabItemsRect.length === 0) return;
+
+					// 3. 计算选中项左侧所有Tab的宽度总和
+					let leftTotalWidth = 0;
+					for (let i = 0; i < activeIndex; i++) {
+						leftTotalWidth += tabItemsRect[i].width; // 累加左侧Tab宽度（px）
+						leftTotalWidth += 28 * (uni.getSystemInfoSync().windowWidth / 750); // 累加左侧Tab的margin-left（28rpx转px）
+					}
+
+					// 4. 获取选中项自身的宽度和位置
+					const activeItemRect = tabItemsRect[activeIndex];
+					const itemHalfWidth = activeItemRect.width / 2; // 选中项中心位置（px）
+
+					// 5. 计算最终滚动距离（核心公式）
+					let targetScrollLeft = leftTotalWidth + itemHalfWidth - viewHalfWidth;
+
+					// 6. 边界处理：不小于0，不超过最大滚动距离
+					uni.createSelectorQuery()
+						.select('.tabs-wrap')
+						.scrollOffset((scrollOffset) => {
+							const maxScrollLeft = scrollOffset.scrollWidth - viewWidth; // 最大滚动距离
+							targetScrollLeft = Math.max(0, Math.min(targetScrollLeft, maxScrollLeft));
+							scrollLeft.value = targetScrollLeft; // 赋值滚动距离
+							console.log('最终滚动距离：', targetScrollLeft);
+						})
+						.exec();
+				})
+				.exec();
+		})
+		.exec();
+};
+
 // 搜索
 function searchHandle() {
 	resetGetData();
@@ -133,26 +191,32 @@ function deleteHandle(item) {
 	console.log('del', item);
 	uni.showModal({
 		title: '注意',
-		content: `确定要删除${item.title}优惠券吗?`,
+		content: `确定要删除${item.title || '该'}优惠券吗?`,
 		success: async (res) => {
-			try {
-				uni.showLoading({
-					title: '删除中...',
-					mask: true
-				});
-				await couponDel(item.id);
-				uni.showToast({
-					title: '已删除',
-					icon: 'none'
-				});
-				let index = tableData.list.findIndex((val) => val.id == item.id);
-				tableData.list.splice(index, 1);
-			} catch (error) {
-				console.log(error);
+			if (res.confirm) {
+				try {
+					uni.showLoading({
+						title: '删除中...',
+						mask: true
+					});
+					if (couponType.value == 5) {
+						await deleteConsumerCoupon(item.id);
+					} else {
+						await couponDel(item.id);
+					}
+					uni.showToast({
+						title: '已删除',
+						icon: 'none'
+					});
+					let index = tableData.list.findIndex((val) => val.id == item.id);
+					tableData.list.splice(index, 1);
+				} catch (error) {
+					console.log(error);
+				}
+				setTimeout(() => {
+					uni.hideLoading();
+				}, 500);
 			}
-			setTimeout(() => {
-				uni.hideLoading();
-			}, 500);
 		}
 	});
 }
@@ -160,14 +224,20 @@ function deleteHandle(item) {
 // 编辑
 function editorHandle(item) {
 	console.log('editor', item);
-	go.to('PAGES_ADD_COUPON', {
-		couponType: item.couponType,
-		id: item.id
-	});
+	if (couponType.value == 5) {
+		go.to('PAGES_ADD_CONSUME_COUPON', {
+			couponType: item.couponType,
+			id: item.id
+		});
+	} else {
+		go.to('PAGES_ADD_COUPON', {
+			couponType: item.couponType,
+			id: item.id
+		});
+	}
 }

 // 获取优惠券
-const couponType = ref(1);
 const tableData = reactive({
 	query: '',
 	status: 'loading',
@@ -178,12 +248,22 @@ const tableData = reactive({
 async function couponPageAjax() {
 	try {
 		tableData.status = 'loading';
-		const res = await couponPage({
+		let res = null;
+		let params = {
 			couponType: couponType.value,
 			title: tableData.query,
 			page: tableData.page,
 			size: tableData.size
-		});
+		};
+
+		if (couponType.value == 5) {
+			res = await getConsumerCouponPage(params);
+			res.records.map((item) => {
+				item.couponType = 5;
+			});
+		} else {
+			res = await couponPage(params);
+		}

 		if (tableData.page == 1) {
 			tableData.list = res.records;
@@ -210,7 +290,13 @@ onShow(() => {
 });

 onLoad((options) => {
-	couponType.value = options.coupon_type;
+	couponType.value = options.couponType;
+	const index = emunList.couponTypes.findIndex((item) => item.value == couponType.value);
+	setTimeout(() => {
+		if (index !== -1) {
+			calculateCenterScroll(index);
+		}
+	}, 100);
 });
 </script>