englishread-front/subPages/member/recharge.vue

<template>
	<view class="container">
    <view class="header">
      <view class="header-bg">
        <image
          src="/static/会员背景.png"
          class="header-img"
          mode="scaleToFill"
        />
        <text class="header-title">会员开通</text>
				<!-- 加一个推出箭头 -->
				 <view class="header-icon" >
					 <uv-icon name="arrow-left" color="#000" size="20" />
				</view>
				<!-- 轮播容器 -->
				<view class="uv-demo-block swiper-container">
					<uv-swiper 
					bgColor="transparent"
						:list="list" 
						previousMargin="70" 
						nextMargin="70" 
						acceleration
						height="85"
						circular 
						:autoplay="false" 
						radius="5" 
						>
					</uv-swiper>
					<button class="swiper-btn">
						已选择
					</button>
					<image
					class="swiper-arrow"
						src="/static/修饰箭头.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.gift">
							赠送{{ item.gift }}天
							</view>
							
							<view class="package-title">{{ item.title }}</view>
							
							<view class="package-price">¥{{ getInt(item.price) }}.<text class="package-decimal">{{ getDecimal(item.price) }}</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">
          <text class="coupon-text">请选择</text>
          <uv-icon name="arrow-right" color="#999" size="16" />
        </view>
      </view>
    </view>

    <!-- 会员权益 -->
    <view class="benefits-section">
      <view class="benefits-title">会员权益</view>
      
      <view class="benefits-list">
        <!-- 碎片学习 系统掌握 -->
        <view class="benefit-item">
          <view class="benefit-content">
            <view class="benefit-title">碎片学习 系统掌握</view>
            <view class="benefit-desc">根据薄弱点智能推荐，每节课3-5分钟，碎片化完成系统学习</view>
          </view>
          <view class="benefit-icon">
            <image src="/static/会员图片1.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/会员图片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 {
				list: [
					'/static/会员1.png',
					'/static/会员2.png',
					'/static/会员3.png'
				],
				selectedPackage: 0, // 默认选择第一个套餐
				packageList: [
					{
						title: '30天会员',
						price: '36.00',
						originalPrice: '128',
						gift: null
					},
					{
						title: '90天会员',
						price: '88.00',
						originalPrice: '384',
						gift: '180'
					},
					{
						title: '180天会员',
						price: '128.00',
						originalPrice: '384',
						gift: null
					}
				]
			}
		},
		methods: {
			// 截取价格的整数与小数部分
			getInt(price){
				if (price.indexOf('.') === -1) {
					return price
				}
				if (price === null) {
					return '0'
				}
				return String(price).split('.')[0]
			},
			getDecimal(price){
				if (price === null) return '00'
				const parts = String(price).split('.')
				return parts[1] ? parts[1].padEnd(2, '0') : '00'
			},
			selectPackage(index) {
				this.selectedPackage = index
			},
			selectCoupon() {
				uni.showToast({
					title: '功能开发中',
					icon: 'none'
				})
			}
		}
	}
</script>

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

.header{
  width: 100%;
  .header-bg{
    position: relative;
    width: 100%;
    height: 500rpx;
    // 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;
			}
		}
  }


}

// 会员套餐选择容器
.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: 50%;
        transform: translateX(-50%);
        background: #FF6B6B;
        color: #fff;
        font-size: 20rpx;
        padding: 8rpx 16rpx;
        border-radius: 20rpx;
        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-text {
        font-size: 32rpx;
        color: #C6C6C6;
      }
    }
  }
}

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