feat: 分包 除了list
This commit is contained in:
4
src/order_pages/orderList/index.config.ts
Normal file
4
src/order_pages/orderList/index.config.ts
Normal file
@@ -0,0 +1,4 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '订单列表',
|
||||
navigationBarBackgroundColor: '#FAFAFA'
|
||||
})
|
||||
217
src/order_pages/orderList/index.module.scss
Normal file
217
src/order_pages/orderList/index.module.scss
Normal file
@@ -0,0 +1,217 @@
|
||||
@use "~@/scss/images.scss" as img;
|
||||
|
||||
.container {
|
||||
padding: 12px;
|
||||
background-color: #fafafa;
|
||||
min-height: 100vh;
|
||||
|
||||
.orderItem {
|
||||
width: 100%;
|
||||
height: 222px;
|
||||
background-color: #fff;
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.06);
|
||||
box-shadow: 0 4px 36px 0 rgba(0, 0, 0, 0.06);
|
||||
margin-bottom: 12px;
|
||||
|
||||
.orderTitle {
|
||||
height: 18px;
|
||||
padding: 15px 15px 12px;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.userInfo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 6px;
|
||||
|
||||
.avatar {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.nickName {
|
||||
display: contents;
|
||||
.nickNameText {
|
||||
color: #000;
|
||||
font-feature-settings:
|
||||
"liga" off,
|
||||
"clig" off;
|
||||
font-family: "PingFang SC";
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: 18px;
|
||||
}
|
||||
.arrowRight {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.paidInfo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
|
||||
.payTime {
|
||||
font-feature-settings:
|
||||
"liga" off,
|
||||
"clig" off;
|
||||
font-family: "PingFang SC";
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 18px;
|
||||
|
||||
&.paid {
|
||||
color: rgba(60, 60, 67, 0.6);
|
||||
}
|
||||
|
||||
&.pending {
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
.payNum {
|
||||
font-feature-settings:
|
||||
"liga" off,
|
||||
"clig" off;
|
||||
font-family: "PingFang SC";
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
line-height: 18px;
|
||||
&.paid {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
&.pending {
|
||||
color: #ff3b30;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gameInfo {
|
||||
height: 122px;
|
||||
}
|
||||
|
||||
.orderActions {
|
||||
height: 28px;
|
||||
padding: 12px 12px 15px;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.06);
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.extraActions {
|
||||
}
|
||||
|
||||
.mainActions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
|
||||
& > .button {
|
||||
padding: 4px 10px;
|
||||
height: 28px;
|
||||
border-radius: 999px;
|
||||
border: 0.5px solid rgba(0, 0, 0, 0.06);
|
||||
color: #000;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
line-height: 20px;
|
||||
letter-spacing: -0.23px;
|
||||
|
||||
&:last-child {
|
||||
background: #000;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.cancelOrder {
|
||||
}
|
||||
|
||||
.payNow {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.refundPolicy {
|
||||
.moduleTitle {
|
||||
display: flex;
|
||||
padding: 15px 0 8px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
align-self: stretch;
|
||||
color: #000;
|
||||
font-feature-settings:
|
||||
"liga" off,
|
||||
"clig" off;
|
||||
font-family: "PingFang SC";
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
line-height: 20px;
|
||||
letter-spacing: -0.23px;
|
||||
}
|
||||
|
||||
.policyList {
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.06);
|
||||
background: #fff;
|
||||
box-shadow: 0 4px 36px 0 rgba(0, 0, 0, 0.06);
|
||||
|
||||
.policyItem {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
color: #000;
|
||||
text-align: center;
|
||||
font-feature-settings:
|
||||
"liga" off,
|
||||
"clig" off;
|
||||
font-family: "PingFang SC";
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.06);
|
||||
|
||||
&:nth-child(1) {
|
||||
color: #000;
|
||||
text-align: center;
|
||||
font-feature-settings:
|
||||
"liga" off,
|
||||
"clig" off;
|
||||
font-family: "PingFang SC";
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
line-height: 20px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.time,
|
||||
.rule {
|
||||
width: 50%;
|
||||
padding: 10px 12px;
|
||||
}
|
||||
|
||||
.rule {
|
||||
border-left: 1px solid rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
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