黄尔冬 / net_iou

<template>
  <v-layout column justify-center align-center>
    <v-flex>
      <InfoCard :info="infoCard" @refresh="getData" :loading="reloading"/>
      <!-- <div id="tabBlock">
        <div id="isBorrowing" :class="tabChoose === 'borrow' ? 'isChoosing' : ''" @click="tabChange('borrow')" data-step='2' data-intro='点击“正在借款”，查看待确认的借条' data-tooltipClass="guideHint">正在借款</div>
        <span id="tabDivider"></span>
        <div id="isLending" :class="tabChoose === 'credit' ? 'isChoosing' : ''" @click="tabChange('credit')">正在出借</div>
      </div>
      <HistoryList :list='displayList' jumpPrefix='borrowContent' /> -->
      <div class="listNumHint">本月有 {{infoCard.thisMonth || 0}} 笔借条需要处理</div>
      <div class="btnBlock">
        <v-btn depressed id="createButton"  @click="fillIOU">与您的好友生成一张电子借条</v-btn>
        <div class="halfBtns">
          <v-btn depressed class="ConfirmButton" @click="goToWaitForDeal('credit')"><span>{{infoCard.creditListCountResult || 0}}</span>笔待出借</v-btn>
          <v-btn depressed class="ConfirmButton" @click="goToWaitForDeal('borrow')"><span>{{infoCard.borrowListCountResult || 0}}</span>笔待借入</v-btn>
        </div>
       
      </div>
    </v-flex>
    <v-bottom-nav id="bottomNav" color="toolbar-grey" >
      <div class="bottomNavBtn" @click="fillIOU">
        <svg class='material-icons icon iconfont' width="1.6rem" height="1.6rem"  version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 566.9 566.9" style="enable-background:new 0 0 566.9 566.9;" xml:space="preserve">
          <g>
            <path d="M299.2,204.7h157.6v31.5H299.2V204.7z M299.2,267.7h157.6v31.5H299.2V267.7z M110.1,330.7h346.7v31.5H110.1V330.7z
              M110.1,393.8h346.7v31.5H110.1V393.8z M299.2,141.6h157.6v31.5H299.2V141.6z M525.7,525.3H41.3V41.6h484.4V525.3z M60.5,506h445.9
              V60.9H60.5V506z M60.5,506"/>
            <g>
              <path d="M157.8,147.6c-4.4,11.8-9.9,24-16.3,35.6v116h-23.2v-80.5c-2.4,3-4.9,5.9-7.2,8.4c-2.2-6.1-8.7-19.7-12.8-25.7
                c14.5-14.6,28.4-37.8,36.5-61L157.8,147.6z M256.1,191.3V213H153.1v-21.7h19.7v-12.4h-16v-21.2h16v-18h23.4v18h15.5v-18h23.7v18
                h17v21.2h-17v12.4H256.1z M164.7,220.2H246v79H221v-5.5h-32.4v5.5h-23.9V220.2z M188.5,240.1v7.7H221v-7.7H188.5z M221,274.5v-7.7
                h-32.4v7.7H221z M196.1,191.3h15.5v-12.4h-15.5V191.3z"/>
            </g>
          </g>
        </svg>
        <span>补借条</span>
      </div>
      <div class="bottomNavBtn" @click="toUserSearch">
        <v-icon>credit_card</v-icon>        
        <span>查信用</span>
      </div>
      <div class="bottomNavBtn grey--text text--darken-1">
        <v-icon class="grey--text text--darken-1">monetization_on</v-icon>        
        <span>求借款</span>
      </div>
      <div class="bottomNavBtn" @click="$router.push('/userCenter')">
        <v-icon>face</v-icon>      
        <span>个人中心</span>
      </div>
    </v-bottom-nav>
    <div id="FuckIphoneX"></div>
    <v-dialog  v-model="dialogDisplay" persistent max-width="290">
      <v-card id="bindHintDialog">
        <v-card-title class="headline">提示</v-card-title>
        <v-card-text>为正常使用各项功能，您需要先验证手机号码</v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="gold" flat @click.native="dialogDisplay = false">知道了</v-btn>
          <v-btn color="gold" flat @click.native="$router.push('/login')">去验证</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <v-dialog  v-model="versionDialogDisplay" persistent max-width="290">
      <v-card id="versionHintDialog">
        <v-card-title class="headline">提示</v-card-title>
        <v-card-text>您的 iOS 版本过低，部分功能可能无法正常使用， 推荐使用 iOS 10.0 以上版本的设备访问本服务</v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="gold" flat @click.native="versionDialogDisplay = false">知道了</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <v-dialog  v-model="idDialogDisplay" persistent max-width="290">
      <v-card id="bindHintDialog">
        <v-card-title class="headline">提示</v-card-title>
        <v-card-text>为正常使用补借条等功能，您需要先绑定身份信息</v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="gold" flat @click.native="idDialogDisplay = false">知道了</v-btn>
          <v-btn color="gold" flat @click.native="$router.push('/idBind')">去绑定</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <v-bottom-sheet v-model="popUpDisplay" full-width>
      <v-list light id="borrowListPopUp">
        <v-list-tile @click="$router.push('createIOU?role=borrower')" >
          <v-list-tile-title>我是借款人</v-list-tile-title>
        </v-list-tile>
        <v-divider light></v-divider>
        <v-list-tile @click="$router.push('createIOU?role=creditor')" >
          <v-list-tile-title>我是出借人</v-list-tile-title>
        </v-list-tile>
        <v-divider light></v-divider>
        <v-list-tile @click="popUpDisplay = false" >
          <v-list-tile-title>取消</v-list-tile-title>
        </v-list-tile>
      </v-list>
    </v-bottom-sheet>
  </v-layout>
