first commit

2026-05-13 01:43:05 +03:30
commit d2a577f254
297 changed files with 36274 additions and 0 deletions
@@ -0,0 +1,97 @@
+<template>
+  <BasicModal
+    title="جزئیات خدمت"
+    title-en="Service Detail"
+    width="95%"
+    max-width="64rem"
+    min-width="auto"
+    :show-close-button="true"
+  >
+    <template #default="{ data }">
+      <div class="service-details">
+        <div class="service-details__row service-details__row--two">
+          <LineInfoBlock title="عنوان خدمت" :desc="serviceTitle(data)" />
+          <LineInfoBlock title="نوع خدمت" :desc="serviceTypeLabel(data)" />
+        </div>
+
+        <div class="service-details__row">
+          <LineInfoBlock title="درخواست" :desc="requestText(data)" />
+        </div>
+
+        <div class="service-details__divider" />
+
+        <footer class="service-details__footer">
+          <BaseButton
+            text="ارسال پیام"
+            custom-class="service-details__send-btn"
+            @click="onSendMessage(data)"
+          >
+            <template #appendIcon>
+              <SvgIcon name="arrow-left" :size="18" color="#fff" />
+            </template>
+          </BaseButton>
+        </footer>
+      </div>
+    </template>
+  </BasicModal>
+</template>
+
+<script setup>
+import BasicModal from '@/components/BasicModal.vue'
+import LineInfoBlock from '@/components/blocks/LineInfoBlock.vue'
+import BaseButton from '@/components/BaseButton.vue'
+import SvgIcon from '@/components/icons/SvgIcon.vue'
+import { SERVICE_TYPE } from '@/enums'
+import useModal from '@/composables/useModal'
+
+defineOptions({ name: 'ServiceDetailsModal' })
+
+const { openModal } = useModal()
+
+const serviceTitle = (data) => data?.title || data?.serviceTitle || '—'
+
+const serviceTypeLabel = (data) => data?.typeLabel || SERVICE_TYPE[data?.type] || '—'
+
+const requestText = (data) => data?.requestText || data?.description || '—'
+
+const onSendMessage = (data) => {
+  openModal('SendMessageModal', { service: data })
+}
+</script>
+
+<style lang="scss" scoped>
+.service-details {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  text-align: start;
+  padding-block: 0.5rem;
+
+  &__row {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 0.5rem;
+
+    &--two {
+      @media (min-width: 640px) {
+        grid-template-columns: 1fr 1fr;
+      }
+    }
+  }
+
+  &__divider {
+    border-block-end: 1px solid #dddddd;
+    margin-block: 0.5rem;
+  }
+
+  &__footer {
+    display: flex;
+    justify-content: center;
+  }
+
+  &__send-btn {
+    min-width: 17rem;
+    padding: 0 1.5rem;
+  }
+}
+</style>