个人信息更新

src/layout/index/topInfo.vue

@@ -2,7 +2,7 @@
   <div id="topInfo">
     <el-row>
       <el-col :span="24" class="topInfos">
-        <van-nav-bar title="日程安排" left-text="返回" left-arrow @click-left="onClickLeft" />
+        <van-nav-bar title="日程安排" left-text="返回" left-arrow fixed @click-left="onClickLeft" />
       </el-col>
     </el-row>
   </div>

src/layout/index/topInfos.vue

@@ -0,0 +1,43 @@
+<template>
+  <div id="topInfo">
+    <el-row>
+      <el-col :span="24" class="topInfos">
+        <van-nav-bar title="日程安排" left-text="返回" right-text="请假" left-arrow fixed @click-left="onClickLeft" @click-right="onClickRight" />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'topInfo',
+  props: {},
+  components: {},
+  data: () => ({}),
+  created() {},
+  computed: {},
+  methods: {
+    onClickLeft() {
+      Toast('返回');
+    },
+    onClickRight() {
+      this.$router.push({ path: '/user/leaveDetail' });
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+/deep/.van-nav-bar {
+  background: #2c69fe;
+}
+/deep/.van-nav-bar__title {
+  color: #fff;
+}
+/deep/.van-nav-bar__text {
+  color: #fff;
+}
+/deep/.van-nav-bar .van-icon {
+  color: #fff;
+}
+</style>

src/layout/user/formLeave.vue

@@ -0,0 +1,50 @@
+<template>
+  <div id="formLeave">
+    <el-row>
+      <el-col :span="24">
+        <el-form ref="form" :model="form" label-width="100px">
+          <el-form-item label="开始日期">
+            <el-date-picker v-model="form.starttime" type="date" placeholder="选择开始日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"> </el-date-picker>
+          </el-form-item>
+          <el-form-item label="结束日期">
+            <el-date-picker v-model="form.endtime" type="date" placeholder="选择开始日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"> </el-date-picker>
+          </el-form-item>
+          <el-form-item label="请假理由">
+            <el-input type="textarea" v-model="form.reason" :rows="4" placeholder="请输入请假理由"></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="onSubmit">保存</el-button>
+            <el-button @click="cancelClick()">取消</el-button>
+          </el-form-item>
+        </el-form>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'formLeave',
+  props: {
+    form: null,
+  },
+  components: {},
+  data: () => ({}),
+  created() {},
+  computed: {},
+  methods: {
+    onSubmit() {
+      this.$emit('submit', { data: this.form });
+    },
+    cancelClick() {
+      this.$emit('cancelClick');
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+/deep/.el-textarea__inner {
+  width: 98%;
+}
+</style>

src/views/user/index.vue

@@ -66,7 +66,10 @@ export default {
   height: 100vh;
   position: relative;
   overflow: hidden;
-  background-color: #edeae8;
+  background-color: #f9fafc;
+}
+.native {
+  margin: 0 0 50px 0;
 }
 .top {
   height: 100px;

src/views/user/leave.vue

@@ -2,13 +2,8 @@
   <div id="leave">
     <el-row>
       <el-col :span="24" class="info">
-        <el-col :span="24" class="top">
-          <el-col :span="12" class="title">
-            请假管理
-          </el-col>
-          <el-col :span="12" class="btn">
-            <el-button type="primary" @click="$router.push({ path: '/user/leaveDetail' })">添加</el-button>
-          </el-col>
+        <el-col :span="24" class="native">
+          <topNative></topNative>
         </el-col>
         <el-col :span="24" class="leaves">
           <leaveList :leaveList="leaveList"></leaveList>
@@ -19,6 +14,7 @@
 </template>
 
 <script>
+import topNative from '@/layout/index/topInfos.vue';
 import leaveList from '@/layout/user/leaveList.vue';
 import { createNamespacedHelpers, mapGetters } from 'vuex';
 const { mapActions: mapLeave } = createNamespacedHelpers('leave');
@@ -26,6 +22,7 @@ export default {
   name: 'leave',
   props: {},
   components: {
+    topNative,
     leaveList,
   },
   data: () => ({
@@ -50,7 +47,10 @@ export default {
   width: 100%;
   min-height: 667px;
   position: relative;
-  background-color: #edeae8;
+  background-color: #f9fafc;
+}
+.native {
+  margin: 0 0 50px 0;
 }
 .top {
   height: 50px;

src/views/user/leaveDetail.vue

@@ -2,25 +2,11 @@
   <div id="leaveDetail">
     <el-row>
       <el-col :span="24" class="info">
-        <el-col :span="24" class="top">
-          请假条
+        <el-col :span="24" class="native">
+          <topNative></topNative>
         </el-col>
-        <el-col :span="24">
-          <el-form ref="form" :model="form" label-width="100px">
-            <el-form-item label="开始日期">
-              <el-date-picker v-model="form.starttime" type="date" placeholder="选择开始日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"> </el-date-picker>
-            </el-form-item>
-            <el-form-item label="结束日期">
-              <el-date-picker v-model="form.endtime" type="date" placeholder="选择开始日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"> </el-date-picker>
-            </el-form-item>
-            <el-form-item label="请假理由">
-              <el-input type="textarea" v-model="form.reason" :rows="4" placeholder="请输入请假理由"></el-input>
-            </el-form-item>
-            <el-form-item>
-              <el-button type="primary" @click="onSubmit">保存</el-button>
-              <el-button @click="cancelClick()">取消</el-button>
-            </el-form-item>
-          </el-form>
+        <el-col :span="24" class="form">
+          <formLeave :form="form" @submit="onSubmit" @cancelClick="cancelClick"></formLeave>
         </el-col>
       </el-col>
     </el-row>
@@ -28,12 +14,18 @@
 </template>
 
 <script>
+import topNative from '@/layout/index/topInfo.vue';
+import formLeave from '@/layout/user/formLeave.vue';
+
 import { createNamespacedHelpers, mapGetters } from 'vuex';
 const { mapActions: mapLeave } = createNamespacedHelpers('leave');
 export default {
   name: 'leaveDetail',
   props: {},
-  components: {},
+  components: {
+    topNative, //导航
+    formLeave, //请假
+  },
   data: () => ({
     form: {},
   }),
@@ -48,7 +40,7 @@ export default {
   methods: {
     ...mapLeave(['create']),
     async onSubmit(form) {
-      this.form.studentid = 99991;
+      this.form.studentid = '99991';
       let data = this.form;
       let res = await this.create(data);
       let msg = `${this.keyWord}添加成功`;
@@ -67,14 +59,9 @@ export default {
   height: 100vh;
   position: relative;
   overflow: hidden;
-  background-color: #edeae8;
-}
-.info .top {
-  text-align: center;
-  padding: 15px 0;
-  font-size: 30px;
+  background-color: #f9fafc;
 }
-/deep/.el-textarea__inner {
-  width: 98%;
+.native {
+  margin: 0 0 50px 0;
 }
 </style>