check-work/src/views/NewPlatform/Children/Service.vue

<template>
  <div>
    <banner :show-page="showPage" />
    <h-nav />
    <div class="inner">
      <bread-crumb :arr="arr" />
    </div>
    <div class="flow-path">
      <div class="flow-title">服务流程</div>
      <div class="flow-content">
        您
        <span @click="$router.push('/register')" class="login-color">注册</span>、
        <span @click="$router.push('/login')" class="login-color">登录</span> 后通过直接申请或加入购物车进行申请服务， 直接申请后在个人中心查看， 加入
        <span
          @click="$router.push('/Cart')"
          class="login-color"
        >购物车</span> 后可通过顶部菜单栏的购物车查看。
      </div>
    </div>
    <div class="flow-path1 white">
      <div class="flow-content white d-flex flex-column pb-5">
        <img src="~assets/image.jpeg" style="width:80%" />
        <div class="font-16 line-height-36 textColor mt-4">
          ① 申请服务：选择服务项目
          <br />② 提交委托单/协议：电话或其他方式联系买家，填写并提交委托单/协议 线下沟通
          <br />③ 确认委托单/协议：卖家提供服务时间及价格，买家确认委托单/协议。 签订协议
          <br />④ 付款：接受线上或线下支付，可分批次付款。
          <br />⑤ 接受服务：买家提供材料（试验样品或试验方案等），卖家提供服务
          <br />⑥ 获得结果：卖家提交结果及发票，买家获取结果。
        </div>
      </div>
    </div>
    <div class="inner d-flex flex-wrap" style="margin: 60px auto">
      <div
        :class="(index + 1) % 4 === 0 ? 'margin-0' : ''"
        :key="index"
        class="item-box mb-8"
        v-for="(item, index) in list"
      >
        <img :src="item.picUrl" style="height: 220px; width: 100%; border: 1px solid #ccc" />
        <p class="font-24 item-title">{{ item.name }}</p>
        <p class="font-24 my-4 item-content">{{ item.intro }}</p>
        <p
          @click="jump(item.id)"
          class="font-16 baseColor"
          style="text-align: right; cursor: pointer"
        >了解更多→</p>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex';
import { selService } from 'config/api';
import Banner from 'components/Banner/Banner.vue';
import HNav from './../components/HNav.vue';
import BreadCrumb from 'components/BreadCrumb/BreadCrumb.vue';
export default {
  name: 'Service',
  components: { HNav, Banner, BreadCrumb },
  data() {
    return {
      str: '这是服务界面',
      title: '知识培训服务平台',
      typeOfPlatform: '创新平台',
      arr: [
        { name: '创新平台', url: '/NewPlatform/NewCore' },
        { name: '知识培训服务平台', url: '/NewPlatform/NewService' },
      ],
      showPage: 33,
      list: [],
      current: 1,
      pageSize: 8,
      total: 0,
    };
  },
  created() {
    this.getService();
  },
  methods: {
    ...mapMutations('home', ['setServiceArr']),
    // 获取服务列表
    async getService() {
      try {
        const params = { param: { serviceType: 1 } };
        const res = await selService(params);
        const { code, data, msg } = res.data;
        if (code === 200) {
          this.list = data;
        }
      } catch (error) {
        console.log(data);
      }
    },
    // 查看 服务 详情
    jump(id) {
      this.setServiceArr([]);
      this.setServiceArr(this.arr);
      this.$router.push({
        path: '/NewPlatform/ServiceDet',
        name: 'ServiceDet',
        params: { id },
      });
    },
  },
};
</script>

<style lang="stylus" scoped>
.inner {
  margin: 10px auto 15px;
}

.pagination {
  margin: 40px 0;
  text-align: right;
}

.item-box {
  position: relative;
  width: 20.5%;
  margin-right: 6%;
  border-radius: 4px;
}

.margin-0 {
  margin-right: 0 !important;
}

.item-title {
  position: absolute;
  top: 100px;
  width: 100%;
  text-align: center;
}

.item-content {
  font-size: 16px;
  color: rgba(0, 0, 0, 0.65);
}

.flow-path1 {
  padding: 80px 9%;
  position: relative;

  .flow-content {
    width: 80%;
  }
}
</style>