cberpapp/pages/report/report.vue

<template>
	<view>
		
		<view class="grid col-3  padding-sm">
			<view class="padding-sm" v-for="(item,index) in list" :key="index" >
				<view class="padding radius text-center light"  @click="go(item.url)">
					<view class="text-sl iconfont " :class="item.icon"></view>
					<view class="margin-top-sm text-Abc text-sm">{{item.text}}</view>
				</view>
			</view>
		</view>
		<view class="middle-line-x"></view>
		
		<!-- <view class="cu-bar bg-white solid-bottom">
			<view class="action">
				<text class="cuIcon-title text-blue "></text>其他统计信息
			</view>			
		</view> -->
		<view class="grid col-3 bg-white padding-sm">
			<view class="padding-sm" v-for="(item,index) in list2" :key="index" >
				<view class="padding radius text-center light" :class="item.color" @click="go(item.url)">
					<view class="text-sl iconfont" :class="item.icon"></view>
					<view class="margin-top-sm text-Abc text-sm">{{item.text}}</view>
				</view>
			</view>
		</view>
		
		
		
		
		<view class="uni-padding-wrap" v-show="false">
			<view class="flex-row margin-t20 margin-b20">
				<navigator class="flex-1" url="../goods/goodsStatistics">
					<image mode="aspectFit" src='../../static/img/goods.png' class=" head-function-img"></image>
					<view>
						<text class="func_name">商品销售统计</text>
					</view>
				</navigator>
				<navigator class="flex-1" url="../brand/brandSurface">
					<image mode="aspectFit" src='../../static/img/goods.png' class=" head-function-img"></image>
					<view>
						<text class="func_name">品牌销售统计</text>
					</view>
				</navigator>
				<navigator class="flex-1" url="../Summary/customer">
					<image mode="aspectFit" src='../../static/img/goods.png' class=" head-function-img"></image>
					<view>
						<text class="func_name">客户销售统计</text>
					</view>
				</navigator>
			</view>
			
			
			
			<view class="flex-row margin-t20 margin-b20">
				<navigator class="flex-1" url="../Summary/business/business">
					<image mode="aspectFit" src='../../static/img/goods.png' class=" head-function-img"></image>
					<view>
						<text class="func_name">业务业绩汇总</text>
					</view>
				</navigator>
				<navigator class="flex-1" url="../Summary/region/region">
					<image mode="aspectFit" src='../../static/img/goods.png' class=" head-function-img"></image>
					<view>
						<text class="func_name">区域业绩统计</text>
					</view>
				</navigator>
				<navigator class="flex-1" url="../Summary/branch/branch">
					<image mode="aspectFit" src='../../static/img/goods.png' class=" head-function-img"></image>
					<view>
						<text class="func_name">分店业绩明细</text>
					</view>
				</navigator>
				<navigator class="flex-1" url="../Summary/sale/sale">
					<image mode="aspectFit" src='../../static/img/goods.png' class=" head-function-img"></image>
					<view>
						<text class="func_name">销售比例排行</text>
					</view>
				</navigator>
			</view>
			
			
			
			
			<view class="flex-row margin-t20 margin-b20">
				<navigator class="flex-1" url="../Summary/Undelivered/Undelivered">
					<image mode="aspectFit" src='../../static/img/goods.png' class=" head-function-img"></image>
					<view>
						<text class="func_name">未送货客户</text>
					</view>
				</navigator>
				<navigator class="flex-1" url="../Summary/difference/difference">
					<image mode="aspectFit" src='../../static/img/goods.png' class=" head-function-img"></image>
					<view>
						<text class="func_name">送货与验收差异</text>
					</view>
				</navigator>
				<navigator class="flex-1" url="../Summary/collection/collection">
					<image mode="aspectFit" src='../../static/img/goods.png' class=" head-function-img"></image>
					<view>
						<text class="func_name">有关人员回款统计</text>
					</view>
				</navigator>
				<navigator class="flex-1" url="../Summary/profit/profit">
					<image mode="aspectFit" src='../../static/img/goods.png' class=" head-function-img"></image>
					<view>
						<text class="func_name">客户利润分析</text>
					</view>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
				list:[
					{
						icon: 'icon-signboard-fill text-cyan',
						iconText:'\ue8bc;',
						color:"bg-cyan",
						url: '../goods/goodsStatistics',
						text: '商品销售统计',
						badge: '0',
						type: "primary",
					},
					{
						icon: 'icon-discount-fill text-green',
						iconText:'\ue8bc;',
						color:"bg-green",
						url: '../brand/brandSurface',
						text: '品牌销售统计',
						badge: '0',
						type: "primary",
					},
					{
						icon: 'icon-office-supplies-fill text-olive',
						iconText:'\ue8bc;',
						color:"bg-olive",
						url: '../Summary/customer',
						text: '客户销售统计',
						badge: '0',
						type: "primary",
					},
				],
				
				
				list2:[
					{
						icon: 'icon-tradealert',
						iconText:'\ue8bc;',
						color:"bg-grey",
						url: '../Summary/businessList',
						text: '业务业绩汇总',
						badge: '0',
						type: "primary",
					},
					{
						icon: 'icon-online-tracking',
						iconText:'\ue8bc;',
						color:"bg-grey",
						url: '../Summary/regionList',
						text: '区域业绩统计',
						badge: '0',
						type: "primary",
					},
					{
						icon: 'icon-store',
						iconText:'\ue8bc;',
						color:"bg-grey",
						url: '../Summary/branchList',
						text: '分店业绩明细',
						badge: '0',
						type: "primary",
					},
					{
						icon: 'icon-tradingdata',
						iconText:'\ue8bc;',
						color:"bg-grey",
						url: '../Summary/saleList',
						text: '销售比例排行',
						badge: '0',
						type: "primary",
					},
					{
						icon: 'icon-landtransportation',
						iconText:'\ue8bc;',
						color:"bg-grey",
						url: '../Summary/undeliveredList',
						text: '未送货客户',
						badge: '0',
						type: "primary",
					},
					{
						icon: 'icon-pin',
						iconText:'\ue8bc;',
						color:"bg-grey",
						url: '../Summary/differenceList',
						text: '送货与验收差异',
						badge: '0',
						type: "primary",
					},
					{
						icon: 'icon-consumption',
						iconText:'\ue8bc;',
						color:"bg-grey",
						url: '../Summary/collectionList',
						text: '回款统计',
						badge: '0',
						type: "primary",
					},
					{
						icon: 'icon-consumption-fill',
						iconText:'\ue8bc;',
						color:"bg-grey",
						url: '../Summary/profitList',
						text: '客户利润分析',
						badge: '0',
						type: "primary",
					},
				],
				
				
			}
		},
		methods: {
			go(url){
				uni.navigateTo({
					url:url
				})
			}
		}
	}
</script>

<style>
	.flex-row {
		/* border: solid 1upx red; */
		display: flex;
		flex-direction: row;
		/* flex-flow: row wrap; */
	}

	.flex-1 {
		/* width: 172rpx; */
		flex: 0 0 25%;
		text-align: center;
	}

	/* 公用图片 */
	.head-function-img {
		width: 120rpx;
		/* margin-left: 26rpx; */
		height: 120rpx;
	}

	.func_name {
		/* width: 166rpx; */
		text-align: center;
		font-size: 24rpx;
	}
</style>