web-africa-h5/pages/member-area/old.vue

<template>
	<view class="self-service-index" v-if="listmenu">
		<view v-for="(item, index) in list" :key="index">
			<template  v-if="hasMenu(item.menuKey)">
				<view class="self-service-item" v-if="!item.child"
					@click="gotoPage('/pages/product/list?cid=' + item.value)">
					<view class="self-service-name text-ellipsis-2 flex-1">{{ item.name }}</view>
				</view>
				<template v-else>
					<view class="self-service-item more d-c-c" @click="rotate(index)">
						<view class="self-service-name text-ellipsis-2 flex-1">{{ item.name }}</view>
						<view class="icon-close" :class="{ active: openIndex == index }"><u-icon name="arrow-down"
								size="28rpx" color="#666"></u-icon></view>
					</view>
					<view class="self-service-item" v-for="(citem, cindex) in item.child" :key="cindex" v-if="hasMenu(citem.menuKey)"
						:class="{ closemenu: openIndex != index }"
						@click="gotoPage('/pages/product/list?cid=' + citem.value)">
						<view class="self-service-name text-ellipsis-2 flex-1" style="padding-left: 20rpx;">{{ citem.name }}
						</view>
					</view>
				</template>
			</template>
			<!-- <image class="self-service-icon" src="/static/icon/cart-icon.png" mode=""></image> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						name: '分享专区',
						value: '7',
						menuKey: 'share',
						child: [{
								name: '嗨粉注册',
								value: '7',
								menuKey: 'hiFans',
							},
							{
								name: '海粉注册',
								value: '21',
								menuKey: 'haiFans',
							}
						]
					},
					{
						name: '注册专区',
						menuKey: 'regiest',
						value: '1',
						child: [{
							name: '自营专区',
							menuKey: 'regiestArea',
							value: '1'
						}, {
							name: '乐学易考',
							menuKey: 'ezLearnReg',
							value: '24'
						}]
					},
					{
						name: '升级专区',
						value: '2',
						menuKey: 'upgrade',
						child: [{
							name: '自营专区',
							value: '2',
							menuKey: 'upgradeArea',
						}, {
							name: '乐学易考',
							value: '25',
							menuKey: 'ezLearnUp',
						}]
					},
					{
						name: '复购专区',
						value: '3',
						menuKey: 'repurchase',
						child: [{
								name: '乐学易考',
								value: '26',
								menuKey: 'ezLearnRep',
							},
							{
								name: '工具流',
								value: '12',
								menuKey: 'gongju',
							},
							{
								name: '自营专区',
								value: '3',
								menuKey: 'self',
							},
							{
								name: '合作专区',
								value: '22',
								menuKey: 'cooperation',
							},
							{
								name: '直播专区',
								value: '14',
								menuKey: 'live',
							}
						]
					},
					{
						name: '福利专区',
						value: '13',
						menuKey: 'welfare',
					},
					{
						name: '积分专区',
						value: '11',
						menuKey: 'integral',
					},
					{
						name: '重消专区',
						value: '10',
						menuKey: 'rescission',
					}
				],
				listmenu: [],
				openIndex: -1
			};
		},
		onShow() {
			this.getData();
		},
		methods: {
			hasMenu(key){
				let self = this;
				let flag = false;
				console.log(key)
				self.listmenu.forEach((item,index)=>{
					if(item.menuKey == key){
						flag =  true
					}
				})
				console.log(flag)
				return flag
			},
			getData() {
				let self = this;
				self._get('system/api/menu/list', {}, res => {
					let list = [];
					let arr = res.data;
					arr.forEach((item, index) => {
						if (item.menuParent == 30) {
							list.push(item)
						}
					})
					self.listmenu = list;
					console.log(self.listmenu)
				});
			},
			rotate(e) {
				if (this.openIndex != e) {
					this.openIndex = e;
				} else {
					this.openIndex = -1;
				}
			}
		}
	};
</script>

<style lang="scss">
	.self-service-index {
		// display: flex;
		// justify-content: space-between;
		// align-items: flex-start;
		// flex-wrap: wrap;
		// padding: 28rpx 20rpx;
		padding: 0 22rpx;
		background: #ffffff;
	}

	.icon-close {
		transition: transform 0.6s ease;
	}

	.icon-close.active {
		transform: rotate(180deg);
	}

	.closemenu.self-service-item {
		height: 0;
		min-height: 0;
		overflow: hidden;
		padding: 0;
		border: none;
	}

	.self-service-item {
		flex-shrink: 0;
		padding: 22rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		// width: 345rpx;
		min-height: 120rpx;
		box-sizing: border-box;
		box-sizing: border-box;
		height: auto;
		transition: all 0.3s ease;
		border-radius: 0rpx;
		// margin-bottom: 25rpx;
		border-bottom: 1rpx solid #eee;

		.self-service-name {
			font-size: 28rpx;
			color: #333;
			line-height: 1.5;
			word-break: break-all;
			// font-weight: bold;
		}

		.self-service-icon {
			width: 54rpx;
			height: 54rpx;
			display: block;
			flex-shrink: 0;
			margin-left: 20rpx;
		}
	}
</style>