callRecord.vue 3.73 KB
<template>
  <v-layout id="CallRecord" column justify-center align-center>
    <v-flex>
      <v-card id="InfoBlock" class="infoList" height="15.5rem">
        <v-list>
          <v-subheader>过去半年内联系最频繁的联系人</v-subheader>
          <v-divider></v-divider>          
          <v-list-tile v-for="(item, index) in callFrequencyAnalysis" :key="index">
            <v-list-tile-content>
              <v-list-tile-title >{{item.callOtherNumber}}</v-list-tile-title>
            </v-list-tile-content>
            <v-list-tile-action>
              {{item.times}}次
            </v-list-tile-action>
          </v-list-tile>
          <v-divider></v-divider> 
          <v-subheader>过去半年内联系时间最长的联系人</v-subheader>
          <v-divider></v-divider>          
          <v-list-tile v-for="(item, index) in callTimeAnalysis" :key="index+5">
            <v-list-tile-content>
              <v-list-tile-title >{{item.callOtherNumber}}</v-list-tile-title>
            </v-list-tile-content>
            <v-list-tile-action>
              {{Math.floor(parseInt(item.sum) / 60)}}分钟
            </v-list-tile-action>
          </v-list-tile>
          
        </v-list>
        <div class="ConfirmButtonBlock">
          <v-btn depressed id="ConfirmButton" @click="$router.back()">返回</v-btn>
        </div>
      </v-card>
    </v-flex>
  </v-layout>
</template>

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

export default {
  layout: 'lightColor',
  async asyncData({store, query, app, redirect}) {
    let {data} = await app.$axios.get(`/credit/callRecord?userId=${store.state.user.id}&id=${query.id || ''}`)
    if (data.success) {
      if (!data.hasReport) {
        store.dispatch('setMessageRedirect', `/userRecord?id=${query.id}`)
        store.dispatch('displayMessage', '该用户还未完成基础信息及运营商信息采集,暂无通话记录详情')        
      }
      return {callFrequencyAnalysis: data.callFrequencyAnalysis, callTimeAnalysis: data.callTimeAnalysis}
    } else {
      store.dispatch('setMessageRedirect', `/userRecord?id=${query.id}`)
      store.dispatch('displayMessage', data.msg)
      return {callTimeAnalysis: [], callFrequencyAnalysis: []}
    }
  },
  data:() => ({

  }),
  head:() => ({
    title: '通话详情'
  }),
  mounted() {
    wechatShareSetting(this.$axios, this.$store)
    
  },
  methods: {

  }
}
</script>

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

    .infoList {
      width: 100vw;
      background: #FFFFFF;
      padding: 0;
      .list {
        padding: 0;
      }

      input {
        outline: none;
        text-align: right;
      }

      .subheader {
        height: 2rem;
        line-height: 2rem;
        display: block;
        background-image: linear-gradient(-229deg, #DAB269 37%, #E7C78C 87%);
      }

    }

  
    .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;
        transition: 0.2s all ease-in-out;

        &:disabled {
          background-image: none;
        }
      }
    }
    
  }
  .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>