Delivery-merchant/pages/Home.vue

<template>
	<view class="bg container">
		<view class="top" :style="{ paddingTop: `${systemInfo.statusBarHeight}px` }">
			<view class="name">益禾堂</view>
			<view class="sub">
				<text>(江宁学院一食堂)</text>
				<text class="status">营业中</text>
			</view>
		</view>

		<u-row gutter="0" class="menu">
			<u-col span="4">
				<view class="menu-item" @click="navigateTo('/pages/Addstores')">
					<image src="../static/uview/imgs/info_icon_01.png" mode="widthFix"></image>
					<text>商品管理</text>
				</view>
			</u-col>
			<u-col span="4">
				<view class="menu-item" @click="navigateTo('/pages/Wallet')">
					<image src="../static/uview/imgs/info_icon_02.png" mode="widthFix"></image>
					<text>财务中心</text>
				</view>
			</u-col>
			<u-col span="4">
				<view class="menu-item">
					<image src="../static/uview/imgs/info_icon_03.png" mode="widthFix"></image>
					<text>营业状态</text>
				</view>
			</u-col>
			<u-col span="4">
				<view class="menu-item" @click="navigateTo('/pages/Evaluate')">
					<image src="../static/uview/imgs/info_icon_04.png" mode="widthFix"></image>
					<text>评价管理</text>
				</view>
			</u-col>
			<u-col span="4">
				<view class="menu-item" @click="navigateTo('/pages/News')">
					<image src="../static/uview/imgs/info_icon_05.png" mode="widthFix"></image>
					<text>消息中心</text>
				</view>
			</u-col>
			<u-col span="4">
				<view class="menu-item" @click="tool">
					<image src="../static/uview/imgs/info_icon_06.png" mode="widthFix"></image>
					<text>店铺工具</text>
				</view>
			</u-col>
		</u-row>

		<view class="card order">
			<view class="name">
				<text class="text1">代处理订单</text>
				<view class="more">
					<text @click="all">更多</text>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>

			<u-row gutter="0" class="order-menu">
				<u-col span="4">
					<view class="text-item line">
						<text class="text1">20</text>
						<text class="text2">代付款</text>
					</view>
				</u-col>
				<u-col span="4">
					<view class="text-item line">
						<text class="text1">20</text>
						<text class="text2">待配送</text>
					</view>
				</u-col>
				<u-col span="4">
					<view class="text-item">
						<text class="text1">20</text>
						<text class="text2">带退款</text>
					</view>
				</u-col>
			</u-row>
		</view>

		<view class="card datas">
			<view class="name"><text class="text1">数据统计</text></view>
			<!-- <view style="padding-left:10px;"> -->
				<u-tabs :list="tabs" :current="nowTab" :is-scroll="false" :active-color="$colors.prim" @change="changeTabs"></u-tabs>
			<!-- </view> -->
			<u-row gutter="0">
				<u-col span="4">
					<view class="text-item">
						<text class="text1">22</text>
						<text class="text2">营业收入(元)</text>
					</view>
				</u-col>
				<u-col span="4">
					<view class="text-item">
						<text class="text1">22</text>
						<text class="text2">营业收入(元)</text>
					</view>
				</u-col>
				<u-col span="4">
					<view class="text-item">
						<text class="text1">22</text>
						<text class="text2">营业收入(元)</text>
					</view>
				</u-col>
				<u-col span="4">
					<view class="text-item">
						<text class="text1">22</text>
						<text class="text2">营业收入(元)</text>
					</view>
				</u-col>
				<u-col span="4">
					<view class="text-item">
						<text class="text1">22</text>
						<text class="text2">营业收入(元)</text>
					</view>
				</u-col>
				<u-col span="4">
					<view class="text-item">
						<text class="text1">22</text>
						<text class="text2">营业收入(元)</text>
					</view>
				</u-col>
			</u-row>
		</view>

		<view class="card">
			<view class="name">
				<text class="text1">销售数据</text>
				<view class="btns">
					<view class="btn-item" :class="{ active: type === 0 }" @click="type = 0">本周</view>
					<view class="btn-item" :class="{ active: type === 1 }" @click="type = 1">本月</view>
				</view>
			</view>

			<view class="charts-box"><qiun-data-charts type="line" :chartData="chartData" :echartsApp="true" :disableScroll="true" background="none" /></view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {
			tabs: [
				{
					name: '今天'
				},
				{
					name: '昨天'
				},
				{
					name: '本周'
				},
				{
					name: '本月'
				},
				{
					name: '本周'
				}
			],
			nowTab: 0,
			type: 0,
			chartData: {
				categories: ['2016', '2017', '2018', '2019', '2020', '2021'],
				series: [
					{
						name: '成交量A',
						data: [35, 8, 25, 37, 4, 20]
					}
				]
			}
		};
	},
	computed: {
		...mapState(['systemInfo'])
	},
	methods: {
		changeTabs(index) {
			this.nowTab = index;
		},
		all(){
			uni.switchTab({
				url: '/pages/Orders'
			});
		},
		tool(){
			uni.switchTab({
				url: '/pages/Mine'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.container {
	padding: 0 20px 50px;
}
.bg {
	background: linear-gradient(180deg, #214bbe 0%, #214bbe 128px, #214bbe 150px, rgba(33, 75, 190, 0) 280px, #f2f3f5 280px);
}
.top {
	.name {
		font-size: 22px;
		color: #fff;
	}
	.sub {
		font-size: 16px;
		font-weight: bold;
		color: #ffffff;
		line-height: 26px;

		.status {
			font-size: 13px;
			font-weight: normal;
			color: #f4f7ff;
			background-color: rgba(255, 255, 255, 0.4);
			padding: 2px 5px;
			margin-left: 12px;
		}
	}
}
.menu {
	margin: 20px 0;
	border-radius: 12px;
	background-color: #ffffff;
	padding: 12px 0;
}
.menu-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 19px 0 23px;
	&:active {
		background-color: rgba($color: #000000, $alpha: 0.05);
		border-radius: 12px;
	}
	image {
		width: 36px;
		height: 36px;
	}
	text {
		font-size: 14px;
		color: #000000;
		line-height: 20px;
		margin-top: 6px;
	}
}

.card {
	background: #ffffff;
	border-radius: 16px;
	padding-bottom: 10px;
	margin-bottom: 20px;
	.name {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20px 12px 10px;

		.text1 {
			font-size: 18px;
			font-weight: bolder;
			color: #1c1c1c;
			line-height: 26px;
		}
		.more {
			font-size: 13px;
			color: #aaabad;
			line-height: 24px;
			display: flex;
			align-items: center;
		}

		.btns {
			display: flex;
			align-items: center;
			.btn-item {
				width: 66px;
				height: 32px;
				text-align: center;
				line-height: 32px;
				font-size: 12px;
				color: #626366;
				background-color: #f8f9fa;

				&.active {
					background-color: $u-type-primary-light;
					color: $u-type-primary;
				}

				&:active {
					background-color: $u-type-primary;
					color: #fff;
				}
			}
		}
	}
}
.order {
	.line {
		&::after {
			content: '';
			width: 1px;
			position: absolute;
			right: 0;
			top: 7px;
			bottom: 6px;
			background-color: #e5e5e5;
		}
	}
}
.text-item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 10px 0;
	&:active {
		background-color: rgba($color: #000000, $alpha: 0.05);
		border-radius: 4px;
	}
	.text1 {
		font-size: 30px;
		font-family: OSP;
		color: $u-type-primary;
		line-height: 40px;
		margin-top: 0;
	}
	.text2 {
		font-size: 13px;
		color: $u-type-primary;
		line-height: 18px;
		margin-top: 5px;
	}
}

.datas {
	.text-item {
		align-items: flex-start;
		padding: 10px 18px;
	}
}
</style>