CZKJ.XKJ.Helper/src/pages/manage/index.vue

<template>
	<div class="page">
		<div class="tips" v-if="shopErr">
			当前店铺没有门店，请后台添加门店后重试
		</div>
		<div v-if="!shopErr">
			<div class="page__top" v-if="isAdmin">
				<div class="name">当前门店：</div>
				<div class="shop" @click="goShopSelect">
					<div class="shop__name">
						<!-- 最多6字 -->
						{{ curShop.name ? curShop.name : "加载中..." }}
						<i class="iconfont iconyoujiantou shop__arrow"></i>
					</div>
				</div>
			</div>
			<div class="page__top" v-else>
				<div class="name">当前门店：</div>
				<div class="shop">
					<div class="shop__name">
						<!-- 最多6字 -->

						{{ curShop.name ? curShop.name : "加载中..." }}
						<!-- <i class="iconfont iconyoujiantou shop__arrow"></i> -->
					</div>
				</div>
			</div>
			<ul class="menu" v-if="!menuLoading">
				<li class="item" v-for="item of menuList" :key="item.id" @click="jump(item.url)">
					<my-image class="img" :src="item.icon"></my-image>
					<span class="text">{{ item.name }}</span>
				</li>
				<!-- <li class="item" @click="jump('/pages/manage/user/index')">
                    <my-image
                        class="img"
                        src="/static/icon/user.png"
                    ></my-image>
                    <span class="text">账号设置</span>
                </li> -->
				<li class="item" @click="jump('/pages/test/index')">
                    <my-image
                        class="img"
                        src="/static/icon/user.png"
                    ></my-image>
                    <span class="text">app接口测试</span>
                </li>
			</ul>
		</div>

		<button class="btn" @click="layout">退出登录</button>

		<div class="ver">0.3.9</div>
	</div>
</template>

<script>
	import MyImage from "../../components/image/index";

	export default {
		name: "",
		components: {
			MyImage
		},

		// 数据
		data() {
			return {
				curShop: {},
				shopErr: false,
				menuList: [],
				menuLoading: true,
			};
		},

		onLoad() {
			this.getUserMenu();
			// this.appTest();
		},
		async onShow() {
			if (this.isAdmin) {
				this.curShop = {
					name: this.user.storeName,
					id: this.user.storeId,
				};
				this.getShopList();
			} else {
				if (this.user.storeId) {
					this.curShop = {
						name: this.user.storeName,
						id: this.user.storeId,
					};
				} else {
					this.fn.showModal({
						content: "当前用户无门店设置，请前往后台设置所属店铺",
					});
					// this.getShopList();
				}
			}
		},
		// 函数
		methods: {

			getUserMenu() {
				uni.showLoading({
					title: "加载中...",
				});
				this.menuLoading = true;
				this.api
					.get("/User/GetUserMenu", {
						userId: this.user.id
					})
					.then((res) => {
						if (res.data.userMenu) {
							let userMenu = res.data.userMenu.mobile;
							let mobileMenu = res.data.menu.mobile;
							if (userMenu && userMenu.length) {
								this.initMenu(mobileMenu, userMenu);
							}
						}
						this.menuLoading = false;
						uni.hideLoading();
					});
			},

			initMenu(menu, userMenu) {
				let arr = [];
				for (let item of menu) {
					for (let userItem of userMenu) {
						if (userItem.id === item.id && userItem.status === 1) {
							let obj = item;
							let childArr = [];
							if (userItem.children && userItem.children.length) {
								for (let userChild of userItem.children) {
									for (let child of item.children) {
										if (
											userChild.id === child.id &&
											userChild.status === 1
										) {
											childArr.push(child);
										}
									}
								}
							}
							obj.children = childArr;
							arr.push(obj);
						}
					}
				}
				this.$store.commit("user/update", {
					menuList: arr,
				});
				this.menuList = arr;
			},

			getShopList() {
				uni.showLoading({
					title: "加载中...",
				});
				this.api.get("/Store/GetShopList").then((res) => {
					if (res.data.length === 0) {
						this.shopErr = true;
					}
					this.shopList = res.data;
					uni.hideLoading();
					uni.stopPullDownRefresh();
					if (!this.curShop.id) {
						this.curShop = res.data[0];
						let user = { ...this.$store.state.user.user
						};
						user.storeId = this.curShop.id;
						user.storeName = this.curShop.name;
						this.$store.commit("user/update", {
							user,
						});
					}
				});
			},

			goShopSelect() {
				this.router.push({
					path: "/pages/index/select",
					query: {
						entry: "manage",
					},
				});
			},

			layout() {
				this.$store.commit("user/logout", null);
				this.router.replace({
					path: "/pages/index/login",
					isReLaunch: true,
				});
			},
		},

		// 数据计算
		computed: {
			user() {
				return this.$store.state.user.user;
			},
			isAdmin() {
				//店铺管理员  系统管理员
				if (
					this.user.roleId === "50c41c5d-b54c-43ed-b587-10dcb60e72e5" ||
					this.user.roleId === "75b71b24-25de-40ac-a866-c8f5555b8b92"
				) {
					return true;
				} else {
					return false;
				}
			},
		},

		// 数据监听
		watch: {},
	};
</script>

<style lang="scss" scoped>
	.page {
		&__top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: px(145);
			padding: 0 px(50);
			background-color: #fff;
			border-bottom: 1px solid #f1f1f1;
		}

		.name {
			font-size: px(36);
			color: #999;
			flex-shrink: 0;
			margin-right: px(20);
		}
	}

	.shop {
		display: flex;
		color: #666;
		font-size: px(36);
		flex-shrink: 0;
		margin-right: px(30);
		width: 100%;

		&__logo {
			margin-right: px(20);
			width: px(80);
			height: px(80);
			border-radius: 50%;
			box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
			overflow: hidden;

			/deep/ img {
				width: px(80);
				height: px(80);
			}
		}

		&__name {
			display: flex;
			white-space: nowrap;
			align-items: center;
		}

		&__arrow {
			margin-left: px(10);
			transform: rotate(90deg);
		}
	}

	.menu {
		display: flex;
		flex-wrap: wrap;
		border-top: 1px solid #f1f1f1;

		.item {
			width: 33.333333%;
			height: px(330);
			flex-shrink: 0;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: px(44);
			background-color: #fff;
			border-bottom: 1px solid #f1f1f1;

			/deep/ img {
				width: px(90);
				height: px(90);
				margin-bottom: px(30);
			}

			&:nth-child(3n-1),
			&:nth-child(3n) {
				border-left: 1px solid #f1f1f1;
			}
		}
	}

	.ver {
		margin-top: px(30);
		font-size: px(30);
		text-align: center;
		color: #aaa;
	}

	.btn {
		position: fixed;
		bottom: px(50);
		left: px(30);
		right: px(30);
		z-index: 10;
		color: #fff;
		background-color: #e92e25;
		font-size: px(44);
	}

	.tips {
		background-color: #fef9f3;
		font-size: px(40);
		padding: 0 px(40);
		height: px(100);
		line-height: px(100);
		color: #ec883d;
	}
</style>