合并

src/teacher/piano-room/class-arrangement/index.module.less

@@ -0,0 +1,31 @@
+.container {
+  padding: 13px 14px;
+  :global {
+    .van-cell {
+      border-radius: 4px;
+      margin-bottom: 10px;
+    }
+    .van-field__label {
+      border-right: 1px solid #dfdfdf;
+      font-size: 16px;
+      color: #333333;
+    }
+  }
+}
+.tips {
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+  color: #1a1a1a;
+  font-weight: 500;
+  .icon {
+    width: 19px;
+    height: 19px;
+    margin-right: 7px;
+  }
+}
+.tipsContent {
+  font-size: 14px;
+  color: #696969;
+  line-height: 21px;
+}

src/teacher/piano-room/class-arrangement/index.tsx

@@ -0,0 +1,117 @@
+import { Button, Cell, DatetimePicker, Field, Popup, Stepper } from 'vant'
+import { defineComponent, ref } from 'vue'
+import styles from './index.module.less'
+import iconTips from '../images/icon_tips.png'
+import { formatterDate } from '@/helpers/utils'
+import request from '@/helpers/request'
+const fieldProps = {
+  'is-link': true,
+  readonly: true,
+  'arrow-direction': 'down'
+}
+export default defineComponent({
+  name: 'ClassArrangement',
+  setup() {
+    const dateShow = ref<boolean>(false)
+    const setDate = (time: Date) => {
+      console.log(time)
+      dateShow.value = false
+    }
+    // 训练声部
+    // const subjectList = ref<>()
+    const getSubjectSelect = async () => {
+      try {
+        const res = await request.get('/api-teacher/subject/subjectSelect')
+        // this.subjectList = res.data || []
+      } catch {}
+    }
+    return () => (
+      <div class={styles.container}>
+        <Field label="课程名称" placeholder="请输入课程名称" />
+        <Field label="训练声部" placeholder="请选择训练声部" {...fieldProps} />
+        <Field label="上课学员" placeholder="请选择上课学员" {...fieldProps} />
+        <Field
+          label="课时数"
+          placeholder="请输入课时数"
+          v-slots={{
+            input: () => <Stepper></Stepper>
+          }}
+        />
+        {/* <Field label="单课时时长" placeholder="请输入课程时长" /> */}
+        <Field
+          label="开始日期"
+          placeholder="请选择开始日期"
+          {...fieldProps}
+          onClick={() => (dateShow.value = true)}
+        />
+        <Cell title="循环周次" />
+        <Field label="开始时间" placeholder="请选择开始时间" {...fieldProps} />
+        <Cell title="是否跳过节假日" />
+        <Cell
+          v-slots={{
+            title: () => (
+              <div class={styles.tips}>
+                <img class={styles.icon} src={iconTips} />
+                <span>温馨提醒</span>
+              </div>
+            ),
+            label: () => (
+              <div class={styles.tipsContent}>
+                1、云酷琴房时长按课程人数扣减（含老师），以45分钟1对1课程师生2人为例，课程结束后将消耗时长：2人*45分钟=90分钟；
+                <br />
+                <br />
+                2、每节线上课平台赠送10分钟免费时长，分别为课前5分钟及课后5分钟，赠送时长不计算费用；
+                <br />
+                <br />
+                3、课程消耗时长按排课人数计算，无论实际到课人数是否为排课人数，都会按照排课人数扣费；
+                <br />
+                <br />
+                4、课程结束后费用立即结算；
+                <br />
+                <br />
+                5、琴房时长不足时，您将无法排课，请确保琴房剩余时长充足。
+              </div>
+            )
+          }}
+        />
+
+        <Button
+          block
+          type="primary"
+          round
+          style={{ margin: '0 auto', width: '90%', marginTop: '20px' }}
+        >
+          下一步
+        </Button>
+
+        <Popup position="bottom" v-model:show={dateShow.value}>
+          <DatetimePicker
+            type="date"
+            // minDate={new Date()}
+            formatter={formatterDate}
+            onConfirm={setDate}
+            onCancel={() => (dateShow.value = false)}
+          />
+        </Popup>
+
+        {/* <Popup
+          show={this.searchStatus}
+          position="bottom"
+          round
+          closeable
+          safe-area-inset-bottom
+        >
+          {this.openStatus && (
+            <OrganSearch
+              subjectList={this.subjectList}
+              onSort={this.onSort}
+              isReset
+              v-model={this.params.subjectId}
+              v-model:subjectName={this.params.subjectName}
+            />
+          )}
+        </Popup> */}
+      </div>
+    )
+  }
+})