Skip to content

X
xiaomai-cloud-class-web
Commit 162ba284 by zhangleyuan
Options

feat:修改店铺信息页的样式

parent 814607da
Showing with 141 additions and 31 deletions
src/modules/course-manage/modal/RelatedPlanModal.jsx
......@@ -144,6 +144,10 @@ class RelatedPlanModal extends React.Component {
}
return num;
}
clearSelect = ()=>{
const _selectPlanList = {};
this.props.onChange(_selectPlanList);
}
render() {
const { size,dataSource,totalCount,query} = this.state;
const { visible,selectPlanList} = this.props;
......@@ -170,7 +174,7 @@ class RelatedPlanModal extends React.Component {
<div className="select-container">
<span className="icon iconfont tip">&#xe6f2;</span>
<span className="text">已选择{this.getSelectLength(selectPlanList)}个任务</span>
<span className="clear">清空</span>
<span className="clear" onClick={this.clearSelect}>清空</span>
</div>
<div>
<Table
......
src/modules/plan-manage/modal/relatedCourseModal.jsx
import React from 'react';
import {Table, Modal,Input,message} from 'antd';
import {Table, Modal,Input,message,Button} from 'antd';
import { PageControl } from "@/components";
import CourseService from "@/domains/course-domain/CourseService";
import User from '@/common/js/user';
import { Tabs } from 'antd';
import './SelectOperatorModal.less';
import './relatedCourseModal.less';
import _ from "underscore";
import dealTimeDuration from "../../course-manage/utils/dealTimeDuration";
......@@ -53,6 +53,7 @@ class SelectOperatorModal extends React.Component {
videoTotalCount:0,
selectVideo:[], //弹窗内已选择的视频课程
currentVideoCourseListData:[], //页面中已关联的视频课程
activeKey:'video'
}
}
......@@ -183,30 +184,37 @@ class SelectOperatorModal extends React.Component {
<img className="course-cover" src={'https://image.xiaomaiketang.com/xm/YNfi45JwFA.png'} style={{width:'100px',height:'50px'}} />
}
<div className="course-name">{record.courseName}</div>
<div><span className="course-status">{courseStateShow[record.courseState].title}</span></div>
</div>
)
}
},
{
title: '课程状态',
key: 'courseState',
dataIndex: 'courseState',
title: '上课时间',
key: 'courseTime',
dataIndex: 'courseTime',
render: (val, record) => {
return (
<span className="course-status">{courseStateShow[record.courseState].title}</span>
<span>{formatDate('YYYY-MM-DD H:i', record.startTime)} ~ {formatDate('YYYY-MM-DD H:i', record.endTime)}</span>
)
}
},
{
title: '上课时间',
key: 'courseTime',
dataIndex: 'courseTime',
title: '店铺展示',
key: 'shelfState',
dataIndex: 'shelfState',
render: (val, record) => {
return (
<span>{formatDate('YYYY-MM-DD H:i', record.startTime)} ~ {formatDate('YYYY-MM-DD H:i', record.endTime)}</span>
)
<span>
{record.shelfState==="YES"?
<span>开启</span>
:
<span>关闭</span>
}
</span>
)
}
},
];
return columns;
......@@ -241,12 +249,18 @@ class SelectOperatorModal extends React.Component {
}
},
{
title: '课程大小',
key: 'size',
dataIndex: 'size',
title: '店铺展示',
key: 'shelfState',
dataIndex: 'shelfState',
render: (val, record) => {
return (
<span>{(val/1024).toFixed(1)}M</span>
<span>
{record.shelfState==="YES"?
<span>开启</span>
:
<span>关闭</span>
}
</span>
)
}
}
......@@ -311,7 +325,7 @@ class SelectOperatorModal extends React.Component {
}
render() {
const { visible } = this.props;
const { liveDataSource,liveSize,liveQuery,liveTotalCount,selectLive,currentLiveCourseListData,videoDataSource,videoSize,videoQuery,videoTotalCount,selectVideo,currentVideoCourseListData} = this.state;
const { liveDataSource,liveSize,liveQuery,liveTotalCount,selectLive,currentLiveCourseListData,videoDataSource,videoSize,videoQuery,videoTotalCount,selectVideo,currentVideoCourseListData,activeKey} = this.state;
return (
<Modal
......@@ -319,16 +333,33 @@ class SelectOperatorModal extends React.Component {
onCancel={this.props.onClose}
maskClosable={false}
visible={visible}
className="select-operator-modal"
className="related-course-modal"
closable={true}
width={800}
onOk={() => this.props.onSelect([...this.handleSelectVideo(selectVideo),...this.handleSelectLive(selectLive)]) }
closeIcon={<span className="icon iconfont modal-close-icon">&#xe6ef;</span>}
footer={[
activeKey ==='live'?
<a target='_blank' class="link-create-course" href="https://dev.xiaomai5.com/xiaomai-cloud-class-web/index.html#/create-live-course?type=add">没有找到需要的直播课？<span>去创建</span></a>
:
<a target='_blank' class="link-create-course" href="https://dev.xiaomai5.com/xiaomai-cloud-class-web/index.html#/create-video-course?type=add">没有找到需要的视频课？<span>去创建</span></a>
,
<Button
onClick={() => {
this.props.onClose()
}}
>
取消
</Button>,
<Button type="primary" onClick={() => this.props.onSelect([...this.handleSelectVideo(selectVideo),...this.handleSelectLive(selectLive)]) }>
确定
</Button>
]}
>
<div>
<Tabs defaultActiveKey="1">
<TabPane tab="视频课" key="1">
<Tabs defaultActiveKey="video" onChange={(activeKey)=>{this.setState({activeKey:activeKey})}}>
<TabPane tab="视频课" key="video">
<div className="search-container">
<Search placeholder="搜索课程名称" style={{ width: 200 }} onChange={(e) => { this.handleChangVideoCourseName(e.target.value)}} onSearch={ () => { this.handleFetchVideoDataList()}}/>
</div>
......@@ -381,7 +412,7 @@ class SelectOperatorModal extends React.Component {
}
</div>
</TabPane>
<TabPane tab="直播课" key="2">
<TabPane tab="直播课" key="live">
<div className="search-container">
<Search placeholder="搜索课程名称" style={{ width: 200 }} onChange={(e) => { this.handleChangLiveCourseName(e.target.value)}} onSearch={ () => { this.handleFetchLiveDataList()}} />
</div>
......
src/modules/plan-manage/modal/relatedCourseModal.less
.related-course-modal{
.link-create-course{
color:#666666;
font-size:14px;
width:638px;
text-align:left;
display:inline-block;
span{
color:#5289FA;
}
}
}
\ No newline at end of file
src/modules/store-manage/StoreInfo.jsx
......@@ -7,6 +7,7 @@ import Upload from '@/core/upload';
import PhotoClip from 'photoclip';
import StoreService from "@/domains/store-domain/storeService";
import User from "@/common/js/user";
import "./StoreInfo.less";
let cutFlag = false;
class StoreInfo extends React.Component {
formRef = React.createRef();
......@@ -214,10 +215,12 @@ class StoreInfo extends React.Component {
render() {
const {storeName,storeFullName,subjectType,corpIndustry,corpSubIndustry,showSelectFileModal,visible,hasImgReady,logo,cutImageBlob } = this.state;
return (
<div className="page">
<div className="page store-info-page">
<div className="content-header">店铺基本信息</div>
<div className="box">
<div>
<div className="store-info-header">店铺基本信息</div>
<div className="store-info-page-form">
<Form ref={this.formRef}>
<Form.Item
label="店铺简称"
......@@ -237,14 +240,13 @@ class StoreInfo extends React.Component {
<Form.Item
label="店铺logo"
>
<div>
<div>
{ logo ? <img src={logo} style={{width:'258px',height:'60px'}}/> : <div><span>Logo</span></div>}
<div className="logo-con">
<div className="logo-img-con">
{ logo ? <img src={logo} className="logo-img"/> : <div className="logo-box"><span className="text">Logo</span></div>}
</div>
<div>
<div><span onClick={() => {this.setState({ showSelectFileModal:true })}}>上传</span></div>
<div>建议尺寸702*180px。最大2M，支持jpg、jpeg和png。</div>
<div className="operate-con">
<div><span onClick={() => {this.setState({ showSelectFileModal:true })}} className="upload-btn">上传</span></div>
<div className="tip">建议尺寸702*180px。最大2M，支持jpg、jpeg和png。</div>
</div>
</div>
</Form.Item>
......@@ -377,7 +379,7 @@ class StoreInfo extends React.Component {
</div>
</div>
</Modal>
<div><Button type="primary" onClick={this.updateInfo} htmlType="submit">更新信息</Button></div>
<div><Button type="primary" onClick={this.updateInfo} htmlType="submit" className="submit-btn">更新信息</Button></div>
</div>
</div>
......
src/modules/store-manage/StoreInfo.less
.store-info-page{
.store-info-header{
font-weight:bold;
color:#333;
font-size:16px;
margin-bottom: 16px;
}
.ant-form-item-label > label{
width:112px;
display:inline-block;
text-align:right;
color:#666666;
font-size:14px;
}
.store-info-page-form{
margin-left:29px;
.logo-con{
display: flex;
.logo-img-con{
width: 258px;
height: 60px;
margin-right:8px;
.logo-box{
width: 258px;
height: 60px;
background: #F7F8F9;
border-radius: 1px;
text-align:center;
.text{
text-align:center;
line-height:60px;
color:#ccc;
font-size:14px;
}
}
.logo-img{
width: 258px;
height: 60px;
}
}
.operate-con{
.upload-btn{
color:#5289FA;
font-size:14px;
margin-bottom:4px;
}
.tip{
color:#999999;
font-size:14px;
}
}
}
}
.submit-btn{
margin-left:142px;
}
}
\ No newline at end of file
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