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() {
    this.getuserInfo();
  },
  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();
    },
    getuserInfo() {
      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"
          ? "eyJhbGciOiJSUzI1NiJ9.eyJyZWFsTmFtZSI6IiIsIm5pY2tOYW1lIjoiRFAzODA3IiwiaXNzIjoibmluZ2JvIiwidXNlclR5cGUiOiIwMCIsImV4cCI6MTcxNjYwNDQ1NywidXNlcklkIjoiMjAyMzA5MTUxNTA4MjAxMDMwMDAwMjgxMjY5ODI0MDIiLCJpYXQiOjE3MTQwMTI0NTcsImp0aSI6IjFkYmEwMmU1MTM0NTFmNTkwODE4YWI1OGEzNThhYzNiIn0.zD8CVi_NZta9_pu4KKXH-AO--FPx6ke_BGEkJ8j0uPqCmD8DiywBBhOAClayOmpdY7Qz_IW28l-vcrwx2E9nKu87bBKSEvtkrwiiA-78WPJxviX5bcVnSTIHISFOztFdeYFeCs5oAK_BYjhhq3tmNQDFRHb6GEW3-YCD174PqhtMfEgrrm1ceHxt6VQhNDeBGDkR562Ba9iDKMdTVUsqpgycmsWNMBfYbz-EoWqBML3crZOUAYpPCPUSPJwCY4a5DX-1FLz6D70ZYaKPDdsL1MD5xmWPWSexijklaHh6S6fi8J_vIKlnHivHCZTiVlIpiYMNQYzdXfzBtRqyJQDOzw"
          : query.token;
      const url =
        process.env.NODE_ENV == "development"
          ? ""
          : "https://lantu.ytyanhuo.com/api";
      uni.request({
        url: "https://inlife.ytyanhuo.com/oxm-user-center/user/userInfo/findByUserId",
        method: "post",
        header: {
          Authorization: token,
        },
        data: {},
        success: (res) => {
          if (res.data.code !== "200") {
            uni.showToast({
              title: res.data.msg,
              icon: "none",
              duration: 3000,
            });
            return;
          }
          var info = res.data.data;
          uni.request({
            url: url + "/auth/thirdlogin/resiInfo-lantu",
            method: "post",
            data: {
              loginMobile: info.loginMobile,
            },
            success: (res1) => {
              if (res1.data.code === 0) {
                if (res1.data.data.userBaseInfoId) {
                  const userBaseInfoId = res1.data.data.userBaseInfoId;
                  uni.request({
                    url: url + "/auth/thirdlogin/resilogin-hfive",
                    method: "post",
                    data: {
                      userBaseInfoId,
                    },
                    success: (res2) => {
                      if (res2.data.code === 0) {
                        const data = res2.data.data;
                        userTools.setStoreUserInfo(
                          JSON.stringify({
                            gridId: data.gridId,
                            authorization: data.authorization,
                            customerId: "1535072605621841922",
                          })
                        );
                        userTools.setStoreGridInfo(
                          JSON.stringify({
                            gridId: data.gridId,
                          })
                        );
                        this.setData(
                          {
                            userInfo: {
                              gridId: data.gridId,
                              authorization: data.authorization,
                              customerId: "1535072605621841922",
                            },
                            gridInfo: {
                              gridId: data.gridId,
                            },
                            showPage: true,
                          },
                          () => {
                            this.init();
                          }
                        );
                      }
                    },
                  });
                } else {
                  uni.showToast({
                    title:
                      "您尚未完善社区信息，请到“我的房产”完善社区信息后重试",
                    icon: "none",
                    duration: 3000,
                  });
                  setTimeout(() => {
                    uni.navigateBack({
                      delta: 1, // 默认值是1，表示返回的页面层数
                    });
                  }, 3000);
                }
              }
            },
          });
        },
      });
      // 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();
    },
    // 请求详情列表接口
    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({
          icon: "none",
          title: "暂时没有更多内容了",
          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: 34rpx;
  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>