黄尔冬 / 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')">正在借款</div>
        <span id="tabDivider"></span>
        <div id="isLending" :class="tabChoose === 'credit' ? 'isChoosing' : ''" @click="tabChange('credit')">正在出借</div>
      </div>
      <HistoryList :list='displayList' jumpPrefix='borrowContent' />
    </v-flex>
    <v-bottom-nav id="bottomNav" color="toolbar-grey" >
      <v-btn class="bottomNavBtn" flat color="gold" value="buJieTiao" @click="fillIOU">
        <span>补借条</span>
          <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>
      </v-btn>
      <v-btn class="bottomNavBtn" :disabled="true" flat color="gold" value="chaXinYong">
        <span>查信用</span>
        <i aria-hidden="true" class="material-icons icon iconfont icon-xinyongqia"></i> 
      </v-btn>
      <v-btn class="bottomNavBtn" :disabled="true" flat color="gold" value="qiuJieKuan">
        <span>求借款</span>
        <i aria-hidden="true" class="material-icons icon iconfont icon-dkw_jiekuan"></i> 
      </v-btn>
      <v-btn class="bottomNavBtn" to="/userCenter" flat color="gold" value="geRenZhongXin">
        <span>个人中心</span>
        <i aria-hidden="true" class="material-icons icon iconfont icon-gerenzhongxin"></i> 
      </v-btn>
    </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>
    <PopUp :display="popUpDisplay" @close='popUpDisplay = false'>
      <template slot="content">
        <div class="popUpItem" @click="$router.push('createIOU?role=borrower')">我是借款人</div>
        <div class="popUpItem" @click="$router.push('createIOU?role=creditor')">我是出借人</div>        
      </template>
    </PopUp>
  </v-layout>
</template>

<script>
import InfoCard from '@/components/InfoCard'
import PopUp from '@/components/PopUp'
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
        }
      }
    } else {
      // store.dispatch('displayMessage', data.msg)
      return {
        borrow: [], 
        credit: [], 
        infoCard: {
          toBePaid: [],
          toBeReceived: []
        }
      }
    }
  },
  data:() => ({
    navTarget: 'buJieTiao',
    dialogDisplay: false,
    idDialogDisplay: false,
    popUpDisplay: false,
    reloading: false,
    versionDialogDisplay: false
  }),
  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.borrow = data.list.borrow
        this.credit = data.list.credit
        this.infoCard.toBePaid = data.borrowedAmount
        this.infoCard.toBeReceived = data.creditedAmout
      } 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
      }
    },
    tabChange(tab) {
      if (this.tabChoose !== tab) {
        this.$store.commit('changeIndexTab')
      }
    },
    setStyle(status) {
      switch (status) {
        case '未发起':
          return 'notInitiated'
          break
        case '待确认':
          return 'toBeConfirmed'
          break
        case '已驳回':
          return 'dismissed'
          break
        default:
          return 'toBeConfirmed'
          break
      }
    }
  }
}
</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;
    }
  }
  #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 {
      color: #fff;
      opacity: 1;
      svg {
        fill: #fff;
        width: 1.8rem;
        height: 1.8rem;
      }
    }
    
    .bottomNavBtn.btn--active {
      color: $gold;
      svg {
        fill: $gold;
      }
    }
  }
  #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;
    }
  }
  .popUpItem {
    width: 100%;
    height: 3.5rem;
    line-height: 3.5rem;
    font-size: 1.2rem;
    border-bottom: 1px solid #eee;
  }
</style>