list.nvue 5.9 KB
Newer Older
DCloud_JSON's avatar
DCloud_JSON 已提交
1
<template>
2
	<view class="pages">
3
		<!-- #ifndef H5 -->
4
		<statusBar></statusBar>
5
		<!-- #endif -->
6 7 8 9
		<!-- 搜索功能 -->
		<uni-search-bar @click="searchClick" class="uni-search-box" v-model="keyword" ref="searchBar" radius="100"
			cancelButton="none" disabled :placeholder="inputPlaceholder" />
		<view class="cover-search-bar" @click="searchClick"></view>
10 11
		<unicloud-db ref='udb' v-slot:default="{data,pagination,hasMore, loading, error, options}" @error="onqueryerror"
			:where="where" collection="opendb-news-articles,uni-id-users" :page-size="10"
study夏羽's avatar
study夏羽 已提交
12 13
			field="avatar,title,last_modify_date,user_id.username" @load="loadData"
			>
DCloud_JSON's avatar
重构  
DCloud_JSON 已提交
14
			<!-- 基于 uni-list 的页面布局 -->
15 16
			<uni-list class="uni-list" :border="false" :bounce="true" :alwaysScrollableVertical="true"
				:style="{height:listHight}">
17
				<uni-list-item :to="'/pages/list/detail?id='+item._id+'&title='+item.title" v-for="(item,index) in data"
18
					:key="index">
19 20 21 22
					<!-- 通过header插槽定义列表左侧图片 -->
					<template v-slot:header>
						<image class="avatar" :src="item.avatar" mode="aspectFill"></image>
					</template>
23 24 25 26 27 28 29 30 31 32
					<!-- 通过body插槽定义布局 -->
					<template v-slot:body>
						<view class="main">
							<text class="title">{{item.title}}</text>
							<view class="info">
								<text class="author">{{item.user_id[0].username}}</text>
								<uni-dateformat class="last_modify_date" :date="item.last_modify_date"
									format="yyyy-MM-dd" :threshold="[60000, 2592000000]" />
							</view>
						</view>
DCloud_JSON's avatar
DCloud_JSON 已提交
33
					</template>
34
				</uni-list-item>
35
				<uni-list-item>
DCloud_JSON's avatar
DCloud_JSON 已提交
36
					<template v-slot:body>
37 38 39
						<uni-load-state @networkResume="refresh" :state="{data,pagination,hasMore, loading, error}">
						</uni-load-state>
					</template>
40
				</uni-list-item>
41
			</uni-list>
DCloud_JSON's avatar
重构  
DCloud_JSON 已提交
42
		</unicloud-db>
DCloud_JSON's avatar
DCloud_JSON 已提交
43 44 45 46
	</view>
</template>

<script>
47
	var cdbRef, currentWebview;
48 49 50 51 52
	import statusBar from "@/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-status-bar";

	import Gps from '@/uni_modules/json-gps/js_sdk/gps.js';
	const gps = new Gps()

53 54 55
	export default {
		components: {
			statusBar
56 57 58 59 60 61 62 63 64
		},
		computed: {
			inputPlaceholder(e) {
				if (uni.getStorageSync('CURRENT_LANG') == "en") {
					return 'Please enter the search content'
				} else {
					return '请输入搜索内容'
				}
			}
65
		},
DCloud_JSON's avatar
DCloud_JSON 已提交
66 67
		data() {
			return {
DCloud_JSON's avatar
重构  
DCloud_JSON 已提交
68 69 70
				where: "",
				keyword: "",
				refreshState: 0,
study夏羽's avatar
study夏羽 已提交
71 72
				listHight: 0,
				dataList:[]
DCloud_JSON's avatar
重构  
DCloud_JSON 已提交
73
			}
74
		},
75
		watch: {
76
			keyword(keyword, oldValue) {
77
				let where = '"article_status" == 1 '
78
				if (keyword) {
79
					this.where = where + `& /${keyword}/.test(title)`;
80
				} else {
81
					this.where = where;
82 83 84
				}
			}
		},
85
		async onReady() {
86 87 88 89 90
			// #ifdef APP-NVUE
			this.listHight = uni.getSystemInfoSync().windowHeight - 96 + 'px'
			// #endif
			// #ifndef APP-NVUE
			this.listHight = 'auto'
91
			// #endif
study夏羽's avatar
study夏羽 已提交
92
			cdbRef = this.$refs.udb
93
			
DCloud_JSON's avatar
DCloud_JSON 已提交
94
		},
study夏羽's avatar
study夏羽 已提交
95
		async onShow() {
DCloud_JSON's avatar
DCloud_JSON 已提交
96 97
			this.keyword = getApp().globalData.searchText
			getApp().globalData.searchText = ''
98 99 100 101 102 103 104 105 106 107 108 109 110 111
			//这里仅演示如何,在onShow生命周期获取设备位置,并在设备或者应用没有权限时自动引导。设置完毕自动重新获取。
			//你可以基于他做自己的业务,比如:根据距离由近到远排序列表数据等
			// uni.showLoading({
			// 	title:"获取定位中"
			// });
			//默认h5端不获取定位
			// let location = await gps.getLocation({geocode:true})
			// console.log(location);
			// if(location){
			// 	uni.showToast({
			// 		title: JSON.stringify(location),
			// 		icon: 'none'
			// 	});
			// }
112
			// uni.hideLoading()
DCloud_JSON's avatar
DCloud_JSON 已提交
113 114
		},
		methods: {
study夏羽's avatar
study夏羽 已提交
115 116 117 118 119
			loadData(e){
				console.log("e: ----",e[0]);
				this.dataList = e[0]
				console.log("this.dataList: ",this.dataList);
			},
120
			searchClick(e) { //点击搜索框
DCloud_JSON's avatar
重构  
DCloud_JSON 已提交
121 122 123
				uni.hideKeyboard();
				uni.navigateTo({
					url: '/pages/list/search/search',
124
					animationType: 'fade-in'
DCloud_JSON's avatar
重构  
DCloud_JSON 已提交
125
				});
126 127 128 129
			},
			retry() {
				this.refresh()
			},
130 131
			refresh() {
				console.log('----platform----');
132
				console.log(JSON.stringify(process.env.VUE_APP_PLATFORM));
133 134 135 136 137 138
				cdbRef.loadData({
					clear: true
				}, () => {
					uni.stopPullDownRefresh()
				})
				console.log('refresh');
139 140
			},
			onqueryerror(e) {
141
				console.error(e);
142
			}
DCloud_JSON's avatar
重构  
DCloud_JSON 已提交
143 144 145 146 147
		},
		onPullDownRefresh() {
			this.refresh()
		},
		onReachBottom() {
148 149 150
			cdbRef.loadMore({
				clear: true
			})
DCloud_JSON's avatar
DCloud_JSON 已提交
151 152
		}
	}
