Skip to content

X
xiaomai-cloud-class-web
Commit 339fd4f0 by chenshu
Options

feat:初始化各页面

parent 465ae2c3
Showing with 451 additions and 76 deletions
src/domains/basic-domain/constants.ts
......@@ -18,6 +18,13 @@ const BASIC_HOST_MAP: MapInterface = {
gray: 'https://gray-heimdall.xiaomai5.com/',
prod: 'https://gateway.xiaomai5.com/'
};
const PATH_MAP: MapInterface = {
dev: 'https://dev.xiaomai5.com/xiaomai-cloud-class-web/h5.html',
dev1: 'https://dev.xiaomai5.com/xiaomai-cloud-class-web/h5.html',
rc: 'https://rc.xiaomai5.com/xiaomai-cloud-class-web/h5.html',
gray: 'https://gray.xiaomai5.com/xiaomai-cloud-class-web/h5.html',
prod: 'https://b.xiaomai5.com/xiaomai-cloud-class-web/h5.html'
};
// axios headers config
export const TIME_OUT: number = 20000;
......@@ -28,3 +35,4 @@ export const PREFIX = 'cloud-class';
// host
export const BASIC_HOST: string = BASIC_HOST_MAP[ENV];
export const PATH: string = PATH_MAP[ENV];
src/modules/college-manage/CollegeInfoPage.jsx
import React from 'react';
import { Input, Button } from 'antd';
import './CollegeInfoPage.less';
export default class CollegeInfoPage extends React.Component {
import { withRouter } from "react-router-dom";
import { Form, Input, Button, Checkbox ,Select,Modal,message} from 'antd';
import {industryList,childIndustryList} from '@/domains/store-domain/constants'
import SelectPrepareFileModal from '@/modules/prepare-lesson/modal/SelectPrepareFileModal';
import Upload from '@/core/upload';
// import PhotoClip from 'photoclip';
import StoreService from "@/domains/store-domain/storeService";
import User from "@/common/js/user";
import Bus from '@/core/tbus';
import "./CollegeInfoPage.less";
let cutFlag = false;
class CollegeInfoPage extends React.Component {
formRef = React.createRef();
constructor(props) {
super(props);
this.state = {
avatar: 'https://image.xiaomaiketang.com/xm/rJeQaZxtc7.png',
name: '',
};
storeName:null,
logo:'',
showSelectFileModal:false,
cutImageBlob: null,
}
}
componentWillMount(){
this.getStoreDetail()
}
getStoreDetail = ()=>{
const params= {
storeId:User.getStoreId()
}
StoreService.getStoreDetail(params).then((res) => {
const { result = { } } = res;
const {
storeName,
logo
} = result;
this.formRef.current.setFieldsValue({
storeName:storeName
});
this.setState({
storeName,
logo
})
});
}
onChangeFiledValue=(filed,value)=>{
this.setState({
[filed]:value
})
}
handleSelectCover = (file)=> {
this.uploadImage(file);
}
//上传图片
uploadImage = (imageFile) => {
const { folderName } = imageFile;
const fileName = window.random_string(16) + folderName.slice(folderName.lastIndexOf("."));
const self = this;
this.setState(
{
visible: true,
},
() => {
setTimeout(() => {
const okBtnDom = document.querySelector("#headPicModal");
const options = {
size: [500, 282],
ok: okBtnDom,
maxZoom: 3,
style: {
jpgFillColor: "transparent",
},
done: function (dataUrl) {
clearTimeout(self.timer);
self.timer = setTimeout(() => {
if ((self.state.rotate != this.rotate()) || (self.state.scale != this.scale())) {
console.log(this.scale(), 'scale')
const _dataUrl = this.clip()
const cutImageBlob = self.convertBase64UrlToBlob(_dataUrl);
self.setState({
cutImageBlob,
dataUrl: _dataUrl,
rotate: this.rotate(),
scale: this.scale()
})
}
}, 500)
const cutImageBlob = self.convertBase64UrlToBlob(dataUrl);
self.setState({
cutImageBlob,
dataUrl
})
setTimeout(() => {
cutFlag = false;
}, 2000);
},
fail: (failInfo) => {
message.error("图片上传失败了，请重新上传");
},
loadComplete: function (img) {
setTimeout(() => {
const _dataUrl = this.clip()
self.setState({
dataUrl: _dataUrl,
hasImgReady: true
})
}, 100)
},
};
const imgUrl = `${imageFile.ossUrl}?${new Date().getTime()}`
if (!this.state.photoclip) {
const _photoclip = new PhotoClip("#headPicModal", options);
_photoclip.load(imgUrl);
this.setState({
photoclip: _photoclip,
});
} else {
this.state.photoclip.clear();
this.state.photoclip.load(imgUrl);
}
}, 200);
}
);
};
//获取resourceId
getSignature = (blob, fileName) => {
Upload.uploadBlobToOSS(blob, 'cover' + (new Date()).valueOf(),null,'signInfo').then((signInfo) => {
this.setState({
coverClicpPath:signInfo.fileUrl,
coverId:signInfo.resourceId,
visible: false
},()=>this.updateCover())
});
};
updateCover = () =>{
const {coverClicpPath,coverId} = this.state
this.setState({
showSelectFileModal: false
})
this.setState({
logo:coverClicpPath
})
}
// base64转换成blob
convertBase64UrlToBlob = (urlData) => {
const bytes = window.atob(urlData.split(",")[1]);
const ab = new ArrayBuffer(bytes.length);
const ia = new Uint8Array(ab);
for (let i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
}
return new Blob([ab], { type: "image/png" });
};
updateInfo=()=>{
const { storeName, logo } = this.state;
if(!storeName){
message.warning('请输入学院名称');
return;
}
const params= {
storeName,
logo,
storeId:User.getStoreId()
}
StoreService.updateStoreMessage(params).then((res) => {
User.setStoreName(storeName);
Bus.trigger('storeNameChange',storeName);
message.success('保存成功');
});
}
render() {
const {
avatar,
storeName,
showSelectFileModal,
visible,
hasImgReady,
logo,
cutImageBlob,
} = this.state;
return (
<div className="college-info-page">
<div className="page store-info-page">
<div className="content-header">学院基本信息</div>
<div className="box">
<div className="store-info-header">学院基本信息</div>
<div className="store-info-page-form">
<Form ref={this.formRef}>
<Form.Item
label="学院名称"
name="storeName"
rules={[{ required: true}]}
>
<Input value={storeName} style={{ width: '300px' }} placeholder="请输入学院名称" onChange={(e)=>this.onChangeFiledValue("storeName",e.target.value)} maxLength={30}/>
</Form.Item>
<Form.Item
label="学院logo"
>
<div className="logo-con">
<div className="logo-img-con">
{ logo ? <img src={logo} className="logo-img"/> : <div className="logo-box"><span className="text">Logo</span></div>}
</div>
<div className="operate-con">
<div><span onClick={() => {this.setState({ showSelectFileModal:true })}} className="upload-btn">
{logo ? <span>重新上传</span> : <span>上传</span> }
</span></div>
<div className="tip">建议尺寸702*180px。最大2M，支持jpg、jpeg和png。</div>
</div>
</div>
</Form.Item>
</Form>
</div>
{showSelectFileModal &&
<SelectPrepareFileModal
key="basic"
operateType="select"
multiple={false}
accept="image/jpeg,image/png,image/jpg"
selectTypeList={['JPG', 'JPEG', 'PNG']}
tooltip='支持文件类型：jpg、jpeg、png'
isOpen={showSelectFileModal}
onClose={() => {
this.setState({
showSelectFileModal:false
})
}}
onSelect={this.handleSelectCover}
/>
}
<Modal
title="设置图片"
width={1080}
visible={visible}
maskClosable={false}
closeIcon={<span className="icon iconfont modal-close-icon">&#xe6ef;</span>}
onCancel={() => {
this.setState({ visible: false });
}}
zIndex={10001}
footer={[
<Button
key="back"
onClick={() => {
this.setState({ visible: false });
}}
>
重新上传
</Button>,
<Button
key="submit"
type="primary"
disabled={!hasImgReady}
onClick={() => {
if (!cutFlag) {
cutFlag = true;
this.refs.hiddenBtn.click();
}
this.getSignature(cutImageBlob);
}}
>
确定
</Button>,
]}
>
<div className="clip-box">
<div
id="headPicModal"
ref="headPicModal"
style={{
width: "500px",
height: "430px",
marginBottom: 0,
}}
></div>
<div id="clipBtn" style={{ display: "none" }} ref="hiddenBtn"></div>
<div className="preview-img">
<div className="title">效果预览</div>
<div id="preview-url-box" style={{width:500,height:282}}>
<img src={this.state.dataUrl} style={{ width: '100%' }} alt="" />
</div>
</div>
</div>
</Modal>
<div><Button type="primary" onClick={this.updateInfo} htmlType="submit" className="submit-btn">更新信息</Button></div>
</div>
</div>
)
}
}
\ No newline at end of file
}
export default withRouter(CollegeInfoPage);
\ No newline at end of file
src/modules/root/App.tsx
......@@ -16,15 +16,18 @@ import User from '@/common/js/user';
import BaseService from "@/domains/basic-domain/baseService";
import { XMContext } from '@/store/context';
import { setStoreGroupPermission, setStorePermission, setStoreGroupList, setStoreList } from '@/store/actions/index';
import Service from "@/common/js/service";
import Bus from '@/core/tbus';
import { func } from 'prop-types';
declare var window: any;
const App: React.FC = (props: any) => {
const [storeUserId, serStoreUserId] = useState('')
const [storeUserId, setStoreUserId] = useState('')
const ctx: any = useContext(XMContext);
const userId = User.getUserId();
const [menuType, setMenuType] = useState(true);
const enterpriseId = User.getEnterpriseId();
window.ctx = ctx;
......@@ -38,7 +41,26 @@ const App: React.FC = (props: any) => {
}, [])
async function getStoreAndUserInfo() {
await getStoreGroupAndStoreList();
await (enterpriseId ? getStoreInfo() : getStoreGroupAndStoreList());
}
function getStoreInfo() {
const params = {
storeId: User.getStoreId(),
userId: User.getUserId(),
};
Service.Hades('public/customerHades/getStoreAndUserMsg', params).then((res) => {
const { id, storeUserId, storeName, userRole, storeType } = res.result;
User.setStoreId(id);
User.setStoreUserId(storeUserId);
User.setStoreName(storeName);
Bus.trigger('storeNameChange',storeName);
User.setUserRole(userRole);
User.setStoreType(storeType);
setStoreUserId(storeUserId)
getUserPermission();
})
}
function getStoreGroupAndStoreList() {
......@@ -56,7 +78,7 @@ const App: React.FC = (props: any) => {
User.setStoreType(storeType);
ctx.dispatch(setStoreGroupList(storeGroupVOS))
ctx.dispatch(setStoreList(storeVOS));
serStoreUserId(storeUserId)
setStoreUserId(storeUserId)
getUserPermission();
});
}
......
src/modules/root/CollegeManagePage.jsx
import React from 'react';
import Service from "@/common/js/service";
import BaseService from "@/domains/basic-domain/baseService";
import User from "@/common/js/user";
import moment from 'moment';
import './CollegeManagePage.less';
const roleMap = {
CloudManager: "管理员",
CloudLecturer: "讲师",
StoreManager: "学院管理员",
};
export default class CollegeManagePage extends React.Component {
constructor(props) {
super(props);
this.state = {
avatar: 'https://image.xiaomaiketang.com/xm/rJeQaZxtc7.png',
name: '',
list: [],
};
}
componentDidMount() {
const enterpriseId = User.getEnterpriseId();
this.getStoreList(enterpriseId);
this.getEnterpriseUser(enterpriseId);
}
getEnterpriseUser(enterpriseId) {
const params = {
enterpriseId,
userId: User.getUserId(),
}
BaseService.getEnterpriseUser(params).then((res) => {
const { name, avatar } = res.result;
this.setState({ name, avatar })
});
}
getStoreList(enterpriseId) {
const params = {
enterpriseId,
userId: User.getUserId(),
};
Service.Hades('public/hades/getStoreListUser', params).then((res) => {
this.setState({ list: res.result })
});
}
render() {
const {
name,
avatar,
list,
} = this.state;
return (
<div className="college-manage-page">
......@@ -21,7 +61,7 @@ export default class CollegeManagePage extends React.Component {
<img className="box-image" src="https://image.xiaomaiketang.com/xm/HNHCAF6Fc2.png" />
<div className="user">
<img className="image" src={avatar} />
<span className="name">Xiaomai</span>
<span className="name">{name}</span>
<span className="logout">退出</span>
</div>
</div>
......@@ -29,21 +69,30 @@ export default class CollegeManagePage extends React.Component {
<div className="college-box">
<div className="user">
<img className="image" src={avatar} />
<span className="name">用户ID</span>
<span className="name">{name}</span>
</div>
<div className="title-box">
<span className="title">企学院 (1)</span>
<span className="text">最多可创建10个企学院，您还能创建9个</span>
<span className="title">企学院 ({list.length})</span>
<span className="text">最多可创建10个企学院，您还能创建{10 - list.length}个</span>
</div>
<div className="college-list">
<div className="college-item">
<div className="header">
<img className="image" src="https://image.xiaomaiketang.com/xm/HNHCAF6Fc2.png" />
<span className="tag">学院管理员</span>
{list.map((item) => (
<div
key={item.id}
className="college-item"
onClick={() => {
User.setStoreId(item.id);
window.RCHistory.push('/home')
}}
>
<div className="header">
<img className="image" src={item.logo || "https://image.xiaomaiketang.com/xm/HNHCAF6Fc2.png"} />
<span className="tag">{roleMap[item.userRole]}</span>
</div>
<div className="title">{item.storeName}</div>
<div className="time">{moment(item.createTime).format('YYYY-MM-DD HH:mm')}</div>
</div>
<div className="title">小麦助教小麦助教小麦助教小麦助教小麦助教</div>
<div className="time">2020-03-29 17:17</div>
</div>
))}
<div
className="college-create"
onClick={() => {
......
src/modules/root/CreateCollege.jsx
......@@ -2,6 +2,9 @@ import React from 'react';
import { Input, Button, Modal, message } from 'antd';
import Upload from '@/core/upload';
import SelectPrepareFileModal from '@/modules/prepare-lesson/modal/SelectPrepareFileModal';
import Service from "@/common/js/service";
import BaseService from "@/domains/basic-domain/baseService";
import User from "@/common/js/user";
import './CreateCollege.less';
let cutFlag = false;
......@@ -16,6 +19,22 @@ export default class CreateCollege extends React.Component {
};
}
componentDidMount() {
const enterpriseId = User.getEnterpriseId();
this.getEnterpriseUser(enterpriseId);
}
getEnterpriseUser(enterpriseId) {
const params = {
enterpriseId,
userId: User.getUserId(),
}
BaseService.getEnterpriseUser(params).then((res) => {
const { name, avatar } = res.result;
this.setState({ name, avatar })
});
}
handleSelectCover = (file)=> {
this.uploadImage(file);
}
......@@ -129,9 +148,26 @@ export default class CreateCollege extends React.Component {
})
}
submit = () => {
const { logo, collegeName } = this.state;
const params = {
enterpriseId: User.getEnterpriseId(),
userId: User.getUserId(),
logo,
storeName: collegeName,
}
Service.Hades('public/hades/createStore', params).then((res) => {
if (res.success) {
window.RCHistory.push('/college-manage')
}
})
}
render() {
const {
avatar,
name,
collegeName,
logo,
showSelectFileModal,
visible,
......@@ -145,7 +181,7 @@ export default class CreateCollege extends React.Component {
<img className="box-image" src="https://image.xiaomaiketang.com/xm/HNHCAF6Fc2.png" />
<div className="user">
<img className="image" src={avatar} />
<span className="name">Xiaomai</span>
<span className="name">{name}</span>
<span className="logout">退出</span>
</div>
</div>
......@@ -155,10 +191,18 @@ export default class CreateCollege extends React.Component {
<img className="image" src={logo} />
</div>
<span className="tip">建议尺寸702*180px，JPG/PNG格式，图片小于2M。</span>
<Input className="input" placeholder="请输入学院名称"></Input>
<Input
className="input"
placeholder="请输入学院名称"
value={collegeName}
onChange={(e) => {
this.setState({ collegeName: e.target.value })
}}
></Input>
<Button
className="button"
type="primary"
onClick={() => this.submit()}
>确定创建</Button>
</div>
{showSelectFileModal &&
......
src/modules/root/Header.jsx
......@@ -23,12 +23,12 @@ const { confirm } = Modal;
function Header(props) {
const { menuType, handleMenuType } = props;
const [storeName, setStoreName] = useState(User.getStoreName())
const [avatar, setAvatar] = useState('');
const [nickName, setNickName] = useState('');
const [phone, setPhone] = useState('');
const ctx = useContext(XMContext);
const htmlUrl = `${LIVE_SHARE}store/index?id=${User.getStoreId()}&userId=${User.getUserId()}&from=work_weixin`;
const storeUserId = User.getStoreUserId();
const enterpriseId = User.getEnterpriseId();
useEffect(() => {
htmlUrl && handleConvertShortUrl();
......@@ -39,7 +39,8 @@ function Header(props) {
useEffect(() => {
storeUserId && getUserInfo();
enterpriseId ? getEnterpriseUser() : User.setIsAdmin(false);
const enterpriseId = User.getEnterpriseId();
enterpriseId ? getEnterpriseUser(enterpriseId) : User.setIsAdmin(false);
}, [storeUserId]);
function getUserInfo() {
......@@ -47,13 +48,14 @@ function Header(props) {
storeUserId: User.getStoreUserId(),
};
BaseService.getStoreUser(param).then((res) => {
const { nickName, phone, roleCodes, weChatAccount } = res.result;
const { nickName, phone } = res.result;
setNickName(nickName);
setPhone(phone);
setAvatar(res.result.avatar);
});
}
function getEnterpriseUser() {
function getEnterpriseUser(enterpriseId) {
const params = {
enterpriseId,
userId: User.getUserId(),
......@@ -62,7 +64,7 @@ function Header(props) {
const { isAdmin } = res.result;
User.setIsAdmin(isAdmin);
});
}
}
function userMenu() {
return (
......@@ -231,19 +233,11 @@ function Header(props) {
overflow: "hidden",
flexShrink: 0,
}}
src={
ctx.xmState &&
ctx.xmState.storeList &&
ctx.xmState.storeList[0].avatar
? ctx.xmState.storeList[0].avatar
: baseImg
}
src={avatar || baseImg}
/>
{ctx.xmState && ctx.xmState.storeList && (
<span className="name">
{ctx.xmState.storeList[0].nickName}
</span>
)}
<span className="name">
{nickName}
</span>
</div>
</Dropdown>
</div>
......
src/modules/root/SwitchRoute.tsx
......@@ -16,36 +16,14 @@ interface SwitchProps {}
function SwitchRoute(props: SwitchProps) {
useEffect(() => {
const userRole = User.getUserRole();
/**
* 角色登录后跳转
* 管理员和学院管理员登录后跳转到直播课列表页面
* 讲师登录后跳转资料云盘页面
*/
switch (userRole) {
case "CloudManager":
window.RCHistory.replace({
pathname: `/home`,
});
break;
case "StoreManager":
window.RCHistory.replace({
pathname: `/home`,
});
break;
case "CloudLecturer":
window.RCHistory.replace({
pathname: `/home`,
});
break;
case "CloudOperator":
window.RCHistory.replace({
pathname: `/home`,
});
break;
console.log(999999999)
const enterpriseId = User.getEnterpriseId();
if (enterpriseId) {
window.RCHistory.push('/college-manage');
} else {
window.RCHistory.push('/home')
}
}, [User.getUserRole()]);
}, []);
return <div></div>
}
......
src/modules/root/WechatLogin.tsx
......@@ -2,6 +2,7 @@ import React, { useState, useRef, useEffect } from 'react';
import qrcode from '@/core/qrcode/qrcode.js'
import Service from "@/common/js/service";
import User from '@/common/js/user';
import { PATH } from '@/domains/basic-domain/constants';
import './WechatLogin.less'
const Logo = require("@/common/images/logo.png")
declare var location: any;
......@@ -26,7 +27,7 @@ export default function WechatLogin(props: any) {
if (status === 0) {
Service.Hades("anon/hades/getTicket", {}).then((res: any) => {
setTicket(res.result)
const redirect = `${location.origin + location.pathname.replace('index.html', '') + 'h5.html'}?ticket=${res.result}&appTermEnum=XIAOMAI_CLOUD_CLASS_PC_WEB_ADMIN&env=${process.env.DEPLOY_ENV || 'dev'}`
const redirect = `${PATH}?ticket=${res.result}&appTermEnum=XIAOMAI_CLOUD_CLASS_PC_WEB_ADMIN&env=${process.env.DEPLOY_ENV || 'dev'}`
// console.log(redirect)
// const url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=ww409ccf9c6e31f19e&redirect_uri=${encodeURIComponent(redirect)}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`
// console.log(url)
......@@ -71,7 +72,7 @@ export default function WechatLogin(props: any) {
}).then((_res: any) => {
User.setUserId(_res.result.loginInfo.userId);
User.setToken(_res.result.loginInfo.xmToken);
User.setEnterpriseId(res.result.enterpriseId);
User.setEnterpriseId(_res.result.enterpriseId);
window.RCHistory.push({
pathname: `/switch-route`,
})
......
src/routes/config/mainRoutes.tsx
......@@ -24,7 +24,8 @@ import SwitchRoute from '@/modules/root/SwitchRoute';
import PlanPage from '@/modules/plan-manage/PlanPage';
import AddPlanPage from '@/modules/plan-manage/AddPlan';
import LearningDataPage from '@/modules/plan-manage/LearningData';
import StoreInfoPage from '@/modules/store-manage/StoreInfo';
// import StoreInfoPage from '@/modules/store-manage/StoreInfo';
import StoreInfoPage from '@/modules/college-manage/CollegeInfoPage';
import QuestionBankIndex from '@/modules/teach-tool/QuestionBankIndex';
import QuestionCategoryManage from '@/modules/teach-tool/QuestionCategoryManage';
import AddNewQuestion from '@/modules/teach-tool/AddNewQuestion';
......
src/routes/index.tsx
......@@ -17,6 +17,7 @@ import CollegeManagePage from '../modules/root/CollegeManagePage';
import CreateCollege from '../modules/root/CreateCollege';
import _ from 'underscore';
import { asyncComponent } from 'react-async-component'
import SwitchRoute from '@/modules/root/SwitchRoute';
const history = createHashHistory();
window.RCHistory = _.extend({}, history, {
push: (obj: any) => {
......@@ -54,6 +55,7 @@ export const RootRouter = () => {
<Router {...history}>
<Switch>
<Route key="1" exact path="/login" render={() => <Login />} />
<Route key="1" exact path="/switch-route" render={() => <SwitchRoute />} />
<Route key="1" exact path="/college-manage" render={() => <CollegeManagePage />} />
<Route key="1" exact path="/college-manage/create" render={() => <CreateCollege />} />
<Route key="2" path="/" render={() => <AppContext />} />
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment