menduner-uniapp/pagesA/vipPackage/index.vue

<template>
  <view>
    <view class="vipBox">
      <view class="avatar">
        <img :src="getUserAvatar(baseInfo?.avatar, baseInfo?.sex)" alt="" class="img-box">
        <image src="/static/svg/vip.svg" class="vipIcon"></image>
      </view>
      <view class="nameBox">
        <view class="name font-weight-bold font-size-16">{{ baseInfo?.name || userInfo?.phone }}</view>
        <view class="vipInfo font-size-14" v-if="remaining">
          {{ pName }}
          <view>将于{{ remaining }}后过期</view>
        </view>
      </view>
    </view>
    <view>
      <swiper class="swiper-box" :current="current">
        <swiper-item v-for="(item, index) in memberListLength" :key="index" class="swiper-items">
          <view class="swiper-item" v-for="val in item" :key="val.id">
            <view
              class="card"
              :class="{ recommend: val.recommend, vipFlag: val.my, active: val.id === chooseId}"
              @tap="handleChoose(val.id)"
            >
              <text>{{ val.name }}</text>
              <view>
                <uni-icons color="#f30" type="icon-renminbi1688" size="16" custom-prefix="iconfont"></uni-icons>
                <text>{{ val.price }}</text>
              </view>
            </view>
          </view>
        </swiper-item>				
      </swiper>
      <view v-if="typeof chooseId === 'number'" class="itemBox">
        套餐权益 ( {{ list.name }} )
        <uni-section
          v-for="item in list.list"
          :key="item.id"
          class="item"
          :class="{ active: item.active }"
          titleColor="#774e20"
          subTitleColor="#774e20"
          :title="item.text"
        >
          <template v-slot:right>
            <uni-icons color="#774e20" :type="item.active ? 'checkmarkempty' : 'closeempty'" size="20"/>
          </template>
        </uni-section>
      </view>
    </view>
    <view class="pay" v-if="!list.my">
      <view class="pay-box">
        <view class="price">
          <uni-icons color="#e68735" type="icon-renminbi1688" size="16" custom-prefix="iconfont"></uni-icons>
          {{ amount }}
        </view>
        <view class="btn" @tap="handleOpen">
          立刻升级
        </view>
        </view>
    </view>
    <uni-popup ref="popup" :is-mask-click="false" borderRadius="10px 10px 0 0" background-color="#eee">
      <view class="popup-content">
        <view class="popup-content-close">
          <view class="icon" @tap="handleClose">
            <uni-icons
              type="closeempty"
              color="#999"
              size="24"
            />
          </view>
        </view>
        <view class="popup-content-main">
          <view class="popup-content-main-count">
            <view class="title">{{ list.name }} 充值</view>
            <view class="pay">
              <uni-icons color="#000" type="icon-renminbi1688" size="16" custom-prefix="iconfont"></uni-icons>
              <view>{{ amount }}</view>
            </view>
          </view>
          <view class="popup-content-main-type">
            <view class="card">
              <radio-group @change="radioChange">
                <label class="card-label" v-for="(item, index) in payType" :key="item.value">
                  <view class="name">
                    <uni-icons :color="item.color" class="mr-1" :type="item.icon" size="24" custom-prefix="iconfont"></uni-icons>
                    {{item.name}}
                  </view>
                  <view>
                    <radio :value="item.value" :checked="index === payTypeCurrent" />
                  </view>
                </label>
              </radio-group>
            </view>
          </view>
        </view>
        <view class="popup-content-btn">
          <button class="popup-content-btn-s" @tap="handlePay">
            确认支付 
            <uni-icons color="#FFF" type="icon-renminbi1688" size="16" custom-prefix="iconfont"></uni-icons>
            {{ amount }}
          </button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
import { ref, computed, watch } from 'vue'

import { getUserAvatar } from '@/utils/avatar'
import { userStore } from '@/store/user'
import { getMembershipPackageList } from '@/api/vip'
const useUserStore = userStore()

