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

Merge branch 'couponV1.5' of https://codeup.aliyun.com/5f9118049cffa29cfdd3be1c/marketing/frontend into couponV1.5

This commit is contained in:
zhangds 2022-08-31 09:45:26 +08:00
parent 2a695254d3 eb79a228f2
commit 3afd84ad17
14 changed files with 1004 additions and 1342 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/App.css
View File

@ -13,22 +13,27 @@
.zent-grid-th[data-zv="9.11.0"] {
background: #fff !important;
}
.zent-grid-th[data-zv="9.11.0"],
.zent-grid-td[data-zv="9.11.0"] {
border-bottom-color: #f1f1f1 !important;
}
.zent-swiper__dots-small[data-zv="9.11.0"] .zent-swiper__dots-item {
height: 8px;
width: 8px;
margin: 12px 8px;
}
/* 账号新增岗位 */
.zent-form-horizontal[data-zv="9.11.0"] .zent-form-label {
margin-right: 58px !important;
}
#accadd .zent-form-horizontal[data-zv="9.11.0"] .zent-form-label {
flex-basis: 90px !important;
}
#accadd .zent-form-horizontal[data-zv="9.11.0"] .zent-form-control-content {
margin-left: 0;
}
@ -36,16 +41,20 @@
.zent-form-error[data-zv="9.11.0"] {
margin-left: 10px;
}
.zent-radio-button[data-zv="9.11.0"]:first-child {
border-radius: 6px 0 0 6px !important;
}
.zent-radio-button[data-zv="9.11.0"]:last-child {
border-radius: 0 6px 6px 0 !important;
}
.zent-radio-button[data-zv="9.11.0"] {
min-width: 90px !important;
line-height: 25px !important;
}
.zent-radio-button--checked[data-zv="9.11.0"] {
font-weight: bold !important;
}
@ -60,11 +69,13 @@
border-left: 0 !important;
border-right: 0 !important;
}
/* 表格样式 */
.zent-card[data-zv="9.11.0"] {
border-radius: 6px !important;
overflow: scroll !important;
}
.zent-card-header[data-zv="9.11.0"] {
background: #f9fafc;
}
@ -75,17 +86,21 @@
flex-direction: column;
justify-content: space-between;
}
.zent-dialog-r-title-text {
color: #333;
font-weight: bold;
}
.zent-zoom-enter-done .zent-btn {
width: 20%;
}
.zent-zoom-enter-done .btngroup {
display: flex !important;
justify-content: flex-end !important;
}
.surebtnstyle {
color: #2b66f2 !important;
}
@ -98,6 +113,7 @@
flex-basis: 80px !important;
justify-content: flex-start;
}
/* .zent-switch::after{
content: '开'!important;
margin-left: 10px;
@ -117,6 +133,7 @@
font-size: 16px;
margin-right: 6px;
}
.zent-form-label[data-zv="9.11.0"].zent-form-label-required::before {
content: "" !important;
display: inline-block;
@ -215,11 +232,11 @@
/* 日期整体样式 */
.zent-datepicker .zent-datepicker-trigger {
border-radius: 0 !important;
}
&:hover {
border-color: #296bef !important;
background-color: #f7f9fc !important;
}
.zent-datepicker .zent-datepicker-trigger:hover {
border-color: #296bef !important;
background-color: #f7f9fc !important;
}
/* 下拉框统一样式 */
@ -228,11 +245,12 @@
border-left: 0 !important;
border-right: 0 !important;
border-radius: 0 !important;
&:hover {
background-color: #f7f9fc !important;
.zent-select-v2-search {
background-color: #f7f9fc !important;
}
}
}
.zent-select-v2:hover {
background-color: #f7f9fc !important;
}
.zent-select-v2:hover .zent-select-v2-search {
background-color: #f7f9fc !important;
}

43
src/pages/exchangecode/exchangecodeAdd/index.jsx
View File

