caimei-authentic-manager/src/layout/components/VipTipDialog/index.vue

<template>
  <el-dialog
    title="提示"
    :visible="allShowVipTip && vipTipVisiable"
    width="24%"
    :close-on-click-modal="false"
    center
  >
    <div>{{ contentText }}</div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="allShowVipTip = false">取消</el-button>
      <el-button type="primary" @click="toOpenVipPage">开通会员</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'VipTipDialog',
  data() {
    return {
      allShowVipTip: true
    }
  },
  computed: {
    ...mapGetters(['vipInfo']),
    vipTipVisiable() {
      return this.vipInfo.freeUseFlag > 0
    },
    contentText() {
      const insertText = ['', '账号试用即将到期', '账号试用已到期', '会员账号即将到期', '会员账号已到期']
      return `对不起，您的账号${insertText[this.vipInfo.freeUseFlag]}，请尽快开通会员，以免影响正常使用`
    }
  },
  methods: {
    toOpenVipPage() {
      this.allShowVipTip = false
      this.$router.push('/vip/vip-open')
    }
  }
}
</script>