zzp-uniapp/src/pages/index/index.vue

<template>
	<view class="">
		<u-navbar :is-back="false" :background="{backgroundColor: '#4E55AF'}" height="50">
			<view class="flex justify-between items-center w-full">
				<view class="flex justify-start items-center">
					<view class="rounded-lg ml-[30rpx] bg-white p-[10rpx] mr-[12rpx]">
						<u-image width="40rpx" height="40rpx" :src="appStore.getWebsiteConfig.shop_logo"></u-image>
					</view>
					<view class="">
						{{appStore.getWebsiteConfig.shop_name}}
					</view>
				</view>
				<view class="flex justify-end pr-[30rpx]">
					<navigator hover-class="none" url="/pages/language/index">
						<u-icon size="50" name="/static/images/common/change_lang_w.png"></u-icon>
					</navigator>
				</view>
			</view>
		</u-navbar>
		<view class="bg-[#4E55AF] pb-[200rpx] pt-[30rpx]">
			<view class="pb-[20rpx] mb-[50rpx] mx-[30rpx] bg-[#5C62B5] rounded-lg" v-if="state.notice.is_show">
				<navigator hover-class="none" :url="'/pages/news_detail/news_detail?id='+state.notice.id">
					<u-notice-bar class="h-[60rpx]" mode="horizontal" bg-color="unset" color="#FFFFFF"
						:list="state.notice.text" />
				</navigator>
			</view>
		</view>
		<view class="mb-[20rpx] bg-[#2C326B] mx-[30rpx] rounded-lg mt-[-200rpx]" v-if="state.banner.length>0">
			<w-banner :banner="state.banner" />
		</view>

		<view class="mb-[20rpx]" v-if="state.navs.length>0">
			<view class="px-[30rpx]">
				<w-nav :navs="state.navs" />
			</view>
		</view>
		<view class="px-[30rpx] mb-[20rpx] inline-block" v-if="show_market">
			<w-market :market="state.market" />
		</view>
		<view class="mb-[20rpx] rounded-xl overflow-hidden" v-if="state.video.is_show">
			<view class="mx-[30rpx]">
				<video class="w-full rounded-xl" :src="state.video.url" controls :poster="state.video.image"></video>
			</view>
		</view>
		<view class="px-[30rpx] mb-[20rpx] inline-block " v-if="state.partner.is_show">
			<view class="mb-[20rpx]">
				{{t('index.partner')}}
			</view>
			<view class="" v-html="state.partner.content"></view>
		</view>
		<u-popup class="max-w-[750px]" v-model="state.popup.is_show" mode="center" border-radius="30" width="90%"
			height="880rpx" :closeable="true" close-icon-color="#ECECEC" close-icon-size="36" @close="modalHandle">
			<view class="">
				<view class="notice text-center">
					<view class="flex justify-center items-center py-[15px]">
						<view class="bg-[#2C326B] rounded-full p-[15rpx]">
							<u-image width="80rpx" height="80rpx" :src="appStore.getWebsiteConfig.shop_logo"></u-image>
						</view>
					</view>
				</view>
				<scroll-view scroll-y="true" style="height: 650rpx;">
					<view class="leading-loose pb-[24rpx] px-[24rpx]" v-html="state.popup.content">
					</view>
				</scroll-view>
			</view>
		</u-popup>
		<!-- 客服 -->
		<view class="fixed right-[30rpx] bottom-[150rpx]" v-if="state.show_kefu" @click="jumpTo(state.kefu_link)">
			<u-icon size="100" :name="state.kefu_logo"></u-icon>
		</view>
	</view>
	<tabbar />
</template>

<script setup lang="ts">
	import { onLoad, onUnload, onHide, onShow } from '@dcloudio/uni-app'
	import { getIndex, getMarket } from '@/api/shop'
	import { reactive, ref } from 'vue'
	import { useAppStore } from '@/stores/app'
	import { t, jumpTo } from '@/utils/util'
	uni.setNavigationBarTitle({ title: t('index.title') })
	const appStore = useAppStore()

	let timer : any = null
	const show_market = ref(false)
	const state = reactive<{
		banner : any[]
		notice : any
		navs : any[]
		partner : any[]
		video : any[]
		popup : any
		market : any[]
		kefu_logo : string
		show_kefu : number
		kefu_link : string
	}>({
		banner: [],
		notice: {
			text: '',
			is_show: false
		},
		navs: [],
		partner: [],
		video: [],
		popup: {
			content: '',
			is_show: false
		},
		market: [],
		kefu_logo: '',
		show_kefu: 0,
		kefu_link: '',
	})

	const modalHandle = async () => {
		state.popup.is_show = false;
	}
	const getData = async () => {
		const data = await getIndex()
		state.banner = data.banner
		state.navs = data.navs
		state.notice = data.notice
		state.notice.text = [data.notice.text]
		state.partner = data.partner
		state.video = data.video
		state.popup = data.popup
		state.market = data.market
		if (state.market.length > 0) show_market.value = true;

		state.kefu_logo = data.kefu_logo;
		state.show_kefu = data.show_kefu;
		state.kefu_link = data.kefu_link;
	}

	const getTimer = async () => {
		timer = setInterval(() => {
			getMarketData();
		}, 3000)
	}

	const getMarketData = async () => {
		const res = await getMarket()
		state.market = res;
		if (state.market.length > 0) show_market.value = true;
	}
	onUnload(() => {
		timer && clearInterval(timer)
	})
	onLoad(() => {
		getData();
	})
	onShow(() => {
		getTimer();
	})
	onHide(() => {
		timer && clearInterval(timer)
	})
</script>

<style lang="scss">
	.nva-bg {
		background-image: url('/static/images/index/noticebarbg.png');
		background-size: 100% auto;
		background-repeat: no-repeat;
		background-position: bottom;
		height: 80px;
	}
</style>