Split desktop and mobile layouts with shared page data so APIs fetch once per context.
Add layout shells, desktop views, module-level page caches, and UI fixes for auth, home, wallet, transactions, address, and related pages. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Cursor
@@ -0,0 +1,68 @@
|
||||
<template>
|
||||
<div
|
||||
:class="variant === 'desktop' ? 'drules-content' : 'rules-panel mt-5 border-solid border-2 border-primary text-primary rounded-[12px] p-4'"
|
||||
>
|
||||
<div :class="variant === 'desktop' ? 'drules-content__title' : 'font-bold text-sm text-primary'">
|
||||
{{ rulesTitle }}
|
||||
</div>
|
||||
<div
|
||||
:class="variant === 'desktop' ? 'drules-content__divider' : 'w-full h-1px my-3 bg-secondary'"
|
||||
></div>
|
||||
<div
|
||||
v-for="(block, blockIndex) in rulesBlocks"
|
||||
:key="`block-${blockIndex}`"
|
||||
:class="variant === 'desktop' ? 'drules-content__block' : 'rules-block'"
|
||||
>
|
||||
<div
|
||||
v-if="block.title"
|
||||
:class="variant === 'desktop' ? 'drules-content__block-title' : 'font-bold text-sm text-primary mt-4 mb-2'"
|
||||
>
|
||||
{{ block.title }}
|
||||
</div>
|
||||
<p
|
||||
v-for="(rule, index) in block.items"
|
||||
:key="`rule-${blockIndex}-${index}`"
|
||||
:class="variant === 'desktop' ? 'drules-content__paragraph' : 'rules-paragraph'"
|
||||
>
|
||||
{{ rule }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useRulesPageContext } from '../composables/useRulesPage'
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
variant?: 'mobile' | 'desktop'
|
||||
}>(),
|
||||
{ variant: 'mobile' },
|
||||
)
|
||||
|
||||
const { rulesTitle, rulesBlocks } = useRulesPageContext()
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.rules-panel {
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.75rem;
|
||||
}
|
||||
|
||||
.rules-block + .rules-block {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.rules-paragraph {
|
||||
margin: 0 0 1rem;
|
||||
text-align: justify;
|
||||
line-height: 1.9;
|
||||
word-break: normal;
|
||||
overflow-wrap: break-word;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.rules-paragraph:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<div :class="variant === 'desktop' ? 'drules-support' : 'wrap-fix bottom-0 px-10 pb-3rem flex gap-2 bg-white'">
|
||||
<a class="w-full" :href="supportHref">
|
||||
<BasicButton class="w-full" type="primary">تماس با پشتیبانی</BasicButton>
|
||||
</a>
|
||||
<a :href="baleHref" target="_blank" rel="noopener noreferrer">
|
||||
<img src="@/assets/img/bale.png" alt="بله" :class="variant === 'desktop' ? 'drules-support__bale' : 'h-10 w-10'" />
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed } from 'vue'
|
||||
import BasicButton from '@/components/BasicPacks/BasicButton.vue'
|
||||
import { useRulesPageContext } from '../composables/useRulesPage'
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
variant?: 'mobile' | 'desktop'
|
||||
}>(),
|
||||
{ variant: 'mobile' },
|
||||
)
|
||||
|
||||
const {
|
||||
config,
|
||||
getProjectSupportPhoneLink,
|
||||
getProjectBaleLink,
|
||||
} = useRulesPageContext()
|
||||
|
||||
const supportHref = computed(() =>
|
||||
config.config.name === 'garoosi'
|
||||
? 'tel:09031265925'
|
||||
: getProjectSupportPhoneLink(),
|
||||
)
|
||||
|
||||
const baleHref = computed(() =>
|
||||
config.config.name === 'garoosi'
|
||||
? 'https://ble.ir/garoosigallery'
|
||||
: getProjectBaleLink(),
|
||||
)
|
||||
</script>
|
||||
@@ -0,0 +1,55 @@
|
||||
import { computed, inject, provide, type ComputedRef, type InjectionKey } from 'vue'
|
||||
import { useConfigStore } from '@/store/configStore'
|
||||
import {
|
||||
getProjectBaleLink,
|
||||
getProjectSupportPhoneLink,
|
||||
isBoursecuProject,
|
||||
} from '@/utils/config'
|
||||
import { getRulesBlocks, getRulesTitle, type RulesBlock } from '../rulesContent'
|
||||
|
||||
export interface RulesPageContext {
|
||||
config: ReturnType<typeof useConfigStore>
|
||||
nameProject: ComputedRef<string>
|
||||
isBoursecu: ComputedRef<boolean>
|
||||
rulesTitle: ComputedRef<string>
|
||||
rulesBlocks: ComputedRef<RulesBlock[]>
|
||||
getProjectSupportPhoneLink: typeof getProjectSupportPhoneLink
|
||||
getProjectBaleLink: typeof getProjectBaleLink
|
||||
}
|
||||
|
||||
export const RULES_PAGE_CONTEXT_KEY: InjectionKey<RulesPageContext> = Symbol('rulesPageContext')
|
||||
|
||||
export function useRulesPage() {
|
||||
const config = useConfigStore()
|
||||
|
||||
const nameProject = computed(
|
||||
() => config.config?.name_fa || config.config?.name || 'بورس مس',
|
||||
)
|
||||
|
||||
const isBoursecu = computed(() => isBoursecuProject())
|
||||
|
||||
const rulesTitle = computed(() => getRulesTitle(nameProject.value, isBoursecu.value))
|
||||
|
||||
const rulesBlocks = computed(() => getRulesBlocks(nameProject.value, isBoursecu.value))
|
||||
|
||||
const context: RulesPageContext = {
|
||||
config,
|
||||
nameProject,
|
||||
isBoursecu,
|
||||
rulesTitle,
|
||||
rulesBlocks,
|
||||
getProjectSupportPhoneLink,
|
||||
getProjectBaleLink,
|
||||
}
|
||||
|
||||
provide(RULES_PAGE_CONTEXT_KEY, context)
|
||||
return context
|
||||
}
|
||||
|
||||
export function useRulesPageContext() {
|
||||
const context = inject(RULES_PAGE_CONTEXT_KEY)
|
||||
if (!context) {
|
||||
throw new Error('useRulesPageContext must be used within a page that calls useRulesPage()')
|
||||
}
|
||||
return context
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<div class="drules">
|
||||
<div class="drules__container">
|
||||
<header class="drules-topbar">
|
||||
<button type="button" class="drules-topbar__back" @click="router.back()">
|
||||
<BasicIcon icon="vuesax-linear:arrow-right-1" size="18" />
|
||||
<span>بازگشت</span>
|
||||
</button>
|
||||
<div class="drules-topbar__meta">
|
||||
<p class="drules-topbar__eyebrow">حقوقی</p>
|
||||
<h1 class="drules-topbar__title">قوانین و مقررات</h1>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="drules-layout">
|
||||
<section class="drules-surface drules-main">
|
||||
<div class="drules-main__intro">
|
||||
<div class="drules-main__logo">
|
||||
<BasicIcon icon="vuesax-linear:task" size="28" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="drules-main__project">{{ nameProject }}</h2>
|
||||
<p class="drules-main__tagline">شرایط استفاده از خدمات و تعهدات کاربران</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<RulesContentPanel variant="desktop" />
|
||||
</section>
|
||||
|
||||
<aside class="drules-surface drules-side">
|
||||
<h3 class="drules-side__title">پشتیبانی و ارتباط</h3>
|
||||
<p class="drules-side__text">
|
||||
در صورت نیاز به توضیح بیشتر درباره قوانین، با پشتیبانی تماس بگیرید.
|
||||
</p>
|
||||
<RulesSupportActions variant="desktop" />
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
|
||||
import router from '@/router'
|
||||
import RulesContentPanel from '../components/RulesContentPanel.vue'
|
||||
import RulesSupportActions from '../components/RulesSupportActions.vue'
|
||||
import { useRulesPageContext } from '../composables/useRulesPage'
|
||||
|
||||
const { nameProject } = useRulesPageContext()
|
||||
</script>
|
||||
@@ -0,0 +1,212 @@
|
||||
/* Premium desktop rules page */
|
||||
|
||||
.drules {
|
||||
min-height: 100%;
|
||||
background: #f6f7f9;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.drules__container {
|
||||
max-width: 1080px;
|
||||
margin: 0 auto;
|
||||
padding: 28px 36px 40px;
|
||||
}
|
||||
|
||||
.drules-topbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
margin-bottom: 28px;
|
||||
padding-bottom: 24px;
|
||||
border-bottom: 1px solid rgba(15, 23, 42, 0.06);
|
||||
|
||||
&__back {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: #6b7280;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
padding: 8px 0;
|
||||
|
||||
&:hover {
|
||||
color: #111827;
|
||||
}
|
||||
}
|
||||
|
||||
&__meta {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&__eyebrow {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #9ca3af;
|
||||
margin: 0 0 4px;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 26px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.03em;
|
||||
color: #111827;
|
||||
margin: 0;
|
||||
line-height: 1.2;
|
||||
}
|
||||
}
|
||||
|
||||
.drules-layout {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
|
||||
gap: 20px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.drules-surface {
|
||||
background: #fff;
|
||||
border: 1px solid rgba(15, 23, 42, 0.06);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
|
||||
}
|
||||
|
||||
.drules-main {
|
||||
padding: 28px;
|
||||
|
||||
&__intro {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
margin-bottom: 24px;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 1px solid #eef0f3;
|
||||
}
|
||||
|
||||
&__logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 14px;
|
||||
background: rgba(9, 61, 81, 0.08);
|
||||
color: @App-primary-color;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&__project {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
margin: 0 0 4px;
|
||||
}
|
||||
|
||||
&__tagline {
|
||||
font-size: 13px;
|
||||
color: #6b7280;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.drules-content {
|
||||
padding: 20px;
|
||||
border: 1px solid rgba(9, 61, 81, 0.12);
|
||||
border-radius: 12px;
|
||||
background: rgba(9, 61, 81, 0.02);
|
||||
color: @App-primary-color;
|
||||
|
||||
&__title {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__divider {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: rgba(9, 61, 81, 0.12);
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
&__block + &__block {
|
||||
margin-top: 20px;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid rgba(9, 61, 81, 0.08);
|
||||
}
|
||||
|
||||
&__block-title {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
margin: 0 0 12px;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
&__paragraph {
|
||||
margin: 0 0 14px;
|
||||
font-size: 14px;
|
||||
line-height: 1.9;
|
||||
text-align: justify;
|
||||
color: inherit;
|
||||
word-break: normal;
|
||||
overflow-wrap: break-word;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.drules-side {
|
||||
padding: 24px;
|
||||
position: sticky;
|
||||
top: 24px;
|
||||
|
||||
&__title {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #111827;
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
|
||||
&__text {
|
||||
font-size: 13px;
|
||||
line-height: 1.7;
|
||||
color: #6b7280;
|
||||
margin: 0 0 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.drules-support {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
> a:first-child {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&__bale {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
object-fit: contain;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1023.98px) {
|
||||
.drules-layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.drules-side {
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
+12
-181
@@ -1,193 +1,24 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="wrap-fix z-1 bg-white py-3 px-3 text-primary font-bold drop-shadow flex">
|
||||
<div @click="router.back()" class="cursor-pointer">
|
||||
<BasicIcon icon="vuesax-linear:arrow-right-1" />
|
||||
</div>
|
||||
<div class="mr-2">قوانین و مقررات</div>
|
||||
</div>
|
||||
<div class="pt-20">
|
||||
<div>
|
||||
<img :src="img" alt="" class="mt-2 w-full absolute bottom-0" />
|
||||
</div>
|
||||
<div class="text-justify text-base z-200000 relative">
|
||||
<div class="px-10">
|
||||
<!-- <div class="h-20vh flex justify-center">
|
||||
<img :src="logoFull" class="mb-20 h-15vh mt-5" />
|
||||
</div>-->
|
||||
<div class="overflow-y-auto h-60vh pb-20 border-primary">
|
||||
<div class="rules-panel mt-5 border-solid border-2 border-primary text-primary rounded-[12px] p-4">
|
||||
<div class="font-bold text-sm text-primary">
|
||||
{{ rulesTitle }}
|
||||
</div>
|
||||
<div class="w-full h-1px my-3 bg-secondary"></div>
|
||||
<div
|
||||
v-for="(block, blockIndex) in rulesBlocks"
|
||||
:key="`block-${blockIndex}`"
|
||||
class="rules-block"
|
||||
>
|
||||
<div
|
||||
v-if="block.title"
|
||||
class="font-bold text-sm text-primary mt-4 mb-2"
|
||||
>
|
||||
{{ block.title }}
|
||||
</div>
|
||||
<p
|
||||
v-for="(rule, index) in block.items"
|
||||
:key="`rule-${blockIndex}-${index}`"
|
||||
class="rules-paragraph"
|
||||
>
|
||||
{{ rule }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="config.config.name === 'garoosi'" class="wrap-fix bottom-0 px-10 pb-3rem flex gap-2 bg-white">
|
||||
<a class="w-full" href="tel:09031265925">
|
||||
<BasicButton class="w-full" type="primary">تماس با پشتیبانی</BasicButton>
|
||||
</a>
|
||||
<a href="https://ble.ir/garoosigallery">
|
||||
<img src="@/assets/img/bale.png" alt="" class="h-10 w-10"/>
|
||||
</a>
|
||||
</div>
|
||||
<div v-else class="wrap-fix bottom-0 px-10 pb-3rem flex gap-2 bg-white">
|
||||
<a class="w-full" :href="getProjectSupportPhoneLink()">
|
||||
<BasicButton class="w-full" type="primary">تماس با پشتیبانی</BasicButton>
|
||||
</a>
|
||||
<a :href="getProjectBaleLink()" target="_blank" rel="noopener noreferrer">
|
||||
<img src="@/assets/img/bale.png" alt="بله" class="h-10 w-10"/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <ActionSheet v-model:show="editPassVisible">salam</ActionSheet>-->
|
||||
<div class="rules-page-root">
|
||||
<DesktopRulesView v-show="isDesktop" />
|
||||
<MobileRulesView v-show="!isDesktop" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, reactive, ref, computed } from 'vue'
|
||||
import img from '@/assets/img/user_ly1.svg'
|
||||
// import gr_bottom from './assets/img/gr_bottom_white.svg'
|
||||
import { loading } from '@/utils'
|
||||
import BasicButton from '@/components/BasicPacks/BasicButton.vue'
|
||||
import BasicActionSheet from '@/components/BasicPacks/BasicActionSheet.vue'
|
||||
import { lengthValidation, required } from '@/utils/inputRules'
|
||||
import BasicInput from '@/components/BasicPacks/BasicInput.vue'
|
||||
import type { User } from '@/models/login'
|
||||
import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
|
||||
import router from '@/router'
|
||||
import type { FormInstance } from 'ant-design-vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import { updateMe } from '@/api/me'
|
||||
import { useUserStore } from '@/store/userStore'
|
||||
import BaseDatePicker from '@/components/BasicPacks/BaseDatePicker'
|
||||
import {useConfigStore} from "../../../store/configStore";
|
||||
import {getProjectBaleLink, getProjectSupportPhoneLink, getReferralShareText, getReferralShareTitle, isBoursecuProject} from "@/utils/config";
|
||||
import {
|
||||
getRulesBlocks,
|
||||
getRulesTitle,
|
||||
} from './rulesContent'
|
||||
const config = useConfigStore()
|
||||
const userFormState = ref<User>({
|
||||
fname: '',
|
||||
lname: '',
|
||||
mobile: undefined,
|
||||
birth_date: '',
|
||||
phone_number: '',
|
||||
province: '',
|
||||
city: '',
|
||||
n_code: undefined
|
||||
})
|
||||
const formRef = ref<FormInstance>()
|
||||
const userStore = useUserStore()
|
||||
const nameProject = computed(() => config.config?.name_fa || config.config?.name || 'بورس مس')
|
||||
const isBoursecu = computed(() => isBoursecuProject())
|
||||
const rulesTitle = computed(() => getRulesTitle(nameProject.value, isBoursecu.value))
|
||||
const rulesBlocks = computed(() => getRulesBlocks(nameProject.value, isBoursecu.value))
|
||||
// const editPassVisible = ref<boolean>(false)
|
||||
const editPassVisible = ref<boolean>(false)
|
||||
import { useDesktopBreakpoint } from '@/layouts/composables/useAppLayout'
|
||||
import { useRulesPage } from './composables/useRulesPage'
|
||||
import DesktopRulesView from './desktop/DesktopRulesView.vue'
|
||||
import MobileRulesView from './mobile/MobileRulesView.vue'
|
||||
|
||||
function setForm() {
|
||||
userFormState.value = userStore.userInfo
|
||||
}
|
||||
const isDesktop = useDesktopBreakpoint()
|
||||
|
||||
function copyCode() {
|
||||
// nextTick(() => {
|
||||
const val = userStore.userInfo?.referral_id
|
||||
navigator.clipboard.writeText(val)
|
||||
message.info('کد رونوشت شد')
|
||||
// })
|
||||
}
|
||||
|
||||
function shareCode() {
|
||||
const val = getReferralShareText({
|
||||
userName: userStore.userInfo?.name,
|
||||
projectName: nameProject.value,
|
||||
referralId: userStore.userInfo?.referral_id,
|
||||
})
|
||||
navigator.share({
|
||||
title: getReferralShareTitle(nameProject.value),
|
||||
text: val
|
||||
})
|
||||
}
|
||||
|
||||
const resetData = () => {
|
||||
formRef.value?.resetFields()
|
||||
userFormState.value = {
|
||||
fname: '',
|
||||
lname: '',
|
||||
mobile: undefined,
|
||||
birth_date: '',
|
||||
phone_number: '',
|
||||
province: '',
|
||||
city: '',
|
||||
n_code: undefined
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
setForm()
|
||||
})
|
||||
|
||||
function ok() {
|
||||
formRef.value?.validateFields().then(async () => {
|
||||
try {
|
||||
loading.value = true
|
||||
await updateMe(userFormState.value)
|
||||
await userStore.getMyInfo()
|
||||
editPassVisible.value = false
|
||||
message.success('اطلاعات شما با موفقیت به روز رسانی شد')
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
})
|
||||
}
|
||||
useRulesPage()
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.rules-panel {
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.75rem;
|
||||
}
|
||||
|
||||
.rules-block + .rules-block {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.rules-paragraph {
|
||||
margin: 0 0 1rem;
|
||||
text-align: justify;
|
||||
line-height: 1.9;
|
||||
word-break: normal;
|
||||
overflow-wrap: break-word;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.rules-paragraph:last-child {
|
||||
margin-bottom: 0;
|
||||
.rules-page-root {
|
||||
min-height: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="wrap-fix z-1 bg-white py-3 px-3 text-primary font-bold drop-shadow flex">
|
||||
<div class="cursor-pointer" @click="router.back()">
|
||||
<BasicIcon icon="vuesax-linear:arrow-right-1" />
|
||||
</div>
|
||||
<div class="mr-2">قوانین و مقررات</div>
|
||||
</div>
|
||||
<div class="pt-20">
|
||||
<div>
|
||||
<img :src="img" alt="" class="mt-2 w-full absolute bottom-0" />
|
||||
</div>
|
||||
<div class="text-justify text-base z-200000 relative">
|
||||
<div class="px-10">
|
||||
<div class="overflow-y-auto h-60vh pb-20 border-primary">
|
||||
<RulesContentPanel variant="mobile" />
|
||||
</div>
|
||||
</div>
|
||||
<RulesSupportActions variant="mobile" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
|
||||
import img from '@/assets/img/user_ly1.svg'
|
||||
import router from '@/router'
|
||||
import RulesContentPanel from '../components/RulesContentPanel.vue'
|
||||
import RulesSupportActions from '../components/RulesSupportActions.vue'
|
||||
</script>
|
||||
@@ -0,0 +1,26 @@
|
||||
import { inject, provide, type InjectionKey } from 'vue'
|
||||
import { useConfigStore } from '@/store/configStore'
|
||||
|
||||
export interface PermissionsPageContext {
|
||||
config: ReturnType<typeof useConfigStore>
|
||||
}
|
||||
|
||||
export const PERMISSIONS_PAGE_CONTEXT_KEY: InjectionKey<PermissionsPageContext> =
|
||||
Symbol('permissionsPageContext')
|
||||
|
||||
export function usePermissionsPage() {
|
||||
const config = useConfigStore()
|
||||
|
||||
const context: PermissionsPageContext = { config }
|
||||
|
||||
provide(PERMISSIONS_PAGE_CONTEXT_KEY, context)
|
||||
return context
|
||||
}
|
||||
|
||||
export function usePermissionsPageContext() {
|
||||
const context = inject(PERMISSIONS_PAGE_CONTEXT_KEY)
|
||||
if (!context) {
|
||||
throw new Error('usePermissionsPageContext must be used within a page that calls usePermissionsPage()')
|
||||
}
|
||||
return context
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<div class="dperm">
|
||||
<div class="dperm__container">
|
||||
<header class="dperm-topbar">
|
||||
<button type="button" class="dperm-topbar__back" @click="router.back()">
|
||||
<BasicIcon icon="vuesax-linear:arrow-right-1" size="18" />
|
||||
<span>بازگشت</span>
|
||||
</button>
|
||||
<div class="dperm-topbar__meta">
|
||||
<p class="dperm-topbar__eyebrow">مجوزها</p>
|
||||
<h1 class="dperm-topbar__title">مجوز ها</h1>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="dperm-layout">
|
||||
<section class="dperm-surface dperm-main">
|
||||
<div class="dperm-main__intro">
|
||||
<div class="dperm-main__logo">
|
||||
<BasicIcon icon="vuesax-linear:document-text" size="28" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="dperm-main__project">{{ config.config.name_fa }}</h2>
|
||||
<p class="dperm-main__tagline">مشاهده جواز کسب و کار</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dperm-document">
|
||||
<h3 class="dperm-document__title">جواز کسب و کار</h3>
|
||||
<div class="dperm-document__frame">
|
||||
<img
|
||||
:src="permissionImage"
|
||||
alt="جواز کسب و کار"
|
||||
class="dperm-document__image"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<aside class="dperm-surface dperm-side">
|
||||
<h3 class="dperm-side__title">پشتیبانی و ارتباط</h3>
|
||||
<p class="dperm-side__text">
|
||||
در صورت نیاز به راهنمایی یا پاسخ به سوالات، از راههای زیر با ما در ارتباط باشید.
|
||||
</p>
|
||||
<SupportContactBar variant="desktop" />
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
|
||||
import SupportContactBar from '@/components/SupportContactBar.vue'
|
||||
import permissionImage from '@/assets/img/permision.png'
|
||||
import router from '@/router'
|
||||
import { usePermissionsPageContext } from '../composables/usePermissionsPage'
|
||||
|
||||
const { config } = usePermissionsPageContext()
|
||||
</script>
|
||||
@@ -0,0 +1,168 @@
|
||||
/* Premium desktop permissions page */
|
||||
|
||||
.dperm {
|
||||
min-height: 100%;
|
||||
background: #f6f7f9;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.dperm__container {
|
||||
max-width: 1080px;
|
||||
margin: 0 auto;
|
||||
padding: 28px 36px 40px;
|
||||
}
|
||||
|
||||
.dperm-topbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
margin-bottom: 28px;
|
||||
padding-bottom: 24px;
|
||||
border-bottom: 1px solid rgba(15, 23, 42, 0.06);
|
||||
|
||||
&__back {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: #6b7280;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
padding: 8px 0;
|
||||
|
||||
&:hover {
|
||||
color: #111827;
|
||||
}
|
||||
}
|
||||
|
||||
&__meta {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&__eyebrow {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #9ca3af;
|
||||
margin: 0 0 4px;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 26px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.03em;
|
||||
color: #111827;
|
||||
margin: 0;
|
||||
line-height: 1.2;
|
||||
}
|
||||
}
|
||||
|
||||
.dperm-layout {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
|
||||
gap: 20px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.dperm-surface {
|
||||
background: #fff;
|
||||
border: 1px solid rgba(15, 23, 42, 0.06);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
|
||||
}
|
||||
|
||||
.dperm-main {
|
||||
padding: 28px;
|
||||
|
||||
&__intro {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
margin-bottom: 24px;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 1px solid #eef0f3;
|
||||
}
|
||||
|
||||
&__logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 14px;
|
||||
background: rgba(9, 61, 81, 0.08);
|
||||
color: @App-primary-color;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&__project {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
margin: 0 0 4px;
|
||||
}
|
||||
|
||||
&__tagline {
|
||||
font-size: 13px;
|
||||
color: #6b7280;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.dperm-document {
|
||||
&__title {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: @App-primary-color;
|
||||
text-align: center;
|
||||
margin: 0 0 20px;
|
||||
}
|
||||
|
||||
&__frame {
|
||||
padding: 16px;
|
||||
border: 1px solid rgba(9, 61, 81, 0.12);
|
||||
border-radius: 12px;
|
||||
background: rgba(9, 61, 81, 0.02);
|
||||
}
|
||||
|
||||
&__image {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.dperm-side {
|
||||
padding: 24px;
|
||||
position: sticky;
|
||||
top: 24px;
|
||||
|
||||
&__title {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #111827;
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
|
||||
&__text {
|
||||
font-size: 13px;
|
||||
line-height: 1.7;
|
||||
color: #6b7280;
|
||||
margin: 0 0 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1023.98px) {
|
||||
.dperm-layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.dperm-side {
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="bg-white wra-fix z-1 py-3 px-3 text-primary font-bold drop-shadow flex">
|
||||
<div class="cursor-pointer" @click="router.back()">
|
||||
<BasicIcon icon="vuesax-linear:arrow-right-1" />
|
||||
</div>
|
||||
<div class="mr-2">مجوز ها</div>
|
||||
</div>
|
||||
<div class="pt-20">
|
||||
<div>
|
||||
<img :src="img" alt="" class="mt-2 w-full absolute bottom-0" />
|
||||
</div>
|
||||
<div class="px-1 text-justify text-base z-200000 relative">
|
||||
<div>
|
||||
<div class="overflow-y-auto h-65vh pb-20 border-primary">
|
||||
<div class="font-bold text-sm text-primary text-center">جواز کسب و کار</div>
|
||||
<img :src="permissionImage" alt="جواز کسب و کار" class="w-full" />
|
||||
<div class="mt-5 text-xs"></div>
|
||||
<SupportContactBar />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
|
||||
import SupportContactBar from '@/components/SupportContactBar.vue'
|
||||
import img from '@/assets/img/user_ly1.svg'
|
||||
import permissionImage from '@/assets/img/permision.png'
|
||||
import router from '@/router'
|
||||
</script>
|
||||
@@ -1,152 +1,24 @@
|
||||
<template>
|
||||
<div class="bg-white wra-fix z-1 py-3 px-3 text-primary font-bold drop-shadow flex">
|
||||
<div @click="router.back()" class="cursor-pointer">
|
||||
<BasicIcon icon="vuesax-linear:arrow-right-1" />
|
||||
</div>
|
||||
<div class="mr-2">مجوز ها</div>
|
||||
</div>
|
||||
<div class="pt-20">
|
||||
<div class="">
|
||||
<img :src="img" alt="" class="mt-2 w-full absolute bottom-0">
|
||||
</div>
|
||||
<div class="px-1 text-justify text-base z-200000 relative">
|
||||
<div>
|
||||
<!-- <img :src="logoFull" class="mb-20 mt-5 px-10" />-->
|
||||
<div class="overflow-y-auto h-65vh pb-20 border-primary">
|
||||
<div class=" font-bold text-sm text-primary text-center">جواز کسب و کار</div>
|
||||
<img :src="permissionImage" alt="جواز کسب و کار" class="w-full">
|
||||
<div class="mt-5 text-xs"></div>
|
||||
<div v-if="config.config.name === 'garoosi'" class="wrap-fix bottom-0 px-10 pb-3rem flex gap-2 bg-white">
|
||||
<a class="w-full" href="tel:09031265925">
|
||||
<BasicButton class="w-full" type="primary">تماس با پشتیبانی</BasicButton>
|
||||
</a>
|
||||
<a href="https://ble.ir/garoosigallery">
|
||||
<img src="@/assets/img/bale.png" alt="" class="h-10 w-10"/>
|
||||
</a>
|
||||
</div>
|
||||
<div v-else class="wrap-fix bottom-0 px-10 pb-3rem flex gap-2 bg-white">
|
||||
<a class="w-full" :href="getProjectSupportPhoneLink()">
|
||||
<BasicButton class="w-full" type="primary">تماس با پشتیبانی</BasicButton>
|
||||
</a>
|
||||
<a :href="getProjectBaleLink()" target="_blank" rel="noopener noreferrer">
|
||||
<img src="@/assets/img/bale.png" alt="بله" class="h-10 w-10"/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <ActionSheet v-model:show="editPassVisible">salam</ActionSheet>-->
|
||||
<div class="permissions-page-root">
|
||||
<DesktopPermissionsView v-show="isDesktop" />
|
||||
<MobilePermissionsView v-show="!isDesktop" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useDesktopBreakpoint } from '@/layouts/composables/useAppLayout'
|
||||
import { usePermissionsPage } from './composables/usePermissionsPage'
|
||||
import DesktopPermissionsView from './desktop/DesktopPermissionsView.vue'
|
||||
import MobilePermissionsView from './mobile/MobilePermissionsView.vue'
|
||||
|
||||
import { onMounted, reactive, ref } from 'vue'
|
||||
import img from '@/assets/img/user_ly1.svg'
|
||||
import permissionImage from '@/assets/img/permision.png'
|
||||
// import gr_bottom from './assets/img/gr_bottom_white.svg'
|
||||
import { loading } from '@/utils'
|
||||
import BasicButton from '@/components/BasicPacks/BasicButton.vue'
|
||||
import type { User } from '@/models/login'
|
||||
import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
|
||||
import router from '@/router'
|
||||
import type { FormInstance } from 'ant-design-vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import { updateMe } from '@/api/me'
|
||||
import { useUserStore } from '@/store/userStore'
|
||||
import {useConfigStore} from "@/store/configStore";
|
||||
import {getProjectBaleLink, getProjectSupportPhoneLink, getReferralShareText, getReferralShareTitle} from "@/utils/config";
|
||||
const isDesktop = useDesktopBreakpoint()
|
||||
|
||||
const config=useConfigStore()
|
||||
|
||||
const userFormState = ref<User>({
|
||||
fname: '',
|
||||
lname: '',
|
||||
mobile: undefined,
|
||||
birth_date: '',
|
||||
phone_number: '',
|
||||
province: '',
|
||||
city: '',
|
||||
n_code: undefined
|
||||
})
|
||||
const formRef = ref<FormInstance>()
|
||||
const userStore = useUserStore()
|
||||
const nameProject= useConfigStore().config.name_fa
|
||||
|
||||
// const editPassVisible = ref<boolean>(false)
|
||||
const editPassVisible = ref<boolean>(false)
|
||||
|
||||
function setForm() {
|
||||
userFormState.value = userStore.userInfo
|
||||
}
|
||||
|
||||
function copyCode() {
|
||||
// nextTick(() => {
|
||||
const val = userStore.userInfo?.referral_id
|
||||
navigator.clipboard.writeText(val)
|
||||
message.info('کد رونوشت شد')
|
||||
// })
|
||||
}
|
||||
|
||||
function shareCode() {
|
||||
const val = getReferralShareText({
|
||||
userName: userStore.userInfo?.name,
|
||||
projectName: nameProject,
|
||||
referralId: userStore.userInfo?.referral_id,
|
||||
})
|
||||
navigator.share({
|
||||
title: getReferralShareTitle(nameProject),
|
||||
text: val
|
||||
})
|
||||
}
|
||||
|
||||
const resetData = () => {
|
||||
formRef.value?.resetFields()
|
||||
userFormState.value = {
|
||||
fname: '',
|
||||
lname: '',
|
||||
mobile: undefined,
|
||||
birth_date: '',
|
||||
phone_number: '',
|
||||
province: '',
|
||||
city: '',
|
||||
n_code: undefined
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
setForm()
|
||||
})
|
||||
|
||||
function ok() {
|
||||
formRef.value?.validateFields().then(async () => {
|
||||
try {
|
||||
loading.value = true
|
||||
await updateMe(userFormState.value)
|
||||
await userStore.getMyInfo()
|
||||
editPassVisible.value = false
|
||||
message.success('اطلاعات شما با موفقیت به روز رسانی شد')
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
})
|
||||
}
|
||||
usePermissionsPage()
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/*.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.2s ease;
|
||||
.permissions-page-root {
|
||||
min-height: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}*/
|
||||
/*.trans{
|
||||
transition: height 1s;
|
||||
}*/
|
||||
</style>
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user