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

<template>
	<div class="userCenterRightsRank">
		<div class="user">
			<div class="info">
				<div class="head">
					<div class="headPortrait">
						<img
							v-if="!booleanFlag.headPortraitDefaultImg"
							:src="'api/file/pub/' + user.umsUser.userPic"
							alt=""
							style="width: 100%; height: 100%"
							@error="booleanFlag.headPortraitDefaultImg = true"
						/>
						<img
							v-if="booleanFlag.headPortraitDefaultImg"
							:src="require('@/assets/img/userCenter/user.png')"
							alt=""
							style="width: 100%; height: 100%"
						/>
					</div>
					<!-- 白银用户 -->
					<div v-if="userLevel1 == '2'" class="level">
						<div v-if="isZh">
							<img
								v-if="!booleanFlag.levelDefaultImg"
								:src="require('@/assets/img/userCenter/白银用户.png')"
								alt=""
								style="width: 100%; height: 100%"
							/>
						</div>
						<div v-else>
							<img
								v-if="!booleanFlag.levelDefaultImg"
								:src="require('@/assets/img/userCenter/@1白银用户.png')"
								alt=""
								style="width: 100%; height: 100%"
							/>
						</div>
					</div>
					<!-- 黄金用户 -->
					<div v-if="userLevel1 == '3'" class="level">
						<div v-if="isZh">
							<img
								v-if="!booleanFlag.levelDefaultImg"
								:src="require('@/assets/img/userCenter/level02.png')"
								alt=""
								style="width: 100%; height: 100%"
							/>
						</div>
						<div v-else>
							<img
								v-if="!booleanFlag.levelDefaultImg"
								:src="require('@/assets/img/userCenter/黄金用户e.png')"
								alt=""
								style="width: 100%; height: 100%"
							/>
						</div>
					</div>
					<!-- 铂金用户 -->
					<div v-if="userLevel1 == '4'" class="level">
						<div v-if="isZh">
							<img
								v-if="!booleanFlag.levelDefaultImg"
								:src="require('@/assets/img/userCenter/白金用户.png')"
								alt=""
								style="width: 100%; height: 100%"
							/>
						</div>
						<div v-else>
							<img
								v-if="!booleanFlag.levelDefaultImg"
								:src="require('@/assets/img/userCenter/白金用户e.png')"
								alt=""
								style="width: 100%; height: 100%"
							/>
						</div>
					</div>
					<!-- 钻石用户 -->
					<div v-if="userLevel1 == '5'" class="level">
						<div v-if="isZh">
							<img
								v-if="!booleanFlag.levelDefaultImg"
								:src="require('@/assets/img/userCenter/白金用户.png')"
								alt=""
								style="width: 100%; height: 100%"
							/>
						</div>
						<div v-else>
							<img
								v-if="!booleanFlag.levelDefaultImg"
								:src="require('@/assets/img/userCenter/白金用户e.png')"
								alt=""
								style="width: 100%; height: 100%"
							/>
						</div>
					</div>
				</div>
				<div class="content">
					<span class="name">{{ realName }}</span>
					<span v-if="isGreaterThan" class="growthValue">
						{{ $i18n.locale == 'zh' ? '目前成长值：' : 'Current Growth Value'
						}}{{ growth }}
					</span>
					<span
						v-if="isGreaterThan"
						class="record"
						@click="toView('userCenterGrowthRecord')"
					>
						{{ $i18n.locale == 'zh' ? '我的成长值记录' : 'My Growth Record' }}
					</span>
					<span v-if="isGreaterThan" class="remark">
						<span v-if="userLevel1 === 4">
							{{ $i18n.locale == 'zh' ? '距离' : ' Distance '
							}}{{ $i18n.locale == 'zh' ? '成为会员还差' : ' VIP Need '
							}}{{ byScore }}{{ $i18n.locale == 'zh' ? '分' : ' Point ' }}
						</span>
						<span v-else>
							{{ $i18n.locale == 'zh' ? '距离成为' : ' Distance '
							}}{{ userInfoDeTua }}{{ $i18n.locale == 'zh' ? '还差' : ' Need '
							}}{{ byScore }}{{ $i18n.locale == 'zh' ? '分' : ' Point ' }}
						</span>
					</span>
					<span v-else class="remark">{{
						$i18n.locale == 'zh'
							? '当前为星钻用户'
							: 'Currently a Diamonds Member'
					}}</span>
				</div>
			</div>
			<div>
				<img
					v-if="isZh"
					src="@/assets/img/userCenter/userRights/userRights_level2.png"
					alt=""
					style="width: 100%"
				/>
				<img
					v-else
					src="@/assets/img/userCenter/userRights/levelEn.png"
					alt=""
					style="width: 100%"
				/>
			</div>
		</div>
		<div class="task">
			<div class="title">
				<span
					style="
						width: 7px;
						height: 19px;
						background-color: #265186;
						margin-left: 4px;
					"
				></span>
				<span style="margin-left: 8px; color: #265186">{{
					$i18n.locale == 'zh' ? '当前等级特权' : 'Current Level Lrivilege'
				}}</span>
			</div>
			<!-- 白银用户 -->
			<div v-if="userLevel1 == '2'">
				<div v-if="isZh" class="content levelPrivilege">
					<div v-for="(item, index) in silver" :key="'task1' + index">
						<img :src="item.src" alt="" style="width: 100%" />
					</div>
				</div>
				<div v-else class="content levelPrivilege">
					<div v-for="(item, index) in silverEn" :key="'task1' + index">
						<img :src="item.src" alt="" style="width: 100%" />
					</div>
				</div>
			</div>
			<!-- 黄金用户 -->
			<div v-if="userLevel1 == '3'">
				<div v-if="isZh" class="content levelPrivilege">
					<div v-for="(item, index) in rights" :key="'task1' + index">
						<img :src="item.src" alt="" style="width: 100%" />
					</div>
				</div>
				<div v-else class="content levelPrivilege">
					<div v-for="(item, index) in rights1" :key="'task1' + index">
						<img :src="item.src" alt="" style="width: 100%" />
					</div>
				</div>
			</div>
			<!-- 铂金和钻石用户 -->
			<div v-if="userLevel1 == '4' || userLevel1 == '5'">
				<div v-if="isZh" class="content levelPrivilege">
					<div v-for="(item, index) in diamond" :key="'task1' + index">
						<img :src="item.src" alt="" style="width: 100%" />
					</div>
				</div>
				<div v-else class="content levelPrivilege">
					<div v-for="(item, index) in diamondEn" :key="'task1' + index">
						<img :src="item.src" alt="" style="width: 100%" />
					</div>
				</div>
			</div>
		</div>
		<div class="task">
			<div class="title">
				<span
					style="
						width: 7px;
						height: 19px;
						background-color: #265186;
						margin-left: 4px;
					"
				></span>
				<span style="margin-left: 8px; color: #265186">{{
					$i18n.locale == 'zh' ? '用户等级权益表' : 'User Level Benefit Table'
				}}</span>
			</div>
			<div class="content benefitTable">
				<el-table
					border
					:data="userRights"
					:cell-class-name="userRightsCellClass"
					style="width: 100%; margin: 0 auto"
				>
					<el-table-column
						key="Equity_Class"
						:label="$i18n.locale === 'zh' ? '权益/等级' : 'Equity/Class'"
						align="center"
						class-name="nameLine"
						min-width="180"
					>
						<template slot-scope="scope">
							<div
								style="
									width: 180px;
									overflow: hidden;
									table-layout: fixed;
									word-wrap: break-all;
									word-break: normal;
								"
							>
								{{ $i18n.locale == 'zh' ? scope.row.name : scope.row.nameEn }}
							</div>
						</template>
					</el-table-column>

					<el-table-column
						v-for="(item, index) in userLevel"
						:key="item.level + index + Math.random()"
						:label="$i18n.locale === 'zh' ? item.name : item.nameEn"
						align="center"
						label-class-name="nameLine"
						min-width="180"
					>
						<template slot-scope="scope">
							<i
								v-if="item.rights.includes(scope.row.rights)"
								class="el-icon-check"
								style="color: #fac223; font-size: 18px; font-weight: 600"
							></i>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>
		<div class="task">
			<div class="title">
				<span
					style="
						width: 7px;
						height: 19px;
						background-color: #265186;
						margin-left: 4px;
					"
				></span>
				<span style="margin-left: 8px; color: #265186">{{
					$i18n.locale == 'zh'
						? '用户等级规则说明'
						: 'User Level Rule Description'
				}}</span>
			</div>
			<div class="content levelRuleDescription">
				<div style="width: 282px; padding: 60px 0 20px">
					<el-table
						border
						:data="userLevel"
						header-row-class-name="nameLine"
						style="width: 100%"
					>
						<el-table-column
							prop="name"
							key="column1"
							:label="$i18n.locale === 'zh' ? '用户/等级' : 'User/Class'"
							align="center"
							min-width="140"
						>
							<template slot-scope="scope">
								<div>
									{{ $i18n.locale == 'zh' ? scope.row.name : scope.row.nameEn }}
								</div>
							</template>
						</el-table-column>
						<el-table-column
							key="column2"
							:label="$i18n.locale === 'zh' ? '成长值(分)' : 'Growth(Point)'"
							align="center"
							min-width="140"
						>
							<template slot-scope="scope">
								{{ scope.row.growthValue }}
								{{
									['level4'].includes(scope.row.level)
										? $i18n.locale === 'zh'
											? '成为会员'
											: 'Become Member'
										: ''
								}}
							</template>
						</el-table-column>
					</el-table>
				</div>
				<div v-if="isZh" class="intro" v-html="intro"></div>
				<div v-else class="intro" v-html="intro1"></div>
			</div>
		</div>
	</div>
