Skip to content

S
saas-weichat
Commit e627152c by yanglang123
Options

增加图片上传

parent 7f2a7fad
Showing with 1028 additions and 168 deletions
src/common/uploadTools/uploadItem/upload.jsx 0 → 100644
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 0 → 100644
.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 0 → 100644
.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 0 → 100644
.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/App.jsx
......@@ -87,6 +87,7 @@ class App extends React.Component {
componentWillMount() {
console.log("diyici");
if (navigator.userAgent.indexOf("iPhone") != -1) {
console.log('登录系统为苹果')
this.iosTouch();
}
let tab = location.hash.split("/")[location.hash.split("/").length - 1];
......
src/components/Mailbox/action.js 0 → 100644
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) {
return (dispatch) => {
return excute.post(
API.commitContributeApi,
params,
(response) => {
if (callback) {
callback(response.data);
}
}
);
};
}
//我的投稿列表
export function getContributeMyListApi(params, callback) {
const url = `${API.getContributeMyListApi}`;
return (dispatch) => {
return excute.post(
url,
{},
(response) => {
if (callback) {
callback(response.data);
}
}
);
};
}
\ No newline at end of file
src/components/Mailbox/index.jsx 0 → 100644
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";
const { TextArea } = Input;
class ContributeDetail extends Component {
constructor(props) {
super(props);
this.state = {
ossParam: {},
activeId: 0,
authValue: "",
delValue: "",
titleValue: "",
contentValue: "",
previewVisible: false,
previewImage: "",
fileList: [],
mailList: [
{ name: "意见建议", id: 1 },
{ name: "线索提供", id: 2 },
{ name: "举报", id: 3 },
],
mailListCommit: [
{ name: "意见建议", id: 1 },
{ name: "反映问题", id: 2 },
{ name: "寻求帮助", id: 3 },
],
};
document.title = "我要投稿";
}
componentDidMount() {}
handleClick = (item, index) => {
const { activeId } = this.state;
let _this = this;
if (activeId != index) {
_this.setState({
activeId: index,
});
}
};
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,
});
console.log(this.state.fileList, "2222222222222");
};
render() {
const { mailList, mailListCommit, activeId } = this.state;
return (
<div className="contribute-detail-out">
<div className="contribute-detail-box">
<div className="top-tit">
来信目的 <span className="red-star">*</span>
</div>
<div className="mailBox-out">
{location.hash.indexOf("committeeMailbox") != -1
? mailListCommit.map((item, index) => {
return (
<div
key={index}
className={
activeId == index ? "active-box" : "unactive-box"
}
onClick={() => this.handleClick(item, index)}
>
{item.name}
</div>
);
})
: mailList.map((item, index) => {
return (
<div
key={index}
className={
activeId == index ? "active-box" : "unactive-box"
}
onClick={() => this.handleClick(item, index)}
>
{item.name}
</div>
);
})}
</div>
</div>
<div className="contribute-detail-box">
<div className="top-tit">
标题 <span className="red-star">*</span>
</div>
<Input
placeholder="标题需15字以内"
value={this.state.titleValue}
onChange={(event) =>
this.setState({ titleValue: event.target.value })
}
allowClear
maxLength={15}
style={{ height: "60px", lineHeight: "60px" }}
/>
</div>
<div className="contribute-detail-box">
<div className="top-tit">具体内容</div>
<TextArea
value={this.state.contentValue}
onChange={(event) =>
this.setState({ contentValue: event.target.value })
}
placeholder="请输入具体内容"
rows={8}
/>
</div>
{location.hash.indexOf("committeeMailbox") != -1 ? (
<div className="contribute-detail-box">
<div className="top-tit">期望结果</div>
<TextArea
value={this.state.contentValue}
onChange={(event) =>
this.setState({ contentValue: event.target.value })
}
placeholder="请输入期望结果"
rows={4}
/>
</div>
) : (
""
)}
<div className="contribute-detail-box">
<div className="top-tit">上传附件</div>
<UploaderTools
getFileList={this.getFileList}
fileList={this.state.fileList}
noPreview={true}
isResult={false}
/>
</div>
<div className="contribute-detail-btn">
<div className="sumbit-btn" onClick={this.handleTo}>
提交
</div>
</div>
</div>
);
}
}
const mapStateToProps = (state) => {
return {};
};
const mapDispatchToProps = (dispatch) => {
return {
getContributeListApi: bindActionCreators(getContributeListApi, dispatch),
};
};
export default connect(mapStateToProps, mapDispatchToProps)(ContributeDetail);
src/components/Mailbox/style.css 0 → 100644
.mycontribute-out {
background-color: #fff;
}
.mycontribute-out .mycontribute-tit {
font-size: 40px;
font-weight: bold;
padding: 40px 25px;
margin-left: 10px;
color: #333;
}
.mycontribute-out .mycontribute-box {
background-color: #fff;
width: 92%;
margin: 0 auto;
padding: 40px 25px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.mycontribute-out .mycontribute-box .item-box {
width: 48%;
margin-bottom: 30px;
height: 80px;
line-height: 80px;
background-color: #f7f7f7;
text-align: center;
font-size: 38px;
color: #454343;
}
.mycontribute-out .mycontribute-box .item-box-active {
width: 48%;
margin-bottom: 30px;
height: 80px;
line-height: 80px;
background: rgba(253, 63, 52, 0.05);
border: 1px solid #f3ab9f;
border-radius: 4px;
text-align: center;
font-size: 38px;
color: #454343;
}
.mycontribute-out .mycontribute-box span {
width: 100%;
color: #e6624a;
}
.mycontribute-out .mycontribute-child-box {
background-color: #fff;
width: 92%;
margin: 0 auto;
padding: 40px 25px;
}
.mycontribute-out .mycontribute-btn {
width: 92%;
margin: 0 auto;
text-align: center;
padding: 20px 0;
background: linear-gradient(270deg, #eb6c53 0%, #d23a29);
border-radius: 5px;
color: #fff;
font-size: 36px;
}
.contribute-detail-out {
width: 92%;
margin: 30px auto;
padding-bottom: 30px;
}
.contribute-detail-out .contribute-detail-box {
padding: 40px 30px;
background-color: #fff;
margin-bottom: 30px;
}
.contribute-detail-out .contribute-detail-box .top-tit {
font-size: 40px;
font-weight: bold;
color: #000;
margin-bottom: 15px;
}
.contribute-detail-out .contribute-detail-box .top-tit .red-star {
color: red;
font-size: 40px;
}
.contribute-detail-out .contribute-detail-box .user-tit {
color: #999999;
font-size: 32px;
}
.contribute-detail-out .contribute-detail-box .userinfo-box {
display: flex;
justify-content: space-between;
align-items: center;
}
.contribute-detail-out .contribute-detail-box .userinfo-box .userinfo-name {
margin-top: 30px;
color: #666666;
font-size: 32px;
}
.contribute-detail-out .contribute-detail-box .mailBox-out {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.contribute-detail-out .contribute-detail-box .unactive-box {
width: 33%;
height: 80px;
line-height: 80px;
background-color: #f7f7f7;
text-align: center;
font-size: 36px;
color: #454343;
}
.contribute-detail-out .contribute-detail-box .active-box {
width: 33%;
height: 80px;
line-height: 80px;
background: rgba(253, 63, 52, 0.05);
border: 1px solid #f3ab9f;
border-radius: 4px;
text-align: center;
font-size: 36px;
color: #454343;
}
.contribute-detail-out .contribute-detail-box .ant-input-affix-wrapper {
border: 0 !important;
}
.contribute-detail-out .contribute-detail-box .ant-input {
border: 0 !important;
font-size: 32px !important;
}
.contribute-detail-out .contribute-detail-box .ant-input:focus {
box-shadow: none !important;
}
.contribute-detail-out .contribute-detail-box .ant-input-clear-icon {
font-size: 30px !important;
}
.contribute-detail-out .contribute-detail-box .ant-upload-list-picture-card-container {
width: 200px !important;
height: 200px !important;
}
.contribute-detail-out .contribute-detail-box .ant-upload-list-picture-card .ant-upload-list-item {
width: 200px !important;
height: 200px !important;
}
.contribute-detail-out .contribute-detail-box .ant-upload-select-picture-card {
width: 200px !important;
height: 200px !important;
}
.contribute-detail-out .contribute-detail-box .anticon {
font-size: 40px;
}
.contribute-detail-out .contribute-detail-box .ant-upload-text {
font-size: 30px;
}
.contribute-detail-out .contribute-detail-btn {
display: flex;
justify-content: space-between;
}
.contribute-detail-out .contribute-detail-btn .sumbit-btn {
width: 100%;
text-align: center;
color: #fff;
font-size: 40px;
padding: 10px 0;
border-radius: 4px;
background: linear-gradient(270deg, #eb6c53 0%, #d23a29);
}
.ant-modal-footer {
display: none !important;
}
.ant-upload-list-item-actions a {
margin-right: 35px;
}
.ant-upload-list-item-actions .anticon-delete {
margin-left: 35px;
}
src/components/Mailbox/style.less 0 → 100644
.mycontribute-out {
background-color: #fff;
.mycontribute-tit {
font-size: 40px;
font-weight: bold;
padding: 40px 25px;
margin-left: 10px;
color: #333;
}
.mycontribute-box {
background-color: #fff;
width: 92%;
margin: 0 auto;
padding: 40px 25px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.item-box {
width: 48%;
margin-bottom: 30px;
height: 80px;
line-height: 80px;
background-color: #f7f7f7;
text-align: center;
font-size: 38px;
color: #454343;
}
.item-box-active {
width: 48%;
margin-bottom: 30px;
height: 80px;
line-height: 80px;
background: rgba(253, 63, 52, 0.05);
border: 1px solid #f3ab9f;
border-radius: 4px;
text-align: center;
font-size: 38px;
color: #454343;
}
span {
width: 100%;
color: #e6624a;
}
}
.mycontribute-child-box {
background-color: #fff;
width: 92%;
margin: 0 auto;
padding: 40px 25px;
}
.mycontribute-btn {
width: 92%;
margin: 0 auto;
text-align: center;
padding: 20px 0;
background: linear-gradient(270deg, #eb6c53 0%, #d23a29);
border-radius: 5px;
color: #fff;
font-size: 36px;
}
}
//投稿详情
.contribute-detail-out {
width: 92%;
margin: 30px auto;
padding-bottom: 30px;
.contribute-detail-box {
padding: 40px 30px;
background-color: #fff;
margin-bottom: 30px;
.top-tit {
font-size: 40px;
font-weight: bold;
color: #000;
margin-bottom: 15px;
.red-star {
color: red;
font-size: 40px;
}
}
.user-tit {
color: #999999;
font-size: 32px;
}
.userinfo-box {
display: flex;
justify-content: space-between;
align-items: center;
.userinfo-name {
margin-top: 30px;
color: #666666;
font-size: 32px;
}
}
.mailBox-out{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.unactive-box {
width: 33%;
height: 80px;
line-height: 80px;
background-color: #f7f7f7;
text-align: center;
font-size: 36px;
color: #454343;
}
.active-box {
width: 33%;
height: 80px;
line-height: 80px;
background: rgba(253, 63, 52, 0.05);
border: 1px solid #f3ab9f;
border-radius: 4px;
text-align: center;
font-size: 36px;
color: #454343;
}
.ant-input-affix-wrapper {
border: 0 !important;
}
.ant-input {
border: 0 !important;
font-size: 32px !important;
}
.ant-input:focus {
box-shadow: none !important;
}
.ant-input-clear-icon {
font-size: 30px !important;
}
.ant-upload-list-picture-card-container {
width: 200px !important;
height: 200px !important;
}
.ant-upload-list-picture-card .ant-upload-list-item {
width: 200px !important;
height: 200px !important;
}
.ant-upload-select-picture-card {
width: 200px !important;
height: 200px !important;
}
.anticon {
font-size: 40px;
}
.ant-upload-text {
font-size: 30px;
}
}
.contribute-detail-btn {
display: flex;
justify-content: space-between;
.sumbit-btn {
width: 100%;
text-align: center;
color: #fff;
font-size: 40px;
padding: 10px 0;
border-radius: 4px;
background: linear-gradient(270deg, #eb6c53 0%, #d23a29);
}
}
}
.ant-modal-footer {
display: none !important;
}
.ant-upload-list-item-actions {
a {
margin-right: 35px;
}
.anticon-delete {
margin-left: 35px;
}
}
src/components/indexComponent/index.jsx
......@@ -33,7 +33,6 @@ class IndexComponent extends Component {
display: false,
},
taskList: [],
showNotMore: false,
};
}
......@@ -50,7 +49,6 @@ class IndexComponent extends Component {
_this.setState({
homeModuleList,
});
_this.timeoutShowNotMore();
});
let param = {
pageNo: 1,
......@@ -61,14 +59,7 @@ class IndexComponent extends Component {
level: '',
};
}
timeoutShowNotMore = () => {
let _this = this;
setTimeout(() => {
_this.setState({
showNotMore: true,
});
}, 3000);
};
renderByModuleList = () => {
const { homeModuleList } = this.state;
......@@ -160,7 +151,7 @@ class IndexComponent extends Component {
render() {
console.log(this.state.homeModuleList);
const { taskState, showNotMore } = this.state;
const { taskState } = this.state;
return (
<div
......
src/components/menume/menume.css
......@@ -147,7 +147,7 @@
justify-content: space-between;
}
.my-menu-body .header-info-box .study-record-info .study-item .study-jf {
padding: 10px 25px;
padding: 10px 15px;
background: linear-gradient(90deg, #d23a29, #eb6c53 100%);
border-radius: 40px;
color: #fff;
......
src/components/menume/menume.jsx
......@@ -50,11 +50,11 @@ const mapList = {
},
MyDwsjxx: {
text: "党委书记信箱",
url: "/mysurvey",
url: "/committeeMailbox",
},
MyJjxx: {
text: "纪检信箱",
url: "/mysurvey",
url: "/mailbox",
},
MyLy: {
text: "我要留言",
......@@ -325,25 +325,7 @@ class Menume extends React.Component {
<div className="my-menu-body">
<div className="header-info-box">
<div className="personal-info-main">
{this.state.isAPPEnableSign == 1 ? (
<div
className="playcard-entry"
onClick={() => {
hashHistory.push(func.routerBefore() + "/signplaycard");
}}
>
{/* <span className="playcard-icon"> */}
<IconFont
className="playcard-icon"
style={{ fontSize: 32 }}
type="icon-mine-checkin"
/>
{/* </span> */}
<span className="playcard-text">{intl.get("signCard")}</span>
</div>
) : (
""
)}
<div
className="personal-info"
onClick={() => {
......@@ -408,7 +390,7 @@ class Menume extends React.Component {
<div className="study-item">
<div style={{ display: "flex" }}>
<img
style={{ width: "45px", marginRight: "20px" }}
style={{ width: "45px", height: "45px", marginRight: "20px" }}
src={jinbi}
alt=""
/>
......
src/components/menume/menume.less
......@@ -159,7 +159,7 @@
align-items: center;
justify-content: space-between;
.study-jf {
padding: 10px 25px;
padding: 10px 15px;
background: linear-gradient(90deg, #d23a29, #eb6c53 100%);
border-radius: 40px;
color: #fff;
......
src/components/myLeaveMessage/index.jsx
......@@ -3,16 +3,9 @@ import "./style.less";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import { VoteListApi } from "./action";
import { Input, Upload, Icon, Modal, Radio } from "antd";
import { Input, Radio } from "antd";
import UploaderTools from "./../../common/uploadTools/UploadTool";
const { TextArea } = Input;
function getBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = (error) => reject(error);
});
}
class MyLeaveMessage extends Component {
constructor(props) {
super(props);
......@@ -22,14 +15,7 @@ class MyLeaveMessage extends Component {
contentValue: "",
previewVisible: false,
previewImage: "",
fileList: [
{
uid: "-1",
name: "image.png",
status: "done",
url: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
},
],
fileList: [],
activeId: 0,
mapList: [
{
......@@ -51,34 +37,14 @@ class MyLeaveMessage extends Component {
],
};
document.title = "我要留言";
this.beforeUpload = this.beforeUpload.bind(this);
this.handleChange = this.handleChange.bind(this);
}
componentDidMount() {}
handleCancel = () => this.setState({ previewVisible: false });
handlePreview = async (file) => {
console.log("111111111111111");
if (!file.url && !file.preview) {
file.preview = await getBase64(file.originFileObj);
}
getFileList = (list) => {
this.setState({
previewImage: file.url || file.preview,
previewVisible: true,
fileList: list,
});
console.log(this.state.fileList, "2222222222222");
};
beforeUpload(file, fileList) {
console.log("file, fileList", file, fileList);
// this.setState({
// previewImage: file.url || file.preview,
// previewVisible: true,
// });
}
handleChange({ fileList }) {
this.setState({ fileList });
}
handleMessageClick(data, index) {
let _this = this;
......@@ -98,14 +64,8 @@ class MyLeaveMessage extends Component {
// });
};
render() {
const { mapList, activeId, previewVisible, previewImage, fileList } =
this.state;
const uploadButton = (
<div>
<Icon type="plus" />
<div className="ant-upload-text">上传</div>
</div>
);
const { mapList, activeId } = this.state;
return (
<div className="contribute-detail-out">
<div className="contribute-detail-box">
......@@ -157,25 +117,14 @@ class MyLeaveMessage extends Component {
</div>
<div className="contribute-detail-box">
<div className="top-tit">
图片<span>(0/6)</span>
图片<span>(0/9)</span>
</div>
<Upload
action={""}
listType="picture-card"
fileList={fileList}
onPreview={this.handlePreview}
beforeUpload={this.beforeUpload}
onChange={this.handleChange}
>
{fileList.length >= 6 ? null : uploadButton}
</Upload>
<Modal
visible={previewVisible}
footer={null}
onCancel={this.handleCancel}
>
<img alt="example" style={{ width: "100%" }} src={previewImage} />
</Modal>
<UploaderTools
getFileList={this.getFileList}
fileList={this.state.fileList}
noPreview={true}
isResult={false}
/>
<div style={{ fontSize: "30px", color: "#9E9E9E" }}>
支持.png.jepg格式，每张最大5MB
</div>
......@@ -192,7 +141,7 @@ class MyLeaveMessage extends Component {
是否匿名 <span className="red-star">*</span>
</div>
<Radio.Group
size='large'
size="large"
value={this.state.anonymousValue}
onChange={(event) =>
this.setState({ anonymousValue: event.target.value })
......
src/components/mycontribute/contributeDetail.jsx
......@@ -3,16 +3,9 @@ import "./style.less";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import { getContributeListApi } from "./action";
import { Input, Upload, Icon, Modal } from "antd";
import { Input, Modal } from "antd";
import UploaderTools from "./../../common/uploadTools/UploadTool";
const { TextArea } = Input;
function getBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = (error) => reject(error);
});
}
class ContributeDetail extends Component {
constructor(props) {
super(props);
......@@ -24,20 +17,11 @@ class ContributeDetail extends Component {
contentValue: "",
previewVisible: false,
previewImage: "",
fileList: [
{
uid: "-1",
name: "image.png",
status: "done",
url: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
},
],
fileList: [],
};
document.title = "我要投稿";
this.showVideoModal = this.showVideoModal.bind(this);
this.closeVideoModal = this.closeVideoModal.bind(this);
this.beforeUpload = this.beforeUpload.bind(this);
this.handleChange = this.handleChange.bind(this);
}
showVideoModal() {
this.setState({
......@@ -50,30 +34,13 @@ class ContributeDetail extends Component {
});
}
componentDidMount() {}
handleCancel = () => this.setState({ previewVisible: false });
handlePreview = async (file) => {
console.log("111111111111111");
if (!file.url && !file.preview) {
file.preview = await getBase64(file.originFileObj);
}
getFileList = (list) => {
this.setState({
previewImage: file.url || file.preview,
previewVisible: true,
fileList: list,
});
console.log(this.state.fileList,'2222222222222')
};
beforeUpload(file, fileList) {
console.log("file, fileList", file, fileList);
// this.setState({
// previewImage: file.url || file.preview,
// previewVisible: true,
// });
}
handleChange({ fileList }) {
this.setState({ fileList });
}
handleClick = () => {
console.log(this.state.titleValue, "点击情况~~~~~~~~~");
// let { typeOne, typeTwo, typeThree } = this.props.location.query;
......@@ -85,13 +52,7 @@ class ContributeDetail extends Component {
// });
};
render() {
const { previewVisible, previewImage, fileList } = this.state;
const uploadButton = (
<div>
<Icon type="plus" />
<div className="ant-upload-text">上传</div>
</div>
);
const { fileList } = this.state;
return (
<div className="contribute-detail-out">
<div className="contribute-detail-box">
......@@ -122,23 +83,12 @@ class ContributeDetail extends Component {
</div>
<div className="contribute-detail-box">
<div className="top-tit">图片或视频上传</div>
<Upload
action={""}
listType="picture-card"
fileList={fileList}
onPreview={this.handlePreview}
beforeUpload={this.beforeUpload}
onChange={this.handleChange}
>
{fileList.length >= 20 ? null : uploadButton}
</Upload>
<Modal
visible={previewVisible}
footer={null}
onCancel={this.handleCancel}
>
<img alt="example" style={{ width: "100%" }} src={previewImage} />
</Modal>
<UploaderTools
getFileList={this.getFileList}
fileList={this.state.fileList}
noPreview={true}
isResult={false}
/>
</div>
<div className="contribute-detail-box">
<div className="user-tit">以下为公开信息，将会在稿件中显示</div>
......
src/main.js
......@@ -206,8 +206,10 @@ const MyLeaveMessage = LazyLoad(() =>
const MediaPreview = LazyLoad(() =>
import('./common/preview/preview')
)
//纪检信箱 党委书记信箱
const Mailbox = LazyLoad(() =>
import('./components/Mailbox')
)
// 首页组件库
const IndexComponentPage = LazyLoad(() => import('./components/indexComponent'));
......@@ -389,7 +391,10 @@ class AppRouter extends React.Component {
<Route path="/*/*/contributeMyself" component={ContributeMyself} />
{/* 我要留言 */}
<Route path="/*/*/myLeaveMessage" component={MyLeaveMessage} />
{/*empty*/}
{/* 纪检信箱 */}
<Route path="/*/*/mailbox" component={Mailbox} />
<Route path="/*/*/committeeMailbox" component={Mailbox} />
{/*empty Committee*/}
<Route path="/*/*/empty" component={Empty} />
<Route path={'/*/*/login'} component={Login} />
......
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