Skip to content

S
saas-weichat
Commit 3ded64db by yanglang123
Options

新增积分页面

parent e627152c
Showing with 1145 additions and 2273 deletions
src/common/uploadOSS/uploadOSS.css 0 → 100644
.upload-box .ant-upload-self {
position: relative;
}
.upload-box .ant-upload-self .ant-upload:not(div) {
height: 100%;
width: 100%;
display: inline-block;
position: relative;
}
.upload-box .ant-upload-self .ant-upload:not(div) input {
display: inline-block !important;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
z-index: 999;
}
.ant-upload {
display: flex;
align-items: center;
justify-content: center;
}
src/common/uploadOSS/uploadOSS.jsx
import React, { Component } from 'react';
import { Upload, Icon } from 'antd';
import { Toast } from 'antd-mobile';
import api from '../../util/urlconfig';
import excute from '../../util/fetchUtil';
import './uploadOSS.less'
import intl from 'react-intl-universal';
import React, { Component } from "react";
import { Upload, Icon } from "antd";
import { Toast } from "antd-mobile";
import api from "../../util/urlconfig";
import excute from "../../util/fetchUtil";
import "./uploadOSS.less";
import intl from "react-intl-universal";
/*
组件说明：
该组件仅对蚂蚁的上传组件进行简单的封装，主要解决蚂蚁上传组件在移动端需要双击才能激活问题；
......@@ -24,206 +24,243 @@ import intl from 'react-intl-universal';
*/
class UploadOSS extends Component {
constructor(props) {
super(props);
this.state = {
ossSignData: {},
currentUploadedList: [],
}
constructor(props) {
super(props);
this.state = {
ossSignData: {},
currentUploadedList: [],
fileList:[]
};
}
componentDidMount() {
console.log(" UploadOSS ok");
this.getUploadSign();
}
getUploadSign = () => {
let _this = this;
excute.get(
api.ossUrl + "/upload/policy?t=" + new Date().getTime(),
(res) => {
let ossSignData = JSON.parse(res.data);
_this.setState({
ossSignData,
});
}
);
};
fileTypeToLocal(fileType) {
let fileTypeLocal;
switch (fileType) {
case "text":
fileTypeLocal = intl.get("myLesson1") || "文本";
break;
case "image":
fileTypeLocal = intl.get("pic") || "图片";
break;
case "audio":
fileTypeLocal = intl.get("audio") || "音频";
break;
case "video":
fileTypeLocal = intl.get("video") || "视频";
break;
case "application":
fileTypeLocal = intl.get("UseApply") || "应用"; // .doc .excel .zip 等也属于此类，input原生如此；
break;
default:
fileTypeLocal = intl.get("FileFiles") || "文件";
break;
}
componentDidMount() {
console.log(" UploadOSS ok");
this.getUploadSign();
return fileTypeLocal;
}
beforeUpload = (file, fileList) => {
// file 当前选中的文件对象;
// fileList 允许上传文件夹时的文件列表；
console.log("file, fileList", file, fileList);
}
getUploadSign = () => {
let _this = this;
excute.get(
api.ossUrl + '/upload/policy?t=' + new Date().getTime(),
(res) => {
let ossSignData = JSON.parse(res.data);
_this.setState({
ossSignData,
});
}
);
}
fileTypeToLocal(fileType) {
let fileTypeLocal;
switch (fileType) {
case "text":
fileTypeLocal = intl.get("myLesson1") || "文本";
break;
case "image":
fileTypeLocal = intl.get("pic") || "图片";
break;
case "audio":
fileTypeLocal = intl.get("audio") || "音频";
break;
case "video":
fileTypeLocal = intl.get("video") || "视频";
break;
case "application":
fileTypeLocal = intl.get("UseApply") || "应用"; // .doc .excel .zip 等也属于此类，input原生如此；
break;
default:
fileTypeLocal = intl.get("FileFiles") || "文件";
break;
}
return fileTypeLocal;
}
beforeUpload = (file, fileList) => {
// file 当前选中的文件对象;
// fileList 允许上传文件夹时的文件列表；
console.log("file, fileList", file, fileList);
const timeCode = +new Date();
const { ossSignData = {}, currentUploadedList } = this.state;
const {
acceptFileType = "",
maxSize = { file: 10 },
maxlength = null,
tooMoreTip = "",
} = this.props;
const timeCode = +new Date();
const { ossSignData = {}, currentUploadedList } = this.state;
const {
acceptFileType = '',
maxSize = { "file": 10 },
maxlength = null,
tooMoreTip = '',
} = this.props;
let fileType = file.type && file.type.split("/")[0];
// 文件基本类型： text，image，audio，video，application;
// let suffix = file.type && file.type.split('/')[1]; //有可能不存在该字段，所以还是用点截取文件名
let suffix =
file.name &&
file.name.substring(file.name.lastIndexOf(".")).toLowerCase().trim();
let acceptTypeArr = acceptFileType.split(",");
let fileType = file.type && file.type.split('/')[0];
// 文件基本类型： text，image，audio，video，application;
// let suffix = file.type && file.type.split('/')[1]; //有可能不存在该字段，所以还是用点截取文件名
let suffix = file.name && file.name.substring(file.name.lastIndexOf(".")).toLowerCase().trim();
let acceptTypeArr = acceptFileType.split(",");
if (
acceptFileType &&
!acceptTypeArr.includes(suffix) &&
!acceptTypeArr.includes(`${fileType}/*`)
) {
console.error("suffix==", suffix);
console.error("acceptTypeArr==", acceptTypeArr);
Toast.info(
intl.get("PleaseUploadRightTypeFiles") || "请上传正确格式的文件。"
);
return false;
}
if (acceptFileType && !acceptTypeArr.includes(suffix) && !acceptTypeArr.includes(`${fileType}/*`)) {
console.error("suffix==", suffix);
console.error("acceptTypeArr==", acceptTypeArr)
Toast.info(intl.get("PleaseUploadRightTypeFiles") || "请上传正确格式的文件。");
return false
};
if (maxlength && !(maxlength > currentUploadedList.length)) {
if (tooMoreTip) {
Toast.info(tooMoreTip);
} else {
Toast.info(
`${intl.get("forum17") || "最多上传"}${maxlength}${
intl.get("caseAttachmentUploadTip2") || "个文件"
}。`
);
}
return false;
}
if (maxlength && !(maxlength > currentUploadedList.length)) {
if (tooMoreTip) {
Toast.info(tooMoreTip);
} else {
Toast.info(`${intl.get("forum17") || "最多上传"}${maxlength}${intl.get("caseAttachmentUploadTip2") || "个文件"}。`);
}
return false;
}
let maxSizeKeys = [];
if (typeof maxSize == "object") {
maxSizeKeys = Object.keys(maxSize);
} else {
throw new Error(
"maxSize was expected a Obejct in UploadOSS Component,like {image:10}"
);
return;
}
let currentType = maxSizeKeys[maxSizeKeys.indexOf(fileType)];
if (file.size / 1024 / 1024 > maxSize[currentType]) {
Toast.info(
`${intl.get("PleaseUpLesser1") || "请上传小于"}${maxSize[currentType]}${
intl.get("Mised") || "M的"
}${this.fileTypeToLocal(currentType)}。`
);
return false;
}
// debugger
Toast.loading(intl.get("fileUploading") + "...", 0);
this.setState({
uploadParams: {
Filename: ossSignData.dir + "/" + file.uid + timeCode + suffix,
key: ossSignData.dir + "/" + file.uid + timeCode + suffix,
policy: ossSignData.policy,
OSSAccessKeyId: ossSignData.accessid,
success_action_status: "200",
signature: ossSignData.signature,
},
currentUploadedList: [
...currentUploadedList,
{
name: file.name,
size: file.size,
type: file.type,
lastModified: file.lastModified,
uid: file.uid,
fileUrl:
ossSignData.host +
"/" +
ossSignData.dir +
"/" +
file.uid +
timeCode +
suffix,
},
],
});
};
uploadStatusChange = (callbackInfo) => {
this.setState({ fileList:callbackInfo.fileList })
const { currentUploadedList = [] } = this.state;
let { file = {}, fileList = [], event = {} } = callbackInfo;
// file当前上传的文件对象;
// fileList历史上传的文件列表，包括上传中，上传失败的文件；
let maxSizeKeys = [];
if (typeof maxSize == "object") {
maxSizeKeys = Object.keys(maxSize);
} else {
throw new Error("maxSize was expected a Obejct in UploadOSS Component,like {image:10}");
return;
}
let currentType = maxSizeKeys[maxSizeKeys.indexOf(fileType)];
if (file.size / 1024 / 1024 > maxSize[currentType]) {
Toast.info(`${intl.get("PleaseUpLesser1") || "请上传小于"}${maxSize[currentType]}${intl.get("Mised") || "M的"}${this.fileTypeToLocal(currentType)}。`);
return false
}
// debugger
Toast.loading(intl.get("fileUploading")+ "...",0);
this.setState({
uploadParams: {
'Filename': ossSignData.dir + "/" + file.uid + timeCode + suffix,
'key': ossSignData.dir + "/" + file.uid + timeCode + suffix,
'policy': ossSignData.policy,
'OSSAccessKeyId': ossSignData.accessid,
'success_action_status': '200',
'signature': ossSignData.signature,
},
currentUploadedList: [...currentUploadedList, {
name: file.name,
size: file.size,
type: file.type,
lastModified: file.lastModified,
uid: file.uid,
fileUrl: ossSignData.host + "/" + ossSignData.dir + "/" + file.uid + timeCode + suffix,
}]
// 插入文件当前状态；
fileList.length > 0 &&
fileList.map((item, index) => {
currentUploadedList.map((el, i) => {
if (el.uid == item.uid) {
el.percent = item.percent;
el.status = item.status;
}
});
});
if (
currentUploadedList.length > 0 &&
currentUploadedList[0].status == "done"
) {
Toast.hide();
Toast.success(intl.get("uploadSuccess"), 2);
}
uploadStatusChange = (callbackInfo) => {
const { currentUploadedList = [] } = this.state;
let { file = {}, fileList = [], event = {} } = callbackInfo;
// file当前上传的文件对象;
// fileList历史上传的文件列表，包括上传中，上传失败的文件；
// 插入文件当前状态；
fileList.length > 0 && fileList.map((item, index) => {
currentUploadedList.map((el, i) => {
if (el.uid == item.uid) {
el.percent = item.percent;
el.status = item.status;
}
})
});
console.log("上传进度", currentUploadedList);
if(currentUploadedList.length>0 &&currentUploadedList[0].status == "done"){
Toast.hide();
Toast.success(intl.get("uploadSuccess"),2);
}
console.log("上传进度",currentUploadedList);
this.props.deliveryFiles(currentUploadedList);
if (file.status == "error") {
Toast.info(intl.get("UploaderFailPleaseTryAgain") || "上传失败，请重试。");
}
this.props.deliveryFiles(currentUploadedList);
if (file.status == "error") {
Toast.info(
intl.get("UploaderFailPleaseTryAgain") || "上传失败，请重试。"
);
}
removeFile = (id, callback) => {
// 该方法通过父组件ref来调用；
let { currentUploadedList = [] } = this.state;
let indexDle
currentUploadedList.forEach((item, index) => {
if (item.uid == id) {
indexDle = index;
}
})
let deletedArr = [];
if (indexDle > -1) {
deletedArr = currentUploadedList.splice(indexDle, 1);
}
if (id == "all") {
deletedArr = [...currentUploadedList];
currentUploadedList = [];
}
this.setState({
currentUploadedList: currentUploadedList,
}, () => {
this.props.deliveryFiles(currentUploadedList);
if (callback) {
callback(deletedArr,currentUploadedList);
}
})
};
removeFile = (id, callback) => {
// 该方法通过父组件ref来调用；
let { currentUploadedList = [] } = this.state;
let indexDle;
currentUploadedList.forEach((item, index) => {
if (item.uid == id) {
indexDle = index;
}
});
let deletedArr = [];
if (indexDle > -1) {
deletedArr = currentUploadedList.splice(indexDle, 1);
}
render() {
const { ossSignData = {}, uploadParams = {} } = this.state;
const {
launchUploadIcon = <Icon type="plus" className="upload-icon" />
} = this.props;
// console.log("this.state==", this.state);
return (
<div className="upload-box">
<Upload
style={{ display: "inline-block" }}
headers={{ 'X-Requested-With': null }}
beforeUpload={this.beforeUpload}
action={ossSignData.host}
data={uploadParams}
onChange={this.uploadStatusChange}
showUploadList={false}
accept={this.props.acceptFileType}
// multiple={true}
className="ant-upload-self"
>
<div className="upload-icon-wrapper">
{launchUploadIcon}
</div>
</Upload>
</div >
)
if (id == "all") {
deletedArr = [...currentUploadedList];
currentUploadedList = [];
}
this.setState(
{
currentUploadedList: currentUploadedList,
},
() => {
this.props.deliveryFiles(currentUploadedList);
if (callback) {
callback(deletedArr, currentUploadedList);
}
}
);
};
render() {
const { ossSignData = {}, uploadParams = {} ,fileList} = this.state;
const uploadButton = (
<div>
<Icon type="plus" />
</div>
);
// console.log("this.state==", this.state);
return (
<div className="upload-box">
<Upload
style={{ display: "inline-block" }}
headers={{ "X-Requested-With": null }}
beforeUpload={this.beforeUpload}
action={ossSignData.host}
listType="picture-card"
fileList={fileList}
data={uploadParams}
onChange={this.uploadStatusChange}
accept={this.props.acceptFileType}
// multiple={true}
className="ant-upload-self"
>
{fileList.length >= this.props.maxlength ? null : uploadButton}
</Upload>
</div>
);
}
}
export default UploadOSS;
\ No newline at end of file
export default UploadOSS;
src/common/uploadOSS/uploadOSS.less
......@@ -20,4 +20,9 @@
}
}
}
}
.ant-upload{
display: flex;
align-items: center;
justify-content: center;
}
\ No newline at end of file
src/common/uploadTools/UploadTool.jsx deleted 100644 → 0
import React, {Component} from 'react';
import {Icon} from 'antd';
import {List, Modal, SwipeAction, Toast} from 'antd-mobile';
import UploadItem from './uploadItem/upload';
import uploader from '../../util/uploader';
import fetchUtil from '../../util/fetchUtil';
import func from '../../util/commonFunc';
import urlconfig from '../../util/urlconfig';
import './uploadTllo.less';
import deleteIcon from "./image/trash-o@3x.png";
import addPicture from './image/add-picture.png';
import intl from "react-intl-universal";
var ossData = '';
export default class UploaderTools extends Component {
constructor(props) {
super(props);
this.state = {
host: '',
dir: '',
uploadVisibile: false,
fileList: [],
isInit: false,
}
this.progressId = [];
}
componentWillMount() {
func.appendJsFunction("lib/crypto1/crypto/crypto.js","upload-crypto");
func.appendJsFunction("lib/crypto1/hmac/hmac.js","upload-hmac");
func.appendJsFunction("lib/crypto1/sha1/sha1.js","upload-sha1");
func.appendJsFunction("lib/base64.js","upload-base64");
func.appendJsFunction("lib/plupload-2.1.2/js/plupload.full.min.js","upload-plupload");
}
componentDidMount(){
const { fileList } = this.props;
if(fileList && fileList.length){
fileList.forEach((item)=>{
this.progressId.push(item.id);
})
}
this.setState({
fileList: fileList
})
}
beforeUpload = (files) => {
let cache = files[0].name.split('.');
let fileas = cache[cache.length - 1].toLowerCase();
cache[cache.length - 1] = fileas
let cachName = "";
cache.map((item, index) => {
if(index == 0){
cachName = item
}else{
cachName = cachName + "." + item
}
})
files[0].name = cachName;
if(this.state.fileList.length > 9){
Toast.info("最多上传9个附件", 1);
return
}
var group = [];
var {fileList} = this.state;
var overSize = 0, falseType = 0;
for (let i = 0; i < files.length; i++) {
const fileTypeCheck= func.fileTypeCheck(files[i].type);
var tyoe=fileTypeCheck;
if (fileTypeCheck) {
if (func.fileSizeCheck(files[i].size, files[i].type)) {
var reg=/\.$/gi,str;
str=files[i].name.replace(reg,"");
console.log(str);
group.push({
id: files[i].id,
name: new Date().getTime() + cachName,
percent: 0,
statusCode:"progress",
size: files[i].size
});
console.log(group,"group");
} else {
overSize++;
}
} else {
falseType++;
}
}
if (falseType > 0) {
Toast.info(intl.get('forum19')||"请选择正确格式文件");
uploader.removeFiles();
} else if (overSize > 0) {
Toast.info(intl.get('PublishKey161')||"请选择合适大小的文件");
uploader.removeFiles();
} else {
fileList = fileList.concat(group);
this.setState({
fileList: fileList
});
this.props.getFileList(fileList);
this.beginUpload(files);
}
}
beginUpload = (files) => {
this.close("upload");
let _this = this;
for(let i=0;i<files.length;i++){
fetchUtil.get(urlconfig.ossUrl + "/upload/policy?needTranscode=true&type=2", function (data) {
ossData = JSON.parse(data.data);
ossData.id = files[i].id;
ossData.fileName = files[i].id + "." + files[i].name.split(".")[files[i].name.split(".").length - 1];
if (_this.state.host.length == 0) {
_this.setState({
host: ossData.host,
dir: ossData.dir
});
}
uploader.uploadFile(ossData);
})
}
}
uploadProgress = (file) => {
var {fileList} = this.state;
let _this = this;
if (this.progressId.indexOf(file.id) == -1) {
fileList[this.progressId.length].percent = file.percent;
fileList[this.progressId.length].statusCode = "progress";
this.progressId.push(file.id);
} else {
fileList[this.progressId.indexOf(file.id)].percent = file.percent;
fileList[this.progressId.indexOf(file.id)].statusCode = "progress";
}
this.setState({
fileList: fileList
},()=>{
_this.props.getFileList(_this.state.fileList);
});
}
completeUpload = (info, up, file) => {
if (info.status == 200) {
var ImgUrl = this.state.host + "/" + this.state.dir + "/" + file.id + '.' + file.name.split('.')[file.name.split('.').length - 1];
var {fileList} = this.state;
var tempFileList = fileList.map((item) => {
if (item.id == file.id) {
item.imgUrl = ImgUrl;
item.statusCode = file.status==5?"success":"fail";
return item;
} else {
return item;
}
});
this.setState({
fileList: tempFileList,
});
this.props.getFileList(tempFileList);
}
}
deleteFileById = (id) => {
const _this = this;
let { fileList } = this.state;
let arr = fileList.filter((item) => {
return item.id == id;
});
if (arr.length > 0 && arr[0].statusCode == "success") {
arr = fileList.filter((item) => {
return item.id != id;
});
this.setState({
fileList: arr,
randomKey: new Date().getTime()
}, ()=>_this.props.getFileList(_this.state.fileList));
} else {
Toast.info(intl.get('myHomework7')||"文件上传中,不可删除", 1);
}
}
uploadItems = () => {
const {fileList} = this.state;
const {noPreview, noDelete} = this.props;
var result = [];
if (fileList.length > 0 && !noDelete) {
result = fileList.map((item, i) => {
return <SwipeAction
key={i}
autoClose
right={
[
{
text: <img src={deleteIcon} style={{width:36}}/>,
onPress: () => this.deleteFileById(item.id),
style: {backgroundColor: '#EE6157', color: 'white', width: 140},
},
]
}
>
<List.Item>
<UploadItem item={item} noPreview={noPreview} />
</List.Item>
</SwipeAction>;
});
} else if (fileList.length > 0 && noDelete) {
result = fileList.map((item, i) => {
return <SwipeAction
key={i}
autoClose
right={[]}
>
<List.Item>
<UploadItem item={item} noPreview={noPreview} />
</List.Item>
</SwipeAction>;
});
}
return result;
}
uploadedItems = () => {
const {fileList} = this.state;
if (fileList.length > 0) {
result = fileList.map((item, i) => {
return <List.Item key={i} className={"upload-item-result-list"}>
<UploadItem isResult={true} item={item}/>
</List.Item>;
});
}
return result;
}
show = (type) => {
switch (type) {
case "upload":
this.setState({
uploadVisibile: true
});
if (!this.state.isInit) {
uploader.init("selectedFile", "upload-container", this.beforeUpload, this.uploadProgress, this.completeUpload);
this.setState({
// isInit: true
});
}
break;
}
}
clearFile = () => {
this.progressId = [];
this.setState({
fileList: []
})
}
close = (type) => {
switch (type) {
case "upload":
return this.setState({
uploadVisibile: false
});
}
}
render(){
var uploadItems = [];
uploadItems = this.uploadItems();
return(
<div className="publish-forum-upload">
{
uploadItems.length > 0 &&
<div style={{padding: "0.2rem 0"}} className="upload-list">
<List className="publish-list-list">
{uploadItems}
</List>
</div>
}
{
this.state.fileList.length > 0 && !this.props.isResult ?
<div className="forum-menu">
<span className={"menu-delete"} onClick={this.clearFile}>
<img src={deleteIcon} style={{width:28,marginTop:-10}} alt=""/> {intl.get('PublishKey164')||'全部删除'}
</span>
<div style={{clear: 'both'}}></div>
</div> : ''
}
{!this.props.isResult && this.state.fileList.length <9 ? <div className="upload-btn">
{/* <UploadBtn onClick={() => this.show('upload')} /> */}
<img style={{borderRadius: '40px'}} onClick={() => this.show('upload')} src={addPicture} alt=""/>
</div> : null}
<Modal
popup
style={{height: 176, bottom: 0, position: 'fixed', left: 0, width: "100%"}}
visible={this.state.uploadVisibile}
onClose={() => this.close('upload')}
// animationType="slide-down"
animationType="slide-up"
>
<List className="forum-upload-option">
<List.Item onClick={this.selectFile}>
<div id="upload-container">
<a id="selectedFile"> {intl.get('PublishKey57')||'本地上传'}</a>
</div>
</List.Item>
</List>
<div style={{
lineHeight: '88px',
textAlign: 'center',
width: "100%",
background: '#fff',
borderTop: '.02rem solid #eee'
}} onClick={() => this.close('upload')}> {intl.get('Cancel')||'取消'}
</div>
</Modal>
</div>
)
}
}
\ No newline at end of file
src/common/uploadTools/uploadItem/upload.jsx deleted 100644 → 0
import React, { Component } from 'react';
import { Modal, Toast } from 'antd-mobile';
import { Icon, Progress } from 'antd';
import { hashHistory } from "react-router";
import './uploaditem.less';
import func from '../../../util/commonFunc';
import thumbnail from '../../../static/image/poster.jpg';
import mediaIcon from './videoIcon.png';
import intl from "react-intl-universal";
class UploadItem extends Component {
constructor(props) {
super(props);
this.state = {
fileLookVisible: false
};
this.startFileLook = this.startFileLook.bind(this);
console.log(this.props.name);
}
getItemType(title) {
let arr = title.split(".");
let type = arr[arr.length - 1];
type = type.toLocaleLowerCase();
const imageType = ["jpg", "jpeg", "png", "gif"];
const videoType = ["mp4"];
const audioType = ["mp3"];
const docType = ["ppt", "pptx", "doc", "docx", "xls", "xlsx", "pdf"];
const compressionType = ["zip"];
if (imageType.indexOf(type) != -1) {
return "image";
} else if (videoType.indexOf(type) != -1) {
return "video";
} else if (audioType.indexOf(type) != -1) {
return "audio";
} else {
return "file";
}
}
startFileLook(item,noPreview) {
if(noPreview){
return;
}
const fileType = ["jpg", "jpeg", "png","gif","mp4","mp3"];
let typeText = "";
if (item.name) {
typeText = item.name.split(".")[item.name.split(".").length - 1];
} else {
typeText = item.title.split(".")[item.title.split(".").length - 1];
}
if (fileType.indexOf(typeText) != -1) {
hashHistory.push({
pathname: func.routerBefore() + "/mediapreview",
state: item.img ? item.img : item.imgUrl
});
} else {
console.log("startFileLook-item", item)
//下载
hashHistory.push({
pathname:func.routerBefore()+"/browserdownload",
query:{
fileUrl:encodeURIComponent(item.imgUrl)
}
});
// Toast.info("该文件格式不支持手机端在线预览，请登陆PC端查看或下载", 2);
}
}
resultItemName(name) {
let nameArr = name.split(".");
let onlyNameArr = nameArr.filter((item, index) => {
return index < nameArr.length - 1;
});
let onlyNameStr = onlyNameArr.join(".");
if (onlyNameStr.length > 10) {
return onlyNameStr.slice(0, 10) + "..." + nameArr[nameArr.length - 1];
} else {
return name;
}
}
render() {
const { item,isResult,noPreview } = this.props;
// console.log("upload-render-item", item);
if (this.props.type == "feedback") {
return (
<div className="upload-item" onClick={() => this.startFileLook(item)}>
<p>{item.title}</p>
{
item.upLoadTime ?
<div className="upload-time-homework-daying">
{func.dateFormat(item.upLoadTime)}
</div> :
<div>
<span style={{
fontSize: 24,
color: "#666",
marginLeft: 20
}}>{func.sizeFormat(item.size)}</span>
</div>
}
<div className="upload-thumbnail">
{
this.getItemType(item.title) == "image" ?
<img src={item.img} alt="" />
: <img src={mediaIcon} alt={""} />
}
</div>
</div>
);
} else if (this.props.type == "makeCourse") {
return (
<div className="upload-item">
<p>{item.title}</p>
<div className="upload-thumbnail">
<img src={item.img} alt="" />
</div>
</div>
);
} else {
if (isResult) {
return <div className="upload-result-item" onClick={() => this.startFileLook(item)}>
{this.resultItemName(item.name)}
<span>
/
{func.sizeFormat(item.size)}
</span>
</div>
} else {
return (
<div className="upload-item" onClick={() => this.startFileLook(item,noPreview)}>
<p>{item.name}</p>
{
item.statusCode == "progress" ?
<Progress style={{ width: "89%", float: "left", marginTop: 3 }} percent={item.percent} />
: item.upLoadTime ?
<div className="upload-time-homework-daying">
{func.dateFormat(item.upLoadTime)}
</div> : ""
}
{
item.statusCode == "progress" ?
<div style={{ clear: "both" }}></div> : ""
}
{
item.statusCode == "success" || item.statusCode == "progress" ?
<div>
{
item.statusCode == "success" ?
<span style={{ fontSize: 24, color: "#76C482" }}>{intl.get('uploadSuccess')||'上传成功'}</span> : ""
}
<span style={{
fontSize: 24,
color: "#666",
marginLeft: item.statusCode == "success"?20:0
}}>{func.sizeFormat(item.size)}</span>
</div> :
item.statusCode == "fail" ?
<div>
<span style={{ fontSize: 24, color: "#ee6157" }}>{intl.get('homework8')||'上传失败'}</span>
</div> : ""
}
{
item.statusCode == "progress" ?
<div className="upload-item-progressText">
{intl.get('homework9')||'上传中'}
</div> : ""
}
<div className="upload-thumbnail">
{
item.statusCode == "progress" ?
<Icon type="file" style={{ fontSize: 80 }} />
: this.getItemType(item.name) == "image" ?
<img src={item.imgUrl ? item.imgUrl : thumbnail} alt="" />
: this.getItemType(item.name) == "video" || this.getItemType(item.name) == "audio" ?
<img src={mediaIcon} alt={""} /> :
<Icon type="file" style={{ fontSize: 80 }} />
}
</div>
</div>
);
}
}
}
}
export default UploadItem;
\ No newline at end of file
src/common/uploadTools/uploadItem/uploaditem.css deleted 100644 → 0
.upload-item {
width: 100%;
height: 107px;
font-size: 28px;
color: #4a4a4a;
padding-left: 124px;
padding-right: 50px;
position: relative;
}
.upload-item .upload-time-homework-daying {
font-size: 24px;
color: #999999;
margin-top: 10px;
}
.upload-item p {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.upload-item .upload-thumbnail {
width: 100px;
height: 100px;
position: absolute;
left: 0;
top: 0;
text-align: center;
line-height: 80px;
}
.upload-item .upload-thumbnail img {
width: 100px;
height: 100px;
}
.upload-item .file-look {
width: 50px;
height: 80px;
position: absolute;
right: 0;
top: 0;
text-align: center;
line-height: 80px;
font-size: 22px;
}
.upload-item .file-look a {
color: #9b9b9b;
}
.upload-item .file-look a:hover {
color: #9b9b9b;
text-decoration: none;
}
.file-preview {
width: 100%!important;
}
.file-preview .am-modal-content {
padding: 0!important;
}
.file-preview .am-modal-body {
width: 100%;
text-align: center!important;
padding: 0!important;
}
src/common/uploadTools/uploadItem/uploaditem.less deleted 100644 → 0
.upload-item {
width: 100%;
height: 107px;
font-size: 28px;
color: #4a4a4a;
padding-left: 124px;
padding-right: 50px;
position: relative;
.upload-time-homework-daying{
font-size: 24px;
color: #999999;
margin-top: 10px;
}
p {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding-right: 10%;
}
.upload-item-progressText{
position: absolute;
top: 0;
right: 0;
height: 107px;
line-height: 105px;
font-size: 24px;
color: #76c482;
}
.upload-thumbnail {
width: 100px;
height: 100px;
position: absolute;
left: 0;
top: 0;
text-align: center;
line-height: 80px;
img {
width: 100px;
height: 100px;
}
}
.file-look {
width: 50px;
height: 80px;
position: absolute;
right: 0;
top: 0;
text-align: center;
line-height: 80px;
font-size: 22px;
a{
color: #9b9b9b;
}
a:hover{
color: #9b9b9b;
text-decoration: none;
}
}
}
.upload-result-item{
width: 100%;
height: 100px;
line-height: 98px;
font-size: 28px;
color: #666;
border-bottom:1px solid #ccc;
span{
font-size: 28px;
color: #999;
}
}
.file-preview{
width: 100%!important;
.am-modal-content{
padding: 0!important;
}
.am-modal-body{
width: 100%;
text-align: center!important;
padding: 0!important;
}
}
src/common/uploadTools/uploadTllo.less deleted 100644 → 0
.publish-forum-upload{
.upload-btn {
width: 100%;
height: 100px;
text-align: left;
margin-top: 20px;
padding-bottom: 160px;
padding-left: 20px;
span {
font-size: 28px;
color: #4a4a4a;
}
}
.upload-list {
width: 100%;
padding: 30px 20px;
h5 {
font-size: 24px;
color: #4a4a4a;
}
.publish-list-list{
>div{
>div{
// margin-top: 10px;
// padding-top: 10px;
// padding-bottom: 10px;
.am-list-item{
padding-left: 20px;
padding-top: 10px;
padding-bottom: 10px;
}
}
}
}
.upload-item-list{
.am-list-line{
padding-top: 0px;
padding-bottom: 0px;
}
}
.upload-item-result-list{
height: 100px;
padding-left:0;
.am-list-line{
padding-top: 10px;
padding-bottom: 0px;
padding-right: 0;
}
}
}
.forum-menu {
width : 100%;
// height : 32px;
// line-height : 90px;
padding-left : 22px;
padding-right: 30px;
padding-top: 14px;
.menu-title {
font-size: 20px;
color : #9B9B9B;
}
.menu-delete {
float : right;
font-size: 28px;
color : #666;
}
}
}
.forum-upload-option {
.am-list-content {
text-align: center !important;
a {
width: 100%;
height: 51px;
display: block;
color: #000;
}
}
}
\ No newline at end of file
src/components/Mailbox/action.js
import excute from '../../util/fetchUtil';
import API from '../../util/urlconfig';
import { Toast } from "antd-mobile";
//获取投稿类型list
export function getContributeListApi(params, callback) {
const url = `${API.getContributeListApi}?id=${params.id}`;
return (dispatch) => {
return excute.get(
url,
(response) => {
if (callback) {
callback(response.data);
}
}
);
};
}
//提交投稿
export function commitContributeApi(params, callback) {
//纪检信箱
export function systemMailboxApi(params, callback) {
return (dispatch) => {
return excute.post(
API.commitContributeApi,
API.systemMailboxApi,
params,
(response) => {
Toast.info('提交成功')
if (callback) {
callback(response.data);
}
......@@ -29,14 +16,14 @@ export function commitContributeApi(params, callback) {
);
};
}
//我的投稿列表
export function getContributeMyListApi(params, callback) {
const url = `${API.getContributeMyListApi}`;
//党委书记信箱
export function dwsystemMailboxApi(params, callback) {
return (dispatch) => {
return excute.post(
url,
{},
API.dwsystemMailboxApi,
params,
(response) => {
Toast.info('提交成功')
if (callback) {
callback(response.data);
}
......
src/components/Mailbox/index.jsx
......@@ -2,15 +2,14 @@ import React, { Component } from "react";
import "./style.less";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import { getContributeListApi } from "./action";
import { Input, Upload, Icon, Modal } from "antd";
import UploaderTools from "./../../common/uploadTools/UploadTool";
import { systemMailboxApi, dwsystemMailboxApi } from "./action";
import { Input, Radio } from "antd";
import PostUploadFile from "../../common/uploadOSS/uploadOSS";
const { TextArea } = Input;
class ContributeDetail extends Component {
constructor(props) {
super(props);
this.state = {
ossParam: {},
activeId: 0,
authValue: "",
delValue: "",
......@@ -18,7 +17,9 @@ class ContributeDetail extends Component {
contentValue: "",
previewVisible: false,
previewImage: "",
remark: "",
fileList: [],
anonymousFlag: "",
mailList: [
{ name: "意见建议", id: 1 },
{ name: "线索提供", id: 2 },
......@@ -30,8 +31,16 @@ class ContributeDetail extends Component {
{ name: "寻求帮助", id: 3 },
],
};
document.title = "我要投稿";
document.title =
location.hash.indexOf("committeeMailbox") != -1
? "党委书记信箱"
: "纪检信箱";
}
getUploadImg = (files) => {
this.setState({
fileList: files,
});
};
componentDidMount() {}
handleClick = (item, index) => {
const { activeId } = this.state;
......@@ -39,24 +48,40 @@ class ContributeDetail extends Component {
if (activeId != index) {
_this.setState({
activeId: index,
targetFrom: item.name,
});
}
};
handleTo = () => {
console.log(this.state.titleValue, "点击情况~~~~~~~~~");
// let { typeOne, typeTwo, typeThree } = this.props.location.query;
// let params = {
// id: data.id,
// };
// this.props.getContributeListApi(params, (response) => {
// console.log(response);
// });
};
getFileList = (list) => {
this.setState({
fileList: list,
let imgs = [];
let videos = [];
this.state.fileList.map((item) => {
if (item.type == "video/mp4") {
videos.push(item.fileUrl);
} else {
imgs.push(item.fileUrl);
}
});
console.log(this.state.fileList, "2222222222222");
let params = {
fileName: this.state.titleValue,
contactName: "联系人名称",
contactNumber: "联系人手机号/邮箱",
content: this.state.contentValue,
ossPicUrl: JSON.stringify(imgs),
ossVideoUrl: JSON.stringify(videos),
remark: this.state.remark,
targetFrom: this.state.targetFrom ? this.state.targetFrom : "意见建议",
anonymousFlag: this.state.anonymousFlag, //是否匿名：1是，0否
};
if (location.hash.indexOf("committeeMailbox") != -1) {
this.props.systemMailboxApi(params, (response) => {
console.log(response);
});
} else {
this.props.dwsystemMailboxApi(params, (response) => {
console.log(response);
});
}
};
render() {
const { mailList, mailListCommit, activeId } = this.state;
......@@ -126,9 +151,9 @@ class ContributeDetail extends Component {
<div className="contribute-detail-box">
<div className="top-tit">期望结果</div>
<TextArea
value={this.state.contentValue}
value={this.state.remark}
onChange={(event) =>
this.setState({ contentValue: event.target.value })
this.setState({ remark: event.target.value })
}
placeholder="请输入期望结果"
rows={4}
......@@ -139,13 +164,37 @@ class ContributeDetail extends Component {
)}
<div className="contribute-detail-box">
<div className="top-tit">上传附件</div>
<UploaderTools
getFileList={this.getFileList}
fileList={this.state.fileList}
noPreview={true}
isResult={false}
<PostUploadFile
acceptFileType="image/*,video/*"
maxSize={{ image: 10 }}
maxlength={9}
tooMoreTip={"最多上传9张图片。"}
deliveryFiles={this.getUploadImg}
ref={(ref) => (this.upLoadComponent = ref)}
/>
</div>
<div
className="contribute-detail-box"
style={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
}}
>
<div className="top-tit">
是否匿名 <span className="red-star">*</span>
</div>
<Radio.Group
size="large"
value={this.state.anonymousFlag}
onChange={(event) =>
this.setState({ anonymousFlag: event.target.value })
}
>
<Radio value={1}>是</Radio>
<Radio value={0}>否</Radio>
</Radio.Group>
</div>
<div className="contribute-detail-btn">
<div className="sumbit-btn" onClick={this.handleTo}>
提交
......@@ -160,7 +209,8 @@ const mapStateToProps = (state) => {
};
const mapDispatchToProps = (dispatch) => {
return {
getContributeListApi: bindActionCreators(getContributeListApi, dispatch),
systemMailboxApi: bindActionCreators(systemMailboxApi, dispatch),
dwsystemMailboxApi: bindActionCreators(dwsystemMailboxApi, dispatch),
};
};
export default connect(mapStateToProps, mapDispatchToProps)(ContributeDetail);
src/components/Mailbox/style.css
......@@ -132,17 +132,36 @@
font-size: 30px !important;
}
.contribute-detail-out .contribute-detail-box .ant-upload-list-picture-card-container {
width: 200px !important;
height: 200px !important;
width: 32% !important;
}
.contribute-detail-out .contribute-detail-box .ant-upload-list-picture-card .ant-upload-list-item {
width: 200px !important;
width: 100% !important;
height: 200px !important;
}
.contribute-detail-out .contribute-detail-box .ant-upload-select-picture-card {
width: 200px !important;
width: 32% !important;
height: 200px !important;
}
.contribute-detail-out .contribute-detail-box .ant-upload-select-picture-card .ant-upload {
display: flex;
align-items: center;
justify-content: center;
}
.contribute-detail-out .contribute-detail-box .ant-radio-wrapper .ant-radio-inner {
width: 30px !important;
height: 30px !important;
}
.contribute-detail-out .contribute-detail-box .ant-radio-wrapper .ant-radio-inner::after {
width: 30px !important;
height: 30px !important;
top: 0 !important;
left: 0 !important;
border-radius: 50%;
}
.contribute-detail-out .contribute-detail-box .ant-radio-wrapper span {
color: #000;
font-size: 30px !important;
}
.contribute-detail-out .contribute-detail-box .anticon {
font-size: 40px;
}
......
src/components/Mailbox/style.less
......@@ -131,16 +131,37 @@
font-size: 30px !important;
}
.ant-upload-list-picture-card-container {
width: 200px !important;
height: 200px !important;
width: 32% !important;
}
.ant-upload-list-picture-card .ant-upload-list-item {
width: 200px !important;
width: 100% !important;
height: 200px !important;
}
.ant-upload-select-picture-card {
width: 200px !important;
width: 32% !important;
height: 200px !important;
.ant-upload {
display: flex;
align-items: center;
justify-content: center;
}
}
.ant-radio-wrapper{
.ant-radio-inner{
width: 30px !important;
height: 30px !important;
}
.ant-radio-inner::after{
width: 30px !important;
height: 30px !important;
top: 0 !important;
left: 0 !important;
border-radius: 50%;
}
span{
color: #000;
font-size: 30px !important;
}
}
.anticon {
font-size: 40px;
......
src/components/comment/comment.jsx
import React,{Component} from 'react';
import {ListView,Icon,Toast} from 'antd-mobile';
import './less/comment.less';
import CommentInput from '../common/commentinput/commentinput';
import func from '../../util/commonFunc';
import React, { Component } from "react";
import { ListView, Icon, Toast } from "antd-mobile";
import "./less/comment.less";
import CommentInput from "../common/commentinput/commentinput";
import func from "../../util/commonFunc";
import Fetching from "../../common/fetching/fetching";
import {connect} from 'react-redux';
import {getReplyList,saveReply,getCommentItem} from '../../redux/action/course/courseplay';
import intl from 'react-intl-universal';
import { connect } from "react-redux";
import {
getReplyList,
saveReply,
getCommentItem,
} from "../../redux/action/course/courseplay";
import intl from "react-intl-universal";
function mapToStateProps(state) {
return {
list: state.courseplay.replyList,
total:state.courseplay.replyTotal,
commentInfo:state.courseplay.commentInfo
};
return {
list: state.courseplay.replyList,
total: state.courseplay.replyTotal,
commentInfo: state.courseplay.commentInfo,
};
}
function mapToDispatchProps(dispatch) {
return {
getReplyList: (data, callback) => dispatch(getReplyList(data, callback)),
saveReply:(data, callback) => dispatch(saveReply(data, callback)),
getCommentItem:(id,callback)=>dispatch(getCommentItem(id,callback))
};
return {
getReplyList: (data, callback) => dispatch(getReplyList(data, callback)),
saveReply: (data, callback) => dispatch(saveReply(data, callback)),
getCommentItem: (id, callback) => dispatch(getCommentItem(id, callback)),
};
}
var commentData={
name:'张艳婷',
headLogo:'/src/static/image/defaultUserAvatar.png',
comment:'很好很好很好很好很好很好很好很好很好很好很好很好很好很好很好很好很好很好很好很好很好很好很好很好很好很好很好很好',
time:'5小时前',
replayCount:2,
praiseCount:23
var commentData = {
name: "张艳婷",
headLogo: "/src/static/image/defaultUserAvatar.png",
comment:
"很好很好很好很好很好很好很好很好很好很好很好很好很好很好很好很好很好很好很好很好很好很好很好很好很好很好很好很好",
time: "5小时前",
replayCount: 2,
praiseCount: 23,
};
var commentList=[];
var commentList = [];
let pageIndex = 0;
function genData(pIndex = 0,len) {
const dataBlob = {};
for (let i = 0; i < len; i++) {
const ii = (pIndex * len) + i;
dataBlob[`${ii}`] = `row - ${ii}`;
}
return dataBlob;
function genData(pIndex = 0, len) {
const dataBlob = {};
for (let i = 0; i < len; i++) {
const ii = pIndex * len + i;
dataBlob[`${ii}`] = `row - ${ii}`;
}
return dataBlob;
}
class Comment extends Component{
constructor(props){
super(props);
var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
randomKey:'',
dataSource: ds,
isLoading: true,
hasMore:true,
comment:'',
commentId:'',
commentUserId:'',
courseId:'',
pageindex:1,
pagesize:10,
type:'',
onece:true,
refreshKey:'',
isFetching:true,
commentCount:0
};
this.onEndReached = this.onEndReached.bind(this);
this.publish = this.publish.bind(this);
this.refreshReplyList = this.refreshReplyList.bind(this);
}
componentWillMount(){
let id = this.props.location.query.id;
let courseId = this.props.location.query.courseId;
let type= this.props.location.query.type;
func.setDocumentTitle(intl.get("Album3") || "评论详情");
this.setState({
courseId:courseId,
commentId:id,
type:type
});
let _this = this;
this.props.getCommentItem(id,()=>{
const {commentInfo} = _this.props;
commentData={
name:commentInfo.commentator,
headLogo:commentInfo.userAvatar,
comment:commentInfo.content,
commentUserId:commentInfo.accountId,
time:commentInfo.createTime
};
_this.setState({
commentUserId:commentInfo.accountId,
refreshKey:new Date().getTime(),
isFetching:false
});
});
}
componentDidMount() {
let _this = this;
this.props.getReplyList({
id:this.state.commentId,
pageindex:1,
pagesize:this.state.pagesize
},()=>{
commentList = _this.props.list.map((item)=>{
return {
headLogo:item.userAvatar,
commentId:item.id,
name:item.replier,
comment:item.content,
time:item.createTime,
replayCount:item.replys,
praiseCount:item.thumbsUp
}
});
if(_this.props.total<_this.state.pagesize){
_this.setState({
onece:false
})
}
_this.rData = genData(0,commentList.length);
_this.setState({
dataSource: _this.state.dataSource.cloneWithRows(_this.rData),
isLoading: false,
commentCount:_this.props.total
});
if(commentList.length>=_this.props.total){
_this.setState({
hasMore:false
});
}else{
_this.setState({
hasMore:true
});
}
class Comment extends Component {
constructor(props) {
super(props);
var ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
this.state = {
randomKey: "",
dataSource: ds,
isLoading: true,
hasMore: true,
comment: "",
commentId: "",
commentUserId: "",
courseId: "",
pageindex: 1,
pagesize: 10,
type: "",
onece: true,
refreshKey: "",
isFetching: true,
commentCount: 0,
};
this.onEndReached = this.onEndReached.bind(this);
this.publish = this.publish.bind(this);
this.refreshReplyList = this.refreshReplyList.bind(this);
}
componentWillMount() {
let id = this.props.location.query.id;
let courseId = this.props.location.query.courseId;
let type = this.props.location.query.type;
func.setDocumentTitle(intl.get("Album3") || "评论详情");
this.setState({
courseId: courseId,
commentId: id,
type: type,
});
let _this = this;
this.props.getCommentItem(id, () => {
const { commentInfo } = _this.props;
commentData = {
name: commentInfo.commentator,
headLogo: commentInfo.userAvatar,
comment: commentInfo.content,
commentUserId: commentInfo.accountId,
time: commentInfo.createTime,
};
_this.setState({
commentUserId: commentInfo.accountId,
refreshKey: new Date().getTime(),
isFetching: false,
});
});
}
componentDidMount() {
let _this = this;
this.props.getReplyList(
{
id: this.state.commentId,
pageindex: 1,
pagesize: this.state.pagesize,
},
() => {
commentList = _this.props.list.map((item) => {
return {
headLogo: item.userAvatar,
commentId: item.id,
name: item.replier,
comment: item.content,
time: item.createTime,
replayCount: item.replys,
praiseCount: item.thumbsUp,
};
});
}
onEndReached(event){
// load new data
// hasMore: from backend data, indicates whether it is the last page, here is false
console.log(this.state.isLoading);
console.log(this.state.hasMore);
if (this.state.isLoading || !this.state.hasMore) {
if(this.state.isLoading){
Toast.info(intl.get("PublishKey185") || "数据加载中...");
}else if(!this.state.hasMore&&this.state.onece){
Toast.info(intl.get("PublishKey60") || "没有更多数据了");
this.setState({
onece:false
})
}
return;
if (_this.props.total < _this.state.pagesize) {
_this.setState({
onece: false,
});
}
const {pageindex} = this.state;
let _this = this;
this.setState({isLoading: true});
this.props.getReplyList({
id:this.state.commentId,
pageindex:pageindex+1,
pagesize:this.state.pagesize
},()=>{
let nextPageList = _this.props.list.map((item)=>{
return {
headLogo:item.userAvatar,
commentId:item.id,
name:item.replier,
comment:item.content,
time:item.createTime,
replayCount:item.replys,
praiseCount:item.thumbsUp
}
});
commentList = commentList.concat(nextPageList);
_this.rData = genData(0,commentList.length);
_this.setState({
dataSource: _this.state.dataSource.cloneWithRows(_this.rData),
isLoading: false,
randomKey:new Date().getTime(),
pageindex:pageindex+1,
commentCount:_this.props.total
},()=>{
console.log(_this.state.dataSource);
});
if(commentList.length>=_this.props.total){
_this.setState({
hasMore:false
});
}else{
_this.setState({
hasMore:true
});
}
_this.rData = genData(0, commentList.length);
_this.setState({
dataSource: _this.state.dataSource.cloneWithRows(_this.rData),
isLoading: false,
commentCount: _this.props.total,
});
};
refreshReplyList(){
let _this = this;
this.props.getReplyList({
id:this.state.commentId,
pageindex:1,
pagesize:this.state.pagesize
},()=>{
commentList = _this.props.list.map((item)=>{
return {
headLogo:item.userAvatar,
commentId:item.id,
name:item.replier,
comment:item.content,
time:item.createTime,
replayCount:item.replys,
praiseCount:item.thumbsUp
}
});
_this.rData = genData(0,commentList.length);
_this.setState({
dataSource: _this.state.dataSource.cloneWithRows(_this.rData),
isLoading: false,
randomKey:new Date().getTime(),
pageindex:1,
commentCount:_this.props.total
});
if(commentList>=_this.props.total){
_this.setState({
hasMore:false
});
}else{
_this.setState({
hasMore:true
});
}
if (commentList.length >= _this.props.total) {
_this.setState({
hasMore: false,
});
} else {
_this.setState({
hasMore: true,
});
}
}
);
}
onEndReached(event) {
// load new data
// hasMore: from backend data, indicates whether it is the last page, here is false
console.log(this.state.isLoading);
console.log(this.state.hasMore);
if (this.state.isLoading || !this.state.hasMore) {
if (this.state.isLoading) {
Toast.info(intl.get("PublishKey185") || "数据加载中...");
} else if (!this.state.hasMore && this.state.onece) {
Toast.info(intl.get("PublishKey60") || "没有更多数据了");
this.setState({
onece: false,
});
}
return;
}
publish(content,callback) {
let _this = this;
this.props.saveReply({
commentId:this.state.commentId,
courseId:this.state.courseId,
parentAccountId:this.state.commentUserId,
content:content
},()=>{
Toast.success(intl.get("PublishKey54") || "回复成功",2);
if(callback){
callback()
}
_this.refreshReplyList();
const { pageindex } = this.state;
let _this = this;
this.setState({ isLoading: true });
this.props.getReplyList(
{
id: this.state.commentId,
pageindex: pageindex + 1,
pagesize: this.state.pagesize,
},
() => {
let nextPageList = _this.props.list.map((item) => {
return {
headLogo: item.userAvatar,
commentId: item.id,
name: item.replier,
comment: item.content,
time: item.createTime,
replayCount: item.replys,
praiseCount: item.thumbsUp,
};
});
}
render(){
let courseId = this.props.location.query.courseId;
return (
<Fetching isFetching={this.state.isFetching}>
<div className="comment-contianer">
<div className="comment-content">
<div className="replay-list" key={this.state.randomKey}>
<h5>{intl.get("AllReply") || "全部回复"}({this.state.commentCount})</h5>
<ListView
dataSource={this.state.dataSource}
style={{height: "-webkit-fill-available", overflowX: 'hidden'}}
renderFooter={() => (<div
style={{textAlign: 'center', display: this.state.isLoading ? 'block' : 'none'}}>
<Icon type="loading" size={"xs"}/> {this.state.isLoading ? 'Loading...' : 'Loaded'}
</div>)}
renderRow={row}
scrollRenderAheadDistance={500}
onEndReached={this.onEndReached}
onEndReachedThreshold={10}
/>
</div>
<div className="comment-footer">
<CommentInput
publish={this.publish}
canFocusToggle={true}
/>
</div>
</div>
</div>
</Fetching>
commentList = commentList.concat(nextPageList);
_this.rData = genData(0, commentList.length);
_this.setState(
{
dataSource: _this.state.dataSource.cloneWithRows(_this.rData),
isLoading: false,
randomKey: new Date().getTime(),
pageindex: pageindex + 1,
commentCount: _this.props.total,
},
() => {
console.log(_this.state.dataSource);
}
);
}
if (commentList.length >= _this.props.total) {
_this.setState({
hasMore: false,
});
} else {
_this.setState({
hasMore: true,
});
}
}
);
}
refreshReplyList() {
let _this = this;
this.props.getReplyList(
{
id: this.state.commentId,
pageindex: 1,
pagesize: this.state.pagesize,
},
() => {
commentList = _this.props.list.map((item) => {
return {
headLogo: item.userAvatar,
commentId: item.id,
name: item.replier,
comment: item.content,
time: item.createTime,
replayCount: item.replys,
praiseCount: item.thumbsUp,
};
});
_this.rData = genData(0, commentList.length);
_this.setState({
dataSource: _this.state.dataSource.cloneWithRows(_this.rData),
isLoading: false,
randomKey: new Date().getTime(),
pageindex: 1,
commentCount: _this.props.total,
});
if (commentList >= _this.props.total) {
_this.setState({
hasMore: false,
});
} else {
_this.setState({
hasMore: true,
});
}
}
);
}
publish(content, callback) {
let _this = this;
this.props.saveReply(
{
commentId: this.state.commentId,
courseId: this.state.courseId,
parentAccountId: this.state.commentUserId,
content: content,
},
() => {
Toast.success(intl.get("PublishKey54") || "回复成功", 2);
if (callback) {
callback();
}
_this.refreshReplyList();
}
);
}
render() {
let courseId = this.props.location.query.courseId;
return (
<Fetching isFetching={this.state.isFetching}>
<div className="comment-contianer">
<div className="comment-content">
<div className="replay-list" key={this.state.randomKey}>
<h5>
{intl.get("AllReply") || "全部回复"}({this.state.commentCount})
</h5>
<ListView
dataSource={this.state.dataSource}
style={{
height: "-webkit-fill-available",
overflowX: "hidden",
}}
renderFooter={() => (
<div
style={{
textAlign: "center",
display: this.state.isLoading ? "block" : "none",
}}
>
<Icon type="loading" size={"xs"} />{" "}
{this.state.isLoading ? "Loading..." : "Loaded"}
</div>
)}
renderRow={row}
scrollRenderAheadDistance={500}
onEndReached={this.onEndReached}
onEndReachedThreshold={10}
/>
</div>
<div className="comment-footer">
<CommentInput publish={this.publish} canFocusToggle={true} />
</div>
</div>
</div>
</Fetching>
);
}
}
export default connect(mapToStateProps,mapToDispatchProps)(Comment);
export default connect(mapToStateProps, mapToDispatchProps)(Comment);
src/components/integral/SelectPointTypeLayout.jsx deleted 100644 → 0
import React,{ Component } from 'react';
import { Icon } from 'antd-mobile';
class SelectPointTypeLayout extends Component{
constructor(props){
super(props)
let pointTypeList = this.props.data;
console.log("pointTypeList", pointTypeList);
this.state={
pointTypeList:pointTypeList,
}
}
componentDidMount(){
// nothing to do currently.
}
render(){
const { getName = 0 } = this.props;
const { pointTypeList } = this.state;
var typeList = pointTypeList.map((item, index)=>{
return <div key={item.type}>
<div style={{display: 'flex', alignItems: 'center', justifyContent: 'center',
marginLeft: '0.3rem', marginRight: '0.3rem', height: '0.48rem'
}} onClick={()=>{this.props.onClick(index)}}>
<div style={{fontSize: '0.24rem', lineHeight: '0.32rem', color: '#666666'}}>
{getName ? item.name : item.type}
</div>
{
item.hasSelected ?
<Icon type="check" style={{fontSize: 20, color: 'ef901c', marginLeft: '0.16rem', width: '0.4rem'}}/> :
<div style={{marginLeft: '0.16rem', width: '0.4rem'}}/>
}
</div>
{
index < pointTypeList.length-1 ?
<div style={{width: '100%', height: '0.01rem', backgroundColor: '#e3e3e3'}}/> : ""
}
</div>
});
return <div style={{zIndex: '999', position: 'absolute', top: '0.96rem', left: '24%',
backgroundColor: '#ffffff', border: '0.02rem solid #e6e6e6'
}}>
{typeList}
</div>
}
}
export default SelectPointTypeLayout;
\ No newline at end of file
src/components/integral/SelectType.jsx deleted 100644 → 0
import React, { Component } from 'react';
import { Icon } from 'antd-mobile';
import './less/SelectType.less';
import Iconfont from '../../common/iconfontcomNew/index'
class SelectType extends Component {
constructor(props) {
super(props)
let pointTypeList = this.props.data;
console.log("pointTypeList", pointTypeList);
this.state = {
pointTypeList: pointTypeList,
}
}
componentDidMount() {
}
render() {
const { getName = 0 } = this.props;
const { pointTypeList } = this.state;
let choseItem = {};
pointTypeList.map(item => {
console.log(item)
if (item.hasSelected == true) {
choseItem = item
}
})
console.log(getName, '0000000000000000')
var typeList = pointTypeList.map((item, index) => {
return (
<div key={item.type} className="typelist">
<div onClick={() => { this.props.onClick(index) }}>
<div className={`itemStyle `}>
<span className={`itemName ${item.hasSelected ? 'choseStyle' : ''}`}>{item.name} </span>
</div>
</div>
</div>)
});
let bgHeight = document.body.clientHeight-400;
return <div className="integral_selectType">
<div className="visible">
<div className="visibleChose">
<div className="visibleChoseItem" onClick={this.props.closeVisible}>
{getName ? choseItem.name : choseItem.type}
<Iconfont type='icon-solidarrow-up' className='playLeft' />
</div>
</div>
<div className="listFlex">
{typeList}
</div>
</div>
<div className="integral-select-type-bg" style={{height:bgHeight}} onClick={this.props.closeVisible}></div>
</div >
}
}
export default SelectType;
\ No newline at end of file
src/components/integral/integrallist/integralcommon.less deleted 100644 → 0
.integral-item{
width: 100%;
height: 116px;
padding-left: 129px;
padding-right: 126px;
position: relative;
border-bottom: 2px solid #e9e9e9;
.time-get{
font-size: 24px;
color: #9b9b9b;
width: 100px;
height: 100%;
position: absolute;
left: 29px;
top: 15;
}
.integral-data{
width: 100%;
height: 116px;
padding-top: 19px;
p{
margin: 0;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
.integral-type{
font-size: 30px;
color: #505050;
}
.integral-descri{
font-size: 24px;
color: #9b9b9b;
}
}
.integral-get{
font-size: 30px;
color: #ff8564;
line-height: 116px;
width: 100px;
height: 116px;
position: absolute;
text-align: right;
right: 26px;
top: 0;
}
}
\ No newline at end of file
src/components/integral/integrallist/integralitem.jsx deleted 100644 → 0
import React,{Component} from 'react';
import './integralcommon.less';
class IntegralItem extends Component{
render(){
const {data} = this.props;
let DataTime = Number(data.time);
let dateString = '';
let timeString = '';
let hour = new Date(DataTime).getHours(), min = new Date(DataTime).getMinutes(),month = new Date(DataTime).getMonth()+1,day = new Date(DataTime).getDate();
let today = new Date();
if(DataTime==today){
timeString = hour+':'+min;
}else{
dateString = `${month}-${day}`;
timeString = `${hour}:${min>=10?min:'0'+min}`;
}
let sign = data.flag==1?'+':'';
return (
<div className="integral-item">
<div className="time-get">
<div style={{paddingTop:20}}>{dateString}</div>
<div>{timeString}</div>
</div>
<div className="integral-data">
<p className="integral-type">{data.learnSource}</p>
<p className="integral-descri">{data.learnName}</p>
</div>
<div className="integral-get" style={{color:data.point>0?'#ff8564':'#cfcfcf'}}>
{sign}{data.point}
</div>
</div>
);
}
}
export default IntegralItem;
\ No newline at end of file
src/components/integral/integrallist/integrallist.jsx deleted 100644 → 0
import React, {Component} from 'react';
import {ListView} from 'antd-mobile';
import {StickyContainer, Sticky} from 'react-sticky';
import './integrallist.less';
var data = [
{
img: 'https://zos.alipayobjects.com/rmsportal/dKbkpPXKfvZzWCM.png',
title: 'Meet hotel',
des: '不是所有的兼职汪都需要风吹日晒',
},
{
img: 'https://zos.alipayobjects.com/rmsportal/XmwCzSeJiqpkuMB.png',
title: 'McDonald\'s invites you',
des: '不是所有的兼职汪都需要风吹日晒',
},
{
img: 'https://zos.alipayobjects.com/rmsportal/hfVtzEhPzTUewPm.png',
title: 'Eat the week',
des: '不是所有的兼职汪都需要风吹日晒',
},
{
img: 'https://zos.alipayobjects.com/rmsportal/hfVtzEhPzTUewPm.png',
title: 'Eat the week',
des: '不是所有的兼职汪都需要风吹日晒',
},
{
img: 'https://zos.alipayobjects.com/rmsportal/hfVtzEhPzTUewPm.png',
title: 'Eat the week',
des: '不是所有的兼职汪都需要风吹日晒',
},
];
const NUM_SECTIONS = 5;
const NUM_ROWS_PER_SECTION = 5;
let pageIndex = 0;
const dataBlobs = {};
let sectionIDs = [];
let rowIDs = [];
function genData(pIndex = 0) {
for (let i = 0; i < NUM_SECTIONS; i++) {
const ii = (pIndex * NUM_SECTIONS) + i;
const sectionName = `Section ${ii}`;
sectionIDs.push(sectionName);
dataBlobs[sectionName] = sectionName;
rowIDs[ii] = [];
for (let jj = 0; jj < NUM_ROWS_PER_SECTION; jj++) {
const rowName = `S${ii}, R${jj}`;
rowIDs[ii].push(rowName);
dataBlobs[rowName] = rowName;
}
}
sectionIDs = [...sectionIDs];
rowIDs = [...rowIDs];
}
class Demo extends Component {
constructor(props) {
super(props);
const getSectionData = (dataBlob, sectionID) => dataBlob[sectionID];
const getRowData = (dataBlob, sectionID, rowID) => dataBlob[rowID];
const dataSource = new ListView.DataSource({
getRowData,
getSectionHeaderData: getSectionData,
rowHasChanged: (row1, row2) => row1 !== row2,
sectionHeaderHasChanged: (s1, s2) => s1 !== s2,
});
this.state = {
dataSource,
isLoading: true,
};
this.onEndReached = this.onEndReached.bind(this);
}
componentDidMount() {
// you can scroll to the specified position
// setTimeout(() => this.lv.scrollTo(0, 120), 800);
// simulate initial Ajax
var _this = this;
setTimeout(() => {
genData();
console.log(dataBlobs,rowIDs,sectionIDs);
_this.setState({
dataSource: this.state.dataSource.cloneWithRowsAndSections(dataBlobs, sectionIDs, rowIDs),
isLoading: false,
});
}, 600);
}
// If you use redux, the data maybe at props, you need use `componentWillReceiveProps`
// componentWillReceiveProps(nextProps) {
// if (nextProps.dataSource !== this.props.dataSource) {
// this.setState({
// dataSource: this.state.dataSource.cloneWithRowsAndSections(nextProps.dataSource),
// });
// }
// }
onEndReached(event) {
// load new data
// hasMore: from backend data, indicates whether it is the last page, here is false
if (this.state.isLoading && !this.state.hasMore) {
return;
}
console.log('reach end', event);
data = data.concat(data);
this.setState({isLoading: true});
var _this = this;
setTimeout(() => {
genData(++pageIndex);
_this.setState({
dataSource: this.state.dataSource.cloneWithRowsAndSections(dataBlobs, sectionIDs, rowIDs),
isLoading: false,
});
}, 1000);
}
render() {
const {HeaderSection,initTop,Item} = this.props;
let index = data.length - 1;
const row = (rowData, sectionID, rowID) => {
if (index < 0) {
index = data.length - 1;
}
const obj = data[index--];
return (
<Item key={rowID} />
);
};
return (
<ListView
dataSource={this.state.dataSource}
useBodyScroll
renderSectionHeader={sectionData => (
<StickyContainer>
<Sticky>
{({
distanceFromTop
}) => {
return (
<div className="sticky-section" style={{position:distanceFromTop<=initTop?'fixed':'static',top:initTop}}>
<HeaderSection content={sectionData} />
</div>
);
}
}
</Sticky>
</StickyContainer>
)}
renderFooter={() => (<div style={{padding: 30, textAlign: 'center'}}>
{this.state.isLoading ? 'Loading...' : 'Loaded'}
</div>)}
renderRow={row}
pageSize={5}
scrollEventThrottle={200}
onEndReached={this.onEndReached}
onEndReachedThreshold={10}
/>
);
}
}
export default Demo;
\ No newline at end of file
src/components/integral/integrallist/integrallist.less deleted 100644 → 0
.sticky-list .sticky-container .am-list-item {
padding-left: 0;
}
.sticky-list .sticky-container .am-list-line {
padding-right: 0;
}
.sticky-list .sticky-container .am-list-line .am-list-content {
padding-top: 0;
padding-bottom: 0;
}
.sticky-list .sticky-container .sticky {
padding: 7px 15px;
transform: none;
}
.sticky-section {
z-index: 101;
width: 100%;
left: 0;
}
.am-list-content {
padding: 0 !important;
margin: 0 !important;
}
.my-integral {
.am-list-item {
border: none !important;
padding: 0 !important;
margin: 0 !important;
min-height: 0 !important;
.am-list-line {
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
}
}
}
\ No newline at end of file
src/components/integral/integrallist/integralsection.jsx deleted 100644 → 0
import React, { Component } from 'react';
class IntegralSection extends Component {
render() {
const { content } = this.props;
return (
<div style={{
width: '100%',
// height:60,
// paddingTop: 20,
// paddingBottom: 20,
// paddingLeft: 20,
// paddingRight: 20,
fontSize: 24,
color: '#000',
background: '#fff',
}}>
<div
style={{
width: '95%',
margin: '0 auto',
height: '76px',
lineHeight: '76px',
borderBottom: '1px solid #f5f5f5'
}}>
{content}
</div>
</div>
);
}
}
export default IntegralSection;
\ No newline at end of file
src/components/integral/less/SelectType.less deleted 100644 → 0
.integral_selectType {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.45);
z-index: 999;
position: fixed;
top: 0;
.visible {
height: 400px;
border-radius: 0 0 20px 20px;
background-color: #fff;
z-index: 999;
.visibleChose {
font-size: 28px !important;
height: 100px;
width: 90%;
margin: 0 auto;
position: relative;
.visibleChoseItem {
position: absolute;
right: 0;
bottom: 20px;
}
.playLeft {
margin-left: 10px;
font-size: 40px !important;
position: relative;
right: 0px;
bottom: 0px;
}
}
.listFlex {
display: flex;
flex-wrap: wrap;
width: 90%;
margin: 0 auto;
.typelist {
width: 25%;
height: 80px;
text-align: center;
font-size: 32px;
margin-bottom: 20px;
.itemStyle {
height: 100px;
line-height: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.choseStyle {
background-color: rgba(66, 133, 244, 0.05);
border: 1px solid #4285F4 !important;
color: #4285F4;
}
.itemName {
padding: 15px 40px;
border: 1px solid #EFEFF4;
border-radius: 10px;
}
}
}
}
.integral-select-type-bg{
position: absolute;
left: 0;
bottom: 0;
width: 100%;
}
}
\ No newline at end of file
src/components/integral/less/myintegral.less deleted 100644 → 0
.my-integral {
width: 100%;
height: 100%;
overflow-y: scroll;
background-color: #f5f5f5;
position: relative;
top: 0;
left: 0;
.am-list-body::before {
height: 0 !important;
}
.am-list-content {
font-weight: bold;
}
.integral-item {
border-bottom: 0.01rem solid #f4f4f4 !important;
}
.integralTop {
width: 100%;
height: 240px;
background-color: #f5f5f5;
position: absolute;
top: 0;
left: 0;
z-index: 101;
padding: 0 30px;
.integralBar {
width: 100%;
height: 200px;
margin: 0 auto;
margin-top: 40px;
background-color: #fff;
background-image: url('../image/background.png');
background-size: 100% 100%;
.integralChild {
flex: 1;
position: relative;
.jifen {
height: 80px;
font-size: 28px;
color: #666666;
position: relative;
}
.points {
height: 120px;
line-height: 120px;
font-size: 60px;
color: #333333;
font-weight: bold;
}
.integralTypes {
font-size: 28px;
display: inline;
padding: 10px 60px 10px 30px;
border: 2px solid #C8CEDA;
border-radius: 50px;
position: absolute;
right: 20px;
bottom: 30px;
.playLeft {
margin-left: 5px;
font-size: 40px !important;
position: absolute;
// right: -2px;
}
}
}
}
}
.integral-sum {
// width: 100%;
height: 96px;
line-height: 96px;
background-color: #fff;
text-align: center;
font-size: 40px;
color: #ff8564;
// border-bottom: 2px solid #e4e4e4;
left: 0;
z-index: 101;
}
.integral-content {
width: 100%;
margin-top: 260px;
padding: 0 30px;
}
.am-list-body {
width: 100%;
background-color: #f5f5f5 !important;
border: none !important;
.am-list-item {
width: 100%;
margin: 0 auto !important;
background-color: #f5f5f5 !important;
}
}
.am-list-view-scrollview {
background-color: #f5f5f5 !important;
}
}
.my-integral .list-view-section-body {
width: 100%;
margin: 0 auto;
background-color: #fff !important;
.integral-item {
background: #fff !important;
width: 95%;
margin: 0 auto;
}
.integral-item .time-get {
left: 0;
}
}
\ No newline at end of file
src/components/integral/myintegral.jsx deleted 100644 → 0
import React, { Component } from 'react';
import { } from 'antd';
import './less/myintegral.less';
import func from '../../util/commonFunc';
import IntegralList from './integrallist/integrallist';
import HeaderSection from './integrallist/integralsection';
import IntegralItem from './integrallist/integralitem';
import fetchUtil from '../../util/fetchUtil'
import { hashHistory } from 'react-router';
import { ListView, NavBar, Icon } from 'antd-mobile';
import { StickyContainer, Sticky } from 'react-sticky';
import './integrallist/integrallist.less';
import { connect } from 'react-redux';
import * as action from '../../redux/action/myPoint'
import Footer from '../common/listFooter'
import SecListView from '../common/listview/secListView'
import point from '../../image/mypoint.png'
import pointDetail from './image/point_detail.png'
import SelectPointTypeLayout from './SelectPointTypeLayout'
import SelectType from './SelectType';
import intl from "react-intl-universal";
import Iconfont from '../../common/iconfontcomNew/index'
let dataBlobs = {};
let sectionIDs = [];
let rowIDs = [];
class MyIntegral extends Component {
constructor(props) {
super(props);
const getRowData = (dataBlob, sectionID, rowID) => dataBlob[rowID];
const getSectionData = (dataBlob, sectionID) => dataBlob[sectionID];
this.state = {
page: {},
point: 0,
data: new Array(),
dataSource: new ListView.DataSource({
getRowData: getRowData,
getSectionData: getSectionData,
rowHasChanged: (r1, r2) => r1 !== r2,
sectionHeaderHasChanged: (s1, s2) => s1 !== s2
}),
hasMore: true,
pointTypeVisible: false,
pointTypeList: [ //hutao 2020.10.28 15:29 tell me type is keyword
{ name: intl.get("all"), type: '全部', hasSelected: true },
{ name: intl.get("Course"), type: '课程', hasSelected: false },
{ name: intl.get("TrainingProgram2"), type: '项目', hasSelected: false },
{ name: intl.get("Exam"), type: '考试', hasSelected: false },
{ name: intl.get("Assignment"), type: '作业', hasSelected: false },
{ name: intl.get("Research"), type: '调研', hasSelected: false },
{ name: intl.get("zuopinFirst") || '作品', type: '作品', hasSelected: false },
{ name: intl.get("design") || '打卡', type: '打卡', hasSelected: false },
{ name: intl.get("forum"), type: '论坛', hasSelected: false },
],
currentSelectedType: '全部',
dataSoS: 0,//用于判断列表是否有数据
isLoading: false
}
this.onEndReached = this.onEndReached.bind(this);
document.title = intl.get("MyCredit") || '我的积分';
this.setHasMore = this.setHasMore.bind(this);
}
componentWillReceiveProps(nextProps) {
}
componentWillMount() {
console.log("我的积分")
let _this = this;
this.setState({ isLoading: true });
this.props.getPointList('', this.state.currentSelectedType, (res) => {
_this.setState({
dataSoS: res.page.pageTotal,
isLoading: false
})
const { page } = _this.props;
_this.setHasMore(page.pageNo, page.pageSize, page.pageTotal);
});
}
onEndReached(event) {
console.log('EndReach', this.props.isLoading);
if (this.state.isLoading) {
return;
}
let _this = this;
this.setState({ isLoading: true });
this.props.addPointList(this.props.page.pageNo + 1, '', this.state.currentSelectedType, () => {
const { page } = _this.props;
_this.setState({ isLoading: false });
_this.setHasMore(page.pageNo, page.pageSize, page.pageTotal);
});
}
setHasMore(page, size, sum) {
let sumPage = Math.ceil(sum / size);
if (page == sumPage) {
this.setState({ hasMore: false });
} else {
this.setState({ hasMore: true });
}
}
checkTypeSelected = (selectedIndex) => {
console.log("selectedIndex", selectedIndex);
const { pointTypeList } = this.state;
let pointTypeListCopy = [].concat(pointTypeList);
let _this = this;
var newPointTypeList = [];
pointTypeListCopy.map((item, index) => {
if (selectedIndex == index) {
item.hasSelected = true
} else {
item.hasSelected = false
}
newPointTypeList.push(item)
});
let newSelectedType = ''
newSelectedType = pointTypeList[selectedIndex].type
console.log(newSelectedType)
this.setState({ pointTypeList: newPointTypeList, currentSelectedType: newSelectedType, pointTypeVisible: false })
this.setState({ isLoading: true });
this.props.getPointList('', newSelectedType, () => {
_this.setState({
dataSoS: res.page.pageTotal,
isLoading: false
})
const { page } = _this.props;
_this.setHasMore(page.pageNo, page.pageSize, page.pageTotal);
});
}
closeVisible = () => {
this.setState({ pointTypeVisible: false })
}
filterTypeList = (typeTip) => {
const { pointTypeList } = this.state;
let cache = pointTypeList.filter(item => item.type == typeTip);
console.log('---------------', cache)
return cache[0]["name"];
}
render() {
const { pointTypeVisible, pointTypeList, hasMore, dataSoS, currentSelectedType } = this.state;
const row = (rowData, sectionID, rowID) => {
// console.log('sectionID', rowData, sectionID, rowID)
return (
<IntegralItem data={rowData} />
);
};
return (
<div className="my-integral">
<div style={{
// display: 'flex', alignItems: 'center',
// justifyContent: 'space-between', zIndex: '101',
// paddingLeft: '0.3rem',
// paddingRight: '0.3rem',
// backgroundColor: '#ffffff'
}}
className="integralTop"
>
<div className="integralBar">
<div style={{ width: '95%', margin: '0 auto', backgrounColor: 'red', height: '100%', display: 'flex' }}>
<div className="integralChild">
{/* <div style={{ fontSize: '0.36rem', lineHeight: '0.44rem', color: '#333333' }}>{intl.get("CreditHistory") || "积分明细"}</div> */}
<div className="jifen">
<span style={{ position: 'absolute', bottom: '0' }}>{intl.get('Point') || '积分'}</span>
</div>
<div className="points">
<span>{func.numberDivide(this.props.point, 3)}</span>
</div>
</div>
<div className="integralChild">
<div className="integralTypes" onClick={() => { this.setState({ pointTypeVisible: !pointTypeVisible }) }}>
<span>{this.filterTypeList(currentSelectedType)}</span>
<Iconfont type='icon-solidarrow-down' className='playLeft' />
</div>
</div>
</div>
</div>
{/* <div style={{ display: 'flex', alignItems: 'flex-start' }}>
<img src={pointDetail} style={{ width: '0.48rem', height: '0.48rem' }} />
<div style={{ fontSize: '0.36rem', lineHeight: '0.44rem', color: '#333333' }}>{intl.get("CreditHistory") || "积分明细"}</div>
<div style={{
display: 'flex', alignItems: 'center', justifyContent: 'center',
textAlign: 'left', marginLeft: '0.2rem'
}} onClick={() => { this.setState({ pointTypeVisible: !pointTypeVisible }) }}>
<div style={{ fontSize: '0.24rem', lineHeight: '0.32rem', color: '#999999' }}>
{this.filterTypeList(currentSelectedType)}
</div>
<div>
<Icon type="down" style={{ fontSize: 20, color: '#999999' }} />
</div>
</div>
</div>
<div className="integral-sum">
<img src={point} alt="" style={{ width: 40, height: 40 }} />
{func.numberDivide(this.props.point, 3)}
</div> */}
</div>
<div className="integral-content">
{dataSoS != 0 ? <SecListView
dataSource={this.props.dataSource}
listStyle={{ height: (document.documentElement.clientHeight) + "px", overflowX: 'hidden', overflowY: 'auto', backgrounColor: 'rgb(233, 233, 233)' }}
renderRow={row}
onEndReached={this.onEndReached}
isLoading={this.state.isLoading}
footText={this.state.isLoading ? (intl.get("homework10") || "上拉加载更多") : (intl.get("PublishKey47") || "没有更多了")}
hasMore={hasMore}
secHeader={sectionData => {
// <StickyContainer>
// <Sticky>
// {({
// distanceFromTop
// }) => {
console.log(sectionData, 'sectionData')
return (
<div className="sticky-section" style={{ position: 'static', top: 96, }}>
<HeaderSection content={sectionData} />
</div>
)
}}
// }
// </Sticky>
// </StickyContainer>
page={this.props.page}
/> :"暂无数据"}
</div>
{
pointTypeVisible ?
<SelectType
data={pointTypeList}
onClick={this.checkTypeSelected}
closeVisible={this.closeVisible}
getName={1}
/>
: ""
}
</div>
);
}
}
// export default MyIntegral;
export default connect((state) => {
const { myPoint } = state;
console.log('myPoint.data', myPoint.data)
return {
dataSource: myPoint.dataSource,
page: myPoint.page,
point: myPoint.point,
data: myPoint.data,
}
}, action)(MyIntegral)
src/components/menume/menume.jsx
......@@ -19,7 +19,6 @@ import {
// import FavoriteAndSign from "./favoriteAndSign/fas";
import IconFont from "../../common/iconfontcomponent/index";
import intl from "react-intl-universal";
import IconfontD from "../../common/iconfontd";
import MyCollect from "./image/MyCollect.png";
import BrowsingHistory from "./image/BrowsingHistory.png";
import jinbi from "./image/jinbi.png";
......@@ -38,7 +37,7 @@ const mapList = {
},
pl: {
text: "我的评论",
url: "/integral/myintegral",
url: "/myComment",
},
tg: {
text: "我的投稿",
......@@ -403,7 +402,7 @@ class Menume extends React.Component {
className="study-jf"
onClick={() =>
hashHistory.push(
func.routerBefore() + "/integral/myintegral"
func.routerBefore() + "/myintegral"
)
}
>
......
src/components/myComment/action.js 0 → 100644
import excute from '../../util/fetchUtil';
import API from '../../util/urlconfig';
import { Toast } from "antd-mobile";
//纪检信箱
export function myCommentListApi(params, callback) {
return (dispatch) => {
return excute.post(
API.myCommentListApi,
params,
(response) => {
Toast.info('提交成功')
if (callback) {
callback(response.data);
}
}
);
};
}
\ No newline at end of file
src/components/myComment/index.jsx 0 → 100644
import React, { Component } from "react";
import "./style.less";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import { myCommentListApi } from "./action";
class myComment extends Component {
constructor(props) {
super(props);
this.state = {
};
document.title = "我的评论";
}
componentDidMount() {
// this.props.myCommentListApi();
}
render() {
return (
<div className="comment-out">
</div>
);
}
}
const mapStateToProps = (state) => {
return {};
};
const mapDispatchToProps = (dispatch) => {
return {
myCommentListApi: bindActionCreators(myCommentListApi, dispatch),
};
};
export default connect(mapStateToProps, mapDispatchToProps)(myComment);
src/components/myIntegral/action.js 0 → 100644
import excute from '../../util/fetchUtil';
import API from '../../util/urlconfig';
import { Toast } from "antd-mobile";
//纪检信箱
export function myCommentListApi(params, callback) {
return (dispatch) => {
return excute.post(
API.myCommentListApi,
params,
(response) => {
Toast.info('提交成功')
if (callback) {
callback(response.data);
}
}
);
};
}
\ No newline at end of file
src/components/myIntegral/index.jsx 0 → 100644
import React, { Component } from "react";
import "./style.less";
import { connect } from "react-redux";
import { hashHistory } from "react-router";
import func from "../../util/commonFunc";
import { bindActionCreators } from "redux";
import { myCommentListApi } from "./action";
import giftImg from "./image/gift.png";
import shopImg from "./image/shop-icon.png";
import jinbi from "./image/jinbi.png";
class myComment extends Component {
constructor(props) {
super(props);
this.state = {
score: "320",
scoreNow: "6",
showBtn: false,
contList: [
{
title: "登录",
titleVal: "1分/每日首次登录",
statu: true,
},
{
title: "阅读文章（0/5）",
titleVal: "1分/每有效阅读文章一篇（阅读时长超过20秒）",
url: "/",
statu: false,
},
{
title: "我要投稿",
titleVal: "5分/每投稿一篇有效内容（审核通过）",
url: "/mycontribute",
statu: false,
},
{
title: "发表评论",
titleVal: "3分/每发表一个有效评论（审核通过）",
url: "/",
statu: false,
},
{
title: "参加活动",
titleVal: "3分/报名并成功打卡参与活动",
url: "/menutrain",
statu: false,
},
{
title: "培训测试",
titleVal: "根据答题分数获得相应积分",
url: "/exam/MyExam",
statu: false,
},
],
};
document.title = "我的积分";
}
componentDidMount() {
// this.props.myCommentListApi();
}
handleTo = (url) => {
hashHistory.push({
pathname: func.routerBefore() + url,
});
};
render() {
let { score, scoreNow, showBtn, contList } = this.state;
return (
<div className="integral-out">
<div className="integral-head">
<div className="head-item">
<div className="item-score">{score}</div>
<div className="item-more">
<img src={shopImg} alt="" style={{ width: "48px" }} />
<p>
积分商城 <span style={{ fontSize: "24px" }}>（建设中）</span>
</p>
</div>
</div>
<div className="head-img">
<img src={giftImg} alt="" style={{ width: "100%" }} />
</div>
</div>
<div className="integral-box">
<div className="box-head">
<div style={{ display: "flex", alignItems: "center" }}>
<img
src={jinbi}
alt=""
style={{ width: "42px", marginRight: "15px" }}
/>
<div
style={{ color: "#333", fontWeight: "600", fontSize: "30px" }}
>
积分规则
</div>
</div>
<div style={{ color: "#9E9E9E", fontSize: "32px" }}>
今日已累计 <span style={{ color: "#E6624A" }}>{scoreNow}</span>{" "}
积分
</div>
</div>
{contList.map((item) => {
return (
<div className="box-content">
<div className="content-items">
<div className="title">{item.title}</div>
<div className="titValue">{item.titleVal}</div>
</div>
{item.statu ? (
<div className="unactive-btn">已完成</div>
) : (
<div
className="active-btn"
onClick={() => this.handleTo(item.url)}
>
去完成
</div>
)}
</div>
);
})}
</div>
</div>
);
}
}
const mapStateToProps = (state) => {
return {};
};
const mapDispatchToProps = (dispatch) => {
return {
myCommentListApi: bindActionCreators(myCommentListApi, dispatch),
};
};
export default connect(mapStateToProps, mapDispatchToProps)(myComment);
src/components/myIntegral/style.css 0 → 100644
.integral-out {
width: 100%;
height: 100%;
background: linear-gradient(180deg, #d23a29 10%, #fff 50%, #f5f5f5 100%);
}
.integral-out .integral-head {
width: 90%;
margin: 0 auto;
display: flex;
justify-content: space-between;
padding-top: 10%;
}
.integral-out .integral-head .head-item {
padding-top: 20px;
}
.integral-out .integral-head .head-item .item-score {
padding-left: 15px;
font-family: PingFang SC, PingFang SC-600;
font-weight: 600;
font-size: 120px;
color: #fff;
}
.integral-out .integral-head .head-item .item-more {
display: flex;
align-items: center;
color: #fff;
font-size: 30px;
}
.integral-out .integral-head .head-img {
width: 42%;
}
.integral-out .integral-box {
width: 92%;
margin: 0 auto;
border-radius: 40px;
background-color: #fff;
padding: 30px;
}
.integral-out .integral-box .box-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.integral-out .integral-box .box-content {
padding: 10px 15px;
display: flex;
justify-content: space-between;
align-items: center;
}
.integral-out .integral-box .box-content .content-items {
width: 72%;
margin-bottom: 20px;
}
.integral-out .integral-box .box-content .content-items .title {
color: #333333;
font-weight: 500;
font-size: 32px;
}
.integral-out .integral-box .box-content .content-items .titValue {
color: #9e9e9e;
font-size: 24px;
}
.integral-out .integral-box .box-content .active-btn {
width: max-content;
padding: 8px 22px;
border-radius: 30px;
background: linear-gradient(90deg, #d23a29, #eb6c53 100%);
font-size: 36px;
color: #fff;
}
.integral-out .integral-box .box-content .unactive-btn {
width: max-content;
padding: 8px 22px;
border-radius: 30px;
background-color: rgba(158, 158, 158, 0.1);
font-size: 36px;
color: #999999;
}
src/components/myIntegral/style.less 0 → 100644
.integral-out {
width: 100%;
height: 100%;
background: linear-gradient(180deg, #d23a29 10%, #fff 50%,#f5f5f5 100%);
.integral-head {
width: 90%;
margin: 0 auto;
display: flex;
justify-content: space-between;
padding-top: 10%;
.head-item {
padding-top: 20px;
.item-score {
padding-left: 15px;
font-family: PingFang SC, PingFang SC-600;
font-weight: 600;
font-size: 120px;
color: #fff;
}
.item-more {
display: flex;
align-items: center;
color: #fff;
font-size: 30px;
}
}
.head-img {
width: 42%;
}
}
.integral-box {
width: 92%;
margin: 0 auto;
border-radius: 40px;
background-color: #fff;
padding: 30px;
.box-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.box-content {
padding: 10px 15px;
display: flex;
justify-content: space-between;
align-items: center;
.content-items {
width: 72%;
margin-bottom: 20px;
.title {
color: #333333;
font-weight: 500;
font-size: 32px;
}
.titValue {
color: #9e9e9e;
font-size: 24px;
}
}
.active-btn {
width: max-content;
padding: 8px 22px;
border-radius: 30px;
background: linear-gradient(90deg, #d23a29, #eb6c53 100%);
font-size: 36px;
color: #fff;
}
.unactive-btn {
width: max-content;
padding: 8px 22px;
border-radius: 30px;
background-color: rgba(158, 158, 158, 0.1);
font-size: 36px;
color: #999999;
}
}
}
}
src/components/myLeaveMessage/index.jsx
......@@ -4,7 +4,7 @@ import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import { VoteListApi } from "./action";
import { Input, Radio } from "antd";
import UploaderTools from "./../../common/uploadTools/UploadTool";
import PostUploadFile from "../../common/uploadOSS/uploadOSS";
const { TextArea } = Input;
class MyLeaveMessage extends Component {
constructor(props) {
......@@ -39,11 +39,10 @@ class MyLeaveMessage extends Component {
document.title = "我要留言";
}
componentDidMount() {}
getFileList = (list) => {
getUploadImg = (files) => {
this.setState({
fileList: list,
fileList: files,
});
console.log(this.state.fileList, "2222222222222");
};
handleMessageClick(data, index) {
let _this = this;
......@@ -119,11 +118,13 @@ class MyLeaveMessage extends Component {
<div className="top-tit">
图片<span>(0/9)</span>
</div>
<UploaderTools
getFileList={this.getFileList}
fileList={this.state.fileList}
noPreview={true}
isResult={false}
<PostUploadFile
acceptFileType="image/*,video/*"
maxSize={{ image: 10 }}
maxlength={9}
tooMoreTip={"最多上传9张图片。"}
deliveryFiles={this.getUploadImg}
ref={(ref) => (this.upLoadComponent = ref)}
/>
<div style={{ fontSize: "30px", color: "#9E9E9E" }}>
支持.png.jepg格式，每张最大5MB
......
src/components/mycontribute/contributeDetail.jsx
......@@ -2,9 +2,9 @@ import React, { Component } from "react";
import "./style.less";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import { getContributeListApi } from "./action";
import { getContributeListApi, commitContributeApi } from "./action";
import { Input, Modal } from "antd";
import UploaderTools from "./../../common/uploadTools/UploadTool";
import PostUploadFile from "../../common/uploadOSS/uploadOSS";
const { TextArea } = Input;
class ContributeDetail extends Component {
constructor(props) {
......@@ -23,6 +23,12 @@ class ContributeDetail extends Component {
this.showVideoModal = this.showVideoModal.bind(this);
this.closeVideoModal = this.closeVideoModal.bind(this);
}
getUploadImg = (files) => {
this.setState({
fileList: files,
});
console.log(this.state.fileList, "333333333333");
};
showVideoModal() {
this.setState({
videoVisible: true,
......@@ -34,22 +40,26 @@ class ContributeDetail extends Component {
});
}
componentDidMount() {}
getFileList = (list) => {
this.setState({
fileList: list,
handleClick = () => {
let imgs = [];
this.state.fileList.map((item) => {
imgs.push(item.fileUrl);
});
console.log(this.state.fileList,'2222222222222')
};
handleClick = () => {
console.log(this.state.titleValue, "点击情况~~~~~~~~~");
// let { typeOne, typeTwo, typeThree } = this.props.location.query;
// let params = {
// id: data.id,
// };
// this.props.getContributeListApi(params, (response) => {
// console.log(response);
// });
let { typeOne, typeTwo, typeThree } = this.props.location.query;
let params = {
fileName: this.state.titleValue,
typeOne: typeOne,
typeTwo: typeTwo,
typeThree: typeThree,
author: this.state.authValue,
content: this.state.contentValue,
ossUrl: JSON.stringify(imgs),
deptName: this.state.delValue,
};
this.props.commitContributeApi(params, (response) => {
console.log(response);
});
};
render() {
const { fileList } = this.state;
......@@ -83,11 +93,13 @@ class ContributeDetail extends Component {
</div>
<div className="contribute-detail-box">
<div className="top-tit">图片或视频上传</div>
<UploaderTools
getFileList={this.getFileList}
fileList={this.state.fileList}
noPreview={true}
isResult={false}
<PostUploadFile
acceptFileType="image/*,video/*"
maxSize={{ image: 10 }}
maxlength={9}
tooMoreTip={"最多上传9张图片。"}
deliveryFiles={this.getUploadImg}
ref={(ref) => (this.upLoadComponent = ref)}
/>
</div>
<div className="contribute-detail-box">
......@@ -140,7 +152,7 @@ class ContributeDetail extends Component {
<div className="preview-mid">
<div className="preview-imgs">
{fileList.map((item, index) => {
return <img src={item.url} alt="" key={index} />;
return <img src={item.fileUrl} alt="" key={index} />;
})}
</div>
<div className="perview-con">{this.state.contentValue}</div>
......@@ -157,6 +169,7 @@ const mapStateToProps = (state) => {
const mapDispatchToProps = (dispatch) => {
return {
getContributeListApi: bindActionCreators(getContributeListApi, dispatch),
commitContributeApi: bindActionCreators(commitContributeApi, dispatch),
};
};
export default connect(mapStateToProps, mapDispatchToProps)(ContributeDetail);
src/components/mycontribute/index.jsx
......@@ -6,7 +6,7 @@ import moment from "moment";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import { getContributeListApi } from "./action";
import { Modal } from "antd-mobile";
import { Toast } from "antd-mobile";
class Mycontribute extends Component {
constructor(props) {
super(props);
......@@ -56,7 +56,7 @@ class Mycontribute extends Component {
typeTwo: null,
activeThreeId: null,
typeThree: null,
mapThreeList:[]
mapThreeList: [],
});
}
};
......@@ -93,14 +93,18 @@ class Mycontribute extends Component {
};
handleTo = () => {
let { typeOne, typeTwo, typeThree } = this.state;
hashHistory.push({
pathname: func.routerBefore() + "/contributeDetail",
query: {
typeOne: typeOne,
typeTwo: typeTwo,
typeThree: typeThree,
},
});
if (!typeOne) {
Toast.info("请选择投稿类型");
} else {
hashHistory.push({
pathname: func.routerBefore() + "/contributeDetail",
query: {
typeOne: typeOne,
typeTwo: typeTwo,
typeThree: typeThree,
},
});
}
};
render() {
let {
......
src/components/mycontribute/style.css
......@@ -107,17 +107,21 @@
font-size: 30px !important;
}
.contribute-detail-out .contribute-detail-box .ant-upload-list-picture-card-container {
width: 200px !important;
height: 200px !important;
width: 32% !important;
}
.contribute-detail-out .contribute-detail-box .ant-upload-list-picture-card .ant-upload-list-item {
width: 200px !important;
width: 100% !important;
height: 200px !important;
}
.contribute-detail-out .contribute-detail-box .ant-upload-select-picture-card {
width: 200px !important;
width: 32% !important;
height: 200px !important;
}
.contribute-detail-out .contribute-detail-box .ant-upload-select-picture-card .ant-upload {
display: flex;
align-items: center;
justify-content: center;
}
.contribute-detail-out .contribute-detail-box .anticon {
font-size: 40px;
}
......
src/components/mycontribute/style.less
......@@ -106,16 +106,20 @@
font-size: 30px !important;
}
.ant-upload-list-picture-card-container {
width: 200px !important;
height: 200px !important;
width: 32% !important;
}
.ant-upload-list-picture-card .ant-upload-list-item {
width: 200px !important;
width: 100% !important;
height: 200px !important;
}
.ant-upload-select-picture-card {
width: 200px !important;
width: 32% !important;
height: 200px !important;
.ant-upload {
display: flex;
align-items: center;
justify-content: center;
}
}
.anticon {
font-size: 40px;
......
src/main.js
......@@ -97,7 +97,7 @@ const GlobalSearch = LazyLoad(() =>
const Comment = LazyLoad(() => import('./components/comment/comment'));
const MyIntegral = LazyLoad(() => import('./components/integral/myintegral'));
const MyIntegral = LazyLoad(() => import('./components/myIntegral'));
// //我的活动
const Training = LazyLoad(() => import('./components/Training/Training'));
const TrainSearch = LazyLoad(() =>
......@@ -210,6 +210,10 @@ const MediaPreview = LazyLoad(() =>
const Mailbox = LazyLoad(() =>
import('./components/Mailbox')
)
//我的评论
const MyComment = LazyLoad(() =>
import('./components/myComment')
)
// 首页组件库
const IndexComponentPage = LazyLoad(() => import('./components/indexComponent'));
......@@ -359,9 +363,7 @@ class AppRouter extends React.Component {
</Route>
{/*我的积分*/}
<Route path="/*/*/integral">
<Route path="/*/*/myintegral" component={MyIntegral} />
</Route>
<Route path="/*/*/myintegral" component={MyIntegral} />
{/*全局搜索*/}
<Route path={'/*/*/search'} component={GlobalSearch} />
......@@ -394,6 +396,9 @@ class AppRouter extends React.Component {
{/* 纪检信箱 */}
<Route path="/*/*/mailbox" component={Mailbox} />
<Route path="/*/*/committeeMailbox" component={Mailbox} />
{/* 我的评论 */}
<Route path="/*/*/myComment" component={MyComment} />
{/*empty Committee*/}
<Route path="/*/*/empty" component={Empty} />
......
src/util/urlconfig.js
......@@ -21,10 +21,10 @@ if (
host.indexOf("172.") != -1
) {
//本地环境
baseUrl = "http://192.168.1.107:8090";
// baseUrl = "http://192.168.1.107:8090";
//服务器环境
// baseUrl = "https://10.23.1.180:8090";
// baseUrl = "https://hqjddj.shanghaiairport.com";
baseUrl = "https://hqjddj.shanghaiairport.com";
} else if (
host.indexOf("192.168.1.131") != -1 ||
......@@ -460,5 +460,11 @@ const url = {
commitContributeApi:`${baseUrl}${WEBMANAGE}manage/site/classify/publication/insert`,
//我的投稿
getContributeMyListApi:`${baseUrl}${WEBMANAGE}manage/site/classify/publication/list`,
//纪检信箱
systemMailboxApi:`${baseUrl}${WEBMANAGE}manage/systemMailbox/save/1`,
//党委书记信箱
dwsystemMailboxApi:`${baseUrl}${WEBMANAGE}manage/systemMailbox/save/2`,
//我的评论
myCommentListApi:`${baseUrl}${WEBSTUDENT}api/tpComment/pc/listByMyself`,
};
export default url;
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