menduner/src/views/recruit/enterprise/memberCenter/myAccount/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 v-if="current === (index+1)" xmlns="http://www.w3.org/2000/svg" class="svg__StyledSvg-sc-5p68xx-0 gSyYMA svg-icon ext00/mat/card_checked_top_right icon top-right-img" viewBox="0 0 104 102" aria-hidden="true"><path fill="url(#paint0_linear_4683_12836)" d="M132.93 24.67 111.3-3.55a11 11 0 0 0-4.07-3.27A12 12 0 0 0 101.98-8H33.02c-1.83 0-3.63.4-5.25 1.18s-3.02 1.9-4.08 3.27L2.1 24.67A10 10 0 0 0 0 31.17a10 10 0 0 0 2.7 6.32L58.8 98.3c1.07 1.17 2.4 2.1 3.9 2.74a12.3 12.3 0 0 0 9.6 0c1.5-.64 2.84-1.57 3.91-2.74l56.09-60.81a10 10 0 0 0 2.69-6.3 10 10 0 0 0-2.06-6.51m-31.9 6.6L69.9 66.33q-.45.5-1.07.77a3.3 3.3 0 0 1-3.72-.77l-31.13-35.1q-.55-.63-.67-1.45-.1-.81.28-1.55.39-.74 1.14-1.19a3.3 3.3 0 0 1 1.65-.44H50.5q.7 0 1.32.27.63.28 1.07.77l12.23 13.73q.44.49 1.07.77a3.3 3.3 0 0 0 3.71-.77l12.22-13.73q.45-.48 1.07-.76.63-.27 1.32-.28h14.13q.88.01 1.65.44.74.45 1.14 1.18a2.6 2.6 0 0 1-.4 3.02z"></path><defs><linearGradient id="paint0_linear_4683_12836" x1="67.5" x2="67.5" y1="-8" y2="102" gradientUnits="userSpaceOnUse"><stop stop-color="#FFCC76"></stop><stop offset="1" stop-color="#FEE1B0"></stop></linearGradient></defs></svg>
            <svg v-else xmlns="http://www.w3.org/2000/svg" class="svg__StyledSvg-sc-5p68xx-0 gSyYMA svg-icon ext00/mat/card_not_checked_top_right icon top-right-img" viewBox="0 0 104 102" aria-hidden="true"><path fill="#ECF5FF" d="M132.93 24.67 111.3-3.55a11 11 0 0 0-4.07-3.27A12 12 0 0 0 101.98-8H33.02c-1.83 0-3.63.4-5.25 1.18s-3.02 1.9-4.08 3.27L2.1 24.67A10 10 0 0 0 0 31.17a10 10 0 0 0 2.7 6.32L58.8 98.3c1.07 1.17 2.4 2.1 3.9 2.74a12.3 12.3 0 0 0 9.6 0c1.5-.64 2.84-1.57 3.91-2.74l56.09-60.81a10 10 0 0 0 2.69-6.3 10 10 0 0 0-2.06-6.51m-31.9 6.6L69.9 66.33q-.45.5-1.07.77a3.3 3.3 0 0 1-3.72-.77l-31.13-35.1q-.55-.63-.67-1.45-.1-.81.28-1.55.39-.74 1.14-1.19a3.3 3.3 0 0 1 1.65-.44H50.5q.7 0 1.32.27.63.28 1.07.77l12.23 13.73q.44.49 1.07.77a3.3 3.3 0 0 0 3.71-.77l12.22-13.73q.45-.48 1.07-.76.63-.27 1.32-.28h14.13q.88.01 1.65.44.74.45 1.14 1.18a2.6 2.6 0 0 1-.4 3.02z"></path></svg>
          </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">
          <!-- <v-img cover aspect-ratio="1/1" src="https://minio.citupro.com/dev/static/mendunerCode.jpg" :width="170" style="height: 170px;"></v-img> -->
          <QrCode text="二维码内容二维码内容二维码内容二维码内容" :width="170" />
        </div>
        <div class="code-right ml-5">
          <div class="price">
            <span class="font-size-13">￥</span>
            {{ price }}
          </div>
          <!-- <div class="d-flex align-center mt-5">
            <svg t="1722917564069" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6649" width="25" height="25"><path d="M267.547234 569.082553a59.261277 59.261277 0 0 0-25.055319 36.602553 74.948085 74.948085 0 0 0 20.48 68.411915 145.974468 145.974468 0 0 0 79.959149 34.42383 215.257872 215.257872 0 0 0 127.891064-43.574468 245.542128 245.542128 0 0 0 61.657872-61.657872C479.319149 576.054468 416.13617 546.205957 348.595745 550.781277a148.371064 148.371064 0 0 0-79.959149 18.301276m653.617021 116.561702a454.045957 454.045957 0 0 0 36.384681-174.297872 445.984681 445.984681 0 1 0-84.316596 261.446808c-77.780426-38.781277-203.492766-100.439149-281.055319-139.220425a329.422979 329.422979 0 0 1-152.510638 102.617872 223.972766 223.972766 0 0 1-108.936171 9.150639 137.695319 137.695319 0 0 1-77.562553-40.96 357.528511 357.528511 0 0 1-22.876595-32.027234v2.178723a57.300426 57.300426 0 0 1-6.971915-15.904681 40.088511 40.088511 0 0 1-2.178724-15.904681V631.829787a65.361702 65.361702 0 0 1 2.178724-20.48 115.47234 115.47234 0 0 1 29.84851-57.082553 183.666383 183.666383 0 0 1 130.723405-43.574468A765.821277 765.821277 0 0 1 566.468085 550.781277a567.557447 567.557447 0 0 0 36.384681-105.014468H331.601702V416.13617h137.041702v-57.082553h-166.890213v-29.848511h166.890213v-57.082553a11.982979 11.982979 0 0 1 13.725958-13.725957h63.836595v73.205106h180.616171v29.630638h-180.616171v57.082554h144.013617A547.295319 547.295319 0 0 1 631.829787 578.233191c102.835745 34.205957 244.452766 89.109787 290.205958 107.411064" fill="#3383C6" p-id="6650"></path></svg>
            <svg t="1722917499216" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3857" width="21" height="21"><path d="M352.814545 385.396364m-33.512727 0a33.512727 33.512727 0 1 0 67.025455 0 33.512727 33.512727 0 1 0-67.025455 0Z" fill="#50B674" p-id="3858"></path><path d="M502.690909 384.465455m-33.512727 0a33.512727 33.512727 0 1 0 67.025454 0 33.512727 33.512727 0 1 0-67.025454 0Z" fill="#50B674" p-id="3859"></path><path d="M576.232727 534.341818m-23.272727 0a23.272727 23.272727 0 1 0 46.545455 0 23.272727 23.272727 0 1 0-46.545455 0Z" fill="#50B674" p-id="3860"></path><path d="M694.458182 536.203636m-23.272727 0a23.272727 23.272727 0 1 0 46.545454 0 23.272727 23.272727 0 1 0-46.545454 0Z" fill="#50B674" p-id="3861"></path><path d="M512 0C229.003636 0 0 229.003636 0 512s229.003636 512 512 512 512-229.003636 512-512S794.996364 0 512 0z m-87.505455 630.225455c-26.996364 0-48.407273-5.585455-75.403636-11.17091l-75.403636 37.236364 21.410909-64.232727c-53.992727-37.236364-85.643636-85.643636-85.643637-145.221818 0-102.4 96.814545-182.458182 215.04-182.458182 105.192727 0 198.283636 64.232727 216.901819 150.807273-6.516364-0.930909-13.963636-0.930909-20.48-0.93091-102.4 0-182.458182 76.334545-182.458182 170.356364 0 15.825455 2.792727 30.72 6.516363 44.683636-7.447273 0-13.963636 0.930909-20.48 0.93091z m314.647273 75.403636l15.825455 53.992727-58.647273-32.581818c-21.410909 5.585455-42.821818 11.170909-64.232727 11.170909-102.4 0-182.458182-69.818182-182.458182-155.461818s80.058182-155.461818 182.458182-155.461818c96.814545 0 182.458182 69.818182 182.458182 155.461818 0 47.476364-31.650909 90.298182-75.403637 122.88z" fill="#50B674" p-id="3862"></path></svg>
            <span class="color-666 font-size-14 ml-3">支持支付宝/微信扫码</span>
          </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 v-if="k.isWeChat" t="1722917499216" class="icon ml-1" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3857" width="21" height="21"><path d="M352.814545 385.396364m-33.512727 0a33.512727 33.512727 0 1 0 67.025455 0 33.512727 33.512727 0 1 0-67.025455 0Z" fill="#50B674" p-id="3858"></path><path d="M502.690909 384.465455m-33.512727 0a33.512727 33.512727 0 1 0 67.025454 0 33.512727 33.512727 0 1 0-67.025454 0Z" fill="#50B674" p-id="3859"></path><path d="M576.232727 534.341818m-23.272727 0a23.272727 23.272727 0 1 0 46.545455 0 23.272727 23.272727 0 1 0-46.545455 0Z" fill="#50B674" p-id="3860"></path><path d="M694.458182 536.203636m-23.272727 0a23.272727 23.272727 0 1 0 46.545454 0 23.272727 23.272727 0 1 0-46.545454 0Z" fill="#50B674" p-id="3861"></path><path d="M512 0C229.003636 0 0 229.003636 0 512s229.003636 512 512 512 512-229.003636 512-512S794.996364 0 512 0z m-87.505455 630.225455c-26.996364 0-48.407273-5.585455-75.403636-11.17091l-75.403636 37.236364 21.410909-64.232727c-53.992727-37.236364-85.643636-85.643636-85.643637-145.221818 0-102.4 96.814545-182.458182 215.04-182.458182 105.192727 0 198.283636 64.232727 216.901819 150.807273-6.516364-0.930909-13.963636-0.930909-20.48-0.93091-102.4 0-182.458182 76.334545-182.458182 170.356364 0 15.825455 2.792727 30.72 6.516363 44.683636-7.447273 0-13.963636 0.930909-20.48 0.93091z m314.647273 75.403636l15.825455 53.992727-58.647273-32.581818c-21.410909 5.585455-42.821818 11.170909-64.232727 11.170909-102.4 0-182.458182-69.818182-182.458182-155.461818s80.058182-155.461818 182.458182-155.461818c96.814545 0 182.458182 69.818182 182.458182 155.461818 0 47.476364-31.650909 90.298182-75.403637 122.88z" fill="#50B674" p-id="3862"></path></svg>
                <svg v-else t="1722917564069" class="icon ml-1" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6649" width="25" height="25"><path d="M267.547234 569.082553a59.261277 59.261277 0 0 0-25.055319 36.602553 74.948085 74.948085 0 0 0 20.48 68.411915 145.974468 145.974468 0 0 0 79.959149 34.42383 215.257872 215.257872 0 0 0 127.891064-43.574468 245.542128 245.542128 0 0 0 61.657872-61.657872C479.319149 576.054468 416.13617 546.205957 348.595745 550.781277a148.371064 148.371064 0 0 0-79.959149 18.301276m653.617021 116.561702a454.045957 454.045957 0 0 0 36.384681-174.297872 445.984681 445.984681 0 1 0-84.316596 261.446808c-77.780426-38.781277-203.492766-100.439149-281.055319-139.220425a329.422979 329.422979 0 0 1-152.510638 102.617872 223.972766 223.972766 0 0 1-108.936171 9.150639 137.695319 137.695319 0 0 1-77.562553-40.96 357.528511 357.528511 0 0 1-22.876595-32.027234v2.178723a57.300426 57.300426 0 0 1-6.971915-15.904681 40.088511 40.088511 0 0 1-2.178724-15.904681V631.829787a65.361702 65.361702 0 0 1 2.178724-20.48 115.47234 115.47234 0 0 1 29.84851-57.082553 183.666383 183.666383 0 0 1 130.723405-43.574468A765.821277 765.821277 0 0 1 566.468085 550.781277a567.557447 567.557447 0 0 0 36.384681-105.014468H331.601702V416.13617h137.041702v-57.082553h-166.890213v-29.848511h166.890213v-57.082553a11.982979 11.982979 0 0 1 13.725958-13.725957h63.836595v73.205106h180.616171v29.630638h-180.616171v57.082554h144.013617A547.295319 547.295319 0 0 1 631.829787 578.233191c102.835745 34.205957 244.452766 89.109787 290.205958 107.411064" fill="#3383C6" p-id="6650"></path></svg>
              </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: '微信扫码', color: 'success', value: 'wx_native', isWeChat: true },
  { label: '支付宝扫码', 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
}
</style>