chuangte_bike_newxcx/page_shanghu/gonggaolist.vue
2025-08-30 17:38:15 +08:00

130 lines
2.8 KiB
Vue

<template>
<view class="page">
<u-navbar title="公告协议" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37'
title-size='36' height='36' id="navbar">
</u-navbar>
<view class="content">
<!-- 加载态 -->
<view v-if="loading" class="loading">加载中…</view>
<!-- 空态 -->
<view v-else-if="isEmpty" class="empty">暂无数据</view>
<!-- 列表 -->
<scroll-view v-else scroll-y class="list">
<view class="item" v-for="item in list" :key="item.id" @click="btnid(item.id)">
<view class="item__title">{{ item.title }}</view>
<view class="item__meta">
<text class="meta__area">{{ item.areaName || '-' }}</text>
<text class="meta__time">{{ item.duration || '-' }}秒</text>
<text v-if="item.agreementType == 0">公告</text>
<text v-if="item.agreementType == 1">协议</text>
</view>
</view>
</scroll-view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
bgc: {
backgroundColor: "#FFFFFF",
},
areaId:'',
list: [],
loading: false,
isEmpty: false,
};
},
onLoad(option) {
this.areaId = option.areaId
},
onShow() {
this.getxieyi()
},
methods: {
// 获取公告协议
getxieyi(){
this.loading = true
this.$u.get(`/bst/agreement/list?areaId=${this.areaId}`).then((res) => {
if (res && res.code == 200) {
const rows = (res.data && (res.data.rows || res.data.list)) || res.rows || []
this.list = Array.isArray(rows) ? rows : []
this.isEmpty = this.list.length === 0
} else {
this.list = []
this.isEmpty = true
}
}).catch(() => {
this.list = []
this.isEmpty = true
}).finally(() => {
this.loading = false
})
},
btnid(id){
uni.navigateTo({
url:'/page_shanghu/gonggao?id=' + id
})
}
},
}
</script>
<style lang="scss">
page {
background-color: #fff;
}
.content {
padding: 24rpx;
height: calc(100vh - 88rpx);
box-sizing: border-box;
}
.loading,
.empty {
text-align: center;
color: #999;
padding: 48rpx 0;
}
.list {
max-height: 100%;
}
.item {
padding: 28rpx 24rpx;
border-radius: 16rpx;
background: #f1f1f1;
box-shadow: 0 8rpx 24rpx rgba(0, 0, 1rpx, 0.04);
margin-bottom: 24rpx;
}
.item__title {
font-size: 32rpx;
font-weight: 600;
color: #262B37;
margin-bottom: 12rpx;
}
.item__meta {
font-size: 24rpx;
color: #7A7F8A;
display: flex;
align-items: center;
gap: 12rpx;
margin-bottom: 8rpx;
}
.meta__dot { color: #bbb; }
.meta__time { margin-left: auto; }
.item__brief {
font-size: 26rpx;
color: #4A4F59;
margin-top: 8rpx;
line-height: 1.6;
}
</style>