qa-prevention-gwj-first-app/pages/application/high-risk-work/home.vue

<template>
	<view class="background-none">
		<cu-custom bgColor="bg-gradual-blueness" :isBack="true" :isRingt="true">
			<block slot="backText">返回</block>
			<block slot="content">高危作业</block>
		</cu-custom>
    <view class="new-apps-box">
      <view class="new-apps-warp">
        <view class="new-apps-item" v-for="(item,index) in highRiskList" :key="index">
          <navigator class="a" hover-class="none" :url="item.url">
            <view class="image">
              <image :src="item.image" mode=""></image>
              <view v-if="item.hotWorkCount > 0" class="badge">{{ item.hotWorkCount }}</view>
              <view v-if="item.hightWorkCount > 0" class="badge">{{ item.hightWorkCount }}</view>
              <view v-if="item.blindBoardCount > 0" class="badge">{{ item.blindBoardCount }}</view>
              <view v-if="item.HoistingCount > 0" class="badge">{{ item.HoistingCount }}</view>
              <view v-if="item.confinedSpaceCount > 0" class="badge">{{ item.confinedSpaceCount }}</view>
              <view v-if="item.electricityCount > 0" class="badge">{{ item.electricityCount }}</view>
            </view>
            <view class="title">
              <text>{{ item.title }}</text>
            </view>
          </navigator>
        </view>
      </view>
    </view>
	</view>
</template>

<script>
import { basePath, loginUser } from '@/common/tool.js';

export default {
  data() {
    return {
      highRiskList: [
        {
          title: '动火作业',
          url: '/pages/application/eight-assignments/index',
          image: require('../../../static/new_images/i1.png'),
          hotWorkCount: 0,
        },
        {
          title: '高处作业',
          url: '/pages/application/gf-eight-work/high-work/home',
          image: require('../../../static/new_images/i2.png'),
          hightWorkCount: 0,
        },
        {
          title: '盲板作业',
          url: '/pages/application/gf-eight-work/blind-board/home',
          image: require('../../../static/new_images/i3.png'),
          blindBoardCount: 0,
        },
        {
          title: '吊装作业',
          url: '/pages/application/gf-eight-work/hoisting/home',
          image: require('../../../static/new_images/i4.png'),
          HoistingCount: 0,
        },
        {
          title: '有限空间安全作业',
          url: '/pages/application/gf-eight-work/confinedspace/home',
          image: require('../../../static/new_images/i5.png'),
          confinedSpaceCount: 0,
        },
        {
          title: '临时用电安全作业',
          url: '/pages/application/gf-eight-work/electricity/home',
          image: require('../../../static/new_images/i6.png'),
          electricityCount: 0,
        },
      ],
    };
  },
  onShow() {
    this.updateWorkCounts('/app/hotwork/cfd/countCheck', '动火作业', 'hotWorkCount');
    this.updateWorkCounts('/app/gfHighwork/countCheck', '高处作业', 'hightWorkCount');
    this.updateWorkCounts('/app/gfBlindBoard/countCheck', '盲板作业', 'blindBoardCount');
    this.updateWorkCounts('/app/gfHoisting/countCheck', '吊装作业', 'blindBoardCount');
    this.updateWorkCounts('/app/gfConfinedSpace/countCheck', '有限空间安全作业', 'blindBoardCount');
    this.updateWorkCounts('//app/gfElectricity/countCheck', '临时用电安全作业', 'electricityCount');
  },
  methods: {
    updateWorkCounts(url, title, countKey) {
      uni.showLoading({ title: "加载中..." }); // 加载中动画
      uni.request({
        url: basePath + url,
        method: 'POST',
        dataType: 'json',
        header: { 'Content-type': 'application/x-www-form-urlencoded' },
        data: {
          tm: new Date().getTime(),
          CORPINFO_ID: loginUser.CORPINFO_ID,
          USER_ID: loginUser.USER_ID,
        },
        success: (res) => {
          uni.hideLoading(); // 结束加载中动画
          if (res.data.result === "success") {
            let totalCount = res.data.count.SUMCOUNT;
            this.highRiskList = this.highRiskList.map(item => {
              if (item.title === title) {
                return { ...item, [countKey]: totalCount };
              }
              return item;
            });
          }
        }
      });
    }
  }
};
</script>

<style>
.new-apps-box {
  padding: 20upx;
}

.new-apps-warp {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.new-apps-item {
  position: relative;
  width: 30%;
  margin-bottom: 20upx;
  text-align: center;
}

.new-apps-item .image {
  position: relative;
  width: 100%;
  height: 100upx;
}

.new-apps-item .badge {
  position: absolute;
  top: -10px;
  right: 0;
  background-color: #dd514c;
  color: white;
  border-radius: 50%;
  padding: 2px 5px;
  font-size: 12px;
}

.new-apps-item .title {
  margin-top: -5upx;
}
</style>