cashier_app/pageMarket/packagePopularize/index.vue

<!-- 套餐推广 -->
<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" @share="shareCallback" />
			<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, onShareAppMessage } from '@dcloudio/uni-app';
import goodsList from './components/goodsList.vue';
import orderList from './components/orderList.vue';
import { packageSwitchGet, packageSwitchPut } from '@/http/api/ware.js';

const path = '/pageMarket/packagePopularize/share';
const shareOptions = ref({
	title: '',
	path: '',
	imageUrl: ''
});

onShareAppMessage(() => {
	console.log(shareOptions.value);
	return shareOptions.value;
});

function shareCallback(item) {
	shareOptions.value.title = item.packageName;
	shareOptions.value.path = `${path}?shopId=${item.shopId}&id=${item.id}`;
	shareOptions.value.imageUrl = item.images[0];
}

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/packagePopularize/addGoods'
	});
}

// 活动开关
const form = ref({
	onlineStatus: 1
});

watch(
	() => form.value.onlineStatus,
	(newValue, oldValue) => {
		if (loading.value == false) {
			if (newValue == 0) {
				uni.showModal({
					title: '注意',
					content: '关闭套餐推广所有未支付的订单都将自动取消，是否确定关闭？',
					success: (res) => {
						if (res.confirm) {
							upShopConfigAjax();
						} else {
							form.value.onlineStatus = 1;
						}
					}
				});
			} else {
				upShopConfigAjax();
			}
		}
	}
);

// 更改开关状态
async function upShopConfigAjax() {
	try {
		uni.showLoading({
			title: '保存中...',
			mask: true
		});
		await packageSwitchPut({ status: form.value.onlineStatus });
		if (tabsActive.value == 0) {
			goodsListRef.value?.resetGetList();
		}
	} catch (error) {
		console.log(error);
	}
	uni.hideLoading();
}

// 下拉刷新
onPullDownRefresh(() => {
	switch (tabsActive.value) {
		case 0:
			goodsListRef.value?.resetGetList();
			break;
		case 1:
			orderListRef.value?.gbOrderPageAjax(1, true);
			break;
		default:
			break;
	}
});

// 滚动到底部
onReachBottom(() => {
	switch (tabsActive.value) {
		case 0:
			goodsListRef.value?.reachBottom();
			break;
		case 1:
			orderListRef.value?.reachBottom();
			break;
		default:
			break;
	}
});

// 获取配置信息
const loading = ref(true);
async function getShopInfoAjax() {
	try {
		loading.value = true;
		const res = await packageSwitchGet();
		form.value.onlineStatus = res;
	} catch (error) {
		console.log(error);
	}
	setTimeout(() => {
		loading.value = false;
	}, 500);
}

// 页面显示
onShow(() => {
	switch (tabsActive.value) {
		case 0:
			goodsListRef.value?.resetGetList();
			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>