黄尔冬 / net_iou

<template>
	<v-layout id="Borrow" column justify-center align-center>
    <h3 id="BorrowTitle">借款内容</h3> 
    <v-flex>
      <v-card class="BorrowList" id="BorrowListContent" flat >
        <v-list class="list">
          <v-list-tile>
            <v-list-tile-content class="BorrowListTitle">借款人</v-list-tile-content>
            <v-list-tile-content class="BorrowListValue">{{borrower}}</v-list-tile-content>
          </v-list-tile>
          <v-list-tile>
            <v-list-tile-content class="BorrowListTitle">出借人</v-list-tile-content>
            <v-list-tile-content class="BorrowListValue">{{creditor}}</v-list-tile-content>
          </v-list-tile>
          <v-list-tile>
            <v-list-tile-content class="BorrowListTitle">借款金额</v-list-tile-content>
            <v-list-tile-content class="BorrowListValue">{{info.amount}}元</v-list-tile-content>
          </v-list-tile>
          <v-list-tile>
            <v-list-tile-content class="BorrowListTitle">借款日期</v-list-tile-content>
            <v-list-tile-content class="BorrowListValue">{{getDate(info.startDate)}}</v-list-tile-content>
          </v-list-tile>
          <v-list-tile>
            <v-list-tile-content class="BorrowListTitle">还款日期</v-list-tile-content>
            <v-list-tile-content class="BorrowListValue">{{getDate(info.endDate)}}</v-list-tile-content>
          </v-list-tile>
          <v-list-tile>
            <v-list-tile-content class="BorrowListTitle">借款利率</v-list-tile-content>
            <v-list-tile-content class="BorrowListValue">{{info.rate * 100}}%</v-list-tile-content>
          </v-list-tile>
          <v-list-tile>
            <v-list-tile-content class="BorrowListTitle">借款用途</v-list-tile-content>
            <v-list-tile-content class="BorrowListValue">{{info.usage}}</v-list-tile-content>
          </v-list-tile>
          <v-list-tile>
            <v-list-tile-content class="BorrowListTitle">补充说明</v-list-tile-content>
            <v-list-tile-content v-if="!info.explanation" class="BorrowListValue">{{'无'}}</v-list-tile-content>            
          </v-list-tile>
          <v-list-tile class="BorrowExplanation" v-if="!!info.explanation">
            <v-list-tile-content >{{info.explanation}}</v-list-tile-content>
          </v-list-tile>
          <v-list-tile v-if="imgSrc.length">
            <v-list-tile-content class="BorrowListTitle">图片说明</v-list-tile-content>
          </v-list-tile>
          <v-list-tile class="BorrowListImg" v-if="imgSrc.length">          
            <v-list-tile-content class="BorrowListImgContent">
              <img v-for="(img, index) in imgSrc" :key="index" :src="`/netiou/iouImg/${img}`" alt="img">
            </v-list-tile-content>
          </v-list-tile>
          <v-list-tile >
            <v-list-tile-content class="BorrowListTitle">借款协议</v-list-tile-content>
            <v-list-tile-action>
              <v-icon class="BorrowListArrow">查看 keyboard_arrow_right</v-icon>
            </v-list-tile-action>
          </v-list-tile>
          <v-list-tile >
            <v-list-tile-content class="BorrowListTitle">居间服务协议</v-list-tile-content>
            <v-list-tile-action>
              <v-icon class="BorrowListArrow">查看 keyboard_arrow_right</v-icon>
            </v-list-tile-action>
          </v-list-tile>
        </v-list>
      </v-card>
      <v-card class="BorrowList" id="BorrowListInfo" flat>
        <v-list class="list">
          <v-list-tile>
            <v-list-tile-content class="BorrowListTitle">借条编号</v-list-tile-content>
          </v-list-tile>
          <v-list-tile>
            <v-list-tile-content class="BorrowListValue">{{info.id}}</v-list-tile-content>
          </v-list-tile>
          <v-list-tile>
            <v-list-tile-content class="BorrowListTitle">创建时间</v-list-tile-content>
            <v-list-tile-content class="BorrowListValue">{{getDate(info.created_at)}}</v-list-tile-content>
          </v-list-tile>
          <v-list-tile>
            <v-list-tile-content class="BorrowListTitle">借条状态</v-list-tile-content>
            <v-list-tile-content class="BorrowListValue">{{info.status}}</v-list-tile-content>
          </v-list-tile>
        </v-list>
      </v-card>
      <v-card id="ConfirmBlock" >
        <div class="sponsorConfirm" v-if="userInfo.id === info.sponsorId && info.status === '未发起'">
          <v-btn depressed :loading="isLoading" class="btn-light" @click="passwordCheck('Cancel')">删除</v-btn>          
          <v-btn depressed :loading="isLoading" class="btn-deep" @click="passwordCheck('Confirm')">发起</v-btn>
        </div>
        <div class="targetConfirm" v-if="userInfo.id !== info.sponsorId && info.status === '待确认'">
          <v-btn depressed :loading="isLoading" class="btn-light" @click="passwordCheck('Cancel')">驳回</v-btn>          
          <v-btn depressed :loading="isLoading" class="btn-deep" @click="passwordCheck('Confirm')">同意</v-btn>
        </div>
        <div class="targetConfirm" v-if="userInfo.id === info.sponsorId && info.status === '已驳回'">
          <v-btn depressed :loading="isLoading" class="btn-light" @click="passwordCheck('Cancel')">删除</v-btn>          
          <v-btn depressed :loading="isLoading" class="btn-deep" @click="passwordCheck('Confirm')">再次发起</v-btn>
        </div>
        <div class="targetConfirm" v-if="userInfo.id === info.sponsorId && info.status === '待确认'">
          <v-btn depressed class="btn-deep" @click="$router.push(`/shareIOU?id=${info.id}`)">分享给朋友</v-btn>
        </div>
      </v-card>
      <div id="FuckIphoneX"></div>
    </v-flex>
    <v-dialog  v-model="dialogDisplay" persistent max-width="290">
      <v-card class="hintDialog">
        <v-card-title class="headline">提示</v-card-title>
        <v-card-text class='dialogContent'>
          <p>{{dialogContent}}</p>
          </v-card-text>          
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="black" flat @click.native="dialogDisplay = false">再看看</v-btn>
          <v-btn color="black" flat @click.native="$router.push(redirect)">去设置</v-btn>            
        </v-card-actions>
      </v-card>
    </v-dialog>
    <PopUp  :display="passwordPannelDisplay" @close='passwordPannelDisplay = false'>
      <template slot="content">
        <PasswordInputer :display="passwordPannelDisplay" @passwordSubmit="passwordSubmit"/>
      </template>
    </PopUp>
  </v-layout>
