立减金可用时间 动态样式

This commit is contained in:
wangsongsole 2022-08-12 17:50:39 +08:00
parent e729725d52
commit a25166197f
4 changed files with 361 additions and 217 deletions

View File

@ -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,43 +1151,48 @@ export default class addKnockGold extends Component {
}}>
<Radio value='received'>领取后</Radio>
</RadioGroup>
<div className='zent-demo-select-basic select-basic'>
<Select
clearable
options={this.state.getTimeList}
placeholder='选择一项'
onChange={(value) => {
this.onHandleChange(value, 'effect_date_type')
}}
value={this.state.model.effect_date_type}
className='select-basic'
disabled={this.props?.data?.id ? true : false}
width='195px'
popupWidth='195px'
disableSearch
/>
</div>
<span className='effect_dates'>有效期</span>
<Ipt
onChange={(value) => {
this.onHandleChange(value, 'effect_date')
}}
onClearItem={() => {
this.onHandleChange('', 'effect_date')
}}
disabled={this.props?.data?.id ? true : false}
value={this.state.model.effect_date}
placeholder={'请输入'}
labelWidth={'0px'}
maxLength={3}
height={'36px'}
unit='天'
countShow={false}
width={'172px'}
alignment={'left'}
/>
{this.state.model.usable_time === 'received' ? (
<>
{' '}
<div className='zent-demo-select-basic select-basic'>
<Select
clearable
options={this.state.getTimeList}
placeholder='选择一项'
onChange={(value) => {
this.onHandleChange(value, 'effect_date_type')
}}
value={this.state.model.effect_date_type}
className='select-basic'
disabled={this.props?.data?.id ? true : false}
width='195px'
popupWidth='195px'
disableSearch
/>
</div>
<span className='effect_dates'>有效期</span>
<Ipt
onChange={(value) => {
this.onHandleChange(value, 'effect_date')
}}
onClearItem={() => {
this.onHandleChange('', 'effect_date')
}}
disabled={this.props?.data?.id ? true : false}
value={this.state.model.effect_date}
placeholder={'请输入'}
labelWidth={'0px'}
maxLength={3}
height={'36px'}
unit='天'
countShow={false}
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,25 +1207,27 @@ export default class addKnockGold extends Component {
}}>
<Radio value='fiexd'>固定时间</Radio>
</RadioGroup>
<DateRangePicker
className='zent-datepicker-plan'
showTime={{
format: 'HH:mm:ss',
defaultTime: [moment().format('HH:mm:ss'), '23:59:59']
}}
format='YYYY-MM-DD HH:mm:ss'
disabled={[
this.props?.data?.id ? true : false,
this.props?.data?.id ? true : false
]}
width={195}
value={this.state.model.fixed_time}
onChange={(value) => {
this.onHandleChange(value, 'fixed_time')
}}
disabledDate={this.onDisabledRange2}
disabledTime={this.onDisabledTime1}
/>
{this.state.model.usable_time === 'fiexd' ? (
<DateRangePicker
className='zent-datepicker-plan'
showTime={{
format: 'HH:mm:ss',
defaultTime: [moment().format('HH:mm:ss'), '23:59:59']
}}
format='YYYY-MM-DD HH:mm:ss'
disabled={[
this.props?.data?.id ? true : false,
this.props?.data?.id ? true : false
]}
width={195}
value={this.state.model.fixed_time}
onChange={(value) => {
this.onHandleChange(value, 'fixed_time')
}}
disabledDate={this.onDisabledRange2}
disabledTime={this.onDisabledTime1}
/>
) : null}
</div>
<div className='boxTime column'>
<RadioGroup
@ -1237,52 +1244,59 @@ export default class addKnockGold extends Component {
}}>
<Radio value='week'>有效期内规则日期可用</Radio>
</RadioGroup>
<Checkbox.Group
value={this.state.model.ruleWeek}
onChange={(va) => this.onHandleChange(va, 'ruleWeek')}
style={{ marginLeft: '25px' }}>
{week.map((week) => (
<Checkbox
className='checkbox'
disabled={this.props?.data?.id ? true : false}
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={205}
disabledTime={this.onDisabledRange}
/>
{this.addOrMoveFunction(
index,
'ruleDate',
this.state.model.ruleDate,
false,
'最多设置3个时段'
)}
</div>
))}
<p className='notice'>
请按照24小时制输入可用时段最多设置3个时段
</p>
{this.state.model.usable_time === 'week' ? (
<>
<Checkbox.Group
value={this.state.model.ruleWeek}
onChange={(va) => this.onHandleChange(va, 'ruleWeek')}
style={{ marginLeft: '25px', marginTop: '20px' }}>
{week.map((week) => (
<Checkbox
className='checkbox'
disabled={this.props?.data?.id ? true : false}
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={205}
disabledTime={this.onDisabledRange}
/>
{this.addOrMoveFunction(
index,
'ruleDate',
this.state.model.ruleDate,
false,
'最多设置3个时段'
)}
</div>
))}
<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,65 +1310,72 @@ export default class addKnockGold extends Component {
}}>
<Radio value='irregular'>有效期内不规则日期可用</Radio>
</RadioGroup>
<p className='notice' style={{ width: '500px' }}>
可在有效期内任意选择时间天数以及可用时段
因当前微信支持问题如选择不规则时间微信卡包内当前仅会展示有效期建议
将具体可用日期以及时间段填写在使用说明内
</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={205}
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={205}
disabledTime={this.onDisabledRange}
/>
{this.addOrMoveFunction(
index,
'irregularTime',
this.state.model.irregularTime,
true
)}
</div>
))}
{this.state.model.usable_time === 'irregular' ? (
<>
<p className='notice' style={{ width: '500px' }}>
可在有效期内任意选择时间天数以及可用时段
因当前微信支持问题如选择不规则时间微信卡包内当前仅会展示有效期建议
将具体可用日期以及时间段填写在使用说明内
</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={205}
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={205}
disabledTime={this.onDisabledRange}
/>
{this.addOrMoveFunction(
index,
'irregularTime',
this.state.model.irregularTime,
false,
'最多设置3个时段'
)}
</div>
))}
</>
) : null}
</div>
</FormItem>
</Form>

View File

@ -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 {

View File

@ -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'>

View File

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