LocalLivingServicesUniapp/pages/index/full.vue

<template>
	<view class="service">
		<view class="top"></view>
		<view class="head">
			<span class="cuIcon-back" @click="back"></span>
			<view class="case">
				全部服务
			</view>
		</view>
		<view class="function">
			<view class="title">
				店铺经营
			</view>
			<view class="fun_box">
				<view class="item" v-for="(item,index) in store" :key="index" @click="storeFunc(item)">
					<image :src="item.url" mode=""></image>
					{{item.name}}
				</view>
			</view>
		</view>
		<view class="function">
			<view class="title">
				订单管理
			</view>
			<view class="fun_box">
				<view class="item " v-for="(item,index) in order" :key="index" @click="orderFunc(item)" style="margin: 0px;">
					<image :src="item.url" mode=""></image>
					{{item.name}}
				</view>
			</view>
		</view>
		<view class="function">
			<view class="title">
				财务对账
			</view>
			<view class="fun_box">
				<view class="item" v-for="(item,index) in finance" :key="index" style="margin: 0px;">
					<image :src="item.url" mode=""></image>
					{{item.name}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				store: [{
						name: '商品管理',
						url: '/static/index/product.png',
						path: '/pages/product/index'
					},
					{
						name: '优惠券',
						url: '/static/index/coupon.png'
					},
					{
						name: '拼团活动',
						url: '/static/index/group.png'
					},
					{
						name: '客户评价',
						url: '/static/index/evaluate.png',
						path: '/pages/evaluate/evaluate'
					},
					{
						name: '秒杀活动',
						url: '/static/index/seckill.png'
					},
					{
						name: '店铺设置',
						url: '/static/index/shop.png'
					},
					{
						name: '团餐活动',
						url: '/static/index/groupMeal.png',
						path: '/pages/groupMeal/goods/list'
					},
					{
						name: '财务管理',
						url: '/static/index/audit.png',
						path: '/pages/financial/management'
					},
				],
				order: [
					// {
					// 	name: '订单管理',
					// 	url: '/static/index/indent.png'
					// },
					{
						name: '核销记录',
						url: '/static/index/history.png'
					},
					{
						name: '退款管理',
						url: '/static/index/refund.png'
					},
					{
						name: '核销',
						url: '/static/index/coupon.png'
					},
				],
				finance: [{
						name: '提现管理',
						url: '/static/index/with.png'
					},
					{
						name: '收款核销',
						url: '/static/index/collection.png'
					},
				]
			}
		},
		methods: {
			storeFunc(item) {
				if (!item.path) return;
				uni.navigateTo({
					url: item.path
				})
			},
			orderFunc(item) {
				if (item.name == '核销') {
					uni.navigateTo({
						url:'/pages/scan/manual'
					})
				}
			},
			//返回
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.service {
		width: 100%;
		height: 100%;
		background: #F7F8FC;

		/*#ifdef APP-PLUS*/
		.top {
			width: 100%;
			height: var(--status-bar-height);
			background: linear-gradient(180deg, #D6E9FF 0%, #FFFFFF 100%);
		}

		/*#endif*/
		.head {
			width: 100%;
			height: 112rpx;
			padding: 20rpx;
			display: flex;
			align-items: center;
			background: linear-gradient(180deg, #D6E9FF 0%, #FFFFFF 100%);
			position: relative;

			.cuIcon-back {
				font-size: 40rpx;
				margin-right: 40rpx;
			}

			.case {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				font-size: 36rpx;
				font-weight: 500;
			}
		}

		.function {
			background-color: #fff;
			padding-top: 12rpx;
			margin-bottom: 20rpx;

			.title {
				padding: 0px 40rpx;
				width: 100%;
				height: 53rpx;
				border-bottom: 1px solid #eee;
				font-size: 28rpx;
				font-weight: 600;
			}

			.fun_box {
				display: flex;
				// justify-content: space-between;
				flex-wrap: wrap;
				// gap: 40rpx; 
				padding: 36rpx 40rpx;

				.item {
					width: 20%;
					display: flex;
					align-items: center;
					flex-direction: column;
					// margin-bottom: 20rpx;
					// margin-right: 40rpx;
					font-size: 24rpx;

					image {
						width: 56rpx;
						height: 56rpx;
						margin-bottom: 10rpx;
					}
				}

				.nomargin {
					margin-bottom: 0px;
				}

				.item:nth-child(-n+5) {
					margin-bottom: 36rpx;
				}
			}
		}
	}
</style>