@ -36,7 +36,7 @@ import "./index.less"
import moment from "moment"
import Grid from "@/components/gird/main.js"
import { isSameDay } from "date-fns"
import { Column2, rulesInfo, codeInfo, state } from "./utils"
import { Column2, rulesInfo, codeInfo, init } from "./utils"
const initArray = (targetNum) => {
return Array.from({ length: targetNum }, (_, index) => index)
}
@ -44,7 +44,7 @@ const initArray = (targetNum) => {
export default class exchangeAdd extends React.Component {
constructor(props) {
super(props)
this.state = { ...state }
this.state = { ...init() }
}
componentDidMount() {
@ -1143,7 +1143,7 @@ export default class exchangeAdd extends React.Component {
rules={codeInfo}
ref='code_info'
className='addform'>
<FormItem labelname='营销计划' prop='planId' id='planId'>
<FormItem labelname='归属计划' prop='planId' id='planId'>
<Select
onChange={(e) => this.handleChange(e, "planId")}
clearable
@ -1157,7 +1157,7 @@ export default class exchangeAdd extends React.Component {
alignment={"left"}
/>
</FormItem>
<FormItem labelname='key批次' prop='keyBatchId' id='keyBatchId'>
<FormItem labelname='归属key' prop='keyBatchId' id='keyBatchId'>
<Select
onChange={(e) => this.handleChange(e, "keyBatchId")}
clearable
@ -1181,19 +1181,40 @@ export default class exchangeAdd extends React.Component {
value={this.state.codeInfo.code_name}
placeholder={"请输入兑换码名称"}
labelWidth={"0px"}
maxLength={10}
maxLength={12}
height={"36px"}
width={"520px"}
alignment={"left"}
/>
</FormItem>
<FormItem labelname='发放总量' prop='issued' id='issued'>
<div className='line'>{this.state.codeInfo.issued}</div>
</FormItem>
<FormItem labelname='剩余库存量' prop='issued' id='issued'>
<div className='line'>{this.state.codeInfo.stock}</div>
</FormItem>
{this.state.isState === 2 ? (
<>
<FormItem labelname='发放总量' prop='issued' id='issued'>
<div className='line'>{this.state.codeInfo.issued}</div>
</FormItem>
<FormItem labelname='剩余库存量' prop='issued' id='issued'>
<div className='line'>{this.state.codeInfo.stock}</div>
</FormItem>
</>
) : (
<FormItem labelname='发放总量' prop='issued' id='issued'>
<Ipt
onChange={(e) => this.handleChange(e, "issued")}
onClearItem={() => this.handleChange("", "issued")}
value={this.state.codeInfo.issued}
placeholder={"请输入发放总量"}
labelWidth={"0px"}
maxLength={6}
countShow={false}
unit='条'
height={"36px"}
width={"520px"}
alignment={"left"}
/>
</FormItem>
)}
<FormItem
labelname='使用说明'
prop='describe'

114
src/pages/exchangecode/exchangecodeAdd/utils.js
View File

@ -10,6 +10,7 @@ export const rulesInfo = {
date_time: [{ type: "required", message: "请选择生效时间段" }]
}
/* 商品范围列表 */
export const Column2 = [
{
title: "商品ID",
@ -105,59 +106,62 @@ export const Column2 = [
}
]
export const state = {
uploading: false, //上传中
model: {
//数据模型不可少
product_id: "",
product_type: "1",
contract_price: "",
official_price: "",
cost_price: "",
quantity: "",
product_name: "",
show_url: "",
describe_url: "",
detail_url: "",
weight: "0"
},
codeInfo: {
//数据模型不可少
code_name: "",
issued: "", //发放总量
describe: "",
date_time: "",
range: "",
stock: "",
planId: "",
keyBatchId: ""
},
isload: false,
tempdata: [],
oldProduct: [],
deleteProduct: [], //审批删除的商品
new_product: [],
cur_product: null,
productOption: [],
rankoptions: [],
rank: [],
recall_visible: false,
approvalLoading: false,
timer: 3,
paytype: 3,
reseller: null,
payment_direction: ["对私账户", "对公账户", "预付款扣除"],
isAudit: false,
approvalsStatus: false,
oldTable: [],
product_title: "新建商品",
plan_time: "",
direct_reseller_id: 0,
newGoodsBtnLoading: false,
tableLoading: false,
newGoldLoading: false,
addIsType: "",
isState: 0,
planSelectData: [] /* 营销计划数据 */,
keyBatchSelectData: [] /* 营销计划ID */
/* 初始化数据 */
export const init = () => {
return {
uploading: false, //上传中
model: {
//数据模型不可少
product_id: "",
product_type: "1",
contract_price: "",
official_price: "",
cost_price: "",
quantity: "",
product_name: "",
show_url: "",
describe_url: "",
detail_url: "",
weight: "0"
},
codeInfo: {
//数据模型不可少
code_name: "",
issued: "", //发放总量
describe: "",
date_time: "",
range: "",
stock: "",
planId: "",
keyBatchId: ""
},
isload: false,
tempdata: [],
oldProduct: [],
deleteProduct: [], //审批删除的商品
new_product: [],
cur_product: null,
productOption: [],
rankoptions: [],
rank: [],
recall_visible: false,
approvalLoading: false,
timer: 3,
paytype: 3,
reseller: null,
payment_direction: ["对私账户", "对公账户", "预付款扣除"],
isAudit: false,
approvalsStatus: false,
oldTable: [],
product_title: "新建商品",
plan_time: "",
direct_reseller_id: 0,
newGoodsBtnLoading: false,
tableLoading: false,
newGoldLoading: false,
addIsType: "",
isState: 0,
planSelectData: [] /* 营销计划数据 */,
keyBatchSelectData: [] /* 营销计划ID */
}
}

0
src/pages/exchangepage/couponTemplate/goodDetail/config.js Normal file
View File

0
src/pages/exchangepage/couponTemplate/goodDetail/preview.js Normal file
View File

43
src/pages/exchangepage/couponTemplate/goodsPage/componentLib/main.js Normal file
View File

@ -0,0 +1,43 @@
import React from 'react';
import "./main.less"
export default class componentLib extends React.Component {
constructor(props) {
super(props)
}
componentWillMount(e) {
};
//组件将要销毁阶段
componentWillUnmount() {
}
render() {
return (
<div className='componentLib'>
<h4>基础组件</h4>
<ul>
<li>
轮播图
</li>
<li>
背景图
</li>
<li>
搜索栏
</li>
<li>
底部栏
</li>
<li>
标题
</li>
</ul>
</div>
)
}
}

31
src/pages/exchangepage/couponTemplate/goodsPage/componentLib/main.less Normal file
View File

@ -0,0 +1,31 @@
.componentLib{
width:180px;
height: 100%;
background: #fff;
position: absolute;
top: 0;
right:-190px;
padding: 15px;
box-sizing: border-box;
h4{
padding: 15px 0;
}
ul{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
li{
margin: 0 0 15px 0;
border-radius: 2px;
width: 72px;
height: 72px;
font-size: 12px;
color: #666;
background: #f99;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
}
}

284
src/pages/exchangepage/couponTemplate/goodsPage/config/main.js Normal file
View File

@ -0,0 +1,284 @@
import React from 'react';
import { ColorPicker, ImageUpload, Tooltip, Notify, RadioGroup, RadioButton, Icon } from 'zent';
import "@/assets/comm.css"
import Form from "@/components/form/main"
import FormItem from "@/components/form-item/main"
import { uploadImg, handelResponse } from "@/assets/api.js"
import Wangeditor from '@/pages/exchangepage/edittemplate/wangeditorCom.js'
export default class edittemplate extends React.Component {
constructor(props) {
super(props)
this.state = {
model: {
top_image: "",
list: "2",
font_color: "#f1f2f3",
button_color: "#FACD6A",
describe: { type: "", content: "", bg_image: '' }
}
}
}
componentWillMount(e) {
let config = JSON.parse(sessionStorage.getItem('editorConfig'));
if (config && config.couponList && config.couponList.product_list) {
this.setState({ model: config.couponList.product_list });
}
}
onListChange(e) {
let model = this.state.model;
model.list = e.target.value;
this.setState({ model: model })
this.props.setarrayType(e.target.value);
}
//活动说明
onactivityChange(e) {
let model1 = this.state.model;
model1.describe.type = e.target.value;
this.setState({ model: model1 })
this.props.setactiveType(e.target.value);
}
hasItemFn(c) {
let model1 = this.state.model;
if (c == model1.describe.type) {
model1.describe.type = '';
this.setState({ model: model1 });
this.props.setactiveType('');
}
}
//顶部banner
onUploadChange(files) {
if (files.length > 0 && files[0].status == "success") {
let model = this.state.model;
model.top_image = files[0].src;
this.setState({ model: model })
this.props.setbanner(files[0].src);
} else {
let model = this.state.model;
model.top_image = '';
this.setState({ model: model })
this.props.setbanner("");
}
};
//悬浮富文本
getsusEditext(c) {
let model1 = this.state.model;
model1.describe.content = c;
this.setState({ model: model1 });
this.props.seteditorHtml(c);
}
//富文本
getEditext(c) {
let model1 = this.state.model;
model1.describe.content = c;
this.setState({ model: model1 });
this.props.seteditorHtml(c);
}
//底部描述图
onUploadChange2(files) {
if (files.length > 0 && files[0].status == "success") {
let model1 = this.state.model;
model1.describe.bg_image = files[0].src;
this.setState({ model: model1 })
this.props.setbottomImg(files[0].src);
} else {
let model1 = this.state.model;
model1.describe.bg_image = '';
this.setState({ model: model1 })
this.props.setbottomImg("");
}
};
onUploadError = (type, data) => {
if (type === 'overMaxAmount') {
Notify.error(`最多可上传 ${data.maxAmount} 张图片`);
} else if (type === 'overMaxSize') {
Notify.error(`图片大小不能超过 ${data.formattedMaxSize}`);
}
};
handleChange = (color) => {
let model1 = this.state.model;
model1.font_color = color;
this.setState({
model: model1
});
this.props.setButtonbgcolor(color);
}
handleChange1 = (color) => {
let model1 = this.state.model;
model1.button_color = color;
this.setState({
model: model1
});
this.props.setButtoncolor(color);
}
// 字体颜色
fontcolor(cor) {
let models = this.state.model;
models.button_color = cor;
this.setState({ model: models });
this.props.setButtoncolor(cor);
}
// 背景颜色
bgcolor(cor) {
let models = this.state.model;
models.font_color = cor;
this.setState({ model: models });
this.props.setButtonbgcolor(cor);
}
onUpload = (file, report) => {
let self = this;
console.log('上传头像', file);
return new Promise((resolve, reject) => {
let path = ""
let formdata = new FormData();
formdata.append("file", file)
formdata.append("path", "common_image")
uploadImg(formdata).then((res) => {
handelResponse(res, (req, msg) => {
path = req.path;
}, (err) => {
reject();
})
});
let count = 0;
const update = () => {
if (path) {
resolve(
path
);
}
else {
if (count < 100) {
count += 2;
report(count);
setTimeout(update, 500);
console.log("上传中")
}
else {
reject();
}
}
};
setTimeout(update, 500);
});
};
componentWillUnmount() {
let oldobj = JSON.parse(sessionStorage.getItem('editorConfig'));
if (oldobj && oldobj.couponList) {
let couponList = oldobj.couponList
couponList.product_list = this.state.model;
oldobj.couponList = couponList;
} else {
oldobj = {}
let couponList = {}
couponList.product_list = this.state.model;
oldobj.couponList = couponList;
}
sessionStorage.setItem('editorConfig', JSON.stringify(oldobj));
}
render() {
return (
<div style={{ width: "92%", "margin": "0 auto", "overflow": "auto", "maxHeight": "100%" }}>
<Form model={this.state.model} ref="form1">
<div style={{ fontWeight: 'bold' }}>样式</div>
<div style={{ marginBottom: '24px' }}>
<FormItem labelname="" prop="list" labelwidth="0px" required={false}>
<RadioGroup onChange={(e) => { this.onListChange(e) }} value={this.state.model.list}>
<RadioButton value={"2"}>轮播</RadioButton>
<RadioButton value={"1"}>列表</RadioButton>
<RadioButton value={"3"}>矩阵</RadioButton>
</RadioGroup>
</FormItem>
</div>
{
this.state.model.list == 2 ? <FormItem labelname="字体颜色:" prop="button_color" id="button_color" labelwidth="80px">
<div className="colorItembg dfleac" >
<span className={this.state.model.font_color == '#ffffff' ? "cicle activecicle" : "cicle"} style={{ border: '1px solid #f1f2f3' }} onClick={() => { this.bgcolor('#ffffff') }}></span>
<span className={this.state.model.font_color == '#000000' ? "activecicle cicle cicle2" : "cicle cicle2"} onClick={() => { this.bgcolor('#000000') }}></span>
<div className="selfset" >
<ColorPicker className="setbgColor" color={this.state.model.font_color} onChange={this.handleChange} /></div>
</div>
</FormItem> : null
}
{
this.state.model.list == 2 ? <FormItem labelname="按钮颜色:" prop="button_color" id="button_color" labelwidth="80px">
<div className="colorItemfont dfleac">
<span className={this.state.model.button_color == '#ffffff' ? "cicle activecicle" : "cicle"} style={{ border: '1px solid #f1f2f3' }} onClick={() => { this.fontcolor('#ffffff') }}></span>
<span className={this.state.model.button_color == '#04C160' ? "activecicle cicle cicle6" : "cicle cicle6"} onClick={() => { this.fontcolor('#04C160') }}></span>
<span className={this.state.model.button_color == '#AE99D3' ? "activecicle cicle cicle3" : "cicle cicle3"} onClick={() => { this.fontcolor('#AE99D3') }}></span>
<span className={this.state.model.button_color == '#FACD6A' ? "activecicle cicle cicle4" : "cicle cicle4"} onClick={() => { this.fontcolor('#FACD6A') }}></span>
<span className={this.state.model.button_color == '#FE7962' ? "activecicle cicle cicle5" : "cicle cicle5"} onClick={() => { this.fontcolor('#FE7962') }}></span>
<div className="selfset" >
<ColorPicker className="setbgColor" color={this.state.model.button_color} onChange={this.handleChange1} />
</div>
</div>
</FormItem> : null
}
<div style={{ marginTop: '20px', fontWeight: 'bold' }}>基础图层</div>
<FormItem labelname="顶部banner:" prop="top" id="top" labelwidth="100px">
<ImageUpload
className="zent-image-upload-demo"
maxSize={5 * 1024 * 1024}
maxAmount={1}
multiple
sortable
tips="单张图片不超过 5M"
onChange={(e) => { this.onUploadChange(e) }}
onUpload={this.onUpload}
defaultFileList={this.state.model.top_image ? [{ 'src': this.state.model.top_image }] : null}
onError={this.onUploadError}
/>
</FormItem>
<div className="activeTip">
<FormItem required={false} labelname="活动说明:" prop="bottom" id="bottom" labelwidth="100px">
<RadioGroup onChange={(e) => { this.onactivityChange(e) }} value={this.state.model.describe.type}>
<RadioButton onClick={() => this.hasItemFn(1)} value={"1"}>图片</RadioButton>
<RadioButton onClick={() => this.hasItemFn(2)} value={"2"}>悬浮</RadioButton>
<RadioButton onClick={() => this.hasItemFn(3)} value={"3"}>富文本</RadioButton>
</RadioGroup>
</FormItem>
<Tooltip trigger="hover" position="top-left" title="非必选项，圆形组件悬浮，适用于长文本">
<Icon type="help-circle" className="imgTip" />
</Tooltip>
</div>
{
this.state.model.describe.type == 1 ? <FormItem required={false} labelname=" " prop="bottom" id="bottom" labelwidth="100px">
<ImageUpload
className="zent-image-upload-demo"
maxSize={5 * 1024 * 1024}
maxAmount={1}
multiple
sortable
tips="单张图片不超过 5M"
onChange={(e) => { this.onUploadChange2(e) }}
onUpload={this.onUpload}
onError={this.onUploadError}
defaultFileList={this.state.model.describe.bg_image ? [{ 'src': this.state.model.describe.bg_image }] : null}
/>
</FormItem> : this.state.model.describe.type == 2 ? <Wangeditor pageType="goodsuseditor" setEdittext={c => this.getsusEditext(c)} /> : this.state.model.describe.type == 3 ? <Wangeditor pageType="goodeditor" setEdittext={c => this.getEditext(c)} /> : null
}
</Form>
</div>
)
}
}

0
src/pages/exchangepage/couponTemplate/goodsPage/preview/main.js Normal file
View File

370
src/pages/exchangepage/couponTemplate/landingPage/config/main.js Normal file
View File

@ -0,0 +1,370 @@
import React from 'react';
import { Button, Select, ImageUpload, ColorPicker, NumberInput } from 'zent';
import "./main.less"
import "../../../edittemplate/goodstemplate.less"
import { Notify, RadioGroup, RadioButton } from 'zent';
import Ipt from "@/components/input/main"
import Form from "@/components/form/main"
import FormItem from "@/components/form-item/main"
import { uploadImg, handelResponse, getThemeType } from "@/assets/api.js"
import Wangeditor from '@/pages/exchangepage/edittemplate/wangeditorCom.js'
export default class edittemplate extends React.Component {
constructor(props) {
super(props)
this.state = {
isSystemModel: false,
mouldWay: [],
model: {
title: "落地页标题12",
top_image: "",
middle_image: "",
describe: { type: "", content: "", bg_image: '' },
bg_color: "#EEEEEE",
font_color: "#000000",
sort: 1,
type_id: { key: 1, text: '通用' }
},
}
}
componentWillMount(e) {
let self = this;
let config = JSON.parse(sessionStorage.getItem('editorConfig'));
let moudTyle = sessionStorage.getItem('mouldType');
if (moudTyle && moudTyle == 0) {
this.setState({ isSystemModel: true });
}
if (config && config.couponList && config.couponList.land) {
let data = config.couponList.land;
this.setState({ model: data });
} else {
}
getThemeType().then(res => {
handelResponse(res, (req, msg) => {
let typeListSource = res.data.map(it => {
return { key: it.id, text: it.name }
});
self.setState({ mouldWay: typeListSource });
}, (err) => {
})
}).catch(err => {
});
}
handleChange = (color) => {
let model1 = this.state.model;
model1.bg_color = color;
this.setState({
model: model1
});
this.props.landbgcolor(color);
}
handleChange1 = (color) => {
let model1 = this.state.model;
model1.font_color = color;
this.setState({
model: model1
});
this.props.landftcolor(color);
}
onactivityChange(e) {
let active = this.state.model;
active.describe.type = e.target.value;
if (active.describe.bg_image) {
active.describe.bg_image = "";
}
this.setState({ model: active })
this.props.setbanner(this.state.model);
}
hasItemFn(c) {
let model1 = this.state.model;
if (c == model1.describe.type) {
model1.describe.type = '';
model1.describe.type = 0;
this.setState({ model: model1 });
this.props.setbanner(this.state.model);
}
}
onmouldChange(c) {
let model1 = this.state.model;
model1.type_id = c;
this.setState({ model: model1 });
this.props.setbanner(model1);
}
//上传顶部banner
onUploadChange(files) {
if (files.length > 0 && files[0].status == "success") {
let model = this.state.model;
model.top_image = files[0].src;
this.setState({ model: model })
this.props.setbanner(model);
} else {
let model = this.state.model;
model.top_image = '';
this.setState({ model: model })
this.props.setbanner(model);
}
};
//上传输入框
onUploadChange1(files) {
if (files.length > 0 && files[0].status == "success") {
let model = this.state.model;
model.middle_image = files[0].src;
this.setState({ model: model })
this.props.setbanner(model);
} else {
let model = this.state.model;
model.middle_image = '';
this.setState({ model: model })
this.props.setbanner(model);
}
};
//上传使用说明
onUploadChange2(files) {
if (files.length > 0 && files[0].status == "success") {
let model = this.state.model;
model.describe.bg_image = files[0].src;
this.setState({ model: model })
this.props.setbanner(model);
} else {
let model = this.state.model;
model.describe.bg_image = "";
this.setState({ model: model })
this.props.setbanner(model);
}
};
onUploadError = (type, data) => {
if (type === 'overMaxAmount') {
Notify.error(`最多可上传 ${data.maxAmount} 张图片`);
} else if (type === 'overMaxSize') {
Notify.error(`图片大小不能超过 ${data.formattedMaxSize}`);
}
};
sortFn(c) {
let model1 = this.state.model;
model1.sort = c;
this.setState({ model: model1 });
this.props.setbanner(model1);
}
getEditext(c) {
let model1 = this.state.model;
model1.describe.content = c;
this.setState({ model: model1 });
this.props.setbanner(model1);
}
// 字体颜色
fontcolor(cor) {
let model1 = this.state.model;
model1.font_color = cor;
this.setState({ model: model1 });
this.props.landftcolor(cor);
}
// 背景颜色
bgcolor(cor) {
let model1 = this.state.model;
model1.bg_color = cor;
this.setState({ model: model1 });
this.props.landbgcolor(cor);
}
onUpload = (file, report) => {
let self = this;
return new Promise((resolve, reject) => {
let path = ""
let formdata = new FormData();
formdata.append("file", file)
formdata.append("path", "common_image")
uploadImg(formdata).then((res) => {
handelResponse(res, (req, msg) => {
path = req.path;
}, (err) => {
reject();
})
});
let count = 0;
const update = () => {
if (path) {
resolve(
path
);
}
else {
if (count < 100) {
count += 2;
report(count);
setTimeout(update, 500);
console.log("上传中")
}
else {
reject();
}
}
};
setTimeout(update, 500);
});
};
//组件将要销毁阶段
componentWillUnmount() {
let oldobj = JSON.parse(sessionStorage.getItem('editorConfig'));
if (oldobj && oldobj.couponList) {
let couponList = oldobj.couponList
couponList.land = this.state.model;
oldobj.couponList = couponList;
} else {
oldobj = {}
let couponList = {}
couponList.land = this.state.model;
oldobj.couponList = couponList;
}
sessionStorage.setItem('editorConfig', JSON.stringify(oldobj));
}
render() {
return (
<div style={{ width: "92%", "margin": "0 auto 60px", "overflow": "auto", "maxHeight": "100%" }}>
<div style={{ fontWeight: 'bold' }}>基础设置</div>
<Form model={this.state.model} ref="form1">
<FormItem labelname="落地页标题:" prop="title" id="title" labelwidth="100px">
<Ipt onChange={(e) => {
let model2 = this.state.model;
model2.title = e;
this.setState({ model: model2 })
this.props.settitle(e)
}}
onClearItem={(e) => {
let model2 = this.state.model;
model2.title = "";
this.setState({ model: model2 })
}}
value={this.state.model.title} placeholder={"请输入"} labelWidth={'0px'} maxLength={12} height={'36px'} width={'300px'} alignment={'left'} />
</FormItem>
{
this.state.isSystemModel ? (
<FormItem labelname="权重" required={false} prop="sort" id="sort" labelwidth="100px">
<NumberInput onChange={c => this.sortFn(c)} value={this.state.model.sort} placeholder="请输入数字" integer={true} max={999} />
</FormItem>) : null
}
{
this.state.isSystemModel ? (
<FormItem labelname="模板分类" labelwidth="100px" prop="scope" id="scope">
<Select options={this.state.mouldWay} onChange={(e) => { this.onmouldChange(e) }} placeholder="选择一项" width={300} value={this.state.model.type_id} />
</FormItem>
) : null
}
<div style={{ marginTop: '20px', marginBottom: '15px', fontWeight: 'bold' }}>样式</div>
<FormItem labelname="背景颜色:" prop="font_color" id="font_color" labelwidth="80px">
<div className="colorItembg dfleac">
<span className="cicle" style={{ border: '1px solid #f1f2f3' }} className={this.state.model.bg_color == '#ffffff' ? "cicle activecicle" : "cicle"} onClick={() => { this.bgcolor('#ffffff') }}></span>
<span className={this.state.model.bg_color == '#EEEEEE' ? "activecicle cicle cicle1" : "cicle cicle1"} onClick={() => { this.bgcolor('#EEEEEE') }}></span>
<span className={this.state.model.bg_color == '#000000' ? "activecicle cicle cicle2" : "cicle cicle2"} onClick={() => { this.bgcolor('#000000') }}></span>
<div className="selfset" >
<ColorPicker className="setbgColor" color={this.state.model.bg_color} onChange={this.handleChange} />
</div>
</div>
</FormItem>
<FormItem labelname="字体颜色:" prop="bg_color" id="bg_color" labelwidth="80px">
<div className="colorItemfont dfleac">
<span style={{ border: '1px solid #f1f2f3' }} className={this.state.model.font_color == '#ffffff' ? "cicle activecicle" : "cicle"} onClick={() => { this.fontcolor('#ffffff') }}></span>
<span className={this.state.model.font_color == '#04C160' ? "activecicle cicle cicle6" : "cicle cicle6"} onClick={() => { this.fontcolor('#04C160') }}></span>
<span className={this.state.model.font_color == '#AE99D3' ? "activecicle cicle cicle3" : "cicle cicle3"} onClick={() => { this.fontcolor('#AE99D3') }}></span>
<span className={this.state.model.font_color == '#FACD6A' ? "activecicle cicle cicle4" : "cicle cicle4"} onClick={() => { this.fontcolor('#FACD6A') }}></span>
<span className={this.state.model.font_color == '#FE7962' ? "activecicle cicle cicle5" : "cicle cicle5"} onClick={() => { this.fontcolor('#FE7962') }}></span>
<div className="selfset">
<ColorPicker className="setbgColor" color={this.state.model.font_color} onChange={this.handleChange1} />
</div>
</div>
</FormItem>
<div style={{ marginTop: '20px', fontWeight: 'bold' }}>基础图层</div>
<FormItem labelname="顶部banner:" prop="top" id="top" labelwidth="100px">
<ImageUpload
className="zent-image-upload-demo"
maxSize={5 * 1024 * 1024}
maxAmount={1}
multiple
sortable
tips="单张图片不超过 5M"
onChange={(e) => { this.onUploadChange(e) }}
onUpload={this.onUpload}
defaultFileList={this.state.model.top_image ? [{ 'src': this.state.model.top_image }] : null}
onError={this.onUploadError}
/>
</FormItem>
<FormItem labelname="输入框:" prop="center" id="center" labelwidth="100px">
<ImageUpload
className="zent-image-upload-demo"
maxSize={5 * 1024 * 1024}
maxAmount={1}
multiple
sortable
tips="单张图片不超过 5M"
onChange={(e) => { this.onUploadChange1(e) }}
defaultFileList={this.state.model.middle_image ? [{ 'src': this.state.model.middle_image }] : null}
onUpload={this.onUpload}
onError={this.onUploadError}
/>
</FormItem>
<FormItem myClassName="activeSet" required={false} labelname="活动说明:" prop="bottom" id="bottom" labelwidth="100px">
<RadioGroup onChange={(e) => { this.onactivityChange(e) }} value={this.state.model.describe.type}>
<RadioButton value={"1"} onClick={() => this.hasItemFn(1)}>图片</RadioButton>
<RadioButton value={"2"} onClick={() => this.hasItemFn(2)}>富文本</RadioButton>
</RadioGroup>
</FormItem>
{
this.state.model.describe.type == 1 ? <FormItem required={false} labelname=" " prop="bottom" id="bottom" labelwidth="100px">
<ImageUpload
className="zent-image-upload-demo"
maxSize={5 * 1024 * 1024}
maxAmount={1}
multiple
sortable
tips="单张图片不超过 5M"
onChange={(e) => { this.onUploadChange2(e) }}
onUpload={this.onUpload}
onError={this.onUploadError}
defaultFileList={this.state.model.describe.bg_image ? [{ 'src': this.state.model.describe.bg_image }] : null}
/>
</FormItem> : null
}
{
this.state.model.describe.type == 2 ? <FormItem required={false} labelname="背景图案:" prop="bottom" id="bottom" labelwidth="100px">
<ImageUpload
className="zent-image-upload-demo"
maxSize={5 * 1024 * 1024}
maxAmount={1}
multiple
sortable
tips="单张图片不超过 5M"
onChange={(e) => { this.onUploadChange2(e) }}
onUpload={this.onUpload}
onError={this.onUploadError}
defaultFileList={this.state.model.describe.bg_image ? [{ 'src': this.state.model.describe.bg_image }] : null}
/>
</FormItem> : null
}
{this.state.model.describe.type == 2 ? <Wangeditor pageType="landeditor" setEdittext={c => this.getEditext(c)} /> : null}
</Form>
</div>
)
}
}

0
src/pages/exchangepage/couponTemplate/landingPage/config/main.less Normal file
View File

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

@ -30,6 +30,10 @@ import Whitegoods from './whitegoods' //白名单商品页面
import Whitedetails from './whitedetails' //白名单详情页
import Reduce from './reduce' //商品详情页立减金
import ReduceConfig from './reduceConfig' //商品详情立减金页面
// 优惠券
import CouponLandingForm from '../couponTemplate/landingPage/config/main' //优惠券落地页表单
import CouponGoodsListForm from '../couponTemplate/goodsPage/config/main' //优惠券商品列表页
import CouponComLib from '../couponTemplate/goodsPage/componentLib/main' //优惠券组件库
// import
import _ from 'lodash'
//落地页
@ -144,8 +148,19 @@ export default class edittemplate extends React.Component {
}
whiteList['land'].title = newEditor.title
whiteList['land'].sort = newEditor.sort
//优惠券
let couponList = newEditor.couponList
if (!couponList) {
couponList = {}
couponList.land = model
couponList.product_list = product_list
couponList.product_detail = product_detail
}
couponList['land'].title = newEditor.title
couponList['land'].sort = newEditor.sort
newEditor.exchangeList = exchangeList
newEditor.whiteList = whiteList
newEditor.couponList=couponList;
if (template == 1) { //1-白名单 2-兑换码
this.setState({
model: newEditor.whiteList.land,
@ -164,7 +179,7 @@ export default class edittemplate extends React.Component {
this.setState({ pagedisable: true })
}
} else {//新增数据
let obj = {}, whiteList = {}, exchangeList = {}
let obj = {}, whiteList = {}, exchangeList = {},couponList = {}
let sourceObj = {//模板数据结构
land: model,
product_list,
@ -172,8 +187,10 @@ export default class edittemplate extends React.Component {
}
whiteList = _.cloneDeep(sourceObj);
exchangeList = _.cloneDeep(sourceObj);
couponList = _.cloneDeep(sourceObj);
obj.exchangeList = exchangeList
obj.whiteList = whiteList
obj.couponList = whiteList
sessionStorage.setItem('editorConfig', JSON.stringify(obj))
}
}
@ -432,7 +449,6 @@ export default class edittemplate extends React.Component {
}
onmodelChange(e) {
this.setState({ showType: e.target.value, activeNavStatus: 1 })
let mouldType = sessionStorage.getItem('mouldType')
let editorData = JSON.parse(sessionStorage.getItem('editorConfig'))
if (e.target.value == 1) {
let whiteData = editorData.whiteList
@ -447,6 +463,10 @@ export default class edittemplate extends React.Component {
let exchangeData = editorData.exchangeList
let { land, product_list, product_detail } = exchangeData;
this.setState({ model: land, product_list, product_detail })
}else if (e.target.value == 2) {
let couponData = editorData.couponList
let { land, product_list, product_detail } = couponData;
this.setState({ model: land, product_list, product_detail })
}
}
onPreview() {
@ -614,7 +634,7 @@ export default class edittemplate extends React.Component {
<RadioButton value={1} disabled={this.state.pagedisable}>
白名单
</RadioButton>
<RadioButton disabled={true} value={2}>
<RadioButton value={2} disabled={this.state.pagedisable}>
优惠券
</RadioButton>
</RadioGroup>
@ -820,9 +840,15 @@ export default class edittemplate extends React.Component {
</div>
</div>
</div>
{/* 组件库 */}
{
this.state.showType==2? <CouponComLib/>:null
}
{/* this.state.showType==2&&this.state.activeNavStatus==2? */}
</div>
<div className='xj-wrapper floatFix' style={{ 'zIndex': '1' }}>
<div className='xj-center' style={{ 'marginLeft': '288px' }}>
<div className='xj-wrapper' style={{ 'zIndex': '1' }}>
<div className={this.state.showType==2?'xj-center-small':'xj-center'}>
{this.state.activeNavStatus == 1 ? (
<div>
<img
@ -1075,7 +1101,7 @@ export default class edittemplate extends React.Component {
setdetailftc={(c) => this.getdetailfont_color(c)}
/>
) : <ReduceConfig />
) : this.state.activeNavStatus == 1 ? (
) :this.state.showType==1? this.state.activeNavStatus == 1 ? (
<WhiteLand
landTitle={this.state.model.title}
settitle={(c) => this.getTitle(c)}
@ -1108,7 +1134,39 @@ export default class edittemplate extends React.Component {
setbottomImg={(c) => this.getbottomimgFn(c)}
setdetailftc={(c) => this.getdetailfont_color(c)}
/>
) : <ReduceConfig />}
) : <ReduceConfig />:this.state.activeNavStatus == 1 ? (//优惠券
<CouponLandingForm
settitle={(c) => this.getTitle(c)}
landbgcolor={(c) => this.getlandbgcolor(c)}
landftcolor={(c) => this.getlandftcolor(c)}
setbanner={(e) => this.getLandingdata(e)}
/>
) : this.state.activeNavStatus == 2 ? (
<CouponGoodsListForm
setactiveType={(c) => this.getactiveTypeFn(c)}
seteditorHtml={(c) => this.getEditorHtmlFn(c)}
setButtonbgcolor={(c) => {
this.getButtonbgcolor(c)
}}
setButtoncolor={(c) => {
this.getButtoncolor(c)
}}
setbottomImg={(c) => this.getgoodsbottomimgFn(c)}
setbanner={(c) => this.getGoodsbanner(c)}
setarrayType={(c) => this.getarrayType(c)}
/>
) : this.state.detailType == 1 ? (
<DetailsPage
seteditorHtml={(c) => this.getdetailEditorHtmlFn(c)}
setdetailActive={(c) => this.getdetailActiveFn(c)}
setdetailbgc={(c) => {
this.getdetailbgcolor(c)
}}
setbottomImg={(c) => this.getbottomimgFn(c)}
setdetailftc={(c) => this.getdetailfont_color(c)}
/>
) : <ReduceConfig />
}
{this.state.preview_visible ? (
<PreviewEffect previewData={this.state.previewData} showType={this.state.showType} onCloseFn={this.onClose.bind(this)} />
) : null}

1215
src/pages/exchangepage/edittemplate/main.less
View File

File diff suppressed because it is too large Load Diff

134
src/pages/login/login.less
View File

@ -1,18 +1,22 @@
.loginPage{
width: 100%;
height: 100%;
background-color: #f5f9ff;
overflow: hidden;
.zent-form-reactive{
width:60%!important;
}
.login-box .zent-input-wrapper.zent-input--size-normal, .login-box .zent-input{
width: 100%!important;
border-radius: 4px;
}
.loginPage {
width: 100%;
height: 100%;
background-color: #f5f9ff;
overflow: hidden;
.zent-form-reactive {
width: 60% !important;
}
.login-box .zent-input-wrapper.zent-input--size-normal,
.login-box .zent-input {
width: 100% !important;
border-radius: 4px;
}
}
.login-title{
.login-title {
width: 400px;
height: 40px;
margin: 80px auto;
@ -20,111 +24,135 @@ overflow: hidden;
align-items: center;
justify-content: center;
}
.login-title-label{
.login-title-label {
font-size: 32px;
}
.login-title-icon img{
.login-title-icon img {
width: auto;
height: 40px;
padding-right: 20px;
}
.login-box{
.login-box {
margin: 0 auto;
width: 520px;
background-color: #fff;
box-sizing: "border-box";
box-sizing: border-box;
overflow: hidden;
border-radius: 8px;
box-shadow: 0px 0px 20px rgba(0,60,179,0.12);
box-shadow: 0px 0px 5px rgba(0, 60, 179, 0.12);
text-align: center;
display: flex;
justify-content: center;
flex-wrap: wrap;
align-items: center;
.zent-input-wrapper.zent-input--size-normal,.zent-input{
transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
&:hover {
box-shadow: 0px 0px 20px rgba(0, 60, 179, 0.12);
transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1)
}
.zent-input-wrapper.zent-input--size-normal,
.zent-input {
width: 268px !important;
height: 40px !important;
}
.zent-btn-disabled[data-zv="9.11.0"], .zent-btn-disabled[data-zv="9.11.0"][disabled]{
background-color: #f7f7f7!important;
border:1px solid #e0e0e0!important;
.zent-btn-disabled[data-zv="9.11.0"],
.zent-btn-disabled[data-zv="9.11.0"][disabled] {
background-color: #f7f7f7 !important;
border: 1px solid #e0e0e0 !important;
}
}
.loginBtn{
width: 100%!important;
.loginBtn {
width: 100% !important;
width: 272px;
height: 41px;
line-height: 41px;
color: #FFF;
background-color:#1e6fff;
background-color: #1e6fff;
border: none;
outline: none;
border-radius: 2px;
text-align: center;
font-size: 17px;
text-align: center;
text-align: center;
cursor: pointer;
margin-bottom: 70px;
margin-top: 5px;
.login-Btntxt{
display: inline-block;
letter-spacing:50px;
text-indent: 50px;
.login-Btntxt {
display: inline-block;
letter-spacing: 50px;
text-indent: 50px;
}
}
.box-title{
.box-title {
width: 100%;
height: 52px;
font-size:20px;
font-size: 20px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 40px;
border-bottom: 1px solid rgba(44,114,255,0.1);
border-bottom: 1px solid rgba(44, 114, 255, 0.1);
}
.box-title>div{
.box-title>div {
width: 60%;
height: 100%;
display: flex;
align-items: center;
justify-content:center;
justify-content: center;
}
.box-title>div span{
.box-title>div span {
cursor: pointer;
height: 100%;
display: flex;
border-bottom: 2px solid transparent;
align-items: center;
&.activeLogin{
color: #1e6fff;
border-bottom: 2px solid #1e6fff;
&.activeLogin {
color: #1e6fff;
border-bottom: 2px solid #1e6fff;
}
}
.yzmcodeIpt{
.yzmcodeIpt {
height: 40px;
.zent-form-control[data-zv="9.11.0"]{
.zent-form-control[data-zv="9.11.0"] {
float: left;
}
margin-bottom: 30px;
display: flex;
}
.yzmcode{
.yzmcode {
width: 38%;
height: 40px;
float: left;
.zent-btn{
height: 100%!important;
.zent-btn {
height: 100% !important;
width: 100%;
}
}
.forget{
text-align: right;
display: block;
margin-bottom: 10px;
margin-top: 30px;
color: #1e6fff;
cursor: pointer;
}
.forget {
text-align: right;
display: block;
margin-bottom: 10px;
margin-top: 30px;
color: #1e6fff;
cursor: pointer;
}