添加

src/school/school-detail/eidt-school.tsx

@@ -10,7 +10,7 @@ import locIcon from './images/loc-icon.png'
 import request from '@/helpers/request'
 import { areas } from '@/helpers/area'
 import OUpload from '@/components/o-upload'
-import { postMessage } from '@/helpers/native-message'
+import { listenerMessage, postMessage } from '@/helpers/native-message'
 export default defineComponent({
   name: 'school-detail',
   setup() {
@@ -118,15 +118,13 @@ export default defineComponent({
     })
     const setAddress = async () => {
       try {
-        await postMessage(
+        postMessage(
           {
             api: 'sourseMapApi',
             content: { type: 'modify', orginPoint: forms.addressLongitudeLatitude }
           },
           (data: any) => {
-            console.log('---------')
-            console.log(data.content.nowPoint, data.content.address)
-            console.log('---------')
+            console.log(data.content.nowPoint, data.content.address, '------')
             forms.addressLongitudeLatitude = data.content.nowPoint
             forms.address = data.content.address
           }
@@ -135,10 +133,17 @@ export default defineComponent({
         console.log(e)
       }
     }
+
+    onMounted(() => {
+      listenerMessage('sourseMapApi', (data: any) => {
+        console.log(data.content.nowPoint, data.content.address)
+        forms.addressLongitudeLatitude = data.content.nowPoint
+        forms.address = data.content.address
+      })
+    })
     return () => (
       <>
         <div class={styles.schoolEidtWrap}>
-          <OHeader></OHeader>
           <div class={styles.eidtWrap}>
             <CellGroup inset>
               <div class={styles.schoolDtailWrap} onClick={setSchoolIcon}>

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

@@ -0,0 +1,53 @@
+.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;
+  .unitAnswer {
+    margin-top: 15px;
+    background: #f6f6f6;
+    border-radius: 8px;
+    padding: 15px 12px;
+    display: flex;
+    align-items: center;
+    font-size: 16px;
+    font-weight: 500;
+    color: #333333;
+    .option {
+      margin-right: 10px;
+    }
+    .value {
+      :global {
+        .van-image {
+          height: 38px;
+        }
+      }
+    }
+  }
+  .active {
+    background-color: #ffebdd;
+    color: #f67146;
+  }
+}

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

@@ -0,0 +1,92 @@
+import { Tag, Image } from 'vant'
+import { defineComponent, PropType, reactive } from 'vue'
+import { labelOptions } from '../../unit'
+import styles from './index.module.less'
+
+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: {}
+    }
+  },
+  emits: ['update:value'],
+  setup(props, { emit }) {
+    const state = reactive({
+      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)
+      }
+    }
+    return () => (
+      <div class={styles.unitSubject}>
+        <div class={styles.unitSubjectTitle}>
+          1、选出与方框内音符时值相同的节奏阶段 <span class={styles.unitScore}>（5分）</span>
+          <Tag type="primary">{props.type === 'radio' ? '单选题' : '多选题'}</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}>
+          {/* styles.active */}
+          {state.options.map((item: any) => (
+            <div
+              class={[
+                styles.unitAnswer,
+                props.type === 'radio' && props.value === item.index && styles.active,
+                props.type === 'checkbox' &&
+                  (props.value as any).includes(item.index) &&
+                  styles.active
+              ]}
+              onClick={() => onSelect(item)}
+            >
+              <span class={styles.option}>{labelOptions[item.index]}.</span>
+              <div class={styles.value}>{item.value}</div>
+            </div>
+          ))}
+        </div>
+      </div>
+    )
+  }
+})

src/views/unit-test/unit-detail/index.module.less

@@ -44,20 +44,3 @@
   flex-shrink: 0;
   margin-left: 18px;
 }
-
-.unitSubject {
-  padding: 15px;
-  margin: 0 13px;
-  background-color: #fff;
-  overflow: hidden;
-  border-radius: 10px;
-}
-.unitSubjectTitle {
-  font-size: 16px;
-  font-weight: 500;
-  color: #333333;
-  line-height: 26px;
-  .unitScore {
-    color: #777777;
-  }
-}

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

@@ -7,6 +7,7 @@ import iconQuestionNums from '../images/icon-question-nums.png'
 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'
 
 export default defineComponent({
   name: 'unit-detail',
@@ -15,7 +16,8 @@ export default defineComponent({
     const router = useRouter()
     const swipeRef = ref()
     const state = reactive({
-      visiableNotice: false
+      visiableNotice: false,
+      answerList: {}
     })
     return () => (
       <div class={styles.unitDetail}>
@@ -37,20 +39,19 @@ export default defineComponent({
           }}
         </Cell>
 
-        <Swipe loop={false} showIndicators={false} ref={swipeRef} duration={300}>
+        <Swipe
+          loop={false}
+          showIndicators={false}
+          ref={swipeRef}
+          duration={300}
+          touchable={false}
+          lazyRender
+        >
           <SwipeItem>
-            <div class={styles.unitSubject}>
-              <div class={styles.unitSubjectTitle}>
-                1、选出与方框内音符时值相同的节奏阶段 <span class={styles.unitScore}>（5分）</span>
-                <Tag type="primary">单选题</Tag>
-              </div>
-              <Image src="https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/dbb27307d428424c8efb9f26032cfa1a_mergeImage.png" />
-            </div>
+            <ChoiceQuestion v-model:value={state.answerList[0]} type="checkbox" />
           </SwipeItem>
           <SwipeItem>
-            <div class={styles.unitSubject}>
-              <Image src="https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/dbb27307d428424c8efb9f26032cfa1a_mergeImage.png" />
-            </div>
+            <ChoiceQuestion />
           </SwipeItem>
         </Swipe>
 

src/views/unit-test/unit.ts

@@ -0,0 +1,12 @@
+export const labelOptions = {
+  1: 'A',
+  2: 'B',
+  3: 'C',
+  4: 'D',
+  5: 'E',
+  6: 'F',
+  7: 'G',
+  8: 'H',
+  9: 'I',
+  10: 'J'
+}