|
|
@@ -1,22 +1,10 @@
|
|
|
<template>
|
|
|
<view class="row">
|
|
|
- <uni-collapse accordion v-model="accordionVal" @change="change">
|
|
|
- <uni-collapse-item class="" v-for="item in list" :key="item.id" >
|
|
|
- <template v-slot:title>
|
|
|
- <view class="item-title">
|
|
|
- <view>{{item.name}}</view>
|
|
|
- <button @click="handleClick(item)" class="btn btn-info item-btn waves-effect waves-light">
|
|
|
-<!-- <i class="fi fi-rs-check"></i> -->
|
|
|
- <text v-t="'Btn.item13'" /></button>
|
|
|
- </view>
|
|
|
-
|
|
|
- </template>
|
|
|
-
|
|
|
- <view class="col-lg-3 col-sm-12 " :class="{ disabled: item.disabled }">
|
|
|
- <view class="">
|
|
|
-<!-- <view class="card-header d-flex justify-content-between align-items-center">-->
|
|
|
-<!-- <h4 class="card-title mb-0">{{ item.name }}</h4>-->
|
|
|
-<!-- </view>-->
|
|
|
+ <view class="col-lg-3 col-sm-12 cursor-pointer " v-for="item in list" :key="item.id" :class="{ disabled: item.disabled }" @click="handleClick(item)">
|
|
|
+ <view class="card hover">
|
|
|
+ <view class="card-header d-flex justify-content-between align-items-center">
|
|
|
+ <h4 class="card-title mb-0">{{ item.name }}</h4>
|
|
|
+ </view>
|
|
|
<view class="card-body">
|
|
|
<image v-if="item.icon" class="img-fluid mb-3 square-box" :src="imgUrl + item.icon" mode="aspectFit" />
|
|
|
<!-- <image src="/static/images/vu/pay-3.jpg" class="img-fluid mb-3" mode="widthFix" /> -->
|
|
|
@@ -40,11 +28,11 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="mb-3"> <span class="mb-2" v-t="'Label.ProcessingTime'" />
|
|
|
- <p class="text-dark fw-semibold mt-2 mb-0">{{ item.fundingTime || '--' }}</p>
|
|
|
+ <view class="mb-3"> <span class="mb-1" v-t="'Label.ProcessingTime'" />
|
|
|
+ <p class="text-dark fw-semibold mt-1 mb-0">{{ item.fundingTime || '--' }}</p>
|
|
|
</view>
|
|
|
<view class="mb-3"> <span class="mb-2" v-t="'Label.Fee'" />
|
|
|
- <p class="text-dark fw-semibold mt-2 mb-0">
|
|
|
+ <p class="text-dark fw-semibold mt-1 mb-0">
|
|
|
<text v-if="item.feeType == 1">{{ item.free != null ? item.free + '%' : '-' }}</text>
|
|
|
<text v-else-if="item.feeType == 2">${{ item.feeAmount != null ? item.feeAmount : '0'
|
|
|
}}</text>
|
|
|
@@ -52,14 +40,12 @@
|
|
|
</p>
|
|
|
</view>
|
|
|
<view class="mb-3"> <span class="mb-1" v-t="'vu.item8'" />
|
|
|
- <p class="text-dark fw-semibold mt-2 mb-0">{{ item.minAmount }}-{{ item.maxAmount }} {{ item.currency }}</p>
|
|
|
+ <p class="text-dark fw-semibold mt-1 mb-0">{{ item.minAmount }}-{{ item.maxAmount }} {{ item.currency }}</p>
|
|
|
</view>
|
|
|
-
|
|
|
+<!-- <button @click="handleClick(item)" class="btn btn-dark w-100 waves-effect waves-light"><i class="fi fi-rs-check"></i> <text v-t="'Btn.item13'" /></button>-->
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- </uni-collapse-item>
|
|
|
- </uni-collapse>
|
|
|
</view>
|
|
|
<!-- <view class="payment-list">
|
|
|
<view v-for="item in list" :key="item.id" class="payment-card" :class="{ disabled: item.disabled }"
|
|
|
@@ -114,285 +100,265 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import { defineProps, defineEmits,ref } from 'vue'
|
|
|
-import Config from '@/config/index'
|
|
|
-const { Code, Host05, Host80 } = Config
|
|
|
-const imgUrl = Host05
|
|
|
-// 定义 props，接收支付方式列表
|
|
|
-const props = defineProps({
|
|
|
- list: {
|
|
|
- type: Array,
|
|
|
- default: () => []
|
|
|
+ import { defineProps, defineEmits } from 'vue'
|
|
|
+ import Config from '@/config/index'
|
|
|
+ const { Code, Host05, Host80 } = Config
|
|
|
+ const imgUrl = Host05
|
|
|
+ // 定义 props，接收支付方式列表
|
|
|
+ const props = defineProps({
|
|
|
+ list: {
|
|
|
+ type: Array,
|
|
|
+ default: () => []
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ // 定义事件，点击卡片时触发
|
|
|
+ const emit = defineEmits(['select'])
|
|
|
+
|
|
|
+ const handleClick = (item) => {
|
|
|
+ if (!item.disabled) {
|
|
|
+ emit('select', item)
|
|
|
+ }
|
|
|
}
|
|
|
-})
|
|
|
+</script>
|
|
|
|
|
|
-const accordionVal = ref()
|
|
|
-const change = (val)=>{
|
|
|
+<style lang="scss" scoped>
|
|
|
+ @import "@/uni.scss";
|
|
|
|
|
|
- console.log(val)
|
|
|
-}
|
|
|
+ .hover:hover{
|
|
|
+ border-color: var(--bs-secondary);
|
|
|
+ }
|
|
|
+ .img-bg{
|
|
|
+ padding: 0 px2rpx(10);
|
|
|
+ border-radius: px2rpx(10);
|
|
|
+ box-sizing: border-box;
|
|
|
+ background-color: rgba(243, 244, 246, 0.6);
|
|
|
+ }
|
|
|
+ .row {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ align-items: stretch;
|
|
|
+ }
|
|
|
|
|
|
-// 定义事件，点击卡片时触发
|
|
|
-const emit = defineEmits(['select'])
|
|
|
+ .card {
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
|
|
|
-const handleClick = (item) => {
|
|
|
- if (!item.disabled) {
|
|
|
- emit('select', item)
|
|
|
+ .card-body {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
}
|
|
|
-}
|
|
|
-</script>
|
|
|
|
|
|
-<style lang="scss" scoped>
|
|
|
-@import "@/uni.scss";
|
|
|
-
|
|
|
-.item-title{
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- margin: px2rpx(5) 0;
|
|
|
- font-size: px2rpx(16);
|
|
|
- color: var(--bs-emphasis-color);
|
|
|
-}
|
|
|
-.item-btn{
|
|
|
- width: px2rpx(120);
|
|
|
- margin: 0;
|
|
|
- height: px2rpx(28);
|
|
|
- line-height: px2rpx(28);
|
|
|
- padding-top: 0;
|
|
|
- padding-bottom: 0;
|
|
|
-}
|
|
|
-
|
|
|
-.row {
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- align-items: stretch;
|
|
|
-}
|
|
|
-
|
|
|
-.card {
|
|
|
- height: 100%;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
-}
|
|
|
-
|
|
|
-.card-body {
|
|
|
- flex: 1;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
-}
|
|
|
-
|
|
|
-.square-box {
|
|
|
- height: px2rpx(64) !important;
|
|
|
-}
|
|
|
-
|
|
|
-.square-img {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
-}
|
|
|
-
|
|
|
-/* 确保按钮始终在底部 */
|
|
|
-.card-body .btn {
|
|
|
- margin-top: auto;
|
|
|
-}
|
|
|
-
|
|
|
-/* 可选：让卡片内的所有内容区域高度一致 */
|
|
|
-.card-body>*:not(.btn) {
|
|
|
- flex-shrink: 0;
|
|
|
-}
|
|
|
-
|
|
|
-.payment-list {
|
|
|
- display: grid;
|
|
|
- grid-row-gap: px2rpx(16);
|
|
|
- grid-column-gap: px2rpx(24);
|
|
|
- grid-template-columns: repeat(auto-fill, minmax(px2rpx(480), 1fr));
|
|
|
-}
|
|
|
-
|
|
|
-.payment-card {
|
|
|
- background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important;
|
|
|
- border-radius: px2rpx(12);
|
|
|
- padding: px2rpx(16);
|
|
|
- display: flex;
|
|
|
- align-items: flex-start;
|
|
|
- border: 1px solid rgba(14, 15, 12, 0.08);
|
|
|
- transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
|
- cursor: pointer;
|
|
|
- box-sizing: border-box;
|
|
|
- gap: px2rpx(16);
|
|
|
-
|
|
|
- &:hover {
|
|
|
- transform: translateY(px2rpx(-2));
|
|
|
- background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important;
|
|
|
- box-shadow: 0 px2rpx(8) px2rpx(20) rgba(0, 0, 0, 0.06);
|
|
|
- border-color: var(--color-primary, #007aff);
|
|
|
+ .square-box {
|
|
|
+ height: px2rpx(64) !important;
|
|
|
}
|
|
|
|
|
|
- &.disabled {
|
|
|
- opacity: 0.5;
|
|
|
- cursor: not-allowed;
|
|
|
- filter: grayscale(100%);
|
|
|
+ .square-img {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
}
|
|
|
|
|
|
- .icon-wrapper {
|
|
|
- width: px2rpx(120);
|
|
|
- height: px2rpx(120);
|
|
|
+ /* 确保按钮始终在底部 */
|
|
|
+ .card-body .btn {
|
|
|
+ margin-top: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 可选：让卡片内的所有内容区域高度一致 */
|
|
|
+ .card-body>*:not(.btn) {
|
|
|
flex-shrink: 0;
|
|
|
- border-radius: px2rpx(8);
|
|
|
- background-color: var(--color-zinc-50, #f9f9f9);
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- overflow: hidden;
|
|
|
+ }
|
|
|
|
|
|
- .icon {
|
|
|
- width: 80%;
|
|
|
- }
|
|
|
+ .payment-list {
|
|
|
+ display: grid;
|
|
|
+ grid-row-gap: px2rpx(16);
|
|
|
+ grid-column-gap: px2rpx(24);
|
|
|
+ grid-template-columns: repeat(auto-fill, minmax(px2rpx(480), 1fr));
|
|
|
}
|
|
|
|
|
|
- .content {
|
|
|
- flex: 1;
|
|
|
- min-width: 0; // 防止文本溢出
|
|
|
+ .payment-card {
|
|
|
+ background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important;
|
|
|
+ border-radius: px2rpx(12);
|
|
|
+ padding: px2rpx(16);
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+ border: 1px solid rgba(14, 15, 12, 0.08);
|
|
|
+ transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
|
+ cursor: pointer;
|
|
|
+ box-sizing: border-box;
|
|
|
+ gap: px2rpx(16);
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ transform: translateY(px2rpx(-2));
|
|
|
+ background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important;
|
|
|
+ box-shadow: 0 px2rpx(8) px2rpx(20) rgba(0, 0, 0, 0.06);
|
|
|
+ border-color: var(--color-primary, #007aff);
|
|
|
+ }
|
|
|
+
|
|
|
+ &.disabled {
|
|
|
+ opacity: 0.5;
|
|
|
+ cursor: not-allowed;
|
|
|
+ filter: grayscale(100%);
|
|
|
+ }
|
|
|
|
|
|
- .header {
|
|
|
- margin-bottom: px2rpx(12);
|
|
|
+ .icon-wrapper {
|
|
|
+ width: px2rpx(120);
|
|
|
+ height: px2rpx(120);
|
|
|
+ flex-shrink: 0;
|
|
|
+ border-radius: px2rpx(8);
|
|
|
+ background-color: var(--color-zinc-50, #f9f9f9);
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
-
|
|
|
- .title {
|
|
|
- font-size: px2rpx(16);
|
|
|
- font-weight: 700;
|
|
|
- color: var(--color-navy-900, #1e2a3a);
|
|
|
- word-break: break-all;
|
|
|
- flex: 1;
|
|
|
- margin-right: px2rpx(12);
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
+ justify-content: center;
|
|
|
+ overflow: hidden;
|
|
|
|
|
|
+ .icon {
|
|
|
+ width: 80%;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- .info-list {
|
|
|
- .info-item {
|
|
|
+ .content {
|
|
|
+ flex: 1;
|
|
|
+ min-width: 0; // 防止文本溢出
|
|
|
+
|
|
|
+ .header {
|
|
|
+ margin-bottom: px2rpx(12);
|
|
|
display: flex;
|
|
|
- justify-content: space-between;
|
|
|
align-items: center;
|
|
|
- margin-bottom: px2rpx(8);
|
|
|
- font-size: px2rpx(13);
|
|
|
- line-height: 1.4;
|
|
|
-
|
|
|
- .info-label {
|
|
|
- color: var(--color-zinc-500, #7f8c8d);
|
|
|
- margin-right: px2rpx(8);
|
|
|
- white-space: nowrap;
|
|
|
- }
|
|
|
+ justify-content: space-between;
|
|
|
|
|
|
- .info-value {
|
|
|
+ .title {
|
|
|
+ font-size: px2rpx(16);
|
|
|
+ font-weight: 700;
|
|
|
color: var(--color-navy-900, #1e2a3a);
|
|
|
- font-weight: 600;
|
|
|
- text-align: right;
|
|
|
word-break: break-all;
|
|
|
+ flex: 1;
|
|
|
+ margin-right: px2rpx(12);
|
|
|
}
|
|
|
|
|
|
- &:last-child {
|
|
|
- margin-bottom: 0;
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .info-list {
|
|
|
+ .info-item {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: px2rpx(8);
|
|
|
+ font-size: px2rpx(13);
|
|
|
+ line-height: 1.4;
|
|
|
+
|
|
|
+ .info-label {
|
|
|
+ color: var(--color-zinc-500, #7f8c8d);
|
|
|
+ margin-right: px2rpx(8);
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info-value {
|
|
|
+ color: var(--color-navy-900, #1e2a3a);
|
|
|
+ font-weight: 600;
|
|
|
+ text-align: right;
|
|
|
+ word-break: break-all;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
-
|
|
|
-.pay-box {
|
|
|
- width: px2rpx(60 * 3 + 8 * 2);
|
|
|
- flex-shrink: 0;
|
|
|
- overflow: hidden;
|
|
|
- margin: px2rpx(12) 0;
|
|
|
|
|
|
- .carousel-box {
|
|
|
- width: 100%;
|
|
|
+ .pay-box {
|
|
|
+ width: px2rpx(60 * 3 + 8 * 2);
|
|
|
+ flex-shrink: 0;
|
|
|
overflow: hidden;
|
|
|
- }
|
|
|
+ margin: px2rpx(12) 0;
|
|
|
|
|
|
- .carousel-track {
|
|
|
- display: flex;
|
|
|
- gap: px2rpx(8);
|
|
|
- width: max-content;
|
|
|
- }
|
|
|
+ .carousel-box {
|
|
|
+ width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
|
|
|
- // 只有超过3个才加动画
|
|
|
- .carousel-animate {
|
|
|
- animation: carousel 8s linear infinite;
|
|
|
- }
|
|
|
+ .carousel-track {
|
|
|
+ display: flex;
|
|
|
+ gap: px2rpx(8);
|
|
|
+ width: max-content;
|
|
|
+ }
|
|
|
|
|
|
- @keyframes carousel {
|
|
|
- 0% {
|
|
|
- transform: translateX(0);
|
|
|
+ // 只有超过3个才加动画
|
|
|
+ .carousel-animate {
|
|
|
+ animation: carousel 8s linear infinite;
|
|
|
}
|
|
|
|
|
|
- 100% {
|
|
|
- transform: translateX(-50%);
|
|
|
+ @keyframes carousel {
|
|
|
+ 0% {
|
|
|
+ transform: translateX(0);
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ transform: translateX(-50%);
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .pay-icon-container {
|
|
|
- width: px2rpx(60);
|
|
|
- height: px2rpx(60);
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- // background-color: var(--color-zinc-50, #f9f9f9);
|
|
|
- // border-radius: px2rpx(6);
|
|
|
- // border: 1px solid var(--color-zinc-100, #f3f4f6);
|
|
|
- flex-shrink: 0;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
+ .pay-icon-container {
|
|
|
+ width: px2rpx(60);
|
|
|
+ height: px2rpx(60);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ // background-color: var(--color-zinc-50, #f9f9f9);
|
|
|
+ // border-radius: px2rpx(6);
|
|
|
+ // border: 1px solid var(--color-zinc-100, #f3f4f6);
|
|
|
+ flex-shrink: 0;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
|
|
|
- .pay-icon {
|
|
|
- width: px2rpx(60);
|
|
|
- height: px2rpx(60);
|
|
|
- object-fit: contain;
|
|
|
+ .pay-icon {
|
|
|
+ width: px2rpx(60);
|
|
|
+ height: px2rpx(60);
|
|
|
+ object-fit: contain;
|
|
|
+ }
|
|
|
}
|
|
|
-}
|
|
|
|
|
|
-/* 移动端适配 */
|
|
|
-@media screen and (max-width: 768px) {
|
|
|
- .payment-list {
|
|
|
- grid-template-columns: 1fr;
|
|
|
- grid-row-gap: px2rpx(12);
|
|
|
- }
|
|
|
+ /* 移动端适配 */
|
|
|
+ @media screen and (max-width: 768px) {
|
|
|
+ .payment-list {
|
|
|
+ grid-template-columns: 1fr;
|
|
|
+ grid-row-gap: px2rpx(12);
|
|
|
+ }
|
|
|
|
|
|
- .payment-card {
|
|
|
- padding: px2rpx(12);
|
|
|
- gap: px2rpx(12);
|
|
|
+ .payment-card {
|
|
|
+ padding: px2rpx(12);
|
|
|
+ gap: px2rpx(12);
|
|
|
|
|
|
- .icon-wrapper {
|
|
|
- width: px2rpx(90);
|
|
|
- height: px2rpx(90);
|
|
|
- }
|
|
|
+ .icon-wrapper {
|
|
|
+ width: px2rpx(90);
|
|
|
+ height: px2rpx(90);
|
|
|
+ }
|
|
|
|
|
|
- .content {
|
|
|
- .header {
|
|
|
- margin-bottom: px2rpx(8);
|
|
|
+ .content {
|
|
|
+ .header {
|
|
|
+ margin-bottom: px2rpx(8);
|
|
|
|
|
|
- .title {
|
|
|
- font-size: px2rpx(15);
|
|
|
+ .title {
|
|
|
+ font-size: px2rpx(15);
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .info-list {
|
|
|
- .info-item {
|
|
|
- margin-bottom: px2rpx(4);
|
|
|
- font-size: px2rpx(12);
|
|
|
+ .info-list {
|
|
|
+ .info-item {
|
|
|
+ margin-bottom: px2rpx(4);
|
|
|
+ font-size: px2rpx(12);
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
-.img-bg{
|
|
|
- padding: 0 px2rpx(10);
|
|
|
- border-radius: px2rpx(10);
|
|
|
- box-sizing: border-box;
|
|
|
- background-color: rgba(243, 244, 246, 0.6);
|
|
|
-}
|
|
|
</style>
|
ljc