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-4 font-size-16 font-weight-bold titleColor">{{ item.title }}</div>  
          <div class="font-weight-bold priceBox">
            <span v-if="item.custom">
              <input 
                v-model="item.price" 
                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.price }}</span>
          </div>  
          <div class="dailyPrice font-size-12 mt-3">
            <span v-if="!item.custom">￥{{ item.price }}</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>
    <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>
</template>

<script setup>
defineOptions({ name: 'myAccount-pointsAndBalance'})
import { ref } from 'vue'
import Public from './public.vue'
import QrCode from '@/components/QrCode'

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

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

const list = ref([
  { title: '余额200元', price: 200 },
  { title: '余额800元', price: 800 },
  { title: '余额1000元', price: 1000 },
  { title: '余额1200元', price: 1200 },
  { title: '自定义充值', price: 100, custom: true, tip: '输入完成后请按Enter键确认' }
])

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