<!--switchList使用定位布局-->
<view bindtap="switchList" class="list"></view>

<!--newAccount使用flex布局-->
<view class="newAccount" bindtap="createNewAccount">
    <view class="desc">旅行中的每一筆開(kāi)支都有獨(dú)特的意義！</view>
    <image src="{{}}"></image>
    <view class="title">創(chuàng)建一個(gè)新賬本</view>
</view>
復(fù)制代碼

<!--整體用flex + 百分比布局-->
<input type="text" class="accuntName" placeholder="旅行賬本名稱" bindinput="getInput" />
  
<van-panel title="選擇封面" class="panel">
    <van-row class="imageBox">
        <!--使用wx:for遍歷數(shù)據(jù)庫(kù)賬本圖片信息-->
        <van-col span="8" class="imgCol" bindtap="selectThis">
            <image class="select" src="{{}}"></image>
        </van-col>
        
        <van-col span="8">
            <view class="addBox" bindtap="useMore">更多封面</view>
        </van-col>
    </van-row>
</van-panel>

<button type="primary" bindtap="save">保存</button>
<button type="warn" bindtap="delete">刪除</button>
復(fù)制代碼

<view class="accountDesc" bindtap="viewDetail">
    <!--使用wx:for遍歷數(shù)據(jù)庫(kù)賬本信息-->
    <view class="accountName">
        <view>{{}}</view>
        <view class="accountTime">{{}}</view>
    </view>
    
    <!--絕對(duì)定位-->
    <image class="updateImg" catchtap="editAccount" src="{{}}"></image>
</view>
復(fù)制代碼

<!--switchList使用定位布局-->
<view bindtap="switchList" class="list"></view>

<view class="account__list-year">{{}}</view>
<view class="account__list-new account__list-public" bindtap="createNewAccount">
    <!--日期小圓點(diǎn)-->
    <view class="account__list-point"></view>
    <view class="account__list-time">{{}}</view>
    <image src="{{}}"></image>
    <view class="account__list-title">創(chuàng)建一個(gè)新賬本</view>
</view>

<!--使用wx:for遍歷數(shù)據(jù)庫(kù)賬本信息-->
<view class="account__list-item account__list-public" bindtap="viewDetail">
    <!--日期小圓點(diǎn)-->
    <view class="account__list-point"></view>
    <image src="{{}}" mode="aspectFill"></image>
    <view class="account__list-name">{{}}</view>
    <view class="account__list-time">{{}}</view>
    <image class="account__list-update" catchtap="editAccount" src="{{}}"></image>
 </view>

<!--日歷使用極點(diǎn)日歷的插件-->
<!--json中做配置-->
"usingComponents": {
    "calendar": "plugin://calendar/calendar"
}

<!--js改變樣式-->
days_style.push({
  month: 'current',
  day: new Date().getDate(),
  color: 'white',
  background: '#e0a58e'
})

<!--wxml中引用-->
<calendar weeks-type="cn" cell-size="50" next="{{true}}" prev="{{true}}"
    show-more-days="{{true}}" calendar-style="demo6-calendar"
    header-style="calendar-header"board-style="calendar-board" active-type="rounded" 
    lunar="true" header-style="header"calendar-style="calendar"days-color="{{days_style}}">
</calendar>

<!--頂欄日期及收支結(jié)構(gòu)-->
<view class="account__title">
    <text class="account__title-time">{{}}</text>
    <text class="account__title-spend">支出{{}}元 收入{{}}元</text>
</view>

<!--收支細(xì)節(jié)結(jié)構(gòu) 使用flex彈性布局-->
<view class="account__detail">
    <image src="{{}}"></image>
    <view class="account__detail-name">{{}}</view>
    <view class="account__detail-money">{{}}</view>
</view>

<!--使用vant框架的van-tabs組件-->
<!--并封裝自定義組件復(fù)用收支頁(yè)，自定義組件后面會(huì)詳細(xì)說(shuō)明-->
<van-tabs active="{{ active }}" bind:change="onChange">
  <van-tab title="支出">
    <spendDetail detail="{{detail}}" accountKey="{{accountKey}}"></spendDetail>
  </van-tab>
  <van-tab title="收入">
    <spendDetail detail="{{income}}" accountKey="{{accountKey}}"></spendDetail>
  </van-tab>
