feat: 订单

wupengfei

2025-02-24 fe5fc18b6b1810a61df6ed7d94957f449ca05488

feat: 订单

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

@@ -6,7 +6,7 @@
        <div class="order-card-title-status">{{ status }}</div>
      </div>
      <div class="order-card-title-ordernum">
        {{ `订单编号：${'JF202502191515350002'}` }}
        {{ `订单编号：${orderNo}` }}
      </div>
    </div>
    <div class="order-card-content">
@@ -23,37 +23,8 @@
type Props = {
  title: string;
  status: string;
  orderNo: string;
};

const props = withDefaults(defineProps<Props>(), {});
</script>
<style lang="scss">
.order-card {
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  padding: 20px;

  .order-card-title {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #e8e8e8;
    padding-bottom: 20px;
    margin-bottom: 20px;

    .order-card-title-top {
      display: flex;
      justify-content: space-between;
      color: #333333;
      font-size: 28px;
      line-height: 40px;
      font-weight: 600;
      margin-bottom: 12px;
    }

    .order-card-title-ordernum {
      font-size: 24px;
      color: #999999;
    }
  }
}
</style>

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

@@ -27,21 +27,4 @@
});
</script>

<style lang="scss">
.order-card-item {
  display: flex;
  font-size: 28px;
  line-height: 40px;
  margin-bottom: 15px;

  .order-card-item-label {
    color: #333333;
  }

  .order-card-item-value {
    color: #666666;
    flex: 1;
    min-width: 0;
  }
}
</style>
<style lang="scss"></style>

 packages/components/src/components/NoData/NoData.vue

@@ -8,7 +8,7 @@
<script lang="ts">
import { defineComponent } from 'vue';

const NoDataImage = `'https://parkmanagement.oss-cn-hangzhou.aliyuncs.com/mini/assets/no-data.png`;
const NoDataImage = 'https://parkmanagement.oss-cn-hangzhou.aliyuncs.com/mini/assets/no-data.png';

export default defineComponent({
  name: 'NoData',

 packages/components/src/styles/index.scss

@@ -6,6 +6,7 @@
@use './rechargeGrid.scss' as *;
@use './components.scss' as *;
@use './loading.scss' as *;
@use './orderCard.scss' as *;

:root,
page {

 packages/components/src/styles/orderCard.scss

New file
@@ -0,0 +1,45 @@
.order-card {
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  padding: 20px;

  .order-card-title {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #e8e8e8;
    padding-bottom: 20px;
    margin-bottom: 20px;

    .order-card-title-top {
      display: flex;
      justify-content: space-between;
      color: #333333;
      font-size: 28px;
      line-height: 40px;
      font-weight: 600;
      margin-bottom: 12px;
    }

    .order-card-title-ordernum {
      font-size: 24px;
      color: #999999;
    }
  }
}

.order-card-item {
  display: flex;
  font-size: 28px;
  line-height: 40px;
  margin-bottom: 15px;

  .order-card-item-label {
    color: #333333;
  }

  .order-card-item-value {
    color: #666666;
    flex: 1;
    min-width: 0;
  }
}

 packages/components/src/styles/rechargeGrid.scss

@@ -130,4 +130,12 @@
      }
    }
  }

  &.electric {
    .nut-dialog {
      .nut-dialog__content {
        max-height: 700px;
      }
    }
  }
}

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

@@ -1,24 +1,36 @@
<template>
  <!-- <InfiniteLoading scrollViewClassName="common-infinite-scroll-list" v-bind="infiniteLoadingProps">
    <template #renderItem="{ item }"> -->
  <OrderCard title="电费充值" status="待支付">
    <OrderCardItem label="充值地区:" :value="'18888888888'" />
    <OrderCardItem label="充值户号:" :value="'18888888888'" />
    <OrderCardItem label="下单时间:" :value="'2025-02-19  17:15:54'" />
    <OrderCardItem label="充值金额:" :value="'18888888888'" />
    <OrderCardItem label="优惠金额:" :value="'18888888888'" />
    <OrderCardItem label="实付金额:" :value="'18888888888'" />
    <OrderCardItem label="支付时间:" :value="'2025-02-19  17:15:54'" />
    <OrderCardItem label="完成时间:" :value="'2025-02-19  17:15:54'" />
  </OrderCard>
  <!-- </template>
  </InfiniteLoading> -->
  <InfiniteLoading scrollViewClassName="common-infinite-scroll-list" v-bind="infiniteLoadingProps">
    <template #renderItem="{ item }">
      <OrderCard title="电费充值" status="待支付" :order-no="item?.orderNo">
        <OrderCardItem label="充值地区:" :value="'18888888888'" />
        <OrderCardItem label="充值户号:" :value="'18888888888'" />
        <OrderCardItem
          label="下单时间:"
          :value="dayjs(item?.creationTime).format('YYYY-MM-DD HH:mm:ss')"
        />
        <OrderCardItem label="充值金额:" :value="item?.rechargeAmount" />
        <OrderCardItem label="优惠金额:" :value="item?.discountAmount" />
        <OrderCardItem label="实付金额:" :value="item?.payAmount" />
        <OrderCardItem
          label="支付时间:"
          :value="dayjs(item?.payTime).format('YYYY-MM-DD HH:mm:ss')"
        />
        <OrderCardItem
          label="完成时间:"
          :value="dayjs(item?.finishTime).format('YYYY-MM-DD HH:mm:ss')"
        />
      </OrderCard>
    </template>
  </InfiniteLoading>
