|
@@ -4,23 +4,27 @@ import ColPopup from "@/components/col-popup";
|
|
import ColUpload from "@/components/col-upload";
|
|
import ColUpload from "@/components/col-upload";
|
|
import request from "@/helpers/request";
|
|
import request from "@/helpers/request";
|
|
import { verifyNumberIntegerAndFloat } from "@/helpers/toolsValidate";
|
|
import { verifyNumberIntegerAndFloat } from "@/helpers/toolsValidate";
|
|
-import { Button, Col, Field, Form, Image, Row, Sticky } from "vant";
|
|
|
|
|
|
+import { Button, Col, Field, Form, Image, Radio, RadioGroup, Row, Sticky, Tab, Tabs } from "vant";
|
|
import { defineComponent } from "vue";
|
|
import { defineComponent } from "vue";
|
|
import SubjectModel from "../../business-components/subject-list";
|
|
import SubjectModel from "../../business-components/subject-list";
|
|
import styles from "./class-info.module.less";
|
|
import styles from "./class-info.module.less";
|
|
import { createState } from './createState'
|
|
import { createState } from './createState'
|
|
|
|
|
|
-
|
|
|
|
export default defineComponent({
|
|
export default defineComponent({
|
|
name: "ClassInfo",
|
|
name: "ClassInfo",
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
- subjectStatus: false
|
|
|
|
|
|
+ subjectStatus: false,
|
|
|
|
+ tabIndex: 1,
|
|
|
|
+ imgList: ['https://daya.ks3-cn-beijing.ksyun.com/202110/Sn2OAjr.png',
|
|
|
|
+ 'https://daya.ks3-cn-beijing.ksyun.com/202108/ShHJ1Bb.png',
|
|
|
|
+ 'https://daya.ks3-cn-beijing.ksyun.com/202110/Sn76BUQ.png'
|
|
|
|
+ ]
|
|
}
|
|
}
|
|
},
|
|
},
|
|
computed: {
|
|
computed: {
|
|
choiceSubjectIds() { // 选择的科目编号
|
|
choiceSubjectIds() { // 选择的科目编号
|
|
- let ids = createState.createVideo.lessonSubject ? Number(createState.createVideo.lessonSubject) : null;
|
|
|
|
|
|
+ let ids = createState.lessonGroup.lessonSubject ? Number(createState.lessonGroup.lessonSubject) : null;
|
|
return ids ? [ids] : [];
|
|
return ids ? [ids] : [];
|
|
},
|
|
},
|
|
subjectList() { // 学科列表
|
|
subjectList() { // 学科列表
|
|
@@ -38,9 +42,8 @@ export default defineComponent({
|
|
return tempStr
|
|
return tempStr
|
|
},
|
|
},
|
|
calcRatePrice() { // 计算手续费
|
|
calcRatePrice() { // 计算手续费
|
|
- console.log(createState.rate)
|
|
|
|
let rate = createState.rate || 0;
|
|
let rate = createState.rate || 0;
|
|
- let price = createState.createVideo.lessonPrice || 0;
|
|
|
|
|
|
+ let price = createState.lessonGroup.lessonPrice || 0;
|
|
return ((rate / 100) * price).toFixed(2);
|
|
return ((rate / 100) * price).toFixed(2);
|
|
}
|
|
}
|
|
},
|
|
},
|
|
@@ -59,37 +62,39 @@ export default defineComponent({
|
|
//
|
|
//
|
|
}
|
|
}
|
|
|
|
|
|
- // lessonName: '',
|
|
|
|
- // lessonSubject: null as any,
|
|
|
|
- // lessonDesc: '',
|
|
|
|
- // lessonPrice: null,
|
|
|
|
- // lessonCoverUrl: '',
|
|
|
|
|
|
+ createState.lessonGroup.lessonName = '测试视屏信息';
|
|
|
|
+ createState.lessonGroup.lessonSubject = 5;
|
|
|
|
+ createState.lessonGroup.lessonDesc = '测试视屏信息内容';
|
|
|
|
+ createState.lessonGroup.lessonPrice = 50;
|
|
|
|
+ createState.lessonGroup.lessonCoverUrl = 'https://daya.ks3-cn-beijing.ksyun.com/202204/T1kK2ao.png';
|
|
|
|
|
|
- createState.createVideo.lessonName = '测试视屏信息';
|
|
|
|
- createState.createVideo.lessonSubject = 5;
|
|
|
|
- createState.createVideo.lessonDesc = '测试视屏信息内容';
|
|
|
|
- createState.createVideo.lessonPrice = 50;
|
|
|
|
- createState.createVideo.lessonCoverUrl = 'https://daya.ks3-cn-beijing.ksyun.com/202204/T1kK2ao.png';
|
|
|
|
|
|
+ if (createState.lessonGroup.lessonCoverUrl && !this.imgList.includes(createState.lessonGroup.lessonCoverUrl)) {
|
|
|
|
+ this.tabIndex = 2
|
|
|
|
+ }
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
- onSubmit(values: any) {
|
|
|
|
- createState.active = 2
|
|
|
|
- },
|
|
|
|
onChoice(id: number) {
|
|
onChoice(id: number) {
|
|
- createState.createVideo.lessonSubject = id
|
|
|
|
|
|
+ createState.lessonGroup.lessonSubject = id
|
|
this.subjectStatus = false
|
|
this.subjectStatus = false
|
|
},
|
|
},
|
|
onFormatter(val: any) {
|
|
onFormatter(val: any) {
|
|
return verifyNumberIntegerAndFloat(val)
|
|
return verifyNumberIntegerAndFloat(val)
|
|
|
|
+ },
|
|
|
|
+ tabChange(name: number) {
|
|
|
|
+ this.tabIndex = name
|
|
|
|
+ },
|
|
|
|
+ selectImg(val: string) {
|
|
|
|
+ createState.lessonGroup.lessonCoverUrl = ''
|
|
|
|
+ createState.lessonGroup.lessonCoverTemplateUrl = val
|
|
}
|
|
}
|
|
},
|
|
},
|
|
render() {
|
|
render() {
|
|
return (
|
|
return (
|
|
- <Form class={styles.classInfo} onSubmit={this.onSubmit}>
|
|
|
|
|
|
+ <Form class={styles.classInfo} onSubmit={() => createState.active = 2} scrollToError>
|
|
<ColFieldGroup>
|
|
<ColFieldGroup>
|
|
<ColField title="课程名称" required>
|
|
<ColField title="课程名称" required>
|
|
<Field
|
|
<Field
|
|
- v-model={createState.createVideo.lessonName}
|
|
|
|
|
|
+ v-model={createState.lessonGroup.lessonName}
|
|
name="lessonName"
|
|
name="lessonName"
|
|
maxlength={50}
|
|
maxlength={50}
|
|
placeholder="请输入您的课程名称"
|
|
placeholder="请输入您的课程名称"
|
|
@@ -112,7 +117,7 @@ export default defineComponent({
|
|
<ColFieldGroup>
|
|
<ColFieldGroup>
|
|
<ColField title="课程介绍" required border={false}>
|
|
<ColField title="课程介绍" required border={false}>
|
|
<Field
|
|
<Field
|
|
- v-model={createState.createVideo.lessonDesc}
|
|
|
|
|
|
+ v-model={createState.lessonGroup.lessonDesc}
|
|
name="lessonDesc"
|
|
name="lessonDesc"
|
|
placeholder="请输入课程介绍"
|
|
placeholder="请输入课程介绍"
|
|
rows="3"
|
|
rows="3"
|
|
@@ -127,7 +132,7 @@ export default defineComponent({
|
|
<ColFieldGroup>
|
|
<ColFieldGroup>
|
|
<ColField title="课程组售价" required>
|
|
<ColField title="课程组售价" required>
|
|
<Field
|
|
<Field
|
|
- v-model={createState.createVideo.lessonPrice}
|
|
|
|
|
|
+ v-model={createState.lessonGroup.lessonPrice}
|
|
name="lessonPrice"
|
|
name="lessonPrice"
|
|
placeholder="请输入您的课程组售价"
|
|
placeholder="请输入您的课程组售价"
|
|
formatter={this.onFormatter}
|
|
formatter={this.onFormatter}
|
|
@@ -148,34 +153,48 @@ export default defineComponent({
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<ColFieldGroup>
|
|
<ColFieldGroup>
|
|
- <ColField title="图片模板" required border={false}>
|
|
|
|
|
|
+ <ColField required border={false}
|
|
|
|
+ v-slots={{
|
|
|
|
+ title: () => (
|
|
|
|
+ <Tabs v-model:active={this.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>
|
|
<p class={styles.photoTip}>模板图片将作为改课程封面为学员展示</p>
|
|
|
|
|
|
|
|
+ {/* name={this.tabIndex === 1 ? 'lessonCoverTemplateUrl' : 'lessonCoverUrl'} */}
|
|
<Field
|
|
<Field
|
|
- v-model={createState.createVideo.lessonCoverUrl}
|
|
|
|
name="lessonCoverUrl"
|
|
name="lessonCoverUrl"
|
|
rules={[{ required: true, message: '请选择课程声部' }]}
|
|
rules={[{ required: true, message: '请选择课程声部' }]}
|
|
v-slots={{
|
|
v-slots={{
|
|
- input: () => (
|
|
|
|
- <Row justify="space-between">
|
|
|
|
- <Col span={12} class={styles.imgContainer}>
|
|
|
|
- <Image class={styles.imgContainer} src="https://daya.ks3-cn-beijing.ksyun.com/202201/Sv7wlrW.png" />
|
|
|
|
- </Col>
|
|
|
|
- <Col span={12} class={styles.imgContainer}>
|
|
|
|
- <Image class={styles.imgContainer} src="https://daya.ks3-cn-beijing.ksyun.com/202201/Sv7wlrW.png" />
|
|
|
|
- </Col>
|
|
|
|
- <Col span={12} class={styles.imgContainer}>
|
|
|
|
- <Image class={styles.imgContainer} src="https://daya.ks3-cn-beijing.ksyun.com/202201/Sv7wlrW.png" />
|
|
|
|
- </Col>
|
|
|
|
|
|
+ input: () =>
|
|
|
|
+ this.tabIndex == 1 ? <RadioGroup v-model={createState.lessonGroup.lessonCoverTemplateUrl}>
|
|
|
|
+ <Row justify="space-between" style={{ width: '100%' }}>
|
|
|
|
+ {this.imgList.map((item: any) => (
|
|
|
|
+ <Col span={12} class={styles.imgContainer} onClick={() => this.selectImg(item)}>
|
|
|
|
+ <Image class={styles.imgContainer} src={item} />
|
|
|
|
+ <Radio name={item} />
|
|
|
|
+ </Col>
|
|
|
|
+ ))}
|
|
|
|
+ </Row>
|
|
|
|
+ </RadioGroup> : <Row justify="space-between" style={{ width: '100%' }}>
|
|
<Col span={12} class={styles.imgContainer}>
|
|
<Col span={12} class={styles.imgContainer}>
|
|
<ColUpload cropper options={{
|
|
<ColUpload cropper options={{
|
|
fixedNumber: [3, 2],
|
|
fixedNumber: [3, 2],
|
|
autoCropWidth: 750,
|
|
autoCropWidth: 750,
|
|
autoCropHeight: 500,
|
|
autoCropHeight: 500,
|
|
- }} v-model={createState.createVideo.lessonCoverUrl} class={styles.imgContainer} />
|
|
|
|
|
|
+ }}
|
|
|
|
+ onUploadChange={(val: any) => {
|
|
|
|
+ if (val) {
|
|
|
|
+ createState.lessonGroup.lessonCoverTemplateUrl = ''
|
|
|
|
+ }
|
|
|
|
+ }}
|
|
|
|
+ v-model={createState.lessonGroup.lessonCoverUrl} class={styles.imgContainer} />
|
|
</Col>
|
|
</Col>
|
|
</Row>
|
|
</Row>
|
|
- )
|
|
|
|
|
|
+
|
|
}}
|
|
}}
|
|
/>
|
|
/>
|
|
</ColField>
|
|
</ColField>
|
|
@@ -190,7 +209,7 @@ export default defineComponent({
|
|
<ColPopup v-model={this.subjectStatus}>
|
|
<ColPopup v-model={this.subjectStatus}>
|
|
<SubjectModel selectType="Radio" subjectList={this.subjectList} choiceSubjectIds={this.choiceSubjectIds} onChoice={this.onChoice} />
|
|
<SubjectModel selectType="Radio" subjectList={this.subjectList} choiceSubjectIds={this.choiceSubjectIds} onChoice={this.onChoice} />
|
|
</ColPopup>
|
|
</ColPopup>
|
|
- </Form>
|
|
|
|
|
|
+ </Form >
|
|
)
|
|
)
|
|
}
|
|
}
|
|
})
|
|
})
|