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"  @click="goBack">    
					 <uv-icon name="arrow-left" color="#000" size="20" />
				</view>
				<!-- 轮播容器 -->
				<view class="uv-demo-block swiper-container">
					<uv-swiper 
					bgColor="transparent"
						:list="list" 
            :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/修饰箭头.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">
          <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: [

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

				],
        couponId: '',
        selectedCoupon: null // 选中的优惠券信息
			}
		},
    computed:{
      packageList(){
        return this.list[this.selectedMember].setmeals.length ? this.list[this.selectedMember].setmeals : this.defaultPackageList
      }
    },
    
    
		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;
    // 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>