From ce023b0eaca007962e9abb0335c7a7c8c3f8c761 Mon Sep 17 00:00:00 2001 From: wangsongsole Date: Tue, 26 Jul 2022 15:26:12 +0800 Subject: [PATCH] =?UTF-8?q?1=E3=80=81=E7=AB=8B=E5=87=8F=E9=87=91=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E6=96=B0=E5=A2=9E=20=E5=8F=AF=E7=94=A8=E6=97=B6?= =?UTF-8?q?=E9=97=B4=E6=AE=B5=20=E8=A7=84=E5=88=99=E5=AD=97=E6=AE=B5=202?= =?UTF-8?q?=E3=80=81=E6=96=B0=E5=A2=9E=E6=A8=A1=E6=9D=BF=E7=BC=96=E5=8F=B7?= =?UTF-8?q?=E5=AD=97=E6=AE=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/knockGold/index.jsx | 330 ++++++++++++++++++++++++---- src/components/knockGold/index.less | 41 +++- src/components/knockGold/rules.js | 9 + 3 files changed, 338 insertions(+), 42 deletions(-) diff --git a/src/components/knockGold/index.jsx b/src/components/knockGold/index.jsx index adedad65..b2032927 100644 --- a/src/components/knockGold/index.jsx +++ b/src/components/knockGold/index.jsx @@ -21,7 +21,6 @@ import { Card, Dialog, Notify, - Input, Tag, TimeRangePicker } from 'zent' @@ -41,6 +40,16 @@ const receiveTypeList = [ { key: 'week', text: '每周' }, { key: 'day', text: '每天' } ] + +const week = [ + { key: 'Mon', text: '星期一' }, + { key: 'Tue', text: '星期二' }, + { key: 'Wed', text: '星期三' }, + { key: 'Thu', text: '星期四' }, + { key: 'Fri', text: '星期五' }, + { key: 'Sat', text: '星期六' }, + { key: 'Sun', text: '星期天' } +] //预警百分比 const earlyPerList = ['70', '50', '30', '20'] const initArray = (targetNum) => { @@ -56,6 +65,7 @@ export default class addKnockGold extends Component { entry_time: [], // 生效时间 batch_goods_name: '', // 批次商品名称 channel_activity_id: '', // 批次号 + templateNumber: '', //模板编号 weight: '0', //权重 price: '', // 单价 recharge_amount: '', // 充值金额 @@ -76,7 +86,11 @@ export default class addKnockGold extends Component { timer: [], //领取时间段 timer_type: '1', //领取时间段类型 effect_date_type: '', //生效日期类型 - effect_date: '' //生效日期 + effect_date: '', //生效日期 + ruleDate: [[]], //规则日期 + irregularDate: [[]], //不规则日期 + irregularTime: [[]], //不规则时间 + ruleWeek: [] //规则周 }, TimeDiffer: '', visible: false, //加框弹窗 @@ -117,6 +131,42 @@ export default class addKnockGold extends Component { this.getTimeDiff() } + /* 可用时间段 添加和删除组件控制*/ + addOrMoveFunction(index, key, valueKey, isLimit, err) { + return ( + <> + {index === valueKey.length - 1 ? ( +

{ + if (isLimit || valueKey.length < 3) { + const model = valueKey + model.push([]) + this.setState({ [key]: model }) + } else { + if (err) Notify.warn(err) + } + }}> + 添加 +

