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-6 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-1">
            <span v-if="!item.custom">￥{{ FenYuanTransform(item.payPrice) }}</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="itemInfo"
      :info="itemInfo"
      @stopInterval="null"
      @paySuccess="null"
    ></initPay>
  </div>
</template>

<script setup>
defineOptions({ name: 'personalRecharge-index'})
import { FenYuanTransform } 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 || []
  // 默认选中
  if (data?.length && data[0]) handleSelect(data[0], 0)
  // 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
}

</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>