menduner/src/components/personalRecharge/index.vue

<template>
  <div class="resume-box" :class="{'fullShow': fullShow}">
    <div class="resume-header" v-if="showTitle">
      <div class="resume-title">余额充值</div>
    </div>
    <div class="d-flex align-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="handleSelect(item, index)"
      >
        <div class="d-flex flex-column align-center pb-5" style="position: relative;">  
          <div
            class="my-4 mt-8 font-size-16 font-weight-bold titleColor"
            :style="{'color': current === (index + 1) ? '#ff4747' : '#000'}"
          >
            {{ item.name }}
          </div>  
          <!-- <div class="font-weight-bold priceBox">
            <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>{{ item.payPrice }}</span>
          </div>   -->
          <div class="dailyPrice font-size-12 mt-3">
            <span v-if="!item.custom">￥{{ payCalculation(item.payPrice, 'realPay') }}</span>
            <span v-else>{{ item.tip }}</span>
          </div>
          <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>
          </div> 
        </div> 
      </div>
    </div>
    <initPay
      v-if="current"
      :info="itemInfo"
      @paySuccess="current = 0"
    ></initPay>
  </div>
</template>

<script setup>
defineOptions({ name: 'personalRecharge-index'})
import { payCalculation } from '@/utils/position'
import { ref } from 'vue'
import { getUserWalletRechargeList } from '@/api/recruit/personal/myWallet.js'
import initPay from './initPay.vue'

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

import { useRoute } from 'vue-router'; const route = useRoute()
const fullShow = ref(route.path === '/personalRecharge' ? true : false)

const current = ref(0)

const price = ref(0)

const list = ref([])

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

// 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 timer = ref(null)
const itemInfo = ref(null)
let count = 1; const interval = 2000;
const handleSelect = (item, index) => {
  count = 1
  itemInfo.value = item
  current.value = index + 1
  price.value = item.payPrice
  timer.value = setInterval(() => { clearIntervalFun() }, interval)
}

// 一段时间后清除二维码轮询
const clearIntervalFun = () => {
  // console.log('一段时间后清除二维码轮询', (count * interval))
  count++
  if ((count * interval) >= 30000 && timer.value) {
    current.value = 0
    clearInterval(timer.value); timer.value = null
  }
}

</script>

<style scoped lang="scss">
.fullShow {
  width: 1100px;
  background-color: #fff;
  margin: 0 auto;
  min-height: 720px;
}
.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;
}
.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>