diff --git a/src/pages/exchangecode/add/add.js b/src/pages/exchangecode/add/add.js index 3b7d9004..72f7b0db 100644 --- a/src/pages/exchangecode/add/add.js +++ b/src/pages/exchangecode/add/add.js @@ -1053,7 +1053,7 @@ export default class acclist extends React.Component { }, ]; return ( -
+
{ let obj = {}; obj.key = res.id; @@ -152,6 +153,7 @@ export default class adduserinfo extends React.Component { arr.push(obj); return obj; }); + console.log("arr ==>", arr); this.setState({ productOption: arr }); diff --git a/src/pages/exchangepage/main/main.js b/src/pages/exchangepage/main/main.js index f7400d7e..44ce3f96 100644 --- a/src/pages/exchangepage/main/main.js +++ b/src/pages/exchangepage/main/main.js @@ -1,573 +1,628 @@ -import ReactDOM from 'react-dom'; -import React, { - Component -} from 'react'; +import ReactDOM from "react-dom"; +import React, { Component } from "react"; +import { HashRouter as Router, Route, Link } from "react-router-dom"; +import { Button, RadioButton } from "zent"; +import "./main.less"; import { - HashRouter as Router, - Route, - Link -} from "react-router-dom"; -import { - Button,RadioButton -} from 'zent'; -import "./main.less" -import { - Switch, - Swiper, - Dropdown, - DropdownPosition, - RadioGroup, - DropdownClickTrigger, - Icon, - MenuItem, - DropdownContent, - Menu, - Sweetalert, - Notify, - Pop -} from 'zent'; -import "../../../assets/comm.css" + Switch, + Swiper, + Dropdown, + DropdownPosition, + RadioGroup, + DropdownClickTrigger, + Icon, + MenuItem, + DropdownContent, + Menu, + Sweetalert, + Notify, + Pop, +} from "zent"; +import "../../../assets/comm.css"; import _ from "lodash"; -import Ipt from "../../../components/input/main" -import Grid from "../../../components/gird/main.js" -import TabPage from "../../../components/tabPage/main.js" -import Filterbar from "../../../components/filterbar/main.js" -import PreviewItem from "../template/preview" -import { - handelResponse, - getThemeList, - delTheme -} from "../../../assets/api.js" -import menu from "../../../assets/enum.js" -var QRCode = require('qrcode.react'); +import Ipt from "../../../components/input/main"; +import Grid from "../../../components/gird/main.js"; +import TabPage from "../../../components/tabPage/main.js"; +import Filterbar from "../../../components/filterbar/main.js"; +import PreviewItem from "../template/preview"; +import { handelResponse, getThemeList, delTheme } from "../../../assets/api.js"; +import menu from "../../../assets/enum.js"; +var QRCode = require("qrcode.react"); const PAGE_SIZE_OPTIONS = [10, 20, 30]; -const Column = [{ - title: '基本信息', - name: 'thumb', - prop: 'thumb', - className: 'name', - type: "slot", - width: '10%' - }, { - title: '标题', - prop: 'title', - name: 'title', - width: '200px', - type: "normal", - } - // , { - // title: '落地页平台', - // name: 'client', - // prop: 'client', - // type: "slot", - // defaultText: 0, - // width: 'auto' - // } - ,{ - title: '落地页类型', - name: 'page', - prop: 'page', - type: "slot", - defaultText: 0, - width: 'auto' - }, - { - title: '更新时间', - name: 'update_time', - type: "normal", - prop: 'update_time', - defaultText: 'PM', - width: 'auto' - }, - { - title: '归属计划', - name: 'plan.title', - type: "normal", - prop: 'plan.title', - defaultText: 0, - width: 'auto', - type: "normal", - }, - { - title: '链接地址', - name: 'href', - type: "slot", - prop: 'href', - defaultText: 0, - width: 'auto', - - }, - { - title: '创建人', - width: 'auto', - type: "normal", - prop: 'user_name', - name: "user_name" - }, - { - title: '操作', - prop: 'edit', - name: 'edit', - type: "slot", - width: '300px', - defaultText: 0, - - }, +const Column = [ + { + title: "基本信息", + name: "thumb", + prop: "thumb", + className: "name", + type: "slot", + width: "10%", + }, + { + title: "标题", + prop: "title", + name: "title", + width: "200px", + type: "normal", + }, + // , { + // title: '落地页平台', + // name: 'client', + // prop: 'client', + // type: "slot", + // defaultText: 0, + // width: 'auto' + // } + { + title: "落地页类型", + name: "page", + prop: "page", + type: "slot", + defaultText: 0, + width: "auto", + }, + { + title: "更新时间", + name: "update_time", + type: "normal", + prop: "update_time", + defaultText: "PM", + width: "auto", + }, + { + title: "归属计划", + name: "plan.title", + type: "normal", + prop: "plan.title", + defaultText: 0, + width: "auto", + type: "normal", + }, + { + title: "链接地址", + name: "href", + type: "slot", + prop: "href", + defaultText: 0, + width: "auto", + }, + { + title: "创建人", + width: "auto", + type: "normal", + prop: "user_name", + name: "user_name", + }, + { + title: "操作", + prop: "edit", + name: "edit", + type: "slot", + width: "300px", + defaultText: 0, + }, ]; export default class acclist extends React.Component { - constructor(props) { - super(props) - this.state = { - tabList: [{ - title: "全部" - }, { - title: "未开始" - }, { - title: "进行中" - },{ - title: "暂停中" - }, { - title: "已结束" - }], - distdata: [], - tableHeight:500, - filterList: [{ - id: 0, - label: "分销商状态", - menuList: [{ - id: 0, - name: "开" - }, { - id: 1, - name: "关" - }] - }, ], - menuList: [{ - id: 0, - name: "分销商状态", - check: false - }], - page: 1, - limit: 10, - key_word:"", - status: null, - dataCount: 0, - preview_visible:false, - preview_url:"", - activeHeight:667, - fontSize:10000/(375*0.75), - pageStep:1, - showType:3, - showPage:1, - setStyle:{width:'375px',height:'667px',transform: 'scale(0.75)'}, - - } - } - componentDidMount(e) { - + constructor(props) { + super(props); + this.state = { + tabList: [ + { + title: "全部", + }, + { + title: "未开始", + }, + { + title: "进行中", + }, + { + title: "暂停中", + }, + { + title: "已结束", + }, + ], + distdata: [], + tableHeight: 500, + filterList: [ + { + id: 0, + label: "分销商状态", + menuList: [ + { + id: 0, + name: "开", + }, + { + id: 1, + name: "关", + }, + ], + }, + ], + menuList: [ + { + id: 0, + name: "分销商状态", + check: false, + }, + ], + page: 1, + limit: 10, + key_word: "", + status: null, + dataCount: 0, + preview_visible: false, + preview_url: "", + activeHeight: 667, + fontSize: 10000 / (375 * 0.75), + pageStep: 1, + showType: 3, + showPage: 1, + setStyle: { width: "375px", height: "667px", transform: "scale(0.75)" }, + }; + } + componentDidMount(e) {} + //预览改变大小 + handleSize(width, height) { + let style = { width: width + "px", height: height + "px" }; + switch (height) { + case 667: + style = { width: "375px", height: "667px", transform: "scale(0.75)" }; + break; + case 750: + style = { width: "375px", height: "750px", transform: "scale(0.75)" }; + break; + case 812: + style = { width: "375px", height: "812px", transform: "scale(0.75)" }; + break; + case 500: + style = { width: "375px", height: "500px", transform: "scale(0.75)" }; + break; + } + this.setState({ setStyle: style, activeHeight: height }); + } + onpageChange(e) { + this.setState({ showPage: e.target.value }); + this.setState({ pageStep: e.target.value }); + } + getTableList(data) { + if (this.state.key_word) { + data.title = this.state.key_word; + } + let queryParams = _.omitBy(data, (value) => { + return _.isNaN(value) || _.isNil(value); + }); + getThemeList(queryParams).then((res) => { + handelResponse(res, (req, msg) => { + console.log("求结果"); + console.log(req); - } - //预览改变大小 - handleSize(width,height){ - let style={width:width+'px',height:height+'px'}; - switch(height){ - case 667:style={width:'375px',height:'667px',transform: 'scale(0.75)'};break; - case 750:style={width:'375px',height:'750px',transform: 'scale(0.75)'};break; - case 812:style={width:'375px',height:'812px',transform: 'scale(0.75)'};break; - case 500:style={width:'375px',height:'500px',transform: 'scale(0.75)'};break; - } - this.setState({setStyle:style,activeHeight:height}); - } - onpageChange(e){ - this.setState({showPage:e.target.value}); - this.setState({pageStep:e.target.value}); - } - getTableList(data) { - if(this.state.key_word) - { - data.title = this.state.key_word - } - let queryParams = _.omitBy(data, (value) => { - return _.isNaN(value) || _.isNil(value) - }) - - - getThemeList(queryParams).then((res) => { - handelResponse(res, (req, msg) => { - console.log("求结果") - console.log(req) + this.setState({ + dataCount: req.total, + }); + this.setState({ + distdata: req.data, + }); + }); + }); + } + countChange(e) { + this.setState({ limit: e }); + let data = { + page: this.state.page, + limit: e, + title: this.state.key_word, + }; + this.getTableList(data); + } + pageChange(e) { + this.setState({ page: e }); + let data = { + page: e, + limit: this.state.limit, + title: this.state.key_word, + status: this.state.status, + }; + this.getTableList(data); + } + clickFn() { + // let link = window.location.href.replace(window.location.hash, "#/home/mytempMould"); + // window.open(link, "_blank") + this.props.history.push("/home/myexchangetemplate"); + sessionStorage.setItem("pathname2", "/home/myexchangetemplate"); + let activerou = [ + { + items: [ + { + path: "/home/exchangepage", + name: "落地页管理", + }, + { + path: "/home/myexchangetemplate", + name: "我的模板", + }, + ], + }, + ]; + sessionStorage.setItem("breaknav", JSON.stringify(activerou)); + } + editFn(e, row) { + sessionStorage.setItem("mouldType", 2); + sessionStorage.setItem("pageChange", 1); + sessionStorage.setItem("pageInfo", JSON.stringify(row)); + // let link = window.location.href.replace(window.location.hash, "#/edittemplate"); + // window.open(link, "_blank") + window.location.href = "/#/edittemplate"; + } + delFn(e, row) { + let self = this; + Sweetalert.confirm({ + type: "warning", + closeBtn: true, + title: "确认操作", + content: ( +

+ 是否删除[{row.plan.title}]？ +

+ ), + onConfirm: () => { + delTheme(row.id) + .then((res) => { + handelResponse( + res, + (response, msg) => { + Notify.clear(); + Notify.success(msg); + self.getAccountFn(); + }, + (err) => {} + ); + }) + .catch((err) => {}); + }, + onCancel: this.onCancel, + className: "questModal", + parentComponent: this, + }); + } - this.setState({ - dataCount: req.total - }) - this.setState({ - distdata: req.data - }) - }) - }); - } - countChange(e) { - this.setState({limit:e}) - let data = { - page: this.state.page, - limit: e, - title: this.state.key_word - } - this.getTableList(data) - } - pageChange(e) { - this.setState({page:e}) - let data = { - page: e, - limit:this.state.limit, - title: this.state.key_word, - status:this.state.status - } - this.getTableList(data) + tabChange(e) { + this.setState({ page: 1 }); + this.setState({ limit: 10 }); + this.setState({ key_word: "" }); + let data = { + page: 1, + limit: 10, + }; + let status = null; + if (e > 0) { + if (e == 3) { + status = 5; + } else if (e == 4) { + status = 3; + } else { + status = e; + } + } else { + status = null; + } + data.status = status; + this.setState({ status: status }); - } - clickFn() { - // let link = window.location.href.replace(window.location.hash, "#/home/mytempMould"); - // window.open(link, "_blank") - this.props.history.push('/home/myexchangetemplate'); - sessionStorage.setItem('pathname2','/home/myexchangetemplate') - let activerou=[{items:[ - { - "path": "/home/exchangepage", - "name": "落地页管理" - }, - { - "path": "/home/myexchangetemplate", - "name": "我的模板" - } - ]}] - sessionStorage.setItem('breaknav',JSON.stringify(activerou)); - } - editFn(e,row) - { - sessionStorage.setItem("mouldType",2) - sessionStorage.setItem("pageChange",1) - sessionStorage.setItem("pageInfo",JSON.stringify(row)) - // let link = window.location.href.replace(window.location.hash, "#/edittemplate"); - // window.open(link, "_blank") - window.location.href="/#/edittemplate"; - } - delFn(e,row){ - let self=this; - Sweetalert.confirm({ - type:'warning', - closeBtn:true, - title:'确认操作', - content:

是否删除[{row.plan.title}]？

, - onConfirm:()=>{ - delTheme(row.id).then(res=>{ - handelResponse(res,(response,msg)=>{ - Notify.clear(); - Notify.success(msg); - self.getAccountFn(); - },(err)=>{ - - }) - }).catch(err=>{ - }); - }, - onCancel: this.onCancel, - className:'questModal', - parentComponent: this - }); - } - - tabChange(e) { - this.setState({page:1}) - this.setState({limit:10}) - this.setState({key_word:''}); - let data={ - page: 1, - limit:10, - } - let status = null; - if( e > 0) - { - if(e==3){ - status = 5; - }else if(e==4){ - status = 3; - }else{ - status = e; - } - - }else{ - status = null - } - data.status = status - this.setState({status:status}) - - setTimeout(() => { - this.getTableList(data) + setTimeout(() => { + this.getTableList(data); }, 10); - } - onPreview(e,row){ - let rowdata={}; - if(row.page==1){//白名单 - rowdata.model=row.access_conf.land; - rowdata.product_list=row.access_conf.product_list; - rowdata.product_detail=row.access_conf.product_detail; - }else if(row.page==3){ - rowdata.model=row.exchange.land; - rowdata.product_list=row.exchange.product_list; - rowdata.product_detail=row.exchange.product_detail; - } - - this.setState({preview_visible:true,pageStep:1,showPage:1,activeHeight:667, setStyle:{width:'375px',height:'667px',transform: 'scale(0.75)'}}) - this.setState({previewData:rowdata,showType:row.page}) - this.setState({preview_url:row.href}) - - } - closePhone(e){ - this.setState({preview_visible:false}) - } - - sureFn(){ - this.setState({page:1}) - this.setState({limit:10}) - let data={ - page: 1, - limit:10, - title:this.state.key_word, - status:this.state.status - } - - this.getTableList(data); - } - - - componentDidUpdate(prevProps,prevState){ - // 参数分别为改变之前的数据状态对象 - if(prevState.key_word!=this.state.key_word &&!this.state.key_word){ - - this.sureFn(); - } - } - componentWillMount(){ - this.setState({tableHeight:window.innerHeight-430}); } - onBack(){ - this.refs.preview.popPage() + onPreview(e, row) { + let rowdata = {}; + if (row.page == 1) { + //白名单 + rowdata.model = row.access_conf.land; + rowdata.product_list = row.access_conf.product_list; + rowdata.product_detail = row.access_conf.product_detail; + } else if (row.page == 3) { + rowdata.model = row.exchange.land; + rowdata.product_list = row.exchange.product_list; + rowdata.product_detail = row.exchange.product_detail; + } + + this.setState({ + preview_visible: true, + pageStep: 1, + showPage: 1, + activeHeight: 667, + setStyle: { width: "375px", height: "667px", transform: "scale(0.75)" }, + }); + this.setState({ previewData: rowdata, showType: row.page }); + this.setState({ preview_url: row.href }); } - onClose(){ - this.setState({preview_visible:false}) + closePhone(e) { + this.setState({ preview_visible: false }); } - render() { - const { - current, - pageSize - } = this.state; - return ( < - div id = "dislist" > - < - TabPage tabs = { - this.state.tabList - } - tabChange = { - (e) => this.tabChange(e) - } > - < - div className = "distable dflexj" > - < - div - > < /div> < - Ipt icon = "search" - placeholder = { - "请输入关键字进行搜索" - } - countShow = { - false - } - value={this.state.key_word} - - height = { - '36px' - } - width = { - '260px' - } - alignment = { - 'left' - } - onClearItem={ - (e)=>{ - console.log("清空") - - this.setState({key_word:""}) - - } - } - onChange={(e)=>{ - console.log(777777) - console.log(e) - this.setState({key_word:e}) - - }} - wordSearch={ - (e)=>{ - this.sureFn() - } - } - - /> < - /div> < - div > - < - Grid isBorder = { - true - } - spliteColor = { - '#fff' - } - page={this.state.page} - maxheight={this.state.tableHeight} - tableData = { - this.state.distdata - } - Column = { - Column - } - isMultiple = { - false - } - countbarVisible = { - false - } - isSwitch = { - false - } - dataCount = { - this.state.dataCount - } - countChange = { - (e) => { - this.countChange(e) - } - } - page={this.state.page} - pageChange = { - (e) => { - this.pageChange(e) - } - } - checkChange = { - (selection) => { - console.log(selection) - } - } - ComponentHandler = { - (com, rowData) => { - if(com=='thumb'){ - return }> - - - - } - if (com == "name") { - return < /Switch>; - } + sureFn() { + this.setState({ page: 1 }); + this.setState({ limit: 10 }); + let data = { + page: 1, + limit: 10, + title: this.state.key_word, + status: this.state.status, + }; - if (com == "client") { - return < font className = "icon" - style = { - { - background: menu.pageStatusBg(parseInt(rowData.client)) - } - } > < /font>{menu.pageStatus(parseInt(rowData.client))} ; - } - if (com == "page") { - return < font className = "icon" - style = { - { - background: menu.pageTypeStatusBg(parseInt(rowData.page)) - } - } > < /font>{menu.pageTypeStatus(parseInt(rowData.page))} ; - } - if (com == "edit") { - return - < - a - className = "grid-link" onClick={(e)=>{ - this.editFn(e,rowData) - }} > 编辑 < /a> < - a onClick={(e)=>{this.onPreview(e,rowData)}} - className = "grid-link" > 预览 < /a> + this.getTableList(data); + } - < - /span> - } - if(com == "href") - { - const content = ( - - ); - - - return {rowData.href} - } - - - } - } - /> + componentDidUpdate(prevProps, prevState) { + // 参数分别为改变之前的数据状态对象 + if (prevState.key_word != this.state.key_word && !this.state.key_word) { + this.sureFn(); + } + } + componentWillMount() { + this.setState({ tableHeight: window.innerHeight - 430 }); + } + onBack() { + this.refs.preview.popPage(); + } + onClose() { + this.setState({ preview_visible: false }); + } + render() { + const { current, pageSize } = this.state; + return ( +
+ this.tabChange(e)}> +
+
{" "} + { + console.log("清空"); - < - /div> < - /TabPage> - { - this.state.preview_visible ? ( -
-
-
- {this.onClose(e)}} /> -
-
-
-
- -
- -
- -
- -
-

落地页预览:

-
this.handleSize(375,667)}>主流机型375x667
this.handleSize(375,750)}>全面屏375x750
this.handleSize(375,812)}>刘海屏375x812
this.handleSize(375,500)}>小屏手机375x500
-
- -
-

页面类型:

- {this.onpageChange(e)} } value={this.state.showPage} > - 落地页 - 列表页 - 详情页 - + this.setState({ key_word: "" }); + }} + onChange={(e) => { + console.log(777777); + console.log(e); + this.setState({ key_word: e }); + }} + wordSearch={(e) => { + this.sureFn(); + }} + />{" "} +
{" "} +
+ { + this.countChange(e); + }} + page={this.state.page} + pageChange={(e) => { + this.pageChange(e); + }} + checkChange={(selection) => { + console.log(selection); + }} + ComponentHandler={(com, rowData) => { + if (com == "thumb") { + return ( + + } + > + + + ); + } + if (com == "name") { + return ( + + {" "} + + ); + } -
-
-
+ if (com == "client") { + return ( + + {" "} + + {" "} + + {menu.pageStatus(parseInt(rowData.client))} + + ); + } + if (com == "page") { + return ( + + {" "} + + {" "} + + {menu.pageTypeStatus(parseInt(rowData.page))} + + ); + } + if (com == "edit") { + return ( + + { + this.editFn(e, rowData); + }} + > + {" "} + 编辑{" "} + {" "} + { + this.onPreview(e, rowData); + }} + className="grid-link" + > + {" "} + 预览{" "} + + + ); + } + if (com == "href") { + const content = ; -
-
-
- ) :null - - - } - -
- ) - } + return ( + + {" "} + {rowData.href}{" "} + + ); + } + }} + /> +
{" "} + + {this.state.preview_visible ? ( +
+
+
+ { + this.onClose(e); + }} + /> +
+
+
+
+ +
+
+ +
+
+

落地页预览:

+
+
this.handleSize(375, 667)} + > + 主流机型375x667 +
+
this.handleSize(375, 750)} + > + 全面屏375x750 +
+
this.handleSize(375, 812)} + > + 刘海屏375x812 +
+
this.handleSize(375, 500)} + > + 小屏手机375x500 +
+
+
+ +
+

