HandOver-liuwu
/
frontend
mirror of https://codeup.aliyun.com/lsxd/marketing/frontend.git
4
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

模板空字段渲染类型时处理

This commit is contained in:
red-deng-deng 2022-01-28 15:25:11 +08:00
parent 9dccbbc452
commit a497e54185
3 changed files with 414 additions and 240 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/pages/exchangepage/edittemplate/main.js
View File

@ -115,9 +115,22 @@ getLandingdata(val){
template=typePage; template=typePage;
} }
let exchangeList=newEditor.exchange; let exchangeList=newEditor.exchange;
if(!exchangeList){
exchangeList={};
exchangeList.land=model;
exchangeList.product_list=product_list;
exchangeList.product_detail=product_detail;
}
exchangeList['land'].title=newEditor.title; exchangeList['land'].title=newEditor.title;
exchangeList['land'].sort=newEditor.sort; exchangeList['land'].sort=newEditor.sort;
let whiteList=newEditor.access_conf; let whiteList=newEditor.access_conf;
if(!whiteList){
whiteList={}
whiteList.land=model;
whiteList.product_list=product_list;
whiteList.product_detail=product_detail;
}
whiteList['land'].title=newEditor.title; whiteList['land'].title=newEditor.title;
whiteList['land'].sort=newEditor.sort; whiteList['land'].sort=newEditor.sort;
newEditor.exchangeList=exchangeList; newEditor.exchangeList=exchangeList;
@ -579,7 +592,6 @@ getLandingdata(val){
case 812:style={width:'375px',height:'812px',transform: 'scale(0.75)'};fontSize=10000/(375*0.75);break; case 812:style={width:'375px',height:'812px',transform: 'scale(0.75)'};fontSize=10000/(375*0.75);break;
case 500:style={width:'375px',height:'500px',transform: 'scale(0.75)'};fontSize=10000/(375*0.75);break; case 500:style={width:'375px',height:'500px',transform: 'scale(0.75)'};fontSize=10000/(375*0.75);break;
} }
console.log('fontSize',fontSize);
this.setState({setStyle:style,activeHeight:height,fontSize}); this.setState({setStyle:style,activeHeight:height,fontSize});
} }
componentWillUnmount(){ componentWillUnmount(){

550
src/pages/exchangepage/mytemplate/main.js
View File

@ -1,8 +1,20 @@
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import React, { Component } from 'react'; import React, {
import { Link } from "react-router-dom"; Component
import { Button,Tag,Sweetalert,CombinedDateRangePicker,Notify,Switch,Pop} from 'zent'; } from 'react';
import "./main.less" import {
Link
} from "react-router-dom";
import {
Button,
Tag,
Sweetalert,
CombinedDateRangePicker,
Notify,
Switch,
Pop
} from 'zent';
import "./main.less"
import _ from "lodash"; import _ from "lodash";
import "../../../assets/comm.css" import "../../../assets/comm.css"
import Ipt from "../../../components/input/main" import Ipt from "../../../components/input/main"
@ -10,19 +22,22 @@ import Grid from "../../../components/gird/main.js"
import TabPage from "../../../components/tabPage/main.js" import TabPage from "../../../components/tabPage/main.js"
import Filterbar from "../../../components/filterbar/main.js" import Filterbar from "../../../components/filterbar/main.js"
import menu from "../../../assets/enum.js" import menu from "../../../assets/enum.js"
import {handelResponse,getTheme,delTheme} from "../../../assets/api.js" import {
const Column = [ handelResponse,
{ getTheme,
delTheme
} from "../../../assets/api.js"
const Column = [{
title: '缩略图', title: '缩略图',
name: 'thumb', name: 'thumb',
prop:'thumb', prop: 'thumb',
type: "slot", type: "slot",
width:'10%', width: '10%',
}, { }, {
title: '标题', title: '标题',
prop:'title', prop: 'title',
name: 'title', name: 'title',
width:'auto', width: 'auto',
type: "normal", type: "normal",
}, },
{ {
@ -30,7 +45,7 @@ const Column = [
prop: 'client', prop: 'client',
name: 'client', name: 'client',
type: "slot", type: "slot",
width:'auto', width: 'auto',
}, },
{ {
@ -38,7 +53,7 @@ const Column = [
prop: 'update_time', prop: 'update_time',
name: 'update_time', name: 'update_time',
type: "normal", type: "normal",
width:'auto', width: 'auto',
}, },
{ {
@ -46,7 +61,7 @@ const Column = [
prop: 'user_name', prop: 'user_name',
name: 'user_name', name: 'user_name',
type: "normal", type: "normal",
width:'auto', width: 'auto',
}, },
{ {
@ -54,235 +69,350 @@ const Column = [
prop: 'edit', prop: 'edit',
name: 'edit', name: 'edit',
type: "slot", type: "slot",
width:'auto', width: 'auto',
}, },
]; ];
export default class acclist extends React.Component{ export default class acclist extends React.Component {
constructor(props){ constructor(props) {
super(props) super(props)
this.state={ this.state = {
distdata:[], distdata: [],
total:0, total: 0,
combinedValue:[], combinedValue: [],
page:1, page: 1,
limit:10, limit: 10,
tabList:[{title:"我的模板列表"}], tabList: [{
DateTime:'',//数据更新时间 title: "我的模板列表"
key_word:'', }],
tableHeight:600, DateTime: '', //数据更新时间
dataCount:0, key_word: '',
tableHeight: 600,
dataCount: 0,
}
} }
}
componentDidUpdate(prevProps,prevState){ componentDidUpdate(prevProps, prevState) {
// 参数分别为改变之前的数据状态对象 // 参数分别为改变之前的数据状态对象
if(prevState.key_word!=this.state.key_word &&!this.state.key_word){ if (prevState.key_word != this.state.key_word && !this.state.key_word) {
this.sureFn();
}
this.sureFn(); }
}
}
//敲回车查询 //敲回车查询
sureFn(){ sureFn() {
this.setState({page:1}); this.setState({
this.setState({limit:10}) page: 1
});
this.setState({
limit: 10
})
let data = { let data = {
page:1, page: 1,
limit:10, limit: 10,
title:this.state.key_word title: this.state.key_word
} }
this.getTableList(data); this.getTableList(data);
} }
editFn(e,row){ editFn(e, row) {
if(row.creator == 0 ) if (row.creator == 0) {
{ Notify.clear();
Notify.clear(); Notify.error("系统模板不可编辑");
Notify.error("系统模板不可编辑"); return
return }
}
sessionStorage.setItem("pageInfo", JSON.stringify(row)) sessionStorage.setItem("pageInfo", JSON.stringify(row))
sessionStorage.setItem("mouldType", 1) sessionStorage.setItem("mouldType", 1)
sessionStorage.setItem("pageChange", 1) sessionStorage.setItem("pageChange", 1)
// let link = window.location.href.replace(window.location.hash, "#/edittemplate"); // let link = window.location.href.replace(window.location.hash, "#/edittemplate");
// window.open(link, "_blank") // window.open(link, "_blank")
window.location.href="/#/edittemplate"; window.location.href = "/#/edittemplate";
} }
getTableList(data){ getTableList(data) {
getTheme(data).then(res=>{ getTheme(data).then(res => {
handelResponse(res,(req,msg)=>{ handelResponse(res, (req, msg) => {
this.setState({dataCount:req.total}) this.setState({
this.setState({distdata:req.data}) dataCount: req.total
})
this.setState({
distdata: req.data
})
},(err)=>{ }, (err) => {
}) })
}).catch(err=>{ }).catch(err => {});
});
}
componentWillMount(){
let selt=this;
this.setState({tableHeight:window.innerHeight-390});
let data={
page:this.state.page,
limit:this.state.limit
}
if(this.state.combinedValue&&this.state.combinedValue[0]){
data.begin_time=this.state.combinedValue[0];
data.end_time=this.state.combinedValue[1];
}
this.getTableList(data);
}
//limit
countChange(e){
this.setState({page:1,limit:e});
let data = {
page:e,
limit:this.state.limit
} }
this.getTableList(data); componentWillMount() {
} let selt = this;
this.setState({
tableHeight: window.innerHeight - 390
});
let data = {
page: this.state.page,
limit: this.state.limit
}
if (this.state.combinedValue && this.state.combinedValue[0]) {
data.begin_time = this.state.combinedValue[0];
data.end_time = this.state.combinedValue[1];
}
this.getTableList(data);
}
pageChange(e){ //limit
this.setState({page:e}) countChange(e) {
let data = { this.setState({
page:e, page: 1,
limit:this.state.limit limit: e
} });
if(this.state.key_word){ let data = {
data.title=this.state.key_word; page: e,
} limit: this.state.limit
this.getTableList(data); }
}
newTemplate(e){ this.getTableList(data);
sessionStorage.setItem("pageInfo",null) }
let link = window.location.href.replace(window.location.hash, "#/home/mytempMould");
window.open(link, "_blank") pageChange(e) {
} this.setState({
page: e
})
let data = {
page: e,
limit: this.state.limit
}
if (this.state.key_word) {
data.title = this.state.key_word;
}
this.getTableList(data);
}
newTemplate(e) {
sessionStorage.setItem("pageInfo", null)
let link = window.location.href.replace(window.location.hash, "#/home/mytempMould");
window.open(link, "_blank")
}
delFn(e,row){ delFn(e, row) {
if(row.creator == 0 ) if (row.creator == 0) {
{ Notify.error("系统模板不可删除");
Notify.error("系统模板不可删除"); return
return }
}
let self=this; let self = this;
Sweetalert.confirm({ Sweetalert.confirm({
type:'warning', type: 'warning',
closeBtn:true, closeBtn: true,
title:'确认操作', title: '确认操作',
content: <p>是否删除<b>[{row.title}]</b>？</p>, content: < p > 是否删除 < b > [{
onConfirm:()=>{ row.title
delTheme(row.id).then(res=>{ }] < /b>？</p > ,
handelResponse(res,(response,msg)=>{ onConfirm: () => {
Notify.clear(); delTheme(row.id).then(res => {
Notify.success(msg); handelResponse(res, (response, msg) => {
let data = { Notify.clear();
page:this.state.page, Notify.success(msg);
limit:this.state.limit, let data = {
title:this.state.key_word page: this.state.page,
} limit: this.state.limit,
title: this.state.key_word
}
self.getTableList(data); self.getTableList(data);
},(err)=>{ }, (err) => {
}) })
}).catch(err=>{ }).catch(err => {});
}); },
}, onCancel: this.onCancel,
onCancel: this.onCancel, className: 'questModal',
className:'questModal', parentComponent: this
parentComponent: this });
}); }
} render() {
render(){
const { current, pageSize } = this.state; const {
return( current,
<div id="exchangecodelist"> pageSize
<TabPage tabs={this.state.tabList}> } = this.state;
<p className="codetable dflexj"> return ( <
< div id = "exchangecodelist" >
Button type = "primary" <
icon = "plus" TabPage tabs = {
onClick={(e)=>{ this.newTemplate(e) }} this.state.tabList
} >
<
p className = "codetable dflexj" >
<
Button type = "primary"
icon = "plus"
onClick = {
(e) => {
this.newTemplate(e)
}
}
> 新增模板 < /Button> >
{/* <Button type="info">批量操作</Button> */} 新增模板 < /Button> {
<Ipt onClearItem={(e)=>{this.setState({key_word:''})}} wordSearch={this.sureFn.bind(this)} onChange={(e)=>this.setState({key_word:e})} value={this.state.key_word} icon="search" placeholder={"请输入关键字进行匹配查询"} countShow={false} height={'36px'} width={'260px'} alignment={'left'}/> /* <Button type="info">批量操作</Button> */ } <
</p> Ipt onClearItem = {
<div className="code-table"> (e) => {
<Grid this.setState({
spliteColor={'#fff'} key_word: ''
tableData={this.state.distdata} })
Column={Column} }
maxheight={this.state.tableHeight} }
countbarVisible={false} wordSearch = {
isSwitch={false} this.sureFn.bind(this)
page={this.state.page} }
dataCount={this.state.dataCount} onChange = {
isMultiple={false} (e) => this.setState({
pageChange={(e)=>{ key_word: e
this.pageChange(e) })
}} }
countChange={ value = {
(e)=>{ this.state.key_word
this.countChange(e) }
} icon = "search"
} placeholder = {
checkChange ={(selection)=>{ "请输入关键字进行匹配查询"
}
}} countShow = {
ComponentHandler={(com,rowData)=>{ false
}
if(com=='thumb'){ height = {
return <Pop trigger="hover" position="right-center" content={<img src={rowData.thumb} alt="" style={{width:'375px',transform:'scale(.8)'}}/>}> '36px'
<img src={rowData.thumb} alt="" style={{width:'30px',height:'30px'}}/> }
</Pop> width = {
'260px'
}
alignment = {
'left'
}
/> <
/p> <
div className = "code-table" >
<
Grid spliteColor = {
'#fff'
}
tableData = {
this.state.distdata
}
Column = {
Column
}
maxheight = {
this.state.tableHeight
}
countbarVisible = {
false
}
isSwitch = {
false
}
page = {
this.state.page
}
dataCount = {
this.state.dataCount
}
isMultiple = {
false
}
pageChange = {
(e) => {
this.pageChange(e)
}
}
countChange = {
(e) => {
this.countChange(e)
}
}
checkChange = {
(selection) => {
} }
if (com == "client") { }
return <span > < font className = "icon" ComponentHandler = {
style = { (com, rowData) => {
{
background: menu.pageTypeStatusBg(parseInt(rowData.page))
}
} > < /font>{menu.pageTypeStatus(parseInt(rowData.page))}</span > ;
}
if (com == "edit") { if (com == 'thumb') {
return <span > return <Pop trigger = "hover"
< position = "right-center"
a content = {
className = "grid-link" onClick={(e)=>{ < img src = {
this.editFn(e,rowData) rowData.thumb
}} > 编辑 < /a> < }
a onClick={(e)=>{this.delFn(e,rowData)}} alt = ""
className = "grid-link" > 删除 < /a> style = {
{
width: '375px',
transform: 'scale(.8)'
}
}
/>}> <
img src = {
rowData.thumb
}
alt = ""
style = {
{
width: '30px',
height: '30px'
}
}
/> <
/Pop>
< }
/span> if (com == "client") {
} return <span > < font className = "icon"
}} style = {
/> {
</div> background: menu.pageTypeStatusBg(parseInt(rowData.page))
</TabPage> }
</div> } > < /font>{menu.pageTypeStatus(parseInt(rowData.page))}</span > ;
) }
}
} if (com == "edit") {
return <span >
<
a
className = "grid-link"
onClick = {
(e) => {
this.editFn(e, rowData)
}
} > 编辑 < /a> <
a onClick = {
(e) => {
this.delFn(e, rowData)
}
}
className = "grid-link" > 删除 < /a>
<
/span>
}
}
}
/> <
/div> <
/TabPage> <
/div>
)
}
}

50
src/pages/exchangepage/template/main.js
View File

@ -9,9 +9,31 @@ import "../../../assets/comm.css"
import PreviewItem from "./preview.js" import PreviewItem from "./preview.js"
import {handelResponse,getThemeType,getSystemTemplate,getTheme,copyThemecustom} from "../../../assets/api.js" import {handelResponse,getThemeType,getSystemTemplate,getTheme,copyThemecustom} from "../../../assets/api.js"
window.addEventListener('scroll',function(){
console.log('滚动'); let model={
}); title:"落地页标题",
top_image: "",
middle_image: "",
describe: {type:"",content :"",bg_image:''},
bg_color:"#EEEEEE",
sort:1,
type_id:{ key:2,text:'通用'},
font_color:"#000000",
thumb:''
}
//商品列表
let product_list={
top_image: "",
list:"2",
font_color:"#ffffff",
button_color: "#FACD6A",
describe: {type : "", content : "",bg_image:''},
}
let product_detail={
font_color:"#ffffff",
button_color: "#FACD6A",
describe:{type: "", content: "",bg_image:''},
}
export default class mytemplate extends React.Component{ export default class mytemplate extends React.Component{
constructor(props){ constructor(props){
super(props) super(props)
@ -225,14 +247,24 @@ export default class mytemplate extends React.Component{
onPreview(row){ onPreview(row){
let rowdata={}; let rowdata={};
rowdata.model=model;
rowdata.product_list=product_list;
rowdata.product_detail=product_detail;
let exchangedata={} let exchangedata={}
exchangedata.model=model;
exchangedata.product_list=product_list;
exchangedata.product_detail=product_detail;
this.setState({moudleData:row,showPage:1,pageStep:1,activeHeight:667, setStyle:{width:'375px',height:'667px',transform: 'scale(0.75)'}}); this.setState({moudleData:row,showPage:1,pageStep:1,activeHeight:667, setStyle:{width:'375px',height:'667px',transform: 'scale(0.75)'}});
rowdata.model=row.access_conf.land; if(row.access_conf){
rowdata.product_list=row.access_conf.product_list; rowdata.model=row.access_conf.land;
rowdata.product_detail=row.access_conf.product_detail; rowdata.product_list=row.access_conf.product_list;
exchangedata.model=row.exchange.land; rowdata.product_detail=row.access_conf.product_detail;
exchangedata.product_list=row.exchange.product_list; }
exchangedata.product_detail=row.exchange.product_detail; if(row.exchange){
exchangedata.model=row.exchange.land;
exchangedata.product_list=row.exchange.product_list;
exchangedata.product_detail=row.exchange.product_detail;
}
this.setState({preview_url:row.href}) this.setState({preview_url:row.href})
this.setState({preview_visible:true,showType:row.page}) this.setState({preview_visible:true,showType:row.page})
this.setState({previewwhite:rowdata}) this.setState({previewwhite:rowdata})