Zgna
/
forgeplus-react
forked from Gitlink/forgeplus-react
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改任务首页，自适应手机端

This commit is contained in:
何童崇 2022-10-28 13:58:39 +08:00
parent dd144f1cc0
commit 40ff820919
8 changed files with 241 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/App.js
View File

@ -16,13 +16,13 @@ import marked from './common/marked';
import moment from 'moment'
import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';
import SiderBar from './forge/Component/SiderBar'
// import SiderBar from './forge/Component/SiderBar'
import { SnackbarHOC } from 'educoder';
import { initAxiosInterceptors } from './AppConfig'
import { Provider } from 'react-redux';
import configureStore from './redux/stores/configureStore';
import { indexOf } from 'lodash';
import './phone.scss';
const store = configureStore();
window.marked = marked;
const theme = createMuiTheme({

9
src/app-test.jsx
View File

@ -1,9 +0,0 @@
import React from 'react'
import MiniPagination from './components/mini-pagination'
export default () => {
function onPageChange(page) {
console.log(page, '-----------')
}
return <MiniPagination onChange={onPageChange} current={1} total={100} pageSize={16} />
}

27
src/common/UrlTool.js
View File

@ -305,4 +305,31 @@ export function returnbar(str){
}
}
return s;
}
// 手动添加/修改mate标签
export function addMeta(name, content){
if(document.querySelector(`meta[name='${name}']`)){
document.querySelector(`meta[name='${name}']`).content=content;
}else{
const meta = document.createElement('meta');
meta.content = content;
meta.name = name;
document.getElementsByTagName('head')[0].appendChild(meta);
}
};
export function IsPC(){
var userAgentInfo = navigator.userAgent;
var Agents = ["Android", "iPhone",
"SymbianOS", "Windows Phone",
"iPad", "iPod"];
var flag = true;
for (var v = 0; v < Agents.length; v++) {
if (userAgentInfo.indexOf(Agents[v]) > 0) {
flag = false;
break;
}
}
return flag;
}

2
src/common/educoder.js
View File

@ -7,7 +7,7 @@ export {
getImageUrl as getImageUrl,getImage as getImage, getmyUrl as getmyUrl, getRandomNumber as getRandomNumber, getUrl as getUrl, publicSearchs as publicSearchs, getRandomcode as getRandomcode, getUrlmys as getUrlmys, getUrl2 as getUrl2, setImagesUrl as setImagesUrl
, getUploadActionUrl as getUploadActionUrl, getUploadActionUrltwo as getUploadActionUrltwo, getUploadActionUrlthree as getUploadActionUrlthree, getUploadActionUrlOfAuth as getUploadActionUrlOfAuth
, getTaskUrlById as getTaskUrlById, TEST_HOST, htmlEncode as htmlEncode, getupload_git_file as getupload_git_file, getcdnImageUrl as getcdnImageUrl,getTestImage as getTestImage,getLogoImageUrl as getLogoImageUrl,
turnbar,returnbar,getUrlToken as getUrlToken
turnbar,returnbar,getUrlToken,addMeta,IsPC
} from './UrlTool';
export { setmiyah as setmiyah } from './Component';

79
src/military/task/phone.scss Normal file
View File

@ -0,0 +1,79 @@
.phoneClass {
// 创客
.centerbox {
margin-top: 0 !important;
width: 100%;
}
.nav-content {
margin: 0;
padding-top:0;
}
.choose-box-big {
font-size: .8rem;
.choose-title {
width: 5em;
}
.choose-item {
padding: 0 .5em;
}
}
.centerScreen {
display: block;
height: auto;
padding: .5em 0;
}
.sort-box {
margin-bottom: .15rem;
.sort-item {
padding: 0 .5em;
font-size: .9rem;
}
}
.list-box {
margin: 0;
padding-right: 1.25rem .8rem;
.price {
padding-top: 0;
.font-16 {
font-size: .85rem !important;
}
.font-24 {
font-size: 1rem !important;
}
}
}
.list-title {
font-size: .85rem;
span {
white-space: nowrap;
font-size: .75rem;
}
.chuangke_icon {
width: 5.5rem;
margin-left: -1.5rem;
}
}
.list-other {
white-space: nowrap;
span {
white-space: nowrap;
}
}
}

96
src/military/task/taskList/index.jsx
View File

