From a73b07da11c4cd34547629c37a57a11ae7f6d5f1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8A=8A=E9=87=8C?= <1227971437@qq.com>
Date: Wed, 7 Apr 2021 16:18:22 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E5=88=97=E8=A1=A8=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/list/list.vue                           | 105 ++-----
 pages/list/news-list.vue                      | 290 ++++++++++++++++++
 uni_modules/uni-login-page/common/myStyle.css |   2 +-
 3 files changed, 309 insertions(+), 88 deletions(-)
 create mode 100644 pages/list/news-list.vue

diff --git a/pages/list/list.vue b/pages/list/list.vue
index 089fc7db..80395bdf 100644
--- a/pages/list/list.vue
+++ b/pages/list/list.vue
@@ -1,76 +1,26 @@
 <template>
-	<!--
-	本页面模板教程：https://ext.dcloud.net.cn/plugin?id=2651
-	uni-list 文档：https://ext.dcloud.net.cn/plugin?id=24
-	uniCloud 文档：https://uniapp.dcloud.io/uniCloud/README
-	uni-clientDB 组件文档：https://uniapp.dcloud.net.cn/uniCloud/uni-clientdb-component
-	DB Schema 规范：https://uniapp.dcloud.net.cn/uniCloud/schema
-	 -->
 	<view style="overflow: hidden;">
-		<view class="search-container-bar">
-			<uni-search-bar ref="searchBar" style="flex:1;" radius="100" v-model="searchText"
-				@search-click="searchClick" cancelButton="none" disabled />
-		</view>
-		<view class="list">
-			<!-- 刷新页面后的顶部提示框 -->
-			<!-- 当前弹出内容没有实际逻辑 ，可根据当前业务修改弹出提示 -->
-			<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="collection" :field="field" :where="where" @load="load">
-				<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" class="uni-list-item--waterfall" title="自定义商品列表"
-						v-for="item in data" :key="item._id">
-						<!-- 通过header插槽定义列表左侧图片 -->
-						<template v-slot:header>
-							<view class="uni-thumb shop-picture" :class="{ 'shop-picture-column': options.waterfall }">
-								<image :src="item.avatar" mode="aspectFill"></image>
-							</view>
-						</template>
-						<!-- 通过body插槽定义布局 -->
-						<view slot="body" class="shop">
-							<view>
-								<view class="uni-title">
-									<text class="uni-ellipsis-2">{{ item.title }}</text>
-								</view>
-							</view>
-							<view>
-								<view class="uni-note ellipsis">
-									<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>
-						</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" />
-			</unicloud-db>
-		</view>
+		<status-bar></status-bar>
+		<!-- 页面主列表 -->
+		<news-list ref="newsList" :searchText="searchText"></news-list>
 	</view>
 </template>
 