</template>

<script>
import InfoCard from '@/components/InfoCard'
import HistoryList from '@/components/HistoryList'
import {wechatShareSetting, testIOSVersion} from '@/helper'
export default {
  async asyncData({store, query, app, redirect}) {
    let {data} = await app.$axios.get(`/iou/indexList?userId=${store.state.user.id}`)
    if (data.success) {
      return {
        // borrow: data.list.borrow, 
        // credit: data.list.credit, 
        infoCard: {
          toBePaid: data.borrowedAmount,
          toBeReceived: data.creditedAmout,
          borrowListCountResult: data.borrowListCountResult,
          creditListCountResult: data.creditListCountResult,
          startedBorrowListCountResult: data.startedBorrowListCountResult,
          startedCreditListCountResult: data.startedCreditListCountResult,
          thisMonth: data.thisMonth
        }
      }
    } else {
      // store.dispatch('displayMessage', data.msg)
      return {
        // borrow: [], 
        // credit: [], 
        infoCard: {
          toBePaid: 0,
          toBeReceived: 0,
          borrowListCountResult: 0,
          creditListCountResult: 0,
          startedBorrowListCountResult: 0,
          startedCreditListCountResult: 0,
          thisMonth: 0
        }
      }
    }
  },
  data:() => ({
    navTarget: 'buJieTiao',
    dialogDisplay: false,
    idDialogDisplay: false,
    popUpDisplay: false,
    reloading: false,
    versionDialogDisplay: false,
    introJs: {}
  }),
  computed: {
    userInfo () {
      return this.$store.state.user
    },
    tabChoose() {
      return this.$store.state.index.tab
    },
    displayList() {
      return (this.tabChoose === 'borrow' ? this.borrow : this.credit)
    }
  },
  components: {
    InfoCard,
    // PopUp,
    HistoryList
  },
  beforeRouteLeave (to, from, next) {
    if (to.path === '/login') next()
    if (this.userInfo.needPhoneBind) {
      this.dialogDisplay = true
      next(false)
    } else {
      next()
    }
  },
  mounted() {
    this.$store.commit('setRedirect', '/')
    const versionTest = testIOSVersion()
    if (!versionTest) {
      this.versionDialogDisplay = true
    }
    wechatShareSetting(this.$axios, this.$store)
  },
  methods: {
    async getData() {
      this.reloading = true
      let {data} = await this.$axios.get(`/iou/indexList?userId=${this.$store.state.user.id}`)
      if (data.success) {
        this.infoCard.toBePaid = data.borrowedAmount
        this.infoCard.toBeReceived = data.creditedAmout
        this.infoCard.borrowListCountResult = data.borrowListCountResult
        this.infoCard.creditListCountResult = data.creditListCountResult
        this.infoCard.startedBorrowListCountResult = data.startedBorrowListCountResult
        this.infoCard.startedCreditListCountResult = data.startedCreditListCountResult
        this.infoCard.thisMonth = data.thisMonth
      } else {
        this.$store.dispatch('displayMessage', data.msg)
      }
      this.reloading = false
    },
    fillIOU() {
      if (this.userInfo.needPhoneBind) {
        this.dialogDisplay = true
      } else if (this.userInfo.needIdBind) {
        this.idDialogDisplay = true
      } else {
        this.popUpDisplay = true
      }
    },
    toUserSearch() {
      if (this.userInfo.needPhoneBind) {
        this.dialogDisplay = true
      } else if (this.userInfo.needIdBind) {
        this.idDialogDisplay = true
      } else {
        this.$router.push("/searchUser")
      }
    },
    goToWaitForDeal(kind='borrow') {
      this.$store.commit('changeIndexTab', kind)
      this.$router.push('/waitForDeal')
    }
  }
}
</script>

