app/pages/index/index.vue

<!-- 首页，支持店铺装修 -->
<template>
	<view v-if="template">
		<s-layout title="首页" navbar="custom" tabbar="/pages/index/index" :bgStyle="template.page"
			:navbarStyle="template.navigationBar" onShareAppMessage>

			<view class="home-top">
				<image class="disImg" :src="sheep.$url.static('/static/home/homeTop.png')" />
				<view class="search-box">
					<u-search placeholder="请输入搜索内容" @search="onSearch" shape="round" v-model="keyword"
						:showAction="false"></u-search>
				</view>
				<!-- <image class="home-xq" :src="sheep.$url.static('/static/home/homexq.png')" /> -->
				<view v-for="(item, index) in template.components" :key="index" :styles="item.property.style">
					<s-block-item v-if="item.id == 'Carousel'" :type="item.id" :data="item.property"
						:styles="item.property.style" />
				</view>
			</view>
			<view class="home-container">
				<com-title title="产品服务" />
				<productService />
				<com-title title="服务优势" />
				<serviceAdvantages />
				<com-title title="服务案例" />
				<view v-for="(item, index) in template.components" :key="index" :styles="item.property.style">
					<s-block-item v-if="item.id == 'ProductCard'" :type="item.id" :data="item.property"
						:styles="item.property.style" />
				</view>

			</view>
		</s-layout>
	</view>
</template>

<script setup>
import uSearch from '@/uni_modules/vk-uview-ui/components/u-search/u-search.vue'
import {
	computed,
	ref
} from 'vue';
import {
	onLoad,
	onPageScroll,
	onPullDownRefresh
} from '@dcloudio/uni-app';
import comTitle from './com/title.vue';
import productService from './com/productServic.vue';
import serviceAdvantages from './com/serviceAdvantages.vue';
import sheep from '@/sheep';
import $share from '@/sheep/platform/share';
// 隐藏原生tabBar
uni.hideTabBar();
const navigationBar = ref({
	"otherCells": [
		{
			"left": 0,
			"right": 8,
			"top": 0,
			"bottom": 1,
			"height": 1,
			"width": 8,
			"type": "text",
			"fontSize": 20,
			"fontWeight": "bold",
			"textColor": "#1E2129",
			"text": "赢伟达"
		}
	],
	"bgType": "color",
	"bgColor": "transparent"
})
const template = computed(() => sheep.$store('app').template?.home);


onLoad((options) => {
	// #ifdef MP
	// 小程序识别二维码
	if (options.scene) {
		const sceneParams = decodeURIComponent(options.scene).split('=');
		console.log("sceneParams=>", sceneParams);
		options[sceneParams[0]] = sceneParams[1];
	}
	// #endif

	// 预览模板
	if (options.templateId) {
		sheep.$store('app').init(options.templateId);
	}

	// 解析分享信息
	if (options.spm) {
		$share.decryptSpm(options.spm);
	}

	// 进入指定页面(完整页面路径)
	if (options.page) {
		sheep.$router.go(decodeURIComponent(options.page));
	}
});
const keyword = ref("")
const onSearch = (e) => {
	if (e) {
		sheep.$router.go('/pages/goods/list', { keyword: e });
		setTimeout(() => {
			keyword.value = '';
		}, 100);
	}
}

// 下拉刷新
onPullDownRefresh(() => {
	sheep.$store('app').init();
	setTimeout(function () {
		uni.stopPullDownRefresh();
	}, 800);
});


onPageScroll(() => { });
</script>

<style lang="scss" scoped>
// #ifdef H5
:deep(.ui-fixed-box) {
	position: absolute !important;
	background: transparent !important;

	.nav-title {
		font-weight: bold;
	}
}

// #endif
// #ifdef MP
:deep(.ui-fixed-box) {
	position: fixed !important;
	background: #fff !important;

	.nav-title {
		font-weight: bold;
	}
}

// #endif

.home-container {
	width: 100%;
	height: 100%;
	padding: 0 16px;
}

.home-top {
	width: 100%;
	position: relative;
	height: 230px;
	padding-top: 44px;
	top: -44px;
	z-index: 1;


	.search-box {
		padding: 0 16px;
		margin-top: 12px;
	}

	.home-xq {
		width: calc(100% - 32px);
		height: 164px;
		padding: 16px;
	}
}

.disImg {
	width: 100%;
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	// height: 100%;
}
</style>