171 lines
5.4 KiB
Vue
171 lines
5.4 KiB
Vue
<template>
|
||
<view class="content">
|
||
<block v-if="logsArr.length > 0">
|
||
<view class="While circle" v-for="(item, index) in logsArr" :key="index">
|
||
<view class="circle-user">
|
||
<image class="circle-user-head" :src="item.case.user.avatar ? item.case.user.avatar : '/static/imgs/default_myHead.png'" mode="aspectFill"></image>
|
||
<view class="circle-user-name">
|
||
<block v-if="item.case">{{ item.case.user.nickname }}</block>
|
||
<view class="circle-user-quantity">尿酸值{{ item.quantity }}</view>
|
||
</view>
|
||
</view>
|
||
<view class="circle-content">
|
||
{{ item.remark }}
|
||
</view>
|
||
<image v-if="item.cover" class="circle-picture-img" @click="openImg(item.cover)" :src="item.cover" mode="widthFix"></image>
|
||
<view class="circle-see">
|
||
发布时间：<text>{{ item.created_at }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="pagesLoding" v-if="lodingStats">
|
||
<block v-if="page.has_more">
|
||
<image class="pagesLodingIcon" src="/static/icons/refresh_loding.gif" mode="widthFix"></image>加载中...
|
||
</block>
|
||
<block v-else>
|
||
没有更多了~
|
||
</block>
|
||
</view>
|
||
</block>
|
||
<view class="pack-center pages-hint" v-else>
|
||
<image src="/static/imgs/coupon_null.png"></image>
|
||
<view>暂无数据</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
allLogs
|
||
} from '@/apis/interfaces/gout'
|
||
export default {
|
||
data() {
|
||
return {
|
||
logsArr : [] ,// 病友记列表
|
||
page : {}, //分页信息
|
||
lodingStats : false //加载状态
|
||
};
|
||
},
|
||
onShow() {
|
||
// 获取首页数据
|
||
this.logsInfo();
|
||
},
|
||
methods: {
|
||
// 首页数据
|
||
logsInfo(page) {
|
||
allLogs({
|
||
page : page || ''
|
||
}).then(res => {
|
||
let listArr = this.logsArr,
|
||
newData = []
|
||
if(page == 1 || page == undefined) listArr = []
|
||
newData = listArr.concat(res.data)
|
||
this.logsArr = newData
|
||
this.page = res.page
|
||
this.lodingStats= false
|
||
uni.stopPullDownRefresh()
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon: "none"
|
||
})
|
||
})
|
||
},
|
||
|
||
// 查看图片
|
||
openImg(img) {
|
||
uni.previewImage({
|
||
current: img,
|
||
urls:[img]
|
||
})
|
||
},
|
||
|
||
// 页面相关事件处理函数--监听用户下拉动作
|
||
onPullDownRefresh() {
|
||
// 商品列表数据
|
||
this.logsInfo();
|
||
},
|
||
|
||
// 上拉加载
|
||
onReachBottom(){
|
||
this.lodingStats = true
|
||
let pageNumber = this.page.current
|
||
if(this.page.has_more){
|
||
pageNumber++
|
||
// 商品列表数据
|
||
this.logsInfo(pageNumber);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.content{
|
||
overflow: hidden;
|
||
background: #f3f4f6;
|
||
padding: 20rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.While {
|
||
border-radius: 10rpx;
|
||
margin-bottom: 30rpx;
|
||
background-color: #FFFFFF;
|
||
padding:30rpx;
|
||
box-sizing: border-box;
|
||
box-shadow: 0 0 10rpx rgba($color: #000000, $alpha: .05);
|
||
}
|
||
|
||
.circle {
|
||
border-radius: 10rpx;
|
||
.circle-user {
|
||
position: relative;
|
||
.circle-user-head {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
border-radius: 50%;
|
||
}
|
||
.circle-user-name {
|
||
line-height: 60rpx;
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
padding-left: 80rpx;
|
||
box-sizing: border-box;
|
||
font-size: 28rpx;
|
||
display: flex;
|
||
.circle-user-quantity {
|
||
background-color: #a7affd;
|
||
color: #FFFFFF;
|
||
font-size: 24rpx;
|
||
padding: 0 10rpx;
|
||
border-radius: 60rpx;
|
||
height: 40rpx;
|
||
line-height: 40rpx;
|
||
margin: 10rpx 20rpx;
|
||
}
|
||
}
|
||
}
|
||
.circle-content {
|
||
margin: 20rpx 0;
|
||
font-size: 26rpx;
|
||
line-height: 44rpx;
|
||
}
|
||
|
||
.circle-picture-img{
|
||
width: 60%;
|
||
border-radius: 6rpx;
|
||
}
|
||
|
||
.circle-see {
|
||
font-size: 26rpx;
|
||
color: #919191;
|
||
margin-top: 20rpx;
|
||
text {
|
||
padding-right: 40rpx;
|
||
}
|
||
}
|
||
}
|
||
</style>
|