<style lang="scss" scoped>
  body {
    height: 100%;
    overflow: hidden;
  }
  #tabBlock {
    width: 100%;
    padding-top: 1.5rem;
    
    div {
      width: calc(50% - 2px);
      display: inline-block;
      text-align: center;
      height: 18px;
      font-size: 18px;
      transition: color 0.3s ease-in-out;
      -webkit-transition: color 0.3s ease-in-out;
    }

    #tabDivider:before {
      content: "";
      height: 18px;
      width: 0;
      border: 2px solid $gold;
    }
    .isChoosing {
      color: $gold;
    }
  }
  .listNumHint {
    width: 100%;
    text-align: center;
    padding: 1.5rem 0;
    color: $gold;
    opacity: 0.7;
    font-size: 1.1rem;
  }
  .btnBlock {
    width: 84vw;
    margin: auto;
    #createButton {
      width: 100%;
      color: #484646;
      background-image: linear-gradient(-213deg, #DAB269 0%, #E7C78C 92%);
      border-radius: 5px;
      height: 3rem;
      font-size: 18px;
      margin: 0;
    }
    .halfBtns {
      width: 100%;
      display: flex;
      justify-content: space-between;
      flex-direction: row;
      margin-top: 1rem;

      .ConfirmButton {
        width: 48%;
        color: $gold;
        border: 1px solid $gold;
        background-color: transparent;
        border-radius: 5px;
        height: 3rem;
        font-size: 1rem;
        line-height: 2rem;
        margin: 0;
        span {
          font-size: 2rem;
          padding-right: 0.5rem;
        }
      }
    }
  }
  #bottomNav {
    height: 42pt;
    position: fixed;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
    background-color: $toolbar-grey;
    transform: translate3D(0,0,0);
    -webkit-transform: translate3D(0,0,0);
    margin-bottom: constant(safe-area-inset-bottom);
    margin-bottom: env(safe-area-inset-bottom);
    
    .bottomNavBtn {
      width: 25%;
      color: #fff;
      opacity: 1;
      display: flex;
      flex-flow: column;
      align-items: center;
      justify-content: center;
      z-index: 9999999
      span {
        display: block;
        font-size: 13px;
        text-align: center;
      }

      i {
        display: block;
      }

      svg {
        display: block;
        fill: #fff;
        width: 1.8rem;
        height: 1.8rem;
      }
    }
    
  }
  #FuckIphoneX {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: constant(safe-area-inset-bottom);
    height: env(safe-area-inset-bottom);
    background-color: #39424a;
  }
  #bindHintDialog {
      background-color: #fff;
      color: #000;
    .headline {
      justify-content: center;
      font-weight: bold;
      padding-bottom: 0;
    }
    .btn {
      width: 50%;
    }
  }
  #versionHintDialog {
      background-color: #fff;
      color: #000;
    .headline {
      justify-content: center;
      font-weight: bold;
      padding-bottom: 0;
    }
    .btn {
      width: 100%;
      border-top: 1px solid #ccc;
    }
  }

  #borrowListPopUp {
    text-align: center;
    // /deep/ .list__tile.list__tile--link {
      
    // }
    /deep/ .list__tile__title {
      text-align: center;
    }
  }

  .popUpItem {
    width: 100%;
    height: 3.5rem;
    line-height: 3.5rem;
    font-size: 1.2rem;
    border-bottom: 1px solid #eee;
  }
  .introjs-helperLayer {
    background-color: #3A424A !important;
  }
</style>