立减金可用时间 动态样式

src/components/knockGold/index.jsx

@@ -58,7 +58,7 @@ const week = [
   { key: 'Thu', text: '周四' },
   { key: 'Fri', text: '周五' },
   { key: 'Sat', text: '周六' },
-  { key: 'Sun', text: '周天' }
+  { key: 'Sun', text: '周日' }
 ]
 //预警百分比
 const earlyPerList = ['70', '50', '30', '20']
@@ -97,9 +97,9 @@ export default class addKnockGold extends Component {
         timer_type: '1', //领取时间段类型
         effect_date_type: '', //生效日期类型
         effect_date: '', //生效日期
-        ruleDate: [[]], //规则日期
         irregularDate: [[]], //不规则日期
         irregularTime: [[]], //不规则时间
+        ruleDate: [[]], //规则日期
         ruleWeek: [] //规则周
       },
       TimeDiffer: '',
@@ -155,6 +155,17 @@ export default class addKnockGold extends Component {
     if (this.props?.data?.id ? true : false) return
     return (
       <>
+        {index !== 0 ? (
+          <p
+            className='move'
+            onClick={() => {
+              const model = valueKey
+              model.splice(index, 1)
+              this.setState({ [key]: model })
+            }}>
+            删除
+          </p>
+        ) : null}
         {index === valueKey.length - 1 ? (
           <p
             className='add'
@@ -170,17 +181,6 @@ export default class addKnockGold extends Component {
             添加
           </p>
         ) : null}
-        {index !== 0 ? (
-          <p
-            className='move'
-            onClick={() => {
-              const model = valueKey
-              model.splice(index, 1)
-              this.setState({ [key]: model })
-            }}>
-            删除
-          </p>
-        ) : null}
       </>
     )
   }
@@ -1151,6 +1151,9 @@ export default class addKnockGold extends Component {
                   }}>
                   <Radio value='received'>领取后</Radio>
                 </RadioGroup>
+                {this.state.model.usable_time === 'received' ? (
+                  <>
+                    {' '}
                     <div className='zent-demo-select-basic select-basic'>
                       <Select
                         clearable
@@ -1186,8 +1189,10 @@ export default class addKnockGold extends Component {
                       width={'172px'}
                       alignment={'left'}
                     />
+                  </>
+                ) : null}
               </div>
-              <div className='boxTime'>
+              <div className='boxTime' style={{ marginTop: '15px' }}>
                 <RadioGroup
                   disabled={this.props?.data?.id ? true : false}
                   value={this.state.model.usable_time}
@@ -1202,6 +1207,7 @@ export default class addKnockGold extends Component {
                   }}>
                   <Radio value='fiexd'>固定时间</Radio>
                 </RadioGroup>