</van-tabs>
復(fù)制代碼

cover_photos 賬本封面表  用于存儲(chǔ)創(chuàng)建賬本時(shí)需要的封面信息
    - _id
    - _openid
    - cover_index 封面索引
    - cover_url   封面url
    - isSelected  封面是否選中
復(fù)制代碼

accounts 賬本表   用于存儲(chǔ)用戶創(chuàng)建的賬本
    - _id
    - _openid
    - accountKey  賬本唯一標(biāo)識(shí)
    - coverUrl    賬本封面
    - i           賬本索引
    - inputValue  賬本名字
    - now         賬本創(chuàng)建時(shí)間
    - spend       賬本總花費(fèi)
復(fù)制代碼

account_detail 支出類型表   用于存儲(chǔ)消費(fèi)類型
    - _id
    - _openid
    - detail       類型細(xì)節(jié)
    - pic_index    消費(fèi)類型索引
    - pic_url      未點(diǎn)擊時(shí)的圖片
    - pic_url_act  點(diǎn)擊后的圖片
    - type         消費(fèi)類型
復(fù)制代碼

account_income 收入類型表   用于存儲(chǔ)收入類型
    - _id
    - _openid
    - pic_index    收入類型索引
    - pic_url      未點(diǎn)擊時(shí)的圖片
    - pic_url_act  點(diǎn)擊后的圖片
    - type         收入類型
復(fù)制代碼

spend_items   消費(fèi)明細(xì)表
    - _id
    - _openid
    - accountKey   賬本唯一標(biāo)識(shí)
    - address      消費(fèi)地點(diǎn)
    - desc         消費(fèi)描述
    - fullDate     消費(fèi)時(shí)間
    - money        消費(fèi)金額
    - pic_type     消費(fèi)類型
    - pic_url      消費(fèi)類型圖片
復(fù)制代碼

// getTime  獲取當(dāng)前時(shí)間并格式化為 yyyy-mm-dd

// 云函數(shù)入口文件
const cloud = require('wx-server-sdk')

// 初始化云函數(shù)
cloud.init()

// 云函數(shù)入口函數(shù)
exports.main = async (event, context) => {
  var date = new Date()
  var seperator1 = "-"
  var year = date.getFullYear()
  var month = date.getMonth() + 1
  var strDate = date.getDate()
  if (month >= 1 && month <= 9) {
    month = "0" + month
  }
  if (strDate >= 0 && strDate <= 9) {
    strDate = "0" + strDate
  }
  // 格式化當(dāng)前時(shí)間
  var currentdate = year + seperator1 + month + seperator1 + strDate
  return currentdate
}
復(fù)制代碼

// deleteItems  批量刪除，云數(shù)據(jù)庫(kù)的批量刪除只允許在云函數(shù)中執(zhí)行

// 云函數(shù)入口文件
const cloud = require('wx-server-sdk')

// 初始化云函數(shù)
cloud.init()

// 連接云數(shù)據(jù)庫(kù)
const db = cloud.database()
const _ = db.command


// 云函數(shù)入口函數(shù)
exports.main = async (event, context) => {
  try {
    return await db.collection('spend_items')
      .where({
        accountKey: event.accountKey
      })
      .remove()
  } catch (e) {
    console.error(e)
  }
}

// 頁(yè)面數(shù)據(jù)設(shè)計(jì), 在wxml中使用{{}}符號(hào)引用數(shù)據(jù)，數(shù)據(jù)就動(dòng)態(tài)顯示到了頁(yè)面上
data: {
    isList: false, // 轉(zhuǎn)換頁(yè)面風(fēng)格的標(biāo)識(shí) true為豎向風(fēng)格 false為橫向風(fēng)格
    accounts: [],  // 存儲(chǔ)查詢的賬本數(shù)據(jù)
    now: null,     // 存儲(chǔ)當(dāng)日時(shí)間
    year: null     // 存儲(chǔ)年份
}

 // 轉(zhuǎn)換顯示風(fēng)格
switchList() {
    // 設(shè)置頁(yè)面風(fēng)格樣式
    let isList = !this.data.isList
    this.setData({
      isList
    })
    wx.setStorage({
      key: "isList",
      data: isList
    })
}

// 獲取頁(yè)面風(fēng)格轉(zhuǎn)換標(biāo)識(shí)
var isList = wx.getStorageSync('isList')
    
