opms_wechat/frontend_mobile/pages/schedule/index.vue

<!--
 * @Author: liuzhenlin 461480418@qq.ocm
 * @Date: 2023-01-12 11:57:48
 * @LastEditors: liuzhenlin
 * @LastEditTime: 2023-01-16 13:56:57
 * @Description: file content
 * @FilePath: \opms\pages\schedule\index.vue
-->
<template>
  <view class="home">
    <view class="nav">
      <view :style="{ paddingTop }">
        <view class="title" :style="[{ height }, { lineHeight: height }]">
          <view class="back" v-if="showBack" @click="$refs.manage.back()">
            <u-icon name="arrow-left" color="#ffffff" size="22"></u-icon>
          </view>
          <text>日程</text>
        </view>
      </view>
    </view>
    <view class="main">
      <view class="tabs">
        <u-tabs
          @change="changeTabs"
          lineWidth="8"
          :current="curTabIndex"
          lineHeight="8"
          :scrollable="false"
          :list="list"
          :lineColor="`url(${lineBg}) 100% 100%`"
          :activeStyle="{
            color: '#3E7EF8',
            fontWeight: 'bold',
          }"
          :inactiveStyle="{
            color: '#969696',
          }"
          itemStyle="height: 90rpx;"></u-tabs>
      </view>
      <view class="content">
        <manage v-if="curTabIndex === 0" ref="manage" @setBackVisible="initBack()" />
        <supervise v-if="curTabIndex === 1" ref="supervise" />
        <log v-if="curTabIndex === 2" ref="log" />
      </view>
    </view>
  </view>
</template>
<script>
  import manage from './components/manage'
  import supervise from './components/supervise'
  import log from './components/log'
  export default {
    name: 'opsIndex',
    components: { manage, supervise, log },
    data() {
      return {
        lineBg: require('../../static/images/up.png'),
        showBack: false,
        height: '',
        paddingTop: '',
        curTabIndex: 0,
        list: [
          {
            name: '日程管理',
            index: 0,
          },
          {
            name: '督办事项',
            index: 1,
          },
          {
            name: '工作日志',
            index: 2,
          },
        ],
      }
    },
    created() {
      const navData = uni.getMenuButtonBoundingClientRect()
      this.height = navData.height + 'px'
      this.paddingTop = navData.top + 'px'
    },
    mounted() {},
    methods: {
      // 显示返回
      initBack(visible) {
        this.showBack = visible
      },
      // 改变tab
      changeTabs(data) {
        // console.log(data)
        this.curTabIndex = data.index
      },
    },
  }
</script>
<style>
  page {
    background: #f2f3f5;
  }
</style>
<style lang="scss" scoped>
  .home {
    padding-top: 188rpx;

    .nav {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 284rpx;
      background: #3e7ef8;
      .title {
        position: relative;
        text-align: center;
        font-size: 32rpx;
        font-weight: bold;
        color: #ffffff;
        .back {
          position: absolute;
          top: 0;
          bottom: 0;
          margin: auto;
          left: 70rpx;
          display: flex;
        }
      }
    }

    .main {
      position: absolute;
      width: 100%;
      height: calc(100vh - 188rpx);
      background: #ffffff;
      box-shadow: 0 6rpx 19rpx 2rpx rgba(0, 45, 132, 0.15);
      border-radius: 31rpx 31rpx 0 0;
      padding: 0 32rpx;
      overflow: auto;
      padding-bottom: 64rpx;

      .tabs {
        border-bottom: 1px solid #cdcdcd;
        padding-bottom: 4rpx;
      }
    }
  }
</style>