xwc/bundle/pages/user_vip/user_vip.vue

<template>
	<view>
		<hua-page-head :pageTitle="pageTitle" :rightMenu='rightMenu' @clickMenu='clickMenu'></hua-page-head>
		<view class="user-vip">
			<!-- 	<view class="header">
				<view class="user-vip-info flex">
					<u-image width="110rpx" height="110rpx" border-radius="50%" :src="userInfo.avatar"></u-image>
					<view class="m-l-20">
						<view class="user-text white xxl flex">{{userInfo.nickname}}</view>
						<view class="flex">
							<view class="user-level white xs flex row-center m-t-10">当前等级：{{userInfo.level_name || "无"}}</view>
						</view>
					</view>
				</view>
			</view> -->



			<view class="content m-t-50">
				<view class="vip-swiper-container">
					<swiper class="swiper" style="height: 360rpx" previous-margin="30rpx" :current="currentIndex"
						@change="bindchange">
						<swiper-item v-for="(item, index) in levelList" :key="index">
							<view class="vip-card-item"
								:style="'background-image: url(' + item.background_image + ');'">
								<view class="flex row-between">
									<view class="flex grade white sm">
										{{item.lock_desc}}
										<!-- <view v-if="item.current_level_status == 1" class="flex grade white sm">当前等级</view>
										<view v-else-if="item.current_level_status == -1" class="flex white sm ml20">未解锁</view>
										<view v-else-if="item.current_level_status == 0" class="flex white sm ml20">已解锁</view> -->
									</view>
									<!-- <image class="grade-icon m-r-34" :src="item.image"></image> -->
								</view>
								<view class="flex vip-name white">
									<image class="grade-icon" :src="item.image"></image>
									<view class="bold">{{item.name}}</view>
									<!-- <view class="sm">{{item.tips2}}</view> -->
								</view>
								<!-- <view class="flex row-center m-l-30 m-r-30" v-if="item.diff_growth_percent">
									<view class="vip-progress bg-white flex">
										<view class="vip-progress-bar" :style="'width: ' + (item.diff_growth_percent*100) + '%'"></view>
									</view>
								</view> -->
								<view class="new-vip-progress" style="padding: 0 30rpx">
									<view class="sm " style="line-height: 36rpx" v-if="item.current_level_status == 0">
										{{item.tips1}}
									</view>
									<router-link to="/bundle/pages/user_growth/user_growth" class="" v-else>
										<view class="sm " style="line-height: 36rpx">
											<!-- {{item.current_level_status == 0 ? '当前高于该等级' : item.current_growth_tips}} -->
											{{item.tips1}}
										</view>
										<view class="progress">
											<u-line-progress :showPercent="false" active-color="#687B8B"
												:percent="item.diff_growth_percent * 100" height='4'></u-line-progress>
										</view>
										<view class="">{{item.tips2}} <u-icon name="arrow-right"></u-icon></view>

									</router-link>

								</view>
							</view>
						</swiper-item>
					</swiper>
				</view>
				<view class="vip-grade-rule">
					<view class="title ">
						会员福利
					</view>
					<view class="iconbar">
						<view class="item">
							<view class="icon">
								<text class="iconfont">&#xe646;</text>
							</view>
							<view class="tit">
								会员福利
							</view>
						</view>
						<view class="item">
							<view class="icon">
								<text class="iconfont">&#xe644;</text>
							</view>
							<view class="tit">
								奖励现金
							</view>
						</view>
						<view class="item">
							<view class="icon">
								<text class="iconfont">&#xe897;</text>
							</view>
							<view class="tit">
								奖励券
							</view>
						</view>
					</view>
					<view class="p-t-20">
						<text class="rule-content column lighter">
							{{growthRule}}
						</text>
					</view>
				</view>
				<!-- <view class="vip-rights">
					<view class="title flex">
						<view class="line br60"></view>
						<view class="xl ml20 bold">会员权益</view>
					</view>
					<view class="rights-list flex">
						<view v-for="(item, index) in privilegeList" :key="index" class="rights-item column-center">
							<image class="mb10" :src="item.image"></image>
							<view class="sm">{{item.name}}</view>
						</view>
					</view>
				</view> -->
			</view>
		</view>
		<loading-view v-if="!userInfo.nickname"></loading-view>
	</view>
</template>