const baseInfo = computed(() => useUserStore?.baseInfo)
const userInfo = computed(() => useUserStore?.userInfo)

const memberList = ref([])
const recommend = ref(null)
const chooseId = ref(null)

const popup = ref()

const amount = computed(() => {
  return parseFloat(+list.value.price).toFixed(2)
})

const memberListLength = computed(() => {
  const result = [];  
  for (let i = 0; i < memberList.value.length; i += 2) {  
      const pair = memberList.value.slice(i, i + 2)
      result.push(pair)
  }
  return result
})

const pName = computed(() => {
  return memberList.value.find(item => +item.id === +userInfo.value?.vipFlag)?.name
})

const remaining = computed(() => {
  if (!userInfo.value?.vipExpireDate) return null
  const diffInMs =  userInfo.value?.vipExpireDate - new Date().getTime()
  const day = diffInMs / (1000 * 60 * 60 * 24)
  return day < 1 ? '今天' : Math.floor(day) + '天'
})

const list = computed(() => {
  const item = memberList.value.find(item => item.id === chooseId.value)
  return item ?? {}
})

const current = ref(0)

const payType = ref([
  {
    name: '微信支付',
    value: 'wxpay',
    icon: 'icon-weixinzhifu',
    color: '#1AAD19'
  }
  // {
  //   name: '银行卡支付',
  //   value: 'alipay',
  //   icon: 'icon-alipay',
  //   color: '#1296db'
  // }
])

const payTypeCurrent = ref(0)

const radioChange = (index) => {
  payTypeCurrent.value = index
}


const handleChoose = (id) => {
  chooseId.value = id
}

const handleOpen = () => {
  popup.value.open('bottom')
}

const handleClose = () => {
  popup.value.close()
}

// 支付
const handlePay = async () => {
  uni.showToast({ title: '支付升级中', icon: 'none'})
}

const getMemberList = async () => {
  try {
    const { data } = await getMembershipPackageList()
    if (!data || data.length === 0) {
      return
    }
    // memberList.value = data
    let vipFlagIndex = null
    const list = data.map((item, index) => {
      if (+item.id === +userInfo.value?.vipFlag) {
        vipFlagIndex = index // 低于当前套餐的(套餐)不展示
      }
      if (item.recommend) {
        recommend.value = index // 推荐套餐
      }
      return {
        ...item,
        price: item.price/100,
        my: vipFlagIndex === index,
        list: JSON.parse(item.text),
        type: 3, // 订单类型 0平台订单|1求职端订单|2招聘端订单|3会员套餐
        loading: false
      }
    })
    // 低于当前套餐的(套餐)不展示
    memberList.value = vipFlagIndex ? list.slice(vipFlagIndex) : list
    handleChoose(memberList.value[0]?.id)
    if ((!userInfo.value?.vipFlag || userInfo.value?.vipExpireDate - new Date().getTime() > 0 ) && typeof recommend.value === 'number') {
      current.value = parseInt(recommend.value / 2)
      chooseId.value = memberList.value[recommend.value]?.id
    }
  } catch (error) {
    uni.showToast({ title: '查询数据失败，请重试', icon: 'none' })
  }
}

getMemberList()
</script>

