usky-web-mobile/src/pages/business/fireIot/repairReport/record.vue

<template>
  <oa-scroll
    v-if="dataStatus"
    customClass="repairReport-record-container scroll-height"
    :pageSize="pageSize"
    :total="total"
    :isSticky="false"
    :refresherLoad="true"
    :refresherEnabled="true"
    :refresherDefaultStyle="'none'"
    :refresherThreshold="44"
    :refresherBackground="'#f5f6f7'"
    @load="load"
    @refresh="refresh"
    :data-theme="'theme-' + proxy.$settingStore.themeColor.name"
  >
    <template #default>
      <view class="menu-list m0">
        <view class="list-cell" style="color: #666666; line-height: 25px" v-for="(base, index) in dataList" :key="index">
          <view class="content-area-top menu-item">
            <view class="content-area-top-time">
              {{ base.repairStatus == 1 ? (base.createTime ? base.createTime.replace("T", " ") : "") : base.handleTime ? base.handleTime.replace("T", " ") : "" }}
            </view>
            <view class="content-area-top-status" v-if="base.repairStatus == 1" style="background-color: #23dedc"> 受理中 </view>
            <view class="content-area-top-status" v-if="base.repairStatus == 2" style="background-color: #12c100"> 处理完成 </view>
          </view>
          <view class="content-area-row_wrap menu-item">
            <view class="content-area-row_wrap-view"> 项目名称：{{ base.projectName }} </view>
            <view class="content-area-row_wrap-view"> {{ jd ? "填报" : "报修" }}人：{{ base.reflectName }} </view>
            <view class="content-area-row_wrap-view"> {{ jd ? "填报" : "报修" }}人电话：{{ base.reflectPhone }} </view>
            <view class="content-area-row_wrap-view"> 报修内容：{{ base.repairContent }} </view>
            <view class="content-area-row_wrap-view"> 报修地址：{{ base.projectAddress }} </view>
          </view>
        </view>
      </view>
    </template>
  </oa-scroll>
</template>

<script setup>
import { onLoad, onShow, onReady, onHide, onLaunch, onNavigationBarButtonTap, onPageScroll, onBackPress, onUnload } from "@dcloudio/uni-app";
import { ref, reactive, computed, getCurrentInstance, toRefs, inject } from "vue";
import { getToken, setToken, removeToken } from "@/utils/auth";
import { useStores, commonStores } from "@/store/modules/index";

import { getHistory } from "@/api/business/fireIot/repairReport.js";
import config from "@/config";
const { proxy } = getCurrentInstance();
const useStore = useStores();
const commonStore = commonStores();
const jd = ref(config.baseUrl.indexOf("manager.juedatech.com") > -1) //觉大环境判断

const dataList = ref([]);
const dataStatus = ref(false);
const pageSize = ref(20);
const current = ref(1);
const total = ref(0);

const data = reactive({
  phone: getToken() ? useStore.phonenumber : undefined,
  verify: undefined,
});
const { phone, verify } = toRefs(data);

/**
 * @页面初始化
 */
function init() {
  getSelectListApi();
}

/**
 * @列表查询
 * @api接口查询
 */
function getSelectListApi() {
  dataStatus.value = true;
  getHistory({
    size: pageSize.value,
    current: current.value,
    phone: phone.value,
    verify: verify.value,
  }).then((requset) => {
    if (requset.status === "SUCCESS") {
      dataList.value = requset.data.records;
      total.value = requset.data.total;
    }
  });
}

/**
 * @scrollView加载数据
 */
function load() {
  pageSize.value += 10;
  init();
}

/**
 * @scrollView刷新数据
 */
function refresh() {
  pageSize.value = 20;
  init();
}

onReady(() => {});

onShow(() => {
  //调用系统主题颜色
  proxy.$settingStore.systemThemeColor([1]);
});

onLoad((options) => {
  if ("statusBool" in options && "phone" in options) {
    dataStatus.value = options.statusBool;
    phone.value = options.phone;
  }

  if (!getToken() && !dataStatus.value) {
    proxy.$tab.redirectTo(`/pages/common/phoneVerify/index?path=${"/pages/business/fireIot/repairReport/record"}`);
  } else {
    init();
  }

  if(jd.value){
    wx.setNavigationBarTitle({
      title: "历史记录"
    });
  }else{
    wx.setNavigationBarTitle({
      title: "报修历史"
    });
  }
});
</script>

<style lang="scss" scoped>
.repairReport-record-container {
  .content-area {
    &-top {
      font-size: 16px;
      font-weight: 600;
      color: #000000;

      &-time {
        max-width: 70%;
        margin: auto 0;
        font-size: 14px;
        color: rgb(102, 102, 102);
      }

      &-name {
        max-width: 70%;
        color: #000;
      }

      &-status {
        max-width: 30%;
        margin: auto 0 auto auto;
        font-size: 12px;
        color: #ffffff;
        padding: 0 5px;
        border-radius: 20px;
        line-height: 20px;
      }
    }

    &-row_wrap {
      font-size: 13px;
      flex-flow: row wrap;

      &-view {
        display: flex;
        min-width: 50%;
        > .iconfont {
          font-size: 14px;
          color: #909399;
          margin-left: 5px;
        }
      }
    }
  }
}
</style>