<script>
	import {
		getLevelList
	} from '@/api/user';

	export default {
		data() {
			return {
				userInfo: {},
				currentIndex: 0,
				levelList: [],
				growthRule: "",
				privilegeList: [],
				pageTitle: '会员中心',
				rightMenu: "邀请",

			};
		},


		onLoad() {
			this.getLevelListFun();
		},


		methods: {
			bindchange(e) {
				let {
					current
				} = e.detail;
				let currentLevel = this.levelList[current];
				this.currentIndex = current
			},

			getLevelListFun() {
				getLevelList().then(res => {
					const {
						code,
						data
					} = res;
					if (code != 1) return;
					const {
						user,
						level_intro,
						level
					} = data;
					let index = level.findIndex(item => item.current_level_status == 1);
					if (index == -1) index = 0;
					this.userInfo = user
					this.growthRule = level_intro
					this.levelList = level
					this.currentIndex = index
				});
			},
			clickMenu() {
				uni.navigateTo({
					url: '/bundle/pages/invite_fans/invite_fans'
				})
			}
		}
	};
</script>
<style lang="scss">
	page {
		background: #F3F4F6;
		background-size: 100% auto;
		background-repeat: no-repeat;

		.user-vip {
			// .header {
			// 	padding-top: 40rpx;
			// 	.user-vip-info {
			// 		padding-left: 30rpx;

			// 		.user-level {
			// 			border: 1px solid white;
			// 			border-radius: 100rpx;
			// 			padding: 4rpx 20rpx;
			// 			line-height: 30rpx;
			// 		}

			// 		.user-text {
			// 			line-height: 50rpx;
			// 			font-weight: bold;
			// 		}
			// 	}
			// }



			.content {

				.vip-card-item {
					height: 340rpx;
					width: 690rpx;
					position: relative;
					background-size: 100% 100%;
					border-radius: 20rpx;
					overflow: hidden;

					.grade {
						line-height: 36rpx;
						background-color: rgba(0, 0, 0, 0.5);
						border-radius: 0 20rpx 0 20rpx;
						height: 50rpx;
						padding: 0 28rpx;
						position: absolute;
						right: 0;
						top: 0;
					}

					.user-grade {
						line-height: 36rpx;
						margin-left: 30rpx;
					}

					.grade-icon {
						width: 160rpx;
						height: 145rpx;
					}

					.vip-name {
						padding: 10rpx 30rpx;
						font-size: 46rpx;
						text-align: center;
						align-items: center;
						margin-top: 50rpx;
						margin-bottom: 80rpx;
						display: flex;
						font-family: HYk1gj;
						color: #5D707F;

						image {
							width: 42rpx;
							height: 44rpx;
							margin-right: 12rpx;
						}
					}

					.new-vip-progress {
						color: #5D707F;
						font-size: 24rpx;

						.progress {
							width: 260rpx;
						}
					}


					.vip-progress {
						height: 8rpx;
						border-radius: 8rpx;
						width: 100%;
						overflow: hidden;

						.vip-progress-bar {
							background-color: #f8d07c;
							height: 100%;
						}
					}

				}

				.vip-grade-rule {
					margin: 24rpx 24rpx;
					background-color: #fff;
					border-radius: 20rpx;
					padding: 28rpx 36rpx;

					.title {
						font-size: 32rpx;
						color: #040404;
						font-weight: bold;
					}

					.iconbar {
						width: 100%;
						display: flex;
						justify-content: space-between;
						margin: 40rpx auto;
						padding: 0 30rpx;

						.item {
							// flex-basis: 100%;
							text-align: center;

							.icon {
								width: 96rpx;
								height: 96rpx;
								color: #fff;
								background: linear-gradient(151deg, #CBE8FB 0%, #94B6CA 100%);
								border-radius: 50%;
								line-height: 96rpx;
								text-align: center;
								margin: 0 auto 16rpx;

								.iconfont {
									font-size: 36rpx;
								}
							}

							.tit {
								color: #616161;
								font-size: 24rpx;
							}
						}
					}
				}

				.vip-rights {
					margin: 24rpx 40rpx;

					.title {
						padding: 28rpx 0;

						.line {
							width: 8rpx;
							height: 34rpx;
							background-color: #f79c0c;
						}
					}

					.rights-item {
						width: 25%;
						padding-bottom: 30rpx;

						image {
							width: 82rpx;
							height: 82rpx;
						}
					}
				}

			}

		}
	}
</style>