dev/dcp-web-gate/src_old/views/userCenter/userCenter.vue

<template>
	<div>
		<div class="autoBox box cool">
			<div class="crumbs">
				<el-breadcrumb separator="/">
					<el-breadcrumb-item :to="{ path: 'home' }" replace>{{
						$t('common.Home')
					}}</el-breadcrumb-item>
					<el-breadcrumb-item :to="{ path: 'userCenterView' }" replace
						>{{ $t('common.UserCenter') }}
					</el-breadcrumb-item>
					<el-breadcrumb-item
						v-if="lable !== '' && $route.path !== '/userCenterView'"
						>{{ $t(lable) }}
					</el-breadcrumb-item>
				</el-breadcrumb>
			</div>
		</div>
		<!-- 左侧菜单导航 -->
		<div class="autoBox box1" :class="user ? 'box2' : 'box1'">
			<div style="height: 800px" class="userItemClass">
				<div
					style="
						width: 100%;
						height: 50px;
						text-align: center;
						line-height: 50px;
						color: #fff;
						background: #2c5589;
					"
					class="cursor"
					@click="toView('userCenterView')"
				>
					{{ $t('common.UserCenter') }}
				</div>
				<el-row class="tac">
					<el-col :span="24">
						<el-menu
							class="el-menu-vertical-demo"
							@select="handleOpen"
							@close="handleClose"
							unique-opened
							:default-active="navRouter"
							router
						>
							<!-- <el-menu-item index="2" style="width: 100%;text-align: center;color: #fff;background: #2c5589;">
								<span slot="title">用户中心</span>
							  </el-menu-item> -->
							<div v-if="isTrue">
								<el-submenu
									:index="index + ''"
									v-for="(nav, index) in navs1"
									:key="index"
								>
									<template slot="title">
										<i :class="nav.icon"></i>
										<span>{{ $t(nav.lable) }}</span>
									</template>
									<el-menu-item-group>
										<el-menu-item
											:index="navChild.router"
											v-for="(navChild, num) in nav.child"
											:key="num"
										>
											{{ $t(navChild.lable) }}
										</el-menu-item>
									</el-menu-item-group>
								</el-submenu>
							</div>
							<div v-else>
								<el-submenu
									:index="index + ''"
									v-for="(nav, index) in navs"
									:key="index"
								>
									<template slot="title">
										<i :class="nav.icon"></i>
										<span>{{ $t(nav.lable) }}</span>
									</template>
									<el-menu-item-group>
										<el-menu-item
											:index="navChild.router"
											v-for="(navChild, num) in nav.child"
											:key="num"
										>
											{{ $t(navChild.lable) }}
										</el-menu-item>
									</el-menu-item-group>
								</el-submenu>
							</div>
						</el-menu>
					</el-col>
				</el-row>
			</div>
			<!-- 个人中心内容显示 -->
			<div style="width: 82%; float: right">
				<router-view />
			</div>
		</div>
		<div style="clear: both"></div>
	</div>
</template>

<script>
import HeaderItem from '@/components/headerItem'
import tabers from '@/components/taber'
import footers from '@/components/footers'
import Screen from '@/components/screen'
import CooperationExchangeItems from '@/views/cooperationExchange/CooperationExchangeItem'
import CooperationExchangeList from '@/views/cooperationExchange/CooperationExchangeList'
import userCenterView from '@/views/userCenter/userCenterView'