</template>

<script>
import { getUserPointPage } from '@/api/user'
export default {
	name: 'userCenterRightsRank',
	data() {
		return {
			userInfoDeTua: '',
			booleanFlag: {
				headPortraitDefaultImg: false,
				levelDefaultImg: false,
			},
			user: {
				umsUser: {},
			},
			silver: [
				{
					src: require('@/assets/img/userCenter/userRights/userRights_01.png'),
				},
				{
					src: require('@/assets/img/userCenter/userRights/userRights_02.png'),
				},
				{
					src: require('@/assets/img/userCenter/userRights/userRights_03.png'),
				},
				{
					src: require('@/assets/img/userCenter/userRights/专题活动邀请.png'),
				},
				{
					src: require('@/assets/img/userCenter/userRights/优先定制服务.png'),
				},
				{
					src: require('@/assets/img/userCenter/userRights/资源下载优惠.png'),
				},
				{
					src: require('@/assets/img/userCenter/userRights/userRights_07_disabled.png'),
				},
				{
					src: require('@/assets/img/userCenter/userRights/userRights_08_disabled.png'),
				},
				{
					src: require('@/assets/img/userCenter/userRights/userRights_09_disabled.png'),
				},
				{
					src: require('@/assets/img/userCenter/userRights/userRights_10_disabled.png'),
				},
			],
			silverEn: [
				{
					src: require('@/assets/img/userCenter/userRights/right/注册有礼已完成Epng.png'),
				},
				{
					src: require('@/assets/img/userCenter/userRights/right/活动有限报名已完成E.png'),
				},
				{
					src: require('@/assets/img/userCenter/userRights/right/信息咨询服务已完成E.png'),
				},
				{
					src: require('@/assets/img/userCenter/userRights/right/专题活动邀请-未完成.png'),
				},
				{
					src: require('@/assets/img/userCenter/userRights/right/优先定制服务-未完成.png'),
				},
				{
					src: require('@/assets/img/userCenter/userRights/right/资源下载优惠-未完成.png'),
				},
				{
					src: require('@/assets/img/userCenter/userRights/right/调研机构优先参观-未完成.png'),
				},
				{
					src: require('@/assets/img/userCenter/userRights/right/专属客服-未完成.png'),
				},
				{
					src: require('@/assets/img/userCenter/userRights/right/平台广告推广权益-未完成.png'),
				},
				{
					src: require('@/assets/img/userCenter/userRights/right/联合办会-未完成.png'),
				},
			],
			rights: [
				{
					src: require('@/assets/img/userCenter/userRights/userRights_01.png'),
				},
				{
					src: require('@/assets/img/userCenter/userRights/userRights_02.png'),
				},
				{
					src: require('@/assets/img/userCenter/userRights/userRights_03.png'),
				},
				{
					src: require('@/assets/img/userCenter/userRights/userRights_04.png'),
				},
				{
					src: require('@/assets/img/userCenter/userRights/userRights_05.png'),
				},
				{
					src: require('@/assets/img/userCenter/userRights/userRights_06.png'),
				},
				{
					src: require('@/assets/img/userCenter/userRights/userRights_07_disabled.png'),
				},
				{
					src: require('@/assets/img/userCenter/userRights/userRights_08_disabled.png'),
				},
				{
					src: require('@/assets/img/userCenter/userRights/userRights_09_disabled.png'),
				},
				{
					src: require('@/assets/img/userCenter/userRights/userRights_10_disabled.png'),
				},
			],
			rights1: [
				{
					src: require('@/assets/img/userCenter/userRights/right/注册有礼已完成Epng.png'),
				},
				{
					src: require('@/assets/img/userCenter/userRights/right/活动有限报名已完成E.png'),
				},
				{
					src: require('@/assets/img/userCenter/userRights/right/信息咨询服务已完成E.png'),
				},
				{
					src: require('@/assets/img/userCenter/userRights/right/专题活动邀请已完成E.png'),
				},
				{
					src: require('@/assets/img/userCenter/userRights/right/优先定制服务已完成4.png'),
				},
				{
					src: require('@/assets/img/userCenter/userRights/right/资源下载优惠已完成E.png'),
				},
				{
					src: require('@/assets/img/userCenter/userRights/right/调研机构优先参观-未完成.png'),
				},
				{
					src: require('@/assets/img/userCenter/userRights/right/专属客服-未完成.png'),
				},
				{
					src: require('@/assets/img/userCenter/userRights/right/平台广告推广权益-未完成.png'),
				},
				{
					src: require('@/assets/img/userCenter/userRights/right/联合办会-未完成.png'),
				},
			],
			diamond: [
				{
					src: require('@/assets/img/userCenter/userRights/userRights_01.png'),
				},
				{
					src: require('@/assets/img/userCenter/userRights/userRights_02.png'),
				},
				{
					src: require('@/assets/img/userCenter/userRights/userRights_03.png'),
				},
				{
					src: require('@/assets/img/userCenter/userRights/userRights_04.png'),
				},
				{
					src: require('@/assets/img/userCenter/userRights/userRights_05.png'),
				},
				{
					src: require('@/assets/img/userCenter/userRights/userRights_06.png'),
				},
				{
					src: require('@/assets/img/userCenter/userRights/userRights_07.png'),
				},
				{
					src: require('@/assets/img/userCenter/userRights/userRights_08.png'),
				},
				{
					src: require('@/assets/img/userCenter/userRights/userRights_09.png'),
				},
				{
					src: require('@/assets/img/userCenter/userRights/userRights_10.png'),
				},
			],
			diamondEn: [
				{
					src: require('@/assets/img/userCenter/userRights/right/注册有礼已完成Epng.png'),
				},
				{
					src: require('@/assets/img/userCenter/userRights/right/活动有限报名已完成E.png'),
				},
				{
					src: require('@/assets/img/userCenter/userRights/right/信息咨询服务已完成E.png'),
				},
				{
					src: require('@/assets/img/userCenter/userRights/right/专题活动邀请已完成E.png'),
				},
				{
					src: require('@/assets/img/userCenter/userRights/right/优先定制服务已完成4.png'),
				},
				{
					src: require('@/assets/img/userCenter/userRights/right/资源下载优惠已完成E.png'),
				},
				{
					src: require('@/assets/img/userCenter/userRights/right/调研机构优先参观已完成E.png'),
				},
				{
					src: require('@/assets/img/userCenter/userRights/right/专属客服已完成E.png'),
				},
				{
					src: require('@/assets/img/userCenter/userRights/right/平台广告推广权益已完成E.png'),
				},
				{
					src: require('@/assets/img/userCenter/userRights/right/联合办会已完成E.png'),
				},
			],
			userLevel: [
				{
					name: 'V1白银用户',
					nameEn: 'V1 Silver User',
					level: 'level1',
					growthValue: '0-999',
					rights: ['1', '2', '3', '4'],
				},
				{
					name: 'V2黄金用户',
					nameEn: 'V2 Gold User',
					level: 'level2',
					growthValue: '1000-2999',
					rights: ['1', '2', '3', '4', '5', '6', '7'],
				},
				{
					name: 'V3铂金用户',
					nameEn: 'V3 Platinum User',
					level: 'level3',
					growthValue: '3000-999999',
					rights: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11'],
				},
				{
					name: '星钻用户',
					nameEn: 'Star User',
					level: 'level4',
					growthValue: '',
					rights: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11'],
				},
			],
			userRights: [
				{
					name: '注册有礼',
					nameEn: 'Registration Courtesy',
					rights: '1',
				},
				// {
				//   name: "积分兑换",
				//   nameEn: "Credits Exchange",
				//   rights: "2",
				// },
				{
					name: '活动优先报名',
					nameEn: 'Priority Registration',
					rights: '3',
				},
				{
					name: '信息咨询服务',
					nameEn: 'Information Consulting Services',
					rights: '4',
				},
				{
					name: '专题活动邀请',
					nameEn: 'Special Event Invitation',
					rights: '5',
				},
				{
					name: '优先定制服务',
					nameEn: 'Priority Custom Service',
					rights: '6',
				},
				{
					name: '资源下载优惠',
					nameEn: 'Resource Download Discount',
					rights: '7',
				},
				{
					name: '调研机构优先参观',
					nameEn: 'Priority Visit To Research Institutions',
					rights: '8',
				},
				{
					name: '业务咨询优先服务',
					nameEn: 'Business Consulting Priority Service',
					rights: '9',
				},
				{
					name: '平台广告推广权益',
					nameEn: 'Platform Advertising Rights',
					rights: '10',
				},
				{
					name: '联合办会',
					nameEn: 'Joint Meeting',
					rights: '11',
				},
			],
			growth: '',
			userGrades: '',
			userRight: [],
			isGreaterThan: true,
			language: '',
			isZh: true,
			demo: null,
			membershipGrade: null,
			intro:
				'<p style="text-align: center;"><span style="font-size: 24px;"><strong>用户等级规则说明</strong></span></p><p><strong><span style="font-size: 16px;">用户等级介绍</span></strong></p><p style="text-indent: 0em;"><span style="font-size: 14px;">用户等级是基于用户一定期限使用能联全球平台业务累积获取的成长值决定,用户达到相应的等级门槛即可升级,用户可以通过做登录、留言和分享做任务来获取成长值,从而提升等级。</span></p><p><span style="font-size: 16px;"><strong>等级有效期</strong></span></p><p><span style="font-size: 14px;">用户等级有效期为一年(365天),若用户升级,新等级有效期从升级当天开始计算。若您没有在当前有效期内升级,新等级有效期会在当前等级有效期到期日的次日</span></p><p><span style="font-size: 14px;">开始重新计算并变更为新的等级;同时,你在当前等级有效期变更前获取的成长值【含奖励的成长值(以成长值到账时间计算)】会自动清零。新等级有效期内获取的成长值,将计算在新的等级有效期内。</span><br/></p><p><span style="font-size: 16px;"><strong>升降级规则</strong></span></p><p><span style="font-size: 14px;">用户在等级有效期内成长值达到升级门槛值,新等级立即生效。等级到期后,用户等级将根据上个有效期内获取的成长值重新计算。若跨等级有效期变更的出现扣值情况,成长值会在新等级有效期的成长值扣除(因为等级有效期前获取的成长值已计入上个等级有效期并影响用户升降级)。若当前等级有效期成长值不足抵扣跨等级有效期的成长值,则有多少扣多少,扣至为零后,后续获取的成长值不会在抵扣</span></p><p><span style="font-size: 16px;"><strong>成长值说明</strong></span></p><p><span style="font-size: 14px;">用来评定用户用户等级的值称为成长值;用户可以通过做登录、留言和分享做任务等方式获取成长值,从而提升会员等级。用户升级</span></p>',

			intro1:
				'<p style="text-align: center;"><span style="font-size: 24px;"><strong>User Level Rule Description</strong></span></p><p><strong><span style="font-size: 16px;">User Level Introduction</span></strong></p><p style="text-indent: 0em;"><span style="font-size: 14px;">The user level is determined based on the growthvalue accumulated by the user using the global platform business for a certain period of time.The user can be upgraded after reaching the corresponding level threshold. The user can obtainthe growth value by logging in, leaving messages and sharing tasks, so as to improve thelevel.</span></p><p><span style="font-size: 16px;"><strong>Grade Validity</strong></span></p><p><span style="font-size: 14px;">The validity period of the user level is one year (365 days). If the userupgrades, the validity period of the new level starts from the day of upgrading. If you do notupgrade within the current validity period, the validity period of the new level will be thenext day of the expiration date of the current level</span></p><p><span style="font-size: 14px;">Start recalculation and change to a new level; At the same time, the growthvalue you obtained before the validity period of the current level is changed [including thegrowth value of reward (calculated by the arrival time of growth value)] will be automaticallycleared. The growth value obtained within the validity period of the new level will becalculated within the validity period of the new level.</span><br /></p><p><span style="font-size: 16px;"><strong>Promotion And Degradation Rules</strong></span></p><p><span style="font-size: 14px;">If the growth value of the user reaches the upgrade threshold within thevalidity period of the level, the new level will take effect immediately. After the levelexpires, the user level will be recalculated according to the growth value obtained in theprevious validity period. In case of value deduction in the change of cross level validityperiod, the growth value will be deducted from the growth value in the new level validity period(because the growth value obtained before the level validity period has been included in theprevious level validity period and affects the user level rise and fall). If the growth valuein the validity period of the current level is insufficient to deduct the growth value in thecross level validity period, how much will be deducted. After deducting to zero, the subsequentgrowth value will not be deducted</span></p><p><span style="font-size: 16px;"><strong>Growth Value Description</strong></span></p><p><span style="font-size: 14px;">The value used to evaluate the user level is called growth value; Users canget growth value by logging in, leaving messages and sharing tasks, so as to improve the level of members. User upgrade</span></p>',
		}
	},
	mounted() {
		let language = window.localStorage.getItem('locale')
		if (language == 'zh') {
			this.isZh = true
		} else {
			this.isZh = false
		}
		this.init()
		console.log(this.userLevel1, '等级')
		this.membershipGrade = JSON.parse(window.localStorage.getItem('user'))
		console.log(this.membershipGrade, '用户')
		if (this.userLevel1 == '5') {
			this.isGreaterThan = false
		}
	},
	watch: {
		'$i18n.locale': {
			handler: function () {
				if (this.$i18n.locale == 'zh') {
					this.isZh = true
				} else {
					this.isZh = false
				}
			},
			deep: true,
		},
	},
	methods: {
		init() {
			this.user = JSON.parse(window.localStorage.getItem('user'))
			this.userRight = JSON.parse(window.localStorage.getItem('userRight'))
			if (this.user.umsUser.userPic == undefined) {
				this.user.umsUser.userPic = ''
			}
			this.growthForValue()
		},

		// 获取成长值
		growthForValue() {
			getUserPointPage().then((res) => {
				if (res) {
					this.growth = res.data.umsUserPoints[0].growthValue
				}
			})
		},
		userRightsCellClass({ row, column, rowIndex, columnIndex }) {
			if (
				columnIndex != 0 &&
				this.userLevel[columnIndex - 1].rights.includes(row.rights)
			) {
				return 'haveRight'
			}
		},
		toView(route, params) {
			this.$router.push({
				name: route,
				query: params,
			})
		},
	},
	computed: {
		// 判断有无真名
		realName() {
			if (this.user.umsUser.userNickName) {
				return this.user.umsUser.userNickName
			} else {
				return this.user.username
			}
		},

		// 判断会员等级
		userLevel1() {
			if (this.growth >= 0 && this.growth < 1000) {
				if (this.$i18n.locale == 'zh') {
					this.userInfoDeTua = '黄金用户'
				} else {
					this.userInfoDeTua = 'Gold User'
				}
				return 2
			} else if (this.growth >= 1000 && this.growth < 3000) {
				if (this.$i18n.locale == 'zh') {
					this.userInfoDeTua = '铂金用户'
				} else {
					this.userInfoDeTua = 'Platinum User'
				}
				return 3
			} else if (this.growth >= 3000) {
				return 4
			}
		},
		// 判断差多少分
		byScore() {
			if (this.growth >= 0 && this.growth < 1000) {
				return parseInt(1000 - this.growth)
			} else if (this.growth >= 1000 && this.growth < 3000) {
				return parseInt(3000 - this.growth)
			} else if (this.growth >= 3000) {
				return parseInt(999999)
			}
		},

		// 判断中英文
		// isZh() {
		//   this.language = window.localStorage.getItem("locale");
		//   if (this.language == "zh") {
		//     return true;
		//   } else {
		//     return false;
		//   }
		// },
	},
}
</script>

