更新

package-lock.json

@@ -28,6 +28,7 @@
         "qrcode": "^1.5.1",
         "qrcode.vue": "^3.3.3",
         "query-string": "^7.1.1",
+        "sortablejs": "^1.15.0",
         "umi-request": "^1.4.0",
         "vant": "^4.0.0",
         "vconsole": "^3.15.0",
@@ -8494,6 +8495,11 @@
         "tslib": "^2.0.3"
       }
     },
+    "node_modules/sortablejs": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmmirror.com/sortablejs/-/sortablejs-1.15.0.tgz",
+      "integrity": "sha512-bv9qgVMjUMf89wAvM6AxVvS/4MX3sPeN0+agqShejLU5z5GX4C75ow1O2e5k4L6XItUyAK3gH6AxSbXrOM5e8w=="
+    },
     "node_modules/source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmmirror.com/source-map/-/source-map-0.6.1.tgz",
@@ -15648,6 +15654,11 @@
         "tslib": "^2.0.3"
       }
     },
+    "sortablejs": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmmirror.com/sortablejs/-/sortablejs-1.15.0.tgz",
+      "integrity": "sha512-bv9qgVMjUMf89wAvM6AxVvS/4MX3sPeN0+agqShejLU5z5GX4C75ow1O2e5k4L6XItUyAK3gH6AxSbXrOM5e8w=="
+    },
     "source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmmirror.com/source-map/-/source-map-0.6.1.tgz",

package.json

@@ -40,6 +40,7 @@
     "qrcode": "^1.5.1",
     "qrcode.vue": "^3.3.3",
     "query-string": "^7.1.1",
+    "sortablejs": "^1.15.0",
     "umi-request": "^1.4.0",
     "vant": "^4.0.0",
     "vconsole": "^3.15.0",

public/project/css/initiation.css

