From fa880fe6b90ac8ca8ce4af12ba4e70c09908ecee 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 15:55:16 +0800
Subject: [PATCH] =?UTF-8?q?list=E9=A6=96=E9=A1=B5=E5=B8=83=E5=B1=80?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 App.vue                              |  21 +-
 common/appInit.js                    |  16 +
 pages/list/{list.nvue => list.vue}   | 590 +++++++++++++--------------
 pages/uni-feedback/uni-feedback.nvue |   9 +-
 4 files changed, 309 insertions(+), 327 deletions(-)
 rename pages/list/{list.nvue => list.vue} (62%)

diff --git a/App.vue b/App.vue
index 15e70b1..3bcb9a3 100644
--- a/App.vue
+++ b/App.vue
@@ -6,17 +6,8 @@
 			appVersion:{}
 		},
 		onLaunch: function() {
-			//#ifdef APP-PLUS
-			// 保持屏幕常亮
-			uni.setKeepScreenOn({
-			    keepScreenOn: true
-			});
-			//#endif
 			console.log('App Launch')
-			
-			initApp();
-			
-			
+			// initApp();
 		},
 		onShow: function() {
 			console.log('App Show')
@@ -29,4 +20,14 @@
 
 <style>
 	/*每个页面公共css */
+	.border-test{
+		/* #ifdef APP-NVUE */
+		border-width: 1rpx;
+		border-color: #DD524D;
+		/* #endif */
+		/* #ifndef APP-NVUE */
+		border: 1px solid #DD524D;
+		box-sizing: border-box;
+		/* #endif */
+	}
 </style>
diff --git a/common/appInit.js b/common/appInit.js
index 9a78c28..3fbdda9 100644
--- a/common/appInit.js
+++ b/common/appInit.js
@@ -6,8 +6,24 @@ export default function (){
 	
 	// 检查更新
 	checkUpdate();
+	
+	keepScreenOn();
 }
 
+/**
+ * 保持屏幕常亮
+ */
+function keepScreenOn(){
+	//#ifdef APP-PLUS
+	// 保持屏幕常亮
+	uni.setKeepScreenOn({
+	    keepScreenOn: true
+	});
+	//#endif
+}
+/**
+ * // 初始化appVersion
+ */
 function initAppVersion(){
 	// #ifdef APP-NVUE
 	let appid = plus.runtime.appid;
diff --git a/pages/list/list.nvue b/pages/list/list.vue
similarity index 62%
rename from pages/list/list.nvue
rename to pages/list/list.vue
index 889e1e2..089fc7d 100644
--- a/pages/list/list.nvue
+++ b/pages/list/list.vue
@@ -1,325 +1,287 @@
-<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
-	unicloud-db 组件文档：https://uniapp.dcloud.net.cn/uniCloud/unicloud-db-component
-	DB Schema 规范：https://uniapp.dcloud.net.cn/uniCloud/schema
-	 -->
-	<view style="overflow: hidden;">
-		<!-- 搜索栏 -->
-		<template>
-			<status-bar/>
-			<uni-search-bar ref="searchBar" radius="100" v-model="searchText" @search-click="searchClick" @clear="clear" @click.native="searchClick"
-			 @cancel="search" cancelButton="none" disabled />
-		</template>
-		<view class="list">
-			<!-- 刷新页面后的顶部提示框 -->
-			<!-- 当前弹出内容没有实际逻辑 ，可根据当前业务修改弹出提示 -->
-			<view class="tips" :class="{ 'tips-ani': tipShow }">为您更新了10条内容</view>
-			<!-- 页面分类标题 -->
-			<uni-section style="margin:0;" :title="listTitle" type="line"></uni-section>
-			<unicloud-db ref="udb" :where="where" v-slot:default="{data, loading, error, options}" :options="formData" :collection="collection"
-			 :field="field" @load="load">
-				<!-- 基于 uni-list 的页面布局 -->
-				<uni-list>
-					<!-- to 属性携带参数跳转详情页面，当前只为参考 -->
-					<uni-list-item direction="column" v-for="item in data" :key="item.id" :to="'/pages/list/detail?id='+item._id+'&title='+item.title">
-						<!-- 通过body插槽定义列表内容显示 -->
-						<template v-slot:body>
-							<view class="uni-list-box">
-								<view class="uni-thumb">
-									<!-- 当前判断长度只为简单判断类型，实际业务中，根据逻辑直接渲染即可 -->
-									<image class="uni-thumb-img" :src="item.avatar" mode="aspectFill"></image>
-								</view>
-								<view class="uni-content">
-									<text class="uni-title-sub uni-ellipsis-2">{{item.title}}</text>
-									<view class="uni-note">
-										<text class="uni-footer-text">评论 {{item.comment_count}}</text>
-										<text class="uni-footer-text">点赞 {{item.like_count}}</text>
-									</view>
+<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>
-						</template>
-						<!-- 同步footer插槽定义列表底部的显示效果 -->
-						<template v-slot:footer>
-							<view class="uni-footer">
-								<text class="uni-footer-text">{{item.author[0].username}}</text>
-								<text class="uni-footer-text">{{ item.last_modify_date | beforTime }}</text>
+							<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>
-						</template>
-						
-					</uni-list-item>
-				</uni-list>
-				<!-- 通过 loadMore 组件实现上拉加载效果，如需自定义显示内容，可参考：https://ext.dcloud.net.cn/plugin?id=29 -->
-				<uni-load-more v-if="loading || options.status === 'noMore' " :status="options.status" />
-			</unicloud-db>
-		</view>
-	</view>
-</template>
-
-<script>
-	import { friendlyDate } from '@/common/utils.js';
-	import statusBar from "@/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-status-bar";
-	export default {
-		components:{
-			statusBar
-		},
-		data() {
-			return {
-				searchText: '',
-				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',
-				formData: {
-					status: 'loading' // 加载状态
-				},
-				tipShow: false // 是否显示顶部提示框
-			};
-		},
-		onShow(options) {
-			this.searchText = getApp().globalData.searchText;
-		},
-		filters:{
-			beforTime(number){
-				return friendlyDate(+number);
-			}
-		},
-		methods: {
-			/**
-			 * 下拉刷新回调函数
-			 */
-			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'
-				}
-			},
-			search(text = '') {
-				this.where = text ? `${new RegExp(text, 'gi')}.test(title)` : '';
-			},
-			clear() {
-				getApp().globalData.searchText = '';
-			},
-			searchClick() {
-				uni.hideKeyboard();
-				uni.navigateTo({
-					url: '/pages/search/search',
-					animationType: 'fade-in'
-				});
-			}
-		},
-		watch: {
-			searchText(value) {
-				this.search(value);
-			}
-		},
-		computed: {
-			listTitle() {
-				return this.searchText === '' ? '最新' : '搜索结果'
-			}
-		}
-	};
-</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;
-	}
-
-	.shop-price {
-		margin-top: 5px;
-		font-size: 12px;
-		color: #ff5a5f;
-	}
-
-	.shop-price-text {
-		font-size: 16px;
-	}
-
-	.hot-tag {
-		background: #ff5a5f;
-		border: none;
-		color: #fff;
-	}
-
-	.button-box {
-		height: 30px;
-		line-height: 30px;
-		font-size: 12px;
-		background: #007AFF;
-		color: #fff;
-	}
-
-	.uni-link {
-		flex-shrink: 0;
-	}
-
-	.ellipsis {
-		display: flex;
-		overflow: hidden;
+						</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 {
+		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 // 是否显示顶部提示框
+			};
+		},
+		onShow(options) {
+			this.searchText = getApp().globalData.searchText;
+		},
+		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;
 	}
-
-	.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;
-		
-		lines: 2;
-	}
-
-
-	// 默认加入 scoped ，所以外面加一层提升权重
-	.list {
-		.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 {
+	
+	.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: 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;
-	}
-	
-	
-	
-	
-	
-	.uni-content{
-		flex: 1;
-	}
-	.uni-thumb-img{
-		width: 125px;
-		height: 75px;
-	}
-	.uni-note{
-		display: flex;
-		flex-wrap: nowrap;
-		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/pages/uni-feedback/uni-feedback.nvue b/pages/uni-feedback/uni-feedback.nvue
index 50bd399..1e0db95 100644
--- a/pages/uni-feedback/uni-feedback.nvue
+++ b/pages/uni-feedback/uni-feedback.nvue
@@ -209,9 +209,12 @@ export default {
 </script>
 
 <style>
-page {
-	background-color: #efeff4;
-}
+	/* #ifndef APP-NVUE */
+	page {
+		background-color: #efeff4;
+	}
+	/* #endif */
+
 
 .input-view {
 	font-size: 28rpx;
-- 
GitLab