his-answer/src/pages/FormVolume/mixins/index.js

import * as api from '@/api'
import Custom from './custom'
export default {
  data() {
    return {
      TITLE: '问卷调查',
      data: {
        result: [],
        topic: {}
      },
      loading: {
        data: false,
        empty: false,
        submit: false
      },
      show: {
        submit: false
      },
      codeMess: {
        num: 3,
        message: '自动跳转',
        disabled: false,
        t: null
      }
    };
  },
  watch: {
    $route(to, from) {
      if (from.name === 'FormVolume') {
        clearInterval(this.codeMess.t)
      }
    }
  },
  destroyed() {
    clearInterval(this.codeMess.t)
  },
  created() {
    this.vueWatchRoute()
    this.btnOpenSuccess(() => this.btnLinkBack())
  },
  methods: {
    vueWatchRoute () {
      this.inQuery()
      this.inData()
    },
    // 秒倒计时
    loopCode(num, callback) {
      let msg = '自动跳转'
      clearInterval(this.codeMess.t)
      function loopNum() {
        if (num < 1) {
          this.codeMess['message'] = msg
          this.codeMess['disabled'] = false
          clearInterval(this.codeMess.t)
          callback && callback()
          return
        }
        this.codeMess['disabled'] = true
        this.codeMess['message'] = `${num}s ${msg}`
        num = num - 1
      }
      loopNum.call(this)
      this.codeMess.t = setInterval(() => loopNum.call(this), 1000)
    },
    inQuery () {
      let { title } = this.$route.query
      if (title) {
        this.TITLE = title
      }
    },
    isForm (callback) {
      return new Promise((resolve, reject) => {
        let state = this.data.result.some(item => {
          if (!item.required) {
            return false
          }
          let b = item.val instanceof Array ? !!item.val.length : !!item.val
          !b && callback && callback(item)
          return !b
        })
        state ? reject() : resolve()
      })
    },
    async inData() {
      this.loading.data = true
      this.loading.empty = false
      try {
        let { result_id } = this.$route.query
        let pm = result_id
          ? api.apiGetVolumeResult({ result_id })
          : api.apiGetVolumeInfo(this.$route.query)
        let res = await pm
        let data = res.data
        let configType = {
          'radio': '单选',
          'checkbox': '多选'
        }
        data.result.forEach(item => {
          item.layout_align = item.layout_align || data.topic.layout_align || 'left'
          item.layout_inline = item.layout_inline || data.topic.layout_inline || 1
          item.type_name = configType[item.type] || ''

          // 自定义组件处理
          Custom(item)
        })
        if (data.topic.memo) {
          data.topic.memo = data.topic.memo.replace(/\n/g, '<br />')
        }
        if (this.layoutType) {
          this.layoutCurrent = this.layoutType[data.topic.layout_type] || 'van-empty'
        }
        this.$set(this, 'data', data)
      } catch (error) {
        this.loading.empty = true
        console.log(error)
      }
      this.loading.data = false
    },
    btnOpenSuccess(callback) {
      this.show.submit = true
      // this.loopCode(this.codeMess.num, async () => {
      //   this.show.submit = false
      //   await this.$nextTick()
      //   callback && callback()
      // })
    },
    async btnSubmit() {
      this.loading.submit = true
      let ld = null
      try {
        await this.isForm(item => {
          this.$dialog.alert({
            title: '必填项',
            message: `${item.title}`,
          })
        })
        await this.$dialog.confirm({
          title: '提示',
          message: '请确认无误提交？',
        })
        ld = this.$toast.loading({ message: '提交中...', duration: 0 })
        let result = this.data.result.map(item => ({ detail_id: item.detail_id, val: item.val }))
        let query = {
          ...this.$route.query,
          data: JSON.stringify(result)
        }
        await api.apiPostVolumeInfo(query)
        this.btnOpenSuccess(() => this.btnLinkBack())
      } catch (error) {
        console.log(error)
      }
      ld && ld.clear()
      this.loading.submit = false
    },
    btnLinkBack() {
      let { go, replace } = this.$route.query
      replace
        ? this.$router.replace({ name: replace })
        : this.$router.go(go || -1)
    }
  }
}