<style scoped lang="less">
.userCenterRightsRank {
	width: 100%;
	background: #fff;
	min-height: 700px;
	padding: 0;
	box-sizing: border-box;

	.user {
		width: 100%;
		background-color: #f9f9f9;
		border-radius: 5px;

		.info {
			display: flex;
			height: 190px;
			padding-left: 100px;

			.head {
				width: 140px;

				.headPortrait {
					width: 82px;
					height: 82px;
					border-radius: 50%;
					margin: 27px auto 0;
				}

				.level {
					width: 108px;
					height: 28px;
					border-radius: 14px;
					margin: 8px auto 0;
				}
			}

			.content {
				flex: 1;
				margin-top: 117px;
				height: 28px;

				.name {
					font-size: 22px;
					font-weight: 600;
					color: #000;
					margin-left: 17px;
				}

				.growthValue {
					font-size: 16px;
					color: #939393;
					margin-left: 17px;
				}

				.record {
					font-size: 16px;
					color: #588fbb;
					text-decoration: underline;
					cursor: pointer;
					margin-left: 17px;
				}

				.remark {
					font-size: 16px;
					color: #939393;
					margin-left: 17px;
				}
			}
		}
	}

	.task {
		.title {
			width: 100%;
			border-bottom: 1px solid #eeeff3;

			> span {
				display: inline-block;
				font-size: 18px;
				font-weight: 600;
				line-height: 70px;
				vertical-align: middle;
			}
		}

		.content {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			&.levelPrivilege > div {
				width: 19%;
				height: 140px;
				margin-top: 18px;
			}

			&.benefitTable {
				display: inherit;
				padding: 16px 0;

				/deep/ .el-table__body tr {
					pointer-events: none;
				}

				/deep/ .nameLine {
					background-color: #f9f9f9;
				}

				/deep/ .haveRight {
					background-color: #feefc4;
				}
			}

			&.levelRuleDescription {
				/deep/ .nameLine th {
					background-color: #f9f9f9;
				}

				/deep/ .el-table td,
				/deep/ .el-table th {
					padding: 30px 0;
				}

				.intro {
					flex: 1;
					padding: 0 0 22px 16px;

					p {
						margin: 0;
					}
				}
			}
		}
	}
}
</style>