import ColField from '@/components/col-field'
import ColFieldGroup from '@/components/col-field-group'
import {
Button,
Col,
Field,
Form,
Radio,
RadioGroup,
Row,
Sticky,
Tab,
Tabs,
Image,
Icon,
Popup,
DatetimePicker
} from 'vant'
import { defineComponent } from 'vue'
import { createState } from './createState'
import styles from './course-start.module.less'
import ColUpload from '@/components/col-upload'
import { verifiyNumberInteger } from '@/helpers/toolsValidate'
import { formatterDate } from '@/helpers/utils'
import activeButtonIcon from '@common/images/icon_checkbox.png'
import inactiveButtonIcon from '@common/images/icon_checkbox_default.png'
import dayjs from 'dayjs'
import TheSticky from '@/components/the-sticky'
export default defineComponent({
name: 'course-start',
data() {
return {
typeDateTime: 'start',
dateStatus: false,
currentDate: new Date(),
minDate: dayjs().toDate(),
maxDate: new Date()
}
},
computed: {
disabled() {
return createState.live.courseGroupId ? true : false
}
},
mounted() {
if (createState.selectCourseList[0]?.startTime) {
this.maxDate = dayjs(createState.selectCourseList[0].startTime)
.subtract(1, 'day')
.toDate()
}
createState.live.salesStartDate =
createState.live.salesStartDate ||
dayjs(this.minDate).format('YYYY-MM-DD')
createState.live.salesEndDate =
createState.live.salesEndDate || dayjs(this.maxDate).format('YYYY-MM-DD')
},
methods: {
tabChange(name: number) {
createState.tabIndex = name
},
selectImg(val: string) {
createState.live.backgroundPic = ''
createState.live.backgroundPicTemplate = val
},
onFormatterInt(val: any) {
if (val) {
if( Number(val) >= (Number(createState.live.maxStudentNum) || 5)) {
return verifiyNumberInteger(createState.live.maxStudentNum || "5")
}
if(val >= 1) {
return verifiyNumberInteger(val)
}
return ""
} else {
return ''
}
},
onConfirm(val: any) {
if (this.typeDateTime === 'start') {
createState.live.salesStartDate = dayjs(val).format('YYYY-MM-DD')
if (
createState.live.salesEndDate &&
dayjs(createState.live.salesStartDate).isAfter(
dayjs(createState.live.salesEndDate)
)
) {
createState.live.salesEndDate = ''
}
} else if (this.typeDateTime === 'end') {
createState.live.salesEndDate = dayjs(val).format('YYYY-MM-DD')
}
this.dateStatus = false
}
},
render() {
return (
<Form
class={styles.courseStart}
onSubmit={() => (createState.active = 5)}
scrollToError
>
<ColFieldGroup>
<ColField title="开售日期" required>
<Field
v-model={createState.live.salesStartDate}
name="salesStartDate"
readonly
isLink
placeholder="请选择开售日期"
disabled={this.disabled}
onClick={() => {
if (createState.live.courseGroupId) {
return
}
this.minDate = dayjs().toDate()
this.currentDate = dayjs(
createState.live.salesStartDate
).toDate()
this.typeDateTime = 'start'
this.dateStatus = true
}}
rules={[{ required: true, message: '请选择开售日期' }]}
/>
</ColField>
<ColField title="停售日期" required>
<Field
v-model={createState.live.salesEndDate}
name="salesEndDate"
readonly
isLink
disabled={this.disabled}
onClick={() => {
if (createState.live.courseGroupId) {
return
}
this.minDate = dayjs(createState.live.salesStartDate).toDate()
this.currentDate = dayjs(createState.live.salesEndDate).toDate()
this.typeDateTime = 'end'
this.dateStatus = true
}}
rules={[{ required: true, message: '请选择停售日期' }]}
placeholder="请选择停售日期"
/>
</ColField>
</ColFieldGroup>
<ColFieldGroup>
<ColField
title="最低开课人数"
required
style={{
marginBottom: '10px'
}}
>
<Field
v-model={createState.live.mixStudentNum}
name="mixStudentNum"
placeholder="请输入最低开课人数"
type="number"
maxlength={8}
disabled={this.disabled}
formatter={this.onFormatterInt}
rules={[{ required: true, message: `1~${createState.live.maxStudentNum}` }]}
v-slots={{
button: () => <span>人</span>
}}
/>
</ColField>
<div class={styles.stepTips}>
课程停售时，付费学员达到该人数可开课，若未达到该人数，则成课失败，已付费学员将自动退款。
</div>
</ColFieldGroup>
<ColFieldGroup>
<ColField
required
border={false}
v-slots={{
title: () => (
<Tabs
v-model:active={createState.tabIndex}
class={styles.infoField}
onChange={this.tabChange}
shrink
color="var(--van-primary)"
lineWidth={20}
>
{/* <Tab title="图片模板" name={1}></Tab> */}
<Tab title="自定义模板" name={2}></Tab>
</Tabs>
)
}}
>
<p class={styles.photoTip}>模板图片将作为该课程封面为学员展示</p>
{/* {createState.tabIndex === 1 ? ( */}
<Field
name="backgroundPicTemplate"
border={false}
v-show={createState.tabIndex === 1}
rules={[
{
required:
createState.tabIndex === 1 &&
!createState.live.backgroundPic,
message: '请选择图片模板'
}
]}
v-slots={{
input: () => (
<RadioGroup v-model={createState.live.backgroundPicTemplate}>
<Row justify="space-between" style={{ width: '100%' }}>
{createState.templateList.map((item: any) => (
<Col
span={12}
class={styles.imgContainer}
onClick={() => this.selectImg(item)}
>
<Image class={styles.imgContainer} src={item} />
<Radio
name={item}
v-slots={{
icon: (props: any) => (
<Icon
class={styles.boxStyle}
name={
props.checked
? activeButtonIcon
: inactiveButtonIcon
}
size="18"
/>
)
}}
/>
</Col>
))}
</Row>
</RadioGroup>
)
}}
/>
{/* ) : null} */}
{/* {createState.tabIndex == 2 ? ( */}
<Field
name="backgroundPic"
border={false}
v-show={createState.tabIndex == 2}
rules={[
{
required: createState.tabIndex == 2,
message: '请上传自定义模板'
}
]}
v-slots={{
input: () => (
<Row justify="space-between" style={{ width: '100%' }}>
<Col span={12} class={styles.imgContainer}>
<ColUpload
cropper
bucket="live-rewind"
options={{
fixedNumber: [1.77, 1],
autoCropWidth: 750,
autoCropHeight: 424
}}
onUploadChange={(val: any) => {
if (val) {
createState.live.backgroundPicTemplate = ''
}
}}
v-model={createState.live.backgroundPic}
class={styles.imgContainer}
/>
</Col>
<Col span={24}>
<p
class={styles.photoTip}
style={{ color: '#ff4e19', padding: '0' }}
>
图片尺寸为750*424能达到最佳显示效果
</p>
</Col>
</Row>
)
}}
/>
{/* // ) : null} */}
</ColField>
</ColFieldGroup>
<TheSticky position="bottom">
<div class={['btnGroup', 'btnMore']}>
<Button
block
round
type="primary"
plain
onClick={() => {
createState.active = 3
if (!createState.live.courseGroupId) {
createState.live.salesStartDate = ''
createState.live.salesEndDate = ''
createState.live.backgroundPic = ''
createState.live.backgroundPicTemplate = ''
createState.live.mixStudentNum = null
}
}}
>
上一步
</Button>
<Button block round type="primary" native-type="submit">
下一步
</Button>
</div>
</TheSticky>
<Popup show={this.dateStatus} position="bottom" round>
<DatetimePicker
type="date"
v-model={this.currentDate}
minDate={this.minDate}
maxDate={this.maxDate}
formatter={formatterDate}
onCancel={() => {
this.dateStatus = false
}}
onConfirm={this.onConfirm}
/>
</Popup>
</Form>
)
}
})