</template>

<script setup lang="ts">
import InfiniteLoading from '../../../components/InfiniteLoading/InfiniteLoading.vue';
import OrderCard from '../../../components/Card/OrderCard.vue';
import OrderCardItem from '../../../components/Card/OrderCardItem.vue';
import { useGetUserLifePayOrderPage } from '../../../hooks';
import { BlLifeRecharge } from '../../../utils';
import dayjs from 'dayjs';

defineOptions({
  name: 'ElectricOrder',
@@ -28,7 +40,7 @@

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

const infiniteLoadingProps = {};
const { infiniteLoadingProps } = useGetUserLifePayOrderPage({
  lifePayOrderType: BlLifeRecharge.constants.LifePayOrderTypeEnum.电费订单,
});
</script>

<style lang="scss"></style>

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

@@ -1,14 +1,23 @@
<template>
  <InfiniteLoading scrollViewClassName="common-infinite-scroll-list" v-bind="infiniteLoadingProps">
    <template #renderItem="{ item }">
      <OrderCard title="话费充值" status="待支付">
      <OrderCard title="话费充值" status="待支付" :order-no="item?.orderNo">
        <OrderCardItem label="充值账号:" :value="'18888888888'" />
        <OrderCardItem label="下单时间:" :value="'18888888888'" />
        <OrderCardItem label="充值金额:" :value="'18888888888'" />
        <OrderCardItem label="优惠金额:" :value="'18888888888'" />
        <OrderCardItem label="实付金额:" :value="'18888888888'" />
        <OrderCardItem label="支付时间:" :value="'2025-02-19  17:15:54'" />
        <OrderCardItem label="完成时间:" :value="'2025-02-19  17:15:54'" />
        <OrderCardItem
          label="下单时间:"
          :value="dayjs(item?.creationTime).format('YYYY-MM-DD HH:mm:ss')"
        />
        <OrderCardItem label="充值金额:" :value="item?.rechargeAmount" />
        <OrderCardItem label="优惠金额:" :value="item?.discountAmount" />
        <OrderCardItem label="实付金额:" :value="item?.payAmount" />
        <OrderCardItem
          label="支付时间:"
          :value="dayjs(item?.payTime).format('YYYY-MM-DD HH:mm:ss')"
        />
        <OrderCardItem
          label="完成时间:"
          :value="dayjs(item?.finishTime).format('YYYY-MM-DD HH:mm:ss')"
        />
      </OrderCard>
    </template>
  </InfiniteLoading>
@@ -20,6 +29,7 @@
import OrderCardItem from '../../../components/Card/OrderCardItem.vue';
import { useGetUserLifePayOrderPage } from '../../../hooks';
import { BlLifeRecharge } from '../../../utils';
import dayjs from 'dayjs';

defineOptions({
  name: 'PhoneOrder',

 packages/components/src/views/electricBillRecharge/electricBillRecharge.vue

@@ -168,14 +168,3 @@
  emit('goPay');
}
</script>
<style lang="scss">
.order-bill-recharge {
  &.electric {
    .nut-dialog {
      .nut-dialog__content {
        max-height: 700px;
      }
    }
  }
}
</style>

 packages/services/api/AliPayNotify.ts

@@ -2,23 +2,8 @@
// @ts-ignore
import { request } from '@/utils/request';

/** 此处后端没有提供注释 GET /api/AliPayNotify/AliRechargeNotify */
export async function aliRechargeNotify(
  // 叠加生成的Param类型 (非body参数swagger默认没有生成对象)
  params: API.APIaliRechargeNotifyParams,
  options?: API.RequestConfig
) {
  return request<any>('/api/AliPayNotify/AliRechargeNotify', {
    method: 'GET',
    params: {
      ...params,
    },
    ...(options || {}),
  });
}

/** 支付宝充值回调通知 POST /api/AliPayNotify/AliRechargeNotify */
export async function aliRechargeNotify_2(options?: API.RequestConfig) {
export async function aliRechargeNotify(options?: API.RequestConfig) {
  return request<any>('/api/AliPayNotify/AliRechargeNotify', {
    method: 'POST',
    ...(options || {}),
@@ -47,3 +32,18 @@
    ...(options || {}),
  });
}

/** 此处后端没有提供注释 GET /api/AliPayNotify/TestAliRechargeNotify */
export async function testAliRechargeNotify(
  // 叠加生成的Param类型 (非body参数swagger默认没有生成对象)
  params: API.APItestAliRechargeNotifyParams,
  options?: API.RequestConfig
) {
  return request<any>('/api/AliPayNotify/TestAliRechargeNotify', {
    method: 'GET',
    params: {
      ...params,
    },
    ...(options || {}),
  });
}

 packages/services/api/typings.d.ts

@@ -917,12 +917,6 @@
    id?: string;
  }

  interface APIaliRechargeNotifyParams {
    outTradeNo?: string;
    tradeNo?: string;
    success?: boolean;
  }

  interface APIapiDefinitionParams {
    includeTypes?: boolean;
  }
@@ -1889,6 +1883,12 @@
    id?: string;
  }

  interface APItestAliRechargeNotifyParams {
    outTradeNo?: string;
    tradeNo?: string;
    success?: boolean;
  }

  interface APItestCallBackParams {
    type?: number;
  }