|
|
@@ -0,0 +1,172 @@
|
|
|
+"use client";
|
|
|
+import React from "react";
|
|
|
+import { useState } from "react";
|
|
|
+import { useEffect } from "react";
|
|
|
+const NewAddressPage = () => {
|
|
|
+ // 统一表单对象
|
|
|
+ const [form, setForm] = useState({
|
|
|
+ firstname: "",
|
|
|
+ lastname: "",
|
|
|
+ email: "",
|
|
|
+ postcode: "",
|
|
|
+ street: "",
|
|
|
+ city: "",
|
|
|
+ default_billing: 0, // 账单地址默认
|
|
|
+ default_shipping: 0, // 收货地址默认
|
|
|
+ });
|
|
|
+ // 统一处理所有input变化
|
|
|
+ const handleChange = (e) => {
|
|
|
+ const { name, value } = e.target;
|
|
|
+ setForm((prev) => ({
|
|
|
+ ...prev,
|
|
|
+ [name]: value,
|
|
|
+ }));
|
|
|
+ };
|
|
|
+ // 统一提交
|
|
|
+ const handleSubmit = (e) => {
|
|
|
+ e.preventDefault();
|
|
|
+ const submitData = {
|
|
|
+ ...form,
|
|
|
+ street: [form.street], // 👈 自动变成数组，后端就能收到 street[]
|
|
|
+ };
|
|
|
+
|
|
|
+ // 直接拿form所有数据
|
|
|
+ console.log("表单数据：", form);
|
|
|
+ };
|
|
|
+ // ========== 账单地址勾选框 ==========
|
|
|
+ const handleBillingChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
|
+ setForm((prev) => ({
|
|
|
+ ...prev,
|
|
|
+ default_billing: e.target.checked ? 1 : 0,
|
|
|
+ }));
|
|
|
+ };
|
|
|
+
|
|
|
+ // ========== 收货地址勾选框 ==========
|
|
|
+ const handleShippingChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
|
+ setForm((prev) => ({
|
|
|
+ ...prev,
|
|
|
+ default_shipping: e.target.checked ? 1 : 0,
|
|
|
+ }));
|
|
|
+ };
|
|
|
+ return (
|
|
|
+ <div className="w-full h-full">
|
|
|
+ <form className="overflow-hidden" onSubmit={handleSubmit}>
|
|
|
+ <div className="bg-[#fff] pr-2.5 pl-2.5 w-full text-center text-base h-11 leading-11 font-semibold relative text-[#0b0b0b]">
|
|
|
+ <div
|
|
|
+ onClick={() => window.history.back()}
|
|
|
+ className="absolute left-2.5 text-2xl inline-block top-1/2 -translate-y-1/2"
|
|
|
+ >
|
|
|
+ <svg
|
|
|
+ xmlns="http://www.w3.org/2000/svg"
|
|
|
+ width="24"
|
|
|
+ height="24"
|
|
|
+ viewBox="0 0 24 24"
|
|
|
+ fill="none"
|
|
|
+ >
|
|
|
+ <path
|
|
|
+ stroke="rgba(0, 0, 0, 1)"
|
|
|
+ stroke-width="1.2"
|
|
|
+ stroke-linejoin="round"
|
|
|
+ stroke-linecap="round"
|
|
|
+ d="M15 18L9 12L15 6"
|
|
|
+ ></path>
|
|
|
+ </svg>
|
|
|
+ </div>
|
|
|
+ <span className="vipReturnTitles">Add New Address</span>
|
|
|
+ </div>
|
|
|
+ <input name="form_key" type="hidden" value="kW7wucXHATeeem75"></input>
|
|
|
+ <div className="bg-[#f8f8f8] p-[20px_10px]">
|
|
|
+ <div className="text-start">*Name</div>
|
|
|
+ <div className="flex justify-between items-center">
|
|
|
+ <input
|
|
|
+ name="firstname" // 必须和state字段对应
|
|
|
+ value={form.firstname}
|
|
|
+ onChange={handleChange}
|
|
|
+ placeholder="firstname"
|
|
|
+ className="w-43 h-11 rounded-sm border border-solid border-[rgba(102,102,102,1)] indent-4 text-[#a6a6a6] text-base leading-11 font-normal"
|
|
|
+ />
|
|
|
+ <input
|
|
|
+ name="lastname" // 必须和state字段对应
|
|
|
+ value={form.lastname}
|
|
|
+ onChange={handleChange}
|
|
|
+ placeholder="lastname"
|
|
|
+ className="w-43 h-11 rounded-sm border border-solid border-[rgba(102,102,102,1)] indent-4 text-[#a6a6a6] text-base leading-11 font-normal box-[unset]"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div className="mt-7.5">
|
|
|
+ <label htmlFor="email">Email Address*</label>
|
|
|
+ <input
|
|
|
+ name="email" // 必须和state字段对应
|
|
|
+ value={form.email}
|
|
|
+ onChange={handleChange}
|
|
|
+ placeholder="email"
|
|
|
+ className="w-full h-11 rounded-sm border border-solid border-[rgba(102,102,102,1)] indent-4 text-[#a6a6a6] text-base leading-11 font-normal box-[unset]"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div className="mt-7.5">
|
|
|
+ <label htmlFor="postcode">Zip/Postal Code</label>
|
|
|
+ <input
|
|
|
+ name="postcode" // 必须和state字段对应
|
|
|
+ value={form.postcode}
|
|
|
+ onChange={handleChange}
|
|
|
+ placeholder="Zip/Postal Code"
|
|
|
+ className="w-full h-11 rounded-sm border border-solid border-[rgba(102,102,102,1)] indent-4 text-[#a6a6a6] text-base leading-11 font-normal box-[unset]"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div className="mt-7.5">
|
|
|
+ <label htmlFor="street">Street Address</label>
|
|
|
+ <input
|
|
|
+ name="street" // 必须和state字段对应
|
|
|
+ value={form.street}
|
|
|
+ onChange={handleChange}
|
|
|
+ placeholder="Street Address"
|
|
|
+ className="w-full h-11 rounded-sm border border-solid border-[rgba(102,102,102,1)] indent-4 text-[#a6a6a6] text-base leading-11 font-normal box-[unset]"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div className="mt-7.5">
|
|
|
+ <label htmlFor="city">City</label>
|
|
|
+ <input
|
|
|
+ name="city" // 必须和state字段对应
|
|
|
+ value={form.city}
|
|
|
+ onChange={handleChange}
|
|
|
+ placeholder="City"
|
|
|
+ className="w-full h-11 rounded-sm border border-solid border-[rgba(102,102,102,1)] indent-4 text-[#a6a6a6] text-base leading-11 font-normal box-[unset]"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ {/* 选择框（开关）*/}
|
|
|
+ <label className="flex items-center gap-2 cursor-pointer mt-7.5">
|
|
|
+ <input
|
|
|
+ type="checkbox"
|
|
|
+ checked={form.default_billing === 1}
|
|
|
+ onChange={handleBillingChange}
|
|
|
+ name="default_billing"
|
|
|
+ className="w-5 h-5"
|
|
|
+ />
|
|
|
+ <span className="text-base">Use as my default billing address</span>
|
|
|
+ </label>
|
|
|
+ {/* 选择框（开关）*/}
|
|
|
+ <label className="flex items-center gap-2 cursor-pointer mt-7.5">
|
|
|
+ <input
|
|
|
+ type="checkbox"
|
|
|
+ checked={form.default_shipping === 1}
|
|
|
+ onChange={handleShippingChange}
|
|
|
+ name="default_shipping"
|
|
|
+ className="w-5 h-5"
|
|
|
+ />
|
|
|
+ <span className="text-base">
|
|
|
+ Use as my default shipping address
|
|
|
+ </span>
|
|
|
+ </label>
|
|
|
+ <button
|
|
|
+ className="w-full h-11 leading-11 bg-[#1bbc9b] text-sm font-normal text-center mt-7.5"
|
|
|
+ type="submit"
|
|
|
+ >
|
|
|
+ Save Address
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </form>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+};
|
|
|
+export default NewAddressPage;
|
zhangzf