zy-wechat/components/showIntegralModel/showIntegralModel.vue

<template>
  <view class="showIntegralModel" v-show="disjunctor">
    <view class="showIntegralModel__wrap">
      <view class="showIntegralModel__header">
        积分详情
      </view>
      <view class="showIntegralModel__article">
        <view class="showIntegralModel__title">
          <view class="showIntegralModel__T">
            <view class="showIntegralModel__item">考核项</view>
            <view class="showIntegralModel__item">分值</view>
            <view class="showIntegralModel__item">实际得分</view>
          </view>
        </view>
        <scroll-view class="showIntegralModel__cc" scroll-y v-if="!loading">
          <view class="showIntegralModel__list">
            <view class="showIntegralModel__T">
              <view class="showIntegralModel__item">响应时间</view>
              <view class="showIntegralModel__item">{{orderInfo.grade?orderInfo.grade.estimateResponseGrade:'-'}}</view>
              <view class="showIntegralModel__item">{{orderInfo.grade?orderInfo.grade.responseGrade:'-'}}</view>
            </view>
            <view class="showIntegralModel__text" v-if="orderInfo.grade"
              :class="{pd:orderInfo.grade?(orderInfo.grade.responseDetails?true:false):false}">
              {{orderInfo.grade.responseDetails?'('+orderInfo.grade.responseDetails+')':''}}
            </view>
          </view>
          <view class="showIntegralModel__list">
            <view class="showIntegralModel__T">
              <view class="showIntegralModel__item">到达时间</view>
              <view class="showIntegralModel__item">{{orderInfo.grade?orderInfo.grade.estimateArriveGrade:'-'}}</view>
              <view class="showIntegralModel__item">{{orderInfo.grade?orderInfo.grade.arriveGrade:'-'}}</view>
            </view>
            <view class="showIntegralModel__text" v-if="orderInfo.grade"
              :class="{pd:orderInfo.grade?(orderInfo.grade.arriveDetails?true:false):false}">
              {{orderInfo.grade.arriveDetails?'('+orderInfo.grade.arriveDetails+')':''}}
            </view>
          </view>
          <view class="showIntegralModel__list">
            <view class="showIntegralModel__T">
              <view class="showIntegralModel__item">执行时间</view>
              <view class="showIntegralModel__item">{{orderInfo.grade?orderInfo.grade.estimateExecutionGrade:'-'}}
              </view>
              <view class="showIntegralModel__item">{{orderInfo.grade?orderInfo.grade.executionGrade:'-'}}</view>
            </view>
            <view class="showIntegralModel__text" v-if="orderInfo.grade"
              :class="{pd:orderInfo.grade?(orderInfo.grade.executionDetails?true:false):false}">
              {{orderInfo.grade.executionDetails?'('+orderInfo.grade.executionDetails+')':''}}
            </view>
          </view>
          <view class="showIntegralModel__list">
            <view class="showIntegralModel__T">
              <view class="showIntegralModel__item">基础分</view>
              <view class="showIntegralModel__item">{{orderInfo.grade?orderInfo.grade.estimateBaseGrade:'-'}}</view>
              <view class="showIntegralModel__item">{{orderInfo.grade?orderInfo.grade.baseGrade:'-'}}</view>
            </view>
            <view class="showIntegralModel__text" v-if="orderInfo.grade"
              :class="{pd:orderInfo.grade?(orderInfo.grade.baseDetails?true:false):false}">
              {{orderInfo.grade.baseDetails?'('+orderInfo.grade.baseDetails+')':''}}
            </view>
          </view>
          <view class="showIntegralModel__list">
            <view class="showIntegralModel__T">
              <view class="showIntegralModel__item">评价分</view>
              <view class="showIntegralModel__item">{{orderInfo.grade?orderInfo.grade.estimateEvaluationGrade:'-'}}
              </view>
              <view class="showIntegralModel__item">{{orderInfo.grade?orderInfo.grade.evaluationGrade:'-'}}</view>
            </view>
            <view class="showIntegralModel__text" v-if="orderInfo.grade"
              :class="{pd:orderInfo.grade?(orderInfo.grade.evaluationDetails?true:false):false}">
              {{orderInfo.grade.evaluationDetails?'('+orderInfo.grade.evaluationDetails+')':''}}
            </view>
          </view>
          <view class="showIntegralModel__list">
            <view class="showIntegralModel__T">
              <view class="showIntegralModel__item">楼栋分</view>
              <view class="showIntegralModel__item">{{orderInfo.grade?orderInfo.grade.estimateBuildingGrade:'-'}}</view>
              <view class="showIntegralModel__item">{{orderInfo.grade?orderInfo.grade.buildingGrade:'-'}}</view>
            </view>
            <view class="showIntegralModel__text" v-if="orderInfo.grade"
              :class="{pd:orderInfo.grade?(orderInfo.grade.buildingDetails?true:false):false}">
              {{orderInfo.grade.buildingDetails?'('+orderInfo.grade.buildingDetails+')':''}}
            </view>
          </view>
          <view class="showIntegralModel__list">
            <view class="showIntegralModel__T">
              <view class="showIntegralModel__item">最终得分</view>
              <view class="showIntegralModel__item">{{orderInfo.grade?orderInfo.grade.estimateGradeTotal:'-'}}</view>
              <view class="showIntegralModel__item">{{orderInfo.grade?orderInfo.grade.gradeTotal:'-'}}</view>
            </view>
            <view class="showIntegralModel__text" v-if="orderInfo.grade"
              :class="{pd:orderInfo.grade?(orderInfo.grade.totalDetails?true:false):false}">
              {{orderInfo.grade.totalDetails?'('+orderInfo.grade.totalDetails+')':''}}
            </view>
          </view>
        </scroll-view>
      </view>
      <view class="showIntegralModel__footer">
        <view v-if="operate.know" class="showIntegralModel__know" @click="know" hover-class="seimin-btn-hover">
          {{ operate.know || "" }}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    get
  } from "../../http/http.js";
  export default {
    data() {
      return {
        orderInfo: {},
        loading: false
      };
    },
    props: {
      // 显示隐藏
      disjunctor: {
        type: Boolean,
        default: false,
      },
      // 工单ID
      orderId: {
        type: Number
      },
      // 时间戳
      timestamp: {
        type: Number
      },
      // 操作按钮文字
      operate: {
        type: Object,
        default: () => {
          return {
            know: "知道了",
          };
        },
      },
    },
    methods: {
      // 知道了
      know() {
        this.$emit("know");
      },
      //获取积分详情项
      getIntegralList() {
        uni.showLoading({
          title: '加载中',
          mask: true
        });
        this.loading = true;
        get('/api/fetchData/workOrder/' + this.orderId).then(res => {
          uni.hideLoading();
          this.loading = false;
          if (res.status == 200) {
            this.orderInfo = res.data;
          }
        })
      }
    },
    watch: {
      timestamp(newVal) {
        this.getIntegralList();
      }
    },
  };
