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

<template>
  <div class="resume-box">
    <div class="resume-header" v-if="showTitle">
      <div class="resume-title">余额充值</div>
    </div>
    <div class="d-flex align-center justify-center mb-10 mt-5">
      <div
        v-for="(item, index) in list"
        :key="index"
        class="packagesItem cursor-pointer mx-3"
        :class="{'active': current === (index+1)}"
        style="width: 200px;"
        @click="current = index + 1; price = item.price"
      >
        <div class="d-flex flex-column align-center pb-5" style="position: relative;">  
          <div class="my-5 font-size-16 font-weight-bold titleColor">{{ item.name }}</div>  
          <div class="font-weight-bold priceBox mt-3">
            <span v-if="item.custom">
              <input 
                v-model="item.payPrice" 
                type="text" 
                class="custom-input-num" 
                :style="{'color': current === (index + 1) ? '#ff4747' : '#000'}" 
                @keyup.enter="handleCustomEnter"
                @focus="item.tip = '输入完成后请按Enter键确认'"
              >
            </span>
            <span class="font28" v-else>￥{{ payCalculation(item.payPrice, 'realPay') }}</span>
          </div>  
          <!-- <div class="dailyPrice font-size-12 mt-3">
            <span v-if="!item.custom">￥{{ calcFun(item.payPrice, true) }}</span>
            <span v-else>{{ item.tip }}</span>
          </div> -->
          <!-- <span class="mt-3" @click="handleRecharge(item)">立即充值</span> -->
          <v-btn class="mt-8" size="small" color="error" variant="outlined" rounded @click="handleRecharge(item)">立即充值</v-btn>
          <div class="vip">
            <!-- <svg-icon v-if="current === (index+1)" name="diamond-active" size="50"></svg-icon>
            <svg-icon v-else name="diamond" size="50"></svg-icon> -->
            <svg-icon name="diamond" size="50"></svg-icon>
          </div> 
        </div> 
      </div>
    </div>
    <!-- <div class="code pa-5 resume-box">
      <div class="resume-header">
        <div class="resume-title">扫码支付</div>
      </div>
      <div class="d-flex align-end mt-3">
        <div class="code-left">
          <QrCode text="二维码内容二维码内容二维码内容二维码内容" :width="170" />
        </div>
        <div class="code-right ml-5">
          <div class="price">
            <span class="font-size-13">￥</span>
            {{ price }}
          </div>
          <div class="mt-3 d-flex align-center">
            <span class="color-666 font-weight-bold mr-5">支付方式</span>
            <v-chip-group v-model="payment" selected-class="text-primary" mandatory>
              <v-chip filter v-for="k in paymentList" :key="k.value" :value="k.value" class="mr-3" label>
                {{ k.label }}
                <svg-icon class="ml-1" :name="k.icon" :size="k.size"></svg-icon>
              </v-chip>
            </v-chip-group>
          </div>
          <div class="font-size-14 color-666 mt-3 cursor-pointer">
            服务协议
            <span class="septal-line"></span>
            <span @click="show = true">对公支付</span>
          </div>
        </div>
      </div>
    </div> -->
  </div>

  <CtDialog :visible="show" :widthType="2" :footer="false" titleClass="text-h6" title="对公账户信息" @close="show = false">
    <Public v-if="show" :price="price"></Public>
  </CtDialog>
  
  <confirmPaymentDialog
    v-if="showConfirmPaymentDialog"
    :appId="11"
    :cost="payCalculation(rechargeDataItem.payPrice, 'realPay')"
    :rechargeInfo="rechargeDataItem"
    @paySuccess="paySuccess"
    @close="showConfirmPaymentDialog = false"
  ></confirmPaymentDialog>
</template>

<script setup>
defineOptions({ name: 'myAccount-pointsAndBalance'})
import { ref } from 'vue'
import Public from './public.vue'
// import QrCode from '@/components/QrCode'
import { getEnterpriseRechargePackageList } from '@/api/recruit/enterprise/member/points'
import { payCalculation } from '@/utils/position'

defineProps({
  showTitle: {
    type: Boolean,
    default: false
  }
})

const show = ref(false)
const current = ref(1)
const price = ref(200)

const list = ref([])

// const payment = ref('wx_native')
// const paymentList = [
//   { label: '微信扫码', icon: 'weChat', size: 21, color: 'success', value: 'wx_native' },
//   { label: '支付宝扫码', icon: 'alipay', size: 23, color: '#3383c6', value: 'alipay_qr' }
// ]

const handleCustomEnter = (e) => {
  const num = e.target.value
  const custom = list.value.find(k => k.custom)
  if (num < 100) {
    custom.tip = '最低充值金额为100元'
    custom.price = 100
    return
  }
  price.value = num
}

const getData = async () => {
  // const params = {}
  const data = await getEnterpriseRechargePackageList()
  list.value = data || []
  // const end = { name: '自定义充值', payPrice: 100, custom: true, tip: '输入完成后请按Enter键确认' }
  // list.value = data ? [...data, end] : [end]
}
getData()

// 支付弹窗
const rechargeDataItem = ref(null)
const showConfirmPaymentDialog = ref(false)
const handleRecharge = (item) => {
  rechargeDataItem.value = { ...item }
  // 打开支付弹窗
  showConfirmPaymentDialog.value = true
}

// 支付成功
import { useUserStore } from '@/store/user'; const store = useUserStore()
const paySuccess = async () => {
  showConfirmPaymentDialog.value = false
  await store.getEnterpriseUserAccountInfo()
}


</script>

<style scoped lang="scss">
.packagesItem {
  border: 1px solid var(--color-f3);
  border-radius: 8px;
  background-color: var(--color-f2f4f742);
}
.dailyPrice {
  border-radius: 14px;
  background-color: #dde3e94f;
  padding: 2px 18px;
  color: var(--color-666);
}
.active {
  // border: 2px solid #cf990c;
  // background: linear-gradient(rgb(255, 242, 214) 8.86%, rgb(255, 225, 177) 100%);;
  // .priceBox {
  //   color: var(--v-error-base);
  // }
  // .dailyPrice {
  //   color: var(--v-error-base);
  //   background-color: #fff4e7;
  // }
}
.custom-input-num {
  border: none;
  outline: none;
  background-color: transparent;
  max-width: 100%;
  text-align: center;
  font-weight: 700;
}
.code {
  max-width: 1100px;
  background-color: #f7f8fa;
  border-radius: 6px;
  margin: 0 auto;
  &-left {
    border: 1px solid #00897B;
    border-radius: 6px;
    padding: 5px;
  }
  &-right {
    .price {
      font-size: 30px;
      font-weight: 700;
      color: var(--v-error-base);
    }
  }
}
.vip {
  width: 50px; 
  height: 50px;
  position: absolute; 
  top: 0; 
  right: 0;
  overflow: hidden;
  border-radius: 8px
}
:deep(.v-slide-group__content) {
  background: none !important;
}
</style>