feat: 分包 除了list
This commit is contained in:
359
src/order_pages/orderDetail/index.tsx
Normal file
359
src/order_pages/orderDetail/index.tsx
Normal file
@@ -0,0 +1,359 @@
|
||||
import React, { useState } from "react";
|
||||
import { View, Text, Button, Image } from "@tarojs/components";
|
||||
import Taro, { useDidShow, useRouter } from "@tarojs/taro";
|
||||
import dayjs from "dayjs";
|
||||
import orderService, {
|
||||
GameOrderRes,
|
||||
OrderStatus,
|
||||
} from "@/services/orderService";
|
||||
import {
|
||||
payOrder,
|
||||
delay,
|
||||
calculateDistance,
|
||||
getCurrentLocation,
|
||||
} from "@/utils";
|
||||
import detailService, { GameData } from "@/services/detailService";
|
||||
import { withAuth } from "@/components";
|
||||
import img from "@/config/images";
|
||||
import { DECLAIMER } from "./config";
|
||||
import styles from "./index.module.scss";
|
||||
|
||||
dayjs.locale("zh-cn");
|
||||
|
||||
function GameInfo(props) {
|
||||
const { detail, currentLocation, orderDetail } = props;
|
||||
const { order_status } = orderDetail;
|
||||
const { latitude, longitude, location, location_name, start_time, end_time } =
|
||||
detail || {};
|
||||
|
||||
const openMap = () => {
|
||||
Taro.openLocation({
|
||||
latitude, // 纬度（必填）
|
||||
longitude, // 经度（必填）
|
||||
name: location_name, // 位置名（可选）
|
||||
address: location, // 地址详情（可选）
|
||||
scale: 15, // 地图缩放级别（1-28）
|
||||
});
|
||||
};
|
||||
|
||||
const [c_latitude, c_longitude] = currentLocation;
|
||||
const distance =
|
||||
c_latitude + c_longitude === 0
|
||||
? 0
|
||||
: calculateDistance(c_latitude, c_longitude, latitude, longitude) / 1000;
|
||||
|
||||
const startTime = dayjs(start_time);
|
||||
const endTime = dayjs(end_time);
|
||||
const game_length = endTime.diff(startTime, "minutes") / 60;
|
||||
|
||||
const startMonth = startTime.format("M");
|
||||
const startDay = startTime.format("D");
|
||||
const theDayOfWeek = startTime.format("dddd");
|
||||
const startDate = `${startMonth}月${startDay}日 ${theDayOfWeek}`;
|
||||
const gameRange = `${startTime.format("HH:mm")} - ${endTime.format("HH:mm")}`;
|
||||
|
||||
return (
|
||||
<View className={styles.gameInfoContainer}>
|
||||
{Boolean(order_status) && order_status !== OrderStatus.PENDING && (
|
||||
<>
|
||||
<View className={styles.paidInfo}>已支付 ¥ 90</View>
|
||||
<View className={styles.gameStatus}>
|
||||
<Text className={styles.statusText}>球局暂未开始</Text>
|
||||
<Text>球局开始前2小时，我们将通过短信通知你</Text>
|
||||
</View>
|
||||
</>
|
||||
)}
|
||||
<View className={styles.gameInfo}>
|
||||
{/* Date and Weather */}
|
||||
<View className={styles.gameInfoDateWeather}>
|
||||
{/* Calendar and Date time */}
|
||||
<View className={styles.gameInfoDateWeatherCalendarDate}>
|
||||
{/* Calendar */}
|
||||
<View className={styles.gameInfoDateWeatherCalendarDateCalendar}>
|
||||
<View className={styles.month}>{startMonth}月</View>
|
||||
<View className={styles.day}>{startDay}</View>
|
||||
</View>
|
||||
{/* Date time */}
|
||||
<View className={styles.gameInfoDateWeatherCalendarDateDate}>
|
||||
<View className={styles.date}>{startDate}</View>
|
||||
<View className={styles.venueTime}>
|
||||
{gameRange} （{game_length}小时）
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
{/* Place */}
|
||||
<View className={styles.gameInfoPlace}>
|
||||
{/* venue location message */}
|
||||
<View className={styles.locationMessage}>
|
||||
{/* location icon */}
|
||||
<View className={styles.locationMessageIcon}>
|
||||
<Image
|
||||
className={styles.locationMessageIconImage}
|
||||
src="https://bimwe.oss-cn-shanghai.aliyuncs.com/front/ball/images/43aab7e9-061e-4e3b-88c6-61c19b660b22.png"
|
||||
/>
|
||||
</View>
|
||||
{/* location message */}
|
||||
<View className={styles.locationMessageText}>
|
||||
{/* venue name and distance */}
|
||||
<View
|
||||
className={styles.locationMessageTextNameDistance}
|
||||
onClick={openMap}
|
||||
>
|
||||
<Text>{location_name || "-"}</Text>
|
||||
{distance ? (
|
||||
<>
|
||||
<Text>·</Text>
|
||||
<Text>{distance.toFixed(1)}km</Text>
|
||||
</>
|
||||
) : null}
|
||||
|
||||
<Image
|
||||
className={styles.locationMessageTextNameDistanceArrow}
|
||||
src={img.ICON_DETAIL_ARROW_RIGHT}
|
||||
/>
|
||||
</View>
|
||||
{/* venue address */}
|
||||
<View className={styles.locationMessageTextAddress}>
|
||||
<Text>{location || "-"}</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
{/* Action bar */}
|
||||
<View className={styles.gameInfoActions}></View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
function OrderMsg(props) {
|
||||
const { detail, checkOrderInfo } = props;
|
||||
const {
|
||||
start_time,
|
||||
end_time,
|
||||
location,
|
||||
location_name,
|
||||
wechat_contact,
|
||||
price,
|
||||
} = detail;
|
||||
const { order_info: { registrant_nickname } = {} } = checkOrderInfo;
|
||||
const startTime = dayjs(start_time);
|
||||
const endTime = dayjs(end_time);
|
||||
const startYear = startTime.format("YYYY");
|
||||
const startMonth = startTime.format("M");
|
||||
const startDay = startTime.format("D");
|
||||
const startDate = `${startYear}年${startMonth}月${startDay}日`;
|
||||
const gameRange = `${startTime.format("HH:mm")} - ${endTime.format("HH:mm")}`;
|
||||
const summary = [
|
||||
{
|
||||
title: "时间",
|
||||
content: `${startDate} ${gameRange}`,
|
||||
},
|
||||
{
|
||||
title: "地址",
|
||||
content: (
|
||||
<View className={styles.location}>
|
||||
<Text>{location}</Text>
|
||||
<Text>{location_name}</Text>
|
||||
</View>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "组织者昵称",
|
||||
content: registrant_nickname,
|
||||
},
|
||||
{
|
||||
title: "组织者电话",
|
||||
content: wechat_contact,
|
||||
},
|
||||
{
|
||||
title: "费用",
|
||||
content: `${price} 元 / 人`,
|
||||
},
|
||||
];
|
||||
return (
|
||||
<View className={styles.orderSummary}>
|
||||
<View className={styles.moduleTitle}>
|
||||
<Text>确认订单信息</Text>
|
||||
</View>
|
||||
{/* 订单信息摘要 */}
|
||||
<View className={styles.summaryList}>
|
||||
{summary.map((item, index) => (
|
||||
<View key={index} className={styles.summaryItem}>
|
||||
<Text className={styles.title}>{item.title}</Text>
|
||||
<View className={styles.content}>{item.content}</View>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
function RefundPolicy(props) {
|
||||
const { checkOrderInfo } = props;
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
function Disclaimer() {
|
||||
return (
|
||||
<View className={styles.declaimer}>
|
||||
<Text className={styles.title}>免责声明</Text>
|
||||
<Text className={styles.content}>{DECLAIMER}</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const OrderCheck = () => {
|
||||
const { params } = useRouter();
|
||||
const { id: stringId, gameId: stringGameId } = params;
|
||||
const [id, gameId] = [Number(stringId), Number(stringGameId)];
|
||||
const [detail, setDetail] = useState<GameData | {}>({});
|
||||
const [location, setLocation] = useState<number[]>([0, 0]);
|
||||
const [checkOrderInfo, setCheckOrderInfo] = useState<GameOrderRes | {}>({});
|
||||
const [orderDetail, setOrderDetail] = useState({});
|
||||
|
||||
useDidShow(async () => {
|
||||
let gameDetail = {};
|
||||
if (id) {
|
||||
const res = await orderService.getOrderDetail(id);
|
||||
if (res.code === 0) {
|
||||
setOrderDetail(res.data);
|
||||
gameDetail = res.data.game_info;
|
||||
}
|
||||
} else if (gameId) {
|
||||
const res = await detailService.getDetail(gameId);
|
||||
if (res.code === 0) {
|
||||
gameDetail = res.data;
|
||||
}
|
||||
}
|
||||
if (gameDetail.id) {
|
||||
setDetail(gameDetail);
|
||||
onInit(gameDetail.id);
|
||||
}
|
||||
});
|
||||
|
||||
async function checkOrder(gid) {
|
||||
const orderRes = await orderService.getCheckOrderInfo(gid);
|
||||
setCheckOrderInfo(orderRes.data);
|
||||
}
|
||||
|
||||
async function onInit(gid) {
|
||||
checkOrder(gid);
|
||||
const location = await getCurrentLocation();
|
||||
setLocation([location.latitude, location.longitude]);
|
||||
}
|
||||
|
||||
async function getPaymentParams() {
|
||||
const unPaidRes = await orderService.getUnpaidOrder(detail.id);
|
||||
if (unPaidRes.code === 0 && unPaidRes.data.has_unpaid_order) {
|
||||
return unPaidRes.data.payment_params;
|
||||
}
|
||||
const createOrderRes = await orderService.createOrder(detail.id);
|
||||
if (createOrderRes.code === 0) {
|
||||
return createOrderRes.data.payment_params;
|
||||
}
|
||||
throw new Error("支付调用失败");
|
||||
}
|
||||
|
||||
//TODO: get order msg from id
|
||||
const handlePay = async () => {
|
||||
Taro.showLoading({
|
||||
title: "支付中...",
|
||||
mask: true,
|
||||
});
|
||||
|
||||
try {
|
||||
const payment_params = await getPaymentParams();
|
||||
await payOrder(payment_params);
|
||||
Taro.hideLoading();
|
||||
Taro.showToast({
|
||||
title: "支付成功",
|
||||
icon: "success",
|
||||
});
|
||||
await delay(1000);
|
||||
Taro.navigateBack({
|
||||
delta: 1,
|
||||
});
|
||||
} catch (error) {
|
||||
Taro.hideLoading();
|
||||
Taro.showToast({
|
||||
title: error.message,
|
||||
icon: "none",
|
||||
});
|
||||
}
|
||||
};
|
||||
if (!id && !gameId) {
|
||||
return (
|
||||
<View className={styles.errorTip}>
|
||||
<Text>异常订单</Text>
|
||||
<Button
|
||||
type="warn"
|
||||
onClick={() => {
|
||||
Taro.redirectTo({ url: "/pages/list/index" });
|
||||
}}
|
||||
>
|
||||
回到首页
|
||||
</Button>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<View className={styles.container}>
|
||||
{/* Game Date and Address */}
|
||||
<GameInfo
|
||||
detail={detail}
|
||||
orderDetail={orderDetail}
|
||||
currentLocation={location}
|
||||
/>
|
||||
{/* Order message */}
|
||||
<OrderMsg detail={detail} checkOrderInfo={checkOrderInfo} />
|
||||
{/* Refund policy */}
|
||||
<RefundPolicy checkOrderInfo={checkOrderInfo} />
|
||||
{/* Disclaimer */}
|
||||
<Disclaimer />
|
||||
{(!id || orderDetail.order_status === OrderStatus.PENDING) && (
|
||||
<Button className={styles.payButton} onClick={handlePay}>
|
||||
{orderDetail.order_status === OrderStatus.PENDING ? "继续" : "确认"}
|
||||
支付
|
||||
</Button>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
export default withAuth(OrderCheck);
|
||||
Reference in New Issue
Block a user