englishread-front/subPages/member/recharge.vue

<template>
	<view class="container">
		<view class="header">
			<view class="header-bg">
				<image src="/static/member-background.png" class="header-img" mode="scaleToFill" />
				<!-- #ifndef H5 -->
				<text class="header-title">会员开通</text>
				<!-- 加一个推出箭头 -->
				<view class="header-icon" @click="goBack">
					<uv-icon name="arrow-left" color="#000" size="20" />
				</view>
				<!-- #endif -->
				<!-- 轮播容器 -->
				<view class="uv-demo-block swiper-container">
					<uv-swiper bgColor="transparent" :list="filterList" :loading="!list.length" @change="changeSwiper"
						keyName="img" previousMargin="70" nextMargin="70" acceleration height="75" circular
						:autoplay="false" radius="5">
					</uv-swiper>
					<button class="swiper-btn">
						已选择
					</button>
					<image class="swiper-arrow" src="/static/decorative-arrow.png" mode="aspectFill" />
				</view>
			</view>
		</view>

		<!-- 会员套餐选择容器 -->
		<view class="membership-container">
			<!-- 套餐选择 -->
			<view class="package-list">
				<view class="package-item" :class="{ 'active': selectedPackage === index }"
					v-for="(item, index) in packageList" :key="index" @click="selectPackage(index)">
					<view class="info">
						<!-- 赠送标识 -->
						<view class="gift-tag" v-if="item.content">
							{{ item.content }}
						</view>

						<view class="package-title">{{ item.title }}</view>

						<view class="package-price">¥{{ getInt(item.discountedprice) }}.<text
								class="package-decimal">{{ getDecimal(item.discountedprice) }}</text></view>
						<view class="package-original">¥{{ item.originalprice }}</view>
					</view>

					<view class="package-btn" :class="{ 'active': selectedPackage === index }">
						{{ selectedPackage === index ? '已选择' : '点击选择' }}
					</view>
				</view>
			</view>

			<!-- 优惠券选择 -->
			<view class="coupon-section">
				<view class="coupon-title">选择优惠券</view>
				<view class="coupon-selector" @click="selectCoupon">
					<view v-if="!selectedCoupon" class="coupon-placeholder">
						<text class="coupon-text">请选择</text>
						<uv-icon name="arrow-right" color="#999" size="16" />
					</view>
					<view v-else class="coupon-selected">
						<view class="coupon-info">
							<text class="coupon-name">{{ selectedCoupon.name }}</text>
							<text class="coupon-amount">-¥{{ selectedCoupon.money }}</text>
						</view>
						<uv-icon name="arrow-right" color="#999" size="16" />
					</view>
				</view>
			</view>
		</view>

		<!-- 立即开通会员按钮 -->
		<view class="member-button-section">
			<uv-button type="primary" text="立即开通会员" :custom-style="{
          width: '100%',
          height: '82rpx',
          borderRadius: '44rpx',
          backgroundColor: '#06DADC',
          fontSize: '36rpx',
          fontWeight: '500',
          border: '1px solid #06DADC'
        }" @click="handleRecharge"></uv-button>
		</view>

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

			<view class="benefits-list">
				<!-- 碎片学习 系统掌握 -->
				<!-- <view class="benefit-item" v-for="item in packageList" :key="item.id"> -->
				<uv-parse :content="list[selectedMember].content" />
				<!-- </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/会员图片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>
</template>


<script>
	export default {
		data() {
			return {
				memberId : '',
				list: [

				],
				selectedPackage: 0, // 默认选择第一个套餐
				selectedMember: 0, // 默认选择第一个会员
				defaultPackageList: [

				],
				couponId: '',
				selectedCoupon: null // 选中的优惠券信息
			}
		},
		computed: {
			packageList() {
				return this.list[this.selectedMember]?.setmeals ? this.list[this.selectedMember].setmeals : this
					.defaultPackageList
			},
			filterList(){
				return this.list.filter(a => {
					if(!this.memberId) {
						return true
					}
					return a.id == this.memberId
				})
			},
		},
		onLoad(query) {
			this.memberId = query.id
		},
		methods: {
			handleCouponSelected(coupon) {

				// 处理选中的优惠券
				this.selectedCoupon = coupon
				this.couponId = coupon.id

				uni.showToast({
					title: `已选择优惠券：¥${coupon.money}`,
					icon: 'success'
				})
			},
			async handleRecharge() {
				// console.log('选中的会员id是:', this.packageList[this.selectedPackage]);

				const object = {
					// #ifdef H5
					type: 'official',
					// #endif
					memberId: this.list[this.selectedMember].id,
					setmealId: this.packageList[this.selectedPackage].id
				}
				if (this.couponId) {
					object.couponId = this.couponId
				}
				const res = await this.$api.member.openMember({
					...object
				})
				if (res.code === 200) {
					if (res.result === 0) {
						// 零元购
						uni.showToast({
							title: '充值成功',
							icon: 'success'
						})
						this.goBack()
					} else {
						// 调起微信支付
						this.$utils.wxPay(res.result, (res) => {
							setTimeout(() => {
								this.goBack()
							}, 1000)
						})
					}
				}
			},
			goBack() {
				uni.navigateBack()
			},
			// 截取价格的整数与小数部分
			getInt(pri) {
				const price = String(pri)
				if (price.indexOf('.') === -1) {
					return price
				}
				if (price === null) {
					return '0'
				}
				return String(price).split('.')[0]
			},
			getDecimal(pri) {
				const price = String(pri)
				if (price === null) return '00'
				const parts = price.split('.')
				return parts[1] ? parts[1].padEnd(2, '0') : '00'
			},
			selectPackage(index) {
				this.selectedPackage = index
			},
			selectCoupon() {
				uni.navigateTo({
					url: '/subPages/user/discount?from=recharge'
				})
			},
			async getMemberList() {
				const memberRes = await this.$api.member.getMemberList()
				if (memberRes.code === 200) {
					this.list = memberRes.result
				}
			},
			changeSwiper(e) {
				this.selectedMember = e.current
				this.selectedPackage = 0
			}
		},
		onShow() {
			// 监听优惠券选择事件
			uni.$on('couponSelected', this.handleCouponSelected)
			this.getMemberList()
		},
		onUnload() {
			// 移除事件监听
			uni.$off('couponSelected', this.handleCouponSelected)
			console.log('接触监听');

		},
	}
