From ddddcf83e7deb9d0a674d2bbead300089530d87e Mon Sep 17 00:00:00 2001
From: wupengfei <834520024@qq.com>
Date: 星期三, 21 五月 2025 13:24:07 +0800
Subject: [PATCH] feat: UI
---
packages/components/src/views/userAccount/UserAccountListView.vue | 69 ++++++++++++++++++++++++++++------
1 files changed, 56 insertions(+), 13 deletions(-)
diff --git a/packages/components/src/views/userAccount/UserAccountListView.vue b/packages/components/src/views/userAccount/UserAccountListView.vue
index 68ee021..c8fcb43 100644
--- a/packages/components/src/views/userAccount/UserAccountListView.vue
+++ b/packages/components/src/views/userAccount/UserAccountListView.vue
@@ -4,24 +4,35 @@
v-bind="infiniteLoadingProps"
>
<template #renderItem="{ item }">
- <AccountCard
+ <UserAccountCard
:title="TitleMap[item.lifePayType]"
+ :icon="TitleIconMap[item.lifePayType]"
:content="
item.lifePayType === LifeRechargeConstants.LifePayOrderTypeEnum.璇濊垂璁㈠崟
- ? item.content
+ ? `${
+ BlLifeRecharge.constants.IspCodeText[
+ JSON.parse(item?.extraProperties)?.ispCode ?? ''
+ ]
+ }-${item.content}`
: `${item.city}-${item.content}`
"
:remark="item.remark"
:style="{
- marginBottom: Taro.pxTransform(20),
+ marginBottom: Taro.pxTransform(32),
backgroundColor: '#ffffff',
}"
>
<template #action>
- <div class="account-card-action" @click="handleEditUserAccount">缂栬緫</div>
- <div class="account-card-action" @click="handleEditUserAccount">鍒犻櫎</div>
+ <div class="user-account-card-action" @click="handleEditUserAccount(item)">
+ <img :src="IconAccountEdit" class="user-account-card-action-icon" />
+ <span class="user-account-card-action-text">缂栬緫</span>
+ </div>
+ <div class="user-account-card-action" @click="handleDeleteUserAccount(item)">
+ <img :src="IconAccountDelete" class="user-account-card-action-icon" />
+ <span class="user-account-card-action-text">鍒犻櫎</span>
+ </div>
</template>
- </AccountCard>
+ </UserAccountCard>
</template>
</InfiniteLoading>
</template>
@@ -33,31 +44,45 @@
useLifeRechargeContext,
QueryUserAccountListInput,
LifeRechargeConstants,
+ UserAccountListOutput,
} from '@life-payment/core-vue';
import { useInfiniteLoading } from '../../hooks/infiniteLoading';
import { OrderInputType } from '../../constants';
-import AccountCard from '../../components/Card/AccountCard.vue';
+import UserAccountCard from '../../components/Card/UserAccountCard.vue';
+import IconAccountDelete from '../../assets/account/icon-account-delete.png';
+import IconAccountEdit from '../../assets/account/icon-account-edit.png';
+import { OssAssets } from '../../constants';
import Taro from '@tarojs/taro';
defineOptions({
name: 'UserAccountListView',
});
+const emit = defineEmits<{
+ (e: 'goEdit', row: UserAccountListOutput): void;
+}>();
+
const { blLifeRecharge } = useLifeRechargeContext();
const TitleMap = {
- [LifeRechargeConstants.LifePayOrderTypeEnum.璇濊垂璁㈠崟]: '鎵嬫満鍙�',
- [LifeRechargeConstants.LifePayOrderTypeEnum.鐢佃垂璁㈠崟]: '鐢佃垂鎴峰彿',
- [LifeRechargeConstants.LifePayOrderTypeEnum.鐕冩皵璁㈠崟]: '鐕冩皵鎴峰彿',
+ [LifeRechargeConstants.LifePayOrderTypeEnum.璇濊垂璁㈠崟]: '璇濊垂',
+ [LifeRechargeConstants.LifePayOrderTypeEnum.鐢佃垂璁㈠崟]: '鐢佃垂',
+ [LifeRechargeConstants.LifePayOrderTypeEnum.鐕冩皵璁㈠崟]: '鐕冩皵璐�',
};
-const { infiniteLoadingProps } = useInfiniteLoading(
+const TitleIconMap = {
+ [LifeRechargeConstants.LifePayOrderTypeEnum.璇濊垂璁㈠崟]: OssAssets.accountCard.Phone,
+ [LifeRechargeConstants.LifePayOrderTypeEnum.鐢佃垂璁㈠崟]: OssAssets.accountCard.Electric,
+ [LifeRechargeConstants.LifePayOrderTypeEnum.鐕冩皵璁㈠崟]: OssAssets.accountCard.Gas,
+};
+
+const { infiniteLoadingProps, invalidateQueries } = useInfiniteLoading(
({ pageParam }) => {
let params: QueryUserAccountListInput = {
pageModel: {
rows: 20,
page: pageParam,
- orderInput: [{ property: 'id', order: OrderInputType.Desc }],
+ orderInput: [{ property: 'creationTime', order: OrderInputType.Desc }],
},
userId: blLifeRecharge.accountModel.userId,
};
@@ -71,5 +96,23 @@
}
);
-function handleEditUserAccount() {}
+function handleEditUserAccount(row: UserAccountListOutput) {
+ emit('goEdit', row);
+}
+
+async function handleDeleteUserAccount(row: UserAccountListOutput) {
+ try {
+ const res = await Taro.showModal({
+ title: '鎻愮ず',
+ content: '纭畾瑕佸垹闄よ鏁版嵁鍚�?',
+ confirmColor: '#028CFF',
+ });
+ if (res.confirm) {
+ await blLifeRecharge.services.deleteUserAccount({
+ id: row.id,
+ });
+ invalidateQueries();
+ }
+ } catch (error) {}
+}
</script>
--
Gitblit v1.9.1