nuxtProject/pages/product/shiChangYingXiao.vue

<template>
  <div class="client-platform-page client-exam-page">
    <!--  广告  -->
    <div class="client-banner-box">
      <div
        :style="{backgroundImage: `url(${bannerList[0].pic || require(`~/static/images/client/train/train-banner-background.png`)})`}"
        class="client-platform-banner"></div>
      <h3>市场营销</h3>
      <p>从专员到经理，为企业龙头部门全面赋能</p>
      <span>市场部、销售部</span>
    </div>

    <!--  市场部 销售部  -->
    <div class="client-shichang-xiaoshou">
      <div>
        <span @click="changeStatus('shichang')" :class="{active: curActive}">市场部</span>
        <span @click="changeStatus('xiaoshou')" :class="{active: !curActive}">销售部</span>
      </div>

      <p v-if="curActive">
        市场部是销售决策部门信息的提供者和参谋，是把产品、服务信息传达给目标客户的企划者和执行者。
        在变幻莫测的市场上，市场部为企业辩路、寻路、带路，对企业的发展起着至关重要的作用。
      </p>

      <p v-else>
        销售部是以产品销售为主要工作的部门。负责总体的营销活动，决定公司的营销策略和措施，
        并对营销工作进行评估和监控，包括公共关系、销售、客户服务等。
      </p>
    </div>

    <!--  岗位职责  -->
    <div class="client-gangwei-box">
      <h4>岗位职责</h4>

      <ul v-if="curActive">
        <li>
          <i></i>
          <span>策划市场推广方案</span>
        </li>
        <li>
          <i></i>
          <span>开展市场调研活动</span>
        </li>
        <li>
          <i></i>
          <span>品牌推广与运营</span>
        </li>
        <li>
          <i></i>
          <span>计划拓展市场预算</span>
        </li>
        <li>
          <i></i>
          <span>建立媒体运营矩阵</span>
        </li>
        <li>
          <i></i>
          <span>协助销售部门工作</span>
        </li>
      </ul>

      <ul v-else>
        <li>
          <i></i>
          <span>制定销售计划</span>
        </li>
        <li>
          <i></i>
          <span>销售信息收集</span>
        </li>
        <li>
          <i></i>
          <span>客户关系管理</span>
        </li>
        <li>
          <i></i>
          <span>严守职业道德</span>
        </li>
        <li>
          <i></i>
          <span>销售费用控制</span>
        </li>
        <li>
          <i></i>
          <span>协助市场开发</span>
        </li>
      </ul>
    </div>

    <!--  部分课程列表  -->
    <div class="platform-course-list">
      <h4>部分课程列表</h4>

      <mtaTable v-if="curActive" :data="tableData" :config="tableConfig" @shi-kan="shiKan"></mtaTable>

      <mtaTable v-else :data="tableData2" :config="tableConfig" @shi-kan="shiKan"></mtaTable>
      <div class="btns-group">
        <a class="client-default-Btn">
          <freeTrialBtn  myType="kaoshi"/>
        </a>
        <onlineInformationBtn class="client-default-Btn" />
      </div>
    </div>

    <videoDialog :source="curVideo" :visible.sync="visible"></videoDialog>
  </div>
</template>

<script>
import mtaTable from "~/components/common/mtaTable";
import videoDialog from "~/components/common/videoDialog";
import freeTrialBtn from "~/components/common/freeTrialBtn";
import onlineInformationBtn from "~/components/common/onlineInformationBtn";
import {BannerImgs} from "~/defaultConfig";
/**
 * @ 产品与服务 -> 课程资源 -> 市场营销
 */