@@ -87,7 +87,7 @@ span {
 }
 
 .title {
-  text-shadow: 0px 2px 4px #649D66;
+  text-shadow: 0px 2px 3px rgba(255, 96, 0, 0.5);
   position: absolute;
   font-size: 26px;
   line-height: 37px;

public/project/css/preRegister.css

@@ -87,7 +87,7 @@ span {
 }
 
 .title {
-  text-shadow: 0px 2px 4px #649D66;
+  text-shadow: 0px 2px 3px #704CA7;
   position: absolute;
   font-size: 26px;
   line-height: 37px;

src/school/orchestra/create-orchestra/index.tsx

@@ -228,26 +228,30 @@ export default defineComponent({
 
         {/* 选择声部 */}
         <OPopup v-model:modelValue={state.subjectStatus} style="background: #F8F8F8;">
-          <SubjectList
-            onClose={() => (state.subjectStatus = false)}
-            subjectList={state.subjectList}
-            selectSubjects={state.selectSubjectIds}
-            onSelect={onSelectSubject}
-          />
+          {state.subjectStatus && (
+            <SubjectList
+              onClose={() => (state.subjectStatus = false)}
+              subjectList={state.subjectList}
+              selectSubjects={state.selectSubjectIds}
+              onSelect={onSelectSubject}
+            />
+          )}
         </OPopup>
 
         {/* 选择学生 */}
-        <OPopup v-model:modelValue={state.studentStatus} style="background: #f8f8f8;" destroy>
-          <StudentList
-            orchestraList={state.orchestraList}
-            subjectId={state.selectSubjectStudents.id}
-            selectStudentIds={state.selectSubjectStudents.students}
-            onClose={() => (state.studentStatus = false)}
-            onSelect={(item: any) => {
-              // console.log(item, 'select student')
-              state.selectSubjectStudents.students = [...item]
-            }}
-          />
+        <OPopup v-model:modelValue={state.studentStatus} style="background: #f8f8f8;">
+          {state.studentStatus && (
+            <StudentList
+              orchestraList={state.orchestraList}
+              subjectId={state.selectSubjectStudents.id}
+              selectStudentIds={state.selectSubjectStudents.students}
+              onClose={() => (state.studentStatus = false)}
+              onSelect={(item: any) => {
+                // console.log(item, 'select student')
+                state.selectSubjectStudents.students = [...item]
+              }}
+            />
+          )}
         </OPopup>
       </div>
     )

src/school/orchestra/modal/student-list.tsx

@@ -145,6 +145,7 @@ export default defineComponent({
     watch(
       () => props.subjectId,
       () => {
+        console.log('subjectId')
         onSearch()
       }
     )
@@ -180,7 +181,7 @@ export default defineComponent({
     return () => (
       <div class={styles.studentList}>
         <OSticky position="top">
-          <OHeader title="选择学生" desotry={false} />
+          <OHeader title="选择学生" />
           <OSearch
             inputBackground="white"
             background="#F8F8F8"

src/school/train-planning/component/standard/index.tsx

@@ -321,14 +321,16 @@ export default defineComponent({
           style={{ background: '#F6F6F6' }}
           destroy
         >
-          <Timer
-            timerList={forms.timerList}
-            times={forms.trainTimer}
-            onClose={() => (forms.timerStatus = false)}
-            onConfirm={(val: any) => {
-              forms.trainStartTime = val
-            }}
-          />
+          {forms.timerStatus && (
+            <Timer
+              timerList={forms.timerList}
+              times={forms.trainTimer}
+              onClose={() => (forms.timerStatus = false)}
+              onConfirm={(val: any) => {
+                forms.trainStartTime = val
+              }}
+            />
+          )}
         </OPopup>
 
         <Popup v-model:show={forms.numberStatus} position="bottom" round>

src/student/music-group/layout/index.module.less

@@ -77,7 +77,7 @@
   .wxPopupDialog {
     position: relative;
     overflow: inherit;
-    margin-top: -100px;
+    margin-top: -160px;
     &::before {
       position: absolute;
       content: ' ';

src/student/music-group/pre-apply/order-detail.tsx

@@ -470,13 +470,13 @@ export default defineComponent({
                 <div class={styles.codeTips}>
                   <div class={styles.tipsTitle}>使用说明：</div>
                   <div class={styles.tipsContent}>
-                    1.长按二维码保存图片到相册（或截屏保存到相册）
+                    {/* 1.长按二维码保存图片到相册（或截屏保存到相册） */}
+                    {/* <br /> */}
+                    1.打开{state.pay_channel === 'wx_pub' ? '微信' : '支付宝'}扫一扫
                     <br />
-                    2.打开{state.pay_channel === 'wx_pub' ? '微信' : '支付宝'}扫一扫
+                    2.选择相册中的二维码
                     <br />
-                    3.选择相册中的二维码
-                    <br />
-                    4.请在30分钟内扫码支付
+                    3.请在30分钟内扫码支付
                   </div>
                 </div>
               </div>

src/views/information/help-center/index.module.less

@@ -3,3 +3,12 @@
   color: #333333;
   line-height: 22px;
 }
+
+.liveList {
+  margin-top: 12px;
+  :global {
+    .van-cell {
+      padding: 18px 13px;
+    }
+  }
+}

src/views/unit-test/model/answer-list/index.tsx

@@ -7,7 +7,7 @@ export default defineComponent({
   props: {
     value: {
       type: Array,
-      default: []
+      default: () => []
     },
     answerList: {
       type: Array,
@@ -27,8 +27,9 @@ export default defineComponent({
       ]
     }
   },
-  emits: ['select', 'update:value'],
+  emits: ['select'],
   setup(props, { emit }) {
+    console.log(props.value)
     return () => (
       <div class={styles.anserList}>
         <div class={styles.status}>
@@ -41,14 +42,11 @@ export default defineComponent({
         </div>
 
         <Grid class={styles.aList} columnNum={6} border={false}>
-          {[1, 2, 3, 4, 5, 6, 6, 7, 8, 9, 9, 0, 10].map((item: any) => {
-            // console.log(props.keys)
-            return (
-              <GridItem onClick={() => emit('select', item)}>
-                <span class={props.value.includes(item) && styles.active}>{item}</span>
-              </GridItem>
-            )
-          })}
+          {[1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 10].map((item: any) => (
+            <GridItem onClick={() => emit('select', item)}>
+              <span class={props.value.includes(item) && styles.answered}>{item}</span>
+            </GridItem>
+          ))}
         </Grid>
       </div>
     )

src/views/unit-test/model/choice-question/index.tsx

@@ -3,6 +3,7 @@ import { defineComponent, PropType, reactive } from 'vue'
 import { labelOptions } from '../../unit'
 import styles from './index.module.less'
 
+// 单选题 - 多选题
 export default defineComponent({
   name: 'choice-question',
   props: {

src/views/unit-test/model/drag-question/index.module.less

@@ -0,0 +1,69 @@
+.unitSubject {
+  padding: 15px;
+  margin: 0 13px;
+  background-color: #fff;
+  // overflow: hidden;
+  border-radius: 10px;
+}
+.unitSubjectTitle {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  font-size: 16px;
+  font-weight: 500;
+  color: #333333;
+  line-height: 26px;
+  .unitScore {
+    color: #777777;
+  }
+}
+.unitTitleImg {
+  padding-top: 20px;
+  padding-bottom: 10px;
+  width: 100%;
+}
+
+.unitAnswers {
+  padding-bottom: 30px;
+  :global {
+    .sortable-ghost {
+      opacity: 0.5;
+      background: #c8ebfb;
+    }
+  }
+  .sortReset {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: 25px;
+    padding-top: 30px;
+    padding-bottom: 30px;
+    .tips {
+      font-size: 16px;
+      font-weight: 500;
+      color: #333333;
+      line-height: 26px;
+    }
+    :global {
+      .van-button {
+        min-width: 84px;
+        height: 31px;
+        line-height: 31px;
+        font-size: 15px;
+        font-weight: 500;
+      }
+    }
+  }
+
+  .items {
+    min-width: 56px;
+    height: 36px;
+    font-size: 16px;
+    font-weight: 500;
+    margin-right: 10px;
+    border-radius: 4px;
+    background: #ffebdd;
+    color: #f67146;
+    justify-content: center;
+  }
+}

src/views/unit-test/model/drag-question/index.tsx

@@ -0,0 +1,139 @@
+import { Tag, Image, Button } from 'vant'
+import { defineComponent, nextTick, onMounted, PropType, reactive } from 'vue'
+import { labelOptions } from '../../unit'
+import Draggable from 'vuedraggable'
+import styles from './index.module.less'
+import Sortable from 'sortablejs'
+import deepClone from '@/helpers/deep-clone'
+
+// 单选和多选题
+export default defineComponent({
+  name: 'choice-question',
+  props: {
+    value: {
+      type: [String, Number, Array],
+      default: ''
+    },
+    type: {
+      type: String as PropType<'radio' | 'checkbox'>,
+      default: 'radio'
+    },
+    answers: {
+      type: Object,
+      default: {}
+    },
+    /* 只读 */
+    readOnly: {
+      type: Boolean,
+      default: true
+    }
+  },
+  emits: ['update:value'],
+  setup(props, { emit }) {
+    const state = reactive({
+      domId: 'draggableContainer' + +new Date(),
+      drag: false,
+      sortable: null as any,
+      list: [] as any,
+      options: [
+        {
+          index: 1,
+          value: 'Sol'
+        },
+        {
+          index: 2,
+          value: 'Sal'
+        },
+        {
+          index: 3,
+          value: 'La'
+        },
+        {
+          index: 4,
+          value: 'Si'
+        }
+      ]
+    })
+
+    // const onSelect = (item: any) => {
+    //   if (props.type === 'checkbox') {
+    //     // 判断是否已选过
+    //     const value: any = props.value
+    //     if (value.includes(item.index)) {
+    //       const index = value.findIndex((v: any) => v === item.index)
+    //       value.splice(index, 1)
+    //       emit('update:value', [...value])
+    //     } else {
+    //       emit('update:value', [item.index, ...value])
+    //     }
+    //   } else {
+    //     emit('update:value', item.index)
+    //   }
+    // }
+
+    onMounted(() => {
+      nextTick(() => {
+        const el = document.getElementById(state.domId)
+        state.sortable = Sortable.create(el, {
+          // disabled: true,
+          animation: 150,
+          sort: true,
+          fallbackTolerance: 3,
+          onUpdate: (evt: any) => {
+            // console.log(evt, 'update')
+            const updatePosition = (list: any) =>
+              list.splice(evt.newIndex, 0, list.splice(evt.oldIndex, 1)[0])
+
+            // const list = deepClone(state.options)
+            // updatePosition(list)
+
+            // state.options = list
+            if (state.list && state.list.length > 0) {
+              updatePosition(state.list)
+              return
+            }
+            state.list = [...state.options]
+            updatePosition(state.list)
+            // console.log(updatePosition(state.options))
+          }
+        })
+      })
+    })
+    return () => (
+      <div class={styles.unitSubject}>
+        <div class={styles.unitSubjectTitle}>
+          1、选出与方框内音符时值相同的节奏阶段 <span class={styles.unitScore}>（5分）</span>
+          <Tag type="primary">排序题</Tag>
+        </div>
+        <Image
+          class={styles.unitTitleImg}
+          src="https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/dbb27307d428424c8efb9f26032cfa1a_mergeImage.png"
+        />
+
+        <div class={[styles.unitAnswers, 'van-hairline--top']}>
+          <div class={styles.sortReset}>
+            <span class={styles.tips}>请长按拖拽答案进行排序</span>
+            <Button
+              type="primary"
+              round
+              onClick={() => {
+                console.log(11, state.sortable)
+                // state.list = state.list.sort((a: any, b: any) => a.index - b.index)
+                // console.log(c, '222')
+                // state.options = c
+                // console.log(state.options, state.list)
+              }}
+            >
+              重置
+            </Button>
+          </div>
+          <div id={state.domId}>
+            {state.options.map((item: any) => (
+              <Tag class={[styles.items]}>{item.value + item.index}</Tag>
+            ))}
+          </div>
+        </div>
+      </div>
+    )
+  }
+})

src/views/unit-test/unit-detail/index.tsx

@@ -19,9 +19,9 @@ import iconCountDown from '../images/icon-count-down.png'
 import iconButtonList from '../images/icon-button-list.png'
 import OSticky from '@/components/o-sticky'
 import ChoiceQuestion from '../model/choice-question'
-import { useCountDown } from '@vant/use'
 import AnswerList from '../model/answer-list'
 import ODialog from '@/components/o-dialog'
+import DragQuestion from '../model/drag-question'
 
 export default defineComponent({
   name: 'unit-detail',
@@ -37,7 +37,12 @@ export default defineComponent({
       questionList: [1, 2, 3, 4, 5],
       answerList: {},
       time: 30 * 60 * 1000,
-      visiableSure: false
+      visiableSure: false,
+      childs: [
+        { name: 'John', id: 0 },
+        { name: 'Joao', id: 1 },
+        { name: 'Jean', id: 2 }
+      ]
     })
 
     return () => (
@@ -77,7 +82,8 @@ export default defineComponent({
         >
           {state.questionList.map((item: any) => (
             <SwipeItem>
-              <ChoiceQuestion v-model:value={state.answerList[item]} type="checkbox" />
+              {/* <ChoiceQuestion v-model:value={state.answerList[item]} type="checkbox" /> */}
+              <DragQuestion />
             </SwipeItem>
           ))}
         </Swipe>
@@ -131,6 +137,7 @@ export default defineComponent({
               swipeRef.value?.swipeTo(item, {
                 immediate: true
               })
+              state.visiableAnswer = false
             }}
           />
         </ActionSheet>