new UI and handle cashing

2026-06-16 19:47:28 +03:30
parent e174ae28c5
commit 6e5ea0319f
41 changed files with 2936 additions and 641 deletions
@@ -0,0 +1,167 @@
+<template>
+  <BasicModal
+    v-model:visible="localVisible"
+    custom-footer
+    :closable="false"
+    wrap-class-name="deposit-guide-modal-wrap"
+    width="min(92vw, 380px)"
+  >
+    <div class="deposit-guide">
+      <div class="deposit-guide__icon-wrap" aria-hidden="true">
+        <BasicIcon icon="vuesax-linear:empty-wallet-add" size="34" color="#16a34a" />
+      </div>
+
+      <h2 class="deposit-guide__title">{{ title }}</h2>
+
+      <div class="deposit-guide__body">
+        <slot />
+      </div>
+
+      <a
+        v-if="supportLink"
+        class="deposit-guide__support-link"
+        :href="supportLink"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <span class="deposit-guide__support-btn">
+          <BasicIcon icon="vuesax-linear:headphone" size="18" color="#16a34a" />
+          <span>پیام به پشتیبانی</span>
+        </span>
+      </a>
+
+      <a
+        v-if="smsLink"
+        class="deposit-guide__support-link"
+        :class="{ 'deposit-guide__support-link--spaced': supportLink }"
+        :href="smsLink"
+      >
+        <span class="deposit-guide__support-btn">
+          <BasicIcon icon="vuesax-linear:direct-inbox" size="18" color="#16a34a" />
+          <span>پیام به پشتیبانی (sms)</span>
+        </span>
+      </a>
+    </div>
+
+    <template #footer>
+      <BasicButton type="primary" class="deposit-guide__confirm w-full" @click="localVisible = false">
+        متوجه شدم
+      </BasicButton>
+    </template>
+  </BasicModal>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import BasicButton from '@/components/BasicPacks/BasicButton.vue'
+import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
+import BasicModal from '@/components/BasicPacks/BasicModal.vue'
+
+const props = withDefaults(
+  defineProps<{
+    visible: boolean
+    title?: string
+    supportLink?: string
+    smsLink?: string
+  }>(),
+  {
+    title: 'راهنمای شارژ حساب',
+    supportLink: '',
+    smsLink: '',
+  },
+)
+
+const emit = defineEmits<{
+  'update:visible': [value: boolean]
+}>()
+
+const localVisible = computed({
+  get: () => props.visible,
+  set: (value: boolean) => emit('update:visible', value),
+})
+</script>
+
+<style scoped lang="less">
+.deposit-guide {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  padding: 0.25rem 0.5rem 0.5rem;
+}
+
+.deposit-guide__icon-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 4.5rem;
+  height: 4.5rem;
+  border-radius: 9999px;
+  background: #ecfdf3;
+  margin-bottom: 1rem;
+}
+
+.deposit-guide__title {
+  margin: 0 0 0.75rem;
+  font-size: 1.05rem;
+  font-weight: 700;
+  color: #111827;
+}
+
+.deposit-guide__body {
+  width: 100%;
+  font-size: 0.92rem;
+  line-height: 1.9;
+  color: #4b5563;
+}
+
+.deposit-guide__support-link {
+  display: block;
+  width: 100%;
+  margin-top: 1.25rem;
+  text-decoration: none;
+
+  &--spaced {
+    margin-top: 0.65rem;
+  }
+}
+
+.deposit-guide__support-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  width: 100%;
+  min-height: 2.75rem;
+  padding: 0.65rem 1rem;
+  border: 1px solid #bbf7d0;
+  border-radius: 0.75rem;
+  background: #f0fdf4;
+  color: #15803d;
+  font-size: 0.92rem;
+  font-weight: 600;
+}
+
+.deposit-guide__confirm {
+  min-height: 2.75rem;
+  font-weight: 700;
+}
+</style>
+
+<style lang="less">
+.deposit-guide-modal-wrap {
+  .ant-modal-content {
+    border-radius: 1rem;
+    padding-top: 1rem;
+  }
+
+  .ant-modal-header {
+    display: none;
+  }
+
+  .ant-modal-footer {
+    border-top: none;
+    padding-top: 0;
+  }
+}
+</style>