+ ) : null} + {index !== 0 ? ( +

{ + const model = valueKey + model.splice(index, 1) + this.setState({ [key]: model }) + }}> + 删除 +

+ ) : null} + + ) + } + /* 编辑回显 */ echoFun(UserSelectList) { if (this.props.data) { @@ -298,6 +348,7 @@ export default class addKnockGold extends Component { /* 提交 */ async submit() { + console.log(this.state.model) if ( this.refs.form.validator() && this.refs.form1.validator() && @@ -364,52 +415,59 @@ export default class addKnockGold extends Component { } /* 数据转换统一处理函数 */ transformDataCode() { - return { - channel: this.state.model.channel, - batch_goods_name: this.state.model.batch_goods_name, - channel_activity_id: this.state.model.channel_activity_id, //确认字段 - price: this.state.model.price, //确认字段 - recharge_amount: this.state.model.recharge_amount, //确认字段 - denomination: this.state.model.denomination, - reduce_amount: this.state.model.reduce_amount, - all_budget: this.state.model.all_budget, - day_budget: this.state.model.day_budget, - card_type: this.state.model.card_type, - natural_limit: this.state.model.natural_limit, - brush_limit: this.state.model.brush_limit, - instruction: this.state.model.instruction, - early_per: this.state.model.early_per.filter((item) => item), - early_notifier: this.state.model.early_notifier.map(({ text, key }) => ({ + const transformData = {} + transformData.channel = this.state.model.channel + /* 是支付宝立减金 才进行模板赋值操作 */ + if (transformData.channel == 1) { + transformData.templateNumber = this.state.model.templateNumber + } + transformData.batch_goods_name = this.state.model.batch_goods_name + transformData.channel_activity_id = this.state.model.channel_activity_id //确认字段 + transformData.price = this.state.model.price //确认字段 + transformData.recharge_amount = this.state.model.recharge_amount //确认字段 + transformData.denomination = this.state.model.denomination + transformData.reduce_amount = this.state.model.reduce_amount + transformData.all_budget = this.state.model.all_budget + transformData.day_budget = this.state.model.day_budget + transformData.card_type = this.state.model.card_type + transformData.natural_limit = this.state.model.natural_limit + transformData.brush_limit = this.state.model.brush_limit + transformData.instruction = this.state.model.instruction + transformData.early_per = this.state.model.early_per.filter((item) => item) + transformData.early_notifier = this.state.model.early_notifier.map( + ({ text, key }) => ({ real_name: text, mobile: key - })), - weight: this.state.model.weight, - receive_conf: { - type: this.state.model.receive_type, - num: this.state.model.receive_number + }) + ) + transformData.weight = this.state.model.weight + transformData.receive_conf = { + type: this.state.model.receive_type, + num: this.state.model.receive_number + } + transformData.time_limit = { + effect_time: { + start_time: this.state.model.entry_time[0], + end_time: this.state.model.entry_time[1] }, - time_limit: { - effect_time: { - start_time: this.state.model.entry_time[0], - end_time: this.state.model.entry_time[1] - }, - receive_time: { - start_time: this.state.model.timer[0], - end_time: this.state.model.timer[1] - }, + receive_time: { + start_time: this.state.model.timer[0], + end_time: this.state.model.timer[1] + }, - use_time: { - type: this.state.model.usable_time, - fiexd_time: { - start_time: this.state.model.fixed_time[0], - end_time: this.state.model.fixed_time[1] - }, - effect_day: this.state.model.effect_date, - effect_date_type: this.state.model.effect_date_type?.key - } + use_time: { + type: this.state.model.usable_time, + fiexd_time: { + start_time: this.state.model.fixed_time[0], + end_time: this.state.model.fixed_time[1] + }, + effect_day: this.state.model.effect_date, + effect_date_type: this.state.model.effect_date_type?.key } } + + return transformData } /* 校验表单function */ @@ -459,6 +517,33 @@ export default class addKnockGold extends Component { return false } + /* 验证有效期内，规则日期可用 */ + let isArray = this.state.model.ruleDate + .map((item) => this.setTime(item)) + .filter((item) => item) + + if (this.state.model.usable_time === 'ruleDate') { + if (isArray.length > 0 || this.state.model.ruleWeek.length < 1) { + Notify.error('请完整的选择规则日期和时间') + return false + } + } + + /* 有效期内，不规则日期可用 */ + let isArray1 = this.state.model.irregularDate + .map((item) => this.setTime(item)) + .filter((item) => item) + let isArray2 = this.state.model.irregularTime + .map((item) => this.setTime(item)) + .filter((item) => item) + + if (this.state.model.usable_time === 'irregularDate') { + if (isArray1.length > 0 || isArray2.length > 0) { + Notify.error('请完整的选择不规则日期和时间') + return false + } + } + const limitBit = /^-?\d+\.?\d{0,2}$/ if ( !limitBit.test(this.state.model.denomination) || @@ -623,6 +708,31 @@ export default class addKnockGold extends Component { alignment={'left'} /> + {this.state.model.channel == 1 ? ( + + { + this.onHandleChange(value, 'templateNumber') + }} + onClearItem={() => { + this.onHandleChange('', 'templateNumber') + }} + disabled={this.props?.data?.id ? true : false} + value={this.state.model.templateNumber} + placeholder={'请输入'} + labelWidth={'0px'} + maxLength={50} + height={'36px'} + width={'520px'} + alignment={'left'} + /> + + ) : ( + <> + )} { this.onHandleChange(target.value, 'usable_time') this.onHandleChange([], 'fixed_time') + this.onHandleChange([[]], 'irregularDate') + this.onHandleChange([[]], 'irregularTime') + this.onHandleChange([[]], 'ruleWeek') + this.onHandleChange([[]], 'ruleDate') }}> 领取后 @@ -1008,6 +1122,10 @@ export default class addKnockGold extends Component { this.onHandleChange(target.value, 'usable_time') this.onHandleChange('', 'effect_date_type') this.onHandleChange('', 'effect_date') + this.onHandleChange([[]], 'irregularDate') + this.onHandleChange([[]], 'irregularTime') + this.onHandleChange([[]], 'ruleWeek') + this.onHandleChange([[]], 'ruleDate') }}> 固定时间 @@ -1031,6 +1149,136 @@ export default class addKnockGold extends Component { disabledTime={this.onDisabledTime1} /> +
+ { + this.onHandleChange(target.value, 'usable_time') + this.onHandleChange('', 'effect_date_type') + this.onHandleChange('', 'effect_date') + this.onHandleChange([[]], 'fixed_time') + this.onHandleChange([[]], 'irregularDate') + this.onHandleChange([[]], 'irregularTime') + }}> + 有效期内，规则日期可用 + + this.onHandleChange(va, 'ruleWeek')} + style={{ marginLeft: '25px' }}> + {week.map((week) => ( + + {week.text} + + ))} + + {this.state.model.ruleDate.map((item, index) => ( +
+ { + const model = this.state.model.ruleDate + model[index] = value + this.onHandleChange(model, 'ruleDate') + }} + width={158} + disabledDate={this.onDisabledRange} + /> + {this.addOrMoveFunction( + index, + 'ruleDate', + this.state.model.ruleDate, + false, + '最多设置3个时段' + )} +
+ ))} +

+ 请按照24小时制输入可用时段，最多设置3个时段 +

+
+
+ { + this.onHandleChange(target.value, 'usable_time') + this.onHandleChange('', 'effect_date_type') + this.onHandleChange('', 'effect_date') + this.onHandleChange([[]], 'fixed_time') + this.onHandleChange([[]], 'ruleWeek') + this.onHandleChange([[]], 'ruleDate') + }}> + 有效期内，不规则日期可用 + +

+ 可在有效期内任意选择时间天数，以及可用时段。 + 因当前微信支持问题，如选择不规则时间，微信卡包内当前仅会展示有效期，建议 + 将具体可用日期以及时间段填写在使用说明内。 +

+ {this.state.model.irregularDate.map((time, index) => ( +
+ { + const model = this.state.model.irregularDate + model[index] = value + this.onHandleChange(model, 'irregularDate') + }} + disabledDate={this.onDisabledRange2} + disabledTime={this.onDisabledTime1} + /> + {this.addOrMoveFunction( + index, + 'irregularDate', + this.state.model.irregularDate, + true + )} +
+ ))} + + {this.state.model.irregularTime.map((time, index) => ( +
+ { + const model = this.state.model.irregularTime + model[index] = value + this.onHandleChange(model, 'irregularTime') + }} + width={158} + disabledDate={this.onDisabledRange} + /> + {this.addOrMoveFunction( + index, + 'irregularTime', + this.state.model.irregularTime, + true + )} +
+ ))} +
diff --git a/src/components/knockGold/index.less b/src/components/knockGold/index.less index 81cbf06d..0ee2eede 100644 --- a/src/components/knockGold/index.less +++ b/src/components/knockGold/index.less @@ -204,7 +204,46 @@ } } - .boxTime:last-child { + .column_datepicker { + margin-left: 25px; + margin-top: 15px; + } + + .column { + flex-direction: column; + align-items: flex-start; + + .column_label { + margin-bottom: 20px; + } + + + } + + .options_time { + display: flex; + align-items: flex-end; + + .add { + margin-left: 25px; + color: #145bd4; + cursor: pointer; + } + + .move { + margin-left: 25px; + color: #ccc; + cursor: pointer; + } + } + + .notice { + margin-top: 10px; + margin-left: 25px; + color: #e4e4e4; + } + + .boxTime:not(:first-child) { margin-top: 20px; } diff --git a/src/components/knockGold/rules.js b/src/components/knockGold/rules.js index 0966782f..84062736 100644 --- a/src/components/knockGold/rules.js +++ b/src/components/knockGold/rules.js @@ -10,6 +10,15 @@ export default { reg: '^[A-Za-z0-9]+$' } ], + /* 模板编号 */ + templateNumber: [ + { type: 'required', message: '请输入模板编号' }, + { + type: 'regExp', + message: '请输入由数字或英文组成的模板编号', + reg: '^[A-Za-z0-9]+$' + } + ], /* 合同单价 */ price: [ { type: 'required', message: '请输入合同单价' },