export default {
	name: 'userCenter',
	components: {
		tabers,
		HeaderItem,
		footers,
		Screen,
		CooperationExchangeItems,
		CooperationExchangeList,
		userCenterView,
	},
	data() {
		return {
			navRouter: this.$route.query.key,
			i: 0,
			user: true,
			locale: '',
			videoBox: 1500,
			lable: '',
			initData: [
				{
					img: 'cool001.gif',
					data: {
						title: '2020国际水资源大会',
						time: '2020-10-05',
						place: '中国-北京',
						describe: '大会将聚焦清洁能源开发与亚洲转型发展、跨国跨区合作、...',
						num: '986',
					},
				},
				{
					img: 'cool001.gif',
					data: {
						title: '2020国际水资源大会',
						time: '2020-10-05',
						place: '中国-北京',
						describe: '大会将聚焦清洁能源开发与亚洲转型发展、跨国跨区合作、...',
						num: '986',
					},
				},
				{
					img: 'cool001.gif',
					data: {
						title: '2020国际水资源大会',
						time: '2020-10-05',
						place: '中国-北京',
						describe: '大会将聚焦清洁能源开发与亚洲转型发展、跨国跨区合作、...',
						num: '986',
					},
				},
			],
			screen: [
				{
					value: '1',
					lable: '全部选择',
				},
				{
					value: '1',
					lable: '会员活动',
				},
				{
					value: '1',
					lable: '联盟活动',
				},
				{
					value: '1',
					lable: '合作单位活动',
				},
			],
			recommend: [
				{
					img: 'u6029.png',
					num: '2934',
				},
				{
					img: 'u6029.png',
					num: '2934',
				},
				{
					img: 'u6029.png',
					num: '2934',
				},
				{
					img: 'u6029.png',
					num: '2934',
				},
				{
					img: 'u6029.png',
					num: '2934',
				},
			],

			userUsertypeDict: '',

			navsBase: [
				{
					lable: 'common.MessageCenter',
					icon: 'el-icon-chat-line-round',
					value: '1',
					child: [
						{
							lable: 'common.SystemMessage',
							router: '/SystemMessage',
							value: '1',
						},
						{
							lable: 'common.notification',
							router: '/notification',
							value: '1',
						},
						{
							lable: 'common.Interactive',
							router: '/communication',
							value: '1',
						},
					],
				},
				{
					lable: 'common.ManagementCenter',
					value: '1',
					icon: 'el-icon-setting',
					child: [
						{
							lable: 'common.MyApplication',
							router: '/myConcerns',
							value: '1',
						},
						{
							lable: 'common.MyProject',
							router: '/myProject',
							value: '1',
						},
						{
							router: '/myActivity',
							lable: 'common.MyActivities',
							value: '1',
						},
						{
							router: '/myConsultingService',
							lable: 'common.MyAdvice',
							value: '1',
						},
						{
							lable: 'common.MyAttention',
							router: '/myFollow',
							value: '1',
						},
						{
							lable: 'common.MySubscription',
							router: '/mySubscribe',
							value: '1',
						},
						{
							lable: 'common.MyCollection',
							router: '/myCollection',
							value: '1',
						},
						{
							lable: 'common.ApplicationHistory',
							router: '/ApplicationHistory',
							value: '1',
						},
						// 我的资源共享
						{
							lable: 'common.myResourceSharing',
							router: '/myResourceSharing',
							value: '1',
						},
					],
				},
				{
					lable: 'common.InfoDataCenter',
					value: '1',
					icon: 'el-icon-setting',

					child: [
						// 我的资讯
						{
							lable: 'common.myInfoData',
							router: '/myInfoData',
							value: '1',
						},
					],
				},
				{
					lable: 'common.MyAccount',
					value: '1',
					icon: 'el-icon-user',
					child: [
						{
							lable: 'common.BasicInformation',
							value: 'information',
							router: 'information',
						},
						{
							lable: 'common.RealAuthentication',
							router: '/authentication',
							value: 'authentication',
						},
						{
							lable: 'common.SecuritySettings',
							router: '/securitySetting',
							value: 'securitySetting',
						},
						{
							lable: 'common.FeetBack',
							router: '/userCenterMyFeedBackService',
							value: 'userCenterMyFeedBackService',
						},
					],
				},
			],
			navs: [
				{
					lable: 'common.MessageCenter',
					icon: 'el-icon-chat-line-round',
					value: '1',
					child: [
						{
							lable: 'common.SystemMessage',
							router: '/SystemMessage',
							value: '1',
						},
						{
							lable: 'common.notification',
							router: '/notification',
							value: '1',
						},
						{
							lable: 'common.Interactive',
							router: '/communication',
							value: '1',
						},
					],
				},
				{
					lable: 'common.ManagementCenter',
					value: '1',
					icon: 'el-icon-setting',
					child: [
						{
							lable: 'common.MyApplication',
							router: '/myConcerns',
							value: '1',
						},
						{
							lable: 'common.MyProject',
							router: '/myProject',
							value: '1',
						},
						{
							router: '/myActivity',
							lable: 'common.MyActivities',
							value: '1',
						},
						{
							router: '/myConsultingService',
							lable: 'common.MyAdvice',
							value: '1',
						},
						{
							lable: 'common.MyAttention',
							router: '/myFollow',
							value: '1',
						},
						{
							lable: 'common.MySubscription',
							router: '/mySubscribe',
							value: '1',
						},
						{
							lable: 'common.MyCollection',
							router: '/myCollection',
							value: '1',
						},
						{
							lable: 'common.ApplicationHistory',
							router: '/ApplicationHistory',
							value: '1',
						},
						// 我的资源共享
						{
							lable: 'common.myResourceSharing',
							router: '/myResourceSharing',
							value: '1',
						},
						// 我的订单
						{
							lable: 'common.myOrder',
							router: '/userCenterMyOrder',
							value: '1',
						},
					],
				},
				{
					lable: 'common.InfoDataCenter',
					value: '1',
					icon: 'el-icon-setting',

					child: [
						// 我的资讯
						{
							lable: 'common.myInfoData',
							router: '/myInfoData',
							value: '1',
						},
					],
				},
				{
					lable: 'common.MyAccount',
					value: '1',
					icon: 'el-icon-user',
					child: [
						{
							lable: 'common.BasicInformation',
							value: 'information',
							router: 'information',
						},
						{
							lable: 'common.RealAuthentication',
							router: '/authentication',
							value: 'authentication',
						},
						{
							lable: 'common.SecuritySettings',
							router: '/securitySetting',
							value: 'securitySetting',
						},
						{
							lable: 'common.integralAccount',
							router: '/userCenterIntegralAccount',
							value: 'userCenterIntegralAccount',
						},
						{
							lable: 'common.integralExchange',
							router: '/userCenterIntegralExchange',
							value: 'userCenterIntegralExchange',
						},
						{
							lable: 'common.rightsRank',
							router: '/userCenterRightsRank',
							value: 'userCenterRightsRank',
						},
						{
							lable: 'common.FeetBack',
							router: '/userCenterMyFeedBackService',
							value: 'userCenterMyFeedBackService',
						},
					],
				},
			],
			navs1: [
				{
					lable: 'common.MessageCenter',
					icon: 'el-icon-chat-line-round',
					value: '1',
					child: [
						{
							lable: 'common.SystemMessage',
							router: '/SystemMessage',
							value: '1',
						},
						{
							lable: 'common.notification',
							router: '/notification',
							value: '1',
						},
						{
							lable: 'common.Interactive',
							router: '/communication',
							value: '1',
						},
					],
				},
				{
					lable: 'common.ManagementCenter',
					value: '1',
					icon: 'el-icon-setting',
					child: [
						{
							lable: 'common.MyApplication',
							router: '/myConcerns',
							value: '1',
						},
						{
							lable: 'common.MyProject',
							router: '/myProject',
							value: '1',
						},
						{
							router: '/myActivity',
							lable: 'common.MyActivities',
							value: '1',
						},
						{
							router: '/myConsultingService',
							lable: 'common.MyAdvice',
							value: '1',
						},
						{
							lable: 'common.MyAttention',
							router: '/myFollow',
							value: '1',
						},
						{
							lable: 'common.MySubscription',
							router: '/mySubscribe',
							value: '1',
						},
						{
							lable: 'common.MyCollection',
							router: '/myCollection',
							value: '1',
						},
						{
							lable: 'common.ApplicationHistory',
							router: '/ApplicationHistory',
							value: '1',
						},
						// 我的资源共享
						{
							lable: 'common.myResourceSharing',
							router: '/myResourceSharing',
							value: '1',
						},
						// 我的订单
						// {
						//   lable: "common.myOrder",
						//   router: "/userCenterMyOrder",
						//   value: "1",
						// },
					],
				},
				{
					lable: 'common.InfoDataCenter',
					value: '1',
					icon: 'el-icon-setting',

					child: [
						// 我的资讯
						{
							lable: 'common.myInfoData',
							router: '/myInfoData',
							value: '1',
						},
					],
				},
				{
					lable: 'common.MyAccount',
					value: '1',
					icon: 'el-icon-user',
					child: [
						{
							lable: 'common.BasicInformation',
							value: 'information',
							router: 'information',
						},
						{
							lable: 'common.RealAuthentication',
							router: '/authentication',
							value: 'authentication',
						},
						{
							lable: 'common.SecuritySettings',
							router: '/securitySetting',
							value: 'securitySetting',
						},
						// {
						// 	lable: 'common.integralAccount',
						// 	router: '/userCenterIntegralAccount',
						// 	value: 'userCenterIntegralAccount',
						// },
						// {
						// 	lable: 'common.integralExchange',
						// 	router: '/userCenterIntegralExchange',
						// 	value: 'userCenterIntegralExchange',
						// },
						// {
						//     lable: "common.rightsRank",
						//     router: "/userCenterRightsRank",
						//     value: "userCenterRightsRank",
						// },
						{
							lable: 'common.FeetBack',
							router: '/userCenterMyFeedBackService',
							value: 'userCenterMyFeedBackService',
						},
					],
				},
			],
		}
	},
	watch: {
		user: function () {
			if (this.user) {
				this.videoBox = 1500
			} else {
				this.videoBox = 700
			}
		},
	},
	mounted() {
		console.log('*****')
		this.locale = this.$i18n.locale
		console.log(
			this.$i18n.locale,
			'this.$i18n.localethis.$i18n.localethis.$i18n.locale'
		)
		this.initData11()
	},
	updated() {
		if (this.$route.query.key) {
			this.navRouter = this.$route.query.key
		}
	},
	methods: {
		initData11() {
			var data = JSON.parse(window.localStorage.getItem('user'))
			this.userUsertypeDict = data.umsUser.userUsertypeDict
			console.log(this.userUsertypeDict)
		},

		getIconUrl(url) {
			return require('@/assets/img/cooperationExchange/' + url)
		},
		toView(router, json) {
			this.$router.push({ name: router, params: { key: json } })
		},
		screenBack(data) {
			console.log(data, 'screenBackscreenBackscreenBackscreenBack')
		},
		screens(item, index) {
			this.i = index
		},
		handleOpen(key, keyPath) {
			this.navs.forEach((i, index) => {
				i.child.forEach((item, g) => {
					if (item.router == key) {
						return (this.lable = item.lable)
					}
				})
			})
		},
		handleClose(key, keyPath) {
			console.log(key, keyPath)
			this.$store.commit('modify', key)
		},
	},
	computed: {
		isTrue() {
			if (this.userUsertypeDict === '2') {
				console.log('高级用户')
				return true
			} else {
				console.log('普通用户')
				return false
			}
		},
	},
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.box {
	margin-top: 10px;
	background: #fff;
	/* height: 500px; */
	padding: 20px 0;
}

.crumbs {
	margin-left: 20px;
}

.box1 {
	padding: 0;
	/* transform: translateX(-20px); */
	margin-top: 15px;
	height: 700px;
}

.box2 {
	padding: 0;
	/* transform: translateX(-20px); */
	margin-top: 15px;
}

body {
	margin: 0;
}

.el-carousel__item div:nth-child(1) {
	font-size: 18px;
	margin: 0;
	float: left;
	width: 70%;
}

.el-carousel__item div:nth-child(2) {
	font-size: 18px;
	margin: 0;
	float: right;
	width: 30%;
}

.el-carousel__item:nth-child(n) {
	background-color: #ecedef;
	color: #000;
}

.cool >>> .el-carousel__container {
	height: 350px;
}

.screen1 {
	padding: 10px 18px;
	font-size: 14px;
	background-color: #e8e8e8;
}

.screen2 {
	padding: 10px 18px;
	font-size: 14px;
	background-color: #12559c;
	color: #fff;
}

.initData {
	height: 1200px;
}

.initData li {
	width: 49%;
	height: 600px;
	float: left;
}

.initData li:nth-child(2n-1) {
	margin-right: 15px;
}

.recommend {
	margin-top: 15px;
	margin-left: 10px;
}

.recommend li {
	display: inline-block;
	width: 212px;
	/* height: 130px; */
	text-align: center;
	margin-right: 15px;
}

.el-col-12 {
	width: 100%;
}

.el-submenu .el-menu-item {
	min-width: 0;
}

.userItemClass {
	width: 17%;
	background: #fff;
	float: left;
}
</style>