YNUtdPlatform/pages/realName/workPlan/index.vue

<template>
  <view class="work-plan">
    <u-navbar
      class="u-navbar"
      title="作业计划"
      placeholder
      @leftClick="leftClick"
      leftIconColor="#fff"
      bgColor="#00337A"
      :titleStyle="{ color: '#FFF', fontSize: '32rpx' }"
    />

    <view class="header-fixed">
      <view class="search-content">
        <view>
          <uni-easyinput
            suffixIcon="search"
            v-model="queryParams.params.proName"
            placeholder="请输入工程信息"
            @iconClick="getWorkPlantData"
          ></uni-easyinput>
        </view>
        <view class="search-icon" @tap="onSearchFilter"></view>
      </view>
      <view style="margin-top: 20rpx; color: #3f9dfd; letter-spacing: 2rpx">已查询{{ recordsTotal }}条数据</view>
    </view>
    <view style="padding: 0 20rpx">
      <scroll-view class="data-container" scroll-y="true">
        <view class="scroll-item" v-for="(item, index) in companyInfoList" :key="item.proId">
          <view class="item-1">
            <view>{{ index + 1 }}</view>
            <view>{{ item.proName }}</view>
            <uni-icons
              :type="item.isCollect == 1 ? 'star-filled' : 'star'"
              size="20"
              @tap="onCollection(item)"
              :style="{ color: item.isCollect == 1 ? '#f9971e' : '' }"
            ></uni-icons>
          </view>
          <view class="item-2" @tap="onViewWorkDetails(item)">
            <view>{{ item.subComName }}</view>
            <view>
              <text v-if="item.kjsfx > 0" style="color: #6ff6d5">可接受风险：{{ item.kjsfx }}</text>
              <text v-if="item.dfx > 0" style="color: #25c294">低风险：{{ item.dfx }}</text>
              <text v-if="item.zfx > 0" style="color: #f9971e">中风险：{{ item.zfx }}</text>
              <text v-if="item.gfx > 0" style="color: #f44d46">高风险：{{ item.gfx }}</text>
            </view>
          </view>
          <view class="item-3" @tap="onViewWorkDetails(item)">
            <view>作业人数</view>
            <view style="color: #3f9dfd; font-weight: bold">{{ item.personNum }}</view>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 底部弹框 -->
    <uni-popup ref="popup" type="bottom" background-color="#fff">
      <view class="bottom-content">
        <h1>条件筛选</h1>
        <h2>分公司</h2>

        <view>
          <scroll-view class="company-container" scroll-y="true">
            <view class="company-items">
              <view
                :key="item.company_name"
                v-for="(item, index) in companyList"
                :class="{ active: index === activeIndex }"
                @tap="onSelectCompany(index, item.name)"
              >
                {{ item.name }}
              </view>
            </view>
          </scroll-view>
        </view>
        <view class="bottom-btn">
          <button style="background-color: #fff; color: #00337a" @tap="onReset">重置</button>
          <button style="background-color: #00337a; color: #fff" @tap="onQuery">查询</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import { getHomePageSelectApi } from '../../../api/phaseTwo/homePage'
