tf-business/pages/tabbar/index/index.vue

<template>
	<view class="home">
		<capsule @getHeight="getCapusleHeight"></capsule>
		<view class="bg-box"></view>
		<view class="header-top" :style="{ height: menuButtonHeight + 'px' }">
			<view class="shop-title">{{ shopInfo.shopName }}</view>
			<view class="shop-state">
				<tui-icon style="height: 36rpx;" name="circle-fill" color="rgb(70,208,88)" :size="20"></tui-icon>
				<text>营业中</text>
			</view>
		</view>
		<view class="main" :style="{ height: mainHeight + 'px' }">
			<view class="main-tool">
				<view class="tool-list">
					<view class="tool-item" v-for="item in toolList" :key="item.title" @click="scanCode(item.url)">
						<view class="item-img" :style="{ background: item.background }">
							<image class="" :src="item.img" />
						</view>
						<view class="item-text">{{ item.title }}</view>
					</view>
				</view>
				<view class="tube-list">
					<view class="tube-item" v-for="item in tobeList" :key="item.title">
						<image :src="item.img" />
						<text>{{ item.title }}</text>
					</view>
				</view>
			</view>
			<view class="main-container"></view>
		</view>
		<!-- <view class="header-content"></view>
		<view class="main-tool">
			<view class="tool-list">
				<view class="tool-item" v-for="item in toolList" :key="item.title" @click="scanCode(item.url)">
					<image :src="item.img" alt="" />
					<text>{{ item.title }}</text>
				</view>
			</view>
		</view> -->
		<view class="summarize-box">
			<view class="summarize-left">经营概括</view>
			<view class="summarize-right">
				<text>更多</text>
				<tui-icon name="arrowright" :size="24"></tui-icon>
			</view>
		</view>
		<view class="statistics-list">
			<view class="statistics-item" v-for="(item, index) in statisticsList" :key="index">
				<view class="statistics-trans">{{ item.title }}</view>
				<view class="statistics-price">
					<view class="price">{{ item.price }}</view>
					<view class="text">较昨日</view>
				</view>
				<view class="proportion" v-if="item.state !== 2">
					<view class="proportion-box">
						<text :style="{ color: item.state == 0 ? '#42D373' : '#EF530E' }">{{ item.proportion }}%</text>
						<image
							:src="item.state == 0 ? require('@/static/image/home/decline-icon.png') : require('@/static/image/home/rise-icon.png')"
							alt="" />
						<!-- <image src="@/static/image/home/decline-icon.png" alt="" /> -->
					</view>
				</view>
				<view class="chart-img" v-if="item.state !== 2">
					<template v-if="item.state == 0">
						<image
							:src="item.proportion <= 16 ? require('@/static/image/home/green.png') : require('@/static/image/home/green-more.png')"
							alt="" />
					</template>
					<template v-if="item.state == 1">
						<image src="@/static/image/home/red.png" alt="" />
					</template>
				</view>
				<view class="empty" v-if="item.state == 2">
					<view class="left"></view>
					<view class="bottom"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getShopDetail } from '@/config/index.js'
import { toolList, tobeList, statisticsList } from './data'
export default {
	created() {
		//  获取胶囊的高度
		// #ifdef MP-WEIXIN
		let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
		this.menuButtonHeight = menuButtonInfo.height
		// #endif

		//  请求获取店铺的信息
		this.getShop()
	},
	data() {
		return {
			//  胶囊的高度
			menuButtonHeight: null,
			toolList: toolList,
			tobeList: tobeList,
			statisticsList: statisticsList,
			// 店铺信息
			shopInfo: {},
			//  动态计算 main 的高度
			mainHeight: 0
		}
	},
	onLoad() {

	},
	methods: {
		getCapusleHeight(e) {
			this.mainHeight = 327 - e - this.menuButtonHeight + 16
			console.log(this.mainHeight);
		},
		//  获取店铺详情
		async getShop() {
			let { data } = await getShopDetail({});
			this.shopInfo = data
			//  将店铺存到本地
			uni.setStorageSync('shopInfo', data)
		},
		// 扫码
		scanCode(url) {
			uni.navigateTo({
				url: url
			});
		}
	}
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>