+                {this.state.model.usable_time === 'fiexd' ? (
                   <DateRangePicker
                     className='zent-datepicker-plan'
                     showTime={{
@@ -1221,6 +1227,7 @@ export default class addKnockGold extends Component {
                     disabledDate={this.onDisabledRange2}
                     disabledTime={this.onDisabledTime1}
                   />
+                ) : null}
               </div>
               <div className='boxTime column'>
                 <RadioGroup
@@ -1237,10 +1244,12 @@ export default class addKnockGold extends Component {
                   }}>
                   <Radio value='week'>有效期内，规则日期可用</Radio>
                 </RadioGroup>
+                {this.state.model.usable_time === 'week' ? (
+                  <>
                     <Checkbox.Group
                       value={this.state.model.ruleWeek}
                       onChange={(va) => this.onHandleChange(va, 'ruleWeek')}
-                  style={{ marginLeft: '25px' }}>
+                      style={{ marginLeft: '25px', marginTop: '20px' }}>
                       {week.map((week) => (
                         <Checkbox
                           className='checkbox'
@@ -1258,7 +1267,10 @@ export default class addKnockGold extends Component {
                           className='zent-datepicker-plan column_datepicker'
                           showTime={{
                             format: 'HH:mm:ss',
-                        defaultTime: [moment().format('HH:mm:ss'), '23:59:59']
+                            defaultTime: [
+                              moment().format('HH:mm:ss'),
+                              '23:59:59'
+                            ]
                           }}
                           value={this.state.model.ruleDate[index]}
                           onChange={(value) => {
@@ -1281,8 +1293,10 @@ export default class addKnockGold extends Component {
                     <p className='notice'>
                       请按照24小时制输入可用时段，最多设置3个时段
                     </p>
+                  </>
+                ) : null}
               </div>
-              <div className='boxTime column'>
+              <div className='boxTime column' style={{ marginTop: '15px' }}>
                 <RadioGroup
                   disabled={this.props?.data?.id ? true : false}
                   value={this.state.model.usable_time}
@@ -1296,6 +1310,8 @@ export default class addKnockGold extends Component {
                   }}>
                   <Radio value='irregular'>有效期内，不规则日期可用</Radio>
                 </RadioGroup>
+                {this.state.model.usable_time === 'irregular' ? (
+                  <>
                     <p className='notice' style={{ width: '500px' }}>
                       可在有效期内任意选择时间天数，以及可用时段。
                       因当前微信支持问题，如选择不规则时间，微信卡包内当前仅会展示有效期，建议
@@ -1328,7 +1344,6 @@ export default class addKnockGold extends Component {
                         )}
                       </div>
                     ))}
-
                     {this.state.model.irregularTime.map((time, index) => (
                       <div className='options_time' key={index}>
                         <TimeRangePicker
@@ -1336,7 +1351,10 @@ export default class addKnockGold extends Component {
                           className='zent-datepicker-plan column_datepicker'
                           showTime={{
                             format: 'HH:mm:ss',
-                        defaultTime: [moment().format('HH:mm:ss'), '23:59:59']
+                            defaultTime: [
+                              moment().format('HH:mm:ss'),
+                              '23:59:59'
+                            ]
                           }}
                           value={this.state.model.irregularTime[index]}
                           onChange={(value) => {
@@ -1351,10 +1369,13 @@ export default class addKnockGold extends Component {
                           index,
                           'irregularTime',
                           this.state.model.irregularTime,
-                      true
+                          false,
+                          '最多设置3个时段'
                         )}
                       </div>
                     ))}
+                  </>
+                ) : null}
               </div>
             </FormItem>
           </Form>

src/components/knockGold/index.less

@@ -19,6 +19,27 @@
 	min-width: 375px !important;
 	width: auto !important;
 
+	.available_time {
+		text-align: left;
+		margin-bottom: 8px;
+
+		h3 {
+			font-size: 15px;
+			color: #171717;
+			padding-bottom: 5px;
+			box-sizing: border-box;
+
+		}
+
+		.timeList {
+			li {
+				margin: 3px 0;
+				font-size: 12px;
+				color: #a8a8a8;
+			}
+		}
+	}
+
 
 
 	.couponShow {
@@ -192,6 +213,7 @@
 			.boxTime {
 				display: flex;
 				align-items: center;
+				min-height: 36px;
 
 				.zent-radio-group {
 					margin-right: 20px;
@@ -218,12 +240,6 @@
 			.column {
 				flex-direction: column;
 				align-items: flex-start;
-
-				.column_label {
-					margin-bottom: 20px;
-				}
-
-
 			}
 
 			.zent-datepicker-trigger {

src/components/knockGold/mobileCmponent.jsx

@@ -2,14 +2,21 @@
  * @Author: Wind
  * @Date: 2022-06-06 14:53:58
  * @LastEditors: Wind
- * @LastEditTime: 2022-07-12 10:54:07
+ * @LastEditTime: 2022-08-12 17:41:52
  * @Description:
  * @FilePath: \frontend\src\components\knockGold\mobileCmponent.jsx
  */
 import { Placeholder } from 'zent'
+import { useEffect, useState } from 'react'
 import './index.less'
+import { sortWeeks } from '@/utils'
 const widths = [24, 100, 100, 100, 80, 24, 100, 100, 100, 80, 100, 100, 100, 80]
 export default ({ data }) => {
+  const [newWeek, setNewWeek] = useState([])
+  useEffect(() => {
+    setNewWeek(sortWeeks(data.ruleWeek))
+  }, [data.ruleWeek])
+
   return (
     <div id='reduceKnockGold' className='mobile'>
       <div className='couponShow'>
@@ -47,6 +54,22 @@ export default ({ data }) => {
         <h1>
           - {data.batch_goods_name ? data.batch_goods_name : 'xxx'}兑换说明 -
         </h1>
+
+        {data.usable_time === 'week' ? (
+          <div className='available_time'>
+            <h3>可用时间</h3>
+            <ul className='timeList'>
+              {newWeek?.map((item) => (
+                <li>
+                  {`${item}:
+                  ${data.ruleDate.map((item1) => {
+                    if (item1[1]) return `${item1[0]}~${item1[1]}`
+                  })}`}
+                </li>
+              ))}
+            </ul>
+          </div>
+        ) : null}
         {data.instruction ? (
           <>
             <div className='content'>

src/utils.js

@@ -1,82 +1,166 @@
 /* 去重 */
 export function deWeightThree(data, key) {
-  let map = new Map();
+  let map = new Map()
   for (let item of data) {
     if (!map.has(item[key])) {
-      map.set(item[key], item);
+      map.set(item[key], item)
     }
   }
-  return [...map.values()];
+  return [...map.values()]
 }
 
 /* uuid生成器 */
 export function uuid(len, radix) {
   var chars =
-    "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz".split("");
+    '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('')
   var uuid = [],
-    i;
+    i
-  radix = radix || chars.length;
+  radix = radix || chars.length
 
   if (len) {
     // Compact form
-    for (i = 0; i < len; i++) uuid[i] = chars[0 | (Math.random() * radix)];
+    for (i = 0; i < len; i++) uuid[i] = chars[0 | (Math.random() * radix)]
   } else {
     // rfc4122, version 4 form
-    var r;
+    var r
 
     // rfc4122 requires these characters
-    uuid[8] = uuid[13] = uuid[18] = uuid[23] = "-";
+    uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-'
-    uuid[14] = "4";
+    uuid[14] = '4'
 
     // Fill in random data.  At i==19 set the high bits of clock sequence as
     // per rfc4122, sec. 4.1.5
     for (i = 0; i < 36; i++) {
       if (!uuid[i]) {
-        r = 0 | (Math.random() * 16);
+        r = 0 | (Math.random() * 16)
-        uuid[i] = chars[i == 19 ? (r & 0x3) | 0x8 : r];
+        uuid[i] = chars[i == 19 ? (r & 0x3) | 0x8 : r]
       }
     }
   }
 
-  return uuid.join("");
+  return uuid.join('')
 }
 
 //计算两个时间差  返回天
 export function timeDiff(begin_time, end_time) {
   //年月日时分秒转换为时间戳
-  let beginTime = new Date(begin_time).getTime() / 1000;
+  let beginTime = new Date(begin_time).getTime() / 1000
-  let endTime = new Date(end_time).getTime() / 1000;
+  let endTime = new Date(end_time).getTime() / 1000
-  var starttime = "";
+  var starttime = ''
-  var endtime = "";
+  var endtime = ''
   if (beginTime < endTime) {
-    starttime = beginTime;
+    starttime = beginTime
-    endtime = endTime;
+    endtime = endTime
   } else {
-    starttime = endTime;
+    starttime = endTime
-    endtime = beginTime;
+    endtime = beginTime
   }
   //计算天数
-  var timediff = endtime - starttime;
+  var timediff = endtime - starttime
-  var days = parseInt(timediff / 86400);
+  var days = parseInt(timediff / 86400)
   //计算小时数
-  var remain = timediff % 86400;
+  var remain = timediff % 86400
-  var hours = parseInt(remain / 3600);
+  var hours = parseInt(remain / 3600)
   //计算分钟数
-  var remain = remain % 3600;
+  var remain = remain % 3600
-  var mins = parseInt(remain / 60);
+  var mins = parseInt(remain / 60)
-  var res = Number(days + 1);
+  var res = Number(days + 1)
-  return res;
+  return res
 }
 
 export function getNowTime() {
-  var now = new Date();
+  var now = new Date()
-  var year = now.getFullYear();
+  var year = now.getFullYear()
   var month =
-    now.getMonth() + 1 <= 9 ? "0" + (now.getMonth() + 1) : now.getMonth() + 1;
+    now.getMonth() + 1 <= 9 ? '0' + (now.getMonth() + 1) : now.getMonth() + 1
-  var day = now.getDate() <= 9 ? "0" + now.getDate() : now.getDate();
+  var day = now.getDate() <= 9 ? '0' + now.getDate() : now.getDate()
-  var tt = now.getHours() <= 9 ? "0" + now.getHours() : now.getHours();
+  var tt = now.getHours() <= 9 ? '0' + now.getHours() : now.getHours()
-  var mm = now.getMinutes() <= 9 ? "0" + now.getMinutes() : now.getMinutes();
+  var mm = now.getMinutes() <= 9 ? '0' + now.getMinutes() : now.getMinutes()
-  var ss = now.getSeconds() <= 9 ? "0" + now.getSeconds() : now.getSeconds();
+  var ss = now.getSeconds() <= 9 ? '0' + now.getSeconds() : now.getSeconds()
-  let datelist = [year, month, day, tt, mm, ss];
+  let datelist = [year, month, day, tt, mm, ss]
-  return datelist.join("");
+  return datelist.join('')
+}
+
+/* 周天排序 */
+export function sortWeeks(weeks) {
+  var _weeks = [] //创建临时排序的数组
+  for (var i = 0; i < weeks.length; i++) {
+    if (weeks[i] == '周一') {
+      var _week = {}
+      _week['id'] = 1
+      _week['name'] = '周一'
+      _weeks.push(_week)
+    }
+    if (weeks[i] == '周二') {
+      var _week = {}
+      _week['id'] = 2
+      _week['name'] = '周二'
+      _weeks.push(_week)
+    }
+    if (weeks[i] == '周三') {
+      var _week = {}
+      _week['id'] = 3
+      _week['name'] = '周三'
+      _weeks.push(_week)
+    }
+    if (weeks[i] == '周四') {
+      var _week = {}
+      _week['id'] = 4
+      _week['name'] = '周四'
+      _weeks.push(_week)
+    }
+    if (weeks[i] == '周五') {
+      var _week = {}
+      _week['id'] = 5
+      _week['name'] = '周五'
+      _weeks.push(_week)
+    }
+    if (weeks[i] == '周六') {
+      var _week = {}
+      _week['id'] = 6
+      _week['name'] = '周六'
+      _weeks.push(_week)
+    }
+    if (weeks[i] == '周日') {
+      var _week = {}
+      _week['id'] = 7
+      _week['name'] = '周日'
+      _weeks.push(_week)
+    }
+  }
+  _weeks.sort(function (a, b) {
+    return a.id - b.id
+  })
+  //将weeks清空并将排序好的值赋给weeks
+  const weeksData = []
+  if (isContinuityNum(_weeks.map((item) => item.id)) && _weeks.length > 1) {
+    weeksData.push(`${_weeks[0].name} 至 ${_weeks[_weeks.length - 1].name}`)
+  } else {
+    for (var i = 0; i < _weeks.length; i++) {
+      weeksData.push(_weeks[i].name)
+    }
+  }
+
+  return weeksData
+}
+
+//判断一串数字是否是连续的
+function isContinuityNum(num) {
+  let array = []
+  if (num instanceof Array) {
+    array = [...num]
+  } else {
+    array = Array.from(num.toString()) //转换为数组
+  }
+
+  var i = array[0]
+  var isContinuation = true
+  for (var e in array) {
+    if (array[e] != i) {
+      isContinuation = false
+      break
+    }
+    i++
+  }
+  return isContinuation
 }