<script setup>
	// 商户主页
	import {
		ref,
		computed,
	} from 'vue'
	import {
		onReachBottom,
		onPullDownRefresh,
		onShow,
		onLoad,
		onPageScroll
	} from '@dcloudio/uni-app';
	import {
		useStore
	} from 'vuex'
	// 顶部状态栏
	import statusBar from '@/components/header/statusBar'
	// 顶部导航
	import apex from '@/components/header/apex'

	// 产品列表
	import productList from '@/components/shop/productList/productList';
	// 底部导航
	import footerMneu from '@/components/footerMenu/footerMenu'
	// 
	import util from '@/common/js/util';
	// 
	const store = useStore()
	// 用户信息
	const userinfo = computed(() => {
		let result = store.state.userinfo || {}
		return result
	})
	// 是否显示顶部
	const showHeader = ref(false)

	onPageScroll((ev) => {
		if (ev.scrollTop > 44) showHeader.value = true
		else showHeader.value = false
	})

	// 跳转
	function link(url) {
		uni.navigateTo({
			url,
		})
	}
</script>

<template>
	<view class="app">
		<!-- 顶部导航 -->
		<apex title="家纺专营店" bgColor="#ffffff00"></apex>

		<!-- 个人中心 我的卡片 -->
		<view class="shopHeaderBg"></view>

		<!-- 顶部 -->
		<view class="header pr mtb30 mlr20">
			<statusBar />

			<view class="userinfo rows">
				<!-- 左头像 右昵称 收获地址 -->
				<image class="avatar wh130 br20"
					src="https://img13.360buyimg.com/n1/jfs/t1/117234/35/34799/82687/6449f2b4Fd6e2eef9/a754c5e178c9e9be.jpg.avif"
					mode="aspectFill" />
				<view class="info f1 mlr30">
					<view class="nickname f32">家纺专营店</view>

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

		<!-- 菜单 -->
		<view class="menu pr mtb30 mlr30 ptb20 f24 br20 bfff">
			<view class="item ver" @click="link('/pages/shop/settle')">
				<image src="/static/mine-ruzhushangjia.png" mode="aspectFit" class="wh50" />
				<text class="txt mt10 wsn">店铺管理</text>
			</view>
			<view class="item ver" @click="link('/pages/merchant/business-operator/index')">
				<image src="/static/mien-dianpuguanli.png" mode="aspectFit" class="wh50" />
				<text class="txt mt10 wsn">商品管理</text>
			</view>
			<view class="item ver" @click="link('pages/merchant/order/index')">
				<image src="/static/mine-dingdanguanli.png" mode="aspectFit" class="wh50" />
				<text class="txt mt10 wsn">订单管理</text>
			</view>
		</view>

	</view>
</template>

<style lang="scss">
	// 
	.apex {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 10;
		opacity: 0;
		transition: .2s;

		&.active {
			opacity: 1;
			background-color: #fff;
		}
	}

	// 菜单
	.menu {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
	}
</style>