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' @closePoint="()=>{cooperationVisible = false,emitCallback()}"/>

    <div
      class="toast-layout"
      :style="{background:isLoaing?'none':'rgba(0, 0, 0, 0.3)'}"
      :class="{'toast-active':isLoaing}"
    >
      <div class="loading">
        <svg viewBox="0 0 28 19">
          <path
            d="M4 0l3 3C5.151 4.589 4.141 6.938 4 9c.141 2.994 1.18 5.374 3 7l-3 3c-2.512-2.51-4-5.919-4-10 0-3.134 1.446-6.499 4-9zm20 0c2.554 2.501 4 5.866 4 9 0 4.081-1.488 7.49-4 10l-3-3c1.82-1.626 2.859-4.006 3-7-.141-2.062-1.151-4.411-3-6l3-3z"
          ></path>
        </svg>
      </div>
    </div>
    <div
      class="toast-layout toast-show"
      :style="{background:isLoaing?'none':'rgba(0, 0, 0, 0.3)'}"
      :class="{'toast-active':visible}"
      v-if="toastType === 'show'"
    >
      <div class="toast-con">
        <div class="toast-icon">
          <h-icon :type="iconType" />
        </div>
        <div class="detail">
          <div>
            <p class="main-msg" v-html="message"></p>
            <p class="sub-msg">{{submsg}}</p>
          </div>
        </div>
        <div class="toast-show-bottom">
          <span class="" @click="emitCallback">{{diycomfirm||comfirmtxt}}</span>
        </div>
      </div>
    </div>
    <div
      class="toast-layout"
      :style="{background:isLoaing?'none':'rgba(0, 0, 0, 0.3)'}"
      :class="{'toast-active':visible}"
      v-else
    >
      <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'

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

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

export default {
  components: {binding, addcart, cooperation},
  data () {
    return {
      bindingType: 1,
      sceneNum: '',
      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]
    },
    iconType () {
      return iconType[this.type] || 'tanhao'
    }
  },
  created () {},
  watch: {
    visible: function (newVal) {
      this.lang = localStorage.getItem('language')
      this.comfirmtxt = this.lang === 'en' ? 'OK' : '确定'
    }
  },
  mounted () {},
  methods: {
    handleAddCart (data) {
      this.addcartVisible = false
      data && this.callback()
    },
    emitCallback () {
      this.callback()
      this.visible = false
    }
  }
}
</script>

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