yantai-app/yt_wodebaoshi/pages/index/index.vue

<template>
  <view class="report">
    <view v-if="showPage">
      <view class="title">
        <view
          :class="'titleSel ' + (idx == currentIndex ? 'active' : '')"
          @click="onBindTabChange"
          :data-idx="idx"
          v-for="(tab, idx) in tabList"
          :key="idx"
        >
          <text>{{ tab.tabName }}</text>

          <view
            :class="idx == currentIndex ? 'headerLineSel' : 'headerLineUnsel'"
          ></view>
        </view>
      </view>
      <view class="report-content">
        <view class="block">
          <block v-if="reportLength > 0">
            <view
              class="block-content"
              @click="toDetail(item)"
              :data-value="item"
              v-for="(item, index) in reportList"
              :key="index"
            >
              <view class="time">
                {{ item.happenTime }}
                <text v-if="item.redDot"></text>
              </view>

              <view class="block-title">
                {{ item.eventContent }}
              </view>

              <view class="block-image">
                <image
                  :src="img"
                  v-for="(img) in item.imageList"
                  :key="img"
                ></image>
              </view>
            </view>
          </block>
          <block v-if="reportLength == 0">
            <view style="text-align: center; margin-top: 250rpx">
              <image
                src="/static/data/images/empty.png"
                style="width: 464rpx; height: 530rpx"
              />
              <view style="text-align: center; color: #999"></view>
            </view>
          </block>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import tabs from "../../components/tab-item/tab-item";
import {
  myreport,
  myreportdetail,
  replylist,
  removered,
} from "../../utils/api/customerApi.js";
import * as userTools from "../../utils/user";
const app = getApp();
export default {
  components: {
    tabs,
  },
  data() {
    return {
      userInfo: null,
      gridInfo: null,
      showPage: false,
      reportList: [],
      reportLength: null,
      currentIndex: 0,

      tabList: [
        {
          tabName: "处理中",
          status: "processing",
        },
        {
          tabName: "已完成",
          status: "closed_case",
        },
      ],

      pageNo: 1,
      pageSize: 20,

      tab: {
        tabName: "",
      },

      img: "",
    };
  },
  onLoad() {
    function getIframeQueryParams() {
      // 使用URLSearchParams解析查询参数
      function getStringAfterQuestionMark(str) {
        return str.split("?").pop();
      }
      var result = getStringAfterQuestionMark(window.location.href);
      var params = new URLSearchParams(result);
      // 创建一个对象来存储解析后的参数
      var queryParams = {};
      // 遍历所有查询参数并存储到对象中
      params.forEach((value, key) => {
        queryParams[key] = value;
      });

      return queryParams;
    }
    const query = getIframeQueryParams();
    const token =
      process.env.NODE_ENV == "development"
        ? "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzUxMiJ9.eyJhcHAiOiJnb3YiLCJjbGllbnQiOiJ3ZWIiLCJleHAiOjE4MTQxNDkxOTksInVzZXJJZCI6IjE3MTQ1Njc3MDIxNDQ3NzgyNDEiLCJpYXQiOjE3MTk1NDExOTl9.Rm5CP020giWIlMDXUin22Td4vJIRlCxRsM9YBsRTyrOvEjqjdlR554R3PtAkwDErgVYkBLgnmqpomDKo_Mfktg"
        : query.token;
    const gridId =
      process.env.NODE_ENV == "development"
        ? "32a5f8a8-f7c9-11ee-96cf-fa163ef15b63"
        : query.gridId;
    userTools.setStoreUserInfo(
      JSON.stringify({
        gridId: gridId,
        authorization: token,
        customerId: "1535072605621841922",
      })
    );
    userTools.setStoreGridInfo(
      JSON.stringify({
        gridId: gridId,
      })
    );
    this.setData(
      {
        userInfo: {
          gridId: gridId,
          authorization: token,
          customerId: "1535072605621841922",
        },
        gridInfo: {
          gridId,
        },
        showPage: true,
      },
      () => {}
    );
    // this.setData({showPage:true})
    this.init();
  },
  onShow() {},
  async onPullDownRefresh() {
    this.setData({
      pageNo: 1,
    });
    await this.reportListFun();
    this.stopPullDownRefresh();
  },
  //上拉加载
  onReachBottom() {
    let page = (this.pageNo += 1);
    this.setData({
      pageNo: page,
    });
    this.reportListFun();
  },
  methods: {
    init() {
      this.setData({
        pageNo: 1,
        reportList: [],
      });
      this.reportListFun();
    },

    // 请求详情列表接口
    async reportListFun() {
      let reportData = {
        status: this.tabList[this.currentIndex].status,
        pageNo: this.pageNo,
        pageSize: this.pageSize,
      };
      const { data } = await myreport(reportData);
      this.setData({
        reportList: this.reportList.concat(data),
      });
      this.setData({
        reportLength: this.reportList.length,
      });
      if ((Array.isArray(data) && data.length == 0) || !data) {
        uni.showToast({
          type: "none",
          content: "暂时没有更多内容了",
          duration: 1000,
        });
      }
    },

    onBindTabChange(e) {
      this.setData({
        currentIndex: e.currentTarget.dataset.idx,
        pageNo: 1,
        reportList: [],
      });
      this.reportListFun();
    },

    stopPullDownRefresh() {
      uni.stopPullDownRefresh({
        complete(res) {
          console.log(res, new Date());
        },
      });
    },

    // 跳转详情页
    async toDetail(value) {
      console.log("zoule");
      //   const { value } = e.target.dataset;
      // 消灭红点
      const res = await removered({
        icEventId: value.icEventId,
      });
      if (res.code == 0) {
        uni.navigateTo({
          url:
            "/pages/detail/detail?id=" +
              value.icEventId +
              "&gridId=" +
              this.userInfo.gridId || this.gridInfo.gridId,
        });
      }
    },
  },
};
</script>
<style>
.title {
  width: 100%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  /* justify-content: space-around; */
  position: fixed;
  top: 0;
  z-index: 99;
  padding: 0 40rpx;
  box-sizing: border-box;
}

