jiuyiUniapp/jiuyi2/pages/shop/store/index.vue

<script setup>
	// 店铺首页
	import {
		ref
	} from 'vue'
	import {
		onLoad,
		onPageScroll
	} from '@dcloudio/uni-app';

	// 顶部
	import apex from '@/components/header/apex.vue'
	// 商品列表
	import productList from '@/components/shop/productList/productList'

	const filteredList = ref([{
		label: '默认',
		value: 1,
		isUpDown: false,
		slot: null
	}, {
		label: '销量',
		value: 2,
		isUpDown: false,
		slot: null
	}, {
		label: '新品',
		value: 3,
		isUpDown: false,
		slot: null
	}, {
		label: '价格',
		value: 4,
		isUpDown: true,
		slot: null
	}])
	// 顶部导航背景颜色
	const apexBgColor = ref('#ffffff00')

	onPageScroll((ev) => {
		apexBgColor.value = ev.scrollTop > 44 ? '#fff' : '#ffffff00'
	})
</script>

<template>
	<view class="app">
		<!-- 个人中心 我的卡片 -->
		<apex :bgColor="apexBgColor" mode="flex">
			<template #content>
				<view class="search df jcr">
					<view class="">
						<image class="wh50" src="/static/share2.png" mode="aspectFit" />
					</view>
				</view>
			</template>
		</apex>

		<!--  -->
		<view class="shopHeaderBg"></view>

		<!-- 店铺卡片 -->
		<view class="store pr rows ptb25 plr25 mt40">
			<!-- 店铺头像 -->
			<image class="wh120 fs0 br10" src="/static/logo.png" mode="aspectFill" />
			<!-- 店铺信息 名称 评分 关注数量 -->
			<view class="info f1 ml20">
				<!-- 店铺名称 -->
				<view class="c333 f28">
					<text>店铺名称</text>
				</view>

				<view class="df aic mt10">
					<!-- 评分 -->
					<view class="f24 c666 df aic" v-if="0">
						<uni-rate class="mr10" :value="4.5" :size="12" activeColor="#FF9B27" readonly
							:showScore="true"></uni-rate>
						<text>4.5</text>
					</view>
					<!-- 关注数量 -->
					<view class="c666 f24">
						<text>123关注</text>
					</view>
				</view>
			</view>

			<!-- 按钮区 -->
			<view class="btns w150">
				<view>
					<view class="btn ti warmHollow fmid" @click="followButton">
						<uni-icons class="mr10" color="#FF9B27" type="plusempty" size="13" />
						<text>关注</text>
					</view>
				</view>

				<view class="mt10">
					<view class="btn ti warmHollow fmid">
						<image class="kefu wh30" src="/static/customer-service1.png" mode="aspectFit" />
						<text>客服</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 商品列表 -->
		<view class="product oh ptb30 plr30">
			<productList ref="product" />
		</view>
	</view>
</template>

<style lang="scss" scoped>
	// 
	.store {
		// margin-top: -50rpx;
	}
</style>