<style lang="scss" scoped>
.vipBox {
	// color: #a18a0f;
  padding: 80rpx 50rpx;
  display: flex;
  background: linear-gradient(121deg,#fde2c2 29.02%,#c19164 104.03%);
  .avatar{
    position: relative;
    width: 100rpx;
    height: 100rpx;
    margin: 0;
    .img-box {
      width: 100%;
      height: 100%;
      border: 2rpx solid #ccc;
      border-radius: 50%;
      border: 1px solid gold;
    }
    .vipIcon {
      position: absolute;
      width: 50%;
      height: 50%;
      bottom: 0;
      right: 0;
      transform: translate(0, 30%);
    }
  }
  .nameBox {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin-left: 30rpx;
    .name {
      color: #724d2b;
    }
    .vipInfo {
      color: #572a00;
    }
  }
}

.swiper-box {
  height: 200rpx;
  .swiper-items {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .swiper-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 200rpx;
    padding: 20rpx 10rpx;
    box-sizing: border-box;
    .card {
      color: #774e20;
      background-color: rgb(255, 251, 248);
      border: 1px solid #f1b17a;
      width: 100%;
      height: 100%;
      border-radius: 10rpx;
      padding: 0 20rpx;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;
      overflow: hidden;
      &.recommend {
        &::after {
          content: '推荐';
          position: absolute;
          right: 0;
          top: 0;
          padding: 6rpx 10rpx;
          font-size: 28rpx;
          background: linear-gradient(121deg,#fde2c2 29.02%,#c19164 104.03%);
        }
      }
      &.vipFlag {
        &::before {
          content: '我的套餐';
          position: absolute;
          left: 0;
          top: 0;
          padding: 6rpx 10rpx;
          font-size: 28rpx;
          background: linear-gradient(121deg,#fde2c2 29.02%,#c19164 104.03%);
        }
      }
      &.active {
        box-shadow: 0 0 18rpx 0 rgb(216 160 82);
      }
    }
  }
}

.itemBox {
  padding: 20rpx 40rpx;
  .item {
    // padding: 10rpx 0;
    margin-top: 20rpx;
    // color: rgba(119,78,32,.5);
    // &.active {
      color:#774e20;
    // }
  }
}

.pay {
  position: sticky;
  bottom: 0;
  padding: 0 40rpx 50rpx 40rpx;
  box-sizing: border-box;
  &-box {
    width: 100%;
    background: linear-gradient(121deg,#fde2c2 29.02%,#c19164 104.03%);
    border-radius: 180rpx 0 180rpx 0;
    box-shadow: 3rpx 6rpx 10rpx 0rpx rgb(216 160 82);
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100rpx;
    .price {
      padding: 0 40rpx;
      font-size: 40rpx;
      font-weight: 600;
      color: #e68735;
    }
    .btn {
      height: 100%;
      display: flex;
      align-items: center;
      padding: 0 40rpx;
      border: 2rpx solid #00897B;
      background: #00897B;
      color: #FFF;
      border-radius: 180rpx 0 180rpx 0;
      position: relative;
      // &::after {
      //   content: '';
      //   position: absolute;
      //   width: 50rpx;
      //   height: 50rpx;
      //   background: radial-gradient(top right, transparent 50%, #00897B 50%);
      //   left: 0;
      //   top: 0;
      //   margin-left: -25rpx;
      //   border-radius: 180rpx;
      // }
    }
  }
}

.popup-content {
  max-height: 500px;
  display: flex;
  flex-direction: column;
  &-close {
    display: flex;
    padding: 10px;
    justify-content: flex-end;
    .icon {
      width: 30px;
      height: 30px;
      background: #ccc;
      border-radius: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  &-main {
    flex: 1;
    height: 0;
    overflow-y: auto;
    &-count {
      margin-bottom: 20px;
      text-align: center;
      .title {
        font-size: 28rpx;
        color: #666
      }
      .pay {
        font-size: 52rpx;
        color: #000;
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px 0;
      }
    }
    &-type {
      width: 100%;
      padding: 0 20px;
      box-sizing: border-box;
      .card {
        border-radius: 10px;
        margin: 0 auto;
        background: #FFF;
        padding: 10px;
        &-label {
          padding: 15px 0;
          box-sizing: border-box;
          display: flex;
          justify-content: space-between;
          border-bottom: 1px solid #eee;
          &:last-of-type {
            border-bottom: none;
          }
          .name {
            display: flex;
            align-items: center;
            color: #333;
          }
        }
      }
    }
  }
  &-btn {
    height: 70px;
    width: 100%;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    &-s {
      height: 40px;
      width: 75%;
      line-height: 40px;
      color: #FFF;
      // color: #724d2b;
      background: #00897B;
      // background: linear-gradient(121deg,#fde2c2 29.02%,#c19164 104.03%);
      border-radius: 90px;
    }
  }
}
.mr-1 {
  margin-right: 10px;
}
</style>