| // import React, { useState, useEffect } from 'react'; |
| // import './PromotionsPage.css'; |
| |
| |
| // function PromotionsPage() { |
| // const [promotions, setPromotions] = useState([]); |
| // const [currentPromotion, setCurrentPromotion] = useState(null); |
| // const [isAdmin, setIsAdmin] = useState(false); |
| // const [isLoading, setIsLoading] = useState(false); |
| // const [error, setError] = useState(null); |
| // const [formData, setFormData] = useState({ |
| // name: '', |
| // uploadCoeff: 1, |
| // downloadCoeff: 1, |
| // timeRange: 0, |
| // criteria: 1, |
| // pStartTime: '', |
| // pEndTime: '' |
| // }); |
| // const [isCreating, setIsCreating] = useState(false); |
| // const [currentPage, setCurrentPage] = useState(1); |
| // const [perPage] = useState(10); |
| // const [totalPromotions, setTotalPromotions] = useState(0); |
| |
| // const getAuthHeaders = () => { |
| // const token = localStorage.getItem('token'); |
| // return { |
| // 'Authorization': token ? `Bearer ${token}` : '', |
| // 'Content-Type': 'application/json' |
| // }; |
| // }; |
| |
| // const fetchPromotions = async (page = 1) => { |
| // setIsLoading(true); |
| // try { |
| // const response = await fetch(`/promotions/list?page=${page}&per_page=${perPage}`, { |
| // headers: getAuthHeaders() |
| // }); |
| |
| // if (!response.ok) { |
| // throw new Error('获取促销活动失败'); |
| // } |
| |
| // const data = await response.json(); |
| // if (data.code === 0 && data.result) { |
| // setPromotions(data.rows || []); |
| // setTotalPromotions(data.total || 0); |
| // } else { |
| // throw new Error(data.msg || '获取促销活动失败'); |
| // } |
| // } catch (err) { |
| // console.error('获取促销活动错误:', err); |
| // setError(err.message); |
| // } finally { |
| // setIsLoading(false); |
| // } |
| // }; |
| |
| // const fetchPromotionDetails = async (promoId) => { |
| // setIsLoading(true); |
| // try { |
| // const response = await fetch(`/promotions/${promoId}`, { |
| // headers: getAuthHeaders() |
| // }); |
| |
| // if (!response.ok) { |
| // throw new Error('获取促销详情失败'); |
| // } |
| |
| // const data = await response.json(); |
| // if (data.code === 0 && data.result) { |
| // setCurrentPromotion(data.rows); |
| // } else { |
| // throw new Error(data.msg || '获取促销详情失败'); |
| // } |
| // } catch (err) { |
| // console.error('获取促销详情错误:', err); |
| // setError(err.message); |
| // } finally { |
| // setIsLoading(false); |
| // } |
| // }; |
| |
| // const createPromotion = async () => { |
| // if (!formData.name || !formData.pStartTime || !formData.pEndTime) { |
| // alert('请填写完整活动信息'); |
| // return; |
| // } |
| |
| // if (new Date(formData.pStartTime) >= new Date(formData.pEndTime)) { |
| // alert('活动时间设置不正确，请重新设定'); |
| // return; |
| // } |
| |
| // setIsLoading(true); |
| // try { |
| // const response = await fetch('/promotions/add', { |
| // method: 'POST', |
| // headers: getAuthHeaders(), |
| // body: JSON.stringify(formData) |
| // }); |
| |
| // if (!response.ok) { |
| // throw new Error('创建促销活动失败'); |
| // } |
| |
| // const data = await response.json(); |
| // if (data.code === 0 && data.result) { |
| // alert(`活动创建成功！活动ID: ${data.msg}`); |
| // setIsCreating(false); |
| // setFormData({ |
| // name: '', |
| // uploadCoeff: 1, |
| // downloadCoeff: 1, |
| // timeRange: 0, |
| // criteria: 1, |
| // pStartTime: '', |
| // pEndTime: '' |
| // }); |
| // fetchPromotions(); |
| // } else { |
| // throw new Error(data.msg || '创建促销活动失败'); |
| // } |
| // } catch (err) { |
| // console.error('创建促销活动错误:', err); |
| // alert(err.message); |
| // } finally { |
| // setIsLoading(false); |
| // } |
| // }; |
| |
| // const deletePromotion = async (promoId) => { |
| // if (!window.confirm('确定要删除这个促销活动吗？')) { |
| // return; |
| // } |
| |
| // setIsLoading(true); |
| // try { |
| // const response = await fetch(`/promotions/delete/${promoId}`, { |
| // method: 'DELETE', |
| // headers: getAuthHeaders() |
| // }); |
| |
| // if (!response.ok) { |
| // throw new Error('删除促销活动失败'); |
| // } |
| |
| // const data = await response.json(); |
| // if (data.code === 0 && data.result) { |
| // alert('促销活动删除成功'); |
| // fetchPromotions(); |
| // if (currentPromotion && currentPromotion.promoId === promoId) { |
| // setCurrentPromotion(null); |
| // } |
| // } else { |
| // throw new Error(data.msg || '删除促销活动失败'); |
| // } |
| // } catch (err) { |
| // console.error('删除促销活动错误:', err); |
| // alert(err.message); |
| // } finally { |
| // setIsLoading(false); |
| // } |
| // }; |
| |
| // const checkAdminStatus = () => { |
| // const role = localStorage.getItem('role'); |
| // setIsAdmin(role === 'admin'); |
| // }; |
| |
| // useEffect(() => { |
| // checkAdminStatus(); |
| // fetchPromotions(); |
| // }, []); |
| |
| // const handleInputChange = (e) => { |
| // const { name, value } = e.target; |
| // setFormData(prev => ({ |
| // ...prev, |
| // [name]: name === 'uploadCoeff' || name === 'downloadCoeff' || name === 'timeRange' || name === 'criteria' |
| // ? parseFloat(value) |
| // : value |
| // })); |
| // }; |
| |
| // const handlePageChange = (newPage) => { |
| // setCurrentPage(newPage); |
| // fetchPromotions(newPage); |
| // }; |
| |
| // const getPromotionType = (promo) => { |
| // if (promo.downloadCoeff === 0 && promo.uploadCoeff > 1) { |
| // return '免费'; |
| // } else if (promo.downloadCoeff < 1 && promo.uploadCoeff > 1) { |
| // return '折扣+上传奖励'; |
| // } else if (promo.downloadCoeff < 1) { |
| // return '折扣'; |
| // } else if (promo.uploadCoeff > 1) { |
| // return '上传奖励'; |
| // } |
| // return '普通'; |
| // }; |
| |
| // return ( |
| // <div className="promotions-page"> |
| // <div className="promotions-container"> |
| // <h1>促销活动</h1> |
| |
| // {isAdmin && ( |
| // <div className="admin-actions"> |
| // <button |
| // className="create-button" |
| // onClick={() => setIsCreating(!isCreating)} |
| // > |
| // {isCreating ? '取消创建' : '创建新活动'} |
| // </button> |
| // </div> |
| // )} |
| |
| // {isCreating && isAdmin && ( |
| // <div className="create-promotion-form"> |
| // <h2>创建新促销活动</h2> |
| // <div className="form-group"> |
| // <label>活动名称</label> |
| // <input |
| // type="text" |
| // name="name" |
| // value={formData.name} |
| // onChange={handleInputChange} |
| // placeholder="例如: 春节特惠" |
| // /> |
| // </div> |
| |
| // <div className="form-row"> |
| // <div className="form-group"> |
| // <label>上传量系数</label> |
| // <input |
| // type="number" |
| // name="uploadCoeff" |
| // min="0" |
| // step="0.1" |
| // value={formData.uploadCoeff} |
| // onChange={handleInputChange} |
| // /> |
| // </div> |
| |
| // <div className="form-group"> |
| // <label>下载量系数</label> |
| // <input |
| // type="number" |
| // name="downloadCoeff" |
| // min="0" |
| // step="0.1" |
| // value={formData.downloadCoeff} |
| // onChange={handleInputChange} |
| // /> |
| // </div> |
| // </div> |
| |
| // <div className="form-row"> |
| // <div className="form-group"> |
| // <label>资源时间范围</label> |
| // <select |
| // name="timeRange" |
| // value={formData.timeRange} |
| // onChange={handleInputChange} |
| // > |
| // <option value="0">全站资源</option> |
| // <option value="1">当天上传</option> |
| // <option value="2">最近两天</option> |
| // <option value="7">最近一周</option> |
| // <option value="30">最近一个月</option> |
| // </select> |
| // </div> |
| |
| // <div className="form-group"> |
| // <label>最低用户等级</label> |
| // <input |
| // type="number" |
| // name="criteria" |
| // min="1" |
| // value={formData.criteria} |
| // onChange={handleInputChange} |
| // /> |
| // </div> |
| // </div> |
| |
| // <div className="form-row"> |
| // <div className="form-group"> |
| // <label>开始时间</label> |
| // <input |
| // type="datetime-local" |
| // name="pStartTime" |
| // value={formData.pStartTime} |
| // onChange={handleInputChange} |
| // /> |
| // </div> |
| |
| // <div className="form-group"> |
| // <label>结束时间</label> |
| // <input |
| // type="datetime-local" |
| // name="pEndTime" |
| // value={formData.pEndTime} |
| // onChange={handleInputChange} |
| // /> |
| // </div> |
| // </div> |
| |
| // <button |
| // className="submit-button" |
| // onClick={createPromotion} |
| // disabled={isLoading} |
| // > |
| // {isLoading ? '创建中...' : '提交创建'} |
| // </button> |
| // </div> |
| // )} |
| |
| // {error && <div className="error-message">{error}</div>} |
| |
| // <div className="promotions-grid"> |
| // {/* 促销活动列表 */} |
| // <div className="promotions-list"> |
| // <h2>当前促销活动</h2> |
| // {isLoading && promotions.length === 0 ? ( |
| // <div className="loading">加载中...</div> |
| // ) : promotions.length === 0 ? ( |
| // <div className="no-promotions">暂无促销活动</div> |
| // ) : ( |
| // <div className="promotion-items"> |
| // {promotions.map(promo => ( |
| // <div |
| // key={promo.promoId} |
| // className={`promotion-item ${currentPromotion && currentPromotion.promoId === promo.promoId ? 'active' : ''}`} |
| // onClick={() => fetchPromotionDetails(promo.promoId)} |
| // > |
| // <div className="promotion-header"> |
| // <h3>{promo.name}</h3> |
| // <span className="promotion-type">{getPromotionType(promo)}</span> |
| // </div> |
| // <div className="promotion-dates"> |
| // {new Date(promo.pStartTime).toLocaleString()} - {new Date(promo.pEndTime).toLocaleString()} |
| // </div> |
| // <div className="promotion-coeffs"> |
| // <span>上传: {promo.uploadCoeff}x</span> |
| // <span>下载: {promo.downloadCoeff}x</span> |
| // </div> |
| // {isAdmin && ( |
| // <button |
| // className="delete-button" |
| // onClick={(e) => { |
| // e.stopPropagation(); |
| // deletePromotion(promo.promoId); |
| // }} |
| // disabled={isLoading} |
| // > |
| // 删除 |
| // </button> |
| // )} |
| // </div> |
| // ))} |
| // </div> |
| // )} |
| |
| // {totalPromotions > perPage && ( |
| // <div className="pagination"> |
| // <button |
| // disabled={currentPage === 1} |
| // onClick={() => handlePageChange(currentPage - 1)} |
| // > |
| // 上一页 |
| // </button> |
| // <span>第 {currentPage} 页</span> |
| // <button |
| // disabled={currentPage * perPage >= totalPromotions} |
| // onClick={() => handlePageChange(currentPage + 1)} |
| // > |
| // 下一页 |
| // </button> |
| // </div> |
| // )} |
| // </div> |
| |
| // {/* 促销活动详情 */} |
| // <div className="promotion-details"> |
| // {currentPromotion ? ( |
| // <> |
| // <h2>{currentPromotion.name}</h2> |
| // <div className="detail-item"> |
| // <label>活动ID:</label> |
| // <span>{currentPromotion.promoId}</span> |
| // </div> |
| // <div className="detail-item"> |
| // <label>活动时间:</label> |
| // <span> |
| // {new Date(currentPromotion.pStartTime).toLocaleString()} - {new Date(currentPromotion.pEndTime).toLocaleString()} |
| // </span> |
| // </div> |
| // <div className="detail-item"> |
| // <label>促销类型:</label> |
| // <span>{getPromotionType(currentPromotion)}</span> |
| // </div> |
| // <div className="detail-item"> |
| // <label>上传量系数:</label> |
| // <span>{currentPromotion.uploadCoeff}x</span> |
| // </div> |
| // <div className="detail-item"> |
| // <label>下载量系数:</label> |
| // <span>{currentPromotion.downloadCoeff}x</span> |
| // </div> |
| // <div className="detail-item"> |
| // <label>适用资源:</label> |
| // <span> |
| // {currentPromotion.timeRange === 0 |
| // ? '全站资源' |
| // : `最近${currentPromotion.timeRange}天内上传的资源`} |
| // </span> |
| // </div> |
| // <div className="detail-item"> |
| // <label>参与条件:</label> |
| // <span>用户等级 ≥ {currentPromotion.criteria}</span> |
| // </div> |
| // </> |
| // ) : ( |
| // <div className="no-selection">请从左侧选择一个促销活动查看详情</div> |
| // )} |
| // </div> |
| // </div> |
| // </div> |
| // </div> |
| // ); |
| // } |
| |
| // export default PromotionsPage; |