修改样式

src/components/o-action-sheet/index.tsx

@@ -0,0 +1,79 @@
+import { ActionSheet } from 'vant'
+import { defineComponent, PropType, reactive, watch } from 'vue'
+
+type actionsType = {
+  name: string | number
+  value?: string | number
+  selected?: boolean
+}
+
+export default defineComponent({
+  name: 'o-action-sheet',
+  props: {
+    show: {
+      type: Boolean,
+      default: false
+    },
+    actions: {
+      type: Array as PropType<actionsType[]>,
+      required: true,
+      default: () => []
+    },
+    cancelText: {
+      type: String,
+      default: '取消'
+    },
+    teleport: {
+      type: [String, Element],
+      default: ''
+    }
+  },
+  emits: ['update:show', 'select'],
+  setup(props, { emit }) {
+    const form = reactive({
+      oPopover: props.show
+    })
+
+    const onSelect = (item: any) => {
+      emit('select', item)
+      emit('update:show', false)
+    }
+
+    watch(
+      () => form.oPopover,
+      () => {
+        emit('update:show', form.oPopover)
+      }
+    )
+
+    watch(
+      () => props.show,
+      () => {
+        form.oPopover = props.show
+      }
+    )
+
+    return () => (
+      <ActionSheet v-model:show={form.oPopover} teleport={props.teleport}>
+        <div class={['van-sheet_content van-hairline--bottom']}>
+          {props.actions.map((item: any) => (
+            <div
+              class={['van-sheet-item', item.selected && 'van-sheet-item-active']}
+              onClick={() => onSelect(item)}
+            >
+              {item.name}
+            </div>
+          ))}
+        </div>
+
+        <button
+          type="button"
+          class="van-action-sheet__cancel van-action-sheet_bottom__cancel"
+          onClick={() => emit('update:show', false)}
+        >
+          {props.cancelText}
+        </button>
+      </ActionSheet>
+    )
+  }
+})

src/school/approval-manage/MyApproval.tsx

@@ -1,3 +1,4 @@
+import OActionSheet from '@/components/o-action-sheet'
 import { ActionSheet, ActionSheetAction } from 'vant'
 import { computed, defineComponent, ref } from 'vue'
 import EndApproval from './components/end-approval'
