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

<template>
  <div>
    <binding :btype="bindingType" :visible='bindingVisible' @closePoint="()=>{bindingVisible = false,emitCallback()}"/>
    <addcart :visible='addcartVisible' :img='img' :msg='addcartmsg' :txt='addcarbtnTxt' @closePoint="handleAddCart" />
    <cooperation :sceneNum="sceneNum" :visible='cooperationVisible' :cooType="cooType" @closePoint="handleCooClose"/>

    <div
      class="toast-layout"
      :style="{background:isLoaing?'none':'rgba(0, 0, 0, 0.3)'}"
      :class="{'toast-active':isLoaing}"
    >
      <div class="loading">
        <loading/>
      </div>
    </div>
    <div
      class="toast-layout"
      :style="{background:isLoaing?'none':'rgba(0, 0, 0, 0.3)'}"
      :class="{'toast-active':visible}"
    >
      <div class="toast-con">
        <div class="detail">
          <div>
            <p class="main-msg" v-html="message"></p>
            <p class="sub-msg">{{submsg}}</p>
          </div>
        </div>
        <div class="bottom" v-if="toastType==='comfirm'">
          <span @click="visible=false" class="btn primary">{{lang==='en'?'Cancel':'取消'}}</span>
          <span class="b-line"></span>
          <span class="btn primary" @click="emitCallback">{{diycomfirm||comfirmtxt}}</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 binding from './binding'
import addcart from './addcart'
import cooperation from './cooperation'
import loading from './loadingicon'

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

let typesEn = {
  warn: 'Message',
  error: 'Error',
  success: 'Success'
}

export default {
  components: {binding, addcart, loading, cooperation},
  data () {
    return {
      bindingType: 1,
      sceneNum: '',
      cooType: '',
      visible: false,
      bindingVisible: false,
      addcartVisible: false,
      addcartmsg: false,
      cooperationVisible: false,
      addcarbtnTxt: false,
      message: '',
      submsg: '',
      type: 'warn',
      toastType: 'show',
      callback: '',
      comfirmtxt: '确定',
      diycomfirm: '',
      isLoaing: false,
      lang: localStorage.getItem('language'),
      img: this.$cdn + 'images/icon/warn.png'
    }
  },
  computed: {
    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' : '确定'
    }
  },
  mounted () {},
  methods: {
    handleCooClose (data) {
      this.cooperationVisible = false
      data === 'getList' && this.emitCooCallback()
    },
    emitCooCallback () {
      this.cooCallback && this.cooCallback()
      this.visible = false
    },
    handleAddCart (data) {
      this.addcartVisible = false
      data && this.callback()
    },
    emitCallback () {
      this.callback()
      this.visible = false
    }
  }
}
</script>

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