-<script>
-	export default {
+<script>
+	import newsList from './news-list.vue';
+	import statusBar from '@/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-status-bar.vue';
+	export default {
+		components:{
+			newsList,
+			statusBar
+		},
 		data() {
 			return {
-				searchText: '',
-				formData: {
-					waterfall: false, // 布局方向切换
-					status: 'loading', // 加载状态
+				searchText: '',
+				formData: {
+					waterfall: false, // 布局方向切换
+					status: 'loading', // 加载状态
 				},
-				where: '',
-				// 数据表名
-				collection: 'opendb-news-articles,uni-id-users',
-				// 查询字段，多个字段用 , 分割
-				field: 'author{username, _id}, user_id,_id,avatar,title,excerpt,last_modify_date, comment_count, like_count',
-				tipShow: false // 是否显示顶部提示框
 			};
 		},
 		onShow(options) {
@@ -86,33 +36,14 @@
 			/**
 			 * 下拉刷新回调函数
 			 */
-			onPullDownRefresh() {
-				this.tipShow = true
-				this.formData.status = 'more'
-				this.$refs.udb.loadData({
-					clear: true
-				}, () => {
-					this.tipShow = false
-					uni.stopPullDownRefresh()
-				})
+			onPullDownRefresh() {
+				this.$refs.newsList.onPullDownRefresh();
 			},
 			/**
 			 * 上拉加载回调函数
 			 */
 			onReachBottom() {
-				this.$refs.udb.loadMore()
-			},
-			load(data, ended) {
-				if (ended) {
-					this.formData.status = 'noMore'
-				}
-			},
-			searchClick() {
-				uni.hideKeyboard();
-				uni.navigateTo({
-					url: '/pages/search/search',
-					animationType: 'fade-in'
-				});
+				this.$refs.newsList.onReachBottom();
 			}
 		},
 		watch: {
diff --git a/pages/list/news-list.vue b/pages/list/news-list.vue
new file mode 100644
index 00000000..e564239e
--- /dev/null
+++ b/pages/list/news-list.vue
@@ -0,0 +1,290 @@
+<template>
+	<!--
+	本页面模板教程：https://ext.dcloud.net.cn/plugin?id=2651
+	uni-list 文档：https://ext.dcloud.net.cn/plugin?id=24
+	uniCloud 文档：https://uniapp.dcloud.io/uniCloud/README
+	uni-clientDB 组件文档：https://uniapp.dcloud.net.cn/uniCloud/uni-clientdb-component
+	DB Schema 规范：https://uniapp.dcloud.net.cn/uniCloud/schema
+	 -->
+	<view style="overflow: hidden;">
+		<view class="search-container-bar">
+			<uni-search-bar ref="searchBar" style="flex:1;" radius="100" v-model="searchText"
+				@search-click="searchClick" cancelButton="none" disabled />
+		</view>
+		<view class="list">
+			<!-- 刷新页面后的顶部提示框 -->
+			<!-- 当前弹出内容没有实际逻辑 ，可根据当前业务修改弹出提示 -->
+			<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="collection" :field="field" :where="where" @load="load">
+				<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" class="uni-list-item--waterfall" title="自定义商品列表"
+						v-for="item in data" :key="item._id">
+						<!-- 通过header插槽定义列表左侧图片 -->
+						<template v-slot:header>
+							<view class="uni-thumb shop-picture" :class="{ 'shop-picture-column': options.waterfall }">
+								<image :src="item.avatar" mode="aspectFill"></image>
+							</view>
+						</template>
+						<!-- 通过body插槽定义布局 -->
+						<view slot="body" class="shop">
+							<view>
+								<view class="uni-title">
+									<text class="uni-ellipsis-2">{{ item.title }}</text>
+								</view>
+							</view>
+							<view>
+								<view class="uni-note ellipsis">
+									<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>
+						</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" />
+			</unicloud-db>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props:{
+			searchText:{
+				type:String,
+				default:''
+			}
+		},
+		data() {
+			return {
+				// searchText: '',
+				formData: {
+					waterfall: false, // 布局方向切换
+					status: 'loading', // 加载状态
+				},
+				where: '',
+				// 数据表名
+				collection: 'opendb-news-articles,uni-id-users',
+				// 查询字段，多个字段用 , 分割
+				field: 'author{username, _id}, user_id,_id,avatar,title,excerpt,last_modify_date, comment_count, like_count',
+				tipShow: false // 是否显示顶部提示框
+			};
+		},
+		methods: {
+			/**
+			 * 切换商品列表布局方向
+			 */
+			select() {
+				this.formData.waterfall = !this.formData.waterfall;
+			},
+			/**
+			 * 下拉刷新回调函数
+			 */
+			onPullDownRefresh() {
+				this.tipShow = true
+				this.formData.status = 'more'
+				this.$refs.udb.loadData({
+					clear: true
+				}, () => {
+					this.tipShow = false
+					uni.stopPullDownRefresh()
+				})
+			},
+			/**
+			 * 上拉加载回调函数
+			 */
+			onReachBottom() {
+				this.$refs.udb.loadMore()
+			},
+			load(data, ended) {
+				if (ended) {
+					this.formData.status = 'noMore'
+				}
+			},
+			searchClick() {
+				uni.hideKeyboard();
+				uni.navigateTo({
+					url: '/pages/search/search',
+					animationType: 'fade-in'
+				});
+			}
+		},
+		watch: {
+			searchText(value) {
+				this.search(value);
+			}
+		},
+		computed: {
+			listTitle() {
+				if (this.searchText) return '搜索结果';
+				return '';
+			}
+		}
+	};
+</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;
+	}
+
+	.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;
+	}
+
+	.tips-ani {
+		transform: translateY(0);
+		height: 40px;
+		opacity: 1;
+	}
+
+	.shop {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+	}
+
+	.shop-picture {
+		width: 110px;
+		height: 110px;
+	}
+
+	.shop-picture-column {
+		width: 100%;
+		height: 170px;
+		margin-bottom: 10px;
+	}
+	
+	.ellipsis {
+		display: flex;
+		overflow: hidden;
+	}
+
+	.uni-ellipsis-1 {
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+	}
+
+	.uni-ellipsis-2 {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		display: -webkit-box;
+		-webkit-line-clamp: 2;
+		-webkit-box-orient: vertical;
+	}
+	.uni-note{
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		justify-content: space-between;
+		align-items: center;
+		flex-wrap: nowrap;
+	}
+
+	// 默认加入 scoped ，所以外面加一层提升权重
+	.list {
+		// margin-top: 52px;
+
+		.uni-list--waterfall {
+
+			/* #ifndef H5 || APP-VUE */
+			// 小程序 编译后会多一层标签，而其他平台没有，所以需要特殊处理一下
+			/deep/ .uni-list {
+				/* #endif */
+				display: flex;
+				flex-direction: row;
+				flex-wrap: wrap;
+				padding: 5px;
+				box-sizing: border-box;
+
+				/* #ifdef H5 || APP-VUE */
+				// h5 和 app-vue 使用深度选择器，因为默认使用了 scoped ，所以样式会无法穿透
+				/deep/
+				/* #endif */
+				.uni-list-item--waterfall {
+					width: 50%;
+					box-sizing: border-box;
+
+					.uni-list-item__container {
+						padding: 5px;
+						flex-direction: column;
+					}
+				}
+
+				/* #ifndef H5 || APP-VUE */
+			}
+
+			/* #endif */
+		}
+	}
+
+	.search-icons {
+		padding: 16rpx;
+	}
+
+	.search-container-bar {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+		// position: fixed;
+		// left: 0;
+		// right: 0;
+		// z-index: 10;
+		background-color: #fff;
+	}
+
+	/* #ifndef APP-NVUE */
+	/deep/
+	/* #endif */
+	.uni-searchbar__box {
+		border-width: 0;
+	}
+
+	/* #ifndef APP-NVUE */
+	/deep/
+	/* #endif */
+	.uni-input-placeholder {
+		font-size: 28rpx;
+	}
+
+	.list-info {
+		/* #ifndef APP-NVUE */
+		display: block;
+		/* #endif */
+		flex: 1;
+		text-align: center;
+		font-size: 26rpx;
+		color: #808080;
+		margin-top: 20rpx;
+	}
+</style>
diff --git a/uni_modules/uni-login-page/common/myStyle.css b/uni_modules/uni-login-page/common/myStyle.css
index 19fba5cb..cd7d5acb 100644
--- a/uni_modules/uni-login-page/common/myStyle.css
+++ b/uni_modules/uni-login-page/common/myStyle.css
@@ -1,5 +1,5 @@
 .flex{
-	/* #ifndef APP-VUE */
+	/* #ifndef APP-NVUE */
 	display: flex;
 	/* #endif */
 }
-- 
GitLab