DCloud_JSON's avatar
重构  
DCloud_JSON 已提交
153
</script>
DCloud_JSON's avatar
DCloud_JSON 已提交
154

155 156 157 158 159 160 161 162
<style scoped>
	/* #ifndef APP-NVUE */
	view {
		display: flex;
		box-sizing: border-box;
		flex-direction: column;
	}

163
	/* #endif */
164
	.pages {
165
		background-color: #FFFFFF;
DCloud_JSON's avatar
DCloud_JSON 已提交
166
	}
167

DCloud_JSON's avatar
DCloud_JSON 已提交
168 169 170 171 172 173
	.avatar {
		width: 200rpx;
		height: 200rpx;
		margin-right: 10rpx;
	}

DCloud_JSON's avatar
重构  
DCloud_JSON 已提交
174 175 176 177 178 179
	.main {
		justify-content: space-between;
	}

	.title {
		width: 480rpx;
DCloud_JSON's avatar
DCloud_JSON 已提交
180
		font-size: 32rpx;
DCloud_JSON's avatar
重构  
DCloud_JSON 已提交
181 182 183 184 185 186 187 188 189 190 191 192 193 194
	}

	.info {
		flex-direction: row;
		justify-content: space-between;
	}

	.author,
	.last_modify_date {
		font-size: 28rpx;
		color: #999999;
	}

	.refresh-tip {
DCloud_JSON's avatar
DCloud_JSON 已提交
195 196 197 198 199 200 201 202
		color: #67c23a;
		font-size: 14px;
		line-height: 40px;
		text-align: center;
		background-color: #f0f9eb;
		height: 0;
		opacity: 0;
		transform: translateY(-100%);
DCloud_JSON's avatar
重构  
DCloud_JSON 已提交
203
		transition: height 0.3s;
DCloud_JSON's avatar
DCloud_JSON 已提交
204
	}
DCloud_JSON's avatar
重构  
DCloud_JSON 已提交
205 206 207 208 209

	.uni-search-box {
		background-color: #FFFFFF;
		position: sticky;
		top: 0;
DCloud_JSON's avatar
DCloud_JSON 已提交
210 211 212
		left: 0;
		/* #ifndef APP-PLUS */
		z-index: 9;
213 214 215
		/* #endif */
		/* #ifdef MP-WEIXIN */
		width: 580rpx;
DCloud_JSON's avatar
DCloud_JSON 已提交
216
		/* #endif */
217 218
	}

DCloud_JSON's avatar
重构  
DCloud_JSON 已提交
219
	.show-refresh-tip {
DCloud_JSON's avatar
DCloud_JSON 已提交
220 221 222
		transform: translateY(0);
		height: 40px;
		opacity: 1;
DCloud_JSON's avatar
重构  
DCloud_JSON 已提交
223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241
	}

	.get-data-state {
		width: 750rpx;
		align-items: center;
	}

	.get-data-state-img {
		width: 500rpx;
	}

	.get-data-state-text {
		width: 32rpx;
		color: #999999;
		line-height: 50rpx;
		height: 50rpx;
		width: 750rpx;
		text-align: center;
	}
242 243 244 245 246

	.uni-list {}

	.f1 {
		flex: 1;
247
	}
248 249 250 251 252 253 254 255 256 257 258

	.cover-search-bar {
		height: 50px;
		position: relative;
		top: -50px;
		margin-bottom: -50px;
		/* #ifndef APP-NVUE */
		z-index: 999;
		/* #endif */
	}
</style>