<template>
|
<view class="pages-my-log">
|
<view class="top">
|
<view class="input">
|
<input placeholder="请输入查找接口URL" v-model="keyMethod"></input>
|
<uni-icons class="clear" color="#ccc" type="clear" size="20" v-if="keyMethod"
|
@click="clickClearKey"></uni-icons>
|
</view>
|
|
<a class="btn" @click="clickSearch">
|
<uni-icons type="search" size="24" color="#1890FF" ></uni-icons>
|
</a>
|
<a class="btn" @click="clickClearLog">
|
<uni-icons type="trash" size="24" color="#1890FF"></uni-icons>
|
</a>
|
|
</view>
|
|
<view class="list">
|
<view class="group" v-for="(item,index) in list" :key="index">
|
<view class="title" :class="item.statusCode!=200 ? 'error':''">{{ item.date+" "+item.url}}
|
</view>
|
<a @click="clickDetail(item)">
|
<uni-icons type="right" size="24"></uni-icons>
|
</a>
|
</view>
|
</view>
|
|
</view>
|
</template>
|
<script>
|
import {
|
session,
|
showToast,
|
showModal
|
} from "@/comm/utils.js"
|
import {
|
Button
|
} from 'antd-mobile-vue-next'
|
export default {
|
name: "PagesMyLog",
|
components: {
|
'a-button': Button
|
},
|
data() {
|
return {
|
list: [],
|
keyMethod: ""
|
}
|
},
|
onLoad() {
|
this.list = session.getValue("request_log") || []
|
},
|
methods: {
|
clickDetail(item) {
|
uni.navigateTo({
|
url: `/pages/my/log-detail?info=${JSON.stringify(item)}`
|
})
|
},
|
clickClearLog() {
|
session.setValue("request_log", [])
|
session.setValue("request_log_max_data", {})
|
|
this.list = []
|
},
|
clickSearch() {
|
const list = session.getValue("request_log")
|
const key = this.keyMethod.trim()
|
if (key)
|
this.list = list.filter((a) => a.url.toLowerCase().includes(key.toLowerCase()))
|
|
else
|
this.list = list
|
},
|
clickClearKey() {
|
this.keyMethod = ""
|
},
|
|
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.pages-my-log {
|
display: flex;
|
width: 750rpx;
|
height: 100vh;
|
flex-direction: column;
|
background-color: #F5F5F5;
|
|
.list {
|
flex: 1;
|
overflow-y: auto;
|
display: flex;
|
flex-direction: column;
|
width: 750rpx;
|
}
|
|
.group {
|
width: calc(100% - 20rpx);
|
padding: 10rpx 10rpx;
|
display: flex;
|
flex-direction: row;
|
margin: 5rpx 10rpx;
|
background-color: #fff;
|
border-radius: 10rpx;
|
font-size: 30rpx;
|
|
.title {
|
flex: 1;
|
display: flex;
|
flex-direction: row;
|
|
margin: 5rpx;
|
word-wrap: break-word;
|
/* 允许长单词或 URL 地址换行到下一行 */
|
word-break: break-all;
|
/* 强制文本在超出容器宽度时换行 */
|
white-space: normal;
|
min-height: 30prx;
|
/* 允许文本换行 */
|
}
|
|
.error {
|
margin: 5rpx;
|
color: red;
|
}
|
|
}
|
|
.top {
|
margin: 10rpx;
|
width: 730rpx;
|
display: flex;
|
flex-direction: row;
|
background-color: #F0F0F0;
|
|
.input {
|
flex: 1;
|
padding: 10rpx;
|
border-radius: 8rpx;
|
display: flex;
|
flex-direction: row;
|
background-color: #fff;
|
input {
|
flex: 1;
|
}
|
}
|
|
.btn {
|
padding: 5rpx;
|
margin: 0 10rpx;
|
}
|
|
}
|
|
}
|
</style>
|
