LocalLivingServicesUniapp/pages/index/full.vue

<template>
	<view class="service">
		<view class="head">
		<view class="top"></view>
			<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 class="function">
			<view class="title">
				设置
			</view>
			<view class="fun_box">
				<view class="item"style="margin: 0px;" @click="loginOut">
					<image src="@/static/login/tuichu.png" mode=""></image>
					退出
				</view>
			</view>
		</view>

		<!-- 弹窗 -->
		<Modal ref="myModal"
			:title="modalText.title" 
			:content="modalText.content" 
			:showCancelButton="false"
		/>
	</view>
</template>

<script>
import Modal from '@/components/modal/index.vue';
	import api from "@/api/api";
export default {
	components: {
		Modal,
	},
	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'
				},
			],
			// 弹窗
			modalText: {
				title: '提示',
				btntext: '好的',
				// 很抱歉，您没有通过平台审核，如有疑问请联系平台客服。
				content: '报名成功，请等待平台审核'
			},
		}
	},
	methods: {
		loginOut(){
			uni.showModal({
				title: '提示',
				content: '是否确认退出当前账号？',
				success: (res) => {
					if (res.confirm) {
						api.logout().then(res=>{
							uni.clearStorageSync();
							uni.navigateTo({
								url: `/pages/login/login`
							});
						})
					}
				}
			});
		},
		storeFunc(item) {
			// 需要先报名
			if (item.name === '团餐活动') {
				this.$http.post('/groupmeal/gmMerchantApplicationRecord/isApply', {}).then(res => {
					if (!res.data.result) {
						uni.navigateTo({
							url: '/pages/groupMeal/goods/index'
						});
					} else {
						let status = res.data.result.status;
						if (status == 1) {
							uni.navigateTo({
								url: item.path
							});
						} else {
							this.modalText.content = status == 2 ? '很抱歉，您没有通过平台审核，如有疑问请联系平台客服。' : '团餐活动报名审核中，请耐心等待';
							this.$refs.myModal.onOpen();
						}
					}
				});
				return;
			}
			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;

	

	.head {
		width: 100%;
		height: calc(var(--status-bar-height) + 112rpx ) ;
		padding: 20rpx;
		display: flex;
		align-items: center;
		background: linear-gradient(180deg, #D6E9FF 0%, #FFFFFF 100%);
		position: relative;
		.top {
			width: 100%;
			// height: ;
		}

		.cuIcon-back {
			font-size: 40rpx;
			// margin-right: 40rpx;
			position: absolute;
			left: 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>