tuanfeng-shop-user/pages_category_page1/memberCenter/index.vue

<template>
	<view>
		<global-loading />

		<view v-if="isShow" class="memberCenter">
			<view
				class="memberBg"
				:style="{ 'backgroundImage': 'url(' + memberListData[activeIndex].memberLevelBackground + ')', 'padding-top': paddingTop + 'px' }"
			>
				<view class="member-top" :style="{ 'top': topHeight + 'px' }">
					<view class="memberTopInfo">
						<view class="backBox">
							<image src="../../static/images/origin/back_img04.png" class="back" @click="back"></image>
						</view>
						<view class="memberTit fs30 font-color-FFF">会员中心</view>
					</view>
				</view>
				<view class="memberBox">
					<view class="posBox">
						<view class="memberBoxTop">
							<view class="memberTopPos">
								<swiper
									class="swiper pro-box" next-margin="30rpx" previous-margin="30rpx" :current="activeIndex"
									:indicator-dots="false" :autoplay="false" @change="swiperChange"
								>
									<swiper-item v-for="(item, index) in memberListData" :key="index" class="pro-item-warp">
										<view class="box">
											<view class="memberTopBg" :style="{ backgroundImage: 'url(' + item.memberLevelBackground + ')' }">
												<view class="flex-display flex-sp-between">
													<view class="nameBox">
														<view class="name fs36">{{ memberData.name }}</view>
														<view class="level">
															<image :src="item.memberLevelIcon"></image>
														</view>
													</view>
													<view class="avatarBox">
														<image :src="memberData.headImage"></image>
													</view>
												</view>
												<view class="growing">
													<view class="growingValue flex-display flex-sp-between">
														<label class="fs24 fs-weight-400 font-color-333">
															当前会员成长值
															{{ memberData.growth }}
														</label>
														<label
															v-if="nextGrowth !== 0 && nextGrowth !== item.growth"
															class="fs24 fs-weight-400 font-color-333 mar-left-20"
														>
															{{ nextGrowth }}
														</label>
													</view>
													<view v-if="memberData.growth < nextGrowth" class="progressBar">
														<view style="width: 100%">
															<progress
																activeColor="#FFEBC4" :percent="getPercent(memberData.growth, nextGrowth)" active
																stroke-width="2"
															/>
														</view>
													</view>
													<view v-else class="currentName">
														以超越该等级
													</view>
													<!--                      <view class="flex-display flex-sp-between"> -->
													<!--                        <label class="fs24 font-color-71521B">{{memberData.memberLevelName}}</label> -->
													<!--                        <label class="fs24 font-color-71521B">{{memberData.nextLevelName}}</label> -->
													<!--                      </view> -->
												</view>
											</view>
										</view>
									</swiper-item>
								</swiper>
							</view>
						</view>
					</view>
				</view>
				<view class="equity">
					<view class="equityBox">
						<view class="equityTit">我的权益</view>
						<view class="equityList">
							<view v-for="item in equityList" :key="item.memberId" class="equityItem">
								<image :src="item.memberIcon"></image>
								<view class="fs26">{{ item.memberName }}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="signIn">
					<view class="signInList">
						<view class="signTit fs30 font-color-333">快速成长</view>
						<view class="signInBox">
							<view class="signItem flex-items flex-sp-between">
								<view class="itemLeft flex-items">
									<view class="leftIcon">
										<image src="../../static/images/origin/memberList2.png"></image>
									</view>
									<view class="leftInfo">
										<label class="fs28 font-color-333">购物</label>
										<view class="fs24 font-color-999">购买商品获取相应成长值</view>
									</view>
								</view>
								<view class="rightBtn" @click="goToShopping">
									去购物
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
const NET = require('../../utils/request')
const API = require('../../config/api')
export default {
	name: 'Index',
	data() {
		return {
			memberData: {},
			equityList: [],
			levelInfo: {},
			isShow: false,
			memberListData: [],
			nextGrowth: 0,
			activeIndex: 0,
			topHeight: 10,
			paddingTop: 50
		}
	},
	onLoad() {
		// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
		const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
		this.topHeight = menuButtonInfo.top
		this.paddingTop = this.paddingTop + this.topHeight
		// #endif
		// #ifdef APP
		this.topHeight = 50
		this.paddingTop = 100
		// #endif

		// 定时器防止app一开始进入时页面混乱问题
		setTimeout(() => {
			this.getMemberShipList()
		}, 200)
		this.memberData = uni.getStorageSync('storage_userInfo')
		this.getMemberByMemberLevel()
		this.getMemberList()
	},
	methods: {
		swiperChange(item) {
			this.activeIndex = item.detail.current
			let num = 0
			num = this.activeIndex + 1
			if (num === this.memberListData.length) {
				this.nextGrowth = this.memberListData[this.activeIndex].growth
			} else {
				this.nextGrowth = this.memberListData[this.activeIndex + 1].growth
			}
			this.equityList = this.memberListData[this.activeIndex].membershipList
		},
		getMemberList() {
			NET.request(API.memberList, {}, 'GET').then((res) => {
				this.memberListData = res.data
				this.memberListData.forEach((item, index) => {
					if (item.memberLevelId === this.memberData.memberLevelId) {
						this.activeIndex = index
						let num = 0
						num = this.activeIndex + 1
						if (num === this.memberListData.length) {
							this.nextGrowth = this.memberListData[this.activeIndex].growth
						} else {
							this.nextGrowth = this.memberListData[this.activeIndex + 1].growth
						}
						this.equityList = this.memberListData[this.activeIndex].membershipList
					}
				})
			})
		},
		getMemberShipList() {
			// 获取会员信息
			// uni.showLoading({
			//   mask: true,
			//   title: '加载中...',
			// })
			NET.request(API.getMemberShipList, {}, 'GET').then((res) => {
				uni.hideLoading()
				this.equityList = res.data
				this.isShow = true
			})
		},
		// 去首页
		goToShopping() {
			this.$switchTab('/pages/tabbar/index/index')
		},
		getPercent(num, total) {
			num = parseFloat(num)
			total = parseFloat(total)
			if (isNaN(num) || isNaN(total)) {
				return '-'
			}
			return total <= 0 ? '0%' : Math.round((num / total) * 10000) / 100.0
		},
		// 获取会员等级
		getMemberByMemberLevel() {
			NET.request(`${API.getMemberByMemberLevel}/${this.memberData.memberLevelId}`, {}, 'GET').then((res) => {
				this.levelInfo = res.data
				uni.setStorageSync('storage_levelInfo', this.levelInfo)
			})
		},
		// 返回上一级
		back() {
			uni.navigateBack()
		}
	}
}
</script>

