From a1d97491d5455fb9eebff8026551dd224f5ba9c4 Mon Sep 17 00:00:00 2001
From: linju-json <linju@dcloud.io>
Date: Mon, 26 Apr 2021 00:06:59 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E9=A6=96=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json                                    |   9 --
 pages/list/{news-list.vue => --news-list.vue} |   0
 pages/list/list.nvue                          | 151 ++++++++++++++++++
 pages/list/list.vue                           |  58 -------
 pages/ucenter/edit/edit.vue                   |   4 +-
 5 files changed, 153 insertions(+), 69 deletions(-)
 rename pages/list/{news-list.vue => --news-list.vue} (100%)
 create mode 100644 pages/list/list.nvue
 delete mode 100644 pages/list/list.vue

diff --git a/pages.json b/pages.json
index cc70593..6a04647 100644
--- a/pages.json
+++ b/pages.json
@@ -8,15 +8,6 @@
 				"enablePullDownRefresh": true
 			}
 		},
-		{
-			"path": "pages/list/news-list",
-			"style": {
-				//#ifndef MP
-				"navigationStyle": "custom",
-				//#endif
-				"enablePullDownRefresh": true
-			}
-		},
 		{
 			"path": "pages/grid/grid",
 			"style": {
diff --git a/pages/list/news-list.vue b/pages/list/--news-list.vue
similarity index 100%
rename from pages/list/news-list.vue
rename to pages/list/--news-list.vue
diff --git a/pages/list/list.nvue b/pages/list/list.nvue
new file mode 100644
index 0000000..f770f5a
--- /dev/null
+++ b/pages/list/list.nvue
@@ -0,0 +1,151 @@
+<template>
+	<view>
+		<view class="search-box">
+			<!-- #ifdef APP-PLUS -->
+			<uni-nav-bar class="status-bar"></uni-nav-bar>
+			<!-- #endif -->
+			<view class="search-container-bar">
+				<uni-search-bar ref="searchBar" style="flex:1;" radius="100" v-model="searchText"
+					@click.native="searchClick" cancelButton="none" disabled />
+			</view>
+		</view>
+		<view class="content">
+			<!-- #ifdef APP-PLUS -->
+			<!-- <uni-nav-bar class="status-bar"></uni-nav-bar> -->
+			<!-- #endif -->
+
+			<!-- 刷新页面后的顶部提示框 -->
+			<!-- 当前弹出内容没有实际逻辑 ，可根据当前业务修改弹出提示 -->
+			<view class="tips" :class="{ 'tips-ani': tipShow }">为您更新了10条内容</view>
+			<!-- 页面分类标题 -->
+
+			<!-- <uni-section style="margin:0;" v-if="searchText" :title="listTitle" type="line"></uni-section> -->
+
+			<unicloud-db ref="udb" v-slot:default="{data, loading, error, options}" :options="formData"
+				collection="opendb-news-articles,uni-id-users"
+				field="author{username, _id}, _id,avatar,title,excerpt,last_modify_date, comment_count, like_count"
+				:foreignKey="foreignKey" :where="where" @load="load" @error="isLoading = false">
+				<text v-if="error" class="list-info">{{error.message}}</text>
+				<!-- 基于 uni-list 的页面布局 -->
+				<uni-list :class="{ 'uni-list--waterfall': options.waterfall }">
+					<!-- 通过 uni-list--waterfall 类决定页面布局方向 -->
+					<!-- to 属性携带参数跳转详情页面，当前只为参考 -->
+					<uni-list-item :border="!options.waterfall" :to="'./detail?id='+item._id+'&title='+item.title"
+						class="uni-list-item--waterfall" title="自定义列表" v-for="item in data" :key="item._id">
+						<!-- 通过header插槽定义列表左侧图片 -->
+						<template v-slot:header>
+							<image class="avatar" :src="item.avatar" mode="aspectFill"></image>
+						</template>
+						<!-- 通过body插槽定义布局 -->
+						<view slot="body" class="main">
+							<text class="title">{{ item.title }}</text>
+							<view class="foot">
+								<text class="uni-ellipsis-1">{{ item.author[0].username }}</text>
+								<text>{{ item.comment_count }}评论</text>
+								<uni-dateformat :date="item.last_modify_date" format="yyyy-MM-dd"
+									:threshold="[60000, 2592000000]" />
+							</view>
+						</view>
+					</uni-list-item>
+				</uni-list>
+				<!-- 通过 loadMore 组件实现上拉加载效果，如需自定义显示内容，可参考：https://ext.dcloud.net.cn/plugin?id=29 -->
+				<uni-load-more v-if="!error && (loading || options.status === 'noMore') " :status="options.status" />
+				<uni-nodata v-if="data.length == 0" :isLoading="isLoading" @retry="refresh"></uni-nodata>
+			</unicloud-db>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				canSearch: true,
+				searchText: 'searchText',
+				formData: {
+					waterfall: false, // 布局方向切换
+					status: 'loading', // 加载状态
+				},
+				where: '',
+				// 数据表名
+				foreignKey: '',
+				tipShow: false, // 是否显示顶部提示框
+				isLoading: true
+			};
+		},
+		onLoad() {},
+		onShow(options) {
+			this.searchText = getApp().globalData.searchText;
+		},
+		/**
+		 * 下拉刷新回调函数
+		 */
+		onPullDownRefresh() {
+			this.refresh();
+		},
+		onReachBottom() {
+			this.loadMore();
+		},
+		methods: {
+			load(e) {
+				console.log(e);
+			},
+			refresh(e) {
+				console.log(e);
+				this.tipShow = true
+				this.formData.status = 'more'
+				this.isLoading = true
+				this.$refs.udb.loadData({
+					clear: true
+				}, () => {
+					this.tipShow = false
+					this.isLoading = false
+					uni.stopPullDownRefresh()
+				})
+			},
+			select() {
+				this.formData.waterfall = !this.formData.waterfall;
+			},
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	.content {
+		flex: 1;
+	}
+
+	.avatar {
+		width: 200rpx;
+		height: 200rpx;
+		margin-right: 10rpx;
+	}
+
+	.tips {
+		color: #67c23a;
+		font-size: 14px;
+		line-height: 40px;
+		text-align: center;
+		background-color: #f0f9eb;
+		height: 0;
+		opacity: 0;
+		transform: translateY(-100%);
+		//transition: all 0.3s;
+	}
+	
+	.main{
+		justify-content: space-between;
+	}
+	.title {
+		width: 480rpx;
+	}
+	.foot{
+		flex-direction: row;
+		justify-content: space-between;
+	}
+	.tips-ani {
+		transform: translateY(0);
+		height: 40px;
+		opacity: 1;
+	}
+</style>
diff --git a/pages/list/list.vue b/pages/list/list.vue
deleted file mode 100644
index 11cef54..0000000
--- a/pages/list/list.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<template>
-	<view style="overflow: hidden;">
-		<!-- 页面主列表 -->
-		<news-list ref="newsList" :canSearch="canSearch" :currentText="searchText"></news-list>
-	</view>
-</template>
-
-<script>
-	import newsList from './news-list.vue';
-	export default {
-		components:{
-			newsList
-		},
-		data() {
-			return {
-				searchText: '',
-				canSearch:true
-			};
-		},
-		onLoad() {
-		},
-		onShow(options) {
-			this.searchText = getApp().globalData.searchText;
-		},
-		/**
-		 * 下拉刷新回调函数
-		 */
-		onPullDownRefresh() {
-			this.$refs.newsList.refresh();
-		},
-		methods: {
-			/**
-			 * 切换商品列表布局方向（未实现）
-			 */
-			select() {
-				this.formData.waterfall = !this.formData.waterfall;
-			},
-			/**
-			 * 上拉加载回调函数
-			 */
-			onReachBottom() {
-				this.$refs.newsList.loadMore();
-			}
-		}
-	};
-</script>
-
-<style lang="scss" scoped>
-	@import '@/common/uni-ui.scss';
-	page {
-		display: flex;
-		flex-direction: column;
-		box-sizing: border-box;
-		background-color: #efeff4;
-		min-height: 100%;
-		height: auto;
-	}
-</style>
diff --git a/pages/ucenter/edit/edit.vue b/pages/ucenter/edit/edit.vue
index ecd12b6..a117097 100644
--- a/pages/ucenter/edit/edit.vue
+++ b/pages/ucenter/edit/edit.vue
@@ -1,8 +1,8 @@
 <template>
 	<view>
 		<uni-list>
-			<uni-list-item class="item" link>
-				<view @click="setAvatar" slot="body" class="item">
+			<uni-list-item class="item" @click="setAvatar" link>
+				<view slot="body" class="item">
 					<text>头像</text>
 					<image class="avatarUrl" :src="userInfo.avatar||nullAvatarUrl" mode="widthFix"></image>
 				</view>
-- 
GitLab