1、立减金组件新增 可用时间段 规则字段

2、新增模板编号字段

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 ? (
+          <p
+            disabled={this.props?.data?.id ? true : false}
+            className='add'
+            onClick={() => {
+              if (isLimit || valueKey.length < 3) {
+                const model = valueKey
+                model.push([])
+                this.setState({ [key]: model })
+              } else {
+                if (err) Notify.warn(err)
+              }
+            }}>
+            添加
+          </p>
+        ) : null}
+        {index !== 0 ? (
+          <p
+            disabled={this.props?.data?.id ? true : false}
+            className='move'
+            onClick={() => {
+              const model = valueKey
+              model.splice(index, 1)
+              this.setState({ [key]: model })
+            }}>
+            删除
+          </p>
+        ) : 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,31 +415,37 @@ 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: {
+      })
+    )
+    transformData.weight = this.state.model.weight
+    transformData.receive_conf = {
       type: this.state.model.receive_type,
       num: this.state.model.receive_number
-      },
-      time_limit: {
+    }
+    transformData.time_limit = {
       effect_time: {
         start_time: this.state.model.entry_time[0],
         end_time: this.state.model.entry_time[1]
@@ -409,7 +466,8 @@ export default class addKnockGold extends Component {
         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'}
               />
             </FormItem>
+            {this.state.model.channel == 1 ? (
+              <FormItem
+                labelname='卷模板编号'
+                prop='templateNumber'
+                id='batch_number'>
+                <Ipt
+                  onChange={(value) => {
+                    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'}
+                />
+              </FormItem>
+            ) : (
+              <></>
+            )}
 
             <FormItem
               labelname='批次商品名称'
@@ -961,6 +1071,10 @@ export default class addKnockGold extends Component {
                   onChange={({ target }) => {
                     this.onHandleChange(target.value, 'usable_time')
                     this.onHandleChange([], 'fixed_time')
+                    this.onHandleChange([[]], 'irregularDate')
+                    this.onHandleChange([[]], 'irregularTime')
+                    this.onHandleChange([[]], 'ruleWeek')
+                    this.onHandleChange([[]], 'ruleDate')
                   }}>
                   <Radio value='received'>领取后</Radio>
                 </RadioGroup>
@@ -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')
                   }}>
                   <Radio value='fiexd'>固定时间</Radio>
                 </RadioGroup>
@@ -1031,6 +1149,136 @@ export default class addKnockGold extends Component {
                   disabledTime={this.onDisabledTime1}
                 />
               </div>
+              <div className='boxTime column'>
+                <RadioGroup
+                  className='column_label'
+                  disabled={this.props?.data?.id ? true : false}
+                  value={this.state.model.usable_time}
+                  onChange={({ target }) => {
+                    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')
+                  }}>
+                  <Radio value='ruleDate'>有效期内，规则日期可用</Radio>
+                </RadioGroup>
+                <Checkbox.Group
+                  value={this.state.model.ruleWeek}
+                  onChange={(va) => this.onHandleChange(va, 'ruleWeek')}
+                  style={{ marginLeft: '25px' }}>
+                  {week.map((week) => (
+                    <Checkbox value={week.text} key={week.key}>
+                      {week.text}
+                    </Checkbox>
+                  ))}
+                </Checkbox.Group>
+                {this.state.model.ruleDate.map((item, index) => (
+                  <div className='options_time' key={index}>
+                    <TimeRangePicker
+                      disabled={this.props?.data?.id ? true : false}
+                      className='zent-datepicker-plan column_datepicker'
+                      showTime={{
+                        format: 'HH:mm:ss',
+                        defaultTime: [moment().format('HH:mm:ss'), '23:59:59']
+                      }}
+                      value={this.state.model.ruleDate[index]}
+                      onChange={(value) => {
+                        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个时段'
+                    )}
+                  </div>
+                ))}
+                <p className='notice'>
+                  请按照24小时制输入可用时段，最多设置3个时段
+                </p>
+              </div>
+              <div className='boxTime column'>
+                <RadioGroup
+                  disabled={this.props?.data?.id ? true : false}
+                  value={this.state.model.usable_time}
+                  onChange={({ target }) => {
+                    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')
+                  }}>
+                  <Radio value='irregularDate'>有效期内，不规则日期可用</Radio>
+                </RadioGroup>
+                <p className='notice' style={{ width: '600px' }}>
+                  可在有效期内任意选择时间天数，以及可用时段。
+                  因当前微信支持问题，如选择不规则时间，微信卡包内当前仅会展示有效期，建议
+                  将具体可用日期以及时间段填写在使用说明内。
+                </p>
+                {this.state.model.irregularDate.map((time, index) => (
+                  <div className='options_time' key={index}>
+                    <DateRangePicker
+                      className='zent-datepicker-plan column_datepicker'
+                      format='YYYY-MM-DD'
+                      disabled={[
+                        this.props?.data?.id ? true : false,
+                        this.props?.data?.id ? true : false
+                      ]}
+                      width={234}
+                      value={this.state.model.irregularDate[index]}
+                      onChange={(value) => {
+                        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
+                    )}
+                  </div>
+                ))}
+
+                {this.state.model.irregularTime.map((time, index) => (
+                  <div className='options_time' key={index}>
+                    <TimeRangePicker
+                      disabled={this.props?.data?.id ? true : false}
+                      className='zent-datepicker-plan column_datepicker'
+                      showTime={{
+                        format: 'HH:mm:ss',
+                        defaultTime: [moment().format('HH:mm:ss'), '23:59:59']
+                      }}
+                      value={this.state.model.irregularTime[index]}
+                      onChange={(value) => {
+                        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
+                    )}
+                  </div>
+                ))}
+              </div>
             </FormItem>
           </Form>
         </Card>

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;
 			}
 

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: '请输入合同单价' },