</script>

<style lang="less">
  .showIntegralModel {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.2);
    z-index: 999999;

    .showIntegralModel__wrap {
      width: 100vw;
      height: 100vh;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      background-color: #fff;
      border-radius: 12rpx;

      .showIntegralModel__header {
        font-size: 36rpx;
        color: #000;
        height: 84rpx;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .showIntegralModel__article {
        overflow: hidden;
        margin: 0 16rpx 16rpx;
        height: calc(100% - 200rpx);
        background-color: rgb(249, 250, 251);
        border: 2rpx solid rgb(229, 233, 237);
        border-radius: 12rpx;
        box-sizing: border-box;

        .showIntegralModel__cc {
          height: calc(100vh - 274rpx);
        }

        .showIntegralModel__title,
        .showIntegralModel__list {
          border-bottom: 2rpx solid rgb(229, 233, 237);

          .showIntegralModel__T {
            display: flex;
            height: 72rpx;

            .showIntegralModel__item {
              flex: 1;
              display: flex;
              justify-content: center;
              align-items: center;
            }
          }

          .showIntegralModel__text {
            word-break: break-all;
            text-align: center;
            font-size: 28rpx;

            &.pd {
              padding-bottom: 16rpx;
            }
          }
        }
      }

      .showIntegralModel__footer {
        box-sizing: border-box;
        height: 100rpx;
        border-top: 2rpx solid rgb(229, 233, 237);
        display: flex;
        align-items: center;

        view {
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 36rpx;
          color: rgb(102, 102, 102);
          position: relative;
        }

        .showIntegralModel__know {
          background-color: #fff;
          flex: 1;
          color: rgb(73, 184, 86);
        }
      }
    }
  }
</style>