添加陪练课设置

src/teacher/practice-class/model/timer.tsx

@@ -0,0 +1,36 @@
+import { Button, Sticky } from 'vant'
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'timer',
+  props: {
+    onChoice: {
+      type: Function,
+      default: (item: any) => {}
+    }
+  },
+  data() {
+    return {
+      timerList: []
+    }
+  },
+  render() {
+    return (
+      <div class="timer">
+        jijij
+        <Sticky offsetBottom={0} position="bottom">
+          <div class={'btnGroup'}>
+            <Button
+              block
+              round
+              type="primary"
+              onClick={() => this.onChoice(this.timerList)}
+            >
+              确定
+            </Button>
+          </div>
+        </Sticky>
+      </div>
+    )
+  }
+})

src/teacher/practice-class/practice-setting.tsx

@@ -13,10 +13,13 @@ import {
   Field,
   ActionSheet,
   CheckboxGroup,
-  Checkbox
+  Checkbox,
+  Dialog
 } from 'vant'
 import { defineComponent } from 'vue'
 import styles from './practice-setting.module.less'
+import { verifyNumberIntegerAndFloat } from '@/helpers/toolsValidate'
+import Timer from './model/timer'
 
 export default defineComponent({
   name: 'PracticeSetting',
@@ -30,9 +33,18 @@ export default defineComponent({
       },
       classTimeStatus: false,
       subjectStatus: false,
+      timerStatus: false,
       form: {
-        subjectId: [] as any[]
-      }
+        courseMinutes: null as any,
+        freeMinutes: 0,
+        subjectIdTemp: '',
+        subjectId: [] as any[],
+        subjectPrice: [] as any[],
+        skipHolidayFlag: 0,
+        setting: ''
+      },
+      minutes: [] as any,
+      rate: 0
     }
   },
   computed: {
@@ -49,49 +61,101 @@ export default defineComponent({
   },
   async mounted() {
     try {
+      // 获取手续费和分钟数
+      let config = await request.get(
+        '/api-teacher/sysConfig/queryByParamNameList',
+        {
+          params: {
+            paramNames: 'practice_times_setting,practice_service_fee'
+          }
+        }
+      )
+      let configData = config.data || []
+      configData.forEach((item: any) => {
+        if (item.paramName === 'practice_times_setting') {
+          let mins = item.paramValue ? JSON.parse(item.paramValue) : []
+          let tempArr = [] as any
+          mins.forEach((item: any) => {
+            tempArr.push({
+              ...item,
+              name: item.courseMinutes
+            })
+          })
+          this.minutes = [...tempArr]
+        }
+        if (item.paramName === 'practice_service_fee') {
+          this.rate = item.paramValue
+        }
+      })
+      //
       let teacher = await request.post('/api-teacher/teacher/querySubject')
       this.subjectList = teacher.data || []
     } catch {}
   },
   methods: {
-    onSubjectOpen() {},
-    onSelect() {},
-    onChoice(item: any) {
-      // teacherState.teacherCert.subjectId = item.join(',') || ''
+    onSelect(item: any) {
+      this.form.courseMinutes = item.courseMinutes
+      this.form.freeMinutes = item.freeMinutes
+    },
+    onChoiceTimer(item: any) {
       console.log(item)
-      this.form.subjectId = item
+      this.timerStatus = false
+    },
+    onChoice(item: any) {
+      const tempItem = item || []
+      this.form.subjectId = tempItem
+      this.form.subjectIdTemp = tempItem.join(',') || ''
+      let subjectPriceList = [...this.form.subjectPrice]
+      tempItem.forEach((item: any) => {
+        const index = subjectPriceList.findIndex(
+          (subject: any) => subject.id === item
+        )
+        if (index === -1) {
+          subjectPriceList.push({
+            id: item,
+            price: null as any
+          })
+        }
+      })
+
+      subjectPriceList.forEach((item: any) => {
+        const index = tempItem.findIndex(
+          (subjectId: any) => subjectId === item.id
+        )
+        console.log(index)
+        if (index === -1) {
+          subjectPriceList.splice(subjectPriceList.indexOf(item), 1)
+        }
+      })
+      this.form.subjectPrice = subjectPriceList
+      console.log(this.form.subjectPrice)
       this.subjectStatus = false
+    },
+    getSubjectName(id: any) {
+      const subject: any = this.subjectList.find((item: any) => item.id === id)
+      return subject ? subject.name : ''
+    },
+    onFormatter(val: any) {
+      return verifyNumberIntegerAndFloat(val)
     }
   },
   render() {
     return (
-      <Form style={{ paddingTop: '15px' }}>
+      <Form
+        style={{ paddingTop: '15px' }}
+        onFailed={() => {
+          console.log(this.form)
+        }}
+      >
         <ColFieldGroup>
-          <ColField
-            title="可教授乐器"
-            required
-            border={false}
-            v-slots={{
-              right: () => (
-                <Button
-                  class={styles.select}
-                  round
-                  type="primary"
-                  size="small"
-                  onClick={() => (this.subjectStatus = true)}
-                >
-                  选择
-                </Button>
-              )
-            }}
-          >
-            {this.choiceSubject && this.choiceSubject.length > 0 && (
+          <ColField title="可教授乐器" required>
+            {this.form.subjectPrice && this.form.subjectPrice.length > 0 && (
               <CheckboxGroup
                 modelValue={this.form.subjectId}
                 class={styles['checkbox-group']}
                 disabled
               >
-                {this.choiceSubject.map((item: any) => (
+                {this.form.subjectPrice.map((item: any) => (
                   <Checkbox class={styles.checkbox}>
                     <Tag
                       plain={true}
@@ -100,21 +164,48 @@ export default defineComponent({
                       closeable
                       size="medium"
                       onClose={() => {
-                        console.log(1111)
+                        Dialog.confirm({
+                          title: '提示',
+                          message: '您是否要删除该选择的课程？',
+                          confirmButtonColor: 'var(--van-primary)'
+                        }).then(() => {
+                          const index = this.form.subjectId.indexOf(item.id)
+                          if (index !== -1) {
+                            this.form.subjectId.splice(index, 1)
+                          }
+
+                          const index2 = this.form.subjectPrice.findIndex(
+                            (subject: any) => subject.id === item.id
+                          )
+                          if (index2 !== -1) {
+                            this.form.subjectPrice.splice(index2, 1)
+                          }
+                        })
                       }}
                     >
-                      {item.name}
+                      {this.getSubjectName(item.id)}
                     </Tag>
                   </Checkbox>
                 ))}
               </CheckboxGroup>
             )}
+            {!this.form.subjectPrice.length && (
+              <Field
+                v-model={this.form.subjectIdTemp}
+                name="courseMinutes"
+                readonly
+                onClick={() => {
+                  this.subjectStatus = true
+                }}
+                rules={[{ required: true, message: '请选择可教授乐器' }]}
+                placeholder="请选择可教授乐器"
+              />
+            )}
           </ColField>
-        </ColFieldGroup>
-        <ColFieldGroup>
           <ColField title="单课时时长" required>
             <Field
-              name="singleMins"
+              v-model={this.form.courseMinutes}
+              name="courseMinutes"
               readonly
               isLink
               onClick={() => {
@@ -128,25 +219,43 @@ export default defineComponent({
             />
           </ColField>
         </ColFieldGroup>
-
-        <ColFieldGroup>
-          <ColField title="单课时时长" required>
-            <Field
-              name="singleMins"
-              readonly
-              isLink
-              rules={[{ required: true, message: '请选择单课时时长' }]}
-              placeholder="请选择单课时时长"
-            />
-          </ColField>
-        </ColFieldGroup>
+        {this.form.subjectPrice && this.form.subjectPrice.length > 0 && (
+          <ColFieldGroup>
+            {this.form.subjectPrice.map((item: any) => (
+              <ColField
+                title={`${this.getSubjectName(item.id)}声部陪练价格`}
+                required
+              >
+                <Field
+                  v-model={item.price}
+                  name="singleMins"
+                  labelWidth={'auto'}
+                  label={`${this.form.courseMinutes || 0}分钟 / `}
+                  rules={[
+                    {
+                      required: true,
+                      message: `请选择声部陪练价格`
+                    }
+                  ]}
+                  formatter={this.onFormatter}
+                  placeholder={`请选择声部陪练价格`}
+                  v-slots={{
+                    button: () => <span>元</span>
+                  }}
+                />
+              </ColField>
+            ))}
+          </ColFieldGroup>
+        )}
 
         <ColFieldGroup>
           <ColField title="可陪练时间段" required>
             <Field
+              modelValue={this.form.setting}
               name="singleMins"
               readonly
               isLink
+              onClick={() => (this.timerStatus = true)}
               rules={[{ required: true, message: '请选择可陪练时间段' }]}
               placeholder="未设置"
             />
@@ -157,11 +266,12 @@ export default defineComponent({
           <ColField required title="是否跳过节假日" border={false}>
             <RadioGroup
               class={styles['radio-group']}
-              modelValue={this.chargeType}
-              onUpdate:modelValue={val => (this.chargeType = val)}
+              modelValue={this.form.skipHolidayFlag}
+              onUpdate:modelValue={val => (this.form.skipHolidayFlag = val)}
             >
               {Object.keys(this.chargeTypeArr).map((item: string) => {
-                const isActive = Number(item) === this.chargeType
+                const isActive =
+                  Number(item) === Number(this.form.skipHolidayFlag)
                 const type = isActive ? 'primary' : 'default'
                 return (
                   <Radio class={styles.radio} name={item}>
@@ -193,9 +303,13 @@ export default defineComponent({
           />
         </ColPopup>
 
+        <ColPopup v-model={this.timerStatus}>
+          <Timer onChoice={this.onChoiceTimer} />
+        </ColPopup>
+
         <ActionSheet
           v-model:show={this.classTimeStatus}
-          // actions={createState.minutes}
+          actions={this.minutes}
           cancelText="取消"
           closeOnClickAction
           onSelect={this.onSelect}