menduner/src/views/recruit/enterprise/memberCenter/myMembers/components/package.vue

<template>
  <div class="d-flex mt-5 list">
    <div v-for="(val, i) in packData['企业套餐'].items" :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 mr-3 font-size-20">{{ val.price }}</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 in val.equity" :key="k">{{ 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="handleOpenMembership(val)">立即加入</v-btn>
      </div>
    </div>
  </div>

  <div class="my-10 tips">若注册资本超500万或特殊、行政事业单位，请联系<span class="font-weight-bold">高级客户经理</span>定制套餐</div>
  <div class="scan color-666 d-flex flex-column align-center">
    <div class="font-weight-bold">微信扫一扫</div>
    <div class="font-size-15 my-3">高级客户经理为您报价（扫码后可电话联系）</div>
    <v-img cover aspect-ratio="1/1" src="https://minio.citupro.com/dev/static/mendunerCode.jpg" width="170" height="170"></v-img>
  </div>

  <CtDialog :visible="open" :widthType="1" :footer="false" titleClass="text-h6" title="套餐购买" @close="open = false">
    <OpenPage v-if="open" :type="type"></OpenPage>
  </CtDialog>
</template>

<script setup>
defineOptions({ name: 'myAccount-package'})
import { ref } from 'vue'
import OpenPage from './open.vue'
import { packData } from '@/utils/package.js'

const active = ref(2)

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

// 开通会员
const type = ref()
const open = ref(false)
const handleOpenMembership = (val) => {
  if (!val?.type) return
  type.value = val.type
  open.value = true
}
</script>

<style scoped lang="scss">
@import '@/styles/package/index.scss'
</style>