home.vue 11.3 KB
<template>
	<view class="warpbox">
		<!-- 业务操作板块 -->
		<view class="warpboxss">
			<view class="warpboxs-small-title" :style="isshow1?'padding-bottom: 30rpx;':''" @click="isshow1=!isshow1">
				<view><text class="warpboxs-small-title-line"></text>业务操作</view>
				<view class="warpboxs-small-title-img">
					<u-icon name="arrow-down" size="20" color="#666" :style="isshow1?'transform: rotate(0deg);':'transform: rotate(-180deg);'"></u-icon>
				</view>
			</view>
			<view v-show="isshow1">
				<view class="fun_box_fir">
					<view v-if="iskjb" class="fun_fir_1 fun_fir_border" @click="goToPage('/pages/lx/lx')">
						<view class="icon">
							<image src="/static/home/order.png" mode="aspectFit"></image>
						</view>
						<view>开单</view>
					</view>
					<view v-if="iskjb" class="fun_fir_1 fun_fir_border" @click="goToPage('/pages/lx/lx?type=1')">
						<view class="icon">
							<image src="/static/home/activity-order.png" mode="aspectFit"></image>
						</view>
						<view>活动开单</view>
					</view>
					<view v-if="iskjb" class="fun_fir_1 fun_fir_border" @click="goToPage('/pages/member-consume/member-consume')">
						<view class="icon">
							<image src="/static/home/consume-card.png" mode="aspectFit"></image>
						</view>
						<view>耗卡</view>
					</view>
				</view>
				<view class="fun_box_fir">
					<view v-if="iskjb" class="fun_fir_1 fun_fir_border" @click="goToPage('/pages/refund/refund')">
						<view class="icon">
							<image src="/static/home/refund-card.png" mode="aspectFit"></image>
						</view>
						<view>退卡</view>
					</view>
					<view v-if="iskjb" class="fun_fir_1 fun_fir_border" @click="goToPage('/pages/transferCard/transferCard')">
						<view class="icon">
							<image src="/static/home/transfer-card.png" mode="aspectFit"></image>
						</view>
						<view>转卡</view>
					</view>
					<view v-if="iskjb" class="fun_fir_1 fun_fir_border" @click="goToPage('/pages/member-create/member-create')">
						<view class="icon">
							<image src="/static/home/create-member.png" mode="aspectFit"></image>
						</view>
						<view>建档</view>
					</view>
				</view>
				<view class="fun_box_fir">
					<view v-if="iskjb" class="fun_fir_1 fun_fir_border" @click="goToPage('/pages/expansion/expansion')">
						<view class="icon">
							<image src="/static/home/expansion.png" mode="aspectFit"></image>
						</view>
						<view>拓客</view>
					</view>
					<view v-if="iskjb" class="fun_fir_1 fun_fir_border" @click="goToPage('/pages/lx/lx?time=2025-10-01')">
						<view class="icon">
							<image src="/static/home/dingxuan-order.png" mode="aspectFit"></image>
						</view>
						<view>鼎轩开单</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 会员管理板块 -->
		<view class="warpboxss">
			<view class="warpboxs-small-title" :style="isshow2?'padding-bottom: 30rpx;':''" @click="isshow2=!isshow2">
				<view><text class="warpboxs-small-title-line"></text>会员管理</view>
				<view class="warpboxs-small-title-img">
					<u-icon name="arrow-down" size="20" color="#666" :style="isshow2?'transform: rotate(0deg);':'transform: rotate(-180deg);'"></u-icon>
				</view>
			</view>
			<view v-show="isshow2">
				<view class="fun_box_fir">
					<view class="fun_fir_1 fun_fir_border" @click="goToPage('/pages/clue-list/clue-list')">
						<view class="icon">
							<image src="/static/home/member.png" mode="aspectFit"></image>
						</view>
						<view>会员</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 采购报销板块 -->
		<view class="warpboxss">
			<view class="warpboxs-small-title" :style="isshow3?'padding-bottom: 30rpx;':''" @click="isshow3=!isshow3">
				<view><text class="warpboxs-small-title-line"></text>采购报销</view>
				<view class="warpboxs-small-title-img">
					<u-icon name="arrow-down" size="20" color="#666" :style="isshow3?'transform: rotate(0deg);':'transform: rotate(-180deg);'"></u-icon>
				</view>
			</view>
			<view v-show="isshow3">
				<view class="fun_box_fir">
					<view class="fun_fir_1 fun_fir_border" @click="goToPage('/pages/purchase-list/purchase-list')">
						<view class="icon">
							<image src="/static/home/purchase.png" mode="aspectFit"></image>
						</view>
						<view>物品购买</view>
					</view>
					<view class="fun_fir_1 fun_fir_border" @click="goToPage('/pages/reimbursement-list/reimbursement-list')">
						<view class="icon">
							<image src="/static/home/reimbursement-apply.png" mode="aspectFit"></image>
						</view>
						<view>报销申请</view>
					</view>
					<view v-if="newuserInfo.gw == '董事长' || newuserInfo.gw == '总裁' || newuserInfo.gw == '总经理' || newuserInfo.gw == '主管' || newuserInfo.mobilePhone == '18884847552' || newuserInfo.mobilePhone == '17882512738' || newuserInfo.mobilePhone == '18588888888'" class="fun_fir_1 fun_fir_border" @click="goToPage('/pages/reimbursement-audit-list/reimbursement-audit-list')">
						<view class="icon">
							<image src="/static/home/reimbursement-audit.png" mode="aspectFit"></image>
						</view>
						<view>报销审核</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 记录查询板块 -->
		<view class="warpboxss">
			<view class="warpboxs-small-title" :style="isshow4?'padding-bottom: 30rpx;':''" @click="isshow4=!isshow4">
				<view><text class="warpboxs-small-title-line"></text>记录查询</view>
				<view class="warpboxs-small-title-img">
					<u-icon name="arrow-down" size="20" color="#666" :style="isshow4?'transform: rotate(0deg);':'transform: rotate(-180deg);'"></u-icon>
				</view>
			</view>
			<view v-show="isshow4">
				<view class="fun_box_fir">
					<view class="fun_fir_1 fun_fir_border" @click="goToPage('/pages/usage-list/usage-list')">
						<view class="icon">
							<image src="/static/home/usage-record.png" mode="aspectFit"></image>
						</view>
						<view>使用记录</view>
					</view>
					<view class="fun_fir_1 fun_fir_border" @click="goToPage('/pages/laundry-flow-list/laundry-flow-list')">
						<view class="icon">
							<image src="/static/home/towel-record.png" mode="aspectFit"></image>
						</view>
						<view>毛巾记录</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 系统管理板块 -->
		<view class="warpboxss">
			<view class="warpboxs-small-title" :style="isshow5?'padding-bottom: 30rpx;':''" @click="isshow5=!isshow5">
				<view><text class="warpboxs-small-title-line"></text>其他</view>
				<view class="warpboxs-small-title-img">
					<u-icon name="arrow-down" size="20" color="#666" :style="isshow5?'transform: rotate(0deg);':'transform: rotate(-180deg);'"></u-icon>
				</view>
			</view>
			<view v-show="isshow5">
				<view class="fun_box_fir">
					<view v-if="newuserInfo.mobilePhone == '18382415096' || newuserInfo.mobilePhone == '19938623860' || newuserInfo.mobilePhone == '18588888888'" class="fun_fir_1 fun_fir_border" @click="goToPage('/pages/store-list/store-list')">
						<view class="icon">
							<image src="/static/home/store-management.png" mode="aspectFit"></image>
						</view>
						<view>门店管理</view>
					</view>
					<view class="fun_fir_1 fun_fir_border" @click="goToPage('/pages/web/web')">
						<view class="icon">
							<image src="/static/home/ai-qa.png" mode="aspectFit"></image>
						</view>
						<view>AI问答</view>
					</view>
					<view class="fun_fir_1 fun_fir_border" @click="goToPage('/pages/dailyReport/dailyReport')" v-if="showReport">
						<view class="icon">
							<image src="/static/home/report.png" mode="aspectFit"></image>
						</view>
						<view>报表</view>
					</view>
				</view>
				<!-- <view class="fun_box_fir">
					<view class="fun_fir_1 fun_fir_border" @click="handleLogout">
						<view class="icon">
							<u-icon name="arrow-rightward" size="32" color="#43a047"></u-icon>
						</view>
						<view>退出</view>
					</view>
				</view> -->
			</view>
		</view>
		<view style="height: 140rpx;"></view>
		<!-- 自定义 tabBar -->
		<custom-tab-bar />
	</view>
