mall-front-app/pages/index/FirstIndex.vue

<!-- 商城新首页,即宣传页 -->
<template>
	<view class="page-body" style="background: #111521;">
		<view class="header">
			<view class="logo">
				<image class="" src="@/static/firstIndex/clcg.png" mode="aspectFit"></image>
			</view>
			<view class="language">

			</view>
		</view>
		<!-- 轮播 -->
		<s-image-banner :data="lunbo" :styles="styles" class="lunbo" height="300" />
		<!--  @click="sheep.$router.go('/pages/public/richtext', {title:gonggao.title});" -->
		<view class="gonggao">
			<view class="gonggao-item">
				使命：共建平台，共创价值，共享利益。
			</view>
			<view class="gonggao-item">
				愿景：引领共享电商，三方共赢，推动创新。
			</view>
			<view class="gonggao-item">
				价值观：产品为王、诚信透明、共创共享共赢。
			</view>
		</view>
		<view class="nav">
			<view class="card" @click="sheep.$router.go('/pages/public/richtext', {title:state.ptjj.title});">
				<image src="@/static/firstIndex/pt.svg" mode="aspectFit" />
				{{ t('common.platform_intro') }}
			</view>
			<view class="card" @click="sheep.$router.go('/pages/public/richtext', {title:state.cyjs.title});">
				<image src="@/static/firstIndex/product.svg" mode="aspectFit" />
				{{ t('common.industry_intro') }}
			</view>
			<view class="card" @click="sheep.$router.go('/pages/index/FirstList', {categoryId:11});">
				<image src="@/static/firstIndex/news.svg" mode="aspectFit" />
				{{ t('common.latest_news') }}
			</view>
			<view class="card" @click="sheep.$router.go('/pages/index/index')">
				<image src="@/static/firstIndex/shop.svg" mode="aspectFit" />
				{{ t('common.shared_mall') }}
			</view>
		</view>
		<view class="news" :style="{ backgroundImage: `url(${state.xwdt.image})` }" style="background-size: cover;"
			@click="sheep.$router.go('/pages/public/richtext', {title:state.xwdt.title});">
			<view class="news-bottom">
				<text>{{state.xwdt.title}}</text>
				<view  @click="sheep.$router.go('/pages/index/FirstList', {categoryId:6});">
					<image src="@/static/firstIndex/youjiantou.png" mode="aspectFit" />
				</view>
			</view>

		</view>
		<s-tabbar path="/pages/index/FirstIndex" :tabbar="tabbar" />
	</view>


</template>

<script setup>
	import {
		computed,
		ref
	} from 'vue';
	import {
		onLoad,
		onPageScroll,
		onPullDownRefresh
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	import $share from '@/sheep/platform/share';
	import {
		isAndroid,
		getAndroidJiGuangId
	} from '@/sheep/hooks/useApp'
	import {
		showWalletModal,
		colseWalletModal
	} from '@/sheep/hooks/useModal';
	import ArticleApi from '@/sheep/api/promotion/article';
	import Richtext from '@/pages/public/richtext.vue'
	import {
		t
	} from '@/locale'
	// 隐藏原生tabBar
	uni.hideTabBar();
	const appInfo = computed(() => sheep.$store('app').info);
	const {
		safeArea
	} = sheep.$platform.device;
	const pageHeight = computed(() => safeArea.height - 45);
	const tabbar = ref({
		"theme": "red",
		"style": {
			"bgType": "color",
			"bgColor": "#323b4e",
			"color": "#e6e6e5",
			"activeColor": "#1fa380"
		},
		"items": [{
				"text": t('common.home'),
				"url": "/pages/index/FirstIndex",
				"iconUrl": sheep.$url.static('/static/firstIndex/index.svg'),
				"activeIconUrl": sheep.$url.static('/static/firstIndex/index-active.svg')
			},
			{
				"text": t('common.activities'),
				"url": "/pages/index/FirstActivity",
				"iconUrl": sheep.$url.static('/static/firstIndex/activity.svg'),
				"activeIconUrl": sheep.$url.static('/static/firstIndex/activity-active.svg')
			},
			{
				"text": t('common.videos'),
				"url": "/pages/index/FirstVideo",
				"iconUrl": sheep.$url.static('/static/firstIndex/video.svg'),
				"activeIconUrl": sheep.$url.static('/static/firstIndex/video-active.svg')
			},
			{
				"text": t('common.mall'),
				"url": "/pages/index/index",
				"iconUrl": sheep.$url.static('/static/firstIndex/shop.svg'),
				"activeIconUrl": sheep.$url.static('/static/firstIndex/shop-active.svg')
			}
		]
	});

	const lunbo = ref({
		"type": "default",
		"indicator": "dot",
		"autoplay": false,
		"interval": 3,
		"items": [],
		"style": {
			"bgType": "color",
			"bgColor": "#fff",
			"marginBottom": 8
		}
	})
	const gonggao = ref({
		text: '',
		title: ''
	})
	const state = ref({
		ptjj: {
			title: '',
		},
		cyjs: {
			title: '',
		},
		xwdt: {
			title: '',
			image: ''
		}
	})
	onLoad(async () => {
		const {
			code,
			data
		} = await ArticleApi.getHomeList();
		console.log(data)
		// 更新lunbo.items
		lunbo.value.items = data.slideshowArticleList.map(article => ({
			type: 'img',
			imgUrl: article.picUrl,
			url: '/pages/public/richtext',
			urlParams: {
				title: article.title
			},
			videoUrl: '',
			title: article.title
		}));
		gonggao.value.text = data.announcement.content;
		gonggao.value.title = data.announcement.title;
		state.value.ptjj.title = data.ptBriefIntroduction.title;
		state.value.cyjs.title = data.industryIntroduction.title;
		state.value.xwdt.title = data.dynamicNews.title;
		state.value.xwdt.image = data.dynamicNews.picUrl;
	});
</script>

<style>
	.page-body {
		width: 100%;
		position: relative;
		z-index: 1;
		flex: 1;

		.header {
			width: 90%;
			margin: 0 auto;
			padding: 20rpx 0;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.logo {
				display: flex;
				align-items: center;
				color: #fff;

				image {
					width: 220rpx;
					height: 100rpx;

				}
			}


		}

		.lunbo {
			margin-bottom: 40rpx;

		}

		.gonggao,
		.nav,
		.news {
			width: 85%;
			margin: 0 auto;
			color: #fff;
			margin-bottom: 40rpx;
		}

		.gonggao {
			/* height: 120rpx; */
			overflow: hidden;

			.gonggao-item {
				width: 100%;
				display: flex;
				align-items: center;
				margin-bottom: 15rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.gonggao-item:last-child {
				margin-bottom: 0;
			}

			.gonggao-item::before {
				content: "";
				display: block;
				width: 10rpx;
				height: 10rpx;
				background: #fff;
				border-radius: 50%;
				margin-right: 10rpx;
			}
		}

		.nav {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			grid-gap: 40rpx 80rpx;

			.card {
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 15px;
				border-radius: 10px;
				background-color: #333b4e;
				flex-direction: column;

				image {
					width: 80rpx;
					height: 80rpx;
					margin-bottom: 10rpx;
				}
			}
		}

		.news {
			height: 300rpx;
			position: relative;
			border: 1px solid rgba(0, 0, 0, 0.5);

			.news-bottom {
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 50rpx;
				background: rgba(0, 0, 0, 0.5);
				padding: 10rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;

				text {
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				;

				image {
					width: 20rpx;
					height: 20rpx;
				}
			}
		}
	}
</style>