</script>

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

	.header {
		width: 100%;

		.header-bg {
			position: relative;
			width: 100%;
			height: 500rpx;
			/* #ifdef H5 */
			margin-top: -100rpx;

			/* #endif */
			// background: red;
			.header-img {
				width: 100%;
				height: 500rpx;
			}

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

			.header-icon {
				position: absolute;
				top: 100rpx;
				left: 30rpx;
			}

			.swiper-container {
				margin-top: -300rpx;

				.swiper-arrow {
					width: 100%;
					height: 22rpx;
				}

				.swiper-btn {
					margin: 35rpx auto 15rpx;
					width: 150rpx;
					height: 52rpx;
					border-radius: 999px;
					background: #06DADC;
					color: white;
					font-size: 28rpx;
					font-weight: 500;
					text-align: center;
					line-height: 52rpx;
				}
			}
		}


	}

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

	// 会员套餐选择容器
	.membership-container {
		background: linear-gradient(180deg, #DEFFFF 0%, #FBFEFF 22.65%, #FFFFFF 100%);
		padding: 40rpx 30rpx;
		margin-top: 20rpx;

		.package-list {
			display: flex;
			justify-content: space-between;
			gap: 16rpx;
			margin-bottom: 20rpx;

			.package-item {
				position: relative;
				flex: 1;
				background: #fff;
				border-radius: 20rpx;

				text-align: center;
				border: 2rpx solid #EEEEEE;
				transition: all 0.3s;
				// width: 119;
				height: 210rpx;

				// width: 238rpx;
				.info {
					padding: 16rpx 16rpx 0 16rpx;
				}

				&.active {
					border-color: $primary-color;
					// box-shadow: 0 4rpx 20rpx rgba(34, 242, 235, 0.2);
				}

				.gift-tag {
					position: absolute;
					top: -10rpx;
					left: 0%;
					// transform: translateX(-50%);
					background: #FF6B6B;
					color: #fff;
					font-size: 20rpx;
					padding: 8rpx 16rpx;
					border-radius: 20rpx 20rpx 20rpx 0;
					white-space: nowrap;
				}

				.package-title {
					font-size: 28rpx;
					color: #000;
					margin-bottom: 16rpx;
					font-weight: 500;
				}

				.package-price {
					font-size: 36rpx;
					color: #FF4800;
					font-weight: 500;
					margin-bottom: 8rpx;

					.package-decimal {
						font-size: 24rpx;
					}
				}

				.package-original {
					font-size: 24rpx;
					color: #8B8B8B;
					line-height: 1.4;
					text-decoration: line-through;
					margin-bottom: 8rpx;
				}

				.package-btn {
					background: #E4E7EB;
					color: #191919;
					font-size: 28rpx;
					// padding: 12rpx 20rpx;
					width: 100%;
					// border-radius: 30rpx;
					transition: all 0.3s;
					height: 52rpx;
					line-height: 52rpx;
					border-radius: 0 0 24rpx 24rpx;

					&.active {
						background: $primary-color;
						color: #fff;
					}
				}
			}
		}

		.coupon-section {
			.coupon-title {
				font-size: 26rpx;
				color: #181818;
				margin-bottom: 10rpx;
				// font-weight: 500;
			}

			.coupon-selector {
				background: #fff;
				border-radius: 16rpx;
				padding: 10rpx 0;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 2rpx solid #f0f0f0;

				.coupon-placeholder {
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 100%;

					.coupon-text {
						font-size: 32rpx;
						color: #C6C6C6;
					}
				}

				.coupon-selected {
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 100%;

					.coupon-info {
						display: flex;
						// flex-direction: column;
						align-items: center;
						justify-content: space-between;

						.coupon-name {
							font-size: 28rpx;
							color: #181818;
							margin-bottom: 4rpx;
						}

						.coupon-amount {
							font-size: 28rpx;
							color: red;
							font-weight: 500;
						}
					}
				}
			}
		}
	}

	/* 会员权益样式 */
	.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%;
	}
</style>