YNUtdPlatform/pages/workPlan/custody/index.vue

<template>
  <view>
    <u-navbar
      class="u-navbar"
      title="现场监护"
      placeholder
      @leftClick="leftClick"
      leftIconColor="#fff"
      bgColor="#00337A"
      :titleStyle="{ color: '#FFF', fontSize: '32rpx' }"
    />

    <view class="custody-container">
      <view class="header-btn">
        <view :class="{ active: current === 0 }" @tap="onCheckTap(0)">新增数据</view>
        <view :class="{ active: current === 1 }" @tap="onCheckTap(1)">我的数据</view>
      </view>

      <view style="width: 100%">
        <swiper style="width: 100%" :current="current" @change="onSwiperChange" :style="{ height: navHeight + 'px' }">
          <swiper-item class="swiper-item-content" :style="{ height: navHeight + 'px' }">
            <scroll-view scroll-y="true" class="scroll-view-y" :style="{ height: navHeight + 'px' }">
              <view class="risk-header">
                <view class="risk-left">
                  <view>今日</view>
                  <view>风险</view>
                </view>
                <view class="risk-right">
                  <view style="margin-top: 16rpx">
                    <text>我的项目</text>
                    <text style="color: #ca6d58">高风险 0</text>
                    <text style="color: #c2a95d; margin-left: 46rpx">中风险 0</text>
                    <text style="color: #b12d3f; margin-left: 46rpx">特高风险 0</text>
                  </view>
                  <view>
                    <text>全部项目</text>
                    <text style="color: #ca6d58">高风险 0</text>
                    <text style="color: #c2a95d; margin-left: 46rpx">中风险 0</text>
                    <text style="color: #b12d3f; margin-left: 46rpx">特高风险 0</text>
                  </view>
                </view>
              </view>

              <!-- 选择今日 日计划风险 -->
              <view class="change-today">
                <view class="today-title">
                  <view class="title-bold">选择今日 日计划风险</view>
                  <view>去选择风险点</view>
                </view>

                <uni-forms label-position="top" label-width="200">
                  <uni-forms-item label="作业风险内容" required>
                    <uni-easyinput type="text" placeholder="请填写" />
                  </uni-forms-item>
                  <uni-forms-item label="风险等级" required>
                    <uni-easyinput type="text" placeholder="请填写" />
                  </uni-forms-item>
                  <uni-forms-item label="工程名称" required>
                    <uni-easyinput type="text" placeholder="请填写" />
                  </uni-forms-item>
                </uni-forms>
              </view>

              <!-- 现场监护 -->

              <view class="scene-container">
                <view class="title-bold">现场监护</view>
                <uni-forms label-position="top" label-width="200">
                  <uni-forms-item label="当前位置" required>
                    <uni-easyinput type="text" placeholder="请填写" />
                  </uni-forms-item>
                  <uni-forms-item label="附件上传(1-6张照片)" required>
                    <view class="example-body">
                      <uni-file-picker limit="6" title="最多选择6张图片"></uni-file-picker>
                    </view>
                  </uni-forms-item>
                  <uni-forms-item label="电子签名" required>
                    <uni-easyinput type="text" placeholder="请填写" />
                  </uni-forms-item>
                  <uni-forms-item label="备注" required>
                    <uni-easyinput type="text" placeholder="请填写" />
                  </uni-forms-item>
                  <button>提交</button>
                </uni-forms>
              </view>
            </scroll-view>
          </swiper-item>
          <swiper-item></swiper-item>
        </swiper>
      </view>
    </view>

    <m-tabbar fixed fill :current="0" :tabbar="tabbar" class="bottom-tab"></m-tabbar>
  </view>
</template>

<script>
import TabbarConfig from '../util/tabbar'
export default {
  data() {
    return {
      current: 0,
      tabbar: TabbarConfig,
      navHeight: 100,
      pH: 0 //窗口高度
    }
  },
  methods: {
    leftClick() {
      uni.navigateBack()
    },
    onCheckTap(type) {
      this.current = type
    },
    onSwiperChange(e) {
      console.log('轮播图change事件', e)
      this.current = e.target.current
    }
  },
  onReady() {
    let that = this
    uni.getSystemInfo({
      //调用uni-app接口获取屏幕高度
      success(res) {
        //成功回调函数
        that._data.pH = res.windowHeight //windoHeight为窗口高度，主要使用的是这个
        console.log('res.windowHeight窗口高度', res.windowHeight)
        let titleH = uni.createSelectorQuery().select('.scroll-view-y') //想要获取高度的元素名（class/id）
        // let bottomBox = uni.createSelectorQuery().select('.bottom-tab')
        // let bottomHeight = 0
        // bottomBox
        //   .boundingClientRect(data => {
        //     console.log('data----', data)
        //     bottomHeight = data.height
        //   })
        //   .exec()
        titleH
          .boundingClientRect(data => {
            let pH = that._data.pH
            that._data.navHeight = pH - data.top //计算高度：元素高度=窗口高度-元素距离顶部的距离（data.top）

            console.log('that._data.navHeight', that._data.navHeight)
          })
          .exec()
      }
    })
  }
}
</script>

<style lang="scss" scoped>
.custody-container {
  //   background-color: #ccc;

  .header-btn {
    display: flex;
    background-color: #fff;

    view {
      flex: 1;
      padding: 30rpx 0;
      color: #a8a8ad;
      font-size: 36rpx;
      text-align: center;
      transition: all 0.3s ease;
    }

    .active {
      color: #043372;
      border-bottom: 2px solid #043372;
    }
  }

  .swiper-item-content {
    background-color: #efefef;
  }

  .scroll-view-y {
    width: 100%;
    background-color: #efefef;

    .title-bold {
      font-size: 32rpx;
      font-weight: bold;
    }
    .risk-header {
      width: 94%;
      margin: 16rpx auto;
      display: flex;
      align-items: center;
      background-color: #fff;
      padding: 2rpx 14rpx;
      border: 1px solid #ccc;
      border-radius: 6rpx;

      .risk-left {
        padding: 10rpx;
        border-radius: 10rpx;
        background-color: #da0019;
        color: #fff;
      }

      .risk-right {
        margin-left: 6rpx;
      }
    }

    .change-today {
      width: 94%;
      margin: 16rpx auto;
      padding: 26rpx;
      border: 1px solid #ccc;
      background-color: #fff;
      border-radius: 6rpx;

      .today-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .today-title view:last-child {
        padding: 26rpx 6rpx;
        background-color: #d6001a;
        border-radius: 20rpx;
        color: #fff;
      }

      ::v-deep .uni-forms-item__label {
        font-weight: bold;
        color: #000;
        font-size: 26rpx;
      }
    }
    .scene-container {
      width: 94%;
      margin: 16rpx auto;
      padding: 26rpx;
      border: 1px solid #ccc;
      background-color: #fff;
      border-radius: 6rpx;
    }
  }
}
</style>