新增商品拼团模块

2025-12-18 14:49:56 +08:00
parent a20379890e
commit 8826b206df
12 changed files with 3110 additions and 5 deletions
--- a/pageMarket/packagePopularize/index.vue
+++ b/pageMarket/packagePopularize/index.vue
@@ -0,0 +1,193 @@
+<!-- 套餐推广 -->
+<template>
+	<view class="container">
+		<my-header-card
+			:options="{
+				name: '套餐推广',
+				intro: '下单通过用户邀请好友减免金额的方式裂变宣传套餐加购',
+				icon: 'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/4/d660089c797346a4afba90e00464d557.png'
+			}"
+			showSwitch
+			v-model:isOpen="form.onlineStatus"
+			@load="(e) => (headHeight = e.height)"
+		></my-header-card>
+		<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>
+		<view class="content">
+			<goodsList ref="goodsListRef" name="goodsList" key="goodsList" :top="headHeight + 54" v-if="tabsActive == 0" />
+			<orderList ref="orderListRef" name="orderList" key="orderList" :top="headHeight + 54" v-if="tabsActive == 1" />
+		</view>
+		<my-footer-btn confirmText="添加" v-if="tabsActive == 0" @confirm="toAdd"></my-footer-btn>
+	</view>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+import { onLoad, onShow, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';
+import goodsList from './components/goodsList.vue';
+import orderList from './components/orderList.vue';
+import { upShopConfig } from '@/http/api/ware.js';
+import { getShopInfo } from '@/http/api/shop.js';
+
+const goodsListRef = ref(null);
+const orderListRef = ref(null);
+
+const headHeight = ref(0);
+const tabsActive = ref(0);
+const tabs = ref([
+	{
+		value: 1,
+		label: '拼团活动'
+	},
+	{
+		value: 2,
+		label: '拼团订单'
+	}
+]);
+
+function tabClickHandle(item, index) {
+	tabsActive.value = index;
+}
+
+function toAdd() {
+	uni.navigateTo({
+		url: '/pageMarket/groupGoods/addGoods'
+	});
+}
+
+// 活动开关
+const form = ref({
+	onlineStatus: 1
+});
+
+watch(
+	() => form.value.onlineStatus,
+	(newValue, oldValue) => {
+		upShopConfigAjax();
+	}
+);
+
+// 更改开关状态
+async function upShopConfigAjax() {
+	try {
+		uni.showLoading({
+			title: '保存中...',
+			mask: true
+		});
+		const res = await upShopConfig(form.value);
+	} catch (error) {
+		console.log(error);
+	}
+	uni.hideLoading();
+}
+
+// 下拉刷新
+onPullDownRefresh(() => {
+	switch (tabsActive.value) {
+		case 0:
+			goodsListRef.value?.getGbWarePageAjax(1, true);
+			break;
+		case 1:
+			orderListRef.value?.getGbWarePageAjax(1, true);
+			break;
+		default:
+			break;
+	}
+});
+
+// 滚动到底部
+onReachBottom(() => {
+	switch (tabsActive.value) {
+		case 0:
+			goodsListRef.value?.reachBottom();
+			break;
+		case 1:
+			orderListRef.value?.reachBottom();
+			break;
+		default:
+			break;
+	}
+});
+
+// 获取配置信息
+async function getShopInfoAjax() {
+	try {
+		const res = await getShopInfo();
+		form.value.onlineStatus = res.isGroupBuy;
+	} catch (error) {
+		console.log(error);
+	}
+}
+
+// 页面显示
+onShow(() => {
+	switch (tabsActive.value) {
+		case 0:
+			goodsListRef.value?.getGbWarePageAjax(1);
+			break;
+		case 1:
+			break;
+		default:
+			break;
+	}
+});
+
+onLoad(() => {
+	getShopInfoAjax();
+});
+</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;
+	top: 0;
+	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>