<template> <view class="top-level"> <view class="Page_change" :style="{ marginTop: tarbarHeight }"> <u-search :clearabled="true" :showAction="false" shape="square" v-model="pageModel.sourceData" :placeholder="'请输入源数据'" @change="handlerSearchEvent" ></u-search> </view> <view class="listContent" :style="{ marginTop: isOther ? '220rpx' : '142rpx' }" > <view v-for="(item, index) in tableData" :key="item.billid" class="listData" @click="handlerShowDetails(item, index)" > <view class="content"> <text>发送者应用:</text> <view style="width: calc(100% - 90px); display: flex; align-items: center" > <u--text :lines="1" :text="item.sendAppName" :size="14"></u--text> <img src="./push.png" class="pushBtn" @click.stop.prevent="pushDetails(item, index)" /> </view> </view> <view class="content"> <text>状态:</text> <view :style="[textColor(item.status)]" class="itemName">{{ textData(item.status) }}</view> </view> <view class="content"> <text>接口名称:</text> <u--text :lines="1" :text="item.receiveApiName" :size="14"></u--text> </view> <view class="content"> <text>源数据:</text> <u--text :lines="1" :text="item.sourceData" :size="14"></u--text> </view> <view class="content"> <text>目标数据:</text> <u--text :lines="1" :text="item.targetData" :size="14"></u--text> </view> <view class="content"> <text>错误状态:</text> <u--text :lines="1" :text="item.errorStatus === '1' ? '需要重新发送' : '不需要重新发送'" :size="14" ></u--text> </view> <view class="content"> <text>返回信息:</text> <u--text :lines="1" :text="item.returnData" :size="14"></u--text> </view> <view class="content"> <text>创建时间:</text> <u--text :lines="1" :text="item.createTime" :size="14"></u--text> </view> <view class="content"> <text>备注:</text> <u--text :lines="1" :text="item.remark" :size="14"></u--text> </view> </view> <view class="noData" v-show="noData"> <u-divider text="我是有底线哒!" :hairline="true"></u-divider> </view> </view> <view class="plusButton" @click="handlerAddProject"> <u-icon name="plus" :color="'#ffffff'"></u-icon ></view> <u-toast ref="uToast"></u-toast> <u-loading-page :loading="loading"></u-loading-page> <base-tarbar ref="baseTarbar" :pageTitle="'异常信息'"></base-tarbar> </view> </template> <script> import { authApi } from "@/api/login"; import baseTarbar from "@/components/baseTarbar/index.vue"; export default { /** * ┌─┐ ┌─┐ * ┌──┘ ┴───────┘ ┴──┐ * │ │ * │ ─── │ * │ ─┬┘ └┬─ │ * │ │ * │ ─┴─ │ * │ │ * └───┐ ┌───┘ * │ │ * │ │ * │ │ * │ └──────────────┐ * │ │ * │ ├─┐ * │ ┌─┘ * │ │ * └─┐ ┐ ┌───────┬──┐ ┌──┘ * │ ─┤ ─┤ │ ─┤ ─┤ * └──┴──┘ └──┴──┘ * 神兽保佑 * 代码无BUG! */ components: { baseTarbar, }, onReady() { this.$refs.baseTarbar.currentEnvironment(); this.isOther = this.$refs.baseTarbar.isOther; if (this.$refs.baseTarbar.isOther) { this.tarbarHeight = "84rpx"; } }, data() { return { isOther: false, tarbarHeight: "0", msgType: "warn", timer: null, loading: false, noData: false, pageModel: { pageNum: 1, pageSize: 20, sourceData: "", }, tableData: [], delBillid: "", appId: "", }; }, computed: { textColor() { return (item) => { if (item == "1") { return { backgroundColor: "#CFCFCF", color: "#333" }; } else if (item == "2") { return { backgroundColor: "#C6DEFF", color: "#1677FF" }; } else if (item == "3") { return { backgroundColor: "#D0FFEF", color: "#00B578" }; } else if (item == "4") { return { backgroundColor: "#FFE5E3", color: "#FF3B30" }; } else { return { backgroundColor: "#CFCFCF", color: "#333" }; } }; }, textData() { return (item) => { if (item == "1") { return "待发送"; } else if (item == "2") { return "发送中"; } else if (item == "3") { return "发送成功"; } else if (item == "4") { return "发送失败"; } else { return null; } }; }, }, onShow() { this.resetTable(); }, // 下拉刷新 onPullDownRefresh() { this.pageModel.pageNum = 1; this.getTableData(); setTimeout(function () { uni.stopPullDownRefresh(); }, 1000); }, onLoad(option) { //option为object类型,会序列化上个页面传递的参数 if (Object.getOwnPropertyNames(option).length != 0) { this.appId = option.appId; } uni.$on("resetTable", this.resetTable); }, onUnload() { uni.$off("resetTable", this.resetTable); }, methods: { resetTable() { this.pageModel.pageNum = 1; this.tableData = []; this.getTableData(); }, //表格数据 async getTableData() { this.noData = false; this.loading = true; setTimeout(() => { this.loading = false; }, 5000); let param = { ...this.pageModel, receiveApp: this.appId, status: "4", }; let res = await authApi( "sysApplicationService", "application", "thirdInterfacequeryAppApiLog", "", param ); if (this.pageModel.pageNum > 1) { this.tableData.push(...res.attribute.list); } else { this.tableData = res.attribute.list; } if (res.attribute.list.length < 20) { this.noData = true; } this.loading = false; }, // 触底刷新事件 onReachBottom() { if (this.noData != true) { this.pageModel.pageNum++; this.getTableData(); } }, // 搜索 handlerSearchEvent() { if (this.timer !== null) clearTimeout(this.timer); this.timer = setTimeout(() => { this.pageModel.pageNum = 1; this.getTableData(); }, 100); }, //查看 handlerShowDetails(row, index) { let url = "/pages/logsError/show?billid=" + row.id; this.$tab.navigateTo(url); }, //推送 pushDetails(row, index) { let url = "/pages/logsError/details?billid=" + row.id; this.$tab.navigateTo(url); }, }, }; </script> <style scoped lang="scss"> .itemName { font-size: 24rpx; margin: 0 20rpx; font-weight: 400; color: #fff; padding: 2rpx 8rpx; height: fit-content; border-radius: 2px; } .pushBtn { width: 19px; height: 19px; } .top-level { .listContent { margin: 20rpx 24rpx 0 24rpx; } .swipe-action-item { margin: 20rpx 0 20rpx 0; } .listData { background-color: #fff; border-radius: 16rpx; padding: 20rpx 20rpx; margin-bottom: 20rpx; .head { // height: 64rpx; border-bottom: 1px solid #f7f7f7; justify-content: space-between; } .head { display: flex; flex-direction: column; color: #333; margin-bottom: 16rpx; padding: 10rpx 0 20rpx 0; } .head .itembox { font-size: 32rpx; font-weight: 600; display: flex; justify-content: space-between; align-items: center; .levelbox { display: flex; justify-content: center; align-items: center; border: 4rpx solid #3c9cff; border-radius: 50%; width: 40rpx; height: 40rpx; color: #3c9cff; font-weight: 700; font-size: 28rpx; margin: 0 10rpx; } } .head .itemName { font-size: 24rpx; color: #999999; margin-left: 10px; font-weight: 400; text { color: #fff; padding: 4rpx 8rpx; } } .state { margin: 25rpx 0; } .time { margin: 4rpx 0 0; font-size: 28rpx; flex-wrap: wrap; line-height: 1.5; text { display: inline-block; font-size: 28rpx; color: #979797; margin-bottom: 15rpx; } view { height: 60rpx; width: 50%; } view:nth-child(4) { text:nth-child(2) { font-size: 28rpx; } } } .content { line-height: 1.5; font-size: 28rpx; margin-bottom: 15rpx; display: flex; align-items: center; text { font-size: 28rpx; color: #979797; } } } .noData { text-align: center; margin: 20rpx 0 60rpx 0; } .Page_change { width: 100%; background-color: #fff; padding: 20rpx 20rpx 20rpx 20rpx; position: fixed; top: 0; z-index: 1; .buttom { justify-content: space-between; padding-top: 30rpx; ::v-deep .u-button--circle { width: 30%; } } .input_box { margin-top: 20rpx; ::v-deep .u-input--radius:nth-child(1) { margin-right: 20rpx; } } } } ::v-deep .subsetion.u-subsection--button { height: 70rpx; margin-top: 10px; } ::v-deep .u-subsection--button__bar { background-color: #3c9cff; } </style> <style scoped> page { height: 100vh; } </style>