import config from '@/config'
export default {
  data() {
    return {
      activeIndex: 0,
      recordsTotal: 0,
      token: uni.getStorageSync('tjToken'),
      // 查询参数
      queryParams: {
        offset: 0,
        limit: 99999,
        params: {
          userId: uni.getStorageSync('realNameUser').userId + '',
          proName: '',
          subComName: ''
        }
      },
      companyList: [{ name: '全部', id: '' }],
      companyInfoList: []
    }
  },
  mounted() {
    this.getWorkPlantData()
    this.getHomePageSelectData()
  },
  methods: {
    /* 获取作业计划列表 */
    async getWorkPlantData() {
      uni.request({
        url: config.loginBaseUrl + '/bmw/homeSubPage/getAppDayPlanMsg',
        method: 'POST',
        data: JSON.stringify(this.queryParams),
        header: {
          'Content-Type': 'application/json'
          //   token: this.token
        },
        success: res => {
          this.recordsTotal = res.data.recordsTotal
          this.companyInfoList = res.data.data
        },
        fail: err => {}
      })
    },
    /* 获取公司数据 */
    async getHomePageSelectData() {
      const res = await getHomePageSelectApi()
      this.companyList = this.companyList.concat(res.subList)
    },
    leftClick() {
      uni.navigateTo({ url: `/pages/realName/index/index` })
    },
    onSearchFilter() {
      // 打开底部弹框
      this.$refs.popup.open()
    },
    /* 选择公司 */
    onSelectCompany(index, name) {
      this.activeIndex = index
      if (index === 0) {
        this.queryParams.params.subComName = ''
      } else {
        this.queryParams.params.subComName = name
      }
    },
    /* 重置 */
    onReset() {
      this.activeIndex = 0
      this.queryParams.params.subComName = ''
      this.onQuery()
    },
    /* 查询 */
    onQuery() {
      this.getWorkPlantData().then(() => {
        this.$refs.popup.close()
      })
    },
    /* 点击跳转作业计划详情 */
    onViewWorkDetails(row) {
      uni.navigateTo({ url: `/pages/realName/workPlan-details/index?query=${JSON.stringify(row)}` })
    },
    /* 收藏与取消收藏 */
    onCollection(row) {
      const params = {
        id: row.collectId,
        userId: uni.getStorageSync('realNameUser').userId,
        foreignId: row.proId,
        type: 1
      }
      uni.request({
        url: `${config.loginBaseUrl}${
          row.isCollect == 0 ? '/app/offLine/insertCollect' : '/app/offLine/deleteCollect'
        }`,
        method: 'POST',
        data: JSON.stringify(params),
        header: {
          'Content-Type': 'application/json',
          token: this.token
        },
        success: res => {
          if (res.data.code === 200) {
            uni.showToast({ icon: 'none', title: ` ${row.isCollect == 0 ? '收藏成功' : '已取消收藏'}` })
            this.getWorkPlantData()
          }
        },
        fail: err => {}
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.work-plan {
  background-color: #eee;
  padding-top: 74px;

  .header-fixed {
    width: 100%;
    padding: 20rpx;
    position: fixed;
    top: 64px;
    left: 0;
    z-index: 6;
    background-color: #ccc;

    .search-content {
      display: flex;
      align-items: center;

      .search-icon {
        width: 48rpx;
        height: 40rpx;
        margin-right: 60rpx;
        margin-left: 30rpx;
        background: url('../../../static/realName/screen.png') no-repeat;
        background-size: 100% 100%;
      }
    }
  }

  .data-container {
    width: 100%;
    // height: 400rpx;

    .scroll-item {
      padding: 14rpx 0;
      background-color: #fff;
    }

    .item-1,
    .item-2,
    .item-3 {
      width: 96%;
      margin: 0 auto;
      padding: 20rpx 0;
      border-bottom: 1px solid #eee;
      display: flex;
      align-items: center;
    }

    .item-1 view:first-child {
      width: 80rpx;
      height: 56rpx;
      margin-right: 16rpx;
      text-align: center;
      line-height: 56rpx;
      background: url('../../../static/realName/serial.png') no-repeat;
      background-size: 100% 100%;
      color: #fff;
      font-weight: bold;
      font-size: 28rpx;
    }

    .item-2,
    .item-3 {
      justify-content: space-around;
    }
  }

  .bottom-content {
    height: 45vh;

    h1,
    h2 {
      padding: 15rpx 0;
      font-size: 32rpx;
    }
    h1 {
      margin-top: 10rpx;
      border-top: 1px solid #ccc;
      text-align: center;
    }
    h2 {
      padding-left: 16rpx;
      border-top: 1px solid #ccc;
      border-bottom: 1px solid #ccc;
    }

    .company-container {
      width: 100%;
      height: 400rpx;
      .company-items {
        width: 100%;
        padding: 0 16rpx;
        display: flex;
        flex-wrap: wrap;

        view {
          width: 49%;
          height: 48rpx;
          margin-top: 10rpx;
          line-height: 48rpx;
          border-radius: 10rpx;
          text-align: center;
          background-color: #eee;
          color: #656565;
        }

        .active {
          background-color: #3f9dfd;
          color: #fff;
        }
      }

      .company-items view:nth-child(2n + 1) {
        margin-right: 10rpx;
      }
    }

    .bottom-btn {
      width: 100%;
      position: fixed;
      display: flex;
      bottom: 0;
      z-index: 9;

      button {
        flex: 1;
        height: 80rpx;
        line-height: 80rpx;
        font-weight: normal;
        border-radius: 20rpx;
        border: 1rpx solid #00337a;
      }
    }
  }
}
</style>