englishread-front/pages/index/member.vue

<template>
	<view class="container">
		<view class="header">
			<!-- #ifndef H5 -->
			<view class="header-bg">
				<image src="/static/member-background.png" class="header-img" mode="scaleToFill" />
				<text class="header-title">会员中心</text>
			</view>
			<!-- #endif -->

			<view class="header-content">
				<view class="zuanshi">
					<image src="/static/member-diamond.png" mode="scaleToFill" class="zuanshi-img" />
				</view>
				<view v-if="!isMember" class="noVip-container">
					<image src="/static/VIP.png" mode="aspectFit" class="VIP-img" />
					<text class="intro">{{ configParamContent('member_info') || '共19项会员特权 | 3 项年VIP专属特权' }}</text>
					<view class="border"></view>
					<view class="info">
						<view class="avatar-box">
							<image :src="userInfo.avatar" mode="aspectFill" class="avatar" />
							<text class="name">{{ userInfo.name }}</text>
						</view>
						<uv-button :text="isLogin ? '立即开通' : '前往登陆'" @click="goRecharge" type="primary" :customStyle="{
							width: '160rpx',
							height: '60rpx',
							borderRadius: '198rpx',
							backgroundColor: '#06DADC',
							color: '#fff',
							fontSize: '28rpx',
							fontWeight: '500',
							lineHeight: '60rpx',
							letterSpacing: '0%',
							verticalAlign: 'middle',
						}" />
					</view>
				</view>
				<view v-else>
					<!-- 代码加在这里 -->
					<view class="vip-container ">
						<view class="avatar-box ">
							<image :src="userInfo.avatar" mode="aspectFill" class="avatar" />
							<text class="name">{{ userInfo.name }}</text>
							<text class="time">{{ memberInfo[0].endTime.split(' ')[0] }}</text>
						</view>
						<view class="border"></view>
						<view class="project">{{ memberInfo[0].memberTitle }}</view>
						<text class="res-time">{{ '预计剩余学习' +
							$utils.calculateDateDifference(memberInfo[0].endTime.split(' ')[0]) + '天'}}</text>
					</view>
				</view>
			</view>
		</view>


		<!-- 会员权益 -->
		<view class="benefits-section" v-if="!isMember">
			<view class="benefits-title">会员权益</view>

			<view class="benefits-list">
				<!-- 碎片学习 系统掌握 -->
				<!-- <view class="benefit-item" v-for="(item, index) in memberBenefits" 
		:key="index">
          <uv-parse :content="item"></uv-parse>
        </view> -->

				<uv-parse :content="memberBenefits[0]"></uv-parse>

				<!-- 匹配水平 -->
				<!-- <view class="benefit-item">
          <view class="benefit-content">
            <view class="benefit-title">匹配水平</view>
            <view class="benefit-desc">依据水平精准推课，不做无用功快速提升</view>
          </view>
          <view class="benefit-icon">
            <image src="/static/会员图片2.png" mode="aspectFit"></image>
          </view>
        </view> -->

				<!-- 科学闭环测 讲练结合 -->
				<!-- <view class="benefit-item">
          <view class="benefit-content">
            <view class="benefit-title">科学闭环测 讲练结合</view>
            <view class="benefit-desc">精心设计科学的学习流程 「测试-讲解-练习-检验」知识掌握更牢固</view>
          </view>
          <view class="benefit-icon">
            <image src="/static/会员图片3.png" mode="aspectFit"></image>
          </view>
        </view> -->
			</view>
		</view>

		<!-- 以下内容为成为会员才能看到的 -->

		<!-- 学习计划 -->
		<view class="study-plan-section" v-else>
			<view class="section-title">学习计划</view>


			<view class="plan-books">
				<view v-for="(book, index) in studyPlanBooks" :key="index" class="plan-book-item"
					@click="goBookDetail(book.book.id)" :class="{ 'active-book': index === 1 }">
					<view class="plan-book-cover">
						<image :src="book.book.booksImg" mode="aspectFill"></image>
						<!-- 学习中标识 -->
						<view v-if="index === 1" class="studying-badge">
							<view class="studying-icon" />
							<text>学习中</text>
						</view>
					</view>
					<view class="plan-book-info">
						<text class="plan-book-title" :class="{ 'highlight-title': index === 1 }">{{ book.book.booksName
							|| '暂无课程' }}</text>
						<view class="plan-book-meta">
							<text class="plan-book-grade" :class="{ 'highlight-title': index === 1 }">{{
								book.book.categoryName || '--' }}/</text>
							<image v-if="index !== 1" src="/static/play-icon.png" class="plan-book-duration-icon" />
							<image v-else src="/static/play-icon-highlight.png" class="plan-book-duration-icon" />
							<text class="plan-book-duration" :class="{ 'highlight-title': index === 1 }">{{
								book.book.duration }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 学习推荐 -->
		<view class="study-recommend-section" v-if="isMember">
			<view class="section-header" @click="goRecommend">
				<text class="section-title">学习推荐</text>
				<view class="section-more">
					<text>更多</text>
					<uv-icon name="arrow-right" size="14" color="#8B8B8B"></uv-icon>
				</view>
			</view>

			<view class="recommend-grid">
				<view v-for="(book, index) in recommendBooks" :key="index" @click="goBookDetail(book.id)"
					class="recommend-grid-item">
					<view class="recommend-grid-cover">
						<image :src="book.booksImg" mode="aspectFill"></image>
					</view>
					<view class="recommend-grid-info">
						<text class="recommend-grid-title">{{ book.booksName }}</text>
						<view class="recommend-grid-meta">
							<text class="recommend-grid-grade">{{ book.categoryName }}/</text>
							<image src="/static/播放图标.png" class="recommend-grid-duration-icon" />
							<text class="recommend-grid-duration">{{ book.duration }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
export default {
	data() {
		return {
			isLogin: uni.getStorageSync('token') ? true : false,
			memberInfo: [],
			memberBenefits: [],
			userInfo: {
				name: '战斗世界',
				avatar: '/static/默认头像.png'
			},

			// 学习计划书籍数据
			studyPlanBooks: [

			],

			// 学习推荐书籍数据
			recommendBooks: [

			]
		}
	},
	computed: {
		isMember() {
			return this.memberInfo.length > 0
		}
	},
	methods: {
		// 跳转学习推荐
		goRecommend() {
			uni.navigateTo({
				url: '/subPages/home/search'
			})
		},
		// 跳转书籍详情
		goBookDetail(bookId) {
			uni.navigateTo({
				url: `/subPages/home/directory?id=${bookId}`
			})
		},
		goRecharge() {
			if (!this.isLogin) {
				uni.navigateTo({
					url: '/subPages/login/login'
				})
				return
			}
			uni.navigateTo({
				url: '/subPages/member/recharge'
			})
		},
		// 获取会员信息
		async getUserMemberInfo() {
			const memberRes = await this.$api.member.getUserMemberInfo()
			if (memberRes.code === 200) {
				this.memberInfo = [...memberRes.result]
			}
			if (!this.memberInfo.length) {
				// 如果不是会员 获取会员部分信息
				this.getMemberBenefits()
			}
		},
		// 获取会员权益
		async getMemberBenefits() {
			const benefitsRes = await this.$api.member.getMemberList()
			if (benefitsRes.code === 200) {
				this.memberBenefits = benefitsRes.result.map(item => item.content)
			}
		},
		// 获取用户信息
		async getUserInfo() {
			const userRes = await this.$api.login.getUserInfo()
			if (userRes.code === 200) {
				this.userInfo = userRes.result
			}
		},
		// 获取3个学习计划书籍
		async getStudyPlanBook() {
			const bookRes = await this.$api.book.stand({
				pageNo: 1,
				pageSize: 3
			})
			if (bookRes.code === 200) {
				const oneBook = bookRes.result.records[1]
				const twoBook = bookRes.result.records[0]
				const threeBook = bookRes.result.records[2]
				this.studyPlanBooks = [oneBook, twoBook, threeBook]

			}
		},
		async getRecommendBook() {
			const bookRes = await this.$api.book.list({
				pageNo: 1,
				pageSize: 6,
				member: 1
			}, false)
			if (bookRes.code === 200) {
				this.recommendBooks = bookRes.result.records
			}
		},
	},
	async onShow() {
		// 如果登录了就查询会员情况 如果没有登录就不查询
		if (uni.getStorageSync('token')) {
			this.isLogin = true
			Promise.all([this.getUserMemberInfo(), this.getUserInfo(), this.getStudyPlanBook(), this
				.getRecommendBook()
			])
		} else {
			this.isLogin = false
			this.userInfo = {
				name: '登录后查看会员情况',
				avatar: '/static/默认头像.png'
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	min-height: 100%;
	padding-bottom: 50rpx;
}

.header {
	width: 100%;

	.header-bg {
		position: relative;
		width: 100%;
		height: 400rpx;

		// background: red;
		.header-img {
			width: 100%;
			height: 400rpx;
		}

		.header-title {
			font-size: 32rpx;
			color: black;
			position: absolute;
			top: 100rpx;
			font-weight: 500;
			left: 50%;
			transform: translateX(-50%);
		}
	}

	.header-content {
		margin: 0 18rpx;
		/* #ifndef H5 */
		margin-top: -150rpx;
		/* #endif */
		/* #ifdef H5 */
		margin-top: 100rpx;
		/* #endif */

		// height: 256rpx;
		border-radius: 32rpx;
		border-width: 2rpx;
		padding: 40rpx;
		background: linear-gradient(180deg, #DEFFFF 0%, #FBFEFF 22.65%, #F0FBFF 100%);
		border: 2rpx solid #06DADC12;
		display: flex;
		flex-direction: column;
		gap: 28rpx;
		position: relative;

		.vip-container {
			padding: 20rpx 0;
			display: flex;
			flex-direction: column;
			gap: 18rpx;

			.project {
				font-size: 36rpx;
				color: #191919;
				line-height: 1.4;
				font-weight: 500;
			}

			.res-time {
				color: $primary-color;

				font-size: 24rpx;
				line-height: 36rpx;
			}
		}

		.noVip-container {
			display: flex;
			flex-direction: column;
			// align-items: center;
			// justify-content: center;
			gap: 28rpx;

		}

		.zuanshi {
			position: absolute;
			width: 190rpx;
			height: 190rpx;
			top: -80rpx;
			right: 0;

			.zuanshi-img {
				width: 190rpx;
				height: 190rpx;
			}
		}

		.VIP-img {
			width: 80rpx;
			height: 50rpx;
		}

		.border {
			width: 100%;
			// height: 2rpx;
			border: 2rpx solid;

			border-image-source: linear-gradient(90deg, rgba(228, 255, 255, 0) 0%, #C3EFEF 50.48%, rgba(228, 255, 255, 0) 100%);
			border-image-slice: 1;

		}

		.intro {
			font-size: 28rpx;

			line-height: 36rpx;
			letter-spacing: 0%;
			vertical-align: middle;
			color: #09B1B3;

		}

		.info {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.avatar-box {
			display: flex;
			align-items: center;
			gap: 16rpx;

			.name {
				font-weight: 600;
				font-size: 36rpx;
				line-height: 44rpx;
				letter-spacing: 0%;
				vertical-align: middle;
				color: #252545;
			}

			.avatar {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
			}

			.time {
				font-size: 30rpx;
				color: #8B8B8B;
				line-height: 36rpx;
			}
		}
	}
}

/* 立即开通会员按钮样式 */
.member-button-section {
	margin: 40rpx 50rpx;
}

/* 会员权益样式 */
.benefits-section {
	margin-top: 40rpx;
	padding: 0 30rpx;
}

.benefits-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #191919;
	margin-bottom: 32rpx;
}

.benefits-list {
	display: flex;
	flex-direction: column;
	gap: 32rpx;
}

.benefit-item {
	// background: #F8F8F8;
	// border: 1px solid #FFFFFF;
	// border-radius: 48rpx;
	// padding: 27rpx 40rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.benefit-content {
	flex: 1;
	margin-right: 40rpx;
}

.benefit-title {
	font-size: 32rpx;
	font-weight: 600;
	color: #333;
	margin-bottom: 16rpx;
}

.benefit-desc {
	font-size: 24rpx;
	color: #09B1B3;
	line-height: 36rpx;
}

.benefit-icon {
	// width: 152rpx;
	// height: 152rpx;
	// flex-shrink: 0;
}

.benefit-icon image {
	width: 100%;
	height: 100%;
}

/* 学习计划样式 */
.study-plan-section {
	margin-top: 40rpx;
	padding: 0 30rpx;
}

.section-title {
	font-size: 36rpx;
	font-weight: 500;
	color: #191919;
	margin-bottom: 32rpx;
}

.plan-books {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	gap: 78rpx;
	padding: 20rpx 0;
}

.plan-book-item {
	display: flex;
	flex-direction: column;
	align-items: center;

	transition: all 0.3s ease;

	&.active-book {
		transform: scale(1.15);

		.plan-book-cover {
			// box-shadow: 0 8rpx 24rpx rgba(6, 218, 220, 0.3);
		}
	}
}

.plan-book-cover {
	width: 172rpx;
	height: 230rpx;
	border-radius: 16rpx;
	overflow: hidden;
	margin-bottom: 16rpx;
	position: relative;
	box-shadow: 0px 4px 4px 0px #C0BCBA75;

	image {
		width: 100%;
		height: 100%;
	}

	.studying-badge {
		position: absolute;
		bottom: 0rpx;
		right: 0rpx;
		background: #00000099;
		color: #fff;
		padding: 6rpx 10rpx;
		border-radius: 20rpx;
		font-size: 18rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 6rpx;

		.studying-icon {
			width: 10rpx;
			height: 10rpx;
			background: $primary-color;
			border-radius: 50%;
		}
	}
}

.plan-book-info {
	text-align: center;

	width: 180rpx;

	.plan-book-title {
		// width: 100%;
		font-size: 28rpx;
		font-weight: 700;
		color: #333;
		margin-bottom: 8rpx;
		display: block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;

		&.highlight-title {
			color: $primary-color;
		}
	}

	.plan-book-meta {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8rpx;


		.plan-book-duration-icon {
			width: 20rpx;
			height: 20rpx;
		}

		.plan-book-grade {
			font-size: 24rpx;
			color: #999;

			&.highlight-title {
				color: $primary-color;
			}
		}

		.plan-book-duration {
			font-size: 24rpx;
			color: #999;

			&.highlight-title {
				color: $primary-color;
			}
		}
	}
}

/* 学习推荐样式 */
.study-recommend-section {
	margin-top: 40rpx;
	padding: 0 30rpx;
}

.section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 24rpx;

	.section-more {
		display: flex;
		align-items: center;
		gap: 4rpx;

		text {
			font-size: 24rpx;
			color: #8B8B8B;
		}
	}
}

.recommend-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 32rpx;

	.recommend-grid-item {
		width: 208rpx;
		display: flex;
		flex-direction: column;

		.recommend-grid-cover {
			box-shadow: 0px 4px 4px 0px #C0BCBA75;
			width: 100%;
			height: 278rpx;
			border-radius: 16rpx;
			overflow: hidden;
			margin-bottom: 16rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.recommend-grid-info {
			padding: 6rpx;

			.recommend-grid-title {
				font-size: 28rpx;
				font-weight: 700;
				color: #333;
				margin-bottom: 14rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.recommend-grid-meta {
				display: flex;
				align-items: center;

				.recommend-grid-duration-icon {
					width: 24rpx;
					height: 24rpx;
					margin-right: 12rpx;
				}

				.recommend-grid-grade {
					font-size: 24rpx;
					color: #999;
					margin-right: 8rpx;
				}

				.recommend-grid-duration {
					font-size: 24rpx;
					color: #999;
				}
			}
		}
	}
}
</style>