@[toc]

作用

多个页面需要一个功能时，用mixins进行复用，使代码更简洁

流程

1 新建一个 mixin 文件 mixins/loginConfirm.js

export default {
   
  methods: {
   
    // 是否需要弹登录确认框
    // (1) 需要，返回 true，并直接弹出登录确认框
    // (2) 不需要，返回 false
    loginConfirm () {
   
      if (!this.$store.getters.token) {
   
        this.$dialog.confirm({
   
          title: '温馨提示',
          message: '此时需要先登录才能继续操作哦',
          confirmButtonText: '去登陆',
          cancelButtonText: '再逛逛'
        })
          .then(() => {
   
            // 如果希望，跳转到登录 => 登录后能回跳回来，需要在跳转去携带参数 (当前的路径地址)
            // this.$route.fullPath (会包含查询参数)
            this.$router.replace({
   
              path: '/login',
              query: {
   
                backUrl: this.$route.fullPath
              }
              //route.fullPath 包含从基本URL后开始的路径，假设基本URL（base URL）为 /app，并且当前路由为 /app/home?a=1，那么route.path的值将是 /home?a=1；
            })
          })
          .catch(() => {
   })
        return true
      }
      return false
    }
  }
}

2 页面中导入，混入方法

import loginConfirm from '@/mixins/loginConfirm'

export default {
   
  name: 'ProDetail',
  mixins: [loginConfirm],
  ...
}

3 页面中调用 混入的方法

async addCart () {
   
  if (this.loginConfirm()) {
   
    return
  }
  const {
    data } = await addCart(this.goodsId, this.addCount, this.detail.skuList[0].goods_sku_id)
  this.cartTotal = data.cartTotal
  this.$toast('加入购物车成功')
  this.showPannel = false
  console.log(this.cartTotal)
},

goBuyNow () {
   
  if (this.loginConfirm()) {
   
    return
  }
  this.$router.push({
   
    path: '/pay',
    query: {
   
      mode: 'buyNow',
      goodsId: this.goodsId,
      goodsSkuId: this.detail.skuList[0].goods_sku_id,
      goodsNum: this.addCount
    }
  })
}