</template>

<script>
	import CustomTabBar from '@/components/custom-tab-bar/index.vue'
	
	export default {
		components: {
			CustomTabBar
		},
		data() {
			return {
				isshow1: true,
				isshow2: true,
				isshow3: true,
				isshow4: true,
				isshow5: true,
				newuserInfo: {},
				userInfo: {}
			}
		},
		computed: {
			iskjb() {
				if (this.newuserInfo.gw == '科技老师') {
					return false
				}
				return true
			},
			// 根据用户权限显示报表按钮
			showReport() {
				if (!this.userInfo || !this.userInfo.userAccount) return false
				const adminAccounts = ['admin', '13198568627', '18884847552', '13608016021', '18628973287']
				return adminAccounts.includes(this.userInfo.userAccount)
			}
		},
		onLoad() {
			this.checkLoginStatus()
			this.init()
		},
		onShow() {
			// 每次显示时更新用户信息
			this.userInfo = uni.getStorageSync('userInfo')
			this.newuserInfo = uni.getStorageSync('newuserInfo') || {}
		},
		methods: {
			// 初始化
			init() {
				this.userInfo = uni.getStorageSync('userInfo')
				this.newuserInfo = uni.getStorageSync('newuserInfo') || {}
			},
			// 检查登录状态
			checkLoginStatus() {
				const token = uni.getStorageSync('token')
				if (!token) {
					uni.reLaunch({
						url: '/pages/login/login'
					})
					return
				} else {
					this.userInfo = uni.getStorageSync('userInfo')
				}
			},
			// 页面跳转
			goToPage(url) {
				uni.navigateTo({
					url: url
				})
			},
			// 退出登录
			handleLogout() {
				uni.showModal({
					title: '提示',
					content: '确定要退出登录吗?',
					success: (res) => {
						if (res.confirm) {
							this.API.logout().then(res => {
								if (res.code == 200) {
									// 清除本地存储
									uni.clearStorageSync()
									// 跳转到登录页
									uni.reLaunch({
										url: '/pages/login/login'
									})
								}
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.warpbox {
		// height: 100vh;
		padding: 0 40rpx;
		background-color: #f5f7fa;
	}

	.warpboxss {
		background: #fff;
		padding: 30rpx;
		// margin: 0 25rpx 40rpx 25rpx;
		// margin: 30rpx 0;
		margin: 40rpx 0;
		border-radius: 10rpx;
		box-shadow: 0 0 18rpx 10rpx #efefef;

		.warpboxs-small-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 30rpx;
			font-weight: bold;
			color: #000;

			.warpboxs-small-title-line {
				display: inline-block;
				background-color: #009b4d;
				height: 26rpx;
				width: 10rpx;
				margin-right: 10rpx;
			}

			.warpboxs-small-title-img {
				display: flex;
				align-items: center;
				transition: transform 0.3s;
			}
		}

		.fun_box_fir {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			// margin-top: 20rpx;

			.fun_fir_1 {
				flex-shrink: 0;
				background: #fff;
				text-align: center;
				width: 33%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				font-size: 24rpx;
				color: #000;
				position: relative;
				height: 170rpx;
				transition: all 0.2s;
				box-sizing: border-box;

				&:active {
					transform: scale(0.98);
				}

				.icon {
					display: flex;
					align-items: center;
					justify-content: center;
					
					image {
						width: 45rpx;
						height: 45rpx;
						margin-bottom: 15rpx;
					}
				}
			}

			.fun_fir_border {
				border-top: 2rpx solid #efefef;
				border-bottom: 2rpx solid #efefef;
				border-right: 2rpx solid #efefef;
				border-left: 2rpx solid #efefef;
			}
		}
	}
</style>