feat: UI

wupengfei

2025-05-21 ddddcf83e7deb9d0a674d2bbead300089530d87e

feat: UI

 packages/components/src/assets/account/icon-account-delete.png

 packages/components/src/assets/account/icon-account-edit.png

 packages/components/src/components/Card/OrderCard.vue

@@ -15,7 +15,7 @@
      <slot></slot>
    </div>
    <slot name="actions">
      <div class="order-card-footer" v-if="shoeFooter">
      <!-- <div class="order-card-footer" v-if="showFooter">
        <div
          v-if="status === LifeRechargeConstants.LifePayOrderStatusEnum.充值中"
          class="order-card-action"
@@ -30,7 +30,15 @@
        >
          è¯¦æƒ…
        </div>
      </div> -->
      <div
        v-if="status === LifeRechargeConstants.LifePayOrderStatusEnum.充值中"
        class="order-card-action"
        @click="emit('goApplyRefund', id)"
      >
        ç”³è¯·é€€æ¬¾
      </div>
      <div class="order-card-action" @click="emit('goRefundDetail', orderNo)">详情</div>
    </slot>
  </div>
</template>
@@ -68,7 +76,7 @@
  [LifeRechargeConstants.LifePayOrderStatusEnum.退款中]: OssAssets.card.Refund,
};

const shoeFooter = computed(() => {
const showFooter = computed(() => {
  return (
    props.status === LifeRechargeConstants.LifePayOrderStatusEnum.充值中 ||
    props.status === LifeRechargeConstants.LifePayOrderStatusEnum.退款失败

 packages/components/src/components/Card/OrderCardItem.vue

@@ -1,6 +1,9 @@
<template>
  <div class="order-card-item" :class="{ danger }">
    <div class="order-card-item-label" :style="{ width: labelWidth, textAlign: textAlign }">
    <div
      class="order-card-item-label"
      :style="{ width: Taro.pxTransform(labelWidth), textAlign: textAlign }"
    >
      <slot name="label">{{ label }}</slot>
    </div>
    <div class="order-card-item-value">
@@ -10,6 +13,8 @@
</template>

<script setup lang="ts">
import Taro from '@tarojs/taro';

defineOptions({
  name: 'OrderCardItem',
});
@@ -23,7 +28,7 @@
};

const props = withDefaults(defineProps<Props>(), {
  labelWidth: '80px',
  labelWidth: 140,
  textAlign: 'left',
});
</script>

 packages/components/src/components/Card/UserAccountCard.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,28 @@
<template>
  <div class="user-account-card">
    <div class="user-account-card-title">
      <img class="user-account-card-icon" :src="icon" alt="" />
      <span class="user-account-card-text">{{ title }}</span>
    </div>
    <div class="user-account-card-content">{{ content }}</div>
    <div class="user-account-card-remark">{{ remark }}</div>
    <div class="user-account-card-actions">
      <slot name="action" />
    </div>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: 'UserAccountCard',
});

type Props = {
  title?: string;
  content?: string;
  icon?: string;
  remark?: string;
};

const props = withDefaults(defineProps<Props>(), {});
</script>

 packages/components/src/components/Result/Result.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,29 @@
<template>
  <div class="recharge-result-view">
    <div class="recharge-result-view-title">{{ title }}</div>
    <div class="recharge-result-view-subtitle">订单号：{{ orderNo }}</div>
    <div class="recharge-result-view-remark">
      {{ refundCheckRemark }},如有疑问请联系客服 {{ servicePhone }}（周一到周五 9:00-17:30）
    </div>
    <div class="recharge-result-view-btn-wrapper">
      <slot name="actions">
        <div class="recharge-result-view-btn" @click="emit('goBackHome')">回首页</div>
      </slot>
    </div>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: 'Result',
});

type Props = {
  title?: string;
  orderNo?: string;
  refundCheckRemark?: string;
  servicePhone?: string;
};

const props = withDefaults(defineProps<Props>(), {});
</script>

 packages/components/src/constants/img.ts

@@ -16,4 +16,10 @@
    Success: `${OssBasePath}/lifePayment/assets/card/card-status-success.png`,
    WaitRefund: `${OssBasePath}/lifePayment/assets/card/card-status-wait-refund.png`,
  },

  accountCard: {
    Electric: `${OssBasePath}/lifePayment/assets/card/account-card-electric.png`,
    Gas: `${OssBasePath}/lifePayment/assets/card/account-card-gas.png`,
    Phone: `${OssBasePath}/lifePayment/assets/card/account-card-phone.png`,
  },
};

 packages/components/src/styles/card.scss