@@ -10,8 +11,11 @@ export default defineComponent({
   setup(props, ctx) {
     const actions = computed(() => {
       return [
-        { name: '待审批', color: activeName.value == '待审批' ? 'var(--van-primary-color)' : '' },
-        { name: '已完成', color: activeName.value == '已完成' ? 'var(--van-primary-color)' : '' }
+        {
+          name: '待审批',
+          selected: activeName.value == '待审批' ? true : false
+        },
+        { name: '已完成', selected: activeName.value == '已完成' ? true : false }
       ]
     })
     const activeName = ref('待审批')
@@ -26,16 +30,20 @@ export default defineComponent({
             {activeName.value}
           </span>
         </div>
-        <ActionSheet
-          teleport="body"
-          cancelText="取消"
+
+        <OActionSheet
           v-model:show={show.value}
+          teleport={'body'}
           actions={actions.value}
-          onSelect={(action: ActionSheetAction, index: number) => {
-            activeName.value = action.name || '待审批'
+          onSelect={(val: any) => {
+            actions.value.forEach((child: any) => {
+              child.selected = false
+            })
+            activeName.value = val.name || '待审批'
             show.value = false
+            val.selected = true
           }}
-        ></ActionSheet>
+        />
 
         {activeName.value == '待审批' ? <WaitApproval /> : <EndApproval />}
       </div>

src/school/approval-manage/subsidy/reward-detail.tsx

@@ -1,4 +1,4 @@
-import { ActionSheet, ActionSheetAction, Cell, Grid, GridItem } from 'vant'
+import { ActionSheet, ActionSheetAction, Cell, Grid, GridItem, Picker, Popup } from 'vant'
 import { computed, defineComponent, onMounted, reactive, ref } from 'vue'
 import styles from '../index.module.less'
 import iconA from '../images/icon-photo.png'
@@ -68,15 +68,13 @@ export default defineComponent({
     const actions = computed(() => {
       const subList = data.subjects.map((n: any) => {
         return {
-          name: n.subjectName,
-          value: n.subjectId,
-          color: activeName.value == n.subjectName ? 'var(--van-primary-color)' : ''
+          text: n.subjectName,
+          value: n.subjectId
         }
       })
       return [
         {
-          name: '全部声部',
-          color: activeName.value == '全部声部' ? 'var(--van-primary-color)' : ''
+          text: '全部声部'
         },
         ...subList
       ]
@@ -138,10 +136,12 @@ export default defineComponent({
               </Grid>
             </div>
 
-            <div class={styles.itemSelect}>
-              <div class={styles.select} onClick={() => (show.value = true)}>
+            <div class={'searchGroup-single'} style="padding-top: 0 !important;">
+              <div
+                class={['searchItem', show.value ? 'searchItem-active' : '']}
+                onClick={() => (show.value = true)}
+              >
                 <span>{activeName.value}</span>
-                <img src={iconArrow} />
               </div>
             </div>
 
@@ -176,18 +176,19 @@ export default defineComponent({
             )}
           </div>
         </OFullRefresh>
-        <ActionSheet
-          teleport="body"
-          cancelText="取消"
-          v-model:show={show.value}
-          actions={actions.value}
-          onSelect={(action: any, index: number) => {
-            activeName.value = action.name || '全部声部'
-            data.subjectId = action.value || ''
-            show.value = false
-            getData()
-          }}
-        ></ActionSheet>
+
+        <Popup v-model:show={show.value} position="bottom" round class={'popupBottomSearch'}>
+          <Picker
+            columns={actions.value}
+            onCancel={() => (show.value = false)}
+            onConfirm={(val: any) => {
+              activeName.value = val.selectedOptions[0].text || '全部声部'
+              data.subjectId = val.selectedOptions[0].value || ''
+              show.value = false
+              getData()
+            }}
+          />
+        </Popup>
       </div>
     )
   }

src/school/companion-teacher/index.tsx

@@ -38,6 +38,7 @@ import html2canvas from 'html2canvas'
 import { forms } from '../train-planning/create'
 import OFullRefresh from '@/components/o-full-refresh'
 import { format } from 'path'
+import OActionSheet from '@/components/o-action-sheet'
 
 export default defineComponent({
   name: 'companion-teacher',
@@ -48,6 +49,17 @@ export default defineComponent({
       showPopover: false,
       oPopover: false,
       subjectList: [{ text: '全部声部', value: 'ALL' }] as any,
+      action: [
+        {
+          name: '解绑',
+          id: true
+        },
+        {
+          name: '绑定',
+          id: false,
+          selected: true
+        }
+      ],
       list: [] as any,
       listState: {
         dataShow: true, // 判断是否有数据
@@ -359,20 +371,14 @@ export default defineComponent({
           </div>
         </Popup>
 
-        <ActionSheet
+        <OActionSheet
           v-model:show={form.oPopover}
-          cancelText="取消"
-          actions={
-            [
-              // { name: '全部', id: 'ALL' },
-              { name: '解绑', id: true },
-              { name: '绑定', id: false }
-              // { name: '注销', id: 'CANCEL' },
-              // { name: '冻结', id: 'LOCKED' },
-              // { name: '正常', id: 'ACTIVATION' }
-            ] as any
-          }
+          actions={form.action}
           onSelect={(val: any) => {
+            form.action.forEach((child: any) => {
+              child.selected = false
+            })
+            val.selected = true
             form.statusText = val.name
             form.params.delFlag = val.id === 'ALL' ? null : val.id
             form.oPopover = false

src/school/orchestra/compontent/plan.tsx

@@ -191,6 +191,8 @@ export default defineComponent({
         })
 
         state.currentData = [year - 1 + '']
+        state.actionText = '下学期'
+        state.actionType = 'up'
       }
 
       await getList()

src/school/ranking-list/components/day-bang.tsx

@@ -261,21 +261,6 @@ export default defineComponent({
           />
         </Popup>
 
-        {/* <ActionSheet
-          v-model:show={state.showPopoverOrchestra}
-          title="选择乐团"
-          actions={state.actions}
-          onSelect={checkOrchestra}
-        ></ActionSheet>
-
-        <ActionSheet
-          style={{ height: '40%' }}
-          close-on-click-action
-          v-model:show={state.showPopoverSubject}
-          title="选择声部"
-          actions={state.subjects}
-          onSelect={checkSubject}
-        ></ActionSheet> */}
         <Popup
           v-model:show={state.showPopoverOrchestra}
           position="bottom"

src/school/ranking-list/components/timer-bang.tsx

@@ -297,21 +297,6 @@ export default defineComponent({
           />
         </Popup>
 
-        {/* <ActionSheet
-          v-model:show={state.showPopoverOrchestra}
-          title="选择乐团"
-          actions={state.actions}
-          onSelect={checkOrchestra}
-        ></ActionSheet>
-
-        <ActionSheet
-          style={{ height: '40%' }}
-          close-on-click-action
-          v-model:show={state.showPopoverSubject}
-          title="选择声部"
-          actions={state.subjects}
-          onSelect={checkSubject}
-        ></ActionSheet> */}
         <Popup
           v-model:show={state.showPopoverOrchestra}
           position="bottom"

src/styles/index.less

@@ -518,6 +518,8 @@ input {
   }
 }
 .van-action-sheet_bottom__cancel {
+  margin: 0 13px;
+  width: calc(100vw - 26px);
   line-height: 52px;
   padding: 0;
   color: #aaaaaa;

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

@@ -212,12 +212,6 @@ export default defineComponent({
           </div>
         ) : null}
 
-        {/* <ActionSheet
-          v-model:show={state.showPopoverOrchestra}
-          title="选择乐团"
-          actions={state.actions}
-          onSelect={checkOrchestra}
-        ></ActionSheet> */}
         <Popup
           v-model:show={state.showPopoverOrchestra}
           position="bottom"

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

@@ -13,6 +13,7 @@ import OFullRefresh from '@/components/o-full-refresh'
 import { state } from '@/state'
 import request from '@/helpers/request'
 import { postMessage } from '@/helpers/native-message'
+import OActionSheet from '@/components/o-action-sheet'
 export default defineComponent({
   name: 'unit-list',
   setup() {
@@ -179,35 +180,20 @@ export default defineComponent({
           <OEmpty tips="暂无阶段自测" />
         )}
 
-        <ActionSheet v-model:show={form.oPopover}>
-          <div class={['van-sheet_content van-hairline--bottom']}>
-            {form.action.map((item: any) => (
-              <div
-                class={['van-sheet-item', item.selected && 'van-sheet-item-active']}
-                onClick={() => {
-                  form.action.forEach((child: any) => {
-                    child.selected = false
-                  })
-                  item.selected = true
-                  form.statusText = item.name
-                  form.params.classTypeCode = item.id === 'ALL' ? null : item.id
-                  form.oPopover = false
-                  onSearch()
-                }}
-              >
-                {item.name}
-              </div>
-            ))}
-          </div>
-
-          <button
-            type="button"
-            class="van-action-sheet__cancel van-action-sheet_bottom__cancel"
-            onClick={() => (form.oPopover = false)}
-          >
-            取消
-          </button>
-        </ActionSheet>
+        <OActionSheet
+          v-model:show={form.oPopover}
+          actions={form.action}
+          onSelect={(item: any) => {
+            form.action.forEach((child: any) => {
+              child.selected = false
+            })
+            item.selected = true
+            form.statusText = item.name
+            form.params.classTypeCode = item.id === 'ALL' ? null : item.id
+            form.oPopover = false
+            onSearch()
+          }}
+        />
       </div>
     )
   }