guosen-ldt-shop/pages/index/index.vue

<template>
	<view class="">
		<u-navbar :is-back="false" title="联兑通商户版"></u-navbar>
		<view class="margin-30">
			<view class="title ">
				<view class="icon">
					<image src="@/static/icon/dianpu.png" mode=""></image>
				</view>
				<view class="center margin-left-10">
					<text>店铺名称</text>
				</view>
			</view>
			
			<view class="cu-list grid col-3 no-border top-menu" >
				<view class="cu-item"  @click="$jump(item.path)" v-for="(item,index) in menuList" :key="index">
					<view class="grid-icon margin-top-20" >
						<image  style="width: 66rpx;height: 66rpx;" :src="item.icon"/>
					</view>
					<text  style="color: #fff;font-size: 26rpx;" >{{item.name}}</text>
				</view>
			</view>
			
			<view class="menu-list">
				<view @click="$jump('/pages/bill/bill')" class="menu menu1">
					<view class="menu-top">
						<image src="@/static/icon/bill.png"></image>
						<view class="center padding-left-20">
							<text class="text-lg">我的账单</text>
						</view>
					</view>
					<view class="menu-bottom">
						<view class="">
							<text>今日营收</text>
							<text>1888.00</text>
						</view>
						<view class="">
							<text>总资产</text>
							<text>1888.00</text>
						</view>
					</view>
				</view>
				<view class="menu menu2" @click="$jump('/pages/member/member')">
					<view class="menu-top">
						<image src="@/static/icon/center.png"></image>
						<view class="center padding-left-20">
							<text class="text-lg">会员中心</text>
						</view>
					</view>
					<view class="menu-bottom">
						<view class="">
							<text>新增会员</text>
							<text>888</text>
						</view>
						<view class="">
							<text>会员总数</text>
							<text>18888</text>
						</view>
					</view>
				</view>
			</view>
			
			<view class="market" >
				<text class="title">营销管理</text>
				<view class="cu-list grid col-2 no-border margin-top-30" >
					<view class="cu-item"  @click="$jump(item.path)" v-for="(item,index) in marketList" :key="index">
						<view class="center">
							<view class="icon" :style="item.background">
								<image :src="item.icon" mode=""></image>
							</view>
						</view>
						<text  style="color: #222222;font-size: 26rpx;margin-top: 20rpx;" >{{item.name}}</text>
						<view class="cu-tag bg-red badge" v-if="item.count>0">{{item.count}}</view>
					</view>
				</view>
			</view>
			
			<view class="system">
				<text class="title">数字化系统</text>
				<view class="cu-list grid col-4 no-border margin-top-30" style="border-radius:20rpx ;">
					<view class="cu-item" @click="$jump(item.path)" v-for="(item,index) in systemList" :key="index">
						<view class="grid-icon" >
							<image mode="heightFix" style="height: 56rpx;" :src="item.icon"/>
						</view>
						<text  style="color: #222222;font-size: 26rpx;" >{{item.name}}</text>
						<view class="cu-tag bg-red badge" v-if="item.count>0">{{item.count}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				menuList:[
					{
						icon:'/static/icon/scan.png',
						name:'扫一扫',
						path:'/pages/card/card'
					},
					{
						icon:'/static/icon/pay.png',
						name:'付款码',
						path:'/pages/card/card'
					},
					{
						icon:'/static/icon/card.png',
						name:'卡包',
						path:'/pages/card/card'
					}
				],
				marketList:[
					{
						icon:'/static/icon/publish.png',
						name:'发起活动',
						background:"background-image:linear-gradient(#FF9549,#FCB07B)",
						path:'/pages/publish/publish',
						count:0
					},
					{
						icon:'/static/icon/list.png',
						name:'活动清单',
						background:"background-image:linear-gradient(#5892F7,#67BBF9)",
						path:'/pages/activity/activity',
						count:99
					},
				],
				systemList:[
					{
						icon:'/static/icon/system1.png',
						name:'外卖平台',
						path:'/pages/mine/card/card'
					},
					{
						icon:'/static/icon/system2.png',
						name:'预约系统',
						path:'/pages/mine/card/card'
					},
					{
						icon:'/static/icon/system3.png',
						name:'ERP系统',
						path:'/pages/mine/card/card'
					},
					{
						icon:'/static/icon/system4.png',
						name:'线上商城',
						path:'/pages/mine/card/card'
					},
					{
						icon:'/static/icon/system5.png',
						name:'门店管理',
						path:'/pages/mine/card/card'
					},
					{
						icon:'/static/icon/add.png',
						name:'添加服务',
						path:'/pages/mine/card/card'
					},
				]
			}
		},
		onLoad() {
			
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	
	.cu-list.grid>.cu-item .cu-tag {
	    right: auto;
	    left: 54%;
	    margin-left: 20rpx;
	}
	
	.title{
		display: flex;
		.icon{
			background-color: #FFFFFF;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 50rpx;
			height: 50rpx;
			image{
				width: 36rpx;
				height: 36rpx;
			}
		}
		text{
			font-weight: 800;
			font-size: 32rpx;
			color: #303030;
		}
	}
	
	.top-menu{
		border-radius: 20rpx;
		margin-top: 20rpx;
		background-image: linear-gradient(to right,#FBA33D,#FF8D32);
	}
	
	.menu-list{
		display: flex;
		justify-content: space-between;
		padding-top: 20rpx;	
		.menu{
			width: 48.8%;
			color: #FFFFFF;
			display: flex;
			flex-direction: column;
			align-items: center;
			border-radius: 14rpx;
			padding:30rpx 20rpx;
			
			.menu-top{
				display: flex;
				image{
					width: 70rpx;
					height: 70rpx;
				}
			}
			
			.menu-bottom{
				padding-top: 20rpx;
				font-size: 30rpx;
				display: flex;
				justify-content: space-around;
				width: 100%;
				
				view{
					display: flex;
					flex-direction: column;
					text-align: center;
					
					text:first-child{
						margin-bottom: 10rpx;
						font-size: 26rpx;
						color: #E0E2F6;
					}
				}
			}
		}
		
		.menu1{
			background-color: #5C6186;
		}
		.menu2{
			background-color: #E19D5B;
		}
	}
	
	.market{
		margin-top: 20rpx;
		border-radius: 20rpx;
		background-color: #FFFFFF;
		padding: 30rpx 50rpx 20rpx;
		.title{
			font-weight: 800;
		}
		
		.icon{
			width: 120rpx;
			height: 120rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 20rpx;
			padding: 20rpx;
			image{
				width: 60rpx;
				height: 60rpx;
			}
		}
	}
	
	.system{
		margin-top: 20rpx;
		border-radius: 20rpx;
		background-color: #FFFFFF;
		padding: 30rpx 50rpx 20rpx;
		
		.title{
			font-weight: 800;
		}
	}
</style>