Commit 3b2765d0 by gaoju

生产2次测修改

1 parent d1799b9c
Showing 99 changed files with 0 additions and 4513 deletions
.inputcss{
width: 1.5rem;
border: 1px solid rgb(221, 221, 221);
padding-left: 0.1rem;
height: 0.3rem;
font-size: 0.15rem;
}
\ No newline at end of file
import React, { Component } from 'react'
import { Picker} from 'antd-mobile';
import styles from './InputModal.css';
class InputModal extends Component {
constructor(props) {
super(props);
this.state = {
value: props.value || '',
id:props.id || 'input',
placeholder:props.placeholder || '请输入',
}
}
componentWillReceiveProps(nextProps){
console.log('---------WILLreceiveprops------->',nextProps.value,this.state.value)
if(nextProps.placeholder != this.state.placeholder || nextProps.value != this.state.value){
this.setState({
value:nextProps.value,
placeholder:nextProps.placeholder,
})
}
}
onChange = (e)=>{
let value = e.target.value
value = value.substring(0,10)
this.setState({
value :value
})
}
blur =()=>{
setTimeout(function(){
if(document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA'){
return
}
let result = 'pc';
if(/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { //判断iPhone|iPad|iPod|iOS
result = 'ios'
}else if(/(Android)/i.test(navigator.userAgent)) { //判断Android
result = 'android'
}
if( result = 'ios' ){
document.querySelector('body').scrollIntoView();
}
},10)
}
render() {
const { placeholder,value,id} = this.state;
return (
<input className={styles.inputcss}
id={id}
placeholder={placeholder}
value={value}
type="number"
pattern="[0-9]*"
onBlur={::this.blur}
onChange={this.onChange}/>
)
}
}
export default InputModal
.wrapper_scroller {
position: absolute;
z-index: 1;
top: 0;
bottom: 0;
left: 0;
overflow: hidden;
width: 100%;
height: 100%;
min-height: 100px;
font-size: 14px;
}
.wrapper_scroller .scroller {
position: absolute;
z-index: 1;
-webkit-tap-highlight-color: rgba(0,0,0,0);
width: 100%;
min-height: 100%;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
-o-text-size-adjust: none;
text-size-adjust: none;
}
.wrapper_scroller .scroller .scroller_pullUp {min-height: 1.5em;line-height: 1.5em;font-size: 1em;text-align:center;position:absolute;left:0px;width:100%;overflow: hidden;}
.wrapper_scroller .scroller .scroller_pullDown {min-height: 1.5em;line-height: 1.5em;font-size: 1em;text-align:center;position:absolute;left:0px;width:100%;overflow: hidden;}
.wrapper_scroller .scroller .scroller_pullDown{top:-1.5em;-webkit-user-select: none;user-select: none;font-size: 1em;}
.wrapper_scroller .scroller .loadingSection{
display: flex;
justify-content: center;
}
.wrapper_scroller .scroller .loadingSection img{height: 1.5em;margin: 0 .5em 0 0;}
.wrapper_scroller .backTopSection{
position: absolute;
bottom: 5em;
z-index: 10;
right: 5px;
width: 40px;
height: 40px;
}
.wrapper_scroller .backTopSection img{width: 100%;height: 100%;}
\ No newline at end of file
/**
* Created by gaoju on 2019/7/2.
* 滚动组件
* 注意:::此组件需要包裹在有高度的元素中,否则占满全屏
*/
import React, { Component } from 'react';
import IScroll from 'iscroll/build/iscroll-probe'
import styles from './index.css'
class Home extends Component {
constructor(props) {
super(props);
this.state = {
data: [],
yesDown: false, // 是否已到了下拉刷新的高度
yesUp: false, // 是否已到了上拉加载的高度
loadingDownShow: false, // 是否处于刷新中状态
loadingUpShow: false, // 是否属于加载中状态
loadingDirection:'',//true 为下拉,false为上拉
loadingEnd:false,//
options: {
backgroundColor: '#f5f5f5', // 背景颜色
fontColor: '#888888', // 文字颜色
beyondHeight: 50, // 超过此长度后触发下拉或上拉,单位px
pulldownInfo: '下拉刷新',
pulldownReadyInfo: '松开刷新',
pulldowningInfo: '刷新中…',
pulldownEnd:"刷新完成",
pullupInfo: '上拉加载',
pullupReadyInfo: '松开加载',
pullupingInfo: '加载中…',
pullupEnd:"没有新的数据了…",
},
boxHeight: 0,
dataEnd:false,
backTopFlag:false,
};
this.myScroll = null;
this.timerRefresh = null; // 刷新iscroll的延时timer
this.iscrollTimer = null; // 检测高度变化的timer
this.elementToTarget = this.elementToTarget.bind(this);
}
componentDidMount() {
console.log('------componentDidMount-------------')
let options = {
mouseWheel: true, //鼠标事件
click: true,//点击事件
probeType: 3,
fadeScrollbars:false,
scrollbars: false,
//shrinkScrollbars: 'clip',//根据滚动缩放大小
//fadeScrollbars: true,//滚动条淡入淡出
//interactiveScrollbars:true,//滚动条能拖动
//bounce:true,//滚动边缘反弹
}
// this.myScroll = new IScroll('#wrapper',options);
let id = this.props.id + "_wrapper_scroller";
this.myScroll = new IScroll("#"+id, Object.assign({}, options, this.props.iscrollOptions));
this.myScroll.on('scroll', () => {
const myScroll = this.myScroll;
if (myScroll.y >0 && myScroll.y < this.state.options.beyondHeight) {
this.setState({
loadingDownShow: false,
loadingUpShow: false,
});
}else if (myScroll.y > this.state.options.beyondHeight) {
this.setState({
loadingDirection:'down',
loadingDownShow: true,
loadingUpShow: false,
});
}else if (myScroll.y < -(this.state.options.beyondHeight)) {
this.setState({
loadingDirection:'down',
});
}else if (myScroll.y < myScroll.maxScrollY - this.state.options.beyondHeight) {
this.setState({
loadingDirection:'up',
loadingDownShow: false,
loadingUpShow: true,
});
}
});
this.myScroll.on('scrollStart', () => {
window.top.addEventListener('mouseup', this.onMouseUpListener, false);
window.top.addEventListener('touchend', this.onMouseUpListener, false);
});
this.myScroll.on('scrollEnd', () => {
const myScroll = this.myScroll;
if (myScroll.y > -100) {
this.setState({
backTopFlag:false
});
}else if (myScroll.y < -100) {
this.setState({
backTopFlag:true
});
}
});
this.setState({
data: this.props.children,
options: Object.assign({}, this.state.options, this.props.options),
});
let scrollDom = document.getElementById(id);
scrollDom.addEventListener('touchmove', function (e) { e.preventDefault(); }, { passive: false });
//绑定父组件得方法
if(this.props.onRef){
this.props.onRef(this)
}
}
/** children内容改变时触发,表示已完成了刷新或加载 **/
static getDerivedStateFromProps(nextP, prevState) {
if (nextP.children != prevState.data) {
console.log('------getDerivedStateFromProps--------更新-----')
return {
data: nextP.children,
loadingDownShow: false,
loadingUpShow: false,
dataEnd: nextP.dataEnd ? true : false,
};
}
return null;
}
componentDidUpdate(prevP, prevS){
if(prevS.data !== this.state.data || prevP.hasDown !== this.props.hasDown || prevP.hasUp !== this.props.hasUp) {
console.log('------componentDidUpdate--------onRefresh-----')
// if(this.state.loadingDirection == 'down'){
// this.myScroll.scrollTo(0, this.myScroll.y);
// }
this.onRefresh();
}
}
/** 组件即将销毁时触发,销毁当前iscroll实例 **/
componentWillUnmount() {
console.log('------componentWillUnmount--------destroy-----')
//window.clearTimeout(this.iscrollTimer);
this.myScroll.destroy();
}
/** 刷新ISCROLL **/
onRefresh() {
const myScroll = this.myScroll;
window.clearTimeout(this.timerRefresh);
this.timerRefresh = window.setTimeout(() => {
myScroll.refresh();
}, 200);
}
//锚点跳转
elementToTarget(target){
this.myScroll.scrollToElement(document.querySelector("#"+target))
}
onMouseUpListener = () => {
const t = this;
let maxScrollY = t.myScroll.maxScrollY;
window.top.removeEventListener('mouseup', t.onMouseUpListener, false);
window.top.removeEventListener('touchend', t.onMouseUpListener, false);
// 如果滑动距离超过了设定界限并且当前没在下拉中,就触发下拉
if(t.myScroll.y >= t.state.options.beyondHeight) {
if(t.props.hasDown && t.props.onPullDownLoadMore) {
//t.myScroll.scrollTo(0, t.myScroll.y);
if (t.props.onPullDownLoadMore) {
this.props.onPullDownLoadMore();//加载新的数据
}
}
} else if (t.myScroll.y < t.myScroll.maxScrollY - t.state.options.beyondHeight) {
console.log('---onMouseUpListener------->>>>',t.myScroll.y,t.myScroll.maxScrollY,t.props.dataEnd,t.state.dataEnd)
if(t.props.hasUp && t.props.onPullUpLoadMore) {
if (t.props.onPullUpLoadMore) {
this.props.onPullUpLoadMore();//加载新的数据
}
}
}
};
render() {
let {data,backTopFlag} = this.state;
let id = this.props.id + "_wrapper_scroller";
return (
<div id={id} className={styles.wrapper_scroller} >
<div className={styles.scroller}>
<div className={styles.scroller_pullDown} style={{ display: !this.props.hasDown ? 'none' : 'inline-block' }}>
{
this.state.loadingDownShow ? (
<div className={styles.loadingSection}>
<img src={require('./assets/loading.gif')} />
<span className = {styles.msg} style={{ color: this.state.options.fontColor, display: 'inline-block' }}>
{this.state.options.pulldowningInfo}
</span>
</div>
) : (
<div>
<span className = {styles.msg} style={{ color: this.state.options.fontColor, display: 'inline-block' }}>
{this.state.options.pulldownInfo}
</span>
</div>
)
}
</div>
<div>
{this.props.children}
</div>
<div className={styles.scroller_pullUp} style={{ display: !this.props.hasUp ? 'none' : 'inline-block' }}>
{this.state.backTopFlag &&(
!this.state.dataEnd ? (
<div className={styles.loadingSection}>
<img src={require('./assets/loading.gif')} />
<span className = {styles.msg} style={{ color: this.state.options.fontColor, display: 'inline-block' }}>
{this.state.options.pullupingInfo}
</span>
</div>
) : (
<div className={styles.loadingSection}>
<span className = {styles.msg} style={{ color: this.state.options.fontColor, display: !this.props.hasUp ? 'none' : 'inline-block' }}>
{this.props.finishStr || this.state.options.pullupEnd}
</span>
</div>
)
)
}
</div>
</div>
{this.props.haveBackTop && (
<div style={{ display: backTopFlag ? 'block' : 'none'}} className={styles.backTopSection} onClick={()=>{this.myScroll.scrollTo(0,0,600)}}>
<img src={require("../../assets/image/backTop.png")} />
</div>
)}
</div>
);
}
}
export default Home;
/**
*
id: PropTypes.string, // id
children: PropTypes.object, // 数据
options: PropTypes.object, // 自定义参数
iscrollOptions: PropTypes.object, // iscroll原生参数
detectionHeight: PropTypes.bool, // 是否不停的检测高度变化
className: PropTypes.string, // 额外的class
onPullDownLoadMore: PropTypes.func, // 下拉刷新
onPullUpLoadMore: PropTypes.func, // 上拉加载更多
hasDown:PropTypes.bool,// 是否有下拉加载
hasUp:PropTypes.bool,// 是否有上拉加载更多
noDownStr:PropTypes.string,// 加载完提示
noUpStr:PropTypes.string,// 刷新完提示
finishStr:PropTypes.string,// 加载完成提示语
haveBackTop:PropTypes.bool,// 是否又返回顶部按钮
*
**/
\ No newline at end of file
import React from "react";
export default class NoData extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
const haveNoData={
position: 'absolute',
top: '50%',
left: '50%',
textAlign: 'center',
transform: 'translate(-50%, -50%)'
}
const img={
width:'1.51rem',
}
const text={
textAlign: 'center',
fontSize: '.15rem',
color: '#666666',
marginTop:'20px'
}
return (
<div style={haveNoData}>
<img style={img} src={require('../../assets/image/clientless.png')} alt="" />
<div style={text}>{this.state.infoText || "当前暂无数据"}</div>
</div>
);
}
}
.choose{
width: 1.5rem; height: .3rem;
border: 1px solid #F0F0F1;
font-size: .15rem;
border-radius: .04rem;
text-align: left; padding-left:.1rem;
color:#999; box-sizing: border-box;
}
.choose:after{
float:right;
width: .12rem; height: .1rem;
margin-top: .11rem; margin-right: .1rem;
background: url('../../assets/image/icon_arrowDown.png') no-repeat;
content:''; background-size: 100%;
}
.choose>span{
float: none;
color:#000;
font-size: .15rem;
line-height: .3rem;
}
\ No newline at end of file
import React, { Component } from 'react'
import { Picker} from 'antd-mobile';
import styles from './SelectPicker.css';
import {getPlanInListWithCode} from '../../utils/dataFilter'
class SelectPicker extends Component {
constructor(props) {
console.log('---------constructor------->',props)
super(props);
this.state = {
List: props.List,
value: props.value || 0,
selectIndex:0
}
}
componentWillReceiveProps(nextProps){
console.log('---------SelectPicker--------componentWillReceiveProps------------nextProps------->',nextProps)
if(nextProps.List != this.state.List){
this.setState({
List:nextProps.List,
})
}
}
render() {
const { List,value,selectIndex} = this.state;
let len = List.length;
let value2 = value;
console.log('---------SelectPicker--------value2------->',value2,List,getPlanInListWithCode('value',value2,List).label)
let labelText = '';
if(value2 == 0 || value2){
labelText = getPlanInListWithCode('value',value2,List).label;
}else{
value2 = len-1;
labelText = List[len-1].label;
}
if(!getPlanInListWithCode('value',value2,List).label){
value2 = len-1;
labelText = List[len-1].label;
}
console.log('---------SelectPicker--------2222222----->',value2,labelText)
return (
<Picker
data={List}
cols={1}
value={[value2]}
onChange={
v => {
this.setState({
value: List[v[0]].value,
label:List[v[0]].label,
selectIndex:v[0],
});
console.log('-------Picker----onchange------>',v)
this.props.selectChange(List[Number(v[0])])
}
}
>
<div className={styles.choose} ><span>{labelText}</span></div>
</Picker>
)
}
}
export default SelectPicker
import {GetBusinessCardInfo,UpdateBusinessCardInfo,GetCardBackgroundTmpsList,AddOrUpdateCardBackground,DeleteCardBackgroud} from '../services/businessCard';
export default {
namespace: 'BusinessCard',
state: {
CardBackgroundList: {},
cardAllInfo:{},//名片所有信息
},
effects: {
*GetBusinessCardInfo({ payload, callback, error }, { call, put }) {
const { data } = yield call(GetBusinessCardInfo, payload);
if (data.userInfo) {
if (callback) callback(data.userInfo);
yield put({ type: 'updateCardAllInfo' ,payload:{item:data}});
} else {
error && error("没有查出下相应数据")
}
},
*UpdateBusinessCardInfo({ payload, callback, error }, { call, put }) {
const { data } = yield call(UpdateBusinessCardInfo, payload);
if (data.status === true) {
if (callback) callback(data.data);
} else {
error && error(data)
}
},
*GetCardBackgroundTmpsList({ payload, callback, error }, { call, put }) {
const { data } = yield call(GetCardBackgroundTmpsList, payload);
if (data.status === true) {
if (callback) callback(data.data);
} else {
error && error(data)
}
},
*AddOrUpdateCardBackground({ payload, callback, error }, { call, put }) {
const { data } = yield call(AddOrUpdateCardBackground, payload);
if (data.status === true) {
if (callback) callback(data.data);
} else {
error && error(data)
}
},
*DeleteCardBackgroud({ payload, callback, error }, { call, put }) {
const { data } = yield call(DeleteCardBackgroud, payload);
if (data.status === true) {
if (callback) callback(data.data);
} else {
error && error(data)
}
}
},
reducers: {
updateCardAllInfo(state, { payload }) {
return { ...state, cardAllInfo: payload.item };
},
},
subscriptions: {
},
};
import { addEdit, GetInvitationTmpsList, GetMyInvitList, del, GetInvitListById } from '../services/Invitation';
export default {
namespace: 'Invitation',
state: {
item: {},
},
effects: {
*GetInvitationTmpsList({ payload, callback, error }, { call, put }) {
const { data } = yield call(GetInvitationTmpsList, payload);
if (data.status === true) {
if (callback) callback(data.data);
} else {
error && error(data)
}
},
*GetMyInvitList({ payload, callback, error }, { call, put }) {
const { data } = yield call(GetMyInvitList, payload);
if (data.status === true) {
if (callback) callback(data.data);
} else {
error && error(data)
}
},
*GetInvitListById({ payload, callback, error }, { call, put }) {
const { data } = yield call(GetInvitListById, payload);
if (data.status === true) {
if (callback) callback(data.data);
} else {
error && error(data)
}
},
*addEdit({ payload, callback ,error}, { call, put }) {
const { data } = yield call(addEdit, payload);
if (data.status === true) {
if (callback) callback(data);
} else {
error && error(data)
}
},
*del({ payload, callback, error }, { call, put }) {
const { data } = yield call(del, payload);
if (data.status === true) {
if (callback) callback(data);
} else {
error && error(data)
}
}
},
reducers: {
// saveUser(state, { payload }) {
// return { ...state, item: payload };
// },
},
subscriptions: {
},
};
import {getAllQuestionList,getQuestionInfo,AddQuestion,addAnswer,DeleteQuestion,DeleteAnswer,getLoginUserInfo,getAnswerOfAnswerInfo,updateClickNum} from '../services/exchangeCommunity';
export default {
namespace: 'exchangeCommunity',
state: {
allQuestionList: [],//所有的问题
},
effects: {
*getLoginUserInfo({ payload, callback, error }, { call, put }) {
const { data } = yield call(getLoginUserInfo, payload);
if (data.data) {
if (callback) callback(data.data);
} else {
error && error("没有查出下相应数据")
}
},
*getAllQuestionList({ payload, callback, error }, { call, put }) {
const { data } = yield call(getAllQuestionList, payload);
if(data.status){
if (callback) callback(data);
// yield put({ type: 'updateallQuestionList' ,payload:{item:data.data}});
}else{
error && error(data.message)
}
},
*getQuestionInfo({ payload, callback, error }, { call, put }) {
const { data } = yield call(getQuestionInfo, payload);
if (data.status === true) {
if (callback) callback(data.data);
} else {
error && error(data)
}
},
*getAnswerOfAnswerInfo({ payload, callback, error }, { call, put }) {
const { data } = yield call(getAnswerOfAnswerInfo, payload);
if (data.data) {
if (callback) callback(data.data);
} else {
error && error("没有查出下相应数据")
}
},
*AddQuestion({ payload, callback, error }, { call, put }) {
const { data } = yield call(AddQuestion, payload);
if (data.status === true) {
if (callback) callback(data.data);
} else {
error && error(data)
}
},
*addAnswer({ payload, callback, error }, { call, put }) {
const { data } = yield call(addAnswer, payload);
if (data.status === true) {
if (callback) callback(data.data);
} else {
error && error(data)
}
},
*DeleteQuestion({ payload, callback, error }, { call, put }) {
const { data } = yield call(DeleteQuestion, payload);
if (data.status === true) {
if (callback) callback(data.data);
} else {
error && error(data)
}
},
*DeleteAnswer({ payload, callback, error }, { call, put }) {
const { data } = yield call(DeleteAnswer, payload);
if (data.status === true) {
if (callback) callback(data.data);
} else {
error && error(data)
}
},
*updateClickNum({ payload, callback, error }, { call, put }) {
const { data } = yield call(updateClickNum, payload);
if (data.status === true) {
if (callback) callback(data.data);
} else {
error && error(data)
}
}
},
reducers: {
updateCardAllInfo(state, { payload }) {
return { ...state, updateallQuestionList: payload.item };
},
},
subscriptions: {
},
};
import { getNewsList, getNews } from '../services/industrynews';
export default {
namespace: 'industrynews',
state: {
item: {},
},
effects: {
*getNewsList({ payload, callback, error }, { call, put }) {
const { data } = yield call(getNewsList, payload);
if (data.status === true) {
if (callback) callback(data.data);
} else {
error && error(data)
}
},
*getNews({ payload, callback, error }, { call, put }) {
const { data } = yield call(getNews, payload);
if (data.status === true) {
if (callback) callback(data.data);
} else {
error && error(data)
}
}
},
reducers: {
// saveUser(state, { payload }) {
// return { ...state, item: payload };
// },
},
subscriptions: {
},
};
import {GetInfoList, GetInformationsList, GetSubInfoList} from '../services/infoCenter';
export default {
namespace: 'infoCenter',
state: {
item: {},
},
effects: {
*GetInfoList({ payload, callback, error }, { call, put }) {
const { data } = yield call(GetInfoList, payload);
if (data.status === true) {
if (callback) callback(data.data);
} else {
error && error(data)
}
},
*GetSubInfoList({ payload, callback, error }, { call, put }) {
const { data } = yield call(GetSubInfoList, payload);
if (data.status === true) {
if (callback) callback(data.data);
} else {
error && error(data)
}
},
*GetInformationsList({ payload, callback, error }, { call, put }) {
const { data } = yield call(GetInformationsList, payload);
if (data.status === true) {
if (callback) callback(data.data);
} else {
error && error(data)
}
}
},
reducers: {
// saveUser(state, { payload }) {
// return { ...state, item: payload };
// },
},
subscriptions: {
},
};
import { notifyError } from '../services/app.js';
import { getPerformanceRank } from '../services/myCenter';
export default {
namespace: 'myCenter',
state: {
rerformanceRank:''
},
effects: {
/* 获取手机验证码 */
*getPerformanceRank({ payload, callback }, { call, put }) {
const { data } = yield call(getPerformanceRank, payload);
console.log(payload);
yield put({
type: 'savePhone',
payload: payload,
});
if (data.status === true) {
if (callback) callback(data);
} else {
notifyError(data.message);
}
}
},
reducers: {
},
subscriptions: {
},
};
import React, { Component } from 'react';
import { connect } from 'dva';
import { Tabs,Toast } from 'antd-mobile';
import shareHide from "../../utils/shareHide";
import css from './css.less';
class Background extends Component{
constructor(props) {
super(props);
this.state = {
templatesList:[],
backgroudTemp:{},//选中的背景
current:0,
loadingFlag:true,
}
}
componentDidMount() {
Toast.loading('loading...',0)
document.title = '选择背景';
let _this = this;
shareHide();
let cardInfo = JSON.parse(sessionStorage.getItem("cardInfo"));
let backgroudId = cardInfo.cardBackground;//已选择的背景
//获取名片背景列表
this.props.dispatch({
type: 'BusinessCard/GetCardBackgroundTmpsList',
payload: {},
callback(res) {
let current = _this.state.current;
if(res && res.length>0){
for(let ii in res){
if(res[ii].id == backgroudId){
current = Number(ii);
break;
}
}
}
_this.setState({
templatesList:res || [],
current:current,
backgroudTemp:res[current],
loadingFlag:false
})
Toast.hide();
}
})
}
confirmOk = () => {
let _this = this;
let bgdid = this.state.backgroudTemp.id;
let cardInfo = JSON.parse(sessionStorage.getItem("cardInfo"));
let userId = cardInfo.id || JSON.parse(localStorage.getItem("id"));
this.props.dispatch({
type: 'BusinessCard/UpdateBusinessCardInfo',
payload: {
id:userId,
cardBackground:bgdid,
},
callback(res) {
_this.props.history.go(-1);
}
})
}
handleSelect = (index,item)=>{
this.setState({
current:index,
backgroudTemp:item
})
}
render() {
let {templatesList,current} = this.state;
if(this.state.loadingFlag){
return <div></div>
}
return (
<div className={css.bgdtemplate}>
{
templatesList.length>0 ? (
<div>
<div className={css.bgdSection}>
{
templatesList.map((item,index)=>{
return(
<div className={css.bgdItem} key={item.id} onClick={()=>{this.handleSelect(index,item)}}>
<img className={css.bgdImg} src={item.backgroundPath} alt="" />
{current === index ? <img className={css.selected} src={require("../../assets/image/selected_white.png")} /> : ""}
</div>
)
})
}
</div>
<div className={css.footerBtn} onClick={()=>{this.confirmOk()}}>
<img src={require("../../assets/image/queding.png")} alt="" />
</div>
</div>
) : (
<div className={css.haveNoData}>
<img src={require('../../assets/image/clientless.png')} alt="" />
<div className={css.text}>暂无背景</div>
</div>
)
}
</div>
)
}
}
export default connect()(Background);
import React, { Component } from 'react';
import { connect } from 'dva';
import { InputItem,Toast} from 'antd-mobile';
import { Upload, Icon, message } from 'antd';
import shareHide from "../../utils/shareHide";
import {getCardName} from '../../utils/dataFilter'
import request from '../../utils/request'
import css from './css.less';
import styles from '../../routes/GovernorTraining/css.less'
function beforeUpload(file) {
const isJPG = (file.type === 'image/jpeg'||file.type === 'image/png');
if (!isJPG) {
message.error('只能上传jpg和png格式的图片!');
}
const isLt5M = file.size / 1024 / 1024 < 5;
if (!isLt5M) {
message.error('图片大小不能大于5MB!');
}
return isJPG && isLt5M;
}
class AddCardEditor extends Component{
constructor(props) {
super(props);
let cardInfo = JSON.parse(sessionStorage.getItem("cardInfo"));
this.state = {
cardInfo:cardInfo,
headUrl:cardInfo.headUrl || "",//头像
name: cardInfo.name || "",//名字
postName: getCardName(cardInfo.roleId) || "",//职位
Orgwork:cardInfo.orgName || "",//机构
phone:cardInfo.number || "",//手机号
qrcode: cardInfo.qrcode || "",//微信二维码
loading: false,//头像的
loading2: false,//二维码的
userId:cardInfo.id || JSON.parse(localStorage.getItem("id")),//用户ID
}
}
componentDidMount() {
document.title = '我的信息';
let _this = this;
shareHide();
}
componentWillUnmount(){
Toast.hide();
}
handleChange = info => {
if (info.file.status === 'uploading') {
this.setState({ loading: true });
return;
}
if (info.file.status === 'done') {
this.setState({
loading: false,
})
}
}
handleChange2 = info => {
if (info.file.status === 'uploading') {
this.setState({ loading2: true });
return;
}
if (info.file.status === 'done') {
this.setState({
loading2: false,
})
}
}
saveHandle=()=>{
let _this = this;
this.props.dispatch({
type: 'BusinessCard/UpdateBusinessCardInfo',
payload: {
"id":this.state.userId,
"qrcode":this.state.qrcode,
"headUrl":this.state.headUrl,
},
callback(res) {
//保存卡片数据
Toast.info("保存成功",2)
setTimeout(function(){
_this.props.history.go(-1);
},2000)
}
})
}
render() {
let {fileList,qrcode,headUrl} = this.state;
const uploadButton2 = (
<div className={css.qrcodeSection}>
<div className={css.text}>
{this.state.loading2 ? <Icon type="loading" /> : <div style={{fontSize:".24rem"}}>+</div>}
</div>
</div>
);
const uploadButton = (
this.state.loading ? <Icon type="loading" /> : <img src={require("../../assets/image/defaultHead.png")} alt="avatar" />
);
const propsUpload1 = {
listType:"picture-card",
className:"avatar-uploader",
showUploadList:false,
beforeUpload:beforeUpload,
customRequest:(files)=>{
let file = files.file;
let fileType = file.name.substring(file.name.lastIndexOf('.') + 1);
let userId = this.state.userId;
let formData = new FormData();
formData.append('file', file);
formData.append('fileType', "head");
formData.append('functionType', 'businessCard');
formData.append('userId', userId);
request(`/o2o/ai/fileUpload`, {
method: 'POST',
body: formData
}).then((res) => {
if (res.data.status) {
this.setState({
headUrl:res.data.data.fileAddress,
loading: false,
})
}
})
},
onChange:this.handleChange
};
const propsUpload2 = {
listType:"picture-card",
className:"avatar-uploader",
showUploadList:false,
beforeUpload:beforeUpload,
customRequest:(files)=>{
let file = files.file;
let fileType = file.name.substring(file.name.lastIndexOf('.') + 1);
let userId = this.state.userId;
let formData = new FormData();
formData.append('file', file);
formData.append('fileType', "QRcode");
formData.append('functionType', 'businessCard');
formData.append('userId', userId);
request(`/o2o/ai/fileUpload`, {
method: 'POST',
body: formData
}).then((res) => {
if (res.data.status) {
this.setState({
qrcode:res.data.data.fileAddress,
loading2: false,
})
}
})
},
onChange:this.handleChange2
};
return (
<div className={css.businessCardEditWrap} style={{ background: '#fff' }}>
<div className={styles.ac_wrap}>
<div id="scrollSection">
<ul>
<li className={css.headsection}>
<label className={css.headText}>头像</label>
<div className={css.uploadHeadImg}>
<Upload {...propsUpload1}>
{headUrl ? (this.state.loading ? <Icon type="loading" /> : <img src={headUrl} alt="avatar" /> ) : uploadButton }
</Upload>
</div>
</li>
<li className={styles.require}>
<InputItem
type="text"
disabled={true}
value={this.state.name}
placeholder = {this.state.disabled?'':"请输入姓名"}
>姓名</InputItem>
</li>
<li className={styles.require}>
<InputItem
type="text"
disabled={true}
value={this.state.postName}
>职务</InputItem>
</li>
<li className={styles.require}>
<InputItem
type="text"
disabled={true}
value={this.state.Orgwork}
>机构</InputItem>
</li>
<li className={styles.require}>
<InputItem
type="text"
disabled={true}
value={this.state.phone}
>手机号</InputItem>
</li>
<div className={css.QRcode}>
<div className={css.codeText}>上传二维码</div>
<div className={css.code}>
<Upload {...propsUpload2}>
{qrcode ? (this.state.loading2 ? <Icon type="loading" /> : <img src={qrcode} alt="avatar" /> ) : uploadButton2 }
</Upload>
</div>
</div>
<div className={css.saveBtn} onClick={()=>{this.saveHandle()}}>
<img src={require("../../assets/image/baocun.png")} alt="" />
</div>
</ul>
</div>
</div>
</div>
)
}
}
export default connect(({BusinessCard})=>({BusinessCard}))(AddCardEditor);
.businessCardWrap{
position: relative;
width:100%;
height:100%;
background:#F5F5F5;
overflow-x: hidden;
overflow-y: auto;
.session_top{
background:#F5F5F5;
height:2.2rem;
.changebgd{
position: absolute;
right: 0;
top: .23rem;
padding: 2px 5px;
background-color: rgba(143, 143, 143, 0.28);
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
color: #fff;
}
img{
height:100%;
width:100%;
}
}
.section_card{
height:2rem;
position: absolute;
width: 100%;
margin-top:-1.5rem;
padding: 0 .23rem;
z-index: 2;
.card{
width:100%;
height:100%;
background:url("../../assets/image/businessCardbgd.png");
padding:.253rem;
background-repeat: no-repeat;
background-size: cover;
.card_header{
display:flex;
img{
width: .77rem;
height: .77rem;
border-radius: .38rem;
}
.card_header_name{
margin-left: .22rem;
}
.card_header_name1{
font-size: .253rem;
font-weight: bold;
margin-top: .1rem;
}
}
.card_footer{
display: flex;
position: relative;
top: .3rem;
justify-content: space-between;
color: #000;
img{
width:.12rem;
margin-right:.08rem;
margin-bottom: 5px;
}
a{
color:#000;
}
}
}
}
.section_mid{
min-height: 2.5rem;
position: relative;
padding: .23rem;
margin: 0 auto;
text-align: center;
background:url("../../assets/image/businessBackground.png");
width:100%;
position: relative;
margin-top: -.26rem;
.content{
margin-top:.6rem;
img{
width: 2rem;
height: 2rem;
}
.weixintext{
margin:.15rem 0;
}
.qrcodeSection{
width: 2rem;
height: 2rem;
background: #fff;
position: relative;
text-align: center;
left: 50%;
transform: translate(-50%);
.text{
position: relative;
top: 50%;
transform: translateY(-50%);
color:#DEDEDE;
img{
width:.6rem !important;
height:.6rem !important;
}
}
}
}
}
.section_bottom{
background:white;
min-height: 1.694rem;
padding: 0 .11rem;
margin-bottom:0.92rem;
.headertext{
color:#999999;
font-size:.176rem;
padding: .16rem 0;
}
.plansection{
display:flex;
flex-wrap: wrap;
.planitem{
margin:5px 0;
}
}
img{
width: .88rem;
height: .88rem;
margin: 0 .05rem;
}
}
.section_footer{
position:fixed;
width:100%;
bottom:0;
background:white;
height:0.74rem;
text-align: right;
padding: 10px 10px 0 0;
:global(.am-button-primary::before){
border: none;
}
.bianji_Btn{
margin-right:6px;
border: 1px solid #FF9D5C;
color: #FF9D5C;
}
.zhuanfa_Btn{
text-align: center;
color: white;
background-color: #FF9D5C;
font-size: 16px;
height: 45px;
line-height: 45px;
span{
margin:0
}
}
}
}
.bgdtemplate{
width:100%;
height:100%;
background: #fff;
overflow:auto;
position: relative;
.bgdSection{
display:flex;
flex-wrap:wrap;
margin: 10px 4px;
margin-bottom: 1.1rem;
.bgdItem{
position: relative;
width: 50%;
height: 1.1rem;
padding: 5px;
.bgdImg{
width:100%;
height:100%;
background-repeat: no-repeat;
}
.selected{
width: 24px;
height: 24px;
position: absolute;
right: .15rem;
top: .15rem;
}
}
}
.footerBtn{
width: 100%;
height: 0.957rem;
position: fixed;
bottom: 0;
background: #fff;
padding: 0 .11rem;
img{
width:100%;
//height:100%;
}
}
.haveNoData{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
img{
width:2rem;
height:2rem;
}
.text{
text-align: center;
font-size: .2rem;
margin-top: .1rem;
}
}
}
.businessCardEditWrap{
width:100%;
height:100%;
background:#F5F5F5;
overflow-x: hidden;
overflow-y: auto;
.headsection{
position:relative;
width: 100%;
background: white;
display: flex;
padding: 0 15px;
height: .7rem;
justify-content: space-between;
:global(.avatar-uploader > .ant-upload) {
width: .6rem;
height: .6rem;
}
:global(.ant-upload.ant-upload-select-picture-card) {
margin:0;
}
:global(.avatar-uploader) {
position: relative;
width: 100%;
height: 100%;
display: block;
}
.uploadHeadImg{
position: absolute;
right: 10px;
img{
width: .6rem;
height: .6rem;
border-radius: 50%;
}
}
.headText{
font-size: .15rem;
color: #000;
line-height: .6rem;
}
}
input{
text-align: right;
}
:global(.ant-upload.ant-upload-select-picture-card) {
border:none;
background: white;
}
:global(.am-list-item.am-input-disabled .am-input-label){
color:#000;
font-size: .15rem;
}
:global(.am-list-item.am-input-item) {
border-bottom: 1px solid #F8F8F8;
}
:global(.am-list-item .am-input-control input){
font-size: .15rem;
}
.QRcode{
position: relative;
padding: .15rem;
background: white;
:global(.avatar-uploader > .ant-upload) {
width: 1.5rem;
height: 1.5rem;
}
:global(.anticon) {
color: #FF9D5C;
}
.codeText{
font-size: .15rem;
color: #000;
height: .52rem;
line-height: .52rem;
}
.code{
img{
width: 1.5rem;
height: 1.5rem;
}
.qrcodeSection{
color: #FF9D5C;
background: #fff;
position: relative;
text-align: center;
border: 1px dashed #FF9D5C;
width: 100%;
height: 100%;
.text{
position: relative;
top: 50%;
transform: translateY(-50%);
}
}
}
}
.saveBtn{
padding: 15px;
img{
width: 100%;
}
}
.labelText{
color:#000;
}
}
\ No newline at end of file
import React, { Component } from 'react';
import { connect } from 'dva';
import { Button,Toast } from 'antd-mobile';
import { routerRedux } from 'dva/router';
import shareHide from "../../utils/shareHide";
import share from '../../utils/share';
import {getTargetList,getCardName,urlGetParams} from '../../utils/dataFilter'
import css from './css.less';
class Index extends Component{
constructor(props) {
super(props);
let url = window.location.href;
const params = urlGetParams(url);
this.state = {
urlParams:params || {},//url参数
cardInfo:{},
AllPlanList:[],//计划书列表
loadingFlag:true,
}
}
componentWillMount(){
Toast.loading('loading...',0);
}
componentDidMount() {
document.title = '名片';
sessionStorage.clear();
let _this = this;
let urlParams = this.state.urlParams;
//获取名片的信息
this.props.dispatch({
type: 'BusinessCard/GetBusinessCardInfo',
payload: {
"phoneNum":urlParams.number
},
callback(res) {
_this.setState({
cardInfo:res,
loadingFlag : false,
})
//保存卡片数据
sessionStorage.setItem("cardInfo", JSON.stringify(res))
//添加分享功能
let urlShare = "";
if(urlParams.isShare){//处理多次转发参数问题
urlShare = window.location.href;
}else{
urlShare = window.location.href+'&isShare=true';
}
share({
decodeUrl: window.location.href.split('#')[0],
title: `我是${res.name},您的保险管家`,
desc: '用我的专业为万千家庭带来保障',
shareUrl: urlShare,
thumbnail: res.headUrl || "https://iwpuat.ihxlife.com/defaultHead.png",
});
Toast.hide();
},
error(mes){
Toast.info(mes,2)
}
})
/* 计划书接口 */
this.props.dispatch({
type:'home/getPlanList',
payload:{
riskName:"",
riskStatus:1, //1启用
proId:urlParams.project,
website:urlParams.website,
orgId:urlParams.orgId,
},
callback(data){
_this.setState({
AllPlanList:data
})
}
})
shareHide(false);
}
componentWillUnmount() {
document.title = '';
}
changeBackground=()=>{
console.log('banckground')
this.props.history.push({ pathname: "/businessCard/cardBackground" });
}
editorCard=()=>{
console.log('banckground')
this.props.history.push({ pathname: "/businessCard/addEdit" });
// this.props.dispatch(routerRedux.push({
// pathname: '/businessCard/addEdit',
// query: {cardInfo: this.state.cardInfo}
// }));
}
shareCard=()=>{
console.log('banckground')
}
gaotoPlan =(item)=>{
let storage = window.localStorage;
storage.setItem("riskName",item.riskName)
storage.setItem("riskCode",item.riskCode)
storage.setItem("calculationMethod",item.calculationMethod)
storage.setItem("selectd",1)
storage.setItem("seriNo",'')
storage.setItem("recipients",false)
storage.setItem("riskIntroduce",item.riskIntroduce)
storage.setItem("thumbnail",item.thumbnail)
storage.setItem("recipientsName",'')
window.location.href = window.location.href.split('#')[0] + '#/addplaneditor?riskName=' + item.riskName + '&riskCode=' + item.riskCode + '&calculationMethod=' + item.calculationMethod + '&recipients=false&riskIntroduce=&thumbnail=' + item.thumbnail +'&recipientsName=&selectd=1&roleId='+localStorage.getItem("roleId") +'&Id='+ localStorage.getItem('id')+'&seriNo='
}
render() {
let {cardInfo,AllPlanList} = this.state;
let roleName = getCardName(cardInfo.roleId);
let hotPlanList = getTargetList("热门",AllPlanList);//热销计划书
let phonenumber = "tel:" + cardInfo.number;
console.log("render--------render----->>",hotPlanList)
if(this.state.loadingFlag){
return <div></div>
}
return (
<div className={css.businessCardWrap}>
<div className={css.session_top}>
{ this.state.urlParams.isShare != "true" && <div className={css.changebgd} onClick={()=>{this.changeBackground()}}>更换背景</div>}
<img src={cardInfo.cardBackgroundTem ? cardInfo.cardBackgroundTem : require("../../assets/image/businessbgd1.png")} alt="" />
</div>
<div>
</div>
<div className={css.section_card}>
<div className={css.card}>
<div className={css.card_header}>
<div>
<img src={cardInfo.headUrl ? cardInfo.headUrl : require("../../assets/image/defaultHead.png")} alt="" />
</div>
<div className={css.card_header_name}>
<div className={css.card_header_name1}>{cardInfo.name || "***"}</div>
<div>{roleName}</div>
</div>
</div>
<div className={css.card_footer}>
<div><img src={require("../../assets/image/wangdian.png")} alt="" />{cardInfo.orgName}</div>
<div><img src={require("../../assets/image/phoneNumber.png")} alt="" /><a href={phonenumber}>{cardInfo.number}</a></div>
</div>
</div>
</div>
<div className={css.section_mid}>
<div className={css.content}>
{cardInfo.qrcode ? <img src={cardInfo.qrcode ? cardInfo.qrcode : ""} alt="" /> : (
<div className={css.qrcodeSection}>
<div className={css.text}><img className={css.wechatimg} src={require("../../assets/image/wechat.png")} alt="" /><div>暂无二维码</div></div>
</div>
)}
<div className={css.weixintext}>扫一扫上面的二维码,加我微信</div>
</div>
</div>
<div className={css.section_bottom}>
<div className={css.headertext}>保险计划书</div>
<div className={css.plansection}>
{hotPlanList.length>0 && hotPlanList.map((item,idx)=>{
return (
<div key={item.seq} className={css.planitem} onClick={()=>{this.gaotoPlan(item)}}>
<img src={item.thumbnail} alt="" />
</div>
)
})}
</div>
</div>
{this.state.urlParams.isShare != "true" && (
<div className={css.section_footer}>
<Button className={css.zhuanfa_Btn} inline onClick={()=>{this.editorCard()}}>编辑名片</Button>
</div>
)}
</div>
)
}
}
export default connect(({home})=>({home}))(Index)
.exchangeCommunityWrap{
height: 100%;
overflow-y: auto;
overflow-x: hidden;
:global(.am-tabs-tab-bar-wrap){
height: .6rem;
}
:global(.am-tabs-default-bar-tab){
padding:0; font-size: .17rem; color:#ABABAB;
&:after{ display:none !important;}
}
:global(.am-tabs-default-bar-tab-active){
color:#101010; font-size: .17rem;
}
:global(.am-tabs-default-bar-underline){
border-color:#FF9D5C; border-width: .02rem;
}
.splitline {
width: 100%;
height: .1rem;
background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(255, 255, 255, 0) 100%);
opacity: 0.1041;
}
.header_section{
background: #fff;
height: 1rem;
padding: 5px 10px;
:global(.am-search){
background-color: #fff;
}
:global(.am-search-input){
background-color: #efeff4;
}
.questionText{
margin: 5px;
color:#101010;
.questionNum{
color:#bbb;
}
}
}
.addquestion_section{
position: relative;
background-color: #fff;
padding: 10px;
:global(.am-button-primary::before){
border: none;
}
.addquestion_text{
}
.addquestion_img{
padding: 10px 0;
:global(.am-image-picker-list .am-image-picker-upload-btn){
background:url("../../assets/image/camera.png");
background-repeat: no-repeat;
border:none;
background-size: cover;
background-position-x: -8px;
}
}
.addquestion_btn{
//margin-right: 6px;
float: right;
position: absolute;
bottom: 5px;
right: 5px;
text-align: center;
background-color: #FF9D5C;
border-radius: 18px;
color: white;
border: none;
padding: 5px 12px;
}
}
.questionList{
position: relative;
.scrollIOS{
-webkit-overflow-scrolling: touch;
}
.questionItem{
background-color: #fff;
margin: 10px 0;
padding: 10px 15px;
.question_Content{
font-size: .2rem;
color: #333333;
margin: 10px 0;
}
.question_img{
display: flex;
flex-wrap: wrap;
img{
width:1.2rem;
height:1.2rem;
margin-right:5px;
}
}
.question_userInfo{
height: .5rem;
line-height: .5rem;
margin: 5px 0;
&:after{
content:'';
height: 0;
clear:both;
}
.img_esction{
float:left;
img{
width: .44rem;
height: .44rem;
}
}
.name{
float:left;
margin: 0 .11rem;
color:#999999;
}
.date{
float:right;
color:#999999;
}
}
.question_answer{
margin: 5px 0 10px 0;
.question_answer_list{
display:flex;
.question_answer_name{
color: #101010;
}
.question_answer_text{
width: 80%;
color:#666666;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
.question_footer{
display: flex;
justify-content: space-between;
.question_num{
color:#FF5167
}
}
.question_no_answer{
display:none;
height: 0;
position: relative;
width: 100%;
opacity: 0;
background: #fff;
}
.question_add_answer{
//height:1rem;
display:block;
}
.addquestion_btn2{
.btn{
text-align: center;
background-color: #FF9D5C;
border-radius: 18px;
color: white;
border: none;
padding: 5px 12px;
}
}
:global(.am-list-item){
border: 1px solid gainsboro;
margin: 5px 0;
}
}
}
.search {
position: relative;
display: flex;
padding: .1rem .17rem;
background: white;
::before {
position: absolute;
width: .15rem;
height: .15rem;
content: '';
background: url(../../assets/image/search.png) no-repeat;
background-size: 100%;
left: .35rem;
top: .19rem;
z-index: 10;
}
input{
box-sizing: border-box;
width: 100%;
border: none;
border-radius: .16rem;
background: #F4F4F4;
height: .32rem;
line-height: .32rem;
padding: 0;
padding-left: .42rem;
font-size: .14rem;
}
.cancelButton{
font-size: .16rem;
color: #101010;
width: .5rem;
padding: .05rem 0 0 .05rem;
}
}
}
.questionDetailWrap{
padding: 10px;
background: #fff;
margin-bottom:1.2rem;
.question_answer_Item{
background-color: #fff;
border-bottom:1px solid #F8F8F8;
padding: 5px 0;
.usersection{
img{
width: .44rem;
height: .44rem;
}
.name{
margin:0 .11rem;
color:#101010;
}
}
.answersection{
color:#666666;
}
.answerfooter{
display: flex;
justify-content: space-between;
color:#FF5167;
.date{
color:#999999;
}
}
.question_no_answer{
display:none;
height: 0;
position: relative;
width: 100%;
opacity: 0;
background: #fff;
}
.question_add_answer{
display:block;
}
.addquestion_btn2{
.btn{
text-align: center;
background-color: #FF9D5C;
border-radius: 18px;
color: white;
border: none;
padding: 5px 12px;
}
}
:global(.am-list-item){
border: 1px solid gainsboro;
margin: 5px 0;
}
}
}
.answerFooterSection{
position: absolute;
display:flex;
bottom: 0;
width: 100%;
background: white;
padding: .1rem;
height: .7rem;
//line-height: .7rem;
align-items: center;
text-align: center;
z-index: 5;
:global(.am-textarea-control){
padding-top: 4px;
padding-bottom: 4px;
}
:global(.am-button::before){
border: none;
}
:global(.am-list-item){
border-radius: 22px;
background-color: #F4F4F4;
min-height: 36px;
}
:global(.am-textarea-control){
padding-left: .1rem;
}
.btntijiao{
width: 0.8rem;
padding-left: 5px;
.btn{
text-align: center;
background-color: #FF9D5C;
border-radius: 18px;
color: white;
border: none;
padding: 5px 12px;
}
}
}
.haveNoData{
position: relative;
top: 0;
left: 0;
margin: 50% 0 0 50%;
transform: translate(-50%,-50%);
img{
width:2rem;
height:2rem;
}
.text{
text-align: center;
font-size: .2rem;
margin-top: .1rem;
}
}
.modalImg{
position: fixed;
height: 100%;
width: 100%;
top: 0;
z-index: 10;
background: #101010a1;
padding: 15px;
.modalSection{
background: white;
height: 100%;
border: 1px solid gray;
.close{
text-align: right;
font-size: 18px;
margin-right: 10px;
}
.imgsection{
position: relative;
top: 0;
left: 0;
width: 100%;
height: 92%;
display: flex;
align-items: center;
overflow-y: auto;
.imgPreview{
width: 100%;
//height: 100%;
}
}
}
}
import React, { Component } from 'react';
import { connect } from 'dva';
import { Tabs, Toast ,SearchBar,InputItem,TextareaItem,Button} from 'antd-mobile';
import { Icon, Modal } from 'antd';
import shareHide from "../../utils/shareHide";
import {GetLength} from '../../utils/dataFilter';
import Iscroll from "../../components/Iscroll";
import css from './css.less';
class Index extends Component{
constructor(props) {
super(props);
let questionInfo = JSON.parse(sessionStorage.getItem("questionDetail"));
let currentUserInfo = JSON.parse(sessionStorage.getItem("currentUserInfo"));
this.state = {
questionInfo:questionInfo || null,//问题数据
currentUserInfo:currentUserInfo,//当前用户
questionAnswerList:[],
textarea:"",
textarea2:"",
weixinId:"25",//当前用户的微信ID
publicId:"18",//当前用户的公众号ID
answerCurrent:null,//当前回复的那一条回答
answerFlag : false,
previewImage:'',//图片预览
previewVisible: false,
}
}
componentDidMount() {
document.title = '问题详情';
shareHide();
this.getQuestionInfo();
}
blur =()=>{
setTimeout(function(){
// alert(1);
if(document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA'){
return
}
let result = 'pc';
if(/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { //判断iPhone|iPad|iPod|iOS
result = 'ios'
}else if(/(Android)/i.test(navigator.userAgent)) { //判断Android
result = 'android'
}
if( result = 'ios' ){
document.querySelector('body').scrollIntoView();
}
},10)
}
handlePreview = async url => {
this.setState({
previewImage: url,
previewVisible: true,
});
};
handleCancel = () => {
this.setState({ previewVisible: false });
};
getQuestionInfo(){
let _this = this;
let questionInfo = this.state.questionInfo;
this.props.dispatch({
type: 'exchangeCommunity/getQuestionInfo',
payload: {
"id": questionInfo.id,
},
callback(res) {
_this.setState({
questionAnswerList:res.discussList,
answerCurrent:null,
textarea:'',
textarea2:'',
})
}
})
}
addAnswerChange = (value)=>{
this.setState({textarea:value})
}
addAnswerChange2 = (value)=>{
this.setState({textarea2:value})
}
//点击回复消息按钮
addAnswerClick1=(index)=>{
console.log('click-->',index,this.state.answerFlag)
let answerFlag = this.state.answerFlag
if(index == this.state.answerCurrent){
answerFlag = !answerFlag;
}else{
answerFlag = true;
}
this.setState({
answerCurrent:index,
answerFlag:answerFlag,
textarea2:''
})
}
//提交回答按钮
addAnswerHandle=(key,itm)=>{
let _this = this;
let answer = this.state.textarea;//评论的内容;
let answer2 = this.state.textarea2;//评论回答的内容;
let questionInfo = this.state.questionInfo;
console.log('addAnswerHandle-----',answer);
if(key=='question'){
if(answer==""){
return Toast.info("评论内容不能为空",2)
}
if(GetLength(answer)>200){
Toast.info("评论字数不能大于100个",2)
return;
}
}
if(key == 'answer'){
if(answer2==""){
return Toast.info("回复内容不能为空",2)
}
if(GetLength(answer2)>200){
Toast.info("回复字数不能大于100个",2)
return;
}
}
let params = {
initAnswerId: questionInfo.id,
weixinId:this.state.currentUserInfo.openid,
weChatName: this.state.currentUserInfo.nickname,
weChatImage: this.state.currentUserInfo.headImgUrl,
}
if(key=="answer"){
params.answerId = itm.id;
params.beAnswered = itm.weixinName;
params.answer = answer2;
}else {
params.questionId = questionInfo.id;
params.beAnswered = questionInfo.weixinName;
params.answer = answer;
}
this.props.dispatch({
type: 'exchangeCommunity/addAnswer',
payload: params,
callback(res) {
Toast.info("提交成功",2);
//刷新一下页面数据
_this.getQuestionInfo();
},
error(mes){
Toast.info(mes.message,2);
}
})
}
_answerCompoent(item){
let answer = item.answer ? item.answer.replace(/(\r\n)|(\n)/g,'<br>') : item.answer;
return(
<div>回复<span style={{color:"#FF9D5C"}}>{item.beAnswered+':'}</span><span dangerouslySetInnerHTML = {{__html:answer}}></span></div>
)
}
_answerCompoent2(itm){
let answer = itm ? itm.replace(/(\r\n)|(\n)/g,'<br>') : itm;
return(
<span dangerouslySetInnerHTML = {{__html:answer}}></span>
)
}
//问题的回答部分组件
_answerContent(AnswerList,answerCurrent){
let _this = this;
if(AnswerList.length>0){
return AnswerList.map((item,index2)=>{
return (
<div className={css.question_answer_Item} key={item.id}>
<div className={css.usersection}>
<img src={item.weixinImageurl ? item.weixinImageurl : require("../../assets/image/myUser.png")}/>
<span className={css.name}>{item.weixinName}</span>
</div>
<div className={css.answersection}>
{item.beAnswered ? this._answerCompoent(item) : this._answerCompoent2(item.answer) }
</div>
<div className={css.answerfooter}>
<div className={css.date}>{item.createTime}</div>
<div onClick={()=>{this.addAnswerClick1(index2)}}><img style={{width: '.2rem'}} src={require("../../assets/image/addquestion.png")}/></div>
</div>
<div className={(answerCurrent == index2 && this.state.answerFlag) ? css.question_add_answer : css.question_no_answer}>
<TextareaItem
placeholder="请输入您的回答"
onBlur={::this.blur}
rows={2}
value={this.state.textarea2}
onChange={this.addAnswerChange2}
/>
<div className={css.addquestion_btn2}>
<button className={css.btn} onClick={()=>{this.addAnswerHandle("answer",item)}}>提交</button>
</div>
</div>
</div>
)
})
}else{
return <div></div>
}
}
render() {
let {questionInfo,questionAnswerList,answerCurrent,previewImage,previewVisible} = this.state;
if(!questionInfo){
return <div></div>
}
return (
<div className={css.exchangeCommunityWrap}>
<Iscroll id="communityDetail"
iscrollOptions={{
probeType:2
}}
haveBackTop={true}>
<div>
<div className={css.questionList}>
<div className={css.questionItem}>
<div className={css.question_Content}>{questionInfo.question}</div>
<div className={css.question_img}>
{
questionInfo.questionImageList.length>0 && questionInfo.questionImageList.map((itm,index1)=>{
return <img key={itm.id} onClick={()=>{this.handlePreview(itm.imageUrl)}} src={itm.imageUrl}/>
})
}
</div>
<div className={css.question_userInfo}>
<div className={css.img_esction}><img src={questionInfo.weixinImageurl ? questionInfo.weixinImageurl : require("../../assets/image/myUser.png")}/></div>
<div className={css.name}>{questionInfo.weixinName || "***"}</div>
<div className={css.date}>{questionInfo.createTime}</div>
</div>
<div className={css.question_footer}>
<div><span className={css.question_num}>{questionAnswerList.length}</span>个回答</div>
</div>
</div>
<div style={previewVisible ? {display:'block'} : {display:'none'}}
className={css.modalImg}>
<div className={css.modalSection}>
<div className={css.close} onClick={this.handleCancel}>×</div>
<div className={css.imgsection}><img alt="" className={css.imgPreview} src={previewImage} /></div>
</div>
</div>
</div>
<div className={css.questionDetailWrap}>
{this._answerContent(questionAnswerList,answerCurrent)}
</div>
</div>
</Iscroll>
<div className={css.answerFooterSection}>
<div style={{width:"100%"}}>
<TextareaItem
placeholder="评论一下..."
onBlur={::this.blur}
value={this.state.textarea}
rows={1}
onChange={this.addAnswerChange}
/>
</div>
{/*<div className={css.btntijiao}><Button className={css.btn} activeStyle={false} size="small" inline onClick={()=>{this.addAnswerHandle("question")}}>提交</Button></div>*/}
<div className={css.btntijiao}><button className={css.btn} onClick={()=>{this.addAnswerHandle("question")}}>提交</button></div>
</div>
</div>
)
}
}
export default connect()(Index);
import React from 'react';
import { connect } from 'dva'
import { SearchBar, Button, Tabs ,List ,Toast} from 'antd-mobile';
import styles from './Home.css'
import shareHide from "../../utils/shareHide";
import NoData from "../../components/NoData";
import $ from 'jquery';
import { routerRedux } from 'dva/router';
const Item = List.Item;
const { TabPane } = Tabs;
const tabs = [
{ title: '全部', sub: '1' },
{ title: '资料库', sub: '2' },
{ title: '行业动态', sub: '3' },
];
class Index extends React.Component{
constructor(props) {
super(props);
this.state = {
searchValue: "",
allList:null,
currentTab:"1",//默认全部
inputType:'',
isFirst:true,
}
}
componentDidMount() {
document.title = '华夏O2O智慧工作平台';
shareHide();
let that= this;
let searchObj = sessionStorage.getItem("searchObj") ? JSON.parse(sessionStorage.getItem("searchObj")) : null;
if(searchObj){
this.setState({searchValue:searchObj.value,currentTab:searchObj.tab},()=>{
this.getAllData(searchObj.value,searchObj.tab);
})
}else {
this.getAllData("","1");
}
$('#inputElem').focus();
//监听手机键盘输入的内容,输入汉字还是其他的
$('#inputElem').on('compositionstart', function () {
that.setState({inputType:'字母'})
});
$('#inputElem').on('compositionend', function (e) {
that.setState({inputType:'汉字'})
that.getAllData(that.state.searchValue,that.state.currentTab);
});
}
componentWillUnmount(){
document.title= ''
$('#inputElem').off('compositionstart');
$('#inputElem').off('compositionend');
}
//获取查询的结果
getAllData = (key,type) =>{
let that = this;
let otherKey={};
if(type === "1"){
otherKey.searchType = "102"
if(key === ''){
otherKey.searchType = "101"
}
}
if(type === "2"){
otherKey.searchType = "100100"
}
if(type === "3"){
otherKey.searchType = "100110"
}
Toast.loading('loading...',0);
this.props.dispatch({
type: 'home/getSearchList',
payload: {
"key":key,
...otherKey
},
callback(res) {
let data = res || [];
that.setState({
allList: data,
isFirst: key !== "" ? false : true
})
Toast.hide();
},
error(err) {
Toast.error(err.message)
}
})
}
onChange= (value) => {
this.setState({ searchValue:value });
//this.setState({ isFirst: value !== "" ? false : true });
if(this.state.inputType){
if(this.state.inputType == '汉字'){
this.getAllData(value,this.state.currentTab);
}
}else{
this.getAllData(value,this.state.currentTab);
}
}
goTargetPage =(item) =>{
console.log('goTargetPage----->',item)
let searchType = item.searchType + "";
if(searchType === '100100'){//资料库
if(item.dataPath){
let type = 'pdf';
switch (item.dataFormat.toLowerCase()) {
case 'pdf':
type = 'pdf';
break;
case 'mp4':
type = 'video';
break;
default:
type = '';
break;
}
if(/doc|docx/i.test(item.dataFormat)) type = 'word';
if(/ppt|pptx/i.test(item.dataFormat)) type = 'ppt';
if(/png|jpg|gif/i.test(item.dataFormat)) type = 'img';
if(/xls|xlsx/i.test(item.dataFormat)) type = 'excel';
if (type === 'pdf') {
window.location.href = item.dataPath
} else if (/doc|docx|xls|xlsx|ppt|pptx/i.test(item.dataFormat)) {
window.location.href = 'https://view.officeapps.live.com/op/view.aspx?src=' + item.dataPath
} else {
this.props.dispatch(routerRedux.push({
pathname: '/databank/preview',
state: {
url:item.dataPath
},
}));
}
}
}
if(searchType === '100110'){//行业动态
this.props.history.push({ pathname: "/industrynews/detail", search: 'id=' + item.id });
}
sessionStorage.setItem("searchObj",JSON.stringify({tab:this.state.currentTab,value:this.state.searchValue}))//跳转的时候先缓存下来
}
clickTab = (tab) =>{
console.log('clickTab', tab.sub);
let value = this.state.searchValue;
this.setState({ currentTab:tab.sub });
this.getAllData(value,tab.sub);
sessionStorage.setItem("searchObj",JSON.stringify({tab:this.state.currentTab,value:this.state.searchValue}))
}
_extraContent(item){
return(
<div><span className={item.dataType ? styles["tipsRight"+item.dataType] : styles.tipsRight5}>{item.dataTypeName}</span></div>
)
}
render() {
const {allList,currentTab,searchValue,isFirst} = this.state;
const content=(
<div onClick={()=>{this.goTargetPage()}}>资料</div>
);
let tab = this.state.currentTab -1;//页签默认展示的值
return (
<div className={styles.searchWarp}>
<div className={styles.search}>
<input
onChange={(e) => {
this.onChange(e.target.value);
}}
value={this.state.searchValue}
type="search"
id="inputElem"
ref={ref => this.autoFocusInst = ref}
placeholder={"请输入关键字"} />
<div className={styles.cancelButton} onClick={()=>{this.props.history.go(-1)}}>取消</div>
</div>
<div className={styles.searchContent}>
<div className={styles.tabsHeader}>
{tabs.map((item,index)=>{
return <button className={tab === index ? styles.active : ""} key={item.sub} onClick={()=>{this.clickTab(item)}}>{item.title}</button>
})}
</div>
<div className={styles.tabsContent}>
{allList !== null &&(
allList.length>0 ? <List style={{width:'100%'}}>
{allList.map((item,index)=>{
return <Item key={index} extra={this._extraContent(item)} onClick={()=>{this.goTargetPage(item)}}>{item.dataName}</Item>
})}
</List> : <NoData />
)
}
</div>
</div>
</div>
)
}
}
export default connect(({home})=>({home}))(Index);
\ No newline at end of file
.wrap {
height: 100%; background: #F8F8F8; overflow-y: auto;
-webkit-overflow-scrolling: touch;
dl,dt,dd{
margin:0; padding: 0;
}
.system{
display: flex; height: .8rem; background: #fff;
dt{
width: .5rem; height: .5rem; background: url(../../assets/image/icon_Infosystem.png) no-repeat;
background-size: 100%; margin-top: .15rem; margin-left: .12rem; flex-shrink: 0;
}
dd{
flex: 1; margin-left: .15rem; margin-right: .11rem; width: 3.2rem;
.title{
display: flex; justify-content: space-between;
}
.tit{
color:#333; font-size: .17rem; line-height: .24rem; margin-top: .15rem; padding-right: .12rem;
}
.unread{
position: relative;
&:after{
position: absolute; right:0; top:.09rem; width: .06rem; height: .06rem; background:#FB5150; border-radius: 50%; content: '';
}
}
.time{
color:#B6B6B6; font-size: .13rem; line-height: .24rem; margin-top: .16rem; margin-right: 0;
}
.infoTit {
font-size: .14rem; color:#666; line-height: .24rem; height: .24rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.noneInfo{
color:#999;
}
}
}
.custom{
margin-top: .1rem;
dt{
width: .5rem; height: .5rem; background: url(../../assets/image/icon_Infocustom.png) no-repeat;
background-size: 100%; margin-top: .15rem; margin-left: .12rem;
}
}
}
.noInfo{
background: url(../../assets/image/clientless.png) center center no-repeat; background-size: 40%;
position: relative;
&:after{
position: absolute; left: 0; top: 62%; content: '暂无数据'; color: rgb(102, 102, 102); width: 100%; text-align: center; font-size: .15rem;
}
}
.listItm{
.infoTime{
color:#ABABAB; font-size: .13rem;line-height: .24rem; padding: .08rem 0 .07rem; text-align: center;
}
.infoContent{
background:#fff; border-radius: .06rem; margin: 0 .1rem;
.tit{
font-size: .17rem; line-height: .24rem; color:#333; padding: .1rem .12rem;
}
dl{
display: flex;
dt{
width:.68rem; height: .68rem; margin-left:.08rem; margin-right: .08rem; flex-shrink: 0; margin-bottom: .12rem;
}
.product{
background: url(../../assets/image/icon_pdt.png) no-repeat; background-size: 100%;
}
.system{
background: url(../../assets/image/icon_sys.png) no-repeat; background-size: 100%;
}
.activity{
background: url(../../assets/image/icon_act.png) no-repeat; background-size: 100%;
}
.customer{
background: url(../../assets/image/icon_new.png) no-repeat; background-size: 100%; width: .6rem; height: .6rem;
}
dd{
color:#666; font-size: .14rem; line-height: .24rem; margin-right:.12rem;
}
}
}
dl{
}
}
import React, { Component, Fragment } from 'react';
import { connect } from 'dva';
import { Toast } from 'antd-mobile';
import moment from 'moment';
import shareHide from "../../utils/shareHide";
import css from './css.less';
class Index extends Component{
constructor(props) {
super(props);
this.state = {
userId: '',
list: []
}
}
componentDidMount() {
document.title = '信息中心';
const _this = this;
shareHide();
const userId = localStorage.id;
this.setState({
userId
})
Toast.loading('loading...',1000)
this.props.dispatch({
type: 'infoCenter/GetInfoList',
payload: {
roleId: 3,
userId
},
callback(res) {
_this.setState({
list:res
})
Toast.hide();
},
error(err) {
Toast.error(err.message)
}
})
}
render() {
const { list } = this.state;
return <div className={css.wrap}>
{
list.length===2 && <Fragment>
<dl className={css.system} onClick={() => {
this.props.history.push({ pathname:'/infoCenter/list', search:'sign=1'})
}}>
<dt></dt>
<dd>
<div className={css.title}>
<span className={css.tit + ' ' + (list[0].read !== '1' && css.unread)}>系统消息</span>
{
list[0].messageHeader !== '暂无消息' && <span className={css.time}>{moment(list[0].updateTime).format('YYYY-MM-DD HH:mm')}</span>
}
</div>
<div className={css.infoTit + ' ' + (list[0].messageHeader === '暂无消息' && css.noneInfo)}>{list[0].messageHeader}</div>
</dd>
</dl>
<dl className={css.system + ' ' + css.custom} onClick={() => {
this.props.history.push({ pathname: '/infoCenter/list', search: 'sign=2'})
}}>
<dt></dt>
<dd>
<div className={css.title}>
<span className={css.tit + ' ' + (list[1].read !== '1' && css.unread)}>客户提醒</span>
{
list[1].messageHeader !== '暂无消息' && <span className={css.time}>{moment(list[1].updateTime).format('YYYY-MM-DD HH:mm')}</span>
}
</div>
<div className={css.infoTit + ' ' + (list[1].messageHeader === '暂无消息' && css.noneInfo)}>{list[1].messageHeader}</div>
</dd>
</dl>
</Fragment>
}
</div>
}
}
export default connect()(Index);
import React, { Component } from 'react';
import { connect } from 'dva';
import { Toast } from 'antd-mobile';
import moment from 'moment';
import shareHide from "../../utils/shareHide";
import css from './css.less';
class InfoList extends Component{
constructor(props) {
super(props);
this.state = {
userId: '',
isloading: true,
infolist: []
}
}
componentDidMount() {
document.title = '信息中心';
const _this = this;
shareHide();
Toast.loading('loading...', 1000);
const userId = localStorage.id;
const roleId = localStorage.roleId;
this.setState({
userId
})
const { search } = this.props.location;
let subData = { roleId };
if (search) {
const sign = search.substr(6);
if (roleId === '3') {
if (sign === '1') {
subData.supervisionId = userId;
subData.requestType = 'system';
}
if (sign === '2') {
subData.supervisionId = userId;
subData.requestType = 'customer';
}
}
}
this.props.dispatch({
type: 'infoCenter/GetSubInfoList',
payload: {
...subData,
orgId:localStorage.getItem('orgId')
},
callback(res) {
_this.setState({
infolist: res,
isloading: false
}, () => {
Toast.hide();
})
},
error(err) {
Toast.error(err.message)
}
})
}
render() {
const { infolist,isloading } = this.state;
return <div className={css.wrap+' '+(infolist.length===0 && !isloading?css.noInfo:'')}>
{
infolist.length>0 && infolist.map((itm,index) => {
return <div key={index} className={css.listItm}>
<div className={css.infoTime}>{moment(itm.updateTime).format('YYYY-MM-DD HH:mm:ss')}</div>
<div className={css.infoContent}>
<div className={css.tit}>{itm.messageHeader}</div>
<dl>
<dt className={css[itm.infoType]}></dt>
<dd>{itm.notification}</dd>
</dl>
</div>
</div>
})
}
</div>
}
}
export default connect()(InfoList);
.splitline {
width: 100%;
height: .1rem;
background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(255, 255, 255, 0) 100%);
opacity: 0.1041;
}
.invitationWrap{
height: 100%;
:global(.am-tabs-tab-bar-wrap){
height: .6rem;
}
:global(.am-tabs-default-bar-tab){
padding:0; font-size: .17rem; color:#ABABAB;
&:after{ display:none !important;}
}
:global(.am-tabs-default-bar-tab-active){
color:#101010; font-size: .17rem;
}
:global(.am-tabs-default-bar-underline){
border-color:#FF9D5C; border-width: .02rem;
}
}
.tmpsWrap{
display: flex; flex-wrap: wrap; padding-top:.05rem; padding-left:.1rem;
.itm{
width: 30.8%; height: 2.24rem; margin-bottom: .1rem; margin-right:.1rem; border: 1px solid #ccc;
img{ width: 100%; height:100%; display: block;}
}
}
.mylistWrap{
padding: .05rem .1rem 0; height: calc(100% - .1rem); overflow-y: auto;
.itm{
display: flex; margin-bottom: .1rem;
dt{
width: .8rem; height: .8rem; border-radius: .06rem; overflow: hidden;
img{width: 100%; height: 100%; display: block; }
}
dd{
flex:1; margin-left: .14rem; margin-bottom:0;
border-bottom: 1px solid #f8f8f8;
}
.tit{
font-size: .17rem; color:#333; line-height: .24rem;
}
.updatetime {
color:#666; font-size: .14rem; line-height: .24rem; margin-top: .04rem;
span{float:none;}
}
.operation {
overflow: hidden;
span{ float:right; color: #999; font-size: .13rem; line-height: .24rem; padding-left: .22rem; margin-bottom:.05rem;}
.edit{
margin-right: .3rem; background: url(../../assets/image/icon_edit.png) 0 .03rem no-repeat;
background-size: 36%;
}
.del{
background: url(../../assets/image/icon_del.png) 0 .02rem no-repeat;
background-size: 36%;
}
}
}
}
.formWrap {
height: 100%;
background:#f8f8f8;
overflow-y: auto;
h3{
position: relative; color: #666; font-size: .13rem; line-height: .4rem; height: .4rem; margin:0; padding-left: .11rem; font-weight: normal;
span{ color:#ababab; float:none;}
.btnCreate{
position: absolute; right: .1rem; width:.75rem; height: .26rem; line-height: .26rem; border-radius: .04rem; border: 1px solid #FF9D5C; top: .07rem; color:#FF9D5C;
font-size: .15rem; text-align: center;
}
}
:global(.am-list-item.am-input-item){
padding-left:.11rem; height: .5rem;
}
:global(.am-list-item .am-input-label){
font-size: .15rem; width: .8rem;
}
:global(.am-list-item .am-input-control input){
font-size: .15rem;
}
:global(.am-list-item){
padding-left:.11rem;
}
:global(.am-textarea-control textarea){
font-size: .15rem;
}
:global(.am-textarea-control){
padding-top: .04rem; padding-right:.1rem;
}
:globl(.am-textarea-has-count){
padding-bottom:.12rem;
}
:global(.am-textarea-count){
color:#999; font-size: .15rem; right:.1rem;
span{color:#999; float: none; margin-right: 0;}
}
:global(.invitation-area-item){
background:#fff;
position: relative;
textarea{
padding-left: .1rem;
}
}
:global(.am-textarea-error .am-textarea-error-extra){
position: absolute; right:.2rem; top: 50%; margin-top: -0.1rem;
}
.choosetime {
font-size: .15rem; background:#fff; color:#101010;
.choosetimew{
display:flex; margin: 0 .11rem; border-bottom: 1px solid #f8f8f8;height: .5rem; line-height: .5rem;
}
p{
margin:0; width: .86rem;
}
span{ flex:1; background: url('../../assets/image/icon_date.png') right no-repeat;background-position-y: 12px;
background-size: 8%;}
}
.btnWrap{
width:3.92rem; height: 1.08rem; background: url(../../assets/image/btn_getpreview.png) no-repeat; background-size: 100%; margin: .17rem auto 0; overflow: hidden;
.btnGetPreview{
width: 3.92rem; height:.5rem; margin-top: .08rem;
}
}
}
.prevWrap { height: 100%; overflow: hidden;
.prev{
position: relative;
height: 100%;
overflow: hidden;
}
.isprev{
margin-top: -.3rem;
}
.bg{
position: relative; z-index: 1; width: 100%;
img{ width: 100%; display:block;}
}
.carouselWrap{
position: absolute; top: 48%; width: 3.4rem;
z-index: 9; color:#3E5F50; left: 50%; margin-left:-1.7rem;
height: 3rem;
}
.btnCreate{
position: absolute; z-index: 10; width: 3.92rem; height: .5rem; left: 50%; margin-left: -1.96rem; bottom:.1rem;
background:#FF9D5C; border-radius: .1rem; text-align: center; line-height: .5rem; color:#fff; font-size: .17rem;
}
.btn_left{
position: absolute; width:.4rem; height: .6rem; background: url(../../assets/image/icon_arrow.png) center center no-repeat; z-index: 99; left: .11rem; top: 50%;transform:scale(0.5);
}
.btn_right{
position: absolute; width:.4rem; height: .6rem; background: url(../../assets/image/icon_arrow.png) center center no-repeat; z-index: 99; right: .11rem; top: 50%;
transform:scale(-0.5);
}
.pagea{
text-align: center; height: 3rem;
.pageaWrap{
width: 94%; margin: 0 auto; min-height: 3rem;
}
.activityName {
font-size: .26rem; line-height: .37rem; margin-bottom: .06rem;
}
.subtit{
font-size: .16rem; line-height: .22rem; padding-top: .11rem;
}
.subcon {
font-size: .18rem; line-height: .25rem; margin-top: .02rem;
}
}
.pageb{
.pagebWrap{
width: 94%; margin: 0 auto;
}
.con {
font-size: .17rem; line-height: .28rem;
}
}
.mapWrap{
width: 98%; height: 1.2rem; margin: .1rem auto 0;
}
:global(#invitationMap){
height:1.5rem;
}
}
.localcity {
font-size: .14rem;
display: flex; justify-content: space-between;
span{margin-right: 0;}
.btnSearch{
margin-right: .1rem; margin-top: .06rem; background-color:#FF9D5C;
text-align: center;
&:before{ border:none !important;}
}
}
.map{
position: relative; z-index: 1;height: 4rem;
:global(#activityMap){
height: 4rem;
}
}
.localdownlist{
position: relative;z-index: 4;
.downlist{
position: absolute; left:0; top: 100%; width: 100%; background: #fff;
ul{ padding:0 .12rem;}
li{
text-align: left; list-style: none; border-bottom: 1px solid #ccc;
p{ margin: 0; }
}
}
}
:global(.locatinSelectWrap){
:global(.am-modal-close){
top: 10px;
}
:global(.am-list-item .am-input-label){
font-size: .15rem;
}
:global(.am-list-item .am-input-control input){
font-size: .15rem;
}
:global(.am-list-item .am-list-line){
&:after{
display:none !important;
}
}
}
.noInfo{
height: 100%;background: url(../../assets/image/clientless.png) center center no-repeat; background-size: 40%;
position: relative;
&:after{
position: absolute; left: 0; top: 62%; content: '当前无邀请函'; color: rgb(102, 102, 102); width: 100%; text-align: center; font-size: .15rem;
}
}
.btnCreatePriew{
position: absolute; z-index: 10; width: 100%; height: .8rem; bottom:0;
background:#fff !important; text-align: center; color:#fff;padding: 10px;
img{
width:100%;
}
}
\ No newline at end of file
import React, { Component } from 'react';
import { connect } from 'dva';
import { Tabs, Toast, ActionSheet } from 'antd-mobile';
import shareHide from "../../utils/shareHide";
import Templates from './templates';
import MyList from './mylist';
import css from './css.less';
const isIPhone = new RegExp('\\biPhone\\b|\\biPod\\b', 'i').test(window.navigator.userAgent);
let wrapProps;
if (isIPhone) {
wrapProps = {
onTouchStart: e => e.preventDefault(),
};
}
class Index extends Component{
constructor(props) {
super(props);
this.state = {
templates: [],
mylist: [],
isloading: false,
userId:null,
}
}
componentDidMount() {
document.title = '邀请函';
const _this = this;
const userId = localStorage.id ? localStorage.id : null;
Toast.loading('loading...', 1000);
shareHide();
this.setState({ userId })
this.props.dispatch({
type: 'Invitation/GetInvitationTmpsList',
payload: {},
callback(res) {
_this.setState({ templates: res })
Toast.hide();
}
})
this.props.dispatch({
type: 'Invitation/GetMyInvitList',
payload: {
createName: userId ? userId : ''
},
callback(res) {
_this.setState({ mylist: res, isloading: true })
}
})
}
invitationEdit = (data) => {
this.props.history.push({ pathname: "/invitation/addEdit" });
data.specificLocation = JSON.parse(data.specificLocation);
sessionStorage.setItem('invitationInfo', JSON.stringify(data));
}
invitationDel = (id) => {
const BUTTONS = ['删除', '取消'];
ActionSheet.showActionSheetWithOptions({
options: BUTTONS,
cancelButtonIndex: BUTTONS.length - 1,
destructiveButtonIndex: BUTTONS.length - 2,
// title: '删除',
message: '确定删除此邀请函?',
maskClosable: true,
'data-seed': 'logId',
wrapProps,
},
(buttonIndex) => {
if (buttonIndex === 0) {
const _this = this;
_this.props.dispatch({
type: 'Invitation/del',
payload: {
id
},
callback(res) {
if (res.status === true) {
_this.props.dispatch({
type: 'Invitation/GetMyInvitList',
payload: {
createName: _this.state.userId ? _this.state.userId : ''
},
callback(data) {
_this.setState({ mylist: data })
}
})
}
Toast.info(res.message, 1);
}
})
}
});
}
invitationPrev = (id) => {
this.props.history.push({ pathname: "/invitation/preview", search: 'isprev=2&id=' + id });
}
addInvitation = (itm) => {
if (this.state.mylist.length >= 20) {
Toast.fail('邀请函数量过多,请删除不需要的邀请函',2);
} else {
this.props.history.push({ pathname: "/invitation/addEdit" })
sessionStorage.setItem('invitationInfo', JSON.stringify({ invitationId: itm.id, invitationPath: itm.invitationPath }))
}
}
render() {
let check = 0
if(sessionStorage.getItem("key") == '我的'){
check = 1
}
return <div className={css.invitationWrap} style={{ background: '#fff' }}>
<Tabs
tabs={[{ title: '所有模板', sub: '1' }, { title: '我的', sub: '2' }]}
initialPage ={check}
onChange={(t, i) => {
let checkTab = t.title;
sessionStorage.setItem( "key", checkTab);
// if (i === 0 && this.state.clientList.length === 0) { this.getClientUnpassList(); } else if (this.state.cientListed.length === 0){
// this.getClientPassedList();
// }
}}
>
<div>
<div className={css.splitline}></div>
<Templates
templates={this.state.templates}
addInvitation={this.addInvitation}
/>
</div>
<div className={(this.state.isloading && this.state.mylist.length === 0 ? css.noInfo : '')}>
<div className={css.splitline}></div>
<MyList
mylist={this.state.mylist}
invitationPrev={this.invitationPrev}
invitationEdit={this.invitationEdit}
invitationDel={this.invitationDel}
/>
</div>
</Tabs>
</div>
}
}
export default connect()(Index);
import moment from 'moment';
import css from './css.less';
const MyList = (props) => {
return (
<div className={css.mylistWrap}>
<div>
{
props.mylist && props.mylist.map((itm,i) => (
<dl className={css.itm} key={i}>
<dt onClick={() => {
props.invitationPrev(itm.id)}}><img src={itm.invitationPath} alt='' /></dt>
<dd>
<div className={css.tit} onClick={() => {
props.invitationPrev(itm.id)
}}>{itm.activityName}</div>
<div className={css.updatetime} onClick={() => {
props.invitationPrev(itm.id)
}}><span>更新时间: </span>{moment(itm.updateTime).format('YYYY-MM-DD')}</div>
<div className={css.operation}>
<span className={css.del} onClick={() => { props.invitationDel(itm.id)}}>删除</span>
<span className={css.edit} onClick={()=>{props.invitationEdit(itm)}}>编辑</span>
</div>
</dd>
</dl>
))
}
</div>
</div>
)
}
export default MyList;
import { Component, Fragment } from 'react';
import { connect } from 'dva';
import { Carousel, Toast, ActionSheet } from 'antd-mobile';
import moment from 'moment';
import share from '../../utils/share';
import shareHide from '../../utils/shareHide';
import {urlGetParams} from '../../utils/dataFilter'
import css from './css.less';
const isIPhone = new RegExp('\\biPhone\\b|\\biPod\\b', 'i').test(window.navigator.userAgent);
let wrapProps;
if (isIPhone) {
wrapProps = {
onTouchStart: e => e.preventDefault(),
};
}
class Preview extends Component{
constructor(props) {
super(props);
this.state = {
index: 0,
inviInfo: null,
isprev:'t'
}
}
showActionSheet = () => {
const { inviInfo } = this.state;
const BUTTONS = ['导航','取消'];
ActionSheet.showActionSheetWithOptions({
options: BUTTONS,
cancelButtonIndex: BUTTONS.length - 1,
maskClosable: true,
'data-seed': 'logId',
wrapProps,
},
(buttonIndex) => {
if (buttonIndex === 0) {
window.location.href = `https://api.map.baidu.com/marker?location=${JSON.parse(inviInfo.specificLocation).lat},${JSON.parse(inviInfo.specificLocation).lng}&title=目标位置&content=${inviInfo.activitySite}&output=html&src=webapp.baidu.openAPIdemo`;
}
});
}
componentDidMount() {
document.title = '邀请函';
const { search } = this.props.location;
const params = urlGetParams(window.location.href);
if (search) {
if(params.id){
this.setState({ isprev: ''+params.isprev });
this.getInfo(params);
}
}
}
getInfo = (params) => {
const _this = this;
this.props.dispatch({
type: 'Invitation/GetInvitListById',
payload: {
id:params.id
},
callback(res) {
const inviInfo = res[0];
let inviInfoCopy = { ...inviInfo, specificLocation: JSON.parse(inviInfo.specificLocation) };
let urlShare = "";
if(params.isShare){//处理多次转发参数问题
urlShare = window.location.href;
}else{
urlShare = `${window.location.href.split('?')[0]}?isprev=2&id=${params.id}&isShare=t&phoneNum=${localStorage.getItem('number')}`;
}
share({
decodeUrl: window.location.href.split('#')[0],
title: inviInfo.activityName,
desc: inviInfo.essay,
shareUrl: urlShare,
thumbnail: inviInfo.invitationPath,
record:{
"operCode": inviInfo.id,
"operTitle": inviInfo.activityName,
"operFunction": 100130,
"operType": 202,
"phoneNum": params.isShare ? params.phoneNum : ""
}
});
//点击记录
_this.props.dispatch({
type:"home/setClickRecord",
payload: {
"operCode": inviInfo.id,
"operFunction": 100130,
"operTitle": inviInfo.activityName,
"operType": 201,
"phoneNum":params.isShare ? params.phoneNum : ""
},
callback(data){
console.log('点击分享出去的链接进来记录一次')
}
});
shareHide(false);
sessionStorage.setItem('invitationInfo', JSON.stringify(inviInfoCopy))
_this.setState({ inviInfo }, () => {
const ppoint = inviInfoCopy.specificLocation;
var map = new window.BMap.Map("invitationMap"); // 创建地图实例
map.disableDragging();
map.disableDoubleClickZoom();
map.disablePinchToZoom();
var point = new window.BMap.Point(ppoint.lng, ppoint.lat); // 创建点坐标
var loadCount = 1;
map.centerAndZoom(point, 17);
let marker = new window.BMap.Marker(point); // 创建标注
map.addOverlay(marker);
// 解决地图初始化位置和标注偏移问题
map.addEventListener("tilesloaded", function () {
if (loadCount == 1) {
map.setCenter(point);
}
loadCount = loadCount + 1;
});
});
}, error(err) {
Toast.error(err.message, 2);
}
})
}
render() {
const { inviInfo, isprev } = this.state;
return (
<div className={css.prevWrap}>
{
inviInfo && <Fragment>
<div className={css.prev}>
<div className={css.bg + ' ' + (isprev === 't' ? css.isprev : '')}><img src={inviInfo.invitationPath} alt="" /></div>
<div className={css.carouselWrap} style={{ color: inviInfo.colour ? inviInfo.colour:'#fff'}}>
<Carousel
selectedIndex={this.state.index}
autoplay={false}
infinite
dots={false}
>
<div className={css.pagea}>
<div className={css.pageaWrap}>
<div className={css.activityName}>{inviInfo.activityName}</div>
<div className={css.subtit}>时间</div>
<div className={css.subcon}>{moment(inviInfo.activityTime).format('YYYY-MM-DD HH:mm')}</div>
<div className={css.subtit}>地点</div>
<div className={css.subcon}>{inviInfo.activitySite + inviInfo.activityAdress}</div>
</div>
</div>
<div className={css.pageb}>
<div className={css.pagebWrap}>
<div className={css.con}>尊敬的{inviInfo.named} </div>
<div className={css.con} style={{ textIndent: '2em' }}>{inviInfo.essay}</div>
<div className={css.con} style={{ textAlign: 'right' }}>{moment(inviInfo.updateTime).format('YYYY-MM-DD')}</div>
<div className={css.con} style={{ textAlign: 'right' }}>{inviInfo.invitationMessage}</div>
</div>
</div>
<div className={css.pageb}>
<div className={css.pagebWrap}>
<div className={css.con}>联系电话:{inviInfo.number}</div>
<div className={css.con}>活动时间:{moment(inviInfo.activityTime).format('YYYY-MM-DD HH:mm')}</div>
<div className={css.con}>活动地点:{inviInfo.activitySite + inviInfo.activityAdress}</div>
<div className={css.mapWrap} onClick={this.showActionSheet}>
<div id="invitationMap" style={{ height: '100%' }}></div>
</div>
</div>
</div>
</Carousel>
</div>
<div className={css.btn_left} onClick={() => {
const { index } = this.state;
if (index !== 0) {
this.setState({ index: index - 1 })
} else {
this.setState({ index: 2 })
}
}}></div>
<div className={css.btn_right} onClick={() => {
const { index } = this.state;
if (index < 2) {
this.setState({ index: index + 1 })
} else {
this.setState({ index: 0 })
}
}}></div>
{isprev === 't' && <div className={css.btnCreatePriew} style={{ backgroundColor: inviInfo.colour ? inviInfo.colour : '#FF9D5C'}}
onClick={() => {
const _this = this;
this.props.dispatch({
type: 'Invitation/addEdit',
payload: {
...inviInfo,
judegeId: 1,
updateTime: moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
},
callback(res) {
Toast.success(res.message, 2);
_this.props.history.push({ pathname: "/invitation" });
}, error(err) {
Toast.error(err.message, 2);
}
})
}}
><img src={require("../../assets/image/yaoqinghan.png")} /></div>}
</div>
</Fragment>}
</div>
)
}
}
export default connect()(Preview);
import css from './css.less';
const Templates = (props) => {
return (
<div className={css.tmpsWrap}>
{
props.templates && props.templates.map(itm => (
<div className={css.itm} key={itm.id} onClick={() => {
props.addInvitation(itm);
}}><img src={itm.invitationPath} alt='' /></div>
))
}
</div>
)
}
export default Templates;
.myCenter{
width: 100%;
height: 100%;
overflow-y: auto;
}
.myCenter .headerCard{
background: url('../../assets/image/myCenterBackg.png') no-repeat;
height: 1.2rem;
background-size: cover;
display: flex;
align-items: center;
color: #FFFFFF;
font-size: .16rem;
margin-bottom: .12rem;
}
.myCenter .headerCard .head{
width: .80rem;
height: .80rem;
margin-left: .20rem;
}
.myCenter .headerCard .head img{
width: 100%;
height: 100%;
border-radius: 50%;
}
.myCenter .headerCard .info{
margin-left: .1rem;
}
.myCenter .senction1{
position: relative;
display: flex;
background: white;
margin: 0 .10rem;
padding: .12rem 0;
border-radius: 8px;
}
.myCenter .senction1 .childsection{
width: 50%;
text-align: center;
line-height: .40rem;
}
.myCenter .senction1 .childsection .header{
font-size: .15rem;
color: #666666;
}
.myCenter .senction2{
position: relative;
background: white;
margin: .10rem .10rem;
font-size: .18rem;
border-radius: 8px;
}
.myCenter .senction2 .item{
position: relative;
display: flex;
line-height: .5rem;
padding-left: .16rem;
border-bottom: 1px solid #F8F8F8;
}
.myCenter .senction2 .item .left{
width: 1rem;
color: #101010;
font-weight: 400;
}
.myCenter .senction2 .item .arrow{
right: 0;
width: .3rem;
position: absolute;
}
.myCenter .tipsContent{
position: relative;
width: 100%;
text-align: center;
margin: .40rem 0;
}
.websiteSection{
position: relative;
background: white;
margin: .15rem .15rem;
font-size: .18rem;
border-radius: 8px;
border: 1px solid #e7e7e7;
padding: .1rem .2rem;
}
.websiteSection .item{
position: relative;
display: flex;
line-height: .5rem;
border-bottom: 1px solid #F8F8F8;
}
.websiteNameCss{
white-space: nowrap;
width: 2.3rem;
overflow-x: hidden;
text-overflow: ellipsis;
}
\ No newline at end of file
import React, { Component, Fragment } from 'react';
import { connect } from 'dva';
import { Toast } from 'antd-mobile';
import { Icon } from 'antd';
import shareHide from "../../utils/shareHide";
import css from './index.css';
import moment from 'moment';
import {getPlanInListWithCode} from '../../utils/dataFilter'
class Index extends Component{
constructor(props) {
super(props);
this.state = {
userInfo: JSON.parse(localStorage.getItem('userInfo')) || {},
performTotal:"0.00",//当月业绩
ranking:'0',//当月排名
websiteName:'',//所辖网点名
websiteList:[],//所辖网点
}
}
componentDidMount() {
document.title = '个人中心';
const _this = this;
shareHide();
this.performaceServer();
this.getAchievementRank();
this.getWebsiteNmae();
}
//当月业绩
performaceServer(){
let that = this;
this.props.dispatch({
type: 'Performance/performList',
payload: {
"daySize": "M",
"managerId": this.state.userInfo.id,
"roleId": this.state.userInfo.roleId,
},
callback(data){
if(data){
that.setState({
performTotal:data.amount?parseFloat(data.amount).toFixed(2):'0.00'
})
}
},
error(data){
Toast.info(data.message)
}
})
}
//当月排行
getAchievementRank(){
let that = this;
Toast.loading('loading...');
this.props.dispatch({
type: 'Performance/achievementRank',
payload: {
"month": moment().format('MM'),
"roleId": this.state.userInfo.roleId,
"userId": this.state.userInfo.id
},
callback(data){
Toast.hide();
if(data){
that.setState({
ranking:data.ranking
})
}
},
error(data){
Toast.info(data.message)
}
})
}
getWebsiteNmae(){
let _this = this;
this.props.dispatch({
type: "governortraining/getOrzList",
payload: {
orgId:this.state.userInfo.project
},
callback: (res) => {
if (res.status && res.data.length) {
let project = _this.state.userInfo.website ? _this.state.userInfo.website.split(',') : [];
let myProjectList=[];
let websiteName = [];
for(let ii in project){
let target = getPlanInListWithCode('orgId',project[ii],res.data);
if(target.orgId){
myProjectList.push(target);
websiteName.push(target.orgName);
}
}
_this.setState({websiteList:myProjectList,websiteName:websiteName.join(',')})
}
Toast.hide();
}
});
}
render() {
const { userInfo,performTotal,ranking ,websiteName,websiteList} = this.state;
return (
<div className={css.myCenter}>
<div className={css.headerCard}>
<div className={css.head}>
<img src={userInfo.headUrl ? userInfo.headUrl : require("../../assets/image/defaultHead.png")} alt="" />
</div>
<div className={css.info}>
<div style={{marginBottom:'5px'}}>{userInfo.name}<span style={{marginLeft:'20px'}}>{userInfo.roleId === 3 ? '督训':'客户经理'}</span></div>
<div>手机号:<span>{userInfo.number}</span></div>
</div>
</div>
<div className={css.senction1}>
<div className={css.childsection} onClick={()=>{this.props.history.push('/performance')}}>
<div className={css.header}>当月业绩</div>
<div style={{color:'#FF9D5C',fontSize:'.32rem'}}>{performTotal}<span style={{fontSize:'12px',margin:'0 8px'}}></span></div>
</div>
<img src={require('../../assets/image/lineH.png')} style={{height:'.9rem'}}/>
<div className={css.childsection} onClick={()=>{this.props.history.push('/myRank')}}>
<div className={css.header}>当月排名</div>
<div style={{color:'#FF9D5C',fontSize:'.16rem'}}>全渠道第<span style={{fontSize:'.32rem',margin:'0 8px'}}>{ranking}</span>名</div>
</div>
</div>
{userInfo.roleId === 2 && (
<div className={css.senction2}>
<div className={css.item}><div className={css.left}>所属机构</div><div>{userInfo.orgName}</div></div>
<div className={css.item}><div className={css.left}>所属网点</div><div>{userInfo.websiteName}</div></div>
<div className={css.item}><div className={css.left}>所属督训</div><div>{userInfo.superiorName}</div></div>
</div>
)}
{userInfo.roleId === 3 && (
<div className={css.senction2}>
<div className={css.item}><div className={css.left}>所属机构</div><div>{userInfo.orgName}</div></div>
<div className={css.item}><div className={css.left}>所属项目</div><div>{userInfo.projectName}</div></div>
<div className={css.item}><div className={css.left}>所辖网点</div><div className={css.websiteNameCss}>{websiteName}</div>
<div className={css.arrow} onClick={()=>{this.props.history.push({pathname:'/home/myUser/website',params:websiteList})}}><Icon type="right" /></div>
</div>
</div>
)}
<div className={css.senction2}>
<div className={css.item}><div className={css.left}>年龄</div><div>{userInfo.age}</div></div>
<div className={css.item}><div className={css.left}>性别</div><div>{userInfo.sex == '1' ? '女' : "男"}</div></div>
<div className={css.item}><div className={css.left}>手机号</div><div>{userInfo.number}</div></div>
</div>
<div className={css.tipsContent}>
<img src={require('../../assets/image/zhihuigongzuo.png')} style={{width:'60%'}}/>
</div>
</div>
)
}
}
export default connect()(Index);
import React, { Component, Fragment } from 'react';
import { connect } from 'dva';
import { Toast } from 'antd-mobile';
import shareHide from "../../utils/shareHide";
import css from './index.css';
import {getPlanInListWithCode} from '../../utils/dataFilter'
class Index extends Component{
constructor(props) {
super(props);
this.state = {
userInfo: JSON.parse(localStorage.getItem('userInfo')) || {},
websiteList:[]
}
}
componentDidMount() {
document.title = '所辖网点';
const _this = this;
shareHide();
if(this.props.location.params){
this.setState({websiteList:this.props.location.params})
return;
}
Toast.loading('loading...',0)
this.props.dispatch({
type: "governortraining/getOrzList",
payload: {
orgId:this.state.userInfo.project
},
callback: (res) => {
if (res.status && res.data.length) {
let project = _this.state.userInfo.website ? _this.state.userInfo.website.split(',') : [];
let myProjectList=[];
for(let ii in project){
myProjectList.push(getPlanInListWithCode('orgId',project[ii],res.data))
}
_this.setState({websiteList:myProjectList})
}
Toast.hide();
}
});
}
render() {
const { userInfo ,websiteList} = this.state;
if(websiteList.length == 0) return <div/>
return (
<div className={css.websiteSection}>
{
websiteList.length>0 && websiteList.map((item,index)=>{
return (
<div key={index} className={css.item}>
<div className={css.left}>{index+1}</div>
<div style={{textAlign:'right',width:'100%'}}>{item.orgName}</div>
</div>
)
})
}
</div>
)
}
}
export default connect()(Index);
.myRank{
width: 100%;
height: 100%;
overflow-y: auto;
margin: 0;
}
.myRank .section1{
line-height: .50rem;
height: .50rem;
background: white;
display: flex;
align-items: center;
border-radius: 24px;
margin: .10rem;
}
.myRank .section1 .part1,.part2{
width: 49%;
}
.myRank .section1 .part1 .select{
width: 90px;
position: relative;
float: right;
/* margin-right: .3rem; */
}
.myRank .section1 .part2 .select{
width: 90px;
position: relative;
margin-left: .30rem;
}
.myRank .section2{
padding: .10rem .20rem;
background: white;
text-align: center;
margin: .10rem;
color: #101010;
font-size: 16px;
}
.myRank .section2>div{
margin: .08rem 0;
}
.myRank .section3{
text-align: center;
margin: .10rem;
}
.myRank .overlayClassName{
width: .80rem;
}
.myRank .section3 .rankHeader{
padding: .10rem 0;
font-size: .16rem;
color: #666666;
}
.myRank .section3 .rankMe{
background: white;
margin: .10rem 0;
border-radius: 8px;
font-size: .17rem;
color: #101010;
line-height: .4rem;
padding: .08rem 0;
}
.myRank .section3 .rankList{
position: relative;
padding: .10rem 0 0 0;
background: white;
border-radius: 8px;
font-size: .17rem;
color: #101010;
}
.myRank .section3 .rankList .rankListItem{
padding: .1rem 0;
border-bottom: 1px solid #F8F8F8;
line-height: .40rem;
}
.myRank .section3 .rankList .tipNum{
position: relative;
font-size: .14rem;
text-align: center;
color: rgb(171, 171, 171);
width: 100%;
padding: .06px;
background: white;
line-height: 30px;
height: 30px;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
}
.myRank .premNumber{
text-align: center;
/* padding-right: .1rem; */
color: #FF9D5C;
font-size: .24rem;
}
.myRank .listName{
text-align: center;
/* padding-left: .3rem; */
}
.myRank .listName img{
height: 0.4rem;
width: 0.4rem;
border-radius: 50%;
margin-right: 0.1rem;
}
:global(.ant-dropdown-menu){
overflow-y: auto;
max-height: 4rem;
}
\ No newline at end of file
import React, { Component, Fragment } from 'react';
import { connect } from 'dva';
import { Toast } from 'antd-mobile';
import { Menu, Dropdown, Icon ,Row,Col} from 'antd';
import shareHide from "../../utils/shareHide";
import css from './index.css';
import Iscroll from "../../components/Iscroll";
import moment from 'moment';
import {getPlanInListWithCode} from '../../utils/dataFilter'
const monthM = ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'];
const menuListM = [];
const nowM = new Date().getMonth()+1;
monthM.map((item,index)=>{
if(index<nowM){
let num = (String(index+1).length == 1) ? "0"+(index+1) : ""+(index+1);
menuListM.push({lable:item,id:num})
}
});
class Index extends Component{
constructor(props) {
super(props);
let userInfo = JSON.parse(localStorage.getItem('userInfo'));
let monthName = getPlanInListWithCode("id",moment().format('MM'),menuListM).lable || "";
this.state = {
userInfo: userInfo || {},
menuList1:[{lable:'全国',id:""},{lable:userInfo.orgName,id:userInfo.orgId}],
menuList2:menuListM,
managerList:[],
area:"全国",
areaId:"",
month: moment().format('MM'),
monthName: monthName,
scrollH:300,
ranking:"-",//排名
cusManAllNum:'0',//总人数
amountGap:0,//同上一名相差额度
selfRank:null,//自己的排行列表信息
otherRankList:[],//所有排行的人列表
}
}
componentDidMount() {
document.title = '排行榜';
const _this = this;
const windowH = window.screen.height;
const listH = document.getElementById("rankList").offsetHeight;
shareHide();
let isIPhone = new RegExp('\\biPhone\\b|\\biPod\\b', 'i').test(window.navigator.userAgent);
let disH = isIPhone ? windowH-listH-138 : windowH-listH-90;
this.setState({scrollH:disH})
this.getAchievementRank();
}
//当月排行列表
getAchievementRank(){
let that = this;
Toast.loading('loading...',0);
this.props.dispatch({
type: 'Performance/achievementRank',
payload: {
"month": this.state.month,
"orgId": this.state.areaId,
"roleId": this.state.userInfo.roleId,
"userId": this.state.userInfo.id
},
callback(data){
Toast.hide();
if(data){
let selfRank = null;
//返回列表数据第一条是不是本人,不是的话就是没有本人数据,如果有则取第一条
if(data.rankingList[0]){
if(data.rankingList[0].userId == that.state.userInfo.id){
selfRank = data.rankingList[0]
}
}
that.setState({
ranking:data.ranking,
cusManAllNum:data.cusManAllNum,
amountGap:data.amountGap,
selfRank:selfRank,
otherRankList:selfRank ? data.rankingList.slice(1,) : data.rankingList,
})
}
},
error(data){
Toast.info(data.message)
}
})
}
_menuList(props,key){
return (
<Menu className={css.overlayClassName}>
{props && props.map((item,index)=>{
return (
<Menu.Item key={index}>
<p onClick={()=>{
if(key=='month'){
this.setState({month:item.id,monthName:item.lable},()=>{
this.getAchievementRank();
});
}else {
this.setState({area:item.lable,areaId:item.id},()=>{
this.getAchievementRank();
});
}
}}>{item.lable}</p>
</Menu.Item>
)
})}
</Menu>
)
}
arrowUpDown(item){
if(item){
if(item.ratio == '+1'){
return <Icon type="arrow-up" style={{color:'#FB5150'}} />
}
if(item.ratio == '-1'){
return <Icon type="arrow-down" style={{color: '#31DEB6'}} />
}
return <Icon type="line" style={{color: '#6c6c6c'}} />
}
}
render() {
const { userInfo ,menuList1,menuList2,managerList,area,monthName,scrollH,ranking,cusManAllNum,amountGap,selfRank,otherRankList} = this.state;
return (
<div className={css.myRank}>
<div className={css.section1}>
<div className={css.part1}>
<div className={css.select}>
<Dropdown
overlay={this._menuList(menuList1,'area')}
placement="bottomCenter"
trigger={['click']}
>
<div><span style={{marginRight:'.20rem'}}>{area}</span><Icon type="caret-down" /></div>
</Dropdown>
</div>
</div>
<img src={require('../../assets/image/lineH.png')} style={{height:'.30rem',width:'1px'}}/>
<div className={css.part2}>
<div className={css.select}>
<Dropdown
overlay={this._menuList(menuList2,'month')}
placement="bottomCenter"
trigger={['click']}
>
<div><span style={{marginRight:'.20rem'}}>{monthName}</span><Icon type="caret-down" /></div>
</Dropdown>
</div>
</div>
</div>
<div className={css.section2}>
<div>{area+"共有"}<span>{userInfo.roleId===3 ? '督训':'客户经理'}</span><span style={{color:'#FF9D5C',padding:"0 .05rem"}}>{cusManAllNum}</span></div>
<div>排名第<span style={{color:'#FF9D5C',fontSize:'.28rem',padding:"0 .05rem"}}>{ranking ? ranking : '-'}</span></div>
<div>同上一名业绩相差<span style={{color:'#FF9D5C',padding:"0 .05rem"}}>{amountGap ? parseInt(amountGap) : '-'}</span>元</div>
</div>
<div className={css.section3}>
<Row className={css.rankHeader}>
<Col span={3}>排名</Col>
<Col span={8} style={{textAlign:'center',}}>姓名</Col>
<Col span={9} style={{textAlign:'center',}}>标准保费 ()</Col>
<Col span={3}>环比</Col>
</Row>
<Row className={css.rankMe}>
<Col span={3}>{selfRank ? selfRank.ranking : "-"}</Col>
<Col span={8} className={css.listName}>
{/*<img src={selfRank && selfRank.headUrl ? selfRank.headUrl : require('../../assets/image/defaultHead.png')} />*/}
{selfRank && selfRank.name ? (selfRank.name.length>4 ? selfRank.name.substr(0,4)+".." : selfRank.name) : userInfo.name}
</Col>
<Col span={9} className={css.premNumber}>{selfRank ? parseInt(selfRank.amount) : "-"}</Col>
<Col span={3}>{selfRank ? this.arrowUpDown(selfRank) : <Icon type="line" style={{color: '#6c6c6c'}} />}
</Col>
</Row>
<div className={css.rankList} id="rankList">
<div style={{minHeight:'100px',height:scrollH,position:'relative'}}>
<Iscroll id="planResult"
iscrollOptions={{
probeType:2
}}>
{
otherRankList.length>0 && otherRankList.map((item,index)=>{
return(
<Row className={css.rankListItem} key={index}>
<Col span={3}>{item.ranking}</Col>
<Col span={8} className={css.listName}>
{/*<img src={item.headUrl ? item.headUrl : require('../../assets/image/defaultHead.png')} />*/}
{item.name ? (item.name.length>4 ? item.name.substr(0,4)+".." : item.name) : ""}</Col>
<Col span={9} className={css.premNumber} >{item.amount ? parseInt(item.amount) : "0"}</Col>
<Col span={3}>{this.arrowUpDown(item)}
</Col>
</Row>
)
})
}
</Iscroll>
</div>
<div className={css.tipNum}>{'共'+cusManAllNum+'名'}<span>{userInfo.roleId===3 ? '督训':'客户经理'}</span>参加了排名</div>
</div>
</div>
</div>
)
}
}
export default connect()(Index);
.industryWrap{
background: #fff;
overflow: auto; height: 100%;
-webkit-overflow-scrolling: touch;
dl{
display:flex; margin:.1rem; margin-bottom:0; padding-bottom:.1rem;
border-bottom: 1px solid #F8F8F8;
dt{
width:.8rem; height: .8rem; flex-shrink: 0;
img{ width: 100%; height: 100%;}
}
dd{
margin-left: .12rem; margin-bottom: 0; flex: 1;
.tit{
font-size: .17rem; color:#333; line-height: .24rem; height: .48rem; width: 100%; overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient: vertical;
}
.subinfo{
display:flex; justify-content: space-between;line-height: .24rem;font-size: .13rem; color:#B6B6B6; margin-top: .09rem;
}
.viewCount {
position: relative; padding-left: .24rem; display: block;
&:before{
position: absolute; left:0; top:.05rem; width:.18rem; height: .13rem; content:''; background: url(../../assets/image/icon_eye.png) no-repeat; background-size: 100%;
}
}
.time{
}
}
}
}
.noInfo{
background: url(../../assets/image/clientless.png) center center no-repeat; background-size: 40%;
position: relative;
&:after{
position: absolute; left: 0; top: 62%; content: '暂无数据'; color: rgb(102, 102, 102); width: 100%; text-align: center; font-size: .15rem;
}
}
.detailWrap{
padding: .15rem .1rem .5rem; overflow: auto; height: 100%;
background:#fff;
.detailTitle{
font-size: .19rem; color:#101010; line-height: .26rem;
}
.detailInfo{
display:flex; justify-content: space-between; color:#B6B6B6; font-size: .13rem; line-height: .24rem; margin-top: .07rem;
.viewCount {
position: relative; padding-left: .24rem; display: block;
&:before{
position: absolute; left:0; top:.05rem; width:.18rem; height: .13rem; content:''; background: url(../../assets/image/icon_eye.png) no-repeat; background-size: 100%;
}
}
}
:global(.ck-content){
overflow: hidden;
margin-top: .15rem;
img{ max-width: 100%;}
video{
max-width: 100%;
}
}
}
import { Component, Fragment } from 'react';
import { connect } from 'dva';
import moment from 'moment';
import $ from 'jquery';
import share from '../../utils/share';
import shareHide from "../../utils/shareHide";
import {urlGetParams} from '../../utils/dataFilter'
import css from './css.less';
class Detail extends Component{
constructor(props) {
super(props);
this.state = {
data:null
}
}
componentDidMount() {
document.title = '行业动态';
const { search } = this.props.location;
const params = urlGetParams(window.location.href);
const _this = this;
if (params.id) {
let id = search.substr(4)
this.props.dispatch({
type: 'industrynews/getNews',
payload: {
id:params.id,
reqType:0
},
callback(res) {
_this.setState({data:res})
let htm = res.html.replace(/<figure class="image"><img src="http:\/\/zmtoss\.ihxlife\.com\/polysoft\/o2o_industrynews_audit_1561000223813\.png.*?<figcaption>(.+?)<\/figcaption><\/figure>/g, `<div style="clear:both"><video src=$1 controls="controls"></video></div>`);
$('.ck-content').html(htm);
let urlShare = "";
if(params.isShare){//处理多次转发参数问题
urlShare = window.location.href;
}else{
urlShare = window.location.href+`&isShare=t&phoneNum=${localStorage.getItem('number')}`;
}
share({
decodeUrl: window.location.href.split('#')[0],
title: res.title,
desc: $('.ck-content').text().substr(0,100),
shareUrl: urlShare,
thumbnail: res.imgUrl,
record:{
"operCode": res.id,
"operTitle": res.title,
"operFunction": 100110,
"operType": 202,
"phoneNum": params.isShare ? params.phoneNum : ""
}
});
//点击记录一次
_this.props.dispatch({
type:"home/setClickRecord",
payload: {
"operCode": res.id,
"operFunction": 100110,
"operTitle": res.title,
"operType": 201,
"phoneNum": params.isShare ? params.phoneNum : ""
},
callback(data){
console.log('点击分享链接,记录一次')
}
})
}
})
}
shareHide(false);
}
render() {
const { data } = this.state;
return (
<div className={css.detailWrap}>
{
data && <Fragment>
<div className={css.detailTitle}>{data.title}</div>
<div className={css.detailInfo}>
<div className={css.author}>来源:{data.author}</div>
<div className={css.time}>{moment(data.modifyTime).format('YYYY-MM-DD')}</div>
</div>
</Fragment>
}
<div className="ck-content"></div>
<div className={css.detailInfo}>
<div className={css.viewCount}>{data && data.viewCount}</div>
</div>
</div>
)
}
}
export default connect()(Detail);
import React, { Component } from 'react';
import { connect } from 'dva';
import { Toast ,PullToRefresh} from 'antd-mobile';
import moment from 'moment';
import shareHide from "../../utils/shareHide";
import Iscroll from "../../components/Iscroll";
import NoData from "../../components/NoData";
import css from './css.less';
import { message } from 'antd';
class Index extends Component{
constructor(props) {
super(props);
this.state = {
list: [],
isloading: false,
pageNo:1,
pageSize:20,
finish:'',
refreshing:false,
dataEnd:false
}
}
componentDidMount() {
document.title = '行业动态';
const _this = this;
const userId = localStorage.id ? localStorage.id : null;
this.setState({ userId })
shareHide();
Toast.loading('loading...',1000)
this.props.dispatch({
type: 'industrynews/getNewsList',
payload: {
status:1,
pageNo:1,
pageSize:20
},
callback(res) {
_this.setState({ list: res ? res : [], isloading: true })
Toast.hide();
},
error(err) {
message.error(err.message)
}
})
}
getNewsListItem=()=>{
let _this = this;
let pageNo = this.state.pageNo +1;
this.props.dispatch({
type: 'industrynews/getNewsList',
payload: {
status:1,
pageNo:pageNo,
pageSize:20
},
callback(res) {
let list = _this.state.list;
let pageNo = _this.state.pageNo;
let finish = _this.state.finish;
let dataEnd = false;
if(res && res.length>0){
list = list.concat(res);
pageNo = pageNo +1;
finish = "完成刷新";
}else{
finish = "没有更多数据了";
dataEnd = true;
}
_this.setState({
list: list,
isloading: true,
refreshing:false,
pageNo:pageNo,
finish:finish,
dataEnd:dataEnd
})
Toast.hide();
},
error(err) {
message.error(err.message)
}
})
}
render() {
const { list, isloading } = this.state;
return <div className={css.industryWrap + ' ' + ((list.length === 0 && isloading) ? css.noInfo : '' )}>
<Iscroll
id="industrynews"
iscrollOptions={{
preventDefault: true,
}}
onPullUpLoadMore={() => this.getNewsListItem()}
hasUp={true}
hasDown={false}
dataEnd={this.state.dataEnd}
haveBackTop={true}
noUpStr={'已全部加载完毕'}
>
<div>
{
list.length > 0 && list.map(itm => <dl
key={itm.id}
onClick={() => {
this.props.history.push({ pathname: "/industrynews/detail", search: 'id=' + itm.id });
}}
>
<dt><img src={itm.imgUrl} /></dt>
<dd>
<div className={css.tit}>{itm.title}</div>
<div className={css.subinfo}>
<span className={css.viewCount}>{itm.viewCount}</span>
<span className={css.time}>{moment(itm.modifyTime).format('YYYY-MM-DD')}</span>
</div>
</dd>
</dl>)
}
</div>
</Iscroll>
</div>
}
}
export default connect()(Index);
import request from '../utils/request';
import { headersPost } from '../utils/Constants';
export async function GetInvitationTmpsList(params) {
return request('/o2o/invitation/getinvitationConfigList', {
method: 'post',
headers: headersPost,
body: JSON.stringify(params),
});
}
export async function GetMyInvitList(params) {
return request('/o2o/invitation/getMyinvitationTemplateConfigList', {
method: 'post',
headers: headersPost,
body: JSON.stringify(params),
});
}
export async function GetInvitListById(params) {
return request('/o2o/invitation/getinvitationTemplateConfigList', {
method: 'post',
headers: headersPost,
body: JSON.stringify(params),
});
}
export async function addEdit(params) {
return request('/o2o/invitation/addOrUpdateinvitationTemplate', {
method: 'post',
headers:headersPost,
body: JSON.stringify(params),
});
}
export async function del(params) {
return request('/o2o/invitation/deleteMyinvitationConfig', {
method: 'post',
headers: headersPost,
body: JSON.stringify(params),
});
}
import request from '../utils/request';
import { headersPost } from '../utils/Constants';
//获取名片信息
export async function GetBusinessCardInfo(params) {
return request('/o2o/customer/getLoginInfo', {
method: 'post',
headers: headersPost,
body: JSON.stringify(params),
});
}
//新增修改名片
export async function UpdateBusinessCardInfo(params) {
return request('/o2o/customer/updateManager', {
method: 'post',
headers:headersPost,
body: JSON.stringify(params),
});
}
//获取背景模板
export async function GetCardBackgroundTmpsList(params) {
return request('/o2o/backgroud/getbackgroundConfigList', {
method: 'post',
headers: headersPost,
body: JSON.stringify(params),
});
}
//新增修改背景
export async function AddOrUpdateCardBackground(params) {
return request('/o2o/backgroud/addOrUpdatebackgroudConfig', {
method: 'post',
headers:headersPost,
body: JSON.stringify(params),
});
}
//删除名片背景
export async function DeleteCardBackgroud(params) {
return request('/o2o/backgroud/deletebackgroudConfig', {
method: 'post',
headers:headersPost,
body: JSON.stringify(params),
});
}
import request from '../utils/request';
import { headersPost } from '../utils/Constants';
//互动社区获取登录的用户消息
export async function getLoginUserInfo(params) {
return request('/o2o/wx/WeChatInfo', {
method: 'post',
headers: headersPost,
body: JSON.stringify(params),
});
}
//获取所有问题
export async function getAllQuestionList(params) {
return request('/o2o/interactive/getQuestionList', {
method: 'post',
headers: headersPost,
body: JSON.stringify(params),
});
}
//查询问题详情数据
export async function getQuestionInfo(params) {
return request('/o2o/interactive/getAnswerInfo', {
method: 'post',
headers:headersPost,
body: JSON.stringify(params),
});
}
//获取回答的回答列表
export async function getAnswerOfAnswerInfo(params) {
return request('/o2o//interactive/getAnswerInfo', {
method: 'post',
headers: headersPost,
body: JSON.stringify(params),
});
}
//添加问题
export async function AddQuestion(params) {
return request('/o2o/interactive/insertQuestion', {
method: 'post',
headers: headersPost,
body: JSON.stringify(params),
});
}
//回答问题
export async function addAnswer(params) {
return request('/o2o/interactive/insertAnswer', {
method: 'post',
headers:headersPost,
body: JSON.stringify(params),
});
}
//问题点击率
export async function updateClickNum(params) {
return request('/o2o/interactive/updBrowseVolume', {
method: 'post',
headers:headersPost,
body: JSON.stringify(params),
});
}
import request from '../utils/request';
import { headersPost } from '../utils/Constants';
export async function getNewsList(params) {
return request('/o2o/dynamic/getDynamicList', {
method: 'post',
headers: headersPost,
body: JSON.stringify(params),
});
}
export async function getNews(params) {
return request('/o2o/dynamic/getDetail', {
method: 'post',
headers: headersPost,
body: JSON.stringify(params),
});
}
import request from '../utils/request';
import { headersPost } from '../utils/Constants';
export async function GetInfoList(params) {
return request('/o2o/information/getInformationListfen', {
method: 'post',
headers: headersPost,
body: JSON.stringify(params),
});
}
export async function GetSubInfoList(params) {
return request('/o2o/information/getInformationList', {
method: 'post',
headers: headersPost,
body: JSON.stringify(params),
});
}
//首页消息轮播数据接口
export async function GetInformationsList(params) {
return request('/o2o/information/getInformationListOne', {
method: 'post',
headers: headersPost,
body: JSON.stringify(params),
});
}
import request from '../utils/request';
import { headersPost,headersGet } from '../utils/Constants';
export async function getPerformanceRank(params) {
return request('/o2o/code/sms?mobile=13012345678',{
method: 'get',
headers:headersGet,
})
}
\ No newline at end of file
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!