proginn-frontend/pages/credit/_type.vue

<template>
  <div class="creditIndex">
    <credit-common-title :data="topAreaData"/>
    <section class="contentArea">
      <div class="tabList">
        <div class="cell" v-for="item in typeList" :key="item.type" @click="jumpTo(item.topAreaData.url)">
          <p class="word">{{item.topAreaData.tabTitle || item.topAreaData.title}}</p>
          <p class="line" v-if="item.type === type"></p>
        </div>
      </div>
      <div class="list">
        <div class="cell" v-for="(item, index) in list" :key="'creditIndexList' + index">
          <div class="cellBody">
            <div class="left">
              <img :src="item.icon" alt="">
            </div>
            <div class="center">
              <p class="title">{{item.title}}</p>
              <p class="subTitle">{{item.subTitle}}</p>
            </div>
            <div
              class="right"
              :class="item.rightStatus || ''"
              @click="jumpTo(item.jumpUrl, item)">
              <p>{{item.rightName}}</p>
            </div>
          </div>
        </div>
      </div>
    </section>
    <ToastIndex :type="toastType" :closeToast="closeToast" :dataInfo="toastDataInfo" :submitRefresh="refresh"/>
  </div>
</template>

<script>
  import CreditCommonTitle from '@/components/credit/header.vue'
  import ToastIndex from '@/components/credit/toastIndex.vue'
  import data from '../../components/credit/data'
  import DealData from '../../components/credit/dealData'

  /**
   * type: 'project'      //项目经验
   * type: 'identify'     //身份特征
   * type: 'professional' //专业经历
   * type: 'credit'       //社会信用
   * type: 'other'      //其他
   */
  export default {
    layout: "opacity_header",
    components: { CreditCommonTitle, ToastIndex },
    head() {
      return {
        title: '程序员客栈技术信用-程序员技术开发能力认证，企业程序员背调专用数据平台',
        meta: [ {
          'name': 'keywords',
          'content': '技术信用,程序员背调,程序员技术能力认证'
        }, {
          'name': 'descrption',
          'content': '程序员客栈技术信用平台依托多年的程序员数据，提供程序员技能等级认证，服务口碑，就业情况数据核实。为每一位入驻的程序员提供真实有效符合自身能力的技术信用认证，给用工单位提供所录用的程序员以往从业经历或者服务历史口碑的准确报告；对接程序员和用工企业，找出最适合程序员发展的平台，为用工单位提供最合适的程序员人选。程序员技术信用认证、程序员背景调查，请认准程序员客栈技术信用平台！'
        }, {
          'name': 'h1',
          'content': '技术信用'
        } ]
      }
    },
    async asyncData({ $axios, params, req, store}) {
      let userinfo = store.state.userinfo
      const dealData = new DealData({ $axios, req, userinfo})
      const type = params.type || 'identify'
      let { topAreaData, list } = data[ type ]
      //处理数据，假若有 跳转链接, 设置按钮样式
      list.forEach(item => {
        if (item.jumpUrl) {
          item.rightStatus = 'ok click'
        }
      })

      switch (params.type) {
        case 'professional': //专业经历
          list = await dealData.professional(list)
          break
        case 'identify': //身份特征
          list = await dealData.identify(list)
          break
        case 'project': //项目经验
          list = await dealData.project(list)
          break
        case 'credit': //社会信用
          list = await dealData.credit(list)
          break
      }

      //data转化为数组
      let typeList = []
      for (let key in data) {
        if (data[ key ] && data[ key ].list) {
          typeList.push({
            type: key,
            ...data[ key ]
          })
        }
      }
      return {
        typeList,
        type,
        list,
        topAreaData,
      }
    },
    data() {
      return {
        toastType: '',
        toastDataInfo: {},

      }
    },
    mounted() {
      this.needLogin();
    },
    methods: {
      jumpTo(url, item) {
        console.log('点击', "url", url, "item", item)
        if (url) {
          switch (url) {
            case 'openRealNameAuth':  //打开实名认证弹窗
              console.log('openRealNameAuth 打开实名认证弹窗')
              this.toastType = 'openRealNameAuth'
              this.toastDataInfo = item || {}
              break;
            case 'openEducation':  //打开最高学历认证
              console.log('openEducation 打开最高学历认证')
              this.toastType = 'openEducation'
              this.toastDataInfo = item || {}
              break;
            case 'openWorkHistory':  //工作经历弹窗
              console.log('openWorkHistory 工作经历弹窗')
              this.toastType = 'openWorkHistory'
              this.toastDataInfo = item || {}
              break;
            default:
              location.href = url
          }
        }
      },
      closeToast() {
        this.toastType = ''
      },
      async refresh(type) {
        const dealData = new DealData({
            $axios: this.$axios,
            res: { header: {} },
            userinfo: this.$store.state.userinfo
        })
        switch (type) {
          case 'openWorkHistory':
            this.list = await dealData.professional(this.list)
            break
          case 'openEducation':
            this.list = await dealData.identify(this.list)
            break
        }
      }
    }
  }
</script>

<style scope lang="scss">
  @import "../../assets/css/credit/type.scss";
</style>