uniapp 云开发微信小程序在前端分页加载数据,不需要使用云函数。
官方教程:https://uniapp.dcloud.io/uniCloud/cf-database
效果图
云端数据结构
源代码
<template>
<view>
<view class="box" v-for="(item,index) in orderData" :key="index">
<view class="head">
<view class="order-no">订单号:{{item.orderid}}</view>
<view class="order-no">{{item.status}}</view>
</view>
<view class="row" v-for="(item1,index1) in item.carData" :key="index1">
<view class="row-left">
<image class="row-img" :src="item1.imgUrl"></image>
<view class="row-name">{{item1.name}}</view>
</view>
<view class="row-right">
<view class="row-num"> x{{item1.num}}</view>
</view>
</view>
<view class="foot">
<view class="order-time">{{item.orderTime}}</view>
<view class="order-total">共{{item.totalNum}}件商品,合计:{{item.totalPrice}}</view>
</view>
<view class="time-text" >{{ item.djs&&item.status==='待支付' ? '支付时间剩余'+item.djs : '' }}</view>
<view class="btn" @click="againOrder" :data-item="item" :data-taptext="item.status==='待支付' ? '去支付':'再来一单'" >
{{ item.status==='待支付' ? '去支付':'再来一单' }}
</view>
</view>
</view>
</template>
<script>
import { countDownFun } from '../../../common/times.js'
export default {
data() {
return {
orderData: [],
page: 1,
hasMore: true,
openid: '',
timer: '' //用来清除定时器
}
},
onLoad() {
this.openid = uni.getStorageSync('openid')
},
onShow() {
//每次显示页面都刷新数据
this.orderData = []
this.page = 1
this.hasMore = true
this.getData() //调用函数
},
onHide(){
//清除定时器,避免性能损耗
clearInterval(this.timer)
},
// ***上拉触底事件***
onReachBottom: function() {
if (this.hasMore) {
this.getData() //调用函数
} else {
uni.showToast({
title: '没有更多数据了!',
icon: 'none'
})
}
},
methods: {
//***获取订单数据***
getData() {
uni.showLoading({
title: '加载中...'
})
//分页查询云数据
uniCloud.database().collection('orders')
.skip((this.page - 1) * 10) //跳过已经查询的记录数量
.limit(10) //每次请求10条记录
.where({openid: this.openid}) //只查询自己的订单
.orderBy('orderTime', 'desc') //按订单时间倒序进行排序
.get()
.then(res =>{
this.orderData.push(...res.result.data) //云端返回的数据追加到 orderData
this.page = this.page + 1 //页码加1
if (res.result.data.length < 10) { //如果云端返回的数组长度小于10,说明没有更多数据了
this.hasMore = false
} else {
this.hasMore = true
}
this.theTimer(this.orderData) //调用倒计时函数
})
.catch(err =>{
console.log('查询失败', err)
})
.finally(() =>{
//无论成功或失败都执行
uni.hideLoading()
})
},
//***再来一单***
againOrder(e) {
let taptext = e.currentTarget.dataset.taptext
let againData = e.currentTarget.dataset.item.carData
if (taptext==='再来一单'){
//将数据存储在本地缓存指定的 key 中
uni.setStorage({
key: 'againData',
data: againData
})
//跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
uni.switchTab({
url: '../class/class'
});
} else {
//跳转到支付页面
uni.navigateTo({
url: '../../second/pay/pay'
});
}
},
//***倒计时***
theTimer(dataArr) {
let timer = setInterval(() => {
//遍历数组
dataArr.forEach((item, index) => {
//关键点,强制更新数组属性值并渲染到视图层
this.$set(item, 'djs', countDownFun(item.endTime))
if(item.status==='待支付' && item.djs==='00分00秒'){
this.$set(item,'status','已取消')
//调用函数更新云数据
this.upStatus(item.orderid)
}
})
}, 1000)
this.timer = timer
},
//***更新云数据***
upStatus(orderid){
uniCloud.database().collection('orders')
.where({orderid: orderid}) //where与update的位置不能调换,否则报错
.update({status: '已取消'})
.then(res => {
console.log('更新成功', res)
})
.catch(err => {
console.log('更新失败', err)
})
}
}
}
</script>
<style>
page {
width: 100%;
height: 100%;
background-color: #efefef;
}
.box {
width: 91%;
/* height: 500rpx; */
/* margin: auto;*/ /*本元素水平居中*/
margin: 15rpx;
padding: 20rpx;
border-radius: 10rpx;
background-color: #ffffff;
}
.head {
display: flex;
justify-content: space-between;
height: 50rpx;
line-height: 50rpx;
border-bottom: solid #f4f4f4 1px;
}
.order-no {
font-size: 24rpx;
color: #868686;
}
.row {
display: flex;
margin: 20rpx 0rpx;
justify-content: space-between;
}
.row-left {
display: flex;
}
.row-img {
width: 100rpx;
height: 100rpx;
}
.row-name {
margin-top: 10%;
}
.row-num {
height: 100rpx;
line-height: 100rpx;
color: #868686;
font-size: 26rpx;
}
.foot {
display: flex;
justify-content: space-between; /*两端对齐*/
height: 70rpx;
line-height: 70rpx;
border-top: dashed #f4f4f4 1px;
}
.order-time {
font-size: 24rpx;
color: #868686;
}
.order-total {
font-size: 24rpx;
}
.time-text{
height: 40rpx;
line-height: 40rpx;
font-size: 26rpx;
color: #ff0000;
}
.btn {
width: 120rpx;
height: 40rpx;
line-height: 40rpx;
text-align: center;
font-size: 26rpx;
color: #A7D500;
border-radius: 50rpx;
border: solid #A7D500 1px;
position: relative; /*相对定位*/
left: 80%;
top: -34rpx;
/*相对定位,向上移动100rpx后,底部还保留着100rpx的占位空间,用margin-bottom来消除占位*/
margin-bottom: -15px;
}
</style>