feat: 分包 除了list
This commit is contained in:
241
src/order_pages/orderList/index.tsx
Normal file
241
src/order_pages/orderList/index.tsx
Normal file
@@ -0,0 +1,241 @@
|
||||
import React, { useState } from "react";
|
||||
import { View, Text, Button, Image } from "@tarojs/components";
|
||||
import Taro, { useDidShow } from "@tarojs/taro";
|
||||
import { Avatar, Dialog } from "@nutui/nutui-react-taro";
|
||||
import dayjs from "dayjs";
|
||||
import classnames from "classnames";
|
||||
import orderService, { OrderStatus, CancelType } from "@/services/orderService";
|
||||
import { withAuth } from "@/components";
|
||||
import { payOrder } from "@/utils";
|
||||
import styles from "./index.module.scss";
|
||||
import orderListArrowRight from "@/static/order/orderListArrowRight.svg";
|
||||
|
||||
const OrderList = () => {
|
||||
const [list, setList] = useState([]);
|
||||
|
||||
useDidShow(() => {
|
||||
getOrders();
|
||||
});
|
||||
|
||||
async function getOrders() {
|
||||
const res = await orderService.getOrderList();
|
||||
console.log(res);
|
||||
if (res.code === 0) {
|
||||
setList(res.data.rows);
|
||||
}
|
||||
}
|
||||
|
||||
async function handlePayNow(gameId) {
|
||||
try {
|
||||
const unPaidRes = await orderService.getUnpaidOrder(gameId);
|
||||
if (unPaidRes.code === 0 && unPaidRes.data.has_unpaid_order) {
|
||||
await payOrder(unPaidRes.data.payment_params);
|
||||
getOrders();
|
||||
} else {
|
||||
throw new Error("支付调用失败");
|
||||
}
|
||||
} catch (e) {
|
||||
console.log(e, 1111);
|
||||
Taro.showToast({
|
||||
title: e.message,
|
||||
icon: "none",
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function renderCancelContent(checkOrderInfo) {
|
||||
const { refund_policy = [] } = checkOrderInfo;
|
||||
const policyList = [
|
||||
{
|
||||
time: "申请退款时间",
|
||||
rule: "退款规则",
|
||||
},
|
||||
...refund_policy.map((item, index) => {
|
||||
const [, theTime] = item.application_time.split("undefined ");
|
||||
const theTimeObj = dayjs(theTime);
|
||||
const year = theTimeObj.format("YYYY");
|
||||
const month = theTimeObj.format("M");
|
||||
const day = theTimeObj.format("D");
|
||||
const time = theTimeObj.format("HH:MM");
|
||||
return {
|
||||
time: `${year}年${month}月${day}日${time}${index === 0 ? "前" : "后"}`,
|
||||
rule: item.refund_rule,
|
||||
};
|
||||
}),
|
||||
];
|
||||
return (
|
||||
<View className={styles.refundPolicy}>
|
||||
<View className={styles.moduleTitle}>
|
||||
<Text>退款政策</Text>
|
||||
</View>
|
||||
{/* 订单信息摘要 */}
|
||||
<View className={styles.policyList}>
|
||||
{policyList.map((item, index) => (
|
||||
<View key={index} className={styles.policyItem}>
|
||||
<View className={styles.time}>{item.time}</View>
|
||||
<View className={styles.rule}>{item.rule}</View>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
async function handleCancelOrder(item) {
|
||||
const { order_no, order_status, game_info, amount } = item;
|
||||
if (order_status === OrderStatus.PENDING) {
|
||||
Dialog.open("cancelOrder", {
|
||||
title: "确定取消订单吗？",
|
||||
content: "取消订单后，您将无法恢复订单。请确认是否继续取消？",
|
||||
onConfirm: async () => {
|
||||
try {
|
||||
const cancelRes = await orderService.cancelUnpaidOrder({
|
||||
order_no,
|
||||
cancel_reason: "用户主动取消",
|
||||
});
|
||||
if (cancelRes.code !== 0) {
|
||||
throw new Error(cancelRes.message);
|
||||
}
|
||||
getOrders();
|
||||
} catch (e) {
|
||||
Taro.showToast({
|
||||
title: e.message,
|
||||
icon: "error",
|
||||
});
|
||||
} finally {
|
||||
Dialog.close("cancelOrder");
|
||||
}
|
||||
},
|
||||
onCancel: () => {
|
||||
Dialog.close("cancelOrder");
|
||||
},
|
||||
});
|
||||
return;
|
||||
}
|
||||
const res = await orderService.getCheckOrderInfo(game_info.id);
|
||||
Dialog.open("cancelOrder", {
|
||||
title: "确定取消订单吗？",
|
||||
content: renderCancelContent(res.data),
|
||||
onConfirm: async () => {
|
||||
try {
|
||||
const refundRes = await orderService.applicateRefund({
|
||||
order_no,
|
||||
refund_amount: amount,
|
||||
refund_reason: "用户主动退款",
|
||||
});
|
||||
if (refundRes.code !== 0) {
|
||||
throw new Error(refundRes.message);
|
||||
}
|
||||
getOrders();
|
||||
} catch (e) {
|
||||
Taro.showToast({
|
||||
title: e.message,
|
||||
icon: "error",
|
||||
});
|
||||
} finally {
|
||||
Dialog.close("cancelOrder");
|
||||
}
|
||||
},
|
||||
onCancel: () => {
|
||||
Dialog.close("cancelOrder");
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function handleViewOrderDetail(orderId) {
|
||||
Taro.navigateTo({
|
||||
url: `/order_pages/orderDetail/index?id=${orderId}`,
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<View className={styles.container}>
|
||||
{list.map((item) => {
|
||||
const unPay = item.order_status === OrderStatus.PENDING;
|
||||
const expired =
|
||||
item.order_status === OrderStatus.FINISHED ||
|
||||
[CancelType.TIMEOUT, CancelType.USER].includes(item.cancel_type);
|
||||
const expiredTime = dayjs(item.expire_time).isSame(dayjs(), "day")
|
||||
? dayjs(item.expire_time).format("HH:mm:ss")
|
||||
: dayjs(item.expire_time).format("YYYY-MM-DD HH:mm:ss");
|
||||
const showCancel =
|
||||
item.order_status !== OrderStatus.FINISHED &&
|
||||
item.cancel_type === CancelType.NONE;
|
||||
|
||||
return (
|
||||
<View key={item.id} className={styles.orderItem}>
|
||||
<View className={styles.orderTitle}>
|
||||
<View className={styles.userInfo}>
|
||||
<Avatar
|
||||
className={styles.avatar}
|
||||
src="https://img.yzcdn.cn/vant/cat.jpeg"
|
||||
/>
|
||||
<View className={styles.nickName}>
|
||||
<Text className={styles.nickNameText}>Light</Text>
|
||||
<Image
|
||||
className={styles.arrowRight}
|
||||
src={orderListArrowRight}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
{expired ? (
|
||||
""
|
||||
) : (
|
||||
<View className={styles.paidInfo}>
|
||||
<Text
|
||||
className={classnames(
|
||||
styles.payTime,
|
||||
styles[unPay ? "pending" : "paid"],
|
||||
)}
|
||||
>
|
||||
{unPay
|
||||
? `请在 ${expiredTime} 前支付`
|
||||
: dayjs(item.pay_time).format("YYYY-MM-DD HH:mm:ss")}
|
||||
</Text>
|
||||
<Text
|
||||
className={classnames(
|
||||
styles.payNum,
|
||||
styles[unPay ? "pending" : "paid"],
|
||||
)}
|
||||
>
|
||||
{unPay ? "待支付" : "已支付"} ¥ {item.amount}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
<View
|
||||
className={styles.gameInfo}
|
||||
onClick={handleViewOrderDetail.bind(null, item.id)}
|
||||
>
|
||||
{item?.game_info?.title}
|
||||
</View>
|
||||
<View className={styles.orderActions}>
|
||||
<View className={styles.extraActions}></View>
|
||||
<View className={styles.mainActions}>
|
||||
{showCancel && (
|
||||
<Button
|
||||
className={classnames(styles.button, styles.cancelOrder)}
|
||||
onClick={handleCancelOrder.bind(null, item)}
|
||||
>
|
||||
取消订单
|
||||
</Button>
|
||||
)}
|
||||
{unPay && !expired && (
|
||||
<Button
|
||||
className={classnames(styles.button, styles.payNow)}
|
||||
onClick={handlePayNow.bind(null, item.game_info.id)}
|
||||
>
|
||||
立即支付
|
||||
</Button>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
})}
|
||||
<Dialog id="cancelOrder" />
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
export default withAuth(OrderList);
|
||||
Reference in New Issue
Block a user