日志6月29日-课表界面和毕业照界面实现

日志6月29日-课表界面和毕业照界面实现

这两部分界面没有数据来源，但出于使得项目框架更加完善的目的，我也实现了相关的界面设计

课表界面
课表设计参考了网上比较成熟的界面设计
wxml代码，采用scroll-view布局。

<!--pages/courselist/courselist.wxml-->
<view class="top">
  <view wx:for="{{['一','二','三','四','五','六','日']}}" class="top-text">周{{item}}</view>
</view>
<scroll-view scroll-y="true" class="scroll">
  <view style="height:1200rpx;width:730rpx;display:flex;">
    <view style="background-color:#D2E6B3;color:#7cba23;">
      <view wx:for="{{[1,2,3,4,5,6,7,8,9,10,11,12]}}" class="left">
        {{item}}
      </view>
    </view>
    <view wx:for="{{[1,2,3,4,5,6,7,8,9,10,11,12]}}">
      <view style="width:750rpx;margin-top:{{(index+1)*100}}rpx;  position: absolute;border-bottom:1rpx solid {{index==3?'red':'lightgray'}};">
      </view>
    </view>

    <!--课表-->
    <view wx:for="{{wlist}}">
      <view class="flex-item kcb-item" bindtap="showCardView" data-statu="open" data-index="{{index}}" style="margin-left:{{(item.xqj-1)*100}}rpx;margin-top:{{(item.skjc-1)*100+5}}rpx;height:{{item.skcd*100-5}}rpx;background-color:{{colorArrays[index%9]}}">
        <view class="smalltext" >{{item.kcmc}}</view>
      </view>
    </view>
  </view>
</scroll-view>

毕业照界面
毕业照界面采用简单的瀑布流图片布局，通过从数据库获取图片连接并展示。
wxml布局文件

<!--pages/graduatePhoto/result.wxml-->
<view style="display:none">
  <image wx:for="{{images}}" wx:key="id" id="{{item.id}}" src="{{item.pic}}" bindload="onImageLoad"></image>
</view>
<scroll-view scroll-y="true" style="height:{{scrollH}}px" bindscrolltolower="loadImages">
  <view style="width:100%">
    <view class="img_item">
      <view wx:for="{{col1}}" wx:key="id">
        <image src="{{item.pic}}" style="width:100%;height:{{item.height}}px"></image>
      </view>
    </view>
    <view class="img_item">
      <view wx:for="{{col2}}" wx:key="id">
        <image src="{{item.pic}}" style="width:100%;height:{{item.height}}px"></image>
      </view>
    </view>
  </view>
</scroll-view>

js文件中主要功能代码

 onLoad: function () {
        wx.getSystemInfo({
            success: (res) => {
                let ww = res.windowWidth;
                let wh = res.windowHeight;
                let imgWidth = ww * 0.48;
                let scrollH = wh;

                this.setData({
                    scrollH: scrollH,
                    imgWidth: imgWidth
                });

                this.loadImages();
            }
        })
    },

    onImageLoad: function (e) {
        let imageId = e.currentTarget.id;
        let oImgW = e.detail.width;         //图片原始宽度
        let oImgH = e.detail.height;        //图片原始高度
        let imgWidth = this.data.imgWidth;  //图片设置的宽度
        let scale = imgWidth / oImgW;        //比例计算
        let imgHeight = oImgH * scale;      //自适应高度

        let images = this.data.images;
        let imageObj = null;

        for (let i = 0; i < images.length; i++) {
            let img = images[i];
            if (img.id === imageId) {
                imageObj = img;
                break;
            }
        }

        imageObj.height = imgHeight;

        let loadingCount = this.data.loadingCount - 1;
        let col1 = this.data.col1;
        let col2 = this.data.col2;

        if (col1H <= col2H) {
            col1H += imgHeight;
            col1.push(imageObj);
        } else {
            col2H += imgHeight;
            col2.push(imageObj);
        }

        let data = {
            loadingCount: loadingCount,
            col1: col1,
            col2: col2
        };

        if (!loadingCount) {
            data.images = [];
        }

        this.setData(data);
    },

利用瀑布流布局，利用从山大官网上爬下来的图片链接并进行毕业照demo展示，

效果展示：

工作小结

这两部分虽然没有从数据库获取的正式数据，但我都留了数据接口，后续如果小组获得相关课程信息，和图片信息。就可以直接导入前端界面逻辑。
对于毕业照界面，后续如何加上上传图片功能和图片关键字搜索功能就更加完善了。