first commit
Some checks failed
Some checks failed
This commit is contained in:
172
app/move-car/display/page.tsx
Normal file
172
app/move-car/display/page.tsx
Normal file
@@ -0,0 +1,172 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
|
||||
|
||||
import { toast } from "sonner";
|
||||
import { Car, Phone, Bell, Info } from "lucide-react";
|
||||
|
||||
export default function MoveCarDisplay() {
|
||||
const [plateNumber, setPlateNumber] = useState("");
|
||||
const [phoneNumber, setPhoneNumber] = useState("");
|
||||
const [token, setToken] = useState("");
|
||||
const [uid, setUid] = useState("");
|
||||
const [newEnergy, setNewEnergy] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
setPlateNumber(urlParams.get("plateNumber") || "");
|
||||
setPhoneNumber(urlParams.get("phoneNumber") || "");
|
||||
setToken(urlParams.get("token") || "");
|
||||
setUid(urlParams.get("uid") || "");
|
||||
setNewEnergy(urlParams.get("new") === "true");
|
||||
}, []);
|
||||
|
||||
const notifyOwner = () => {
|
||||
const currentTime = new Date().getTime();
|
||||
const lastNotifyTimeKey = "lastNotifyTime" + plateNumber;
|
||||
const lastNotifyTime = localStorage.getItem(lastNotifyTimeKey);
|
||||
const timeDifference = lastNotifyTime
|
||||
? (currentTime - parseInt(lastNotifyTime)) / 1000
|
||||
: 0;
|
||||
|
||||
if (lastNotifyTime && timeDifference < 60) {
|
||||
toast.warning("您已发送过通知,请1分钟后再次尝试。");
|
||||
return;
|
||||
}
|
||||
|
||||
const promise = fetch("https://wxpusher.zjiecode.com/api/send/message", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
appToken: token,
|
||||
content: "您好,有人需要您挪车,请及时处理。",
|
||||
contentType: 1,
|
||||
uids: [uid],
|
||||
}),
|
||||
})
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
if (data.code === 1000) {
|
||||
localStorage.setItem(lastNotifyTimeKey, currentTime.toString());
|
||||
return "通知已发送!";
|
||||
} else {
|
||||
throw new Error("通知发送失败");
|
||||
}
|
||||
});
|
||||
|
||||
toast.promise(promise, {
|
||||
loading: '正在发送通知...',
|
||||
success: (data) => data,
|
||||
error: '通知发送失败,请稍后重试',
|
||||
});
|
||||
};
|
||||
|
||||
const callNumber = () => {
|
||||
window.location.href = "tel:" + phoneNumber;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-4 max-w-md mx-auto pt-4 px-2">
|
||||
{/* 车牌展示区域 */}
|
||||
<div className="flex justify-center py-2">
|
||||
<div
|
||||
className={`relative flex h-32 w-full items-center justify-center overflow-hidden rounded-lg border-[3px] shadow-xl ${
|
||||
newEnergy
|
||||
? "border-black/80 bg-linear-to-b from-[#F0F3F5] to-[#42C063] text-black"
|
||||
: "border-white bg-[#003399] text-white"
|
||||
}`}
|
||||
>
|
||||
{/* 装饰性反光效果 */}
|
||||
<div className="pointer-events-none absolute inset-0 bg-linear-to-br from-white/20 to-transparent opacity-50" />
|
||||
|
||||
{/* 车牌边框内饰线 (仅蓝牌显示) */}
|
||||
{!newEnergy && (
|
||||
<div className="absolute inset-1 rounded-md border border-white/50" />
|
||||
)}
|
||||
|
||||
<div className="relative z-10 flex items-center gap-1 font-mono text-5xl font-bold tracking-widest">
|
||||
<span>{plateNumber.slice(0, 2)}</span>
|
||||
{newEnergy ? (
|
||||
<span className="mx-1 h-2 w-2 rounded-full bg-current opacity-20" />
|
||||
) : (
|
||||
<span className="mx-2 h-2 w-2 rounded-full bg-current opacity-80" />
|
||||
)}
|
||||
<span>{plateNumber.slice(2)}</span>
|
||||
</div>
|
||||
|
||||
{/* 新能源标志水印 (仅绿牌显示) */}
|
||||
{newEnergy && (
|
||||
<div className="absolute -bottom-6 -right-6 rotate-12 opacity-10">
|
||||
<Car className="h-24 w-24" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 车辆信息 */}
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-sm font-medium flex items-center gap-2 text-muted-foreground">
|
||||
<Info className="h-4 w-4" />
|
||||
车辆信息
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="grid grid-cols-3 gap-2 text-sm">
|
||||
<div className="text-muted-foreground">临时停靠</div>
|
||||
<div className="col-span-2 font-medium">请多关照</div>
|
||||
|
||||
<div className="text-muted-foreground">车牌号码</div>
|
||||
<div className="col-span-2 font-medium font-mono">{plateNumber}</div>
|
||||
|
||||
<div className="text-muted-foreground">联系电话</div>
|
||||
<div className="col-span-2 font-medium font-mono">{phoneNumber}</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 操作按钮 */}
|
||||
<Card className="border-t-4 border-t-primary/20">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-center">联系车主</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
{uid && token && (
|
||||
<Button
|
||||
size="lg"
|
||||
className={`w-full gap-2 text-lg h-14 ${
|
||||
newEnergy
|
||||
? "bg-emerald-600 hover:bg-emerald-700 shadow-emerald-200 dark:shadow-none"
|
||||
: "bg-blue-600 hover:bg-blue-700 shadow-blue-200 dark:shadow-none"
|
||||
} shadow-xl transition-all hover:scale-[1.02] active:scale-[0.98]`}
|
||||
onClick={notifyOwner}
|
||||
>
|
||||
<Bell className="h-5 w-5" />
|
||||
微信通知车主
|
||||
</Button>
|
||||
)}
|
||||
|
||||
<Button
|
||||
size="lg"
|
||||
variant={uid && token ? "outline" : "default"}
|
||||
className={`w-full gap-2 text-lg h-14 ${!(uid && token) ? (newEnergy
|
||||
? "bg-emerald-600 hover:bg-emerald-700 shadow-emerald-200 dark:shadow-none shadow-xl transition-all hover:scale-[1.02] active:scale-[0.98]"
|
||||
: "bg-blue-600 hover:bg-blue-700 shadow-blue-200 dark:shadow-none shadow-xl transition-all hover:scale-[1.02] active:scale-[0.98]") : ""}`}
|
||||
onClick={callNumber}
|
||||
>
|
||||
<Phone className="h-5 w-5" />
|
||||
一键拨打电话
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 温馨提示 */}
|
||||
<div className="px-4 py-2 bg-muted/50 rounded-lg text-xs text-center text-muted-foreground">
|
||||
💡 温馨提示:请文明用车,合理停放。如需挪车,请耐心等待车主回应。
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user