1、数据更新问题:unicloud-db 点赞后,有什么办法重新请求数据?
我用来this.$refs.udb.refresh() 和 this.$refs.udb.reset()都觉得不对劲啊|
5***@qq.com
- 发布:2022-01-06 09:39
- 更新:2022-01-06 10:18
- 阅读:818
5***@qq.com (作者)
有么有比较优雅的更新方式呢?
- 如果是通过refresh,原来都数据没有了
- 通过reset 则没反应
比如点赞/评论,实际上是要重新请求数据的,否则不能同步最新数据(如:几百个人同时点赞)
我知道如果通过云函数,是可以自由地调用了。
<template>
<view>
<!-- 头部 -->
<view class="header">
<view class="grid">
<view v-for="(item,idx) in gridData" class="item">
<uni-icons type="contact"></uni-icons>
<text>{{item.text}}</text>
</view>
</view>
</view>
<!-- 列表 -->
<view class="list-tab">
<text :class="[{active:tabIndex==0}]">推荐</text>
<text>关注</text>
<text>精华</text>
<text>的你来答</text>
</view>
<unicloud-db ref="udb" orderby="create_date desc" v-slot:default="{data, pagination, loading, hasMore, error}"
collection="content,content-commonts,content-like,uni-id-users"
field="user_id{avatar_file,nickname},content,excerpt,create_date,_id as content_id">
<view v-if="error">{{error.message}}</view>
<view v-else-if="data">
<view class="list">
<view class="item" v-for="(item,idx) in data" :key="idx">
<view class="top">
<view class="inner">
<!-- <image :src="item.user_id[0].avatar_file.url+item.user_id[0].avatar_file.extname"
></image> -->
<image src="../../static/logo.png" mode=""></image>
<view class="txt">
<view>{{item.user_id[0].nickname}}</view>
<text>
<uni-dateformat :threshold="[60000,item.create_date]"
:date="item.create_date" />
</text>
</view>
</view>
<uni-tag text="精华" type="primary"></uni-tag>
</view>
<view class="content" v-html="item.content">
</view>
<view class="c-tool">
<view @click="like(item)">
<uni-icons size="24" type="hand-up"></uni-icons>
<text>{{item['content_id']['content-like'].length==0?'':item['content_id']['content-like'].length}}</text>
</view>
<view @click="open(item)">
<uni-icons size="24" type="chatbubble"></uni-icons>
<text>{{item['content_id']['content-commonts'].length}}</text>
</view>
<view>
<uni-icons size="24" type="redo"></uni-icons>
</view>
</view>
<view class="c-list">
<view class="t-list" v-for="(el,idx) in item['content_id']['content-like']">
<text>王明</text>
<text>等人觉得很赞</text>
</view>
</view>
<view class="r-list">
<view class="item" v-for="(item2,index) in item['content_id']['content-commonts']">
<view><text>无双:</text><text v-html="item2.comment_content"></text></view>
<!-- <view><text>小王</text><text class="hf">回复</text><text>matchless</text>我来评论一下</view> -->
</view>
</view>
</view>
</view>
</view>
<uni-load-more :status="loading?'loading':(hasMore ? 'more' : 'noMore')"></uni-load-more>
</unicloud-db>
<uni-popup class="uni-popup" ref="popup" type="top" background-color="#fff">
<view class="txt">
<view>评论match</view>
<button size="mini" type="primary" @click="send">send</button>
</view>
<editor id="editor" class="ql-container" placeholder="开始输入..." showImgSize showImgToolbar showImgResize
@statuschange="onStatusChange" :read-only="readOnly" @ready="onEditorReady"></editor>
</uni-popup>
<uni-fab @fabClick="fabClick" :horizontal="horizontal" :vertical="vertical"></uni-fab>
</view>
</template>
<script>
export default {
data() {
return {
selectItem: {},
visible: true,
readOnly: false,
loadMore: {
contentdown: '',
contentrefresh: '',
contentnomore: ''
},
tabIndex: 0,
gridData: [{
icon: '',
text: '热榜'
}, {
icon: '',
text: '自测'
}, {
icon: '',
text: '找公司'
}, {
icon: '',
text: '求职锦囊'
}],
horizontal: 'right',
vertical: 'bottom',
}
},
onPullDownRefresh() {
this.$refs.udb.loadData({
clear: true
}, () => {
uni.stopPullDownRefresh()
})
},
onReachBottom() {
this.$refs.udb.loadMore()
},
methods: {
like(item) {
console.log(item)
let user = uni.getStorageSync('userInfo')
let _index = (item.content_id['content-like']).find(el => el.user_id == user._id)
let action = ''
let _id = ''
if(_index==undefined){
action = 'add'
}else{
action = 'del'
_id = _index._id
}
uniCloud.callFunction({
name: 'content-like',
data: {
action,
user_id: user._id,
content_id: item._id._value,
like_status: true,
like_time: new Date().getTime(),
_id
},
success: (res) => {
this.$refs.udb.refresh()
}
})
},
send(item) {
let user = uni.getStorageSync('userInfo')
this.editorCtx.getContents({
success: (res) => {
if(res.text=='\n')return
uniCloud.callFunction({
name: 'content-commont',
data: {
comment_content: res.html,
action: 'create',
user,
content_id: this.selectItem._id._value,
user_id: user._id,
comment_type: 0,
reply_user_id: this.selectItem.user_id[0]._id,
user_nickname: this.selectItem.user_id[0].nickname,
reply_comment_id: '',
comment_date: user.comment_date,
},
success: () => {
this.$refs.udb.refresh()
}
})
}
})
},
readOnlyChange() {
this.readOnly = !this.readOnly;
},
onEditorReady() {
uni.createSelectorQuery()
.select('#editor')
.context(res => {
this.editorCtx = res.context;
})
.exec();
},
onStatusChange(e) {
const formats = e.detail;
console.log(formats);
this.formats = formats;
},
open(item) {
// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ,type 属性将失效 ,仅支持 ['top','left','bottom','right','center']
this.$refs.popup.open('bottom')
this.selectItem = item
},
close() {
this.$refs.popup.close()
this.selectItem = {}
},
fabClick() {
uni.navigateTo({
url: '/pages/home/editor'
})
}
}
}
</script>
<style scoped lang="scss">
.header {
background-color: #FFFFFF;
padding: 20rpx 0;
}
.grid {
display: grid;
grid-auto-flow: column;
.item {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
font-size: 28rpx;
}
}
.list-tab {
background-color: #FFFFFF;
padding: 10rpx 20rpx;
margin-top: 20rpx;
text {
padding: 20rpx;
color: $black-color-3;
font-size: 24rpx;
&.active {
color: $black-color-1;
font-size: 32rpx;
}
}
}
.list {
background: #fff;
&>.item {
border-bottom: 1rpx solid $bg-grey;
}
.top {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20rpx;
.inner {
align-items: center;
display: flex;
.txt {
padding-left: 10rpx;
view {
color: $primary-color;
}
text {
color: $black-color-4;
}
}
}
}
image {
max-width: 60rpx;
max-height: 60rpx;
}
.content {
color: $black-color-2;
font-size: 28rpx;
padding: 0 20rpx;
}
.c-tool {
display: flex;
view {
flex: 1;
display: flex;
align-items: center;
&:nth-child(1) {
.uni-icons {
margin-left: 20rpx;
}
}
&:nth-child(2) {
display: flex;
justify-content: center;
}
&:nth-last-child(1) {
display: flex;
justify-content: end;
.uni-icons {
padding-right: 20rpx;
}
}
}
}
.c-list {
display: flex;
align-items: flex-start;
padding: 20rpx;
.t-list {
text {
font-size: 24rpx;
padding: 10rpx;
color: $uni-color-primary;
}
}
}
.r-list {
font-size: 24rpx;
padding: 20rpx;
.item {
view {
display: flex;
margin: 5rpx 0;
color: $black-color-2;
text {
color: $primary-color;
&:nth-last-child(1) {
color: $black-color-1;
}
&.hf {
padding: 0 20rpx;
color: $black-color-1;
}
}
}
}
}
}
.uni-popup {
.txt {
line-height: 50rpx;
padding: 20rpx;
border-bottom: 1rpx solid $bg-grey;
display: flex;
justify-content: space-between;
align-items: center;
uni-button {
margin: 0;
}
}
uni-editor {
padding: 20rpx 20rpx;
}
}
</style>
<style lang="scss">
page {
background: $bg-grey;
}
</style>