.titleSel {
  color: #484747;
  font-size: 36rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* flex: 1; */
  height: 80rpx;
  line-height: 60rpx;
  margin-right: 56rpx;
  letter-spacing: 2rpx;
}

.titleSel:last-child {
  margin-right: 0;
}

.active {
  color: #333;
  font-weight: bold;
  font-size: 34rpx;
}

.titleUnsel {
  color: #858fab;
  font-size: #858fab;
}

.headerLineSel {
  background: #3985f9;
  height: 6rpx;
  width: 50rpx;
  position: relative;
  margin: 10rpx auto 0 auto;
  border-radius: 16rpx;
}

.headerLineUnsel {
  background: #fff;
  height: 6rpx;
  width: 40rpx;
  position: relative;
  margin-top: 10rpx;
}

.report-content {
  width: 100vw;
  margin-top: 0;
}

.block {
  margin-bottom: 10rpx;
  padding: 20rpx;
    margin-top: 88rpx;
}

.block-content {
  background-color: #fff;
  position: relative;
  margin-bottom: 20rpx;
  padding: 15rpx;
  border-radius: 10rpx;
}

.time {
  font-size: 26rpx;
  color: #999;
  display: flex;
  align-items: center;
}

.time text {
  display: inline-block;
  width: 20rpx;
  height: 20rpx;
  border-radius: 20rpx;
  background-color: #3985f9;
  margin-left: 10rpx;
}

.block-title {
  width: 100%;
  font-size: 34rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 20rpx 0;
}

.block-image {
  width: 100%;
  padding: 20rpx 10rpx;
  box-sizing: border-box;
}

.block-image image {
  width: 30%;
  height: 200rpx;
  margin: 0 10rpx;
}
</style>