250 lines
19 KiB
Vue
250 lines
19 KiB
Vue
<template>
|
||
<div>
|
||
<FormControl
|
||
:label="`支付金额`"
|
||
class="mb-3"
|
||
v-model.number="creditsToBuy"
|
||
name="amount"
|
||
autocomplete="off"
|
||
type="number"
|
||
:min="minimumAmount"
|
||
>
|
||
<template #prefix>
|
||
<div class="grid w-4 place-items-center text-sm text-gray-700">
|
||
{{ $team.pg.currency === 'CNY' ? '¥' : '$' }}
|
||
</div>
|
||
</template>
|
||
</FormControl>
|
||
</div>
|
||
|
||
<div class="mt-4">
|
||
<div class="text-xs text-gray-600">支付方式</div>
|
||
<div class="mt-1.5 grid grid-cols-1 gap-2 sm:grid-cols-2">
|
||
<label
|
||
class="payment-option"
|
||
:class="{'payment-option-active': paymentGateway === 'Alipay'}"
|
||
>
|
||
<div class="payment-icon">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1157.3333 400" class="alipay-svg"><defs><clipPath id="a" clipPathUnits="userSpaceOnUse"><path d="M0 300h868V0H0Z"></path></clipPath></defs><g clip-path="url(#a)" transform="matrix(1.33333 0 0 -1.33333 0 400)"><path d="M0 0h87.488v-17.318h31.243V3.2c-.002.05-.009.07-.009.124 0 4.61-3.613 8.345-8.092 8.422H60.063V27.89H27.362V11.746h-58.601v-29.064H0Z" transform="translate(745.123 252.854)" style="fill: rgb(61, 57, 57); fill-opacity: 1; fill-rule: nonzero; stroke: none;"></path><path d="m0 0-32.034-75.76h24.576v-90.155h26.874v119.582H9.682L29.92 0Z" transform="translate(555.846 279.253)" style="fill: rgb(61, 57, 57); fill-opacity: 1; fill-rule: nonzero; stroke: none;"></path><path d="m0 0-9.931 33.562c-.654 2.113-2.57 3.648-4.843 3.651h-26.017l7.54-25.468h-30.584v49.328h60.063v11.745h-60.063v23.218h60.063v11.744h-149.904V96.036h60.063V72.818h-60.063V61.073h60.063V11.745h-60.063V0Z" transform="translate(867.56 117.067)" style="fill: rgb(61, 57, 57); fill-opacity: 1; fill-rule: nonzero; stroke: none;"></path><path d="M0 0h-23.264l18.118-57.072h27.53L5.524-3.538C4.509-1.454 2.421-.02 0 0" transform="translate(619.044 220.684)" style="fill: rgb(61, 57, 57); fill-opacity: 1; fill-rule: nonzero; stroke: none;"></path><path d="M0 0h-27.926v-29.179h-68.831v-11.744h68.831v-104.913c-.242-2.397-2.136-4.267-4.504-4.398h-14.195v-12.16h36.197c5.725.245 10.302 4.99 10.428 10.892V-40.923h11.346v11.744H0z" transform="translate(683.458 277.875)" style="fill: rgb(61, 57, 57); fill-opacity: 1; fill-rule: nonzero; stroke: none;"></path><path d="M0 0c-25.503 9.287-45.697 19.493-61.562 29.341 22.978 17.025 43.114 40.133 51.189 71.044h-53.654v19.223h62.211v11.974h-62.211v24.364h-27.727l-.005-.006c-3.035 0-5.495-2.543-5.495-5.686v-18.672h-61.766v-11.974h61.766v-19.223h-52.13V88.417h103.842s-5.76-22.464-34.241-46.609c-25.512 19.317-34.046 34.705-34.046 34.705h-27.856c11.261-19.523 27.271-35.161 44.502-47.568-15.844-10.298-36.344-20.233-62.922-28.176v-14.342s40.979 7.734 80.589 31.07C-39.846-5.656 0-13.573 0-13.573Z" transform="translate(519.574 124.327)" style="fill: rgb(61, 57, 57); fill-opacity: 1; fill-rule: nonzero; stroke: none;"></path><path d="m0 0 9.62-28.837H-9.966Zm12.578-37.604 4.637-14.002h13.002L4.607 17.923h-9.938l-25.517-69.529h13.013l4.84 14.002z" transform="translate(408.575 70.862)" style="fill: rgb(61, 57, 57); fill-opacity: 1; fill-rule: nonzero; stroke: none;"></path><path d="M0 0v-69.529h42.105v9.465H12.513V0z" transform="translate(479.82 88.785)" style="fill: rgb(61, 57, 57); fill-opacity: 1; fill-rule: nonzero; stroke: none;"></path><path d="M567.8 19.256h12.512v69.529H567.8Z" style="fill: rgb(61, 57, 57); fill-opacity: 1; fill-rule: nonzero; stroke: none;"></path><path d="M0 0h-13.813v23.789H0c6.942 0 11.091-6.069 11.091-11.942C11.091 6.104 7.204 0 0 0m.703 33.246h-27.027v-69.529h12.511v26.726H.703c13.485 0 22.902 8.803 22.902 21.404 0 12.6-9.417 21.399-22.902 21.399" transform="translate(657.331 55.54)" style="fill: rgb(61, 57, 57); fill-opacity: 1; fill-rule: nonzero; stroke: none;"></path><path d="m0 0 9.621-28.837H-9.966Zm12.58-37.604 4.638-14.002h13.001L4.607 17.923h-9.936l-25.517-69.529h13.013l4.84 14.002z" transform="translate(741.809 70.862)" style="fill: rgb(61, 57, 57); fill-opacity: 1; fill-rule: nonzero; stroke: none;"></path><path d="m0 0-13.64-29.625L-27.489 0h-13.517l21.054-40.968v-28.561h12.413v28.561l.08.158L13.518 0Z" transform="translate(841.691 88.785)" style="fill: rgb(61, 57, 57); fill-opacity: 1; fill-rule: nonzero; stroke: none;"></path><path d="M0 0c-7.518-.745-21.627-4.064-29.345-10.861-23.132-20.111-9.292-56.874 37.513-56.874 27.204 0 54.395 17.345 75.748 45.115C53.539-7.836 27.805 2.739 0 0" transform="translate(73.568 137.035)" style="fill: rgb(22, 119, 255); fill-opacity: 1; fill-rule: nonzero; stroke: none;"></path><path d="M0 0h-204.487c-26.629 0-48.194-21.511-48.194-48.063v-203.884c0-26.534 21.565-48.053 48.194-48.053H0c26.623 0 48.178 21.519 48.178 48.053v2.004h-.001v-.036s-78.253 32.528-117.773 51.474c-26.501-32.515-60.692-52.249-96.183-52.249-60.03 0-80.415 52.378-51.99 86.863 6.196 7.516 16.739 14.692 33.103 18.716 25.59 6.266 66.329-3.914 104.504-16.474 6.863 12.615 12.642 26.503 16.949 41.291h-117.656v11.889h60.664v21.299h-73.474v11.888h73.474v30.388s0 5.119 5.202 5.119h29.65v-35.507h72.647V-87.17h-72.647v-21.299h59.301c-5.673-23.18-14.298-44.512-25.108-63.245 17.994-6.49 34.15-12.639 46.186-16.656 43.323-14.47 53.151-15.249 53.151-15.249v-.004h.001v155.56C48.178-21.511 26.623 0 0 0" transform="translate(253.122 300)" style="fill: rgb(22, 119, 255); fill-opacity: 1; fill-rule: nonzero; stroke: none;"></path></g></svg>
|
||
</div>
|
||
<input type="radio" v-model="paymentGateway" value="Alipay" class="hidden-radio">
|
||
<span class="checkmark-circle" v-if="paymentGateway === 'Alipay'">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="checkmark-icon">
|
||
<path fill="currentColor" d="M9.55 18l-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"/>
|
||
</svg>
|
||
</span>
|
||
</label>
|
||
|
||
<label
|
||
class="payment-option"
|
||
:class="{'payment-option-active': paymentGateway === 'WeChatPay'}"
|
||
>
|
||
<div class="payment-icon">
|
||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 150 34" class="wechat-svg"><g id="组件" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="导航/头部菜单_内容" transform="translate(0.000000, -70.000000)"><g id="logo" transform="translate(0.000000, 70.000000)"><g id="微信支付logo"><path d="M13.9879326,21.4155844 C13.8125353,21.5038961 13.637138,21.5480519 13.4178914,21.5480519 C12.9355489,21.5480519 12.5409051,21.2831169 12.3216585,20.8857143 L12.2339598,20.7090909 L8.76986368,13.1142857 C8.72601436,13.025974 8.72601436,12.9376623 8.72601436,12.8493506 C8.72601436,12.4961039 8.98911027,12.2311688 9.33990482,12.2311688 C9.47145277,12.2311688 9.60300073,12.2753247 9.73454868,12.3636364 L13.8125353,15.2779221 C14.1194805,15.4545455 14.4702751,15.587013 14.8649189,15.587013 C15.0841655,15.587013 15.3034121,15.5428571 15.5226587,15.4545455 L34.6409615,6.88831169 C31.2207147,2.82597403 25.5641526,0.176623377 19.1621521,0.176623377 C8.72601436,0.176623377 0.219246592,7.28571429 0.219246592,16.0727273 C0.219246592,20.8415584 2.76250706,25.1688312 6.75279503,28.0831169 C7.05974026,28.3038961 7.27898685,28.7012987 7.27898685,29.0987013 C7.27898685,29.2311688 7.23513753,29.3636364 7.19128821,29.4961039 C6.88434299,30.6883117 6.35815117,32.6311688 6.35815117,32.7194805 C6.31430185,32.8519481 6.27045253,33.0285714 6.27045253,33.2051948 C6.27045253,33.5584416 6.53354844,33.8233766 6.88434299,33.8233766 C7.01589094,33.8233766 7.1474389,33.7792208 7.23513753,33.6909091 L11.3569735,31.2623377 C11.6639187,31.0857143 12.0147132,30.9532468 12.3655078,30.9532468 C12.5409051,30.9532468 12.7601516,30.9974026 12.9355489,31.0415584 C14.8649189,31.6155844 16.9696862,31.9246753 19.1183028,31.9246753 C29.5544406,31.9246753 38.0612084,24.8155844 38.0612084,16.0285714 C38.0612084,13.3792208 37.2719206,10.8623377 35.9125918,8.65454545 L14.1194805,21.3272727 L13.9879326,21.4155844 Z" id="XMLID_81_" fill="#22AC38"></path><rect id="XMLID_80_" fill="#494949" x="83.6206502" y="11.4363636" width="14.2071792" height="1.28051948"></rect><rect id="XMLID_79_" fill="#494949" x="83.6206502" y="15.4103896" width="14.2071792" height="1.36883117"></rect><path d="M97.4331854,27.2883117 L97.4331854,19.5168831 L83.9714447,19.5168831 L83.9714447,27.2441558 L97.4331854,27.2441558 L97.4331854,27.2883117 Z M85.3307736,20.7974026 L96.0738566,20.7974026 L96.0738566,25.9636364 L85.3307736,25.9636364 L85.3307736,20.7974026 Z" id="XMLID_76_" fill="#494949" fill-rule="nonzero"></path><path d="M79.7180608,28.0831169 L79.7180608,10.2883117 C80.5073486,8.52207792 81.252787,6.66753247 81.8228281,4.76883117 L80.5511979,4.01818182 C79.2795676,8.47792208 77.4817456,12.4961039 75.1577317,15.8961039 L75.9031701,17.2207792 C76.6924579,16.0285714 77.5255949,14.6155844 78.358732,13.1584416 L78.358732,28.1272727 L79.7180608,28.1272727 L79.7180608,28.0831169 Z" id="XMLID_75_" fill="#494949"></path><path d="M131.284859,28.0831169 L131.284859,10.2883117 C132.074147,8.52207792 132.819585,6.66753247 133.389627,4.76883117 L132.117996,4.01818182 C130.846366,8.47792208 129.048544,12.4961039 126.72453,15.8961039 L127.469969,17.2207792 C128.259256,16.0285714 129.092393,14.6155844 129.92553,13.1584416 L129.92553,28.1272727 L131.284859,28.1272727 L131.284859,28.0831169 Z" id="XMLID_74_" fill="#494949"></path><path d="M99.3187061,7.32987013 L90.9873356,7.32987013 L91.864322,6.8 L91.9081713,6.8 L91.9081713,6.75584416 C91.8204727,6.53506494 91.5573768,5.96103896 91.2504316,5.34285714 C90.9873356,4.76883117 90.7242397,4.23896104 90.5926918,3.92987013 L90.5926918,3.88571429 L89.3210615,4.63636364 L89.3210615,4.68051948 C89.7595547,5.51948052 90.1541986,6.31428571 90.5049931,7.06493506 C90.5488425,7.15324675 90.5926918,7.24155844 90.5926918,7.28571429 L82.2613213,7.28571429 L82.2613213,8.65454545 L99.3187061,8.65454545 L99.3187061,7.32987013 Z" id="XMLID_73_" fill="#494949"></path><polygon id="XMLID_72_" fill="#494949" points="62.660676 6.27012987 61.3890457 6.27012987 61.3890457 10.774026 58.9773332 10.774026 58.9773332 4.37142857 57.705703 4.37142857 57.705703 10.774026 55.2062918 10.774026 55.2062918 6.27012987 53.9346616 6.27012987 53.9346616 12.0545455 62.660676 12.0545455"></polygon><rect id="XMLID_71_" fill="#494949" x="54.3293055" y="14.5714286" width="7.71748004" height="1.28051948"></rect><path d="M55.9955796,20.8415584 L55.9955796,19.6935065 L59.8981689,19.6935065 L59.8981689,22.5194805 C59.8543196,23.5350649 59.8104703,23.8441558 59.4596757,24.2857143 L60.2489635,25.6545455 L60.2928128,25.6103896 C60.9944019,25.0363636 62.1344841,24.0649351 63.7569089,22.6077922 L63.8007582,22.6077922 L63.1868678,21.5480519 L63.1430185,21.5038961 L61.1697991,23.1818182 L61.1697991,18.3688312 L54.6362507,18.3688312 L54.6362507,20.3116883 C54.811648,22.961039 54.1539082,24.8597403 52.6630314,25.9636364 L52.6191821,25.9636364 L53.3207712,27.2 L53.3646205,27.2441558 L53.4084698,27.2 C55.2501412,25.7428571 56.1271275,23.5792208 55.9955796,20.8415584 Z" id="XMLID_70_" fill="#494949"></path><path d="M47.6642091,10.4207792 L48.4534968,11.7454545 C50.4267161,9.75844156 52.1368396,7.37402597 53.3646205,4.76883117 L52.1806889,4.06233766 C50.9090586,6.62337662 49.3743325,8.78701299 47.6642091,10.4207792 Z" id="XMLID_69_" fill="#494949"></path><path d="M47.3134145,18.5012987 L48.0150036,19.7376623 L48.0588529,19.7818182 L48.1027023,19.7376623 C48.8481407,18.8545455 49.5935791,17.9272727 50.2951682,16.9558442 L50.2951682,28.0831169 L51.5667984,28.0831169 L51.5667984,14.8363636 C52.1368396,13.8207792 52.7068807,12.6727273 53.2330725,11.3922078 L53.2330725,11.3480519 L52.0052916,10.6415584 L52.0052916,10.6857143 C50.7775107,13.6441558 49.2427845,16.2935065 47.3134145,18.5012987 Z" id="XMLID_68_" fill="#494949"></path><path d="M72.0005808,10.0675325 L72.0005808,8.78701299 L66.3440187,8.78701299 C66.8263612,7.28571429 67.3964024,5.56363636 67.5717996,4.10649351 L66.2563201,4.10649351 C65.423183,7.99220779 64.1515528,11.3922078 62.529128,14.0415584 L63.3184157,15.4545455 L63.8884569,14.2623377 C64.1077035,13.8649351 64.2831008,13.5558442 64.4146487,13.2909091 C64.8092926,16.7350649 65.5108817,19.5168831 66.4755667,21.5480519 C65.554731,23.1818182 64.1077035,24.8597403 62.1783335,26.5818182 L62.1344841,26.5818182 L62.8799226,27.8623377 L62.9237719,27.9064935 L62.9676212,27.8623377 C64.9846898,25.9636364 66.387868,24.2857143 67.1333064,22.9168831 C67.9664435,24.4181818 69.413471,26.2285714 71.0358958,27.9506494 L71.0797451,27.9948052 L71.8251835,26.6701299 L71.8251835,26.625974 L71.7813342,26.625974 C70.0273615,24.9038961 68.6241833,23.1376623 67.8348955,21.6363636 C69.281923,18.987013 70.1589094,15.1012987 70.509704,10.0675325 L72.0005808,10.0675325 Z M67.3087037,20.0025974 C66.4755667,17.838961 65.8616762,14.8805195 65.4670323,11.2155844 C65.5985803,10.8181818 65.7739776,10.4207792 65.9493748,10.0675325 L69.3696217,10.0675325 C69.0626765,14.2181818 68.4049367,17.574026 67.3087037,20.0025974 Z" id="XMLID_65_" fill="#494949" fill-rule="nonzero"></path><path d="M125.102105,8.6987013 L125.102105,7.32987013 L114.271324,7.32987013 L114.271324,3.84155844 L112.868146,3.84155844 L112.868146,7.32987013 L102.125063,7.32987013 L102.125063,8.6987013 L112.868146,8.6987013 L112.868146,13.2467532 L112.648899,13.2467532 L105.896104,13.2467532 L105.896104,14.4831169 C105.896104,14.4831169 106.948488,16.9116883 109.140953,19.561039 C110.01794,20.6207792 111.026474,21.7246753 112.341954,22.8285714 C109.886392,24.3298701 106.860789,25.787013 102.607405,26.625974 L103.396693,28.038961 C103.396693,28.038961 108.439364,26.9792208 113.438187,23.7116883 C114.095926,24.1532468 117.209228,26.625974 122.997338,28.038961 C122.997338,28.038961 122.997338,28.038961 122.997338,28.038961 L123.041187,28.038961 L123.611229,26.9792208 C123.611229,26.9792208 122.120352,26.5818182 119.840187,25.6987013 C118.261612,25.0805195 116.288392,24.1532468 114.402872,22.8727273 C117.209228,20.7974026 119.708639,17.7948052 121.199516,13.9532468 L120.059434,13.2909091 L114.227474,13.2909091 L114.227474,8.6987013 L125.102105,8.6987013 Z M119.620941,14.438961 C119.620941,14.438961 118.217762,18.4571429 113.438187,21.9012987 C111.158022,20.1350649 108.790159,17.574026 107.299282,14.438961 L119.620941,14.438961 Z" id="XMLID_35_" fill="#494949" fill-rule="nonzero"></path><path d="M142.554134,26.3168831 C142.291038,26.3168831 142.027942,26.3168831 141.764846,26.3168831 L141.764846,27.6857143 C142.291038,27.6857143 142.685682,27.6857143 142.948778,27.6857143 C144.308107,27.6857143 145.009696,27.3766234 145.623586,26.8025974 C146.193627,26.2285714 146.456723,25.3896104 146.412874,24.2415584 L146.412874,11.3922078 L150.096217,11.3922078 L150.096217,10.0233766 L146.412874,10.0233766 L146.412874,4.10649351 L145.053545,4.10649351 L145.053545,10.0233766 L133.740421,10.0233766 L133.740421,11.3922078 L145.053545,11.3922078 L145.053545,24.2415584 C145.009696,25.6545455 144.13271,26.3168831 142.554134,26.3168831 Z" id="XMLID_34_" fill="#494949"></path><path d="M139.484682,21.7246753 L140.844011,20.9298701 C140.098572,19.4285714 139.133887,17.4415584 137.949956,15.012987 L136.722175,15.7636364 C137.511462,17.3974026 138.432298,19.3844156 139.484682,21.7246753 Z" id="XMLID_33_" fill="#494949"></path></g></g></g></g></svg>
|
||
</div>
|
||
<input type="radio" v-model="paymentGateway" value="WeChatPay" class="hidden-radio">
|
||
<span class="checkmark-circle" v-if="paymentGateway === 'WeChatPay'">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="checkmark-icon">
|
||
<path fill="currentColor" d="M9.55 18l-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"/>
|
||
</svg>
|
||
</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="text-xs text-gray-500 mt-2 mb-4" v-if="$team.pg.currency === 'CNY'">
|
||
使用{{ paymentGateway === 'Alipay' ? '支付宝' : '微信' }}支付，快速便捷，余额将在支付成功后立即到账。
|
||
</div>
|
||
|
||
<BuyPrepaidCreditsAlipay
|
||
v-if="paymentGateway === 'Alipay'"
|
||
:amount="creditsToBuy"
|
||
:minimumAmount="minimumAmount"
|
||
:isOnboarding="isOnboarding"
|
||
@success="onSuccess"
|
||
@cancel="onCancel"
|
||
/>
|
||
|
||
<BuyPrepaidCreditsWeChatPay
|
||
v-if="paymentGateway === 'WeChatPay'"
|
||
:amount="creditsToBuy"
|
||
:minimumAmount="minimumAmount"
|
||
:isOnboarding="isOnboarding"
|
||
@success="onSuccess"
|
||
@cancel="onCancel"
|
||
/>
|
||
</template>
|
||
<script>
|
||
import BuyPrepaidCreditsAlipay from '../BuyPrepaidCreditsAlipay.vue';
|
||
import BuyPrepaidCreditsWeChatPay from '../BuyPrepaidCreditsWeChatPay.vue';
|
||
|
||
export default {
|
||
name: 'BuyPrepaidCreditsForm',
|
||
components: {
|
||
BuyPrepaidCreditsAlipay,
|
||
BuyPrepaidCreditsWeChatPay
|
||
},
|
||
data() {
|
||
return {
|
||
paymentGateway: 'Alipay', // 默认使用支付宝
|
||
creditsToBuy: this.minimumAmount
|
||
};
|
||
},
|
||
props: {
|
||
modelValue: {
|
||
default: false
|
||
},
|
||
minimumAmount: {
|
||
type: Number,
|
||
default: 0
|
||
},
|
||
isOnboarding: {
|
||
type: Boolean,
|
||
default: false
|
||
}
|
||
},
|
||
emits: ['success', 'cancel'],
|
||
methods: {
|
||
onSuccess() {
|
||
this.$emit('success');
|
||
},
|
||
onCancel() {
|
||
this.$emit('cancel');
|
||
}
|
||
},
|
||
computed: {
|
||
totalAmount() {
|
||
let creditsToBuy = this.creditsToBuy || 0;
|
||
if (this.$team.pg.currency === 'CNY') {
|
||
return (
|
||
creditsToBuy +
|
||
creditsToBuy * (this.$team.pg.billing_info.gst_percentage || 0)
|
||
).toFixed(2);
|
||
} else {
|
||
return creditsToBuy;
|
||
}
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
<style scoped>
|
||
.payment-option {
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
flex: 1;
|
||
border: 1px solid #ddd;
|
||
border-radius: 6px;
|
||
padding: 12px;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.payment-option:hover {
|
||
border-color: #ccc;
|
||
background-color: #f9fafb;
|
||
}
|
||
|
||
.payment-option-active,
|
||
.payment-option-active:has(input[value="Alipay"]:checked) {
|
||
border-color: #1677ff;
|
||
border-width: 2px;
|
||
box-shadow: 0 0 0 1px rgba(22, 119, 255, 0.1);
|
||
}
|
||
|
||
.payment-option-active:has(input[value="WeChatPay"]:checked) {
|
||
border-color: #22AC38;
|
||
box-shadow: 0 0 0 1px rgba(34, 172, 56, 0.1);
|
||
}
|
||
|
||
.payment-icon {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: auto;
|
||
width: 90px;
|
||
max-width: 90px;
|
||
min-width: 60px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.alipay-svg, .wechat-svg {
|
||
width: 100%;
|
||
height: auto;
|
||
max-height: 30px;
|
||
}
|
||
|
||
.payment-label {
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.ml-2 {
|
||
margin-left: 8px;
|
||
}
|
||
|
||
.hidden-radio {
|
||
position: absolute;
|
||
opacity: 0;
|
||
width: 0;
|
||
height: 0;
|
||
}
|
||
|
||
.checkmark-circle {
|
||
position: absolute;
|
||
top: 12px;
|
||
right: 12px;
|
||
width: 18px;
|
||
height: 18px;
|
||
border-radius: 50%;
|
||
background-color: #1677ff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: white;
|
||
}
|
||
|
||
.checkmark-icon {
|
||
width: 14px;
|
||
height: 14px;
|
||
}
|
||
|
||
.payment-option-active:has(input[value="WeChatPay"]:checked) .checkmark-circle {
|
||
background-color: #22AC38;
|
||
}
|
||
|
||
/* 响应式设计 */
|
||
@media (max-width: 640px) {
|
||
.payment-options {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.payment-option {
|
||
padding: 10px;
|
||
}
|
||
|
||
.payment-icon {
|
||
width: 70px;
|
||
min-width: 50px;
|
||
}
|
||
|
||
.alipay-svg, .wechat-svg {
|
||
max-height: 24px;
|
||
}
|
||
|
||
.checkmark-circle {
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
right: 10px;
|
||
width: 16px;
|
||
height: 16px;
|
||
}
|
||
|
||
.checkmark-icon {
|
||
width: 12px;
|
||
height: 12px;
|
||
}
|
||
}
|
||
</style> |