export default {
  name: "professionalQuality",
  layout:   'templateB',
  async asyncData({$axios}) {
    const arr = [
      $axios.$post(`/home/banner/list`, {'code': BannerImgs.shichangyingxiao}),
    ]
    const [res1] = await Promise.all(arr);
    return {
      bannerList: res1.data.data || [],
    }
  },
  components: {
    mtaTable, videoDialog,
    freeTrialBtn,onlineInformationBtn},
  head(){
    return {
      title: '在线考试平台_在线考试软件_试卷软件系统',
      meta: [
        {
          name: 'keywords',
          content: '考试平台,试卷系统,试卷软件'
        },
        {
          name:'description',
          content:'麦塔考试系统具有良好高并发性和访问安全部署、严格的考试监控防作弊功能、PC移动支持多终端，随时随地考试、丰富的考试管理功能。'
        }
      ],
    }
  },
  data() {
    return {
      tableConfig: [
        {
          label: '课程名称',
          key: 'name'
        },
        {
          label: '使用行业',
          key: 'hangye'
        },
        {
          label: '使用人群',
          key: 'renqun'
        }
      ],
      tableData: [
        {
          name: '如何分析营销环境',
          shikanUrl: 'https://1111',
          hangye: '全行业',
          renqun: '市场专员'
        },
        {
          name: '市场调查必备知识',
          shikanUrl: '',
          hangye: '全行业',
          renqun: '市场专员'
        },
        {
          name: '低成本营销策略',
          shikanUrl: '',
          hangye: '全行业',
          renqun: '市场专员'
        },
        {
          name: '如何进行有效的品牌调查',
          shikanUrl: '',
          hangye: '全行业',
          renqun: '市场专员'
        },
        {
          name: '铁军式营销',
          shikanUrl: '',
          hangye: '全行业',
          renqun: '市场专员'
        },
        {
          name: '区域市场管理的重点',
          shikanUrl: '',
          hangye: '全行业',
          renqun: '市场经理'
        },
        {
          name: '区域市场运作的认知与思考',
          shikanUrl: '',
          hangye: '全行业',
          renqun: '市场经理'
        },
        {
          name: '创新营销',
          shikanUrl: '',
          hangye: '全行业',
          renqun: '市场经理'
        },
        {
          name: '商务谈判的共赢之路',
          shikanUrl: '',
          hangye: '全行业',
          renqun: '市场经理'
        },
        {
          name: '企业微信营销管理全攻略',
          shikanUrl: '',
          hangye: '全行业',
          renqun: '市场经理'
        },
      ],
      tableData2: [
        {
          name: '高品质沟通与说服力',
          shikanUrl: 'https://1111',
          hangye: '全行业',
          renqun: '市场专员'
        },
        {
          name: '攻心销售',
          shikanUrl: '',
          hangye: '全行业',
          renqun: '市场专员'
        },
        {
          name: '如何处理客户异议',
          shikanUrl: '',
          hangye: '全行业',
          renqun: '市场专员'
        },
        {
          name: '如何客服沟通障碍',
          shikanUrl: '',
          hangye: '全行业',
          renqun: '市场专员'
        },
        {
          name: '销售团队建设与管理',
          shikanUrl: '',
          hangye: '全行业',
          renqun: '市场专员'
        },
        {
          name: '大客户销售与管理',
          shikanUrl: '',
          hangye: '全行业',
          renqun: '市场经理'
        },
        {
          name: '销量倍增--激活经销商',
          shikanUrl: '',
          hangye: '全行业',
          renqun: '市场经理'
        },
        {
          name: '如何打造销售团队的激励体系',
          shikanUrl: '',
          hangye: '全行业',
          renqun: '市场经理'
        },
        {
          name: '原来这样销售可以百分百成交',
          shikanUrl: '',
          hangye: '全行业',
          renqun: '市场经理'
        },
        {
          name: '商务谈判锦囊妙计',
          shikanUrl: '',
          hangye: '全行业',
          renqun: '市场经理'
        },
      ],
      curVideo: '',
      visible: false,
      curActive: true,
    }
  },
  methods: {
    shiKan({url}) {
      this.visible = true;
      this.curVideo = url;
    },
    changeStatus(code) {
      if (code === 'shichang') {
        this.curActive = true;
      } else {
        this.curActive = false;
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.client-exam-page {
  margin-top: 70px;
}

.client-banner-box {
  height: 200px;
  background: green;
  text-align: center;
  color: #fff;
}
.btns-group {
  display: flex;
  text-align: center;
.client-default-Btn {
  width: 120px;
  margin-right: 20px;
}
}
</style>