From 6b394c7206326e66811dbd8d646874c8abb20e89 Mon Sep 17 00:00:00 2001
From: zxl <763096477@qq.com>
Date: 星期四, 26 六月 2025 09:47:34 +0800
Subject: [PATCH] 调整报名活动页面
---
pages/news/news.vue | 178 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 178 insertions(+), 0 deletions(-)
diff --git a/pages/news/news.vue b/pages/news/news.vue
new file mode 100644
index 0000000..1a11a47
--- /dev/null
+++ b/pages/news/news.vue
@@ -0,0 +1,178 @@
+<template>
+ <view class="wrapper">
+ <view style="height: 100rpx"></view>
+ <!-- 鍐呭鍖哄煙 -->
+ <scroll-view scroll-y class="content" style="height: 40vh;" @scrolltolower="loadMore" :lower-threshold="100">
+ <view class="waterfall">
+
+ <view class="item" v-for="(item, idx) in mockData" :key="item.id" @click="handleItemClick(item)">
+ <text class="title">{{ item.title }}</text>
+ <text class="publishDate">鍙戝竷鏃堕棿:{{ item.publishDate }}</text>
+ </view>
+
+ </view>
+ <!-- <view style="height: 150rpx;"></view> -->
+ <!-- 鏀硅繘鐨勫姞杞芥洿澶氭彁绀� -->
+ <view class="load-more">
+ <u-loadmore v-if="mockData.length > 0" :status="loading ? 'loading' : noMore ? 'nomore' : 'loadmore'"
+ :load-text="{
+ loadmore: '涓婃媺鍔犺浇鏇村',
+ loading: '姝ｅ湪鍔犺浇',
+ nomore: '娌℃湁鏇村浜�'
+ }" />
+ </view>
+ <view style="height:150rpx">
+
+ </view>
+ </scroll-view>
+ </view>
+</template>
+
+<script>
+ import '@/components/uview-components/uview-ui';
+ import { getNews,addNews,editNews,publish,delById } from '@/api/news.js'
+ export default {
+ data() {
+ return {
+ query: {
+ pageNumber: 1,
+ pageSize: 10,
+ publish:1,
+ },
+ loading:false,
+ total:0,
+ mockData:[],
+ noMore:false,
+
+ }
+ },
+ mounted() {
+
+ },
+ onLoad() {
+ this.getNewsPage();
+ },
+ methods: {
+ handleItemClick(item){
+ uni.navigateTo({
+ url: `/pages/news/detail?id=${item.id}` // 鍙傛暟閫氳繃 URL 浼犻��
+ });
+ },
+ async getNewsPage(){
+ try {
+ const res = await getNews(this.query);
+ this.loading = false;
+ if(res.statusCode === 200){
+ const newData = res.data.data.map(value =>({
+ id:value.id,
+ title:value.title,
+ publish:value.publish,
+ publishDate:value.publishDate
+ }));
+ // 鏇存柊鎬绘暟鎹噺
+ this.total = res.data.total || 0;
+ // 杩藉姞鎴栨浛鎹㈡暟鎹�
+ this.mockData = this.query.pageNumber === 1 ?
+ newData :
+ [...this.mockData, ...newData];
+
+ // 鍒ゆ柇鏄惁杩樻湁鏇村鏁版嵁
+ this.noMore = newData.length < this.query.pageSize ||
+ this.mockData.length >= this.total;
+
+ }
+
+ } catch (error) {
+ console.error('鍔犺浇澶辫触:', error);
+ // 澶辫触鏃跺洖閫�椤电爜
+ if (this.query.pageNumber > 1) {
+ this.query.pageNumber -= 1;
+ }
+ } finally {
+ this.loading = false;
+ uni.hideLoading();
+ uni.stopPullDownRefresh();
+ }
+
+ }
+ }
+ }
+</script>
+
+<style lang="scss" scoped>
+.wrapper {
+ padding: 0 20rpx;
+ box-sizing: border-box;
+ background-color: #f5f5f5;
+ height: 100%;
+
+ .content {
+ padding-bottom: 20rpx;
+ box-sizing: border-box;
+
+ .waterfall {
+ display: flex;
+ flex-direction: column;
+ padding: 0 10rpx;
+
+ .item {
+ background: #fff;
+ border-radius: 12rpx;
+ padding: 24rpx;
+ margin-bottom: 20rpx;
+ box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+
+ &:active {
+ transform: scale(0.98);
+ box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
+ }
+
+ .title {
+ display: block;
+ font-size: 28rpx;
+ color: #333;
+ font-weight: 500;
+ line-height: 1.5;
+ margin-bottom: 12rpx;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ display: -webkit-box;
+ -webkit-line-clamp: 3;
+ -webkit-box-orient: vertical;
+ }
+
+ .publishDate {
+ display: block;
+ font-size: 22rpx;
+ color: #999;
+ text-align: right;
+ }
+ }
+ }
+
+ .load-more {
+ padding: 30rpx 0;
+ background-color: transparent;
+
+ .u-loadmore {
+ font-size: 26rpx !important;
+ color: #999 !important;
+ }
+ }
+ }
+}
+
+/* 骞虫澘鍙婁互涓婅澶囬�傞厤 */
+@media (min-width: 768px) {
+ .waterfall {
+ flex-direction: row !important;
+ flex-wrap: wrap;
+
+ .item {
+ width: calc(50% - 10rpx);
+ margin: 0 5rpx 20rpx;
+ }
+ }
+}
+</style>
--
Gitblit v1.8.0