新增积分锁客页面，基础设置，商品设置，兑换记录

2025-12-11 19:27:22 +08:00
parent ea5ce3caa1
commit 214026e859
15 changed files with 2188 additions and 78 deletions
--- a/pageMarket/points/index.vue
+++ b/pageMarket/points/index.vue
@@ -0,0 +1,155 @@
+<template>
+	<view class="container">
+		<my-header-card
+			:options="{
+				name: '积分锁客',
+				intro: '下单可获得积分，再次下单可使用积分抵扣',
+				icon: 'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/4/11e5482336a94c2a91a10e2bf289126e.png'
+			}"
+			@load="(e) => (headHeight = e.height)"
+		></my-header-card>
+		<view class="content">
+			<setting ref="settingRef" name="setting" key="setting" v-if="tabsActive == 0" />
+			<productPage ref="productPageRef" name="productPage" key="productPage" v-if="tabsActive == 1" />
+			<record ref="recordRef" name="record" key="record" :top="headHeight + 54" v-if="tabsActive == 2" />
+		</view>
+		<view class="tab-wrap" :style="{ top: `${headHeight}px` }">
+			<view class="tab-list">
+				<view class="item" v-for="(item, index) in tabs" :class="{ active: tabsActive == index }" :key="item.value" @click="tabClickHandle(item, index)">
+					<text class="t">{{ item.label }}</text>
+				</view>
+			</view>
+		</view>
+		<my-footer-btn type="horizontal" showCancel @confirm="settingRef.submitHandle()" @cancel="backHandle" v-if="tabsActive == 0"></my-footer-btn>
+		<my-footer-btn confirmText="添加商品" type="horizontal" @confirm="toAddProduct" v-if="tabsActive == 1"></my-footer-btn>
+	</view>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue';
+import { onLoad, onShow, onReachBottom } from '@dcloudio/uni-app';
+import setting from './components/setting.vue';
+import productPage from './components/productPage.vue';
+import record from './components/record.vue';
+
+const settingRef = ref(null);
+const productPageRef = ref(null);
+const recordRef = ref(null);
+
+const headHeight = ref(0);
+const tabsActive = ref(2);
+const tabs = ref([
+	{
+		value: 1,
+		label: '基础设置'
+	},
+	{
+		value: 2,
+		label: '商品设置'
+	},
+	{
+		value: 3,
+		label: '兑换记录'
+	},
+	{
+		value: 4,
+		label: '用户积分'
+	}
+]);
+
+function tabClickHandle(item, index) {
+	tabsActive.value = index;
+}
+
+function backHandle() {
+	uni.navigateBack();
+}
+
+function toAddProduct() {
+	uni.navigateTo({
+		url: '/pageMarket/points/addProduct'
+	});
+}
+
+onReachBottom(() => {
+	switch (tabsActive.value) {
+		case 0:
+			break;
+		case 1:
+			productPageRef.value.reachBottom();
+			break;
+		case 2:
+			recordRef.value.reachBottom();
+			break;
+		case 3:
+			break;
+		default:
+			break;
+	}
+});
+
+onShow(() => {
+	switch (tabsActive.value) {
+		case 0:
+			break;
+		case 1:
+			productPageRef.value.pointsGoodsPageAjax(1);
+			break;
+		case 2:
+			recordRef.value.goodsRecordPageAjax(1);
+			break;
+		case 3:
+			break;
+		default:
+			break;
+	}
+});
+</script>
+
+<style>
+page {
+	background-color: #f8f8f8;
+}
+</style>
+<style scoped lang="scss">
+$bgColor: #e6f0ff;
+$primarColor: #318afe;
+.content {
+	padding: calc(54px + 28upx) 28upx 28upx;
+}
+.tab-wrap {
+	height: 54px;
+	padding: 10px 14px;
+	background-color: #fff;
+	width: 100%;
+	position: fixed;
+	left: 0;
+	z-index: 999;
+	.tab-list {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		background-color: $bgColor;
+		padding: 6upx;
+		border-radius: 12upx;
+		.item {
+			flex: 1;
+			height: 100%;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			border-radius: 8upx;
+			.t {
+				color: $primarColor;
+				font-size: 28upx;
+			}
+			&.active {
+				background-color: $primarColor;
+				.t {
+					color: #fff;
+				}
+			}
+		}
+	}
+}
+</style>