259 lines
		
	
	
		
			11 KiB
		
	
	
	
		
			Vue
		
	
	
	
		
		
			
		
	
	
			259 lines
		
	
	
		
			11 KiB
		
	
	
	
		
			Vue
		
	
	
	
|  | <template> | ||
|  | 	<view class="self-service-index"> | ||
|  | 		<!-- <view class="self-service-item" @click="gotoPage('/pages/market/performance/index')" | ||
|  | 			v-if="hasMenu('ConsanguinityCheck')"> | ||
|  | 			<view class="self-service-name text-ellipsis-2">业绩分布</view> | ||
|  | 		</view> --> | ||
|  | 		<template> | ||
|  | 			<view class="self-service-item more d-c-c" @click="rotate(-1)" v-if="hasMenu('ConsanguinityCheck')"> | ||
|  | 				<view class="self-service-name text-ellipsis-2 flex-1">{{$t('ENU_MENU_510')}}</view> | ||
|  | 				<view class="icon-close" :class="{ active: openIndex == -1 }"><u-icon name="arrow-down" size="28rpx" | ||
|  | 						color="#666"></u-icon></view> | ||
|  | 			</view> | ||
|  | 			<view class="self-service-item" :class="{ closemenu: openIndex != -1 }" | ||
|  | 				@click="gotoPage('/pages/market/performance/performance')"> | ||
|  | 				<view class="self-service-name text-ellipsis-2 flex-1" style="padding-left: 40rpx;">{{$t('ENU_MENU_510')}}</view> | ||
|  | 			</view> | ||
|  | 			<view class="self-service-item" :class="{ closemenu: openIndex != -1 }" | ||
|  | 				@click="gotoPage('/pages/market/performance/placementDiagram')"> | ||
|  | 				<view class="self-service-name text-ellipsis-2 flex-1" style="padding-left: 40rpx;">{{$t('N_I_83')}}</view> | ||
|  | 			</view> | ||
|  | 			<view class="self-service-item" :class="{ closemenu: openIndex != -1 }" | ||
|  | 				@click="gotoPage('/pages/market/performance/monthlyAddition/monthlyAddition')"> | ||
|  | 				<view class="self-service-name text-ellipsis-2 flex-1" style="padding-left: 40rpx;">{{$t('N_I_84')}}</view> | ||
|  | 			</view> | ||
|  | 			<view class="self-service-item" :class="{ closemenu: openIndex != -1 }" | ||
|  | 				@click="gotoPage('/pages/market/performance/monthlyPerformanceComparison/monthlyPerformanceComparison')"> | ||
|  | 				<view class="self-service-name text-ellipsis-2 flex-1" style="padding-left: 40rpx;">{{$t('N_I_85')}}</view> | ||
|  | 			</view> | ||
|  | 			<view class="self-service-item" :class="{ closemenu: openIndex != -1 }" | ||
|  | 				@click="gotoPage('/pages/market/performance/recommend')"> | ||
|  | 				<view class="self-service-name text-ellipsis-2 flex-1" style="padding-left: 40rpx;">{{$t('N_I_86')}}</view> | ||
|  | 			</view> | ||
|  | 			<view class="self-service-item" :class="{ closemenu: openIndex != -1 }" | ||
|  | 				@click="gotoPage('/pages/market/performance/directPush')"> | ||
|  | 				<view class="self-service-name text-ellipsis-2 flex-1" style="padding-left: 40rpx;">{{$t('N_I_87')}}</view> | ||
|  | 			</view> | ||
|  | 			<view class="self-service-item" :class="{ closemenu: openIndex != -1 }" | ||
|  | 				@click="gotoPage('/pages/market/performance/recommendationList')"> | ||
|  | 				<view class="self-service-name text-ellipsis-2 flex-1" style="padding-left: 40rpx;">{{$t('ENU_MENU_517')}}</view> | ||
|  | 			</view> | ||
|  | 		</template> | ||
|  | 		<template> | ||
|  | 			<view class="self-service-item more d-c-c" @click="rotate(0)" v-if="hasMenu('incomeDetail')"> | ||
|  | 				<view class="self-service-name text-ellipsis-2 flex-1">{{$t('ENU_MENU_530')}}</view> | ||
|  | 				<view class="icon-close" :class="{ active: openIndex == 0 }"><u-icon name="arrow-down" size="28rpx" | ||
|  | 						color="#666"></u-icon></view> | ||
|  | 			</view> | ||
|  | 			<view class="self-service-item" :class="{ closemenu: openIndex != 0 }" | ||
|  | 				@click="gotoPage('/pages/market/bonus-detail/index')" v-if="hasMenu('firstPurchase')"> | ||
|  | 				<view class="self-service-name text-ellipsis-2 flex-1" style="padding-left: 40rpx;">{{$t('ENU_MENU_531')}}</view> | ||
|  | 			</view> | ||
|  | 			<view class="self-service-item" :class="{ closemenu: openIndex != 0 }" | ||
|  | 				@click="gotoPage('/pages/market/bonus-detail/spend_index')" v-if="hasMenu('repurchaseEarnings')"> | ||
|  | 				<view class="self-service-name text-ellipsis-2 flex-1" style="padding-left: 40rpx;">{{$t('ENU_MENU_532')}}</view> | ||
|  | 			</view> | ||
|  | 			<view class="self-service-item" :class="{ closemenu: openIndex != 0 }" | ||
|  | 				@click="gotoPage('/pages/market/bonus-detail/heil_index')" v-if="hasMenu('hignFans')"> | ||
|  | 				<view class="self-service-name text-ellipsis-2 flex-1" style="padding-left: 40rpx;">{{$t('ENU_MENU_533')}}</view> | ||
|  | 			</view> | ||
|  | 			<view class="self-service-item" :class="{ closemenu: openIndex != 0 }" | ||
|  | 				@click="gotoPage('/pages/market/bonus-detail/sea_index')" v-if="hasMenu('seaFans')"> | ||
|  | 				<view class="self-service-name text-ellipsis-2 flex-1" style="padding-left: 40rpx;">{{$t('w_0140')}}</view> | ||
|  | 			</view> | ||
|  | 			<view class="self-service-item" :class="{ closemenu: openIndex != 0 }" | ||
|  | 				@click="gotoPage('/pages/market/bonus-detail/cloud_index')" v-if="hasMenu('sbyd')"> | ||
|  | 				<view class="self-service-name text-ellipsis-2 flex-1" style="padding-left: 40rpx;">{{$t('ENU_MENU_535')}}</view> | ||
|  | 			</view> | ||
|  | 			<view class="self-service-item" :class="{ closemenu: openIndex != 0 }" | ||
|  | 				@click="gotoPage('/pages/market/bonus-detail/purchase_index')" v-if="hasMenu('repurchaseTicket')"> | ||
|  | 				<view class="self-service-name text-ellipsis-2 flex-1" style="padding-left: 40rpx;">{{$t('ENU_MENU_536')}}</view> | ||
|  | 			</view> | ||
|  | 			<view class="self-service-item" :class="{ closemenu: openIndex != 0 }" | ||
|  | 				@click="gotoPage('/pages/market/bonus-detail/maker_index')" v-if="hasMenu('markerSpaceEarnings')"> | ||
|  | 				<view class="self-service-name text-ellipsis-2 flex-1" style="padding-left: 40rpx;">{{$t('ENU_MENU_537')}}</view> | ||
|  | 			</view> | ||
|  | 		</template> | ||
|  | 		<!-- <view class="self-service-item" @click="gotoPage('/pages/market/bonus-detail/index')"> | ||
|  | 			<view class="self-service-name text-ellipsis-2">奖金明细</view> | ||
|  | 			<image class="self-service-icon" src="/static/icon/space/sc02.png" mode=""></image> | ||
|  | 		</view> --> | ||
|  | 		<view class="self-service-item" @click="gotoPage('/pages/market/bonus-source/index')" | ||
|  | 			v-if="hasMenu('bonusSource')"> | ||
|  | 			<view class="self-service-name text-ellipsis-2">{{$t('ENU_MENU_540')}}</view> | ||
|  | 		</view> | ||
|  | 		<!-- 	<view class="self-service-item" @click="gotoPage('/pages/market/cloud-bonus/index')"> | ||
|  | 			<view class="self-service-name text-ellipsis-2">云代奖金</view> | ||
|  | 		</view> --> | ||
|  | 		<template> | ||
|  | 			<view class="self-service-item more d-c-c" @click="rotate(1)" v-if="hasMenu('appraisal')"> | ||
|  | 				<view class="self-service-name text-ellipsis-2 flex-1">{{$t('ENU_MENU_560')}}</view> | ||
|  | 				<view class="icon-close" :class="{ active: openIndex == 1 }"><u-icon name="arrow-down" size="28rpx" | ||
|  | 						color="#666"></u-icon></view> | ||
|  | 			</view> | ||
|  | 			<view class="self-service-item" :class="{ closemenu: openIndex != 1 }" | ||
|  | 				@click="gotoPage('/pages/market/assessment-details/index')" v-if="hasMenu('repurchaseCheck')"> | ||
|  | 				<view class="self-service-name text-ellipsis-2 flex-1" style="padding-left: 40rpx;">{{$t('ENU_MENU_561')}}</view> | ||
|  | 			</view> | ||
|  | 			<view class="self-service-item" :class="{ closemenu: openIndex != 1 }" | ||
|  | 				@click="gotoPage('/pages/market/assessment-details/share_index')" v-if="hasMenu('dividendCheck')"> | ||
|  | 				<view class="self-service-name text-ellipsis-2 flex-1" style="padding-left: 40rpx;">{{$t('ENU_MENU_562')}}</view> | ||
|  | 			</view> | ||
|  | 		</template> | ||
|  | 		<!-- <view class="self-service-item" @click="gotoPage('/pages/market/assessment-details/index')"> | ||
|  | 			<view class="self-service-name text-ellipsis-2">考核明细</view> | ||
|  | 		</view> --> | ||
|  | 		<view class="self-service-item" @click="gotoPage('/pages/market/registration-list/index')" | ||
|  | 			v-if="hasMenu('registration')"> | ||
|  | 			<view class="self-service-name text-ellipsis-2">{{$t('ENU_MENU_570')}}</view> | ||
|  | 		</view> | ||
|  | 		<!-- <view class="self-service-item" @click="gotoPage('/pages/market/investment-list/index')"> | ||
|  | 			<view class="self-service-name text-ellipsis-2">招商列表</view> | ||
|  | 		</view> --> | ||
|  | 		<template> | ||
|  | 			<view class="self-service-item more d-c-c" @click="rotate(2)" v-if="hasMenu('investment')"> | ||
|  | 				<view class="self-service-name text-ellipsis-2 flex-1">{{$t('ENU_MENU_580')}}</view> | ||
|  | 				<view class="icon-close" :class="{ active: openIndex == 2 }"><u-icon name="arrow-down" size="28rpx" | ||
|  | 						color="#666"></u-icon></view> | ||
|  | 			</view> | ||
|  | 			<view class="self-service-item" :class="{ closemenu: openIndex != 2 }" | ||
|  | 				@click="gotoPage('/pages/market/investment-list/index')" v-if="hasMenu('directList')"> | ||
|  | 				<view class="self-service-name text-ellipsis-2 flex-1" style="padding-left: 40rpx;">{{$t('ENU_MENU_581')}}</view> | ||
|  | 			</view> | ||
|  | 			<view class="self-service-item" :class="{ closemenu: openIndex != 2 }" | ||
|  | 				@click="gotoPage('/pages/market/investment-list/canvass_index')" v-if="hasMenu('attractDetailList')"> | ||
|  | 				<view class="self-service-name text-ellipsis-2 flex-1" style="padding-left: 40rpx;">{{$t('ENU_MENU_582')}}</view> | ||
|  | 			</view> | ||
|  | 			<view class="self-service-item" :class="{ closemenu: openIndex != 2 }" | ||
|  | 				@click="gotoPage('/pages/market/investment-list/heil_index')" v-if="hasMenu('haiList')"> | ||
|  | 				<view class="self-service-name text-ellipsis-2 flex-1" style="padding-left: 40rpx;">{{$t('ENU_MENU_583')}}</view> | ||
|  | 			</view> | ||
|  | 		</template> | ||
|  | 		<view class="self-service-item" @click="gotoPage('/pages/market/statistic-analysis/index')" | ||
|  | 			v-if="hasMenu('statistics')"> | ||
|  | 			<view class="self-service-name text-ellipsis-2">{{$t('w_0420')}}</view> | ||
|  | 		</view> | ||
|  | 		<view class="self-service-item" @click="gotoPage('/pages/market/activity-zone/index')" | ||
|  | 			v-if="hasMenu('activeZone')"> | ||
|  | 			<view class="self-service-name text-ellipsis-2">{{$t('ENU_MENU_520')}}</view> | ||
|  | 		</view> | ||
|  | 		<!-- <view class="self-service-item"> | ||
|  | 			<view class="self-service-name text-ellipsis-2">直推列表</view> | ||
|  | 		</view> | ||
|  | 		<view class="self-service-item"> | ||
|  | 			<view class="self-service-name text-ellipsis-2">嗨粉领奖</view> | ||
|  | 		</view> | ||
|  | 		<view class="self-service-item"> | ||
|  | 			<view class="self-service-name text-ellipsis-2">嗨粉列表</view> | ||
|  | 		</view> --> | ||
|  | 	</view> | ||
|  | </template> | ||
|  | 
 | ||
