OfficeApp/pages/oaManager/oaManager.vue

<template>
  <view class="">
    <!-- <view class="head_box">
      <u-search shape="round" placeholder="搜索任务状态、优先级、部门等" :showAction="false" style="margin-right: 26rpx;"></u-search>
      <view class="btn">筛选</view>
    </view> -->
    <!-- 任务搜索框 -->
    <view class="task_box">
      <u-search shape="round" placeholder="搜索片区经理" :showAction="false"></u-search>
      <!-- 筛选按钮 -->
      <view>
        <u-popup :show="show" @close="show=false" @open="show=true" mode="top" overlayStyle="position: fixed;top:100rpx">
          <!-- <view class="search_box">
            <view class="">
              <view class="first_order" v-for="item in orderData" :key="item.id" :class="item.id==typeid?'choose':''">
                <text>{{item.first_order}}</text>
              </view>
            </view>
            <view class="second_order">
              <view class="second" v-for="item in orderList" :key="item.id" @click="getInfo(item.info,item.id)">
                {{item.info}}
              </view>
            </view>
          </view> -->
        </u-popup>
        <view @click="show = true" class="screening" :class="show?'choose_style':''">筛选</view>
      </view>
    </view>
    <view class="list">
      <view class="item" v-for="item in 0" :key="item">
        <view class="left">
          <view class="top">
            <image class="avatar" src="../../static/logo.png"></image>
            <view class="text">
              <view class="name">经理名称</view>
              <view class="mobile">
                联系人-13565632345
              </view>
            </view>
          </view>
          <view class="bottom">
            <view class="circle"></view>
            <view class="green">所属片区</view>
            <view>片区详情XXXX</view>
          </view>
        </view>
        <view class="right">
          <view class="top">
            发消息
          </view>
          <view class="bottom">
            拨打电话
          </view>
        </view>
      </view>
    </view>
    <u-loadmore :status="status" :loading-text="loadingText" :loadmore-text="loadmoreText" :nomore-text="nomoreText" />
  </view>
</template>

<script>
export default {
  data() {
    return {
       show: false,
       lastpage: '',
       loadingText: '努力加载中',
       loadmoreText: '轻轻上拉',
       nomoreText: '我也是有底线的~~',
    }
  },
  onReady() {
    uni.setNavigationBarColor({
      frontColor: '#ffffff',
      backgroundColor: '#3175f9'
    })
  },
  onLoad() {},
  onShow() {},
  methods: {},
  onPullDownRefresh() {
      uni.stopPullDownRefresh()
    }
  }
</script>

<style lang="scss">
.task_box {
    margin: 0 auto;
    width: 750rpx;
    height: 98rpx;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28rpx;

    .screening {
      margin-left: 10px;
      width: 149rpx;
      height: 63rpx;
      line-height: 63rpx;
      text-align: center;
      background: #FFFFFF;
      border-radius: 35rpx;
      border: 2rpx solid #E6E5E5;
      color: #666;
      font-size: 28rpx;
    }

    .choose_style {
      background-color: #3274F9;
      color: #fff;
    }
  }

  // 筛选按钮
  .search_box {
    width: 750rpx;
    // height: 368rpx;
    background: #FFFFFF;
    display: flex;

    .first_order {
      width: 250rpx;
      height: 73rpx;
      text-align: center;
      color: #666666;
      font-size: 28rpx;
      line-height: 73rpx;
      background-color: #f5f5f5;

    }

    .choose {
      background-color: #fff;
      color: #3274F9;
    }

    .second_order {
      text-align: center;
      width: 500rpx;

      .second {
        line-height: 73rpx;
        height: 73rpx;
        border-bottom: 2rpx solid #E6E6E6;
      }
    }

  }
.head_box{
  width: 750rpx;
  height: 98rpx;
  box-sizing: border-box;
  padding: 0 28rpx;
  background-color: #FFFFFF;
  display: flex;
  justify-content: space-around;
  align-items: center;
  .btn{
    width: 149rpx;
    height: 63rpx;
    background: #FFFFFF;
    border-radius: 35rpx 35rpx 35rpx 35rpx;
    opacity: 1;
    border: 2rpx solid #E6E5E5;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.list{
  margin: 21rpx 28rpx;
  padding-bottom: 21rpx;
  .item{
    width: 694rpx;
    height: 231rpx;
    background: #FFFFFF;
    border-radius: 14rpx 14rpx 14rpx 14rpx;
    opacity: 1;
    margin-bottom: 21rpx;
    box-sizing: border-box;
    padding: 28rpx;
    display: flex;
    justify-content: space-between;
    .left{
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .top{
        display: flex;
        justify-content: left;
        align-items: center;
        .avatar{
          width: 88rpx;
          height: 88rpx;
          border-radius: 50%;
          margin-right: 18rpx;
        }
        .text{
          display: flex;
          justify-content: space-between;
          flex-direction: column;
          height: 100%;
          .name{
            font-size: 32rpx;
            font-weight: 500;
            color: #333333;
          }
          .mobile {
            color: #999999;
          }
        }
      }
      .bottom{
        display: flex;
        justify-content: left;
        align-items: center;
        .circle{
          width: 11rpx;
          height: 11rpx;
          opacity: 1;
          border: 2rpx solid #34A853;
          margin-right: 10rpx;
          border-radius: 50%;
        }
        .green{
          font-weight: 400;
          color: #34A853;
          line-height: 0rpx;
          margin-right: 18rpx;
          -webkit-background-clip: text;
        }
      }
    }
    .right{
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      .top, .bottom{
        width: 158rpx;
        height: 53rpx;
        background: #FFFFFF;
        border-radius: 26rpx 26rpx 26rpx 26rpx;
        opacity: 1;
        border: 2rpx solid #3274F9;
        color: #3274F9;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .bottom{
        border: 2rpx solid #F9AA32;
        color: #F9AA32;
        margin-top: 18rpx;
      }
    }
  }
}
</style>