You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
302 lines
7.0 KiB
302 lines
7.0 KiB
<template> |
|
<view id="page"> |
|
<view class="Width100 Box BorderBox"> |
|
<view class="Content BorderBox Width100"> |
|
<top-title :is-show-left="false" :title="'治理'" :rightWidth='120' class="custom_bg"> |
|
<!-- <template slot="right"> |
|
<image :src="$.imgSrc + '/mine/search.png'" @click="$.open('/pages/mine/setting')" mode="aspectFit" class="InlineBlock imgIcon"></image> |
|
<image :src="$.imgSrc + '/mine/plus.png'" mode="aspectFit" @click="$.open('/pages/mine/notice')" class="InlineBlock imgIcon"></image> |
|
</template> --> |
|
</top-title> |
|
</view> |
|
<view class="tab"> |
|
<view class="tab-item" :class="tab === 1 ? 'active' : ''" @click='tab = 1'> |
|
<text>待办</text> |
|
<text class="number">200</text> |
|
</view> |
|
<view class="tab-item" :class="tab === 2 ? 'active' : ''" @click='tab = 2'> |
|
<text>正在办理</text> |
|
<text class="number">480</text> |
|
</view> |
|
<view class="tab-item" :class="tab === 3 ? 'active' : ''" @click='tab = 3'> |
|
<text>已完成</text> |
|
<text class="number">182</text> |
|
</view> |
|
</view> |
|
<view class="Content MarginAuto BorderBox"> |
|
<no-data v-if="isEmpty" /> |
|
<view v-else class="List Width100 BorderBox"> |
|
<view class="Unit FontBold BorderBox Width100 MarginT_30rpx BG_FFFFFF" |
|
v-for="item in list" :key='item.id' @click='handleClick(item)'> |
|
<image class="imgleft" :src="item.imgurl" mode="widthFix"></image> |
|
<view class="right"> |
|
<view class="title">{{ item.title }}</view> |
|
<view class="type"> |
|
<text>排查</text> |
|
<text>超期2天</text> |
|
</view> |
|
</view> |
|
<view class="trapezoidal"> |
|
超期 |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
import NoData from "../../components/no-data.vue"; |
|
import TopTitle from "../../components/top-title"; |
|
export default { |
|
// 组件 |
|
components: { |
|
NoData,TopTitle |
|
}, |
|
data() { |
|
return { |
|
// 公用的js |
|
bgUrl1: '', // 登录信息背景图 |
|
list: [ |
|
{ |
|
id: 1, |
|
title: 'G228火炬路与S503岙东路路', |
|
roadCode: 123, |
|
roadName: 'G228火炬路与S503岙东路', |
|
imgurl: '/static/logo.png', |
|
createTime: '2024-10-05', |
|
deptName: '支队级', |
|
sessionId: 12121212 |
|
}, |
|
{ |
|
id: 2, |
|
title: 'G228火炬路与S503岙东路路', |
|
roadCode: 123, |
|
roadName: 'G228火炬路与S503岙东路', |
|
imgurl: '/static/logo.png', |
|
createTime: '2024-10-05', |
|
deptName: '支队级', |
|
sessionId: 12121212 |
|
}, |
|
{ |
|
id: 3, |
|
title: 'G228火炬路与S503岙东路路', |
|
roadCode: 123, |
|
roadName: 'G228火炬路与S503岙东路', |
|
imgurl: '/static/logo.png', |
|
createTime: '2024-10-05', |
|
deptName: '支队级', |
|
sessionId: 12121212 |
|
}, |
|
{ |
|
id: 4, |
|
title: 'G228火炬路与S503岙东路路', |
|
roadCode: 123, |
|
roadName: 'G228火炬路与S503岙东路', |
|
imgurl: '/static/logo.png', |
|
createTime: '2024-10-05', |
|
deptName: '支队级', |
|
sessionId: 12121212 |
|
}, |
|
{ |
|
id: 5, |
|
title: 'G228火炬路与S503岙东路路', |
|
roadCode: 123, |
|
roadName: 'G228火炬路与S503岙东路', |
|
imgurl: '/static/logo.png', |
|
createTime: '2024-10-05', |
|
deptName: '支队级', |
|
sessionId: 12121212 |
|
}, |
|
], |
|
isEmpty: false, |
|
isMore: true, |
|
page: 1, |
|
tab: 1 |
|
} |
|
}, |
|
// 页面加载 |
|
onLoad(e) { |
|
this.getList() |
|
}, |
|
// 计算属性 |
|
computed: {}, |
|
// 方法 |
|
methods: { |
|
getList() { |
|
let datas = { |
|
limit: 10, |
|
page: 1, |
|
} |
|
// this.$request.globalRequest('/xxxxxxxx', datas, 'GET').then(res => { |
|
// if (res.code == 0) { |
|
// if (res.data.total === 0) { |
|
// this.isEmpty = true; |
|
// return false |
|
// } |
|
// this.list.push(...res.data.list) |
|
// if (this.list.length >= res.data.total) { |
|
// this.isMore = false |
|
// } |
|
// } else { |
|
// this.$.toast(res.msg) |
|
// } |
|
// }) |
|
}, |
|
handleClick(row) { |
|
console.log(row) |
|
}, |
|
// 跳转页面 |
|
skipPage(even) { |
|
// this.$.open(even) |
|
}, |
|
}, |
|
onReady() {}, |
|
// 页面卸载 |
|
onUnload() { |
|
|
|
}, |
|
// 触发下拉刷新 |
|
onPullDownRefresh() { |
|
// 延迟关闭刷新动画 |
|
setTimeout(() => { |
|
uni.stopPullDownRefresh(); |
|
}, 1500); |
|
}, |
|
// 页面上拉触底事件的处理函数 |
|
onReachBottom() { |
|
if (this.isMore) { |
|
this.page++ |
|
this.getList() |
|
} |
|
}, |
|
} |
|
</script> |
|
|
|
<style> |
|
</style> |
|
<style lang="scss" scoped> |
|
page { |
|
background: #F6F8FA; |
|
} |
|
.imgIcon { |
|
width: 40rpx; |
|
height: 100%; |
|
} |
|
.imgIcon:nth-of-type(2) { |
|
margin-left: 40rpx; |
|
} |
|
.img { |
|
width: 40rpx; |
|
height: 40rpx; |
|
margin-left: 30rpx; |
|
} |
|
.trapezoidal { |
|
position: relative; |
|
display: inline-block; |
|
min-width: 2em; |
|
text-align: center; |
|
padding: 3rpx 20rpx 3rpx 18rpx; |
|
} |
|
|
|
.trapezoidal::before, |
|
.trapezoidal::after { |
|
content: ''; |
|
position: absolute; |
|
top: 0; |
|
left: 0%; |
|
width: 100%; |
|
height: 100%; |
|
border-radius: 0rpx 0 0 0; |
|
background: #FF1111; |
|
z-index: -1; |
|
transform-origin: bottom; |
|
transform: skew(18deg); |
|
border: 0rpx solid #333; |
|
box-sizing: border-box; |
|
} |
|
|
|
.trapezoidal::after { |
|
left: auto; |
|
right: 0; |
|
transform: skew(-0deg); |
|
border-radius: 0 0rpx 0 0; |
|
background-color: #FF1111; |
|
border-left: 0 none; |
|
} |
|
|
|
.tab { |
|
display: flex; |
|
align-items: center; |
|
justify-content: space-around; |
|
font-size: 16px; |
|
height: 44px; |
|
background: #ffffff; |
|
box-shadow: 3px 0px 10px #ccc; |
|
color: #666666; |
|
position: relative; |
|
.tab-item { |
|
position: relative; |
|
height: 41px; |
|
line-height: 41px; |
|
padding: 0 30rpx 0 30rpx; |
|
border-bottom: 3px solid #fff; |
|
display: flex; |
|
align-items: center; |
|
&.active { |
|
color: rgb(60, 109, 195); |
|
border-color: rgb(60, 109, 195); |
|
} |
|
.number { |
|
font-weight: bold; |
|
font-size: 18px; |
|
margin-left: 10rpx; |
|
} |
|
} |
|
} |
|
|
|
.Box { |
|
padding-top:var(--status-bar-height); |
|
.Content { |
|
width: calc(100% - 48rpx); |
|
padding-bottom: 88rpx; |
|
} |
|
|
|
.Unit { |
|
padding: 24rpx; |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: center; |
|
position: relative; |
|
box-shadow: 1px 1px 3px #ccc; |
|
.trapezoidal { |
|
position: absolute; |
|
top: 0px; |
|
right: 0px; |
|
color: #ffffff; |
|
font-size: 14px; |
|
font-weight: normal; |
|
z-index: 1; |
|
} |
|
image { |
|
width: 140rpx; |
|
} |
|
.right { |
|
flex: 1; |
|
padding-left: 30rpx; |
|
.title { |
|
font-size: 16px; |
|
} |
|
.type { |
|
font-size: 14px; |
|
color: #666; |
|
font-weight: normal; |
|
text { |
|
margin-right: 20rpx; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
</style>
|
|
|