|  | <script> | ||
|  | 	export default { | ||
|  | 		data() { | ||
|  | 			return { | ||
|  | 				openIndex: -2, | ||
|  | 				listmenu: [] | ||
|  | 			}; | ||
|  | 		}, | ||
|  | 		onLoad() { | ||
|  | 			this.getMenu(); | ||
|  | 		}, | ||
|  | 		methods: { | ||
|  | 			hasMenu(key) { | ||
|  | 				let self = this; | ||
|  | 				let flag = false; | ||
|  | 				self.listmenu.forEach((item, index) => { | ||
|  | 					if (item.menuKey == key) { | ||
|  | 						flag = true | ||
|  | 					} | ||
|  | 				}) | ||
|  | 				return flag | ||
|  | 			}, | ||
|  | 			getMenu() { | ||
|  | 				let self = this; | ||
|  | 				self._get('system/api/menu/list', {}, res => { | ||
|  | 					let list = []; | ||
|  | 					let arr = res.data; | ||
|  | 					arr.forEach((item, index) => { | ||
|  | 						if (item.menuParent == 50 || item.menuKey == 'statistics') { | ||
|  | 							list.push(item) | ||
|  | 						} | ||
|  | 					}) | ||
|  | 					self.listmenu = list; | ||
|  | 					console.log(self.listmenu) | ||
|  | 				}); | ||
|  | 			}, | ||
|  | 			rotate(e) { | ||
|  | 				if (this.openIndex != e) { | ||
|  | 					this.openIndex = e; | ||
|  | 				} else { | ||
|  | 					this.openIndex = -2; | ||
|  | 				} | ||
|  | 			} | ||
|  | 		} | ||
|  | 	}; | ||
|  | </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> |