englishread-front/pages/index/member.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>

      <view  class="header-content">
        <view class="zuanshi">
          <image
            src="/static/会员钻石.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" >共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">
          <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 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/播放图标.png" class="plan-book-duration-icon" />
              <image v-else src="/static/播放图标高亮.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: [],
      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]
      }
    },
    // 获取用户信息
    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;
    margin-top: -150rpx;
    // 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;
  
  .plan-book-title {
    font-size: 28rpx;
    font-weight: 700;
    color: #333;
    margin-bottom: 8rpx;
    display: block;
    
    &.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>