menduner/src/views/mall/purchasePackage/components/packageList.vue

<!--  -->
<template>
  <div class="d-flex mt-5 list">
    <div v-for="(val, i) in packDataList" :key="i" class="list-item cursor-pointer elevation-2" :class="{'active': active === i }" @click="handleClickItem(val, i)">
      <div v-if="val.id === userStore.userInfo?.vipFlag && userStore.userInfo?.vipExpireDate && userStore.userInfo?.vipExpireDate > Date.now()" class="recommend long">我的套餐</div>
      <div v-if="val.recommend" class="recommend">推荐</div>
      <div class="text-center font-weight-bold">{{ val.name }}</div>
      <div class="text-center my-5">
        <div v-if="val.price && !val.cycle">
          ￥
          <span class="font-weight-bold font-size-20">{{ val.price / 100 }}</span>
          <!-- /年 -->
        </div>
        <div v-if="val.cycle">￥<span class="font-weight-bold font-size-18 font-size-20">{{ val.price }}</span><span class="font-size-14 mr-3">起</span>  {{ val.cycle }}</div>
        <!-- <div v-if="val.customized" class="font-size-20 font-weight-bold">按需定制</div> -->
      </div>
      <v-divider></v-divider>
      <!-- <div v-if="val.equity">
        <div class="font-weight-bold my-3">权益</div>
        <ul>
          <li v-for="(k, num) in val.equity" :key="k" :class="{'greyText': num+1 > val.showLength}">{{ k }}</li>
        </ul>
      </div> -->
      <div v-if="val.text">
        <div class="font-weight-bold my-3">权益</div>
        <div>
          <p
            v-for="v in val.list"
            :key="val.name + v.text"
            class="vipColor"
            :class="{ active: v.active}"
          >{{ v.text }}</p>
        </div>
      </div>
      <!-- <div v-else>
        <h3 class="my-3">授权范围：</h3>
        <div class="font-size-15">扫描下方二维码联系高级客户经理为您定制</div>
      </div> -->
      
      <div
        v-if="userStore.userInfo?.vipFlag === val.id && canUse"
        style="font-size: 14px; position: absolute; bottom: 30px;" class="mt-5"
      >
        有效期：{{ timesTampChange(userStore.userInfo?.vipExpireDate, 'Y-M-D') }}
      </div>
      <div class="text-center item-btn" v-else>
        <v-btn
          color="error"
          variant="outlined"
          rounded
          :disabled="Number(val.id) < Number(userStore.userInfo?.vipFlag)"
          :loading="val.loading"
          @click="createOrder(val)"
        >开通会员</v-btn>
      </div>
    </div>
  </div>
  
  <CtDialog :visible="open" :widthType="3" :footer="false" titleClass="text-h6" title="开通会员" @close="open = false">
    <m-pay
      :payPrice="payPrice"
      :qrCode="qrCode"
      :disabled="disabled"
      :expirationTime="expirationTime"
      :payChannelCode="payChannelCode"
      :orderId="orderId"
      @overdue="handleOverdue"
      @refreshQrCode="refreshQrCode"
      @paySuccess="paySuccess"
    ></m-pay>
  </CtDialog>
</template>

<script setup>
defineOptions({name: 'purchasePackage-packageList'})
import { ref, computed } from 'vue'
// import Snackbar from '@/plugins/snackbar'
import MPay from '@/components/personalRecharge/pay.vue'
import { orderCreated, getOrder, payOrderSubmit } from '@/api/common'
import { getMembershipPackageList } from '@/api/recruit/personal/membershipPackage.js'
import Snackbar from '@/plugins/snackbar'
import { useUserStore } from '@/store/user'
import { timesTampChange } from '@/utils/date'

const userStore = useUserStore()

const active = ref(null)
const handleClickItem = (val, i) => {
  active.value = i
}

const open = ref(false)
const disabled = ref(false)

const qrCode = ref('')
const payChannelCode = ref('wx_native')
const payPrice = ref(0)

const expirationTime = ref(-1)
const orderId = ref('')

const canUse = computed(() => {
  return new Date().getTime() < userStore.userInfo?.vipExpireDate
})

