const { useState, createContext, useContext, useEffect } = React;
const DSElement = document.getElementById('app');
const DSRoot = ReactDOM.createRoot(DSElement);
DSRoot.render();
function DoctorSearchHTML() {
return (
);
}
//-------------------ログインなどーーーーーーーーーーーーーーーーーーーーーーーー
//共通部分のナビゲーション
function TopNavigation() {
const { NAME, setNAME} = useContext(DataContext);
const handleLoginClick = (event) => {
event.preventDefault();
// dorpdownを表示する
const dropdown = document.getElementById("login_dropdown");
if (dropdown) {
dropdown.style.display = dropdown.style.display === "block" ? "none" : "block";
}
};
useEffect(() => {
const fetchUserData = async () => {
const userId = sessionStorage.getItem('USER_ID');
if (userId) {
try {
const response = await fetch(`/Regist/getUserById?USER_ID=${userId}`);
const data = await response.json();
if (data && data.length > 0) {
console.log("data:", data[0]);
setNAME(data[0].name);
} else {
alert('会員情報の取得に失敗しました。');
}
} catch (error) {
console.error('会員情報取得エラー:', error);
alert('会員情報の取得中にエラーが発生しました。');
}
}
};
fetchUserData();
}, [setNAME]);
return (
);
}
//-------------------商品表示部分ーーーーーーーーーーーーーーーーーーーーーーーー
//ボディ部分を左右にする
function Body() {
return (
<>
);
}
//左の部分 リスト出す
function BodyLeft() {
const [products, setProducts] = useState([]);
const [searchField, setSearchField] = useState("");
const [errorStat, setErrorStat] = useState(false);
useEffect(() => {
fetchProducts();
}, []);
const fetchProducts = () => {
axios.post('/goodsSearch/GetKeyword')
.then(response => {
setProducts(response.data);
setErrorStat(false);
})
.catch(error => {
console.error('商品データの取得に失敗しました:', error);
setErrorStat(true);
});
};
const searchProducts = () => {
if (searchField.trim() === "") {
fetchProducts();
return;
}
axios.post('/goodsSearch/GetKeyword', { keyword: searchField })
.then(response => {
setProducts(response.data);
setErrorStat(response.data.length === 0);
})
.catch(error => {
console.error('商品検索に失敗しました:', error);
setErrorStat(true);
});
};
//-----------------アクセスタグのカテゴリを探す
const categoryKeywords = [
"薬膳茶",
"薬膳スナック",
"薬膳食材",
"サプリメント",
"妊活サポート 食品",
"妊活サポート グッズ",
];
const fetchProductsByCategory = async (keyword) => {
try {
console.log('keyword検索:', keyword);
const response = await axios.post(`/goodsSearch/Getcategory?keyword=${keyword}`);
console.log('keyword検索:', response.data);
setProducts(response.data);
setErrorStat(response.data.length === 0);
} catch (error) {
console.error('keyword検索:', error);
setErrorStat(true);
}
};
const handleCategoryClick = (index) => {
const category = categoryKeywords[index];
console.log('选择的分类:', category);
fetchProductsByCategory(category);
};
return (
{/* //アクセスタグ グループ */}
handleCategoryClick(0)}>
薬膳茶
handleCategoryClick(1)}>
薬膳スナック
handleCategoryClick(2)}>
薬膳食材
handleCategoryClick(3)}>
サプリメント
handleCategoryClick(4)}>
妊活食品
handleCategoryClick(5)}>
妊活グッズ
{/* エラーメッセージ */}
{errorStat && (
検索したいキーワードに合う結果はありません。キーワードをご確認ください。
)}
{products.map((product) => (
))}
);
}
// 商品卡片组件
function ProductCard({ product }) {
const goodsdetail = () => {
const params = new URLSearchParams();
// 确保category不为空
if (product.category) {
params.append('category', product.category);
}
params.append('clickedProductId', product.id);
window.location.href = `/product_detail?${params.toString()}`;
};
return (
{product.category}
{product.tag1 && #{product.tag1}}
{product.tag2 && #{product.tag2}}
{product.tag3 && #{product.tag3}}
);
}
const DataContext = createContext();
function DataProvider({ children }) {
const [searchResults, setSearchResults] = React.useState([]);
const [userID, setUserID] = useState("");
const [NAME, setNAME] = useState('');
// 選択された値の状態を管理する
const [selectedValues, setSelectedValues] = useState({
tag1: '',
category: '',
symptoms: '',
department: '',
treatment: ''
});
return (
// 選択された値と、それをセットする関数をコンテキストとして提供
{children}
);
}
//右側商品表示
function BodyRight() {
const [products, setProducts] = useState([]);
const { selectedValues } = useContext(DataContext);
const [searchField, setSearchField] = useState("");
const [errorStat, setErrorStat] = useState(true);
//タグとカテゴリ詳細検索
const tagAndcategorySearchButtonOnClick = () => {
const tag1Value = selectedValues.tag1;
const categoryValue = selectedValues.category;
console.log('検索:', { tag1: tag1Value, category: categoryValue });
//param保存、次の画面へ
const params = new URLSearchParams();
//存在する場合はパラムに追加
if (tag1Value) params.append('tag1', tag1Value);
if (categoryValue) params.append('category', categoryValue);
//保存した{params.toString()}`;を/product_detailに送る
window.location.href = `/product_detail?${params.toString()}`;
};
//keyword入力検索
const nextpagedetailSearchButtonOnClick = () => {
const searchFieldValue = searchField.trim();
console.log('送信する検索キーワード:', searchFieldValue);
//param保存、次の画面へ
const params = new URLSearchParams();
if (searchFieldValue) {
//入れたものをlocalストレじに保存
// localStorage.setItem('searchField', searchFieldValue);
params.append('keyword', encodeURIComponent(searchFieldValue));
}
// /product_detail，にURL持っていく
window.location.href = `/product_detail?${params.toString()}`;
};
//when input press enter to detail page
const handleSearchEnter = (e) => {
if (e.keyCode === 13) {
e.preventDefault();
nextpagedetailSearchButtonOnClick();
}
};
return (
);
}
//select欄
//左検索お悩み症状検索可能
function Tag() {
const { setSelectedValues } = useContext(DataContext);
const [options, setOptions] = useState([]);
const [tag1, setTag1] = useState('');
// selectedValuesの更新のための補助関数
const updateSelectedValues = (key, value) => {
setSelectedValues(prevValues => ({
...prevValues,
[key]: value
}));
};
// KNGKBNの変更ハンドラ
const handleSymptomsChange = (e) => {
const value = e.target.value;
console.log('Selected tag1:', value);
setTag1(value);
updateSelectedValues('tag1', value);
};
// 検索処理
const handleSearch = async () => {
if (!tag1) {
alert('タグを選択してください。');
return;
}
try {
const response = await axios.post('/goodsSearch/GetKeyword', { tag1 });
// 検索結果をセッションストレージに保存
sessionStorage.setItem('searchResults', JSON.stringify(response.data));
// URLパラメータを構築
const params = new URLSearchParams();
params.append('tag1', tag1);
// doctor-detail ページに遷移
window.location.href = `/product_detail?${params.toString()}`;
} catch (error) {
console.error('検索エラー:', error);
alert('検索に失敗しました。');
}
};
// ドロップダウン用の選択肢を取得する関数
const findSELECT = () => {
axios({
url: "/pulldown/tag",
method: "POST"
}).then(response => {
const defaultOption = [{
text: "--選択--",
}];
// APIからデータを取得してマッピング
const optionsDataFromAPI = response.data.map(tag => ({
text: tag,
value: tag
}));
// 自定义顺序
const customOrder = [
'妊活', '不妊', '月経痛・月経不順', '冷え性', '肌トラブル', 'ダイエット',
'疲労回復', '頭痛・肩こり', '便秘', 'アレルギー体質', '妊活サポート',
'肌荒れ', '吹き出物', '風邪', '鼻炎・鼻づまり', '喉の痛み', '喘息',
'倦怠感', '食欲不振', '下痢', 'むくみ', '肥満', '貧血', '腰痛',
'関節痛', '胃痛', 'イライラ', '憂鬱感', 'めまい・立ちくらみ', '不眠',
'目の疲れ', 'のぼせ・ほてり', '発汗', '高血圧', '更年期障害'
];
// 过滤掉数据库中已经存在的选项
const filteredData = optionsDataFromAPI.filter(option => customOrder.includes(option.text));
// 排序数据库中的选项
filteredData.sort((a, b) => {
return customOrder.indexOf(a.text) - customOrder.indexOf(b.text);
});
// 确保自定义顺序中的每个项都显示，即使数据库中没有
const finalOptions = customOrder.map(category => {
const existingOption = filteredData.find(option => option.text === category);
return existingOption || { text: category, value: category };
});
// 合并默认选项和最终选项
const optionsData = [...defaultOption, ...finalOptions];
setOptions(optionsData);
}).catch(error => {
console.error(error);
});
};
// コンポーネントがマウントされた時、ドロップダウン用の選択肢を取得
useEffect(() => {
findSELECT();
}, []);
return (
お悩み・症状
);
}
function Category() {
const { setSelectedValues } = useContext(DataContext);
const [options, setOptions] = useState([]);
const [category, setCategory] = useState('');
// selectedValuesの更新のための補助関数
const updateSelectedValues = (key, value) => {
console.log(`Updating selected value for ${key}: ${value}`); // 添加log
setSelectedValues(prevValues => ({
...prevValues,
[key]: value
}));
};
// KNGKBNの変更ハンドラ
const handleDepartmentChange = (e) => {
const value = e.target.value;
console.log('Selected category:', value);
setCategory(value);
updateSelectedValues('category', value);
};
// ドロップダウン用の選択肢を取得する関数
const findSELECT = () => {
console.log("Fetching category data...");
axios({
url: "/pulldown/category",
method: "POST"
}).then(response => {
console.log("Response from API:", response.data);
const defaultOption = [{
text: "--選択--",
}];
// 将API数据映射到选项
const optionsDataFromAPI = response.data.map(category => ({
text: category,
value: category
}));
console.log("Mapped optionsDataFromAPI:", optionsDataFromAPI); // 映射后的选项数据
const customOrder = [
'妊活サポート 食品', '妊活サポート グッズ', '薬膳茶', '薬膳スナック',
'薬膳食材', '冷え性改善グッズ', 'サプリメント', 'インナーケア', '食材キット',
'リラクゼーション', 'スキンケア'
];
// customOrder に基づき、APIデータをフィルタし、順番を維持
const finalOptions = customOrder.map(category => {
const existingOption = optionsDataFromAPI.find(item => item.text === category);
if (existingOption) {
console.log(`Found existing category in API: ${category}`); // 数据库中有该类别
} else {
console.log(`Category not found in API: ${category}. Adding manually.`); // 数据库中没有该类别
}
return existingOption || { text: category, value: category }; // 如果没有返回，则使用自定义类别
});
console.log("Final options after custom order:", finalOptions); // 按自定义顺序处理后的选项
// 最终选项数据
const optionsData = [...defaultOption, ...finalOptions];
// 更新选项
console.log("Options data to be set:", optionsData); // 最终要设置的选项
setOptions(optionsData);
}).catch(error => {
console.error("Error fetching category data:", error); // 错误信息
});
};
// 组件挂载时获取选项数据
useEffect(() => {
findSELECT();
}, []);
return (
カテゴリ別
);
}
function Footer() {
return (
ヘルスマ © healthma Co.,Ltd. All Rights Reserved.
);
}
