|
@@ -32,8 +32,8 @@
|
|
|
<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>
|
|
|
+ <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>
|
|
@@ -44,7 +44,6 @@
|
|
|
</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">
|
|
@@ -52,18 +51,12 @@
|
|
|
<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>
|
|
|
+ <svg-icon class="ml-1" :name="k.icon" :size="k.size"></svg-icon>
|
|
|
</v-chip>
|
|
|
</v-chip-group>
|
|
|
</div>
|
|
@@ -109,8 +102,8 @@ const list = ref([
|
|
|
|
|
|
const payment = ref('wx_native')
|
|
|
const paymentList = [
|
|
|
- { label: '微信扫码', color: 'success', value: 'wx_native', isWeChat: true },
|
|
|
- { label: '支付宝扫码', color: '#3383c6', value: 'alipay_qr' }
|
|
|
+ { label: '微信扫码', icon: 'weChat', size: 21, color: 'success', value: 'wx_native' },
|
|
|
+ { label: '支付宝扫码', icon: 'alipay', size: 23, color: '#3383c6', value: 'alipay_qr' }
|
|
|
]
|
|
|
|
|
|
const handleCustomEnter = (e) => {
|