style: format member stored card module files
Some checks failed
Build and Deploy TenantUI / build-and-deploy (push) Failing after 2s
Some checks failed
Build and Deploy TenantUI / build-and-deploy (push) Failing after 2s
This commit is contained in:
@@ -22,11 +22,18 @@ function handleToggle() {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="msc-plan-card" :class="{ 'is-disabled': item.status === 'disabled' }">
|
||||
<div
|
||||
class="msc-plan-card"
|
||||
:class="{ 'is-disabled': item.status === 'disabled' }"
|
||||
>
|
||||
<div class="msc-plan-card-head">
|
||||
<div class="msc-plan-amount">充 {{ formatCurrency(item.rechargeAmount) }}</div>
|
||||
<div class="msc-plan-amount">
|
||||
充 {{ formatCurrency(item.rechargeAmount) }}
|
||||
</div>
|
||||
<div class="msc-plan-gift">送 {{ formatCurrency(item.giftAmount) }}</div>
|
||||
<div class="msc-plan-arrived">到账 {{ formatCurrency(item.arrivedAmount) }}</div>
|
||||
<div class="msc-plan-arrived">
|
||||
到账 {{ formatCurrency(item.arrivedAmount) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="msc-plan-card-body">
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
<script setup lang="ts">
|
||||
import type { TableColumnType } from 'ant-design-vue';
|
||||
|
||||
import type { MemberStoredCardRechargeRecordDto } from '#/api/member/stored-card';
|
||||
import type { StoredCardRecordPager } from '../types';
|
||||
|
||||
import type { MemberStoredCardRechargeRecordDto } from '#/api/member/stored-card';
|
||||
|
||||
import { Pagination, Table, Tag } from 'ant-design-vue';
|
||||
|
||||
import {
|
||||
|
||||
@@ -13,11 +13,11 @@ const emit = defineEmits<{
|
||||
(event: 'export'): void;
|
||||
(event: 'reset'): void;
|
||||
(event: 'search'): void;
|
||||
(event: 'setDateRange', value: null | [any, any]): void;
|
||||
(event: 'setDateRange', value: [any, any] | null): void;
|
||||
(event: 'setKeyword', value: string): void;
|
||||
}>();
|
||||
|
||||
function setDateRange(value: null | [any, any]) {
|
||||
function setDateRange(value: [any, any] | null) {
|
||||
emit('setDateRange', value);
|
||||
}
|
||||
</script>
|
||||
@@ -42,11 +42,7 @@ function setDateRange(value: null | [any, any]) {
|
||||
<Button @click="emit('search')">搜索</Button>
|
||||
<Button @click="emit('reset')">重置</Button>
|
||||
<span class="msc-spacer"></span>
|
||||
<Button
|
||||
:disabled="!canManage"
|
||||
:loading="exporting"
|
||||
@click="emit('export')"
|
||||
>
|
||||
<Button :disabled="!canManage" :loading="exporting" @click="emit('export')">
|
||||
导出
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
@@ -33,7 +33,9 @@ defineProps<{
|
||||
</div>
|
||||
<div class="msc-stat-card">
|
||||
<div class="msc-stat-label">储值用户</div>
|
||||
<div class="msc-stat-value">{{ formatInteger(stats.rechargeMemberCount) }}人</div>
|
||||
<div class="msc-stat-value">
|
||||
{{ formatInteger(stats.rechargeMemberCount) }}人
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -99,7 +99,10 @@ export function createDrawerActions(options: CreateDrawerActionsOptions) {
|
||||
options.isDrawerSubmitting.value = true;
|
||||
try {
|
||||
await saveMemberStoredCardPlanApi(
|
||||
mapPlanEditorFormToSavePayload(options.form, options.selectedStoreId.value),
|
||||
mapPlanEditorFormToSavePayload(
|
||||
options.form,
|
||||
options.selectedStoreId.value,
|
||||
),
|
||||
);
|
||||
message.success('保存成功');
|
||||
options.isDrawerOpen.value = false;
|
||||
|
||||
@@ -2,10 +2,9 @@ import type {
|
||||
MemberStoredCardPlanDto,
|
||||
SaveMemberStoredCardPlanPayload,
|
||||
} from '#/api/member/stored-card';
|
||||
import type { StoredCardPlanEditorForm } from '#/views/member/stored-card/types';
|
||||
|
||||
import {
|
||||
import type {
|
||||
createDefaultStoredCardPlanEditorForm,
|
||||
StoredCardPlanEditorForm,
|
||||
type StoredCardRecordFilterForm,
|
||||
} from '#/views/member/stored-card/types';
|
||||
|
||||
@@ -107,7 +106,10 @@ export function mapRecordFilterToQuery(
|
||||
}
|
||||
|
||||
/** base64 下载。 */
|
||||
export function downloadBase64File(fileName: string, fileContentBase64: string) {
|
||||
export function downloadBase64File(
|
||||
fileName: string,
|
||||
fileContentBase64: string,
|
||||
) {
|
||||
const binary = atob(fileContentBase64);
|
||||
const length = binary.length;
|
||||
const bytes = new Uint8Array(length);
|
||||
|
||||
@@ -2,7 +2,7 @@ import type { Ref } from 'vue';
|
||||
|
||||
import type { StoredCardPlanCardViewModel } from '#/views/member/stored-card/types';
|
||||
|
||||
import { Modal, message } from 'ant-design-vue';
|
||||
import { message, Modal } from 'ant-design-vue';
|
||||
|
||||
import {
|
||||
changeMemberStoredCardPlanStatusApi,
|
||||
|
||||
@@ -8,6 +8,8 @@ import { computed, onMounted, reactive, ref, watch } from 'vue';
|
||||
|
||||
import { useAccessStore } from '@vben/stores';
|
||||
|
||||
import { message } from 'ant-design-vue';
|
||||
|
||||
import { exportMemberStoredCardRechargeRecordApi } from '#/api/member/stored-card';
|
||||
|
||||
import {
|
||||
@@ -17,23 +19,18 @@ import {
|
||||
createDefaultStoredCardRecordPager,
|
||||
} from '../types';
|
||||
import {
|
||||
createDataActions,
|
||||
} from './stored-card-page/data-actions';
|
||||
import {
|
||||
createDrawerActions,
|
||||
} from './stored-card-page/drawer-actions';
|
||||
import {
|
||||
createDefaultRecordDateRange,
|
||||
MEMBER_STORED_CARD_MANAGE_PERMISSION,
|
||||
MEMBER_STORED_CARD_VIEW_PERMISSION,
|
||||
STORED_CARD_TAB_OPTIONS,
|
||||
createDefaultRecordDateRange,
|
||||
} from './stored-card-page/constants';
|
||||
import { createDataActions } from './stored-card-page/data-actions';
|
||||
import { createDrawerActions } from './stored-card-page/drawer-actions';
|
||||
import {
|
||||
downloadBase64File,
|
||||
mapRecordFilterToQuery,
|
||||
} from './stored-card-page/helpers';
|
||||
import { createPlanActions } from './stored-card-page/plan-actions';
|
||||
import { message } from 'ant-design-vue';
|
||||
|
||||
export function useMemberStoredCardPage() {
|
||||
const accessStore = useAccessStore();
|
||||
@@ -139,7 +136,7 @@ export function useMemberStoredCardPage() {
|
||||
recordFilterForm.keyword = value;
|
||||
}
|
||||
|
||||
function setRecordDateRange(value: null | [any, any]) {
|
||||
function setRecordDateRange(value: [any, any] | null) {
|
||||
if (!value) {
|
||||
recordFilterForm.dateRange = null;
|
||||
return;
|
||||
|
||||
@@ -12,16 +12,16 @@
|
||||
}
|
||||
|
||||
.msc-empty {
|
||||
border-radius: 12px;
|
||||
padding: 40px 20px;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 3px 10px rgb(16 24 40 / 6%);
|
||||
}
|
||||
|
||||
.msc-readonly-tip {
|
||||
margin-left: auto;
|
||||
color: #6b7280;
|
||||
font-size: 12px;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.msc-spacer {
|
||||
|
||||
@@ -18,35 +18,35 @@
|
||||
.msc-ratio-hint {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
border-radius: 6px;
|
||||
margin-top: 8px;
|
||||
padding: 4px 10px;
|
||||
color: #1677ff;
|
||||
margin-top: 8px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #1677ff;
|
||||
background: rgb(22 119 255 / 10%);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.msc-form-hint {
|
||||
margin-top: 6px;
|
||||
color: #9ca3af;
|
||||
font-size: 12px;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.msc-status-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.msc-status-text {
|
||||
color: #4b5563;
|
||||
font-size: 13px;
|
||||
color: #4b5563;
|
||||
}
|
||||
|
||||
.msc-drawer-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
.page-member-stored-card {
|
||||
.msc-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
border-radius: 12px;
|
||||
align-items: center;
|
||||
padding: 12px 14px;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 8px rgb(15 23 42 / 7%);
|
||||
}
|
||||
|
||||
|
||||
@@ -6,23 +6,23 @@
|
||||
}
|
||||
|
||||
.msc-stat-card {
|
||||
border-radius: 12px;
|
||||
padding: 16px 18px;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 3px 10px rgb(16 24 40 / 6%);
|
||||
}
|
||||
|
||||
.msc-stat-label {
|
||||
margin-bottom: 6px;
|
||||
color: #9ca3af;
|
||||
font-size: 13px;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.msc-stat-value {
|
||||
color: #0f172a;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.msc-stat-value.is-orange {
|
||||
@@ -34,11 +34,11 @@
|
||||
}
|
||||
|
||||
.msc-section-title {
|
||||
border-left: 3px solid #1677ff;
|
||||
padding-left: 10px;
|
||||
color: #111827;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #111827;
|
||||
border-left: 3px solid #1677ff;
|
||||
}
|
||||
|
||||
.msc-plan-grid {
|
||||
@@ -50,16 +50,18 @@
|
||||
.msc-plan-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 14px rgb(15 23 42 / 8%);
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
transition:
|
||||
transform 0.2s ease,
|
||||
box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.msc-plan-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 20px rgb(15 23 42 / 12%);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.msc-plan-card.is-disabled {
|
||||
@@ -89,12 +91,12 @@
|
||||
.msc-plan-gift {
|
||||
display: inline-flex;
|
||||
align-self: flex-start;
|
||||
border-radius: 999px;
|
||||
padding: 3px 10px;
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
background: rgb(255 255 255 / 22%);
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.msc-plan-arrived {
|
||||
@@ -104,28 +106,28 @@
|
||||
|
||||
.msc-plan-card-body {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
justify-content: space-between;
|
||||
padding: 14px 20px;
|
||||
}
|
||||
|
||||
.msc-plan-meta-item {
|
||||
color: #9ca3af;
|
||||
font-size: 12px;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.msc-plan-meta-item span {
|
||||
margin-left: 2px;
|
||||
color: #4b5563;
|
||||
font-weight: 600;
|
||||
color: #4b5563;
|
||||
}
|
||||
|
||||
.msc-plan-card-foot {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-top: 1px solid #f3f4f6;
|
||||
justify-content: space-between;
|
||||
padding: 12px 20px 14px;
|
||||
border-top: 1px solid #f3f4f6;
|
||||
}
|
||||
|
||||
.msc-plan-actions {
|
||||
|
||||
@@ -2,11 +2,11 @@
|
||||
.msc-record-toolbar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
border-radius: 12px;
|
||||
align-items: center;
|
||||
padding: 12px 14px;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 8px rgb(15 23 42 / 7%);
|
||||
}
|
||||
|
||||
@@ -19,59 +19,59 @@
|
||||
}
|
||||
|
||||
.msc-record-table-wrap {
|
||||
border-radius: 12px;
|
||||
padding: 0;
|
||||
background: #fff;
|
||||
box-shadow: 0 4px 14px rgb(15 23 42 / 8%);
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 14px rgb(15 23 42 / 8%);
|
||||
}
|
||||
|
||||
.msc-record-table {
|
||||
.ant-table-thead > tr > th {
|
||||
background: #f8fafc;
|
||||
color: #475569;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #475569;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.ant-table-tbody > tr > td {
|
||||
color: #111827;
|
||||
font-size: 13px;
|
||||
vertical-align: middle;
|
||||
color: #111827;
|
||||
}
|
||||
}
|
||||
|
||||
.msc-record-no {
|
||||
color: #334155;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
||||
font-size: 12px;
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
.msc-record-member {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
line-height: 1.2;
|
||||
gap: 2px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.msc-record-member-name {
|
||||
color: #111827;
|
||||
font-weight: 600;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.msc-record-member-phone {
|
||||
color: #94a3b8;
|
||||
font-size: 12px;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.msc-record-amount {
|
||||
color: #111827;
|
||||
font-weight: 600;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.msc-record-amount.is-gift {
|
||||
color: #f59e0b;
|
||||
font-weight: 500;
|
||||
color: #f59e0b;
|
||||
}
|
||||
|
||||
.msc-pagination {
|
||||
|
||||
Reference in New Issue
Block a user