初始化项目

pages/circle/index.vue

@@ -0,0 +1,170 @@
+<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>