膳逸前端开发--小程序开发日记【三】

提示：本篇文章为学校项目实训的记录，所以可能会写的没头没尾的，不具有实际指导意义，因为是小组共同开发，所以不是自己负责的部分会在别的小组成员博客里。

---

前言

上次说到完成了我的饭友的二级页面，现在完成饭友主页的显示。

---

一、我的饭友主页

我的饭友主页与自己的主页较为类似，在此基础上去掉了我的饭友，打卡，分享这些功能。

二、效果详述

1.我的饭友主页详述

效果图如下

前端template代码如下：

		
<template>
    <view>
        <!-- 顶部头像-干饭日记显示区域 -->
        <view class="top-container">
            <u-avatar :src="followAvatar || ''" shape="square" size="52"></u-avatar>
            <view class="info">
                <view v-if="flag == 'login'">
                    <text class="username">{{ followName }} 的干饭日记</text>
                    <u-row>
                        <u-col><text class="phone">已经打卡 {{ checkInDays }} 天</text></u-col>
                    </u-row>
                </view>
            </view>
        </view>
        <!-- 我的饭友 -->
        <view class="u-page">
            <u-list @scrolltolower="scrolltolower">
                <u-list-item v-for="(item, index) in list" :key="index">
                    <view class="publicity-container">
                        <view>
                            <text class="dairyDate">{{ formatTime(item.time) }}</text>
                        </view>
                        <view>
                            <text class="dairyText">{{ item.text }}</text>
                        </view>
                        <!-- 这里显示图片 -->
                        <view class="image-container">
                            <image v-for="(image, imgIndex) in splitImages(item.images)" :key="imgIndex" class="showPicture" :src="image" mode="widthFix"></image>
                        </view>
                        <view style="margin: 20rpx 5rpx 20rpx 5rpx">
                            <u-line color="#717171"></u-line>
                        </view>
                        <view>
                            <text>智能分析</text>
                        </view>
                        <view>
                            <view class="container">
                                <view class="left-column">
                                    <image src="../../static/picture/u274.png" mode="aspectFill" class="left-image"></image>
                                </view>
                                <view class="right-column">
                                    <scroll-view scroll-y enable-flex style="height: 100%;">
                                        <view class="table">
                                            <view class="row">
                                                <text class="cell">行1 列1</text>
                                                <text class="cell">行1 列2</text>
                                            </view>
                                            <view class="row">
                                                <text class="cell">行2 列1</text>
                                                <text class="cell">行2 列2</text>
                                            </view>
                                            <!-- 其他行类似 -->
                                        </view>
                                    </scroll-view>
                                </view>
                            </view>
                        </view>
                    </view>
                </u-list-item>
            </u-list>
        </view>
    </view>
</template>

---

总结

这次开发总体上复用了之前的代码，但是做了一些小的改动。