立减金可用时间 动态样式
This commit is contained in:
wangsongsole
parent
e729725d52
commit
a25166197f
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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'>
|
||||
|
|
|
|||
160
src/utils.js
160
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;
|
||||
radix = radix || chars.length;
|
||||
i
|
||||
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[14] = "4";
|
||||
uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-'
|
||||
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);
|
||||
uuid[i] = chars[i == 19 ? (r & 0x3) | 0x8 : r];
|
||||
r = 0 | (Math.random() * 16)
|
||||
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 endTime = new Date(end_time).getTime() / 1000;
|
||||
var starttime = "";
|
||||
var endtime = "";
|
||||
let beginTime = new Date(begin_time).getTime() / 1000
|
||||
let endTime = new Date(end_time).getTime() / 1000
|
||||
var starttime = ''
|
||||
var endtime = ''
|
||||
if (beginTime < endTime) {
|
||||
starttime = beginTime;
|
||||
endtime = endTime;
|
||||
starttime = beginTime
|
||||
endtime = endTime
|
||||
} else {
|
||||
starttime = endTime;
|
||||
endtime = beginTime;
|
||||
starttime = endTime
|
||||
endtime = beginTime
|
||||
}
|
||||
//计算天数
|
||||
var timediff = endtime - starttime;
|
||||
var days = parseInt(timediff / 86400);
|
||||
var timediff = endtime - starttime
|
||||
var days = parseInt(timediff / 86400)
|
||||
//计算小时数
|
||||
var remain = timediff % 86400;
|
||||
var hours = parseInt(remain / 3600);
|
||||
var remain = timediff % 86400
|
||||
var hours = parseInt(remain / 3600)
|
||||
//计算分钟数
|
||||
var remain = remain % 3600;
|
||||
var mins = parseInt(remain / 60);
|
||||
var res = Number(days + 1);
|
||||
return res;
|
||||
var remain = remain % 3600
|
||||
var mins = parseInt(remain / 60)
|
||||
var res = Number(days + 1)
|
||||
return res
|
||||
}
|
||||
|
||||
export function getNowTime() {
|
||||
var now = new Date();
|
||||
var year = now.getFullYear();
|
||||
var now = new Date()
|
||||
var year = now.getFullYear()
|
||||
var month =
|
||||
now.getMonth() + 1 <= 9 ? "0" + (now.getMonth() + 1) : now.getMonth() + 1;
|
||||
var day = now.getDate() <= 9 ? "0" + now.getDate() : now.getDate();
|
||||
var tt = now.getHours() <= 9 ? "0" + now.getHours() : now.getHours();
|
||||
var mm = now.getMinutes() <= 9 ? "0" + now.getMinutes() : now.getMinutes();
|
||||
var ss = now.getSeconds() <= 9 ? "0" + now.getSeconds() : now.getSeconds();
|
||||
let datelist = [year, month, day, tt, mm, ss];
|
||||
return datelist.join("");
|
||||
now.getMonth() + 1 <= 9 ? '0' + (now.getMonth() + 1) : now.getMonth() + 1
|
||||
var day = now.getDate() <= 9 ? '0' + now.getDate() : now.getDate()
|
||||
var tt = now.getHours() <= 9 ? '0' + now.getHours() : now.getHours()
|
||||
var mm = now.getMinutes() <= 9 ? '0' + now.getMinutes() : now.getMinutes()
|
||||
var ss = now.getSeconds() <= 9 ? '0' + now.getSeconds() : now.getSeconds()
|
||||
let datelist = [year, month, day, tt, mm, ss]
|
||||
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
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue