LocalLivingServicesUniapp/pages/index/full.vue

<template>
	<view class="service">
		<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'
					},
					{
						name: '优惠券',
						url: '/static/index/coupon.png'
					},
					{
						name: '拼团活动',
						url: '/static/index/group.png'
					},
					{
						name: '客户评价',
					url: '/static/index/evaluate.png'
					},
					{
						name: '秒杀活动',
						url: '/static/index/seckill.png'
					},
					{
						name: '店铺设置',
						url: '/static/index/shop.png'
					},
					{
						name: '平台活动',
						url: '/static/index/activity.png'
					},
					{
						name: '审核查询',
						url: '/static/index/audit.png'
					},
				],
				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.name == '商品管理') {
					uni.navigateTo({
						url: '/pages/product/index'
					})
				} else if (item.name == '客户评价') {
					uni.navigateTo({
						url: '/pages/evaluate/evaluate'
					})
				}
			},
			orderFunc(item) {
				if (item.name == '扫码核销') {
					uni.scanCode({
						success: (res) => {
							uni.showToast({
								title: `扫码成功: ${res.result}`,
								icon: "none",
							});
						},
						fail: (err) => {
							uni.showToast({
								title: "扫码失败，请重试",
								icon: "none",
							});
						},
					});
				}
			},
			//返回
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
		}
	}
</script>

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

		.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>