user-app: extend the redesign across the account screens
Phase 2, completing the app-wide rollout of the home/product-detail design language (LESS colour tokens, BEM class names, hairline-bordered cards, SectionHead, dashed empty states) onto the account side: dashboard, orders, transactions, profile, login and register. Reuse over re-implementation: the dashboard's live rate block is now components/home/RateStrip.vue rather than a second hand-built strip, and every screen uses components/ui/PageBar.vue for its chrome. OrderCard and OrderItemCard are restyled to match. OrderItemCard drops its always-empty note row: our OrderItem schema has no note field (legacy's per-item note was a real column there; ours is not), so it could only ever print a dash. OrdersView swaps ant Tabs for the same scrolling chip rail the rest of the redesign uses, and its full-screen Modal with hand-written CSS overrides for a bottom Drawer, matching how every other detail surface opens. Deleted AppHeader.vue, orphaned once every screen moved to PageBar. Its shutter animation was driven by transitionFlag, which nothing reads any more — the router afterEach comment claiming otherwise is corrected rather than left asserting something untrue, and the now-inert half is flagged in place. ScrollFetchSearch loses its isFav prop: it gated two empty-state branches that rendered the identical image, and its only caller (FavoritesView) now renders its own. Behaviour is preserved throughout. Orders still reads GET /customers/:id/orders and filters client-side; transactions still reads GET /customers/:id/ledger-entries with legacy's CREDIT/DEBIT colour meaning intact; profile stays read-only over real fields; login keeps the real customer lookup plus the documented OTP stub; register stays stubbed with copy that does not claim an account was created. Verified in a real browser against the running API and native database: dashboard 4 tiles with a real balance, orders 1 real order card, profile 4 real spec rows, transactions the correct empty state for a customer with no ledger rows, and login/register confirmed with the session cleared (the guard bounces a signed-in user away from /login, which is why they needed a separate pass). No console errors, no horizontal overflow. vue-tsc and vite build both clean. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
s.esmaeili
co-authored by
Claude Opus 5
Claude Opus 5
parent
cc62975dd0
commit
0e5f9ccd7b
@@ -1,70 +1,74 @@
|
||||
<!--
|
||||
Ported from legacy henza_pwa/src/views/user/src/components/profile.vue,
|
||||
heavily simplified — legacy's original (971 lines, the largest view in the
|
||||
app) is a full edit form (bank info, KYC document uploads, sub-user
|
||||
management for banker accounts). None of that has a backend to back it:
|
||||
there's no update-customer endpoint, no document-upload endpoint, and (as
|
||||
in DashboardView) no banker/sub-account concept in the new Customer model
|
||||
at all. Kept, faithfully styled: the avatar circle and the real read-only
|
||||
info card (name/mobile/national code/verification status/city), all backed
|
||||
by real fields the API already returns.
|
||||
restyled into the redesigned design language (see components/home/* and
|
||||
HomeView).
|
||||
|
||||
DROPPED: "تکمیل پروفایل" (complete profile) button, "افزودن کاربر" (add
|
||||
sub-user) FAB, the "کارشناس فروش" (sales agent) contact card — that last
|
||||
one needs the referring AdminUser's name/mobile, which the current
|
||||
GET /customers/:id response doesn't expose (only referredByAgentId, a bare
|
||||
id) — not resolved here to keep apps/api untouched this batch.
|
||||
Heavily simplified when first ported, and still is — legacy's original (971
|
||||
lines, the largest view in the app) is a full edit form (bank info, KYC
|
||||
document uploads, sub-user management for banker accounts). None of that has
|
||||
a backend to back it: there's no update-customer endpoint, no
|
||||
document-upload endpoint, and (as in DashboardView) no banker/sub-account
|
||||
concept in the new Customer model at all. Kept: the real read-only info
|
||||
card, all backed by fields the API genuinely returns.
|
||||
|
||||
DROPPED, unchanged from the previous version: "تکمیل پروفایل", the
|
||||
"افزودن کاربر" sub-user FAB, and the "کارشناس فروش" contact card — that last
|
||||
one needs the referring AdminUser's name/mobile, which GET /customers/:id
|
||||
does not expose (only referredByAgentId, a bare id).
|
||||
-->
|
||||
<template>
|
||||
<div class="fixed top-0 z-10 w-full">
|
||||
<AppHeader class="bg-white shadowHeader">
|
||||
<div class="flex justify-between items-center">
|
||||
<Icon icon="vuesax-linear:arrow-right-1" class="cursor-pointer" size="25" @click="router.push({ name: 'userPage::hasSubRoute' })" />
|
||||
<h3 class="t bold mb-0">اطلاعات کاربری</h3>
|
||||
<div></div>
|
||||
</div>
|
||||
</AppHeader>
|
||||
</div>
|
||||
<div class="h-20"></div>
|
||||
<div class="prof">
|
||||
<PageBar title="اطلاعات کاربری" back-to="userPage::hasSubRoute" />
|
||||
|
||||
<container>
|
||||
<div class="flex justify-center mb-8">
|
||||
<div class="h-[150px] w-[150px] bg-[#F8F7F6] rounded-full flex justify-center items-center bg-opacity-50">
|
||||
<div class="bg-[#F9F5F0] h-[120px] w-[120px] flex justify-center items-center rounded-full">
|
||||
<div class="rounded-full w-[90px] h-[90px] flex justify-center bg-[#F1E8DE]">
|
||||
<img :src="editImg" class="p-6" alt="henza" />
|
||||
</div>
|
||||
<container class="prof__body">
|
||||
<!-- Identity -->
|
||||
<section class="prof__identity">
|
||||
<div class="prof__avatar" aria-hidden="true">
|
||||
<Icon icon="vuesax-linear:user" size="30" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="prof__name">{{ customer?.fullName ?? '—' }}</h2>
|
||||
<p v-if="customer" class="prof__mobile">{{ customer.mobile }}</p>
|
||||
<span v-if="customer" class="prof__seal" :class="isVerified ? 'is-ok' : 'is-pending'">
|
||||
{{ VERIFICATION_LABELS[customer.verificationStep] ?? customer.verificationStep }}
|
||||
</span>
|
||||
</section>
|
||||
|
||||
<div v-if="customer" class="border-solid border-[1px] border-[#F3F4F6] rounded-[6px] p-8 mt-2 bg-[#FEFEFE]">
|
||||
<div class="flex justify-between">
|
||||
<div class="text-[#9CA3AF] font-medium">نام و نام خانوادگی :</div>
|
||||
<div class="text-[#374151] text-[16px] font-bold text-left">{{ customer.fullName }}</div>
|
||||
</div>
|
||||
<div class="flex justify-between mt-8">
|
||||
<div class="text-[#9CA3AF] font-medium">تلفن همراه :</div>
|
||||
<div class="text-[#374151] text-[16px] font-bold text-left">{{ customer.mobile }}</div>
|
||||
</div>
|
||||
<div class="flex justify-between mt-8">
|
||||
<div class="text-[#9CA3AF] font-medium">کد ملی :</div>
|
||||
<div class="text-[#374151] text-[16px] font-bold text-left">{{ customer.nationalCode }}</div>
|
||||
</div>
|
||||
<div class="flex justify-between mt-8">
|
||||
<div class="text-[#9CA3AF] font-medium">وضعیت احراز هویت :</div>
|
||||
<div class="text-[#374151] text-[16px] font-bold text-left">{{ VERIFICATION_LABELS[customer.verificationStep] }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</container>
|
||||
<!-- Real, read-only fields -->
|
||||
<section v-if="customer" class="prof__block">
|
||||
<SectionHead title="مشخصات" subtitle="اطلاعات ثبتشده حساب شما" />
|
||||
<dl class="prof__specs">
|
||||
<div class="prof__spec">
|
||||
<dt>نام و نام خانوادگی</dt>
|
||||
<dd>{{ customer.fullName }}</dd>
|
||||
</div>
|
||||
<div class="prof__spec">
|
||||
<dt>تلفن همراه</dt>
|
||||
<dd>{{ customer.mobile }}</dd>
|
||||
</div>
|
||||
<div class="prof__spec">
|
||||
<dt>کد ملی</dt>
|
||||
<dd>{{ customer.nationalCode }}</dd>
|
||||
</div>
|
||||
<div class="prof__spec">
|
||||
<dt>وضعیت احراز هویت</dt>
|
||||
<dd>{{ VERIFICATION_LABELS[customer.verificationStep] ?? customer.verificationStep }}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</section>
|
||||
|
||||
<section v-else-if="!loading" class="prof__empty">
|
||||
<Icon icon="vuesax-linear:user" size="26" />
|
||||
<p>اطلاعات حساب در دسترس نیست.</p>
|
||||
</section>
|
||||
</container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import editImg from '../../assets/img/henza.svg'
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import Icon from '../../components/icon/Icon.vue'
|
||||
import AppHeader from '../../components/AppHeader.vue'
|
||||
import PageBar from '../../components/ui/PageBar.vue'
|
||||
import SectionHead from '../../components/home/SectionHead.vue'
|
||||
import { useSessionStore } from '../../stores/session'
|
||||
import { api, type CustomerDetail } from '../../api/client'
|
||||
|
||||
@@ -75,19 +79,138 @@ const VERIFICATION_LABELS: Record<string, string> = {
|
||||
VERIFIED: 'تایید شده',
|
||||
}
|
||||
|
||||
const router = useRouter()
|
||||
const session = useSessionStore()
|
||||
const customer = ref<CustomerDetail | null>(null)
|
||||
const loading = ref(false)
|
||||
|
||||
const isVerified = computed(() => customer.value?.verificationStep === 'VERIFIED')
|
||||
|
||||
onMounted(async () => {
|
||||
if (session.customerId) {
|
||||
if (!session.customerId) return
|
||||
loading.value = true
|
||||
try {
|
||||
customer.value = await api.getCustomer(session.customerId)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.shadowHeader {
|
||||
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05);
|
||||
<style scoped lang="less">
|
||||
.prof {
|
||||
background: @canvas;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.prof__body {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 90px;
|
||||
}
|
||||
|
||||
.prof__identity {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: 26px 20px 28px;
|
||||
border: 1px solid @hairline;
|
||||
border-radius: 20px;
|
||||
background: @canvasSoft;
|
||||
}
|
||||
|
||||
.prof__avatar {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
border-radius: 50%;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: @wine;
|
||||
background: @wineWash;
|
||||
}
|
||||
|
||||
.prof__name {
|
||||
margin: 14px 0 0;
|
||||
font-size: 15.5px;
|
||||
font-weight: 800;
|
||||
color: @ink;
|
||||
}
|
||||
|
||||
.prof__mobile {
|
||||
margin: 6px 0 0;
|
||||
font-size: 12.5px;
|
||||
color: @inkMuted;
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
.prof__seal {
|
||||
margin-top: 12px;
|
||||
padding: 5px 12px;
|
||||
border-radius: 999px;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.prof__seal.is-ok {
|
||||
color: @green;
|
||||
background: #f0fdf4;
|
||||
}
|
||||
|
||||
.prof__seal.is-pending {
|
||||
color: @wine;
|
||||
background: @wineWash;
|
||||
}
|
||||
|
||||
.prof__block {
|
||||
margin-top: 26px;
|
||||
}
|
||||
|
||||
.prof__specs {
|
||||
margin: 0;
|
||||
border: 1px solid @hairline;
|
||||
border-radius: 18px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.prof__spec {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 14px;
|
||||
padding: 13px 14px;
|
||||
border-bottom: 1px solid @hairlineSoft;
|
||||
}
|
||||
|
||||
.prof__spec:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.prof__spec dt {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
color: @inkFaint;
|
||||
}
|
||||
|
||||
.prof__spec dd {
|
||||
margin: 0;
|
||||
font-size: 12.5px;
|
||||
font-weight: 700;
|
||||
color: @ink;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.prof__empty {
|
||||
margin-top: 26px;
|
||||
padding: 34px 20px;
|
||||
border: 1px dashed @hairline;
|
||||
border-radius: 18px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
color: @inkFaint;
|
||||
}
|
||||
.prof__empty p {
|
||||
margin: 0;
|
||||
font-size: 12.5px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user