<style lang="scss" scoped>
.memberCenter {
	background-size: contain;
	min-height: 800rpx;

	.memberBg {
		background-repeat: no-repeat;
		padding-top: 50rpx;
	}

	.memberBox {
		width: 100%;
		//background: #523e3a;
		border-radius: 25rpx;
		background-size: contain;
		position: relative;
		box-sizing: border-box;

		.memberBoxTop {
			position: relative;

			.memberTopPos {
				overflow: hidden;

				.pro-box {
					height: 300rpx;
				}

				.swiper {
					.box {
						height: 300rpx;
						padding: 4rpx 10rpx;
					}
				}
			}

			.memberTopBg {
				background-size: cover;
				background-repeat: no-repeat;
				border-radius: 30rpx;
				padding: 40rpx 30rpx 30rpx 30rpx;
				box-shadow: 0 0 5rpx rgba(90, 90, 90, .5);
				height: 290rpx;

				.currentName {
					font-size: 26rpx;
					margin-top: 50rpx;
					color: #71521B;
				}
			}
		}

		.avatarBox {
			image {
				width: 110rpx;
				height: 110rpx;
				border: 5rpx solid #FFFFFF;
				border-radius: 50%;
			}
		}

		.nameBox {
			.name {
				color: #333333;
				margin-right: 30rpx;
				margin-bottom: 10rpx;
			}

			.level {
				image {
					width: 172rpx;
					height: 50rpx;
				}
			}
		}

		.growing {
			.growingValue {
				margin-top: 30rpx;
			}

			.progressBar {
				height: 20rpx;
				width: 100%;
				margin: 20rpx 0;
			}
		}
	}

	.equity {
		border-radius: 25rpx 25rpx 0 0;
		padding: 30rpx;
		background: #F8F8F8;
		margin-top: 50rpx;

		.equityBox {
			background: #FFFFFF;
			min-height: 326rpx;
			border-radius: 20rpx;
			padding: 10rpx 30rpx 30rpx 30rpx;

			.equityTit {
				font-weight: bold;
				height: 92rpx;
				line-height: 92rpx;
			}

			.equityList {
				border-top: 2rpx solid #F3F4F5;
				display: flex;
				flex-flow: wrap;
				padding-top: 30rpx;
				text-align: center;

				.equityItem {
					width: 25%;
					color: #666666;

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

	.signIn {
		padding: 0 30rpx 30rpx 30rpx;
		background: #F8F8F8;

		.signInList {
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 0 30rpx 30rpx 30rpx;

			.signTit {
				font-weight: bold;
				height: 92rpx;
				line-height: 92rpx;
			}

			.signInBox {
				.signItem {
					border-top: 2rpx solid #F3F4F5;
					padding: 30rpx 0;

					.itemLeft {
						image {
							width: 92rpx;
							height: 92rpx;
							margin-right: 30rpx;
						}
					}
				}

				.rightBtn {
					width: 160rpx;
					height: 58rpx;
					line-height: 58rpx;
					background: #333333;
					border-radius: 10rpx;
					color: #FFEBC4;
					text-align: center;
				}
			}
		}
	}

	.member-top {
		width: 100%;
		position: fixed;
		z-index: 99;
		left: 0;

		.memberTopInfo {
			position: relative;
			width: 100%;
			height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.backBox {
			position: absolute;
			left: 10rpx;
			top: 0rpx;

			.back {
				width: 50rpx;
				height: 50rpx;
				padding: 0rpx 10rpx;
			}
		}
	}
}
</style>

<style>
page {
	background: #F8F8F8;
}

.progressBar /deep/ .uni-progress-bar {
	background-color: rgb(235, 235, 235, 0.6) !important;
	height: 5rpx !important;
	border-radius: 22rpx;
}

.progressBar /deep/ .uni-progress-bar .uni-progress-inner-bar {
	border-radius: 22rpx;
}
</style>