黄尔冬 / net_iou

<template>
  <v-layout id="Report" column justify-center align-center>
    <v-card flat class="ExplanationBlock" >
      <h3 id="ReportTitle">违法举报</h3> 
    </v-card>
    <v-flex>
      <div class="label">举报对象</div>
      <v-card flat class="ExplanationBlock" >
        <div class="reportTarget">{{target}}</div>
      </v-card>
      <div class="label">借条编号</div>
      <v-card flat class="ExplanationBlock" >
        <div class="reportTarget">{{info.listNo}}</div>
      </v-card>
      <div class="label">举报原因</div>
      <v-card flat class="ButtonBlock">
        <div class="ButtonContainer">
          <v-btn 
            depressed
            v-for="(item, index) in buttons" 
            :key="index"
            :class="chosenBtnIndex === index ? 'isChosen' : ''"
            @click="usageChosen(item, index)"
            class="BorrowUsageBtn">
            {{item.text}}
          </v-btn>
        </div>
      </v-card>
      <div class="label">举报内容（不超过300字）</div>
      <v-card flat class="ExplanationBlock" >
        <textarea 
          v-model="form.content"
          name="ExplanationTextarea" 
          placeholder="请输入举报内容" 
          maxlength="300"
          id="ExplanationTextarea" cols="30" rows="5"></textarea>
      </v-card>
      <div class="label">图片说明（非必填，不超过9张）</div>
      <v-card flat class="ImgBlock">
        <ImgUploader :limit="9" @change="updateImgs"/>
      </v-card>
      <div class="ConfirmButtonBlock">
        <v-btn depressed id="ConfirmButton" @click="submit">确认举报</v-btn>
      </div>
      <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'>{{dialogInfo}}</v-card-text>
          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn color="black" flat @click.native="dialogDisplay = false">知道了</v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
    </v-flex>
  </v-layout>
</template>

<script>
import ImgUploader from "@/components/ImgUploader"
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:() => ({
    form: {
      kind: '',
      content: '',
      imgs: [],
    },
    buttons: [{text: '骗条'}, {text: '还贷未消条'},{text: '其他'}],
    chosenBtnIndex: '',
    dialogDisplay: false,
    dialogInfo: '',
    isLoading: false
  }),
  head:() => ({
    title: '违法举报'
  }),
  computed: {
    target() {
      let target = ''
      if (this.info) {
        target = this.info.borrowerId === this.$store.state.user.id ? this.info.Creditor.name : this.info.Borrower.name
      }
      return target
    },
  },
  components: {
    ImgUploader
  },
  mounted() {
    wechatShareSetting(this.$axios, this.$store)
  },
  methods: {
    showDialog(info) {
      this.dialogInfo = info
      this.dialogDisplay = true
    },
    usageChosen(item, index) {
      this.chosenBtnIndex = index
      this.form.kind = item.text
    },
    updateImgs(e) {
      this.form.imgs = e
    },
    formCheck() {
      if (!this.form.kind) {
        this.showDialog('请选择举报原因!')
        return false
      }
      return true
    },
    async submit() {
      this.isLoading = true
      const could = this.formCheck()
      if (!could) return
      const form = new FormData()
      form.append('userId', this.$store.state.user.id)
      form.append('id', this.info.id)      
      form.append('kind', this.form.kind)
      form.append('content', this.form.content)
      for (let i = 0; i < this.form.imgs.length; i++) {
        const img = this.form.imgs[i]
        form.append(`img${i + 1}`, img)
      }
      let {data} = await this.$axios.post('/report', form)
      this.isLoading = false
      if (data.success) {
        this.$store.dispatch('displayMessage', '举报提交成功')        
        this.$router.push('/')
      } else {
        this.$store.dispatch('displayMessage', data.msg)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  #Report {

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

    .label {
      width: 100vw;
      height: 2.3rem;
      line-height: 2.3rem;
      font-size: 0.75rem;
      color: #B9B9BA;
      padding-left: 0.9rem;
      box-sizing: border-box;
    }
    
    .reportTarget {
      height: 2rem;
      font-size: 1rem;
      line-height: 2rem;
      padding: 0 1rem;
    }

    .ButtonBlock {
      width: 100vw;
      padding: 0 1.3rem;

      .ButtonContainer {
        display: flex;
        width: 100%;
        justify-content: space-around;
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;

        .BorrowUsageBtn {
          width: 6.2rem;
          height: 2rem;
          margin: 0.6rem 0;
          color: #666;
          background-color: $background-black;

          &.isChosen {
            color: #fff;
            background-image: linear-gradient(-229deg, #DAB269 37%, #E7C78C 87%);
          }
        }
      }
    }
    .ExplanationBlock {
      width: 100vw;
      
      #ExplanationTextarea {
        width: 100%;
        outline: none;
        padding: 1rem;
      }
    }
    .ImgBlock {
      min-height: 7rem;
      padding: 1rem 0.8rem;
    }
    .ConfirmButtonBlock {
      width: 90vw;
      margin: 2.5rem auto;

      #ConfirmButton {
        color: #484646;
        background-image: linear-gradient(-213deg, #DAB269 0%, #E7C78C 92%);
        border-radius: 2px;
        width: 100%;
        height: 2.8rem;
        font-size: 18px;
        margin: auto;
      }
    }
    
  }
  .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>