@@ -176,3 +176,72 @@
    @include ellipsis;
  }
}

.user-account-card {
  border-radius: 20px;
  padding: 32px;

  .user-account-card-title {
    display: flex;
    align-items: center;
    margin-bottom: 26px;
    color: boleGetCssVar('text-color', 'primary');

    .user-account-card-icon {
      width: 88px;
      height: 88px;
      margin-right: 26px;
    }

    .user-account-card-title-text {
      font-size: 36px;
      line-height: 50px;
      font-weight: 500;
    }
  }

  .user-account-card-content {
    font-size: 34px;
    font-weight: 400;
    line-height: 48px;
    margin-bottom: 14px;
    color: boleGetCssVar('text-color', 'primary');
    @include ellipsis;
  }

  .user-account-card-remark {
    font-size: 30px;
    line-height: 42px;
    font-weight: 400;
    margin-bottom: 20px;
    color: boleGetCssVar('text-color', 'secondary');
    @include ellipsis;
  }

  .user-account-card-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;

    .user-account-card-action {
      display: flex;
      align-items: center;

      .user-account-card-action-icon {
        width: 40px;
        height: 40px;
        margin-right: 12px;
      }

      .user-account-card-action-text {
        font-size: 26px;
        line-height: 36px;
        color: boleGetCssVar('text-color', 'regular');
      }
    }

    .user-account-card-action + .user-account-card-action {
      margin-left: 64px;
    }
  }
}

 packages/components/src/styles/orderCard.scss

@@ -29,6 +29,18 @@
        font-size: 30px;
        line-height: 42px;
        font-weight: 400;
        display: flex;
        align-items: center;

        &::before {
          content: '';
          display: inline-block;
          width: 8px;
          height: 24px;
          background-color: #fa4640;
          border-radius: 24px;
          margin-right: 12px;
        }
      }
    }


 packages/components/src/views/Order/components/GasOrder.vue

@@ -52,7 +52,7 @@
            item.frontStatus === BlLifeRecharge.constants.LifePayOrderFrontStatusEnum.退款失败
          "
          label="退款发起时间:"
          labelWidth="110px"
          :labelWidth="200"
          :value="
            item?.refundApplyTime && dayjs(item?.refundApplyTime).format('YYYY-MM-DD HH:mm:ss')
          "

 packages/components/src/views/Order/components/PhoneOrder.vue

@@ -52,7 +52,7 @@
            item.frontStatus === BlLifeRecharge.constants.LifePayOrderFrontStatusEnum.退款失败
          "
          label="退款发起时间:"
          labelWidth="110px"
          :labelWidth="200"
          :value="
            item?.refundApplyTime && dayjs(item?.refundApplyTime).format('YYYY-MM-DD HH:mm:ss')
          "

 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(item)">编辑</div>
          <div class="account-card-action" @click="handleDeleteUserAccount(item)">删除</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>
@@ -37,7 +48,10 @@
} 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({
@@ -51,9 +65,15 @@
const { blLifeRecharge } = useLifeRechargeContext();

const TitleMap = {
  [LifeRechargeConstants.LifePayOrderTypeEnum.话费订单]: '手机号',
  [LifeRechargeConstants.LifePayOrderTypeEnum.电费订单]: '电费户号',
  [LifeRechargeConstants.LifePayOrderTypeEnum.燃气订单]: '燃气户号',
  [LifeRechargeConstants.LifePayOrderTypeEnum.话费订单]: '话费',
  [LifeRechargeConstants.LifePayOrderTypeEnum.电费订单]: '电费',
  [LifeRechargeConstants.LifePayOrderTypeEnum.燃气订单]: '燃气费',
};

const TitleIconMap = {
  [LifeRechargeConstants.LifePayOrderTypeEnum.话费订单]: OssAssets.accountCard.Phone,
  [LifeRechargeConstants.LifePayOrderTypeEnum.电费订单]: OssAssets.accountCard.Electric,
  [LifeRechargeConstants.LifePayOrderTypeEnum.燃气订单]: OssAssets.accountCard.Gas,
};

const { infiniteLoadingProps, invalidateQueries } = useInfiniteLoading(