172 lines
3.7 KiB
Vue
172 lines
3.7 KiB
Vue
|
<template>
|
|||
|
<view class="" style="width: 100%;">
|
|||
|
<u-card>
|
|||
|
<view class="" slot="body">
|
|||
|
<view class="u-body-item u-border-bottom u-col-between u-p-t-0" v-for="(item,index) in list"
|
|||
|
:key="index">
|
|||
|
<view class="card_head">
|
|||
|
<view class="u-flex">
|
|||
|
<view class="username">
|
|||
|
匿名
|
|||
|
</view>
|
|||
|
<u-rate :count="count" size="28" gutter="6" :disabled="true" v-model="item.score"></u-rate>
|
|||
|
</view>
|
|||
|
|
|||
|
<view class="u-flex u-row-between">
|
|||
|
<u-icon name="clock" color="#82848a" size="32"></u-icon>
|
|||
|
<view class="time">
|
|||
|
{{item.createTime}}
|
|||
|
</view>
|
|||
|
</view>
|
|||
|
</view>
|
|||
|
<view class=" content_text ">{{item.content}}</view>
|
|||
|
</view>
|
|||
|
</view>
|
|||
|
<view class="" slot="foot"><u-icon name="chat-fill" size="34" color="" :label="totalPage + '条评论'"></u-icon>
|
|||
|
</view>
|
|||
|
</u-card>
|
|||
|
<view v-if="isLoadMore">
|
|||
|
<uni-load-more iconType="circle" :status="loadStatus"></uni-load-more>
|
|||
|
</view>
|
|||
|
</view>
|
|||
|
</template>
|
|||
|
|
|||
|
<script>
|
|||
|
export default {
|
|||
|
data() {
|
|||
|
return {
|
|||
|
count: 5,
|
|||
|
page: 1, // 当前页数
|
|||
|
limit: 10, // 每页数据量
|
|||
|
totalPage: null, // 总共有多少页数据
|
|||
|
list: [], // 存储数据的数组
|
|||
|
loadStatus: 'noMore', //加载样式:more-加载前样式,loading-加载中样式,noMore没有数据样式
|
|||
|
isLoadMore: false, //是否加载中
|
|||
|
artificerId: '',
|
|||
|
|
|||
|
}
|
|||
|
},
|
|||
|
onLoad(e) {
|
|||
|
console.log(e)
|
|||
|
this.artificerId = e.artificerId
|
|||
|
this.getDet()
|
|||
|
},
|
|||
|
|
|||
|
// 上拉触底函数
|
|||
|
onReachBottom() {
|
|||
|
if (!this.isLoadMore) {
|
|||
|
this.isLoadMore = true
|
|||
|
this.page++ //下拉一次页数+1
|
|||
|
this.getDet()
|
|||
|
}
|
|||
|
},
|
|||
|
//下拉刷新
|
|||
|
onPullDownRefresh() {
|
|||
|
//重新触发获取数据方法,刷新接口
|
|||
|
this.list = []
|
|||
|
this.page = 1 //重置页码,每次刷新后页码均为第一页
|
|||
|
this.getDet()
|
|||
|
//结束刷新
|
|||
|
uni.stopPullDownRefresh()
|
|||
|
},
|
|||
|
|
|||
|
methods: {
|
|||
|
// 详情
|
|||
|
getDet() {
|
|||
|
uni.showLoading({
|
|||
|
title: '加载中...'
|
|||
|
});
|
|||
|
this.$Request.get("/app/takingComment/selectTakingCommentByArtificerId", {
|
|||
|
artificerId: this.artificerId,
|
|||
|
page: this.page,
|
|||
|
limit: this.limit,
|
|||
|
}).then(res => {
|
|||
|
uni.hideLoading();
|
|||
|
if (res.code == 0) {
|
|||
|
const data = res.data.records;
|
|||
|
this.totalPage = res.data.total;
|
|||
|
if (data.length != 0) {
|
|||
|
//首次获取10条数据 后续将返回的数据拼接到之前已获取到的数组后
|
|||
|
this.list = this.list.concat(data)
|
|||
|
//判断接口返回数据量小于请求数据量,则表示此为最后一页
|
|||
|
if (data.length < this.limit) {
|
|||
|
this.isLoadMore = true
|
|||
|
this.loadStatus = 'noMore'
|
|||
|
} else {
|
|||
|
this.isLoadMore = false
|
|||
|
}
|
|||
|
} else {
|
|||
|
this.isLoadMore = true
|
|||
|
this.loadStatus = 'noMore'
|
|||
|
}
|
|||
|
|
|||
|
} else {
|
|||
|
//提示
|
|||
|
uni.showToast({
|
|||
|
title: res.msg,
|
|||
|
icon: 'none'
|
|||
|
})
|
|||
|
}
|
|||
|
});
|
|||
|
},
|
|||
|
}
|
|||
|
}
|
|||
|
</script>
|
|||
|
|
|||
|
<style lang="scss">
|
|||
|
/deep/ .u-card__head {
|
|||
|
display: none;
|
|||
|
}
|
|||
|
|
|||
|
/deep/.u-card__body {
|
|||
|
padding: 0 30rpx !important;
|
|||
|
}
|
|||
|
|
|||
|
/deep/.u-body-item {
|
|||
|
padding: 60rpx 10rpx !important;
|
|||
|
}
|
|||
|
|
|||
|
.u-card-wrap {
|
|||
|
background-color: $u-bg-color;
|
|||
|
padding: 1px;
|
|||
|
}
|
|||
|
|
|||
|
|
|||
|
.card_head {
|
|||
|
width: 100%;
|
|||
|
height: 50rpx;
|
|||
|
display: flex;
|
|||
|
justify-content: space-between;
|
|||
|
margin-bottom: 20rpx;
|
|||
|
|
|||
|
.tit {
|
|||
|
font-size: 30rpx;
|
|||
|
font-weight: bold;
|
|||
|
color: #303133;
|
|||
|
line-height: 50rpx;
|
|||
|
}
|
|||
|
|
|||
|
.time {
|
|||
|
font-size: 28rpx;
|
|||
|
color: #82848a;
|
|||
|
line-height: 50rpx;
|
|||
|
margin-left: 6rpx;
|
|||
|
}
|
|||
|
|
|||
|
}
|
|||
|
|
|||
|
.content_text {
|
|||
|
font-size: 28rpx;
|
|||
|
line-height: 42rpx;
|
|||
|
color: #606266;
|
|||
|
|
|||
|
}
|
|||
|
|
|||
|
.username {
|
|||
|
font-size: 30rpx;
|
|||
|
font-weight: bold;
|
|||
|
line-height: 50rpx;
|
|||
|
color: #606266;
|
|||
|
margin-right: 10rpx;
|
|||
|
}
|
|||
|
</style>
|