// 查詢賬本
db.collection('accounts')
  .get({
    success: res => {
      this.setData({
        accounts: res.data.reverse(),  // 反轉(zhuǎn)數(shù)組，優(yōu)先顯示創(chuàng)建早的賬本
        isList
      })
      wx.hideLoading()
    }
  })

// 調(diào)用云函數(shù)接口 獲取當(dāng)前日期
wx.cloud.callFunction({
    // 云函數(shù)接口名就是創(chuàng)建的云函數(shù)名字，這里是'getTime'
    name: 'getTime',
    success: (res) => {
    let year = res.result.split('-')[0]
    this.setData({
      now: res.result,
      year
    })
    },
    fail: console.error
})

// 封裝spendDetail組件
// 注冊(cè)組件
properties: {
    detail: {
      type: Object
    },
    accountKey: {
      type: Number
    },
    isSpend: {
      type: Boolean
    }
}

// 引用組件
<van-tab title="支出">
    <spendDetail detail="{{detail}}" accountKey="{{accountKey}}" isSpend="{{isSpend}}"></spendDetail>
  </van-tab>
  <van-tab title="收入">
    <spendDetail detail="{{income}}" accountKey="{{accountKey}}" isSpend="{{isSpend}}"></spendDetail>
</van-tab>

// js
data: {
    address: '',
    money: 0,
    desc: '',
    selectPicIndex: 0,
    selectIndex: 0
}
// 選擇消費(fèi)類別
selectSpend(e) {
  let { index } = e.currentTarget.dataset
  let { selectPicIndex } = this.data
  selectPicIndex = index
  this.setData({
    selectPicIndex
  })
},

// 選擇消費(fèi)類別中的細(xì)節(jié)
selectSpendDetail(e) {
  let { index } = e.currentTarget.dataset
  let { selectIndex } = this.data
  selectIndex = index
  this.setData({
    selectIndex
  })
}

// wxml
// 消費(fèi)類型
<view class="expense">
  <block wx:for="{{detail}}" wx:key="index">
    <view class="expense__type" bindtap="selectSpend" data-index="{{index}}">
      <block wx:if="{{selectPicIndex == item.pic_index}}">
        <view class="expense__type-icon" style="background-color: #e64343">
          <image src="{{item.pic_url_act}}"></image>
        </view>
      </block>
      <block wx:else>
        <view class="expense__type-icon">
          <image src="{{item.pic_url}}"></image>
        </view>
      </block>
      <view class="expense__type-name">{{item.type}}</view>
    </view>
  </block>
</view>

// 消費(fèi)子類型
<view class="detail">
  <block wx:for="{{detail[selectPicIndex].detail}}" wx:key="index">
    <view class="detail__type" bindtap="selectSpendDetail" data-index="{{index}}">
      <image class="detail__type-icon" src="{{item.detail_url}}"></image>
      <block wx:if="{{selectIndex == item.detail_index}}">
        <view class="detail__type-name" style="color: #f86319; border-bottom: 1rpx solid #f86319;">
          {{item.detail_type}}
        </view>
      </block>
      <block wx:else>
        <view class="detail__type-name" style="border-bottom: 1rpx solid #e4e2e2;">
          {{item.detail_type}}
        </view>
      </block>
    </view>
  </block>
</view>

// 通過(guò)時(shí)間分類算法  {} => [ [{時(shí)間1}], [{時(shí)間2}], [{時(shí)間3}] ]
arr.forEach(item => {
  if (!_this.isExist(item.fullDate, dateArr)) {
    dateArr.push([item])
  } else {
    dateArr.forEach(res => {
      if (res[0].fullDate == item.fullDate) {
        res.push(item)
      }
    })
  }
})

// 使用map 方法構(gòu)造 [{}, {}, {}, ...] 類型數(shù)組
dateArr = dateArr.map((item) => {
  let spend = 0
  let income = 0
  item.forEach(res => {
    if (res.money > 0) {
      spend += res.money
    } else {
      income += (-res.money)
    }
  })
  return {
    item,
    spend,
    income
  }
})

// 判斷自身是否存在數(shù)組中
isExist(item, arr) {
    for (let i = 0; i < arr.length; i++) {
      if (item == arr[i][0].fullDate)
        return true
    }
    return false
  }