@appthen/cli 1.2.10 → 1.2.12

package/tests/test-app/src/pages/OrderDetail.tsx

@@ -0,0 +1,393 @@
+/**
+ * 订单详情
+ * 订单详细信息展示
+ *
+ * @type Page
+ * @route /order/detail
+ * @screen 1920w
+ * @frames web
+ */
+import React from 'react';
+
+
+
+class IProps {
+  orderId?: number;
+}
+
+/*
+ * 数据与接口请求定义
+ */
+class IState {
+  orderDetail?: {
+    /* @example ORD20240115001 */id?: string,
+    /* @example shipped */status?: string,
+    /* @example 2024-01-15 10:30:00 */createTime?: string,
+    /* @example 2024-01-16 14:20:00 */updateTime?: string,
+    user?: {
+      /* @example 1 */id?: number,
+      /* @example 张三 */name?: string,
+      /* @example 13800138000 */phone?: string,
+      /* @example 北京市海淀区中关村大街1号 */address?: string,
+    },
+    items?: {
+      /* @example 1 */id?: number,
+      /* @example 商品A */name?: string,
+      /* @example 2 */quantity?: number,
+      /* @example 99 */price?: number,
+      /* @example https://via.placeholder.com/80 */image?: string,
+    }[],
+    payment?: {
+      /* @example wechat */method?: string,
+      /* @example 496 */amount?: number,
+      /* @example 2024-01-15 10:35:00 */time?: string,
+      /* @example paid */status?: string,
+    },
+    shipping?: {
+      /* @example express */method?: string,
+      /* @example 顺丰快递 */company?: string,
+      /* @example SF1234567890 */trackingNumber?: string,
+      /* @example 10 */fee?: number,
+      /* @example 北京市海淀区中关村大街1号 */address?: string,
+    },
+  };
+  loading?: boolean;
+  showTimeline?: boolean;
+  activeStep?: number;
+}
+
+class Document extends React.Component<IProps, IState> {
+  state = {
+    orderDetail: {
+      id: 'ORD20240115001',
+      status: 'shipped',
+      createTime: '2024-01-15 10:30:00',
+      updateTime: '2024-01-16 14:20:00',
+      user: {
+        id: 1,
+        name: '张三',
+        phone: '13800138000',
+        address: '北京市海淀区中关村大街1号',
+      },
+      items: [
+        {
+          id: 1,
+          name: '商品A',
+          quantity: 2,
+          price: 99,
+          image: 'https://via.placeholder.com/80',
+        },
+        {
+          id: 2,
+          name: '商品B',
+          quantity: 1,
+          price: 199,
+          image: 'https://via.placeholder.com/80',
+        },
+        {
+          id: 3,
+          name: '商品C',
+          quantity: 3,
+          price: 49,
+          image: 'https://via.placeholder.com/80',
+        },
+      ],
+      payment: {
+        method: 'wechat',
+        amount: 496,
+        time: '2024-01-15 10:35:00',
+        status: 'paid',
+      },
+      shipping: {
+        method: 'express',
+        company: '顺丰快递',
+        trackingNumber: 'SF1234567890',
+        fee: 10,
+        address: '北京市海淀区中关村大街1号',
+      },
+    },
+    loading: false,
+    showTimeline: true,
+    activeStep: 2,
+  };
+
+  toggleTimeline() {
+    this.setState({
+      showTimeline: !this.state.showTimeline,
+    });
+  }
+
+  handleCancelOrder() {
+    console.log('取消订单');
+  }
+
+  handleRefund() {
+    console.log('申请退款');
+  }
+
+  handleContactSupport() {
+    console.log('联系客服');
+  }
+
+  render() {
+    // 💀 死亡：变量声明 - 解构赋值
+    const { orderDetail, loading, showTimeline, activeStep } = this.state;
+
+    // 💀 死亡：变量声明 - 计算属性
+    // 💀 死亡：变量声明 - 计算属性
+    const totalItems = orderDetail.items.reduce(
+      (sum, item) => sum + item.quantity,
+      0
+    );
+    const totalAmount = orderDetail.items.reduce(
+      (sum, item) => sum + item.price * item.quantity,
+      0
+    );
+    const finalAmount = totalAmount + orderDetail.shipping.fee;
+
+    // 💀 死亡：变量声明 - 状态配置
+    // 💀 死亡：变量声明 - 状态配置
+    const statusConfig = {
+      pending: {
+        label: '待付款',
+        color: 'orange',
+        step: 0,
+      },
+      paid: {
+        label: '已付款',
+        color: 'blue',
+        step: 1,
+      },
+      shipped: {
+        label: '已发货',
+        color: 'green',
+        step: 2,
+      },
+      delivered: {
+        label: '已送达',
+        color: 'cyan',
+        step: 3,
+      },
+      completed: {
+        label: '已完成',
+        color: 'green',
+        step: 4,
+      },
+      cancelled: {
+        label: '已取消',
+        color: 'red',
+        step: -1,
+      },
+    };
+
+    // 💀 死亡：变量声明 - 支付方式配置
+    // 💀 死亡：变量声明 - 支付方式配置
+    const paymentMethods = {
+      wechat: {
+        label: '微信支付',
+        icon: '💚',
+      },
+      alipay: {
+        label: '支付宝',
+        icon: '💙',
+      },
+      card: {
+        label: '银行卡',
+        icon: '💳',
+      },
+    };
+
+    // 💀 死亡：if 语句 - 条件渲染
+    // 💀 死亡：if 语句 - 条件渲染
+    if (loading) {
+      return <View className="p-6">加载中...</View>;
+    }
+
+    // 💀 死亡：变量声明 - 当前状态
+    // 💀 死亡：变量声明 - 当前状态
+    const currentStatus = statusConfig[orderDetail.status];
+
+    // 💀 死亡：变量声明 - JSX 片段
+    // 💀 死亡：变量声明 - JSX 片段
+    const orderItemCard = item => (
+      <View
+        key={item.id}
+        className="flex items-center gap-4 p-4 border rounded"
+      >
+        <Image src={item.image} width={80} height={80} className="rounded" />
+        <View className="flex-1">
+          <Text className="font-bold">{item.name}</Text>
+          <Text className="text-gray-500">数量: {item.quantity}</Text>
+        </View>
+        <Text className="text-lg font-bold">¥{item.price.toFixed(2)}</Text>
+      </View>
+    );
+
+    // 💀 死亡：变量声明 - 时间线数据
+    // 💀 死亡：变量声明 - 时间线数据
+    const timelineData = [
+      {
+        time: '2024-01-15 10:30',
+        title: '订单创建',
+        description: '订单创建成功',
+      },
+      {
+        time: '2024-01-15 10:35',
+        title: '支付成功',
+        description: '已完成支付',
+      },
+      {
+        time: '2024-01-16 14:20',
+        title: '已发货',
+        description: '顺丰快递已揽收',
+      },
+    ];
+    return (
+      <Page className="p-[24px] bg-[var(--gray-50)] min-h-screen">
+        <View className="mb-[24px]">
+          <Text className="text-2xl font-bold text-[#1f2937]">订单详情</Text>
+          <Text className="text-[#6b7280] text-sm mt-[4px]">
+            订单详细信息展示
+          </Text>
+        </View>
+        <Card className="mb-[24px]">
+          <View className="flex items-center justify-between">
+            <View>
+              <Tag
+                color={currentStatus.color}
+                className="text-lg pl-[16px] pr-[16px] pt-[8px] pb-[8px]"
+              >
+                <Text>{currentStatus.label}</Text>
+              </Tag>
+              <Text className="text-[#6b7280] mt-[8px]">
+                订单号:{orderDetail.id}
+              </Text>
+            </View>
+            <Steps current={currentStatus.step}>
+              <Steps.Step title="待付款" description="等待买家付款" />
+              <Steps.Step title="已付款" description="买家已付款" />
+              <Steps.Step title="已发货" description="商家已发货" />
+              <Steps.Step title="已完成" description="交易完成" />
+            </Steps>
+          </View>
+        </Card>
+        <Card className="mb-[24px]">
+          <Text className="block text-lg font-bold mb-[16px]">基本信息</Text>
+          <Descriptions column={2}>
+            <Descriptions.Item label="订单号">
+              <Text>{orderDetail.id}</Text>
+            </Descriptions.Item>
+            <Descriptions.Item label="下单时间">
+              <Text>{orderDetail.createTime}</Text>
+            </Descriptions.Item>
+            <Descriptions.Item label="收货人">
+              <Text>{orderDetail.user.name}</Text>
+            </Descriptions.Item>
+            <Descriptions.Item label="联系电话">
+              <Text>{orderDetail.user.phone}</Text>
+            </Descriptions.Item>
+            <Descriptions.Item label="收货地址" span={2}>
+              <Text>{orderDetail.shipping.address}</Text>
+            </Descriptions.Item>
+          </Descriptions>
+        </Card>
+        <Card className="mb-[24px]">
+          <Text className="block text-lg font-bold mb-[16px]">商品列表</Text>
+          <View className="space-y-3">
+            {orderDetail.items.map((item, index) => (
+              <Text>{orderItemCard(item)}</Text>
+            ))}
+          </View>
+          <Divider />
+          <View className="text-[var(--right)]">
+            <Text>商品总计:</Text>
+            <Text className="text-xl font-bold ml-[8px]">
+              ¥{totalAmount.toFixed(2)}
+            </Text>
+          </View>
+          <View className="text-[var(--right)] mt-[8px]">
+            <Text>运费:</Text>
+            <Text className="ml-[8px]">
+              ¥{orderDetail.shipping.fee.toFixed(2)}
+            </Text>
+          </View>
+          <View className="text-[var(--right)] mt-[8px]">
+            <Text>实付款:</Text>
+            <Text className="text-2xl font-bold text-[#ef4444] ml-[8px]">
+              ¥{finalAmount.toFixed(2)}
+            </Text>
+          </View>
+        </Card>
+        <Card className="mb-[24px]">
+          <Text className="block text-lg font-bold mb-[16px]">支付信息</Text>
+          <Descriptions column={2}>
+            <Descriptions.Item label="支付方式">
+              <Text>{paymentMethods[orderDetail.payment.method].icon}</Text>
+              <Text>{paymentMethods[orderDetail.payment.method].label}</Text>
+            </Descriptions.Item>
+            <Descriptions.Item label="支付金额">
+              ¥<Text>{orderDetail.payment.amount.toFixed(2)}</Text>
+            </Descriptions.Item>
+            <Descriptions.Item label="支付时间">
+              <Text>{orderDetail.payment.time}</Text>
+            </Descriptions.Item>
+            <Descriptions.Item label="支付状态">
+              <Tag color="green">已支付</Tag>
+            </Descriptions.Item>
+          </Descriptions>
+        </Card>
+        <Card className="mb-[24px]">
+          <View className="flex items-center justify-between mb-[16px]">
+            <Text className="text-lg font-bold">物流信息</Text>
+            <Button onClick={() => this.toggleTimeline()}>
+              {showTimeline ? '隐藏' : '显示'}时间线
+            </Button>
+          </View>
+          <Descriptions column={2}>
+            <Descriptions.Item label="快递公司">
+              <Text>{orderDetail.shipping.company}</Text>
+            </Descriptions.Item>
+            <Descriptions.Item label="运单号">
+              <Text>{orderDetail.shipping.trackingNumber}</Text>
+            </Descriptions.Item>
+          </Descriptions>
+          {!!showTimeline && (
+            <View className="mt-[16px]">
+              <Timeline>
+                {timelineData.map((item, index) => (
+                  <Timeline.Item key={index}>
+                    <Text className="font-bold">{item.title}</Text>
+                    <Text className="block text-[#6b7280] text-sm">
+                      {item.time}
+                    </Text>
+                    <Text className="text-[#4b5563]">{item.description}</Text>
+                  </Timeline.Item>
+                ))}
+              </Timeline>
+            </View>
+          )}
+        </Card>
+        <Card>
+          <Space>
+            <Button onClick={() => this.handleContactSupport()}>
+              联系客服
+            </Button>
+            {!!(orderDetail.status === 'pending') && (
+              <Button onClick={() => this.handleCancelOrder()} danger={true}>
+                取消订单
+              </Button>
+            )}
+            {!!(orderDetail.status === 'shipped') && (
+              <Button type="primary" onClick={() => this.handleRefund()}>
+                申请退款
+              </Button>
+            )}
+            <Button>再次购买</Button>
+          </Space>
+        </Card>
+      </Page>
+    );
+  }
+}
+
+export default Document;