编辑页增加缩略一览功能

CHANGELOG.md

@@ -2,3 +2,7 @@
 
 * 更新开发者工具至`v0.10.101100`
 * 修改`new`页的数据绑定方式 & 修改多行文本框输入时的bug
+
+# 2016-10-13
+
+* 完善日志编辑页

pages/new/new.js

@@ -2,16 +2,22 @@
 // TODO 并不是所有非中文字符宽度都为中文字符宽度一半，需特殊处理
 // TODO 由于文本框聚焦存在bug，故编辑模式待实现
 
-const input = require('../../utils/input.js');
-const config = require('../../config.js');
-const geo = require('../../services/geo.js');
+const input = require('../../utils/input');
+const config = require('../../config');
+const geo = require('../../services/geo');
+const util = require('../../utils/util');
 
 const RESOLUTION = 750;  // 微信规定屏幕宽度为750rpx
 const MARGIN = 10;  // 写字面板左右margin
 const ROW_CHARS = Math.floor((RESOLUTION - 2 * MARGIN) / config.input.charWidth);
 const MAX_CHAR = 1000;  // 最多输1000字符
 
+// 内容布局
+const layoutColumnSize = 3;
+
+// 日记内容类型
 const TEXT = 'TEXT';
+const IMAGE = 'IMAGE'
 
 const mediaActionSheetItems = ['拍照', '选择照片', '选择视频'];
 const mediaActionSheetBinds = ['chooseImage', 'chooseImage', 'chooseImage']
@@ -25,6 +31,9 @@ Page({
       list: [],
     },
 
+    // 日记内容布局列表（2x2矩阵）
+    layoutList: [],
+
     // 是否显示loading
     showLoading: false,
 
@@ -59,6 +68,16 @@ Page({
     showTab: true,
   },
 
+  // 显示底部tab
+  showTab() {
+    this.setData({showTab: true});
+  },
+
+  // 隐藏底部tab
+  hideTab() {
+    this.setData({showTab: false});
+  },
+
   // 显示loading提示
   showLoading(loadingMessage) {
     this.setData({showLoading: true, loadingMessage});
@@ -74,6 +93,12 @@ Page({
     this.getPoi();
   },
 
+  // 设置日记数据
+  setDiary(diary) {
+    let layout = util.listToMatrix(diary.list, layoutColumnSize);
+    this.setData({diary: diary, layoutList: layout});
+  },
+
   // 页面初始化
   onLoad: function(options) {
     if (options) {
@@ -119,7 +144,7 @@ Page({
 
     if (text) {
       diary.list.push(this.makeContent(TEXT, text, ''));
-      this.setData({diary: diary});
+      this.setDiary(diary);
     }
 
     this.inputCancel();
@@ -224,6 +249,8 @@ Page({
 
   // 从相册选择照片或拍摄照片
   chooseImage() {
+    let that = this;
+
     wx.chooseImage({
       count: 9,  // 最多选9张
       sizeType: ['origin', 'compressed'],
@@ -233,7 +260,16 @@ Page({
         this.setData({mediaActionSheetHidden: true});
         this.showLoading('图片处理中...');
 
-        console.log(res);
+        console.log('图片：', res);
+        // TODO 图片上传至服务器
+        let diary = this.data.diary;
+        res.tempFilePaths.forEach((element, index, array) => {
+          diary.list.push(that.makeContent(IMAGE, element, ''))
+        });
+
+        that.setDiary(diary);
+        that.hideLoading();
+        that.showTab();
       }
     })
   },
@@ -266,6 +302,6 @@ Page({
       content: content,
       description: description,
       poi: this.data.poi,
-    }
+    };
   }
 })

pages/new/new.wxml

@@ -1,8 +1,22 @@
 <!--new.wxml-->
 
 <template name="common">
-  <view class="common-container">
-  </view>
+  <scroll-view class="container" scroll-y="true">
+    <view class="common-container">
+      <view class="item-group" wx:for="{{layoutList}}" wx:for-item="group">
+        <block wx:for="{{group}}" wx:for-item="item">
+          <block wx:if="{{item.type == 'TEXT'}}">
+            <view class="album-item content-text">
+              <view>{{item.content}}</view>
+            </view>
+          </block>
+          <block wx:elif="{{item.type == 'IMAGE'}}">
+            <image src="{{item.content}}" class="album-item" mode="aspectFill"></image>
+          </block>
+        </block>
+      </view>
+    </view>
+  </scroll-view>
 
   <view class="tabbar" style="display:{{showTab ? 'flex' : 'none'}};">
     <view class="item" bindtap="inputTouch">
@@ -44,7 +58,7 @@
 
 <view style="width:100%;height:100%">
   <block wx:if="{{showMode == 'common'}}">
-    <template is="{{showMode}}" data="{{showTab: showTab, mediaActionSheetHidden: mediaActionSheetHidden, mediaActionSheetItems: mediaActionSheetItems, mediaActionSheetBinds: mediaActionSheetBinds}}"></template>
+    <template is="{{showMode}}" data="{{showTab: showTab, mediaActionSheetHidden: mediaActionSheetHidden, mediaActionSheetItems: mediaActionSheetItems, mediaActionSheetBinds: mediaActionSheetBinds, layoutList: layoutList}}"></template>
   </block>
   <block wx:if="{{showMode == 'inputText'}}">
     <template is="{{showMode}}" data="{{inputStatus}}"></template>

pages/new/new.wxss

@@ -1,8 +1,37 @@
 /** new.wxss **/
 
+.container {
+  height: 91%;
+}
+
 .common-container {
-  width: 100%;
-  height: 92%;
+  margin: 0.1rem;
+}
+
+.item-group {
+  display: flex;
+  align-items: center;
+}
+
+.album-item {
+  flex-direction: column;
+  margin: 0.1rem;
+  background: white;
+  width: 6.4rem;
+  height: 6.4rem;
+}
+
+.content-text{
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
+.content-text view {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 10px;
+  line-height: 15px;
 }
 
 .tabbar {

utils/util.js

@@ -18,6 +18,23 @@ function formatNumber(n) {
   return n[1] ? n : '0' + n
 }
 
+// 将一维数组转为二维数组
+function listToMatrix(list, elementPerSubArray) {
+  let matrix = [], i, k;
+
+  for (i = 0, k = -1; i < list.length; i += 1) {
+    if (i % elementPerSubArray === 0) {
+      k += 1;
+      matrix[k] = [];
+    }
+
+    matrix[k].push(list[i]);
+  }
+
+  return matrix;
+}
+
 module.exports = {
-  formatTime: formatTime
+  formatTime: formatTime,
+  listToMatrix: listToMatrix,
 }