feat: UI

wupengfei

2 天以前 0224735fb1cba46f6549adfa1f60ffd6b5041b72

 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>