页面类型:

+ { + this.onpageChange(e); + }} + value={this.state.showPage} + > + 落地页 + 列表页 + 详情页 + +
+
+
+
+
+
+ ) : null} +
+ ); + } } diff --git a/src/pages/exchangepage/template/main.js b/src/pages/exchangepage/template/main.js index 40879735..6efd0de0 100644 --- a/src/pages/exchangepage/template/main.js +++ b/src/pages/exchangepage/template/main.js @@ -493,7 +493,7 @@ export default class mytemplate extends React.Component{

落地页预览:

-
this.handleSize(375,667)}>主流机型375x667
this.handleSize(375,750)}>全面屏375x750
this.handleSize(375,812)}>刘海屏375x812
this.handleSize(375,500)}>小屏手机375x500
+
this.handleSize(375,667)}>主流机型375x667
this.handleSize(375,750)}>全面屏375x750
this.handleSize(375,812)}>刘海屏375x812
this.handleSize(375,500)}>小屏手机375x500

落地页类型:

{this.onTypeChange(e)} } value={this.state.showType} > 兑换码 diff --git a/src/pages/plan/key/edit.js b/src/pages/plan/key/edit.js index 1edb8c9f..233d9dc6 100644 --- a/src/pages/plan/key/edit.js +++ b/src/pages/plan/key/edit.js @@ -1095,7 +1095,7 @@ export default class acclist extends React.Component{ return( -
+