自定义导航栏

src/components/auth.vue

@@ -0,0 +1,64 @@
+<template>
+  <u-popup v-model="show" mode="bottom" :closeable="true" :mask-close-able="false" border-radius="50">
+    <view class="auth-login" style="background: url('/static/imgs/auth_bg.png')">
+      <view>
+        <u-image src="/static/imgs/auth_logo.png" width="108rpx" mode="widthFix"></u-image>
+      </view>
+      <view class="title"> 登录启明SOP </view>
+      <view class="tip">请点击按钮登录</view>
+      <u-button type="primary" shape="circle" hover-class="none" open-type="getPhoneNumber" @getphonenumber="toWxLogin">
+        <text class="login-wxfont">手机号一键授权登录</text>
+      </u-button>
+    </view>
+  </u-popup>
+</template>
+
+<script>
+  import { getWxLoginCode } from '@/utils/login'
+  export default {
+    name: 'auth',
+    data() {
+      return {
+        show: false,
+        wxCode: ''
+      }
+    },
+    mounted() {
+      console.log('uu', this.vuex_user_info)
+    },
+    watch: {
+      show(val) {
+        if (val) {
+          this.getWxCode()
+        }
+      }
+    },
+    methods: {
+      async getWxCode() {
+        this.wxCode = await getWxLoginCode()
+        console.log('this.wxCode:', this.wxCode)
+      },
+      async toWxLogin(wxLoginInfo) {
+        console.log('手机号授权返回信息:', wxLoginInfo)
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .auth-login {
+    padding: 44rpx 24rpx 60rpx 24rpx;
+    background-size: 100% 100%;
+    border-top-left-radius: 50rpx;
+    border-top-right-radius: 50rpx;
+    .title {
+      color: #262626;
+      font-size: 48rpx;
+    }
+    .tip {
+      color: #8c8c8c;
+      font-size: 28rpx;
+      margin: 30rpx 0 40rpx 0;
+    }
+  }
+</style>

src/components/user-space.vue

@@ -0,0 +1,35 @@
+<template>
+  <view class="user-space flex items-center">
+    <view class="icon-box flex justify-center items-center">
+      <!-- <u-icon name="account-fill" size="40" color="#BFBFBF"></u-icon> -->
+      <open-data type="userAvatarUrl" style="width: 100%; height: 100%"></open-data>
+    </view>
+    <text class="u-name">刘洋</text>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'UserSpace'
+  }
+</script>
+
+<style lang="scss" scoped>
+  .user-space {
+    height: 100rpx;
+    padding: 0 24rpx;
+    .icon-box {
+      width: 64rpx;
+      height: 64rpx;
+      border-radius: 8rpx;
+      background-color: #f0f0f0;
+      overflow: hidden;
+    }
+    .u-name {
+      font-size: 36rpx;
+      color: #262626;
+      margin-left: 16rpx;
+      font-weight: bold;
+    }
+  }
+</style>

src/pages.json

@@ -17,15 +17,15 @@
     {
       "path": "pages/index/index",
       "style": {
-        "navigationBarTitleText": "工作台",
-        "enablePullDownRefresh": false
+        "enablePullDownRefresh": false,
+        "navigationStyle":"custom"
       }
     },
     {
       "path": "pages/sop/sop",
       "style": {
-        "navigationBarTitleText": "SOP",
-        "enablePullDownRefresh": false
+        "enablePullDownRefresh": false,
+        "navigationStyle":"custom"
       }
     },
     {

src/pages/index/index.vue

@@ -1,9 +1,18 @@
 <template>
   <view class="work">
+    <view class="status-bar">
+      <!-- 这里是状态栏 -->
+    </view>
+    <div class="custom-navigation">
+      <UserSpace></UserSpace>
+    </div>
     <u-tabs :list="tabList" :is-scroll="false" :current="current" @change="tabChange"></u-tabs>
-    <Tab1 v-if="current == 0"></Tab1>
-    <Tab2 v-else-if="current == 1"></Tab2>
-    <Tab3 v-else-if="current == 2"></Tab3>
+    <view style="height: calc(100% - 25px - 180rpx)">
+      <Tab1 v-if="current == 0"></Tab1>
+      <Tab2 v-else-if="current == 1"></Tab2>
+      <Tab3 v-else-if="current == 2"></Tab3>
+    </view>
+    <Auth></Auth>
   </view>
 </template>
 
@@ -11,9 +20,11 @@
   import Tab1 from './tab1-content.vue'
   import Tab2 from './tab2-content.vue'
   import Tab3 from './tab3-content.vue'
+  import Auth from '@/components/auth.vue'
+  import UserSpace from '@/components/user-space.vue'
   export default {
     name: 'IndexPage',
-    components: { Tab1, Tab2, Tab3 },
+    components: { Tab1, Tab2, Tab3, Auth, UserSpace },
     data() {
       return {
         tabList: [{ name: '消息提醒' }, { name: 'SOP待办' }, { name: '通知公告' }],

src/pages/index/tab1-content.vue

@@ -115,7 +115,6 @@
     },
     methods: {
       open() {
-        console.log('open')
         this.showPopup = true
       },
       searchByParams() {
@@ -143,7 +142,6 @@
       getList(bool) {
         getMyMessages({ ...this.transParams, pageNumber: this.pageNumber, pageSize: this.pageSize }).then((res) => {
           this.loadingFlag = res.pages == this.pageNumber ? 2 : 0
-          console.log('this.loadingFlag:', this.loadingFlag)
           this.list.push(...(res.records || []))
           if (bool) {
             this.triggered = false
@@ -165,7 +163,7 @@
 
 <style lang="scss" scoped>
   .tab1 {
-    height: calc(100% - 80rpx);
+    height: 100%;
     padding: 24rpx;
     .search-box {
       padding: 30rpx 20rpx;

src/pages/index/tab2-content.vue

@@ -165,7 +165,7 @@
 
 <style lang="scss" scoped>
   .tab2 {
-    height: calc(100% - 80rpx);
+    height: 100%;
     padding: 24rpx;
     .search-box {
       padding: 30rpx 20rpx;

src/pages/index/tab3-content.vue

@@ -162,7 +162,7 @@
 
 <style lang="scss" scoped>
   .tab3 {
-    height: calc(100% - 80rpx);
+    height: 100%;
     padding: 24rpx;
     .search-box {
       padding: 30rpx 20rpx;

src/pages/sop/sop-list.vue

@@ -87,6 +87,13 @@
           this.loadingFlag = res.pages == this.pageNumber ? 2 : 0
           console.log('this.loadingFlag:', this.loadingFlag)
           this.list.push(...(res.records || []))
+          this.list.push(...(res.records || []))
+          this.list.push(...(res.records || []))
+          this.list.push(...(res.records || []))
+          this.list.push(...(res.records || []))
+          this.list.push(...(res.records || []))
+          this.list.push(...(res.records || []))
+          this.list.push(...(res.records || []))
           if (bool) {
             this.triggered = false
             this.$refs.uToast.show({
@@ -107,7 +114,7 @@
 
 <style lang="scss" scoped>
   .office-sop-list {
-    height: calc(100% - 80rpx);
+    height: 100%;
     padding: 24rpx;
     .search-box {
       padding: 30rpx 20rpx;
@@ -145,7 +152,7 @@
       }
     }
     .scroll-Y {
-      height: calc(100% - 184rpx);
+      height: 100%;
       .msg-item {
         padding: 24rpx;
         border-radius: 12rpx;

src/pages/sop/sop.vue

@@ -1,11 +1,19 @@
 <template>
   <view class="sop">
+    <view class="status-bar">
+      <!-- 这里是状态栏 -->
+    </view>
+    <div class="custom-navigation">
+      <UserSpace></UserSpace>
+    </div>
     <u-tabs :list="tabList" :is-scroll="true" :current="current" @change="tabChange"></u-tabs>
-    <SopList v-if="current == 0" type="OFFICE_SOP_FLOW"></SopList>
-    <SopList v-if="current == 1" type="CLOUD_MARK_SOP_FLOW"></SopList>
-    <ProjectChangeReport v-if="current == 2"></ProjectChangeReport>
-    <DelayWarning v-if="current == 3"></DelayWarning>
-    <ViolationRegistration v-if="current == 4"></ViolationRegistration>
+    <view style="height: calc(100% - 25px - 180rpx)">
+      <SopList v-if="current == 0" type="OFFICE_SOP_FLOW"></SopList>
+      <SopList v-if="current == 1" type="CLOUD_MARK_SOP_FLOW"></SopList>
+      <ProjectChangeReport v-if="current == 2"></ProjectChangeReport>
+      <DelayWarning v-if="current == 3"></DelayWarning>
+      <ViolationRegistration v-if="current == 4"></ViolationRegistration>
+    </view>
   </view>
 </template>
 
@@ -14,10 +22,10 @@
   import ProjectChangeReport from './project-change-report/index.vue'
   import DelayWarning from './delay-warning/index.vue'
   import ViolationRegistration from './violation-registration/index.vue'
-
+  import UserSpace from '@/components/user-space.vue'
   export default {
     name: 'Sop',
-    components: { SopList, ProjectChangeReport, DelayWarning, ViolationRegistration },
+    components: { SopList, ProjectChangeReport, DelayWarning, ViolationRegistration, UserSpace },
     data() {
       return {
         tabList: [{ name: '教务处SOP' }, { name: '研究生SOP' }, { name: '项目计划变更' }, { name: '延期预警' }, { name: '违规登记' }],

src/pages/sop/violation-registration/index.vue

@@ -177,3 +177,11 @@
     }
   }
 </script>
+<style lang="scss" scoped>
+  .my-page {
+    height: 100%;
+    .scroll-Y {
+      height: 100%;
+    }
+  }
+</style>

src/store/modules/user.js

@@ -3,10 +3,7 @@ const lifeData = uni.getStorageSync('lifeData')
 export const state = {
   // 如果上面从本地获取的lifeData对象下有对应的属性，就赋值给state中对应的变量
   // 加上vuex_前缀，是防止变量名冲突，也让人一目了然
-  vuex_user_info: lifeData.vuex_user_info ? lifeData.vuex_user_info : { id: '888' },
-  vuex_token: lifeData.vuex_refresh_token ? lifeData.vuex_refresh_token : '',
-  // 自定义tabbar数据
-  vuex_tabbar: []
+  vuex_user_info: lifeData.vuex_user_info ? lifeData.vuex_user_info : null
 }
 
 export const mutations = {}

src/styles/global.scss

@@ -1,3 +1,11 @@
+.status-bar{
+  height:var(--status-bar-height);
+  background-color:#fff;
+}
+.custom-navigation{
+  height:100rpx;
+  background-color:#fff;
+}
 .form-item {
   padding-bottom: 20rpx;
 }