realtorEasier-webSite/pc/src/components/toast/index.vue

<template>
  <div>
    <pointRecharge :pointid='pointid' :pointitem='pointitem' :pointchildName='pointchildName' :visible='ponintVisible' @closePoint="pointshandle"/>
    <capacityRecharge @qixian='qixianHandle' :capacitycount='capacitycount' @renewItem='renewhandle' :capacitydetail='capacitydetail' :capacityitem='capacityitem' :capacitycountry='capacitycountry' :capacitychildName='capacitychildName' :deadline='capacitydeadline' :type='capacitytype' :visible='capacityvisible' @closePoint="capacityhandle"/>
    <editInvoice :edititem=editItem :visible='editVisible' @closePoint="invoicehandle"/>
    <showInvoice :showitem=showItem :visible='showVisible' @closePoint="()=>{showVisible = false}"/>
    <binding :btype="bindingType" :visible='bindingVisible' @closePoint="()=>{bindingVisible = false,emitCallback()}"/>
    <cooperation :sceneNum="sceneNum" :cooType="cooType" :visible='cooperationVisible' @closePoint="handleCooClose"/>

    <div
      class="toast-layout"
      :style="{background:isLoaing?'none':'rgba(0, 0, 0, 0.3)',zIndex:988888988}"
      :class="{'toast-active':isLoaing}"
    >
      <div class="loading">
        <loading/>
      </div>
    </div>
    <div
      class="toast-layout"
      :style="{background:isLoaing?'none':'rgba(0, 0, 0, 0.3)',zIndex:998888988}"
      :class="{'toast-active':visible}"
    >
      <div class="toast-con" :style="{minWidth:toastType==='comfirm'?'704px':'560px'}">
        <div class="top">
          <span>{{typeTxt}}</span>
          <i
            @click="toastType==='comfirm'?visible=false:emitCallback()"
            class="iconfont icon-cuowu"
          ></i>
        </div>
        <div class="t-line"></div>
        <div class="detail">
          <img :src="img" alt>
          <span v-html="message"></span>
        </div>
        <div class="t-line"></div>
        <div class="bottom" v-if="toastType==='comfirm'">
          <span class="btn primary" @click="emitCallback">{{diycomfirm||comfirmtxt}}</span>
          <span @click="visible=false,cancal()" class="btn cancel">{{lang==='en'?'Cancel':'取消'}}</span>
        </div>
        <div class="bottom mid-bottom" v-else>
          <span class="btn primary" @click="emitCallback">{{diycomfirm||comfirmtxt}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import pointRecharge from './pointRecharge'
import capacityRecharge from './capacityRecharge'
import editInvoice from './editInvoice'
import showInvoice from './showInvoice'
import binding from './binding'
import cooperation from './cooperation'
import { mapState } from 'vuex'
import loading from './loadingicon'

let types = {
  warn: '提示',
  error: '错误',
  success: '成功'
}

let typesEn = {
  warn: 'Message',
  error: 'Error',
  success: 'Success'
}
export default {
  components: {pointRecharge, binding, loading, cooperation, capacityRecharge, editInvoice, showInvoice},
  data () {
    return {
      visible: false,
      bindingType: 1,
      sceneNum: '',
      cooType: '',
      capacitytype: '',
      capacityvisible: false,
      ponintVisible: false,
      editVisible: false,
      showVisible: false,
      bindingVisible: false,
      cooperationVisible: false,
      editItem: '',
      showItem: '',
      capacitydetail: '',
      capacitycountry: 0,
      capacitycount: 0,
      capacityitem: '',
      capacitychildName: '',
      capacitydeadline: '',
      pointid: '',
      pointitem: '',
      pointchildName: '',
      message: '',
      type: 'warn',
      toastType: 'show',
      callback: '',
      cooCallback: '',
      cancal: '',
      diycomfirm: '',
      isLoaing: false,
      comfirmtxt: localStorage.getItem('language') === 'en' ? 'OK' : '确定',
      img: this.$cdn + 'images/icon/warn.png',
      lang: localStorage.getItem('language')
    }
  },
  computed: {
    ...mapState({
      info: state => state.user.info
    }),
    typeTxt () {
      return this.lang === 'en' ? typesEn[this.type] : types[this.type]
    }
  },
  created () {},
  watch: {
    visible: function (newVal) {
      this.lang = localStorage.getItem('language')
      this.comfirmtxt = this.lang === 'en' ? 'OK' : '确定'
    },
    localStorage: function (newVal) {
      console.log(newVal)
    }
  },
  mounted () {

  },
  methods: {
    handleCooClose (data) {
      this.cooperationVisible = false
      data === 'getList' && this.emitCooCallback()
    },
    qixianHandle (data) {
      this.capacityitem.month = data
    },
    renewhandle (data) {
      this.capacityitem = data.item
      this.capacitycount++
      this.capacitydeadline = data.deadLine
    },
    capacityhandle (data) {
      if (data) {
        this.callback()
      }
      this.capacityitem = ''
      this.capacitycount = 0
      this.capacityvisible = false
    },

    invoicehandle (data) {
      this.editVisible = false
    },

    pointshandle (data) {
      if (data) {
        this.callback()
      }
      this.ponintVisible = false
    },
    emitCooCallback () {
      this.cooCallback && this.cooCallback()
      this.visible = false
    },
    emitCallback () {
      this.callback && this.callback()
      this.visible = false
    }
  }
}
</script>

<style lang="scss" scoped>
@import './style.scss';
</style>