@ -1,7 +1,7 @@
import React, { useCallback, useEffect, useState } from 'react';
import { Input, Button, Modal } from 'antd';
import moment from 'moment';
import { formatDuring, getUrlToken } from 'educoder';
import { formatDuring, getUrlToken, addMeta, IsPC } from 'educoder';
import ChooseNav from '../../components/chooseNav';
import SortBox from '../../components/sortBox';
import ItemListTask from '../components/itemListTask';
@ -9,6 +9,7 @@ import { taskTimeArr, taskStatusArr, sortArr, taskModeIdArr } from '../static';
import { getTaskList, getTaskCategory, getCompanyInfo } from '../api';
import polify from '../image/polify.png';
import '../index.scss';
import '../phone.scss';
import { Link } from 'react-router-dom';
const Search = Input.Search;
@ -16,21 +17,41 @@ const Search = Input.Search;
export default ({ history, current_user, showLoginDialog, location, mygetHelmetapi }) => {
let initType = getUrlToken('type', location.search) || '';
let taskParams=sessionStorage.getItem("taskParams")?JSON.parse(sessionStorage.getItem("taskParams")):{};
let taskParams = sessionStorage.getItem("taskParams") ? JSON.parse(sessionStorage.getItem("taskParams")) : {};
const [loading, setLoading] = useState(false);
const [taskCategoryArr, setTaskCategoryArr] = useState([]);
const [categoryId, setCategoryId] = useState(initType||taskParams.categoryId||'');
const [taskModeId, setTaskModeId] = useState(taskParams.taskModeId||'');
const [categoryId, setCategoryId] = useState(initType || taskParams.categoryId || '');
const [taskModeId, setTaskModeId] = useState(taskParams.taskModeId || '');
const [expiredStartTime, setExpiredStartTime] = useState('');//taskParams.expiredStartTime|| 任务shi xian
const [expiredEndTime, setExpiredEndTime] = useState('');//taskParams.expiredEndTime||
const [statusString, setStatusString] = useState(taskParams.statusString||'3,4,5,6,7,8');
const [searchInput, setSearchInput] = useState(taskParams.searchInput||'');
const [orderBy, setOrderBy] = useState(taskParams.orderBy||'');
const [curPage, setCurPage] = useState(taskParams.curPage||1);
const [statusString, setStatusString] = useState(taskParams.statusString || '3,4,5,6,7,8');
const [searchInput, setSearchInput] = useState(taskParams.searchInput || '');
const [orderBy, setOrderBy] = useState(taskParams.orderBy || '');
const [curPage, setCurPage] = useState(taskParams.curPage || 1);
const [total, setTotal] = useState(0);
const [taskList, setTaskList] = useState([]);
const [visible,setVisible]=useState(false);
const [visible, setVisible] = useState(false);
// 手机端适配
useEffect(() => {
if (!IsPC()) {
// 手动添加mate标签
addMeta(
'viewport',
'width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover',
);
document.querySelector('#root').className = "page -layout-v -fit widthunit phoneClass";
return () => {
addMeta(
'viewport',
'width=1200',
);
document.querySelector('#root').className = "page -layout-v -fit widthunit";
}
}
}, [])
// 获取分类数据
useEffect(() => {
@ -46,7 +67,7 @@ export default ({ history, current_user, showLoginDialog, location, mygetHelmeta
}, []);
// 获取任务列表
useEffect(() => {
useEffect(() => {
const params = {
categoryId,
taskModeId,
@ -68,7 +89,7 @@ export default ({ history, current_user, showLoginDialog, location, mygetHelmeta
setTotal(data.total);
// 存储搜索条件
let params={
let params = {
categoryId,
taskModeId,
statusString,
@ -76,7 +97,7 @@ export default ({ history, current_user, showLoginDialog, location, mygetHelmeta
orderBy,
curPage,
}
sessionStorage.setItem("taskParams",JSON.stringify(params));
sessionStorage.setItem("taskParams", JSON.stringify(params));
}
setLoading(false);
})
@ -104,6 +125,7 @@ export default ({ history, current_user, showLoginDialog, location, mygetHelmeta
setCurPage(1);
}, []);
// 计算任务时间，返回延时/剩余时间
function surplusTime(item) {
let surplus;
switch (item.status) {
@ -145,11 +167,12 @@ export default ({ history, current_user, showLoginDialog, location, mygetHelmeta
}, []);
function taskClick(id) {
// 登录与否的判断
// if (!current_user.user_id) {
// showLoginDialog();
// return;
// }
history.push(`/task/taskDetail/${id}`);
}
@ -163,35 +186,17 @@ export default ({ history, current_user, showLoginDialog, location, mygetHelmeta
if (res) {
if (res.message === 'success') {
history.push("/task/taskAdd");
} else { //if (res.message === '未进行实体认证')
} else { //if (res.message === '未进行实体认证')
setVisible(true)
// Modal.info({
// title: '因为以下原因，您暂时不能进行本操作',
// content: <div className="mt10">
// <p>完成条件后，重新点击查看您的最新参与资格</p>
// <div className="inline mt10">
// <span className="mr30"> <i className="iconfont icon-mingpian"></i> <span className="color-red">未进行实名未认证</span> </span>
// </div>
// </div>,
// onOk: () => {
// window.location.href = mygetHelmetapi && mygetHelmetapi.main_web_site_url + `/users/${current_user.login}/profiles`;
// },
// okText: '好的',
// className: 'go_profiles'
// });
}
// else {
// Modal.info({
// content: '您没有权限需求提报',
// className:'failByPression'
// });
// }
}
}
});
}
return (
<div className="centerbox" style={{ marginTop: '20px' }}>
{/* 选项条件 */}
<div className="nav-content">
<ChooseNav
key={'taskCategory'}
@ -228,17 +233,19 @@ export default ({ history, current_user, showLoginDialog, location, mygetHelmeta
title={'任务状态：'}
options={taskStatusArr}
changeOptionId={changeOptionId}
defaultOption={{ code: statusString=='3,4,5,6,7,8'?"":statusString, dicItemName: "", dicItemCode: statusString=='3,4,5,6,7,8'?"":statusString }}
defaultOption={{ code: statusString == '3,4,5,6,7,8' ? "" : statusString, dicItemName: "", dicItemCode: statusString == '3,4,5,6,7,8' ? "" : statusString }}
size='big'
/>
</div>
<div className="center-content">
{/* 排序条件+搜索 */}
<div className="centerScreen" >
<SortBox
options={sortArr}
defaultOption={orderBy?{ type: orderBy || "" }:''}
defaultOption={orderBy ? { type: orderBy || "" } : ''}
changeOptionId={changeSort}
/>
@ -256,6 +263,7 @@ export default ({ history, current_user, showLoginDialog, location, mygetHelmeta
</div>
</div>
{/* 列表 */}
<ItemListTask
list={taskList}
itemClick={taskClick}
@ -272,17 +280,17 @@ export default ({ history, current_user, showLoginDialog, location, mygetHelmeta
className='go_profiles'
visible={visible}
closable={true}
onOk={()=>{setVisible(false)}}
onCancel={()=>{setVisible(false)}}
onOk={() => { setVisible(false) }}
onCancel={() => { setVisible(false) }}
okText='好的'
cancelButtonProps={null}
closeIcon={<i className='iconfont icon-shanchuicon'></i>}
>
<div className='profiles-tit'>您暂无权限，仅<span >平台指定企业</span>允许需求提报</div>
<img className='polify' src={polify} />
<div className='profiles-content'>
若想需求提报，请在账号管理处<a href={`${mygetHelmetapi && mygetHelmetapi.main_web_site_url}/users/${current_user.login}/profiles`}>完善企业认证信息</a>，或<Link to={'/needs/new'}>点击此处</Link>提交需求申请信息，后续管理员将与您联系。
</div>
<div className='profiles-tit'>您暂无权限，仅<span >平台指定企业</span>允许需求提报</div>
<img className='polify' src={polify} />
<div className='profiles-content'>
若想需求提报，请在账号管理处<a href={`${mygetHelmetapi && mygetHelmetapi.main_web_site_url}/users/${current_user.login}/profiles`}>完善企业认证信息</a>，或<Link to={'/needs/new'}>点击此处</Link>提交需求申请信息，后续管理员将与您联系。
</div>
</Modal>
</div>
)

13
src/modules/loginRegister/LoginRegisterPage.jsx
View File

@ -2,7 +2,7 @@ import React, { useEffect } from "react";
import Login from "./Login";
import Register from "./Register";
import ResetPassword from "./ResetPassword";
import { getImageUrl} from 'educoder';
import { getImageUrl ,addMeta} from 'educoder';
// import logo from './img/logo.svg';
// import banner from './img/banner.png';
@ -14,17 +14,14 @@ import '../loginRegister/LoginRegisterPage.scss';
function LoginRegisterPage(props) {
useEffect(() => {
// 手动添加mate标签
const addMeta = (name, content) => {
const meta = document.createElement('meta');
meta.content = content;
meta.name = name;
document.getElementsByTagName('head')[0].appendChild(meta);
};
addMeta(
'viewport',
'width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover',
);
return ()=>{
document.getElementsByTagName('head')[0].removeChild(document.querySelector("meta[name='viewport']"));
}
})
return (
<div className="loginRegister">

75
src/phone.scss Normal file
View File

@ -0,0 +1,75 @@
.phoneClass {
width: 100vw !important;
// 解除1200限制
.newHeaders,
.newContainers,
.newMain,
.newFooter {
min-width: 100vw;
}
// 头部
.newHeaders {
height: 3.2rem;
}
.headerContent {
padding: 0;
>.edu-menu-panel {
margin-left: 2vw;
}
>a {
display: none;
}
.head-nav ul#header-nav {
display: flex;
justify-content: space-between;
li {
margin: 0 2px;
a {
font-size: 14px;
}
}
}
.head-right {
// .mr30,
// .edu-menu-panel {
display: none;
// }
}
}
.newContainers {
>div:first-child {
height: 3.2rem !important;
}
}
// 底部
.footerbottom {
height: 210px !important;
>div {
margin: 0 10px !important;
}
}
.newFooter p {
font-size: .5rem;
span {
white-space: nowrap;
}
a{
display: block;
}
}
}