boursecu/boursecu_user
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix bugs of UI of withdraw-page

Browse Source
This commit is contained in:
safavimohadeseh78
2026-05-30 12:08:18 +03:30
parent 7197decbe7
commit a7559879fb
7 changed files with 84 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.vue
+9
View File
@@ -52,6 +52,8 @@
<van-dialog
v-model:show="versionDialog"
class="updateButton"
teleport="body"
:z-index="5300"
confirm-button-text="به روزرسانی کنید"
show-confirm-button
@confirm="update()"
@@ -171,6 +173,13 @@ function update() {
--app-nav-height: 80px;
--app-bottom-chrome-height: calc(var(--app-nav-height) + var(--app-credit-footer-offset));
--app-add-card-height: 88px;
/* بخشی از کارت کیف‌پول زیر نوار «افزودن کارت جدید» دیده می‌شود */
--wallet-card-dock-overlap: 52px;
--app-z-nav: 5000;
--app-z-wallet-dock: 4490;
--app-z-wallet-add-bar: 4510;
--app-z-action-sheet: 5200;
--app-z-dialog: 5300;
}
.app-credit-footer {
src/components/BasicPacks/BasicActionSheet.vue
+4 -1
View File
@@ -16,7 +16,7 @@
</style>-->
<template>
<VanActionSheet teleport="body">
<VanActionSheet teleport="body" :z-index="zIndex">
<div class="justify-center cursor-pointer flex mt-1" @click="$emit('update:show', false)">
<span class="rounded-sm w-12 border-t-2 border-t-solid border-t-gray-500 mt-2"></span>
</div>
@@ -60,6 +60,8 @@ interface Props {
showCancel?: boolean
showOk?: boolean
okText?: string
/** بالاتر از wallet-card-slider (4490) و منوی پایین (5000) */
zIndex?: number
}
const props = withDefaults(defineProps<Props>(), {
@@ -68,6 +70,7 @@ const props = withDefaults(defineProps<Props>(), {
showCancel: true,
showOk: true,
okText: 'ثبت',
zIndex: 5200, // --app-z-action-sheet
})
</script>
src/components/DialogVant.vue
+46 -58
View File
@@ -1,75 +1,67 @@
<template>
<!-- <div v-if="modelValue">-->
<van-dialog class="dialog">
<van-dialog
v-model:show="show"
class="dialog"
teleport="body"
:z-index="zIndex"
v-bind="$attrs"
>
<div class="my-4">
<div class="w-full flex justify-center">
<slot name="img">{{ text2 }}</slot>
</div>
<div class="w-full flex justify-center text-[18px] font-semibold">
<slot name="title">{{ text1 }}</slot>
</div>
<div class="grid grid-cols-2 border-t border-solid border-[#E5E7EB] pt-4 mx-2 mt-6 font-semibold text-[15px]">
<div
class="grid grid-cols-2 border-t border-solid border-[#E5E7EB] pt-4 mx-2 mt-6 font-semibold text-[15px]"
>
<slot name="button">{{ text3 }}</slot>
</div>
</div>
<!-- <div class="w-full mt-6 text-white ">-->
<!-- <div class="w-full flex mb-[10px] ">-->
<!-- <span class="text-lg flex-1">-->
<!-- </span>-->
<!-- </div>-->
<!-- <div class="flex justify-start mb-6 mt-8" style="font-weight:700;">-->
<!-- <slot name="button">{{text2}}</slot>-->
<!-- </div>-->
<!-- </div>-->
</van-dialog>
<!-- <van-dialog style="background-color: #2b3f6e" show-cancel-button cancelButtonText="بیخیال" confirmButtonText="بله" cancelButtonColor="">-->
<!-- <div class="w-full mt-6 text-white ">-->
<!-- <div class="w-full flex mb-[10px] ">-->
<!-- <Icon icon="vuesax-linear:info-circle" class="mx-4" size="25"/>-->
<!-- <span class="text-lg flex-1">-->
<!-- <slot name="title">{{text1}}</slot>-->
<!-- </span>-->
<!-- </div>-->
<!-- <div class="flex justify-start mb-6 mt-8" style="font-weight:700;">-->
<!-- <slot name="button">{{text2}}</slot>-->
<!-- </div>-->
<!-- </div>-->
<!-- </van-dialog>-->
<!-- </div>-->
</template>
<script lang="ts" setup>
import { computed, watch } from 'vue'
// import { Dialog as VanDialog} from "vant";
import {ref, watch} from 'vue';
defineOptions({ inheritAttrs: false })
const show = ref(true);
const props = withDefaults(defineProps<{
// modelValue: boolean,
timeOut: number,
text1?: string,
text2?: string,
text3?: string
// top?: string,
const props = withDefaults(
defineProps<{
show?: boolean
timeOut?: number
text1?: string
text2?: string
text3?: string
zIndex?: number
}>(),
{
show: false,
timeOut: 3000,
zIndex: 5300,
}
)
}>(), {})
const emit = defineEmits<{
(e: 'update:modelValue', value: boolean): void
(e: 'update:show', value: boolean): void
}>()
watch(() => props.modelValue, (value) => {
if (props.timeOut !== -1) showNotify()
const show = computed({
get: () => props.show,
set: (value: boolean) => emit('update:show', value),
})
const showNotify = () => {
console.log('notify', show.value)
setTimeout(() => {
emit('update:modelValue', false)
}, props.timeOut);
};
watch(
() => props.show,
(value) => {
if (value && props.timeOut !== -1) {
setTimeout(() => {
emit('update:show', false)
}, props.timeOut)
}
}
)
</script>
<style lang="less">
@@ -81,17 +73,13 @@ const showNotify = () => {
animation: notify-in 0.2s reverse;
}
.dialog .van-dialog__confirm, .van-dialog__cancel {
.dialog .van-dialog__confirm,
.van-dialog__cancel {
display: none !important;
}
.van-dialog__confirm, .van-dialog__cancel {
//background-color: ;
}
.dialog .van-dialog__confirm .van-button__text {
color: #1C2D56;
color: #1c2d56;
font-weight: 600;
font-size: 15px;
}
src/views/base/wallet/components/UISlider/CardItem.vue
+20 -49
View File
@@ -89,30 +89,28 @@ const props = defineProps<Prop>()
const emits = defineEmits(['update:sliderIndex', 'cardDeleted'])
function findPositionStyle(pos: number) {
// console.log(localValue.value)
// console.log(pos,index)
let debug
const dist = Math.abs(props.sliderIndex - pos)
const base = `position: absolute; left: 0; right: 0; margin-inline: auto; background-color: ${props.color};`
if (pos === props.sliderIndex) {
debug = `width: 100%; z-index: 100; opacity: 1;/* margin-top: -160px;*/ top: 20%; position: absolute; background-color: ${props.color};`
} /*if (pos > index.value)*/ else {
// debug = `w-[${100 - Math.abs(index.value-pos) * 2}%] z-${100 - Math.abs(index.value-pos)}`
debug = `width: ${100 - Math.abs(props.sliderIndex - pos) * 10}%;
z-index: ${100 - Math.abs(props.sliderIndex - pos)};
position: absolute;
top : ${
pos > props.sliderIndex
? checkTopLimit(topDetail(true, pos) as number)
? 100
: 20 +
Math.abs((props.sliderIndex - pos) * (18 - Math.abs((props.sliderIndex - pos) * 4)))
: checkTopLimit(topDetail(false, pos) as number)
? 0
: 20 - Math.abs((props.sliderIndex - pos) * (18 - Math.abs((props.sliderIndex - pos) * 4)))
}%;
background-color: ${props.color};`
return `${base} width: 100%; z-index: 100; opacity: 1; bottom: 0; top: auto;`
}
console.log(debug, topDetail(true, pos))
return debug
const width = 100 - dist * 10
const zIndex = 100 - dist
const step = Math.abs(
(props.sliderIndex - pos) * (18 - Math.abs((props.sliderIndex - pos) * 4))
)
// کارت‌های بالاتر در پشته (index کمتر) کمی بالاتر از کارت فعال دیده می‌شوند
const bottom =
pos < props.sliderIndex
? `${Math.min(step, 36)}%`
: pos > props.sliderIndex
? '0'
: '0'
return `${base} width: ${width}%; z-index: ${zIndex}; opacity: 1; bottom: ${bottom}; top: auto;`
}
async function confirmDeleteCard() {
@@ -164,33 +162,6 @@ function findPositionStyle(pos: number) {
* /!*checkTopLimit(topDetail(false, pos) as number) ? 0 :*!/ topDetail(false, pos)
*/
function topDetail(isAfterIndex: boolean, pos: number) {
/* console.log((20 - Math.abs((props.sliderIndex - pos) * (24 - (Math.abs((props.sliderIndex - pos) * 4))))), pos)
console.log(Math.abs((props.sliderIndex - pos)) * (24 - (Math.abs((props.sliderIndex - pos) * 4))))*/
console.log(
20 - Math.abs((props.sliderIndex - pos) * (24 - Math.abs((props.sliderIndex - pos) * 4)))
)
/* if (isAfterIndex) console.log(20 + Math.abs(props.sliderIndex - pos))
else console.log(20 - Math.abs(props.sliderIndex - pos))*/
if (isAfterIndex)
return 20 + Math.abs((props.sliderIndex - pos) * (18 - Math.abs((props.sliderIndex - pos) * 4)))
else
return 20 - Math.abs((props.sliderIndex - pos) * (18 - Math.abs((props.sliderIndex - pos) * 4)))
}
/*
function topDetail(isAfterIndex: boolean, pos: number) {
console.log(pos, isAfterIndex, (20 + Math.abs((props.sliderIndex - pos) * (24 - (Math.abs((props.sliderIndex - pos) * 4))))))
if (isAfterIndex) return (20 + Math.abs((props.sliderIndex - pos) * (24 - (Math.abs((props.sliderIndex - pos) * 4)))))
else return (20 - Math.abs((props.sliderIndex - pos) * (24 - (Math.abs((props.sliderIndex - pos) * 4))))) < 0 //12*64
}
*/
function checkTopLimit(val: number) {
return val > 100 || val < 0
}
</script>
<style lang="sass" scoped>
src/views/base/wallet/components/UISlider/index.vue
+2 -2
View File
@@ -1,12 +1,12 @@
<template>
<div ref="container" class=" h-[38vh] flex items-center">
<div ref="container" class="h-[28vh] flex items-end">
<div ref="el" class="w-full flex flex-col relative h-full test">
<CardItem v-for="(item,i) in props?.items" :key="i" v-model:sliderIndex="index" :card-number="item?.cart_number"
:color="colors[i%3]"
:self-index="i" :shaba="item?.shaba_number" :title="item?.bank_name" :active="item.sts === 2" :id="item?.id"
@cardDeleted="handleCardDeleted"
/>
<div class="absolute bottom-15vh right-0 left-0 z-100 flex justify-center items-center opacity-70">
<div class="absolute bottom-1 right-0 left-0 z-100 flex justify-center items-center opacity-70 pointer-events-none">
<div class="flex gap-1 bg-gray-500 px-2 py-1 rounded-lg">
<Transition name="slide-up" mode="out-in" v-for="i in items.length" :key="i">
<div v-if="i - 1 === index" class="w-2 h-2 rounded-full bg-primary"/>
src/views/base/wallet/index.vue
+1 -1
View File
@@ -130,7 +130,7 @@
<Teleport to="body">
<CardSlider
v-if="!isDeposit && cardItems.length > 0"
v-if="!isDeposit && cardItems.length > 0 && !showAddCard"
v-model:id="form.card_id"
:items="cardItems"
class="card-slider-wrap wallet-card-slider"
uno.config.ts
+2 -2
View File
@@ -8,9 +8,9 @@ export default defineConfig({
shortcuts: [
['wallet-dock-width', 'fixed inset-x-0 w-full max-w-[426px] mx-auto left-0 right-0'],
/* z-index زیر منو (5000)؛ fixed تا با اسکرول جابه‌جا نشود */
['app-dock-add-bar', 'wallet-dock-width !fixed bottom-[var(--app-bottom-chrome-height)] z-[4500] h-[var(--app-add-card-height)] flex items-center justify-center gap-1 rounded-t-3xl bg-[#FBFBFC] shadow-[0_1px_26px_11px_rgba(0,0,0,0.1)] cursor-pointer'],
['app-dock-add-bar', 'wallet-dock-width !fixed bottom-[var(--app-bottom-chrome-height)] z-[var(--app-z-wallet-add-bar)] h-[var(--app-add-card-height)] flex items-center justify-center gap-1 rounded-t-3xl bg-[#FBFBFC] shadow-[0_1px_26px_11px_rgba(0,0,0,0.1)] cursor-pointer'],
['wallet-add-card-bar', 'app-dock-add-bar'],
['wallet-card-slider', 'wallet-dock-width !fixed bottom-[calc(var(--app-bottom-chrome-height)+var(--app-add-card-height))] z-[4500] px-3 touch-none'],
['wallet-card-slider', 'wallet-dock-width !fixed bottom-[calc(var(--app-bottom-chrome-height)+var(--app-add-card-height)-var(--wallet-card-dock-overlap))] z-[var(--app-z-wallet-dock)] px-3 touch-none flex flex-col justify-end overflow-visible'],
],
theme: {
colors: {