dev/dcp-app-gate/pages/profile/personIntegrate/equityGrade.vue

<template>
	<!-- 权益等级 -->
	<view class="">
		<!-- 顶部导航 -->
		<view style="background-color: $color-white !important;">
			<u-navbar :back-text="i18n('Back')" :back-text-style="backStyle" back-icon-color="#fff" title-color="#fff"
				:background="background" title-width="300" :title="i18n('gradeInfo')"></u-navbar>
		</view>
		<!-- 用户基本信息 -->
		<view class="content">
			<view class="user-info">
				<view class="user-pic">
					<image class="ui-pic-detail" :src="websiteUrl+picDetail.userPic" mode=""></image>
					<view class="user-grade-now">
						{{userInfos.levelName}}
					</view>
				</view>
				<view class="integrate-now">
					<view class="user-name">{{userInfos.userName}}</view>
					<view class="user-grow">
						{{$i18n.locale=='zh'?'成长值:':'Growth Value:'}}{{userInfos.growthValue==null?'0':userInfos.growthValue}}
					</view>
					<view class="next-grade">{{$i18n.locale=='zh' ? '距下一个等级需':
						'Distance to the next levelrequires'}} {{growNum}} {{$i18n.locale=='zh' ?'成长值':'growth'}}</view>
				</view>
				<u-button class=" get-integrate" type="custom" shape="circle" @tap="toList"><text
						class="get-integrate-info">{{$i18n.locale=='zh'?'去升级':'Upgrade'}}</text>
				</u-button>
			</view>
			<view v-if="$i18n.locale=='zh'" class="user-style1">
				<image class="top-pic" src="@/static/user-pic/user-grade.png" style="height: 55px;"></image>
			</view>
			<view v-if="$i18n.locale!='zh'" class="user-style2">
				<image class="top-pic" src="@/static/theLast/english-925.png" style="height: 55px;"></image>
			</view>
			<view class="user-privilege">
				<view class="privilege-now">
					<view class="user-now-grade">{{$i18n.locale=='zh'?'当前等级特权':'Current Level Lrivilege'}}</view>
					<view class="user-get-grade" @tap="toGetDetails">
						<view class="user-get-grade-text">{{$i18n.locale=='zh'?'如何升级':'How To Upgrade'}}</view>
						<view class="little-thing">></view>
					</view>

				</view>
				<view class="user-privilege-info" v-if="$i18n.locale=='zh'">
					<view class="height-color">
						<view>
							<image src="@/static/userGrade123/userRights_01.png" class="privilege-pic" />
						</view>
					</view>
					<view class="height-color">
						<view>
							<image src="@/static/userGrade123/userRights_02.png" class="privilege-pic" />
						</view>

					</view>
					<view class="height-color">
						<view>
							<image src="@/static/userGrade123/userRights_03.png" class="privilege-pic" />
						</view>
					</view>
				</view>
				<view class="user-privilege-info" v-if="$i18n.locale=='zh'">
					<view class="privilege-detail" v-show="showMsg">
						<view>
							<image src="@/static/userGrade123/first2.png" class="privilege-pic" />
						</view>
					</view>
					<view class="height-color" v-show="!showMsg">
						<view>
							<image src="@/static/userGrade123/userRights_04.png" class="privilege-pic" />
						</view>
					</view>
					<view class="privilege-detail" v-show="showMsg">

						<view>
							<image src="@/static/userGrade123/first1.png" class="privilege-pic" />
						</view>
					</view>
					<view class="height-color" v-show="!showMsg">
						<view>
							<image src="@/static/userGrade123/userRights_05.png" class="privilege-pic" />
						</view>
					</view>
					<view class="privilege-detail" v-show="showMsg">

						<view>
							<image src="@/static/userGrade123/first3.png" class="privilege-pic" />
						</view>
					</view>
					<view class="height-color" v-show="!showMsg">
						<view>
							<image src="@/static/userGrade123/userRights_06.png" class="privilege-pic" />
						</view>
					</view>
				</view>
				<view class="user-privilege-info" v-if="$i18n.locale=='zh'">
					<view class="privilege-detail" v-if="seeMsg">

						<view>
							<image src="@/static/userGrade123/userRights_07_disabled.png" class="privilege-pic" />
						</view>
					</view>
					<view class="height-color" v-if="!seeMsg">
						<view>
							<image src="@/static/userGrade123/userRights_07.png" class="privilege-pic" />
						</view>
					</view>
					<view class="privilege-detail" v-if="seeMsg">

						<view>
							<image src="@/static/userGrade123/userRights_08_disabled.png" class="privilege-pic" />
						</view>
					</view>
					<view class="height-color" v-if="!seeMsg">
						<view>
							<image src="@/static/userGrade123/userRights_08.png" class="privilege-pic" />
						</view>
					</view>
					<view class="privilege-detail" v-if="seeMsg">

						<view>
							<image src="@/static/userGrade123/userRights_09_disabled.png" class="privilege-pic" />
						</view>
					</view>
					<view class="height-color" v-if="!seeMsg">
						<view>
							<image src="@/static/userGrade123/userRights_09.png" class="privilege-pic" />
						</view>
					</view>
				</view>
				<view class="user-privilege-info" v-if="$i18n.locale=='zh'">
					<view class="privilege-detail" v-if="seeMsg">
						<view>
							<image src="@/static/userGrade123/userRights_10_disabled.png" class="privilege-pic" />
						</view>
					</view>
					<view class="height-color" v-if="!seeMsg">
						<view>
							<image src="@/static/userGrade123/userRights_10.png" class="privilege-pic" />
						</view>
					</view>
					<view class="privilege-detail big-detail">
						<view>
							<image src="@/static/picEn456/all321.png" class="privilege-pic" />
						</view>
					</view>
				</view>

				<view class="user-privilege-info" v-if="$i18n.locale!='zh'">
					<view class="height-color">
						<view>
							<image src="@/static/picEn456/picEn_07_1.png" class="privilege-pic" />
						</view>
					</view>
					<view class="height-color">
						<view>
							<image src="@/static/picEn456/picEn_02_1.png" class="privilege-pic" />
						</view>

					</view>
					<view class="height-color">
						<view>
							<image src="@/static/picEn456/picEn_05_1.png" class="privilege-pic" />
						</view>
					</view>
				</view>
				<view class="user-privilege-info" v-if="$i18n.locale!='zh'">
					<view class="privilege-detail" v-show="showMsg">
						<view>
							<image src="@/static/picEn456/picEn_09.png" class="privilege-pic" />
						</view>
					</view>
					<view class="height-color" v-show="!showMsg">
						<view>
							<image src="@/static/picEn456/picEn_09_1.png" class="privilege-pic" />
						</view>
					</view>
					<view class="privilege-detail" v-show="showMsg">

						<view>
							<image src="@/static/picEn456/picEn_06.png" class="privilege-pic" />
						</view>
					</view>
					<view class="height-color" v-show="!showMsg">
						<view>
							<image src="@/static/picEn456/picEn_06_1.png" class="privilege-pic" />
						</view>
					</view>
					<view class="privilege-detail" v-show="showMsg">

						<view>
							<image src="@/static/picEn456/picEn_10.png" class="privilege-pic" />
						</view>
					</view>
					<view class="height-color" v-show="!showMsg">
						<view>
							<image src="@/static/picEn456/picEn_10_1.png" class="privilege-pic" />
						</view>
					</view>
				</view>
				<view class="user-privilege-info" v-if="$i18n.locale!='zh'">
					<view class="privilege-detail" v-if="seeMsg">

						<view>
							<image src="@/static/picEn456/picEn_01.png" class="privilege-pic" />
						</view>
					</view>
					<view class="height-color" v-if="!seeMsg">
						<view>
							<image src="@/static/picEn456/picEn_01_1.png" class="privilege-pic" />
						</view>
					</view>
					<view class="privilege-detail" v-if="seeMsg">

						<view>
							<image src="@/static/picEn456/picEn_08.png" class="privilege-pic" />
						</view>
					</view>
					<view class="height-color" v-if="!seeMsg">
						<view>
							<image src="@/static/picEn456/picEn_08_1.png" class="privilege-pic" />
						</view>
					</view>
					<view class="privilege-detail" v-if="seeMsg">

						<view>
							<image src="@/static/picEn456/picEn_04.png" class="privilege-pic" />
						</view>
					</view>
					<view class="height-color" v-if="!seeMsg">
						<view>
							<image src="@/static/picEn456/picEn_04_1.png" class="privilege-pic" />
						</view>
					</view>
				</view>
				<view class="user-privilege-info" v-if="$i18n.locale!='zh'">
					<view class="privilege-detail" v-if="seeMsg">
						<view>
							<image src="@/static/picEn456/picEn_03.png" class="privilege-pic" />
						</view>
					</view>
					<view class="height-color" v-if="!seeMsg">
						<view>
							<image src="@/static/picEn456/picEn_03_1.png" class="privilege-pic" />
						</view>
					</view>
					<view class="privilege-detail big-detail">
						<view>
							<image src="@/static/picEn456/picEn_11.png" class="privilege-pic" />
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			props: [this.form]
			return {
				background: {
					backgroundImage: 'linear-gradient(270deg, #4BC0E2 0%, #538BE7 100%)',
				},
				backStyle: {
					color: '#FFFFFF',
				},
				showMsg: true,
				seeMsg: true,
				picDetail: {},
				userInfos: {},
				growNum: Number,
			};
		},
		onShow() {
			this.getNum();
		},
		methods: {

			i18n(data) {
				return this.$t('common.' + data);
			},
			// toGetGrow() {
			// 	uni.navigateTo({
			// 		url: 'growList'
			// 	})
			// },
			toGetDetails() {
				uni.navigateTo({
					url: './gradeDetails'
				})
			},
			toList() {
				uni.navigateTo({
					url: './integrateConversion'
				})
			},
			async getNum() {
				await this.getUserInfo();
				let num = this.userInfos.growthValue;
				console.log(num);
				if (num >= 6000) {
					num = Number(999999);
					this.showMsg = false;
					this.seeMsg = false;
				} else if (num >= 3000) {
					num = Number(6000) - Number(num);
					this.showMsg = false;
					this.seeMsg = false;
				} else if (num >= 1000) {
					num = Number(3000) - Number(num);
					this.showMsg = false;
					this.seeMsg = true;
				} else if (num > 0) {
					num = Number(1000) - Number(num);
					this.showMsg = true;
					this.seeMsg = true;
				} else if (num == null) {
					num = 1000;
					this.showMsg = true;
					this.seeMsg = true;
				}
				this.growNum = num;
			},

			async getUserInfo() {
				const res = await this.$myRequest({
					url: '/uc/userCenter/findBasicInfo',
					data: {},
				});
				this.picDetail = res.data
				await this.getUserDetails();
			},
			// 获取登录用户的信息
			async getUserDetails() {
				const res = await this.$myRequest({
					url: '/uc/umsUserPoints/getUserPoint',
					data: {

					}
				});
				// console.log(res);
				this.userInfos = res.data.umsUserPoints[0]
				if (this.userInfos.levelName == '白银用户') {
					if (this.$i18n.locale == 'zh') {
						this.userInfos.levelName = '白银用户'
					} else {
						this.userInfos.levelName = 'Silver User'
					}
				} else if (this.userInfos.levelName == '黄金用户') {
					if (this.$i18n.locale == 'zh') {
						this.userInfos.levelName = '黄金用户'
					} else {
						this.userInfos.levelName = 'Gold User'
					}
				} else if (this.userInfos.levelName == '铂金用户') {
					if (this.$i18n.locale == 'zh') {
						this.userInfos.levelName = '铂金用户'
					} else {
						this.userInfos.levelName = 'Platinum User'
					}
				} else {
					if (this.$i18n.locale == 'zh') {
						this.userInfos.levelName = '星钻用户'
					} else {
						this.userInfos.levelName = 'Star User'
					}
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100%;
		// background-color: #f5f5f5;

		.user-info {
			display: flex;
			justify-content: space-around;
			background-image: url('/static/bgc-user.png');
			background-size: 100%;
			height: 200rpx;
			position: relative;

			.user-pic {
				width: 20%;
				height: 73%;
				margin-top: 4%;
				margin-left: 4%;
				border-radius: 50%;
				background-color: #e9e9e9;
				overflow: hidden;

				.ui-pic-detail {
					width: 100%;
					height: 100%;
				}

				.user-grade-now {
					font-size: 20rpx;
					width: 25%;
					text-align: center;
					transform: translateY(410%);
					border-radius: 50rpx;
					background-color: #DFAC74FF;
					z-index: 999;
					position: absolute;
					left: 2%;
					top: 30rpx;
				}
			}

			.integrate-now {
				width: 50%;
				margin-left: 2%;

				.user-name {
					margin-top: 11%;
					font-size: 32rpx;
				}

				.user-grow {
					margin-top: 1%;
					margin-bottom: 2%;
				}

				.next-grade {
					font-size: 20rpx;
				}
			}

			.get-integrate {
				width: 27%;
				height: 25%;
				line-height: 25%;
				transform: translateX(35%) translateY(160%);
				background-color: #e8cb50;
				border: none;

				.get-integrate-info {
					font-size: 28rpx;
					color: #fff;
					transform: translateX(-37%);
				}
			}
		}

		.user-style1 {
			width: 96%;
			background-color: #fff;
			height: 80px;
			margin-top: 15px;
			margin-left: 2%;
			border-radius: 8px;

			.top-pic {
				width: 96%;
				height: 70px;
				margin-left: 2%;
				margin-top: 5px;
			}
		}

		.user-style2 {
			width: 96%;
			background-color: #fff;
			height: 80px;
			margin-top: 15px;
			margin-left: 2%;
			border-radius: 8px;

			.top-pic {
				width: 96%;
				height: 70px;
				margin-left: 2%;
				margin-top: 5px;
			}
		}

		.user-privilege {
			width: 100%;
			background-color: #fff;
			margin-top: 3%;

			.privilege-now {
				width: 92%;
				margin-left: 4%;
				display: flex;
				justify-content: space-between;

				.user-now-grade {
					width: 50%;
					height: 80rpx;
					line-height: 80rpx;
					font-size: 30rpx;
					font-weight: 700;
					margin-bottom: 6%;
				}

				.user-get-grade {
					width: 50%;
					height: 40rpx;
					margin-top: 6%;
					margin-bottom: 4%;
					display: flex;
					justify-content: space-evenly;

					.user-get-grade-text {
						width: 93%;
						font-size: 12px;
						height: 40rpx;
						text-align: right;
						line-height: 40rpx;
						color: #6bbfe8;
						font-weight: 700;
					}

					.little-thing {
						width: 7%;
						font-size: 15px;
						height: 40rpx;
						line-height: 40rpx;
						color: #000;
					}
				}


			}

			.user-privilege-info {
				width: 92%;
				margin-left: 4%;
				display: flex;
				justify-content: space-between;

				.privilege-detail {
					width: 32%;
					height: 160rpx;
					margin-bottom: 3%;
					border-radius: 20rpx;
					border: 1px solid #a8a8a8;
					overflow: hidden;

					.privilege-pic {
						background-color: #e1e1e2;
						width: 100%;
						height: 160rpx;
					}

				}

				.height-color {
					width: 32%;
					height: 160rpx;
					margin-bottom: 3%;
					border-radius: 20rpx;
					border: 1px solid #a8a8a8;
					overflow: hidden;

					.privilege-pic {
						background-color: #7fcd39;
						width: 100%;
						height: 160rpx;

					}
				}

				.big-detail {
					width: 66%;
					border-radius: 20rpx;
					border: 1px solid #a8a8a8;
					overflow: hidden;
				}
			}
		}
	}
</style>