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

<!--  -->
<template>
  <div class="d-flex mt-5 list">
    <div v-for="(val, i) in packData" :key="i" class="list-item cursor-pointer" :class="{'active': active === i }" @click="handleClickItem(val, i)">
      <div v-if="val.recommend" class="recommend">推荐</div>
      <div class="text-center font-weight-bold">{{ val.title }}</div>
      <div class="text-center my-5">
        <div v-if="val.price && !val.cycle">
          ￥
          <span class="font-weight-bold font-size-20">{{ val.price }}</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-else>
        <h3 class="my-3">授权范围：</h3>
        <div class="font-size-15">扫描下方二维码联系高级客户经理为您定制</div>
      </div>
      <div class="text-center item-btn">
        <v-btn v-if="!val.customized" color="error" variant="outlined" rounded @click="createOrder(val)">开通会员</v-btn>
      </div>
    </div>
  </div>
  
  <CtDialog :visible="open" :widthType="1" :footer="false" titleClass="text-h6" title="开通会员" @close="open = false">
    <m-pay
      :payPrice="100"
      :qrCode="qrCode"
      :disabled="disabled"
      @overdue="handleOverdue"
      @refreshQrCode="refreshQrCode"
    ></m-pay>
  </CtDialog>
</template>

<script setup>
import { packData } from './packageList.js'
import { ref } from 'vue'
// import Snackbar from '@/plugins/snackbar'
import MPay from '@/components/personalRecharge/pay.vue'
import { orderCreated, getOrder } from '@/api/common'
defineOptions({name: 'purchasePackage-packageList'})


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

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

const qrCode = ref('')

// const itemInfo = ref(null)

// 开通会员
// const handleOpenMembership = (val) => {
//   console.log(val)
//   // createOrder()
//   // open.value = true
// }

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

// 创建订单
async function createOrder (val) {
  try {

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

    if (data) {
      return
    }


    const orderId = await orderCreated({
      spuId: val.spuId, // 商品编号
      spuName: val.title, // 商品名称
      price: val.price, // 价格
      type: val.type // 订单类型 0平台订单|1求职端订单|2招聘端订单|3用户会员-14天|4用户会员-30天|5用户会员-30天|6用户会员-90天|7用户会员-365天,
    })
    // 获取二维码
    console.log(orderId)
    // qrCode.value = data
  } catch (error) {
    // console.log(error)
  }
}

// 过期
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;
  &: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;
}
.active {
  background-color: rgba(255, 251, 248, 1);
  border: 1px solid #f1b17a;
  box-shadow: 0px 6px 12px 0px rgba(216, 160, 82, 0.36);
}
: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;
}
.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;
}
</style>