jhlapp/pages/app/index.vue

<template>
	<view class="out-box">
		<view class="app-view">
			<view class="now-name">常用应用</view>
			<view class="app-ul">
				<block v-for="(app, appi) in now_list" :key="appi">
					<view class="app-li" @click="chooseMenu(app)" v-if="$accessCheck($Access[app.access])">
						<view class="icon-view" :style="{ background: app.color }"><text :class="[app.icon]" class="custom-icon"></text></view>
						<view class="label ellipsis">{{ app.label }}</view>
						<view class="icon-circle"><u-icon name="minus-circle-fill" color="#fa3534" size="24"></u-icon></view>
					</view>
				</block>
			</view>
		</view>
		<view class="app-view" v-for="(item, index) in app_list" :key="index">
			<view class="menu-name">{{ item.menuName }}</view>
			<view class="app-ul">
				<block v-for="(app, appi) in item.menuList" :key="appi">
					<view class="app-li" @click="chooseMenu(app)" v-if="$accessCheck($Access[app.access])">
						<view class="icon-view" :style="{ background: app.color, opacity: now_list.find(menu => menu.url === app.url) ? '0.6' : '1' }">
							<text :class="[app.icon]" class="custom-icon"></text>
						</view>
						<view class="label ellipsis">{{ app.label }}</view>
						<view class="icon-circle">
							<u-icon v-if="!!now_list.find(menu => menu.url === app.url)" name="checkmark-circle-fill" color="#B8C0C8" size="24"></u-icon>
							<u-icon v-else name="plus-circle-fill" color="#2979ff" size="24"></u-icon>
						</view>
					</view>
				</block>
			</view>
		</view>
		<view class="confirm-btn" @click="updateCommonApp">完成</view>
	</view>
</template>

<script>
import { menus } from './app.js';
export default {
	data() {
		return {
			now_list: [
				// {
				// 	url: '/pagesT/stock/SalesOrder',
				// 	label: '出库单',
				// 	icon: 'custom-icon-quehuoshangpinshu',
				// 	color: '#5c6aff',
				// 	access: 'InventoryOut'
				// },
				{
					url: '/pagesT/customer/StaffList',
					label: '销售排行',
					icon: 'custom-icon-paihangbang',
					color: '#f29611',
					access: 'salesRanking'
				},
				{
					url: '/pagesT/customer/CommunicationLogs',
					label: '客户拜访',
					icon: 'custom-icon-fuwu',
					color: '#f29611',
					access: 'CustomerListvisitedLogs'
				},
				{
					url: '/pagesT/customer/CommunicationLogs',
					label: '消耗品管理',
					icon: 'custom-icon-fuwu',
					color: '#f29611',
					access: 'CustomerListvisitedLogs'
				},
				{
					url: '/pagesT/customer/CommunicationLogs',
					label: '代客预约',
					icon: 'custom-icon-fuwu',
					color: '#f29611',
					access: 'CustomerListvisitedLogs'
				},
				{
					url: '/pagesT/customer/CommunicationLogs',
					label: '员工打卡',
					icon: 'custom-icon-fuwu',
					color: '#f29611',
					access: 'CustomerListvisitedLogs'
				},
				{
					url: '/pagesT/customer/CommunicationLogs',
					label: '门店员工',
					icon: 'custom-icon-fuwu',
					color: '#f29611',
					access: 'CustomerListvisitedLogs'
				},
				{
					url: '/pagesS/yg/gzdetail',
					label: '工资表',
					icon: 'custom-icon-fuwu',
					color: '#f29611',
					access: 'CustomerListvisitedLogs'
				},
				{
					url: '/pages/order/OrderAdd',
					label: '代客下单',
					icon: 'custom-icon-piliangxiadan',
					color: '#f29611',
					access: 'OrderAdd'
				},
			],
			app_list: []
		};
	},
	computed: {
		userCenterId() {
			return this.$store.state.userInfo.userCenterId;
		},
		enterpriseScope() {
			return this.$store.state.enterprise.scope;
		}
	},
	onLoad() {
		if (parseInt(this.$store.state.enterprise.scope) === 4) {
			this.app_list = menus.map(item => {
				return{
					...item,
					menuList:item.menuList.filter(menu=>menu.label !== '商品资料')
				}
			});
		} else {
			this.app_list = menus;
		}
	},
	onShow() {
		this.getCommonAppInfo();
	},
	methods: {
		chooseMenu(app) {
			const index = this.now_list.findIndex(menu => menu.url === app.url);
			if (index > -1) {
				if (this.now_list.length === 1) {
					this.$u.toast('最少保留一个应用');
					return;
				}
				this.now_list.splice(index, 1);
			} else {
				this.now_list.push(app);
			}
		},
		getCommonAppInfo() {
			this.$u.api.getCommonAppInfo(this.userCenterId).then(res => {
				if (res.data.jsonKey) {
					if(res.data.jsonKey[0].icon.indexOf('ibon')>-1){
						return
					}
					this.now_list = res.data.jsonKey;
				}
			});
		},
		updateCommonApp() {
			this.$u.api
				.updateCommonApp(this.userCenterId, {
					jsonKey: this.now_list
				})
				.then(res => {
					uni.navigateBack();
				});
		}
	}
};
</script>

<style scoped lang="scss">
.out-box {
	padding-bottom: 80rpx;
}
.app-view {
	.now-name {
		color: #333333;
		font-weight: bold;
		line-height: 80rpx;
		padding: 0 32rpx;
	}
	.menu-name {
		font-size: 24rpx;
		color: #879bba;
		line-height: 70rpx;
		padding: 0 32rpx;
	}
	.app-ul {
		display: flex;
		flex-wrap: wrap;
		background-color: #ffffff;
		padding-top: 40rpx;
		.app-li {
			text-align: center;
			width: 25%;
			margin-bottom: 40rpx;
			position: relative;
			.icon-circle {
				position: absolute;
				top: 0;
				right: 30rpx;
				height: 24rpx;
				width: 24rpx;
				line-height: 24rpx;
			}
			.icon-view {
				width: 72rpx;
				height: 72rpx;
				line-height: 72rpx;
				border-radius: 30rpx;
				margin: 0 auto;

				.custom-icon {
					font-size: 42rpx;
					color: #ffffff;
				}
			}

			.label {
				font-size: 24rpx;
				line-height: 36rpx;
				padding-top: 16rpx;
				color: #2d405e;
			}
		}
	}
}
.confirm-btn {
	background-color: $uni-color-primary;
	color: #ffffff;
	text-align: center;
	height: 80rpx;
	line-height: 80rpx;
	position: fixed;
	width: 100%;
	left: 0;
	bottom: 0;
}
</style>