fm453/ctms-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

首次完整推送，

Browse Source 
V：1.20240808.006
This commit is contained in:
fm453
2024-08-13 18:32:37 +08:00
parent 15be3e9373
commit c62d15b288
939 changed files with 111777 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

256
pages/uni-starter/list/list.nvue Normal file
View File

@ -0,0 +1,256 @@
<template>
<view class="pages">
<!-- #ifndef H5 -->
<statusBar></statusBar>
<!-- #endif -->
<!-- 搜索功能 -->
<view class="uni-search-box">
<uni-search-bar v-model="keyword" ref="searchBar" radius="100" cancelButton="none" disabled
:placeholder="inputPlaceholder" />
<view class="cover-search-bar" @click="searchClick"></view>
</view>
<unicloud-db ref='udb' v-slot:default="{data,pagination,hasMore, loading, error, options}" @error="onqueryerror"
:collection="colList" :page-size="10">
<!-- 基于 uni-list 的页面布局 field="user_id.nickname"-->
<uni-list class="uni-list" :border="false" :style="{height:listHight}">
<!-- 作用于app端nvue页面的下拉加载 -->
<!-- #ifdef APP-NVUE -->
<refreshBox @refresh="refresh" :loading="loading"></refreshBox>
<!-- #endif -->
<!-- 列表渲染 -->
<uni-list-item :to="'./detail?id='+item._id+'&title='+item.title" v-for="(item,index) in data"
:key="index">
<!-- 通过header插槽定义列表左侧图片 -->
<template v-slot:header>
<image class="avatar" :src="item.avatar" mode="aspectFill"></image>
</template>
<!-- 通过body插槽定义布局 -->
<template v-slot:body>
<view class="main">
<text class="title">{{item.title}}</text>
<view class="info">
<text class="author">{{item.user_id[0]?item.user_id[0].nickname:''}}</text>
<uni-dateformat class="last_modify_date" :date="item.last_modify_date"
format="yyyy-MM-dd" :threshold="[60000, 2592000000]" />
</view>
</view>
</template>
</uni-list-item>
<!-- 加载状态：上拉加载更多，加载中，没有更多数据了，加载错误 -->
<!-- #ifdef APP-PLUS -->
<uni-list-item>
<template v-slot:body>
<!-- #endif -->
<uni-load-state @networkResume="refresh" :state="{data,pagination,hasMore, loading, error}"
@loadMore="loadMore">
</uni-load-state>
<!-- #ifdef APP-PLUS -->
</template>
</uni-list-item>
<!-- #endif -->
</uni-list>
</unicloud-db>
</view>
</template>
<script>
let cdbRef;
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();
const db = uniCloud.database();
const articleDBName = 'opendb-news-articles';
const userDBName = 'uni-id-users';
export default {
components: {
statusBar,
},
computed: {
// 根据当前语言返回不同的搜索框占位符
inputPlaceholder(e) {
if (uni.getStorageSync('CURRENT_LANG') == "en") {
return 'Please enter the search content'
} else {
return '请输入搜索内容'
}
},
// 连表查询，返回两个集合的查询结果
colList() {
return [
db.collection(articleDBName).where(this.where).field('thumbnail,title,publish_date,user_id')
.getTemp(), // 文章集合
db.collection(userDBName).field('_id,nickname').getTemp() // 用户集合
]
}
},
data() {
return {
where: '"article_status" == 1',
keyword: "",
showRefresh: false,
listHight: 0
}
},
watch: {
keyword(keyword, oldValue) {
let where = '"article_status" == 1 '
if (keyword) {
this.where = where + `&& /${keyword}/.test(title)`;
} else {
this.where = where;
}
}
},
async onReady() {
// #ifdef APP-NVUE
/* 可用窗口高度 - 搜索框高 - 状态栏高 */
this.listHight = uni.getSystemInfoSync().windowHeight - uni.getSystemInfoSync().statusBarHeight - 50 +
'px';
// #endif
// #ifndef APP-NVUE
this.listHight = 'auto'
// #endif
cdbRef = this.$refs.udb
},
async onShow() {
this.keyword = getApp().globalData.searchText
getApp().globalData.searchText = ''
//这里仅演示如何，在onShow生命周期获取设备位置，并在设备或者应用没有权限时自动引导。设置完毕自动重新获取。
//你可以基于他做自己的业务，比如：根据距离由近到远排序列表数据等
// uni.showLoading({
// title:"获取定位中"
// });
//默认h5端不获取定位
// #ifndef H5
let location = await gps.getLocation({
geocode: true
})
// console.log(location);
// #endif
// if(location){
// uni.showToast({
// title: JSON.stringify(location),
// icon: 'none'
// });
// }
// uni.hideLoading()
},
methods: {
searchClick(e) { //点击搜索框
uni.hideKeyboard();
uni.navigateTo({
url: './search/search',
animationType: 'fade-in'
});
},
retry() {
this.refresh()
},
refresh() {
cdbRef.loadData({
clear: true
}, () => {
uni.stopPullDownRefresh()
// #ifdef APP-NVUE
this.showRefresh = false
// #endif
console.log('end');
})
console.log('refresh');
},
loadMore() {
cdbRef.loadMore()
},
onqueryerror(e) {
console.error(e);
},
onpullingdown(e) {
console.log(e);
this.showRefresh = true
if (e.pullingDistance > 100) {
this.refresh()
}
}
},
// #ifndef APP-NVUE
onPullDownRefresh() {
this.refresh()
},
onReachBottom() {
this.loadMore()
}
// #endif
}
</script>
<style scoped>
/* #ifndef APP-NVUE */
view {
display: flex;
box-sizing: border-box;
flex-direction: column;
}
/* #endif */
.pages {
background-color: #FFFFFF;
}
.avatar {
width: 200rpx;
height: 200rpx;
margin-right: 10rpx;
}
.main {
justify-content: space-between;
flex: 1;
}
.title {
font-size: 16px;
}
.info {
flex-direction: row;
justify-content: space-between;
}
.author,
.last_modify_date {
font-size: 14px;
color: #999999;
}
.uni-search-box {
background-color: #FFFFFF;
position: sticky;
height: 50px;
top: 0;
left: 0;
/* #ifndef APP-PLUS */
z-index: 9;
/* #endif */
/* #ifdef MP-WEIXIN */
width: 580rpx;
/* #endif */
}
.cover-search-bar {
height: 50px;
position: relative;
top: -50px;
margin-bottom: -50px;
/* #ifndef APP-NVUE */
z-index: 999;
/* #endif */
}
</style>