</template>


<script>
import PopUp from '@/components/PopUp'
import PasswordInputer from '@/components/PasswordInputer'
import {wechatShareSetting} from '@/helper'

export default {
  async asyncData({store, query, app, redirect}) {
    let {data} = await app.$axios.get(`/iou?id=${query.id}&userId=${store.state.user.id}`)
    if (data.success) {
      return {info: data.info}
    } else {
      store.dispatch('displayMessage', data.msg)
      redirect(301, '/')
    }
  },
  data:() => ({
    dialogDisplay: false,
    passwordPannelDisplay: false,
    isLoading: false,
    passwordSubmit: {},
    dialogContent: '',
    redirect: ''
  }),
  computed: {
    userInfo() {
      return this.$store.state.user
    },
    borrower() {
      if (this.info.status === '待确认' || this.info.status === '未发起' || this.info.status === '已驳回') {
        return (this.info.Borrower ? this.info.Borrower.name : this.info.targetName)
      }
      return this.info.Borrower.name
    },
    creditor() {
      if (this.info.status === '待确认' || this.info.status === '未发起' || this.info.status === '已驳回') {
        return (this.info.Creditor ? this.info.Creditor.name : this.info.targetName)
      }
      return this.info.Creditor.name
    },
    imgSrc() {
      return this.info.imgs ? this.info.imgs.split(',') : []
    }
  },
  head:() => ({
    title: '借款内容'
  }),
  components: {
    PopUp,
    PasswordInputer
  },
  mounted() {
    wechatShareSetting(this.$axios, this.$store)
    if (this.userInfo.needPhoneBind) {
      this.dialogContent = '您还没有绑定手机号码，无法进行该操作'
      this.$store.commit('setRedirect', `/borrowContent?id=${this.info.id}`)
      this.redirect = '/login' 
      this.dialogDisplay = true
      return
    }
    if (this.userInfo.needIdBind) {
      this.dialogContent = '您还没有验证身份信息，无法进行该操作'
      this.$store.commit('setRedirect', `/borrowContent?id=${this.info.id}`)   
      this.redirect = '/idBind'   
      this.dialogDisplay = true
      return
    }
  },
  beforeRouteLeave (to, from, next) {
    if (to.name === "createIOU") {
      next('/')
    } else {
      next()      
    }
  },
  methods: {
    async getData() {
      let {data} = await this.$axios.get(`/iou?id=${this.info.id}&userId=${this.$store.state.user.id}`)
      if (data.success) {
        this.info = data.info
      } else {
        store.dispatch('displayMessage', data.msg)
      }
    },
    getDate(source) {
      let date = new Date(source)
      return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
    },
    passwordCheck(type) {
      if (this.userInfo.needPhoneBind) {
        this.dialogContent = '您还没有绑定手机号码，无法进行该操作'
        this.$store.commit('setRedirect', `/borrowContent?id=${this.info.id}`)
        this.redirect = '/login' 
        this.dialogDisplay = true
        return
      }
      if (this.userInfo.needIdBind) {
        this.dialogContent = '您还没有验证身份信息，无法进行该操作'
        this.$store.commit('setRedirect', `/borrowContent?id=${this.info.id}`)   
        this.redirect = '/idBind'   
        this.dialogDisplay = true
        return
      }
      if (this.userInfo.needSetPassword) {
        this.dialogContent = '您还没有设置交易密码，无法进行该操作'
        this.$store.commit('setRedirect', `/borrowContent?id=${this.info.id}`)
        this.redirect = '/setPassword'
        this.dialogDisplay = true
        return
      }
      switch (type) {
        case 'Confirm':
          this.passwordSubmit = this.confirm
          break
        case 'Cancel':
          this.passwordSubmit = this.cancel          
          break
        default:
          this.passwordSubmit = this.confirm          
          break
      }
      this.passwordPannelDisplay = true      
    },
    async confirm(password) {
      this.passwordPannelDisplay = false
      this.isLoading = true
      let url = ''
      let redirect = ''
      if (this.info.status === '未发起') {
        url = '/iou/submit'
        redirect = `/shareIOU?id=${this.info.id}`
      } else if (this.info.status === '待确认')  {
        url = '/iou/comfirm'
        redirect = `/borrowContent?id=${this.info.id}`
      } else if (this.info.status === '已驳回') {
        url = '/iou/submit'
        redirect = `/shareIOU?id=${this.info.id}`
      } else {
        this.isLoading = false
        return
      }
      const {data} = await this.$axios.post(url, {
        userId: this.userInfo.id,
        id: this.info.id,
        password: password,
      })
      this.isLoading = false
      if (data.success) {
        this.$store.dispatch('displayMessage', '借条提交成功')  
        if (this.info.status === '待确认') {
          return this.getData()
        }
        this.$router.push(redirect)
      } else {
        this.$store.dispatch('displayMessage', data.msg)
      }
    },
    async cancel(password) {
      this.passwordPannelDisplay = false
      this.isLoading = true
      let url = ''
      let successMsg = ''
      if (this.info.status === '未发起') {
        url = '/iou/delete'
        successMsg = '借条取消成功'
      } else if (this.info.status === '待确认')  {
        url = '/iou/reject'
        successMsg = '借条驳回成功'
      } else if (this.info.status === '已驳回') {
        url = '/iou/delete'
        successMsg = '借条取消成功'
      } else {
        this.isLoading = false
        return
      }
      const {data} = await this.$axios.post(url, {
        userId: this.userInfo.id,
        id: this.info.id,
        password: password,
      })
      this.isLoading = false
      if (data.success) {
        this.$store.dispatch('displayMessage', successMsg)        
        this.$router.push(`/`)
      } else {
        this.$store.dispatch('displayMessage', data.msg)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  #Borrow {
    padding-top: 1.3rem;

    #BorrowTitle {
      display: block;
      font-size: 18px;
      width: calc(100vw - 1rem);
      color: $light-gold;
      border-left: 0.25rem solid $light-gold;
      padding-left: 0.75rem;
      margin-left: 1rem;
    }

    .BorrowList {
      width: 100vw;
      margin-top: 1.1rem;
      border-top: 1px solid #979797;

      .list {
        padding: 0;
        background-color: $toolbar-grey;

        li {
          height: 2.1rem;

          /deep/ div.list__tile {
            height: 2.1rem;
            color: $light-gold;
            padding: 0 0.8rem;
            border-bottom: 1px solid #979797;
          }
        }
        .BorrowExplanation {
          height: 100%;
          background-color: $background-black;
          
          /deep/ div.list__tile {
            height: 100%;
            padding: 0.5rem 0.8rem;
            
          }
        }
        .BorrowListTitle {
          font-size: 1rem;
        }
        .BorrowListValue {
          font-size: 1rem;
          align-items: flex-end;
        }
        .BorrowListArrow {
          font-size: 1rem;
          color: $light-gold;
        }
        .BorrowListImg {
          height: 100%;
          background-color: $background-black;
          

          img {
            width: 100%;
            margin-top: 1rem;
          }
          /deep/ div.list__tile {
            height: 100%;
          }
          .BorrowListImgContent {
            align-items: center;
            padding-bottom: 1rem;
          }
        }
      }
    }

    #BorrowListInfo {
      margin-bottom: 6rem;
    }

    #ConfirmBlock {
      width: 100vw;
      border-top: 1px solid #979797;
      background-color: $toolbar-grey;
      position: fixed;
      bottom: 0;
      text-align: right;
      margin-bottom: constant(safe-area-inset-bottom);
      margin-bottom: env(safe-area-inset-bottom);

      button {
        height: 2.5rem;
      }
      .btn-light {
        background-color: $toolbar-grey;
        color: $light-gold;
        border: 1px solid $light-gold;
      }

      .btn-deep {
        background-image: linear-gradient(-229deg, #DAB269 37%, #E7C78C 87%);
        color: $toolbar-grey;
      }
      
    }

    #FuckIphoneX {
      position: fixed;
      bottom: 0;
      width: 100%;
      height: constant(safe-area-inset-bottom);
      height: env(safe-area-inset-bottom);
      background-color: #39424a;
    }
  }
  .hintDialog {
    background-color: #fff;
    color: #000;
    .headline {
      justify-content: center;
      font-weight: bold;
      padding-bottom: 0;
    }
    .dialogContent {
      justify-content: center;  
      text-align: center;

      .warningIcon {
        margin-bottom: 0.5rem;
        color: red;
        font-size: 5rem;
      }
      .bold {
        font-weight: bold;
      }

      p {
        margin-bottom: 0;
      }
    }
    .btn {
      width: 100%;
    }
  }
</style>