待办事项1.0

src/school/approval-manage/MyApproval.tsx

@@ -0,0 +1,40 @@
+import { ActionSheet, ActionSheetAction } from 'vant'
+import { computed, defineComponent, ref } from 'vue'
+import EndApproval from './components/end-approval'
+import WaitApproval from './components/wait-approval'
+import iconArrow from './images/icon-arrow.png'
+import styles from './index.module.less'
+
+export default defineComponent({
+  name: 'MyApproval',
+  setup(props, ctx) {
+    const actions = computed(() => {
+      return [
+        { name: '待审批', color: activeName.value == '待审批' ? 'var(--van-primary-color)' : '' },
+        { name: '已完成', color: activeName.value == '已完成' ? 'var(--van-primary-color)' : '' }
+      ]
+    })
+    const activeName = ref('待审批')
+    const show = ref(false)
+    return () => (
+      <div class={styles.MyApproval}>
+        <div class={styles.select} onClick={() => (show.value = true)}>
+          <span>{activeName.value}</span>
+          <img src={iconArrow} />
+        </div>
+        <ActionSheet
+          teleport="body"
+          cancelText="取消"
+          v-model:show={show.value}
+          actions={actions.value}
+          onSelect={(action: ActionSheetAction, index: number) => {
+            activeName.value = action.name || '待审批'
+            show.value = false
+          }}
+        ></ActionSheet>
+
+        {activeName.value == '待审批' ? <WaitApproval /> : <EndApproval />}
+      </div>
+    )
+  }
+})

src/school/approval-manage/agency/index.module.less

@@ -0,0 +1,46 @@
+.item {
+  border-radius: 10px;
+  margin: 12px 13px;
+  overflow: hidden;
+  :global {
+    .van-cell::after {
+      left: 0;
+      right: 0;
+    }
+    .van-cell__label {
+      font-size: 13px;
+      color: #777;
+    }
+  }
+  .itemTitle {
+    display: flex;
+    align-items: center;
+    font-size: 16px;
+    .titleIcon {
+      width: 18px;
+      height: 18px;
+      margin-right: 6px;
+    }
+  }
+}
+
+.grid {
+  :global {
+    .van-grid-item__content {
+      padding: 15px 5px 20px 5px;
+    }
+  }
+  .gridItem{
+    text-align: center;
+    font-size: 12px;
+    color: #777;
+    .gridItemTop{
+        margin-bottom: 6px;
+    }
+    .topNum{
+        color: #F67146;
+        font-size: 22px;
+        margin-right: 2px;
+    }
+  }
+}

src/school/approval-manage/agency/index.tsx

@@ -0,0 +1,52 @@
+import { Cell, Grid, GridItem } from 'vant'
+import { defineComponent } from 'vue'
+import styles from './index.module.less'
+import iconSubsidy from '../images/icon-subsidy.png'
+
+export default defineComponent({
+  name: 'approval-manage-agency',
+  setup() {
+    return () => (
+      <div>
+        <div class={styles.item}>
+          <Cell center label="2023-1-16 至 2023-1-2" isLink>
+            {{
+              title: () => (
+                <div class={styles.itemTitle}>
+                  <img class={styles.titleIcon} src={iconSubsidy} />
+                  <span>补助确认</span>
+                </div>
+              )
+            }}
+          </Cell>
+          <Grid class={styles.grid} columnNum={3} border={false}>
+            <GridItem>
+              <div class={styles.gridItem}>
+                <div class={styles.gridItemTop}>
+                  <span class={styles.topNum}>240</span>元
+                </div>
+                <div>管理补助</div>
+              </div>
+            </GridItem>
+            <GridItem>
+              <div class={styles.gridItem}>
+                <div class={styles.gridItemTop}>
+                  <span class={styles.topNum}>240</span>元
+                </div>
+                <div>管理补助</div>
+              </div>
+            </GridItem>
+            <GridItem>
+              <div class={styles.gridItem}>
+                <div class={styles.gridItemTop}>
+                  <span class={styles.topNum}>240</span>元
+                </div>
+                <div>管理补助</div>
+              </div>
+            </GridItem>
+          </Grid>
+        </div>
+      </div>
+    )
+  }
+})

src/school/approval-manage/components/end-approval.tsx

@@ -74,7 +74,7 @@ export default defineComponent({
             <OFullRefresh
               v-model:modelValue={refreshing.value}
               onRefresh={onRefresh}
-              style="min-height: 100vh;"
+              style="min-height: calc(100vh - 2.50666rem);"
             >
               <List
                 loading-text=" "

src/school/approval-manage/components/wait-approval.module.less

@@ -1,3 +1,2 @@
 .approvalWrap {
-  margin-top: 12px;
 }

src/school/approval-manage/components/wait-approval.tsx

@@ -71,12 +71,12 @@ export default defineComponent({
     return () => (
       <>
         <div class={styles.approvalWrap}>
-          {showContact.value ? (
-            <OFullRefresh
-              v-model:modelValue={refreshing.value}
-              onRefresh={onRefresh}
-              style="min-height: 100vh;"
-            >
+          <OFullRefresh
+            v-model:modelValue={refreshing.value}
+            onRefresh={onRefresh}
+            style="min-height: calc(100vh - 2.50666rem);"
+          >
+            {showContact.value ? (
               <List
                 v-model:loading={loading.value}
                 finished={finished.value}
@@ -95,10 +95,10 @@ export default defineComponent({
                   </div>
                 ))}
               </List>
-            </OFullRefresh>
-          ) : (
-            <OEmpty />
-          )}
+            ) : (
+              <OEmpty />
+            )}
+          </OFullRefresh>
         </div>
       </>
     )

src/school/approval-manage/index.module.less

@@ -6,3 +6,17 @@
     }
   }
 }
+.MyApproval{
+  .select{
+    display: flex;
+    align-items: center;
+    padding: 0 15px;
+    height: 50px;
+    font-size: 14px;
+    & > img{
+      width: 11px;
+      height: 6px;
+      margin-left: 4px;
+    }
+  }
+}

src/school/approval-manage/index.tsx

@@ -1,11 +1,9 @@
-import OHeader from '@/components/o-header'
-import OSticky from '@/components/o-sticky'
 import { Tabs, Tab } from 'vant'
 import { defineComponent, reactive, ref } from 'vue'
 import styles from './index.module.less'
 import { useRouter } from 'vue-router'
-import WaitApproval from './components/wait-approval'
-import EndApproval from './components/end-approval'
+import MyApproval from './MyApproval'
+import Agency from './agency'
 const activeName = ref('wait')
 export default defineComponent({
   name: 'approval-manage',
@@ -15,14 +13,14 @@ export default defineComponent({
 
     return () => (
       <>
-        <OSticky position="top" background="#F8F8F8">
-          <OHeader></OHeader>
-          <Tabs v-model:active={activeName.value} class={styles.approvalTab}>
-            <Tab name="wait" title="待审批"></Tab>
-            <Tab name="end" title="已完成"></Tab>
-          </Tabs>
-        </OSticky>
-        {activeName.value == 'wait' ? <WaitApproval></WaitApproval> : <EndApproval></EndApproval>}
+        <Tabs v-model:active={activeName.value} class={styles.approvalTab} animated sticky>
+          <Tab name="wait" title="处理事项">
+            <Agency />
+          </Tab>
+          <Tab name="end" title="我的审批">
+            <MyApproval />
+          </Tab>
+        </Tabs>
       </>
     )
   }