const packDataList = ref([])
const getData = async () => {
  const data = await getMembershipPackageList()
  if (!data?.length) return
  // let vipFlagIndex = null
  const list = data.map((item, index) => {
    item.id = item.id?.toString()
    // if (item.id === userStore.userInfo?.vipFlag) vipFlagIndex = index // 低于当前套餐的(套餐)不展示
    if (item.recommend) active.value = index // 推荐套餐
    return {
      ...item,
      list: JSON.parse(item.text),
      type: 3, // 订单类型 0平台订单|1求职端订单|2招聘端订单|3会员套餐
      loading: false
    }
  })
  // 低于当前套餐的(套餐)不展示
  // packDataList.value = vipFlagIndex ? list.slice(vipFlagIndex) : list
  packDataList.value = list
}
getData()

// 重新获取订单
const refreshQrCode = (payType) => {
  payChannelCode.value = payType
}

// 创建订单
async function createOrder (val) {
  val.loading = true
  payPrice.value = val.price
  try {
    const data = await getOrder({
      spuId: val.id, // 商品编号
      type: val.type
    })

    if (data) {
      // 获取支付码
      paymentCode(data)
      return
    }


    await orderCreated({
      spuId: val.id, // 商品编号
      spuName: val.name, // 商品名称
      price: val.price * 100, // 价格
      type: val.type // 订单类型 0平台订单|1求职端订单|2招聘端订单|3会员套餐
    })

    const _data = await getOrder({
      spuId: val.id, // 商品编号
      type: val.type
    })

    // 获取支付码
    
    paymentCode(_data)
    // qrCode.value = data
  } catch (error) {
    console.log(error)
  } finally {
    val.loading = false
  }
}

async function paymentCode (param) {
  try {
    const res = await payOrderSubmit({
      id: param.payOrder.id,
      channelCode: payChannelCode.value
    })
    if (!res?.displayContent) {
      Snackbar.error('获取支付码失败')
      return 
    }
    orderId.value = param.payOrder.id
    expirationTime.value = param.payOrder.expireTime - new Date().getTime()
    // expirationTime.value = param.payOrder.expireTime - _now
    qrCode.value = res.displayContent
    open.value = true
  } catch (error) {
    console.log(error)
  }
}

// 支付成功
function paySuccess () {
  Snackbar.success('支付成功')
  // 更新个人资料
  userStore.getUserInfos()
  open.value = false
}

// 过期
function handleOverdue () {
  disabled.value = true
}
</script>
<style lang="scss" scoped>
.greyText {
  color: #774e2085 !important;
}
.list {
  width: 100%;
}
.list-item {
  position: relative;
  // height: 400px;
  min-height: 480px;;
  width: calc((100% - 120px) / 5);
  min-width: calc((100% - 120px) / 5);
  max-width: calc((100% - 120px) / 5);
  padding: 30px 20px;
  border-radius: 14px;
  margin-right: 30px;
  color: #774e20;
  background-color: #fafafa;
  &.active {
    background-color: rgba(255, 251, 248, 1);
    border: 1px solid #f1b17a;
    box-shadow: 0px 6px 12px 0px rgba(216, 160, 82, 0.36);
  }
  &:nth-child(5n) {
    margin-right: 0;
  }
  .item-btn {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
  }
}
ul li {
  list-style: none;
  font-size: 15px;
  margin: 10px 0;
  font-weight: 500;
}

:deep(.v-btn) {
  border: 1px solid #bc8b55;
  color: #c30f0f !important;
  font-weight: 700;
}
.tips {
  background-color: #fffbf8;
  border: 1px solid #f1b17a;
  border-radius: 4px;
  text-align: center;
  font-size: 15px;
}
.recommend {
  position: absolute;
  top: 0;
  left: 0;
  width: 55px;
  height: 26px;
  line-height: 26px;
  background-color: #ff8a04;
  border-radius: 12px 0 18px 0;
  font-weight: 600;
  font-size: 14px;
  color: #fff;
  text-align: center;
}
.long {
  width: 100px;
}
.scanCode {
  border: 1px dashed #ccc;
  border-radius: 10px;
  padding: 30px;
  .code-left {
    border: 1px solid #f1b17a;
    border-radius: 6px;
    padding: 5px;
  }
  .price {
    font-size: 30px;
    font-weight: 700;
    color: #ff9012;
  }
}
:deep(.v-slide-group__content) {
  background: none !important;
}

.package-title {
  height: 60px;
  line-height: 60px;
  color: #fff;
  background: linear-gradient(45deg, #ff8a04, transparent);
  font-weight: 700;
  font-size: 20px;
  text-align: center;
  border-radius: 4px;
}


.vipColor {
  color: #774e2085;
  font-size: 15px;
  padding: 5px 0;
  &.active {
    color:#774e20;
  }
}
</style>