数据服务详情

src/components/comments-list.vue

+<template>
+  <ul class="comments_list">
+    <li
+      class="comment_card"
+      v-for="(item, index) in data"
+      :key="'comment_' + index"
+    >
+      <div class="comment-left">
+        <el-avatar :size="60" fit="cover" :src="item.img" />
+      </div>
+      <div class="comment-right">
+        <p class="comment-user_name" v-text="item.name"></p>
+        <div class="commnet-rate">
+          <el-rate
+            :colors="['#e69232', '#e69232', '#e69232']"
+            :value="item.star"
+            disabled
+            score-template="{value}"
+          >
+          </el-rate>
+        </div>
+        <p class="comment-description" v-text="item.description"></p>
+        <p class="comment-time" v-text="item.time"></p>
+      </div>
+    </li>
+  </ul>
+</template>
+
+<script>
+export default {
+  props: {
+    data: {
+      type: Array,
+      required: true,
+    },
+  },
+  data: () => ({}),
+  methods: {},
+  created() {},
+};
+</script>
+
+<style scoped>
+.comment_card {
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+  padding: 25px 0;
+  border-top: 2px solid #f4f7fc;
+}
+.comment_card:last-child {
+  border-bottom: 2px solid #f4f7fc;
+}
+.comment-left {
+  flex-shrink: 0;
+  padding-top: 5px;
+  margin-right: 27px;
+}
+.comment-right {
+  font-size: 16px;
+  line-height: 25px;
+}
+.comment-right > .comment-user_name {
+  padding-left: 3px;
+  color: #58617a;
+}
+.comment-right > .comment-description {
+  padding-left: 3px;
+  color: #242c43;
+  margin-top: 10px;
+}
+.comment-right > .comment-time {
+  padding-left: 3px;
+  color: #8890a7;
+  margin-top: 3px;
+}
+</style>
+
+<style>
+.comment-right > .commnet-rate .el-rate {
+  height: 25px;
+}
+.comment-right > .commnet-rate .el-rate__icon {
+  font-size: 25px;
+  margin-right: 0;
+}
+</style>

src/components/comments-score.vue

+<template>
+  <div class="comments_score">
+    <div class="comments_score-left">
+      <span v-text="data.score"></span>
+    </div>
+    <div class="comments_score-center">
+      <p class="comment-full_score">满分5分</p>
+      <div class="comment-total_rata">
+        <el-rate
+          :colors="['#e69232', '#e69232', '#e69232']"
+          :value="data.score"
+          disabled
+        >
+        </el-rate>
+      </div>
+      <p class="commen-total_count" v-text="'共' + data.total + '个评分'"></p>
+    </div>
+    <ul class="comments_score-right">
+      <li
+        class="comments_score_item"
+        v-for="(item, index) in data.starInfo"
+        :key="'star_info_' + index"
+      >
+        <el-rate
+          class="comments_score_item-rate"
+          :colors="['#8890a7', '#8890a7', '#8890a7']"
+          :value="item.star"
+          disabled
+          disabled-void-color="transparent"
+        >
+        </el-rate>
+        <el-progress
+          class="comments_score_item-progress"
+          :percentage="item.percent"
+          :show-text="false"
+          color="#ea7d19"
+        ></el-progress>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    data: {
+      type: Object,
+      required: true,
+    },
+  },
+  data: () => ({}),
+  methods: {},
+  created() {},
+};
+</script>
+
+<style scoped>
+.comments_score {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  margin-bottom: 35px;
+}
+.comments_score-left {
+  flex-shrink: 0;
+  width: 96px;
+  height: 110px;
+  background-image: url(../assets/imgs/score_bg.png);
+  background-size: 100% 100%;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  font-family: Arial;
+  font-size: 50px;
+  font-weight: bold;
+  margin-right: 25px;
+}
+.comments_score-center {
+  flex-shrink: 0;
+  padding-right: 48px;
+  border-right: 2px solid #f4f7fc;
+  margin-right: 48px;
+}
+.comments_score-center > .comment-full_score {
+  padding-left: 5px;
+  font-size: 14px;
+  line-height: 25px;
+  color: #a9aec0;
+}
+.comments_score-center > .comment-total_rata {
+  margin-top: 10px;
+}
+.comments_score-center > .commen-total_count {
+  padding-left: 5px;
+  font-size: 14px;
+  line-height: 25px;
+  color: #3f4f9c;
+  margin-top: 2px;
+}
+.comments_score-right {
+  flex-grow: 1;
+}
+.comments_score_item {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+.comments_score_item-rate {
+  display: inline-flex;
+  flex-direction: row-reverse;
+  justify-content: flex-start;
+  align-items: center;
+}
+.comments_score_item-progress {
+  flex-grow: 1;
+  max-width: 200px;
+  margin-left: 10px;
+}
+</style>
+
+<style>
+.comments_score-center > .comment-total_rata .el-rate {
+  height: 30px;
+}
+.comments_score-center > .comment-total_rata .el-rate__icon {
+  font-size: 30px;
+  margin-right: 0;
+}
+.comments_score_item-rate .el-rate {
+  height: 14px;
+}
+.comments_score_item-rate .el-rate__icon {
+  font-size: 14px;
+  margin-right: 0;
+}
+.comments_score_item-progress .el-progress-bar__outer {
+  background: #e2e3ed;
+}
+</style>

src/components/servive-content.vue → src/components/service-info.vue

 <template>
-  <div class="sevice_content" v-if="serviceData">
+  <div class="sevice_info" v-if="serviceData">
     <div class="service_title">
       <span class="service_name" v-text="serviceData.name"></span>
-      <span class="service_type" v-if="serviceData.type" v-text="serviceData.type">共享</span>
-      <span class="service_level" v-text="serviceData.openLevel">共享</span>
+      <span
+        class="service_type"
+        v-if="serviceData.type"
+        v-text="serviceData.type"
+      ></span>
+      <span class="service_level" v-text="serviceData.openLevel"></span>
       <span class="service_access_info">
         <img :src="require('@/assets/imgs/icon_liulan.png')" />
         <span v-text="'浏览次数：' + serviceData.viewCount"></span>
@@ -13,11 +17,11 @@
         <span v-text="'获取次数：' + serviceData.acquireCount"></span>
       </span>
     </div>
-    <div class="main_content">
-      <div class="left_content" v-if="serviceData.img">
+    <div class="main_container">
+      <div class="main_container-left" v-if="serviceData.img">
         <img :src="serviceData.img" width="460" />
       </div>
-      <div class="right_content">
+      <div class="main_container-right">
         <ul class="service_base_info">
           <li>
             <span>提供机构：</span>
@@ -57,7 +61,7 @@
               "
               @click="changeSpecification(item)"
             >
-              {{ index + 1 + ". " + item.name }}
+              {{ item.name }}
             </el-button>
           </div>
         </div>
@@ -70,11 +74,11 @@
           <div class="btn_container">
             <el-button
               v-for="(item, index) in serviceData.ways"
+              v-text="item.name"
               :key="'way_' + index"
               :type="item.value === commodityData.way ? 'primary' : 'default'"
               @click="changeWay(item)"
             >
-              按月购买
             </el-button>
           </div>
         </div>
@@ -139,27 +143,27 @@ export default {
       console.log(this.commodityData);
     },
   },
-  mounted() {},
 };
 </script>
 
 <style scoped>
-.sevice_content {
+.sevice_info {
   padding: 20px;
   background-color: #fff;
+  margin-bottom: 20px;
 }
-.main_content {
+.main_container {
   display: flex;
   justify-content: flex-start;
   align-items: flex-start;
   margin-top: 25px;
 }
-.left_content {
+.main_container-left {
   padding: 3px;
   background-color: #f9fafc;
   margin-right: 30px;
 }
-.right_content {
+.main_container-right {
   flex-grow: 1;
 }
 .service_title {
@@ -266,16 +270,16 @@ export default {
   width: 220px;
   margin-left: 20px;
 }
-.sevice_content .el-button--primary {
+.sevice_info .el-button--primary {
   background-color: #515fe7;
   border-color: #515fe7;
 }
-.sevice_content .el-button--warning.is-plain {
+.sevice_info .el-button--warning.is-plain {
   background-color: #fcefd6;
   border-color: #fac266;
   color: #e56600;
 }
-.sevice_content .el-button--warning {
+.sevice_info .el-button--warning {
   background-color: #e56600;
   border-color: #e56600;
 }

src/components/servive-step.vue → src/components/service-step.vue

 <template>
   <div class="service_step">
-    <div class="step_bg"></div>
     <ul class="step_items">
       <li class="step_item">
         <div class="step_icon">
-            <span>1</span>
+          <span>1</span>
         </div>
         <p class="step_title">服务申请</p>
       </li>
+      <li class="step_line"></li>
       <li class="step_item">
         <div class="step_icon">
-            <span>2</span>
+          <span>2</span>
         </div>
         <p class="step_title">审核确认</p>
       </li>
+      <li class="step_line"></li>
       <li class="step_item">
         <div class="step_icon">
-            <span>3</span>
+          <span>3</span>
         </div>
         <p class="step_title">费用支付</p>
       </li>
+      <li class="step_line"></li>
       <li class="step_item">
         <div class="step_icon">
-            <span>4</span>
+          <span>4</span>
         </div>
         <p class="step_title">服务获取</p>
       </li>
@@ -32,39 +34,37 @@
 
 <style scoped>
 .service_step {
-  position: relative;
-  min-height: 48px;
-}
-.service_step > .step_bg {
-  position: absolute;
-  top: 23px;
-  right: 24px;
-  left: 24px;
-  border: 1px solid #1abc9c;
+  min-height: 68px;
+  padding: 30px 0;
 }
 .service_step > .step_items {
-  position: relative;
-  z-index: 2;
   display: flex;
-  justify-content: space-between;
+  justify-content: center;
   align-items: flex-start;
   text-align: center;
 }
+.service_step .step_line {
+  width: 168px;
+  border: 1px  solid #c0c8f8;
+  margin: 33px 10px 0;
+}
 .service_step .step_item > .step_icon {
-  width: 48px;
-  height: 48px;
+  width: 68px;
+  height: 68px;
+  background-color: #515fe7;
+  border: 10px solid #e1e3ee;
   border-radius: 50%;
-  background-color: #1abc9c;
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  font-size: 28px;
+  font-size: 20px;
   font-weight: bold;
   color: #fff;
 }
 .service_step .step_item > .step_title {
-  font-size: 12px;
+  font-size: 16px;
   line-height: 24px;
-  color: #1abc9c;
+  color: #242c43;
+  margin-top: 7px;
 }
 </style>

src/components/service-tab-comments.vue

+<template>
+  <div class="service_tab-comments">
+    <comments-score :data="data.baseInfo"></comments-score>
+    <comments-list :data="data.ffpjxxList"></comments-list>
+
+    <div class="comments_pages">
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :total="data.baseInfo.total"
+        :page-sizes="[10, 50, 100]"
+        :current-page="1"
+        :page-size="10"
+        layout="total, sizes, prev, pager, next, jumper"
+      >
+      </el-pagination>
+    </div>
+  </div>
+</template>
+
+<script>
+import commentsScore from "@/components/comments-score";
+import commentsList from "@/components/comments-list";
+
+export default {
+  components: {
+    commentsScore,
+    commentsList,
+  },
+  props: {
+    data: {
+      type: Object,
+      required: true,
+    },
+  },
+  data: () => ({}),
+  methods: {
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+    },
+  },
+  created() {},
+};
+</script>
+
+<style scoped>
+.comments_pages {
+  text-align: center;
+  margin-top: 20px;
+}
+</style>

src/components/service-tab-detail.vue

+<template>
+  <ul class="service_tab-detail">
+    <li
+      class="detail-item"
+      v-for="(item, index) in data"
+      :key="'detail-' + index"
+    >
+      <h3 class="detail-title" v-text="item.name + '：'"></h3>
+
+      <service-step v-if="item.type == 'step'"></service-step>
+      <p
+        v-else-if="item.type == 'text'"
+        class="detail-text"
+        v-text="item.value"
+      ></p>
+      <ul v-else-if="item.type == 'list'">
+        <li v-for="(v, i) in item.value" :key="'detail-li_' + index + '_' + i">
+          <p class="detail-text">
+            <span v-text="v.name + '：'"></span>
+            <span v-text="v.value"></span>
+          </p>
+        </li>
+      </ul>
+      <el-table
+        v-else-if="item.type == 'table'"
+        class="detail-table"
+        :row-key="(row) => item.name + '_' + row.zdbm"
+        default-expand-all
+        :border="false"
+        :data="item.value.datas"
+        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+      >
+        <el-table-column
+          v-for="(v, i) in item.value.columns"
+          :key="'table_column_' + index + '_' + i"
+          :prop="v.prop"
+          :label="v.label"
+          :align="v.align || 'left'"
+        ></el-table-column>
+      </el-table>
+    </li>
+  </ul>
+</template>
+
+<script>
+import serviceStep from "@/components/service-step";
+
+export default {
+  components: {
+    serviceStep,
+  },
+  props: {
+    data: {
+      type: Array,
+      required: true,
+    },
+  },
+  data: () => ({}),
+  methods: {},
+  created() {},
+};
+</script>
+
+<style scoped>
+.detail-item:not(:last-child) {
+  margin-bottom: 20px;
+}
+.detail-item .detail-title {
+  font-size: 14px;
+  line-height: 25px;
+  color: #8890a7;
+  margin-bottom: 3px;
+}
+.detail-item .detail-text {
+  font-size: 14px;
+  line-height: 25px;
+  color: #242c43;
+}
+.detail-item .detail-table {
+  width: 100%;
+}
+</style>

src/components/service-tab-provider.vue

+<template>
+  <div class="service_tab-provider">
+    <div class="provider-left">
+      <el-avatar shape="square" :size="156" fit="cover" :src="data.img" />
+    </div>
+    <div class="provider-right">
+      <p class="provider_name" v-text="data.provider"></p>
+      <div class="provider_info">
+        <p>
+          <span>联系人：</span>
+          <span v-text="data.person"></span>
+        </p>
+        <p>
+          <span>联系电话：</span>
+          <span v-text="data.phone"></span>
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    data: {
+      type: Object,
+      required: true,
+    },
+  },
+  data: () => ({}),
+  methods: {},
+  created() {},
+};
+</script>
+
+<style scoped>
+.service_tab-provider {
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+.provider-left {
+  flex-shrink: 0;
+  padding: 3px;
+  background-color: #f6f7fb;
+  border-radius: 9px;
+  font-size: 0;
+}
+.provider-left > .el-avatar--square {
+  border-radius: 7px;
+}
+.provider-right {
+  flex-grow: 1;
+  margin-left: 20px;
+}
+.provider-right > .provider_name {
+  font-size: 20px;
+  font-weight: bold;
+  color: #0d1847;
+  line-height: 36px;
+}
+.provider-right > .provider_info {
+  padding: 20px;
+  background-color: #f6f7fb;
+  border-radius: 6px;
+  margin-top: 20px;
+}
+.provider-right > .provider_info > p {
+  font-size: 14px;
+  color: #242c43;
+  line-height: 25px;
+}
+.provider-right > .provider_info > p:not(:first-child) {
+  margin-top: 16px;
+}
+.provider-right > .provider_info > p > span:first-child {
+  color: #8890a7;
+}
+</style>

src/components/service-tab-specification.vue

+<template>
+  <div class="service_tab-specification">
+    <div class="specification_header">
+      <p>申请方式：</p>
+      <type-group v-model="type" :types="types"></type-group>
+    </div>
+    <el-table class="specification_table" :data="tableData" :border="false">
+      <el-table-column prop="gg" label="规格" width="360"></el-table-column>
+      <el-table-column prop="ggsm" label="规格说明"></el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import typeGroup from "@/components/type-group";
+
+export default {
+  components: {
+    typeGroup,
+  },
+  props: {
+    data: {
+      type: Array,
+      required: true,
+    },
+  },
+  data: () => ({
+    type: "",
+    types: [],
+  }),
+  computed: {
+    tableData() {
+      return this.types.length > 0 ? this.data[this.type].data : [];
+    },
+  },
+  mounted() {
+    this.types = this.data.map((item, index) => ({
+      name: item.name,
+      value: index,
+    }));
+
+    if (this.types.length) {
+      this.type = 0;
+    }
+  },
+};
+</script>
+
+<style scoped>
+.specification_header > p {
+  font-size: 14px;
+  color: #8890a7;
+  line-height: 25px;
+  margin-bottom: 10px;
+}
+.specification_table {
+  width: 100%;
+  margin-top: 20px;
+}
+</style>

src/components/service-tabs.vue

+<template>
+  <el-tabs
+    class="service_info_tab"
+    type="border-card"
+    v-model="serviceTabsActiveName"
+    :stretch="true"
+  >
+    <el-tab-pane label="服务详情信息" name="first">
+      <service-tab-detail
+        v-if="fwxqxx"
+        class="service_info"
+        :data="fwxqxx"
+      ></service-tab-detail>
+    </el-tab-pane>
+    <el-tab-pane label="规格定价" name="second">
+      <service-tab-specification
+        v-if="ggdj"
+        class="service_info"
+        :data="ggdj"
+      ></service-tab-specification>
+    </el-tab-pane>
+    <el-tab-pane label="提供机构" name="third">
+      <service-tab-provider
+        v-if="tgjg"
+        class="service_info"
+        :data="tgjg"
+      ></service-tab-provider>
+    </el-tab-pane>
+    <el-tab-pane label="服务评价信息" name="fourth">
+      <service-tab-comments
+        v-if="ffpjxx"
+        class="service_info"
+        :data="ffpjxx"
+      ></service-tab-comments>
+    </el-tab-pane>
+  </el-tabs>
+</template>
+
+<script>
+import serviceTabDetail from "@/components/service-tab-detail";
+import serviceTabSpecification from "@/components/service-tab-specification";
+import serviceTabProvider from "@/components/service-tab-provider";
+import serviceTabComments from "@/components/service-tab-comments";
+
+export default {
+  components: {
+    serviceTabDetail,
+    serviceTabSpecification,
+    serviceTabProvider,
+    serviceTabComments,
+  },
+  props: {
+    type: {
+      type: String,
+      required: true,
+    },
+  },
+  data: () => ({
+    serviceTabsActiveName: "first",
+    fwxqxx: null, // 服务详情信息
+    ggdj: null, // 规格定价
+    tgjg: null, // 提供机构
+    ffpjxx: null, // 服务评价信息
+  }),
+  methods: {
+    getDataFromApi(_url) {
+      return new Promise((resolve, reject) => {
+        this.$http
+          .get(_url)
+          .then((response) => {
+            resolve(response.body);
+          })
+          .catch(function(error) {
+            reject(error);
+          });
+      });
+    },
+    init() {
+      this.getDataFromApi(`/static/serviceInfo.json`).then(
+        (data) => {
+          let _data = data[this.type];
+
+          this.fwxqxx = _data.fwxqxx;
+          this.ggdj = _data.ggdj;
+          this.tgjg = _data.tgjg;
+          this.ffpjxx = _data.ffpjxx;
+        },
+        (error) => {
+          console.log(error);
+        }
+      );
+    },
+  },
+  created() {
+    this.init();
+  },
+};
+</script>
+
+<style scoped>
+.service_info_tab {
+  border: none;
+  box-shadow: none;
+  margin-bottom: 40px;
+}
+.service_info {
+  padding: 35px 40px 40px;
+  box-sizing: border-box;
+}
+</style>
+
+<style>
+.service_info_tab.el-tabs--border-card > .el-tabs__content {
+  padding: 0;
+}
+.service_info_tab.el-tabs--border-card > .el-tabs__header .el-tabs__item {
+  height: 65px !important;
+  line-height: 59px !important;
+  background-color: #fff;
+  border-top: 4px solid #fff;
+  border-bottom: 2px solid #f4f7fc;
+}
+.service_info_tab.el-tabs--border-card
+  > .el-tabs__header
+  .el-tabs__item.is-active {
+  border-top: 4px solid #f5ab4c;
+  border-right: 2px solid #fcefd6;
+  border-bottom: 2px solid #fff;
+  border-left: 2px solid #fcefd6;
+  color: #e56600 !important;
+}
+.service_info_tab.el-tabs--border-card
+  > .el-tabs__header
+  .el-tabs__item:first-child {
+  border-left: none;
+}
+.service_info_tab.el-tabs--border-card
+  > .el-tabs__header
+  .el-tabs__item:last-child {
+  border-right: none;
+}
+.service_info_tab .el-table th > .cell {
+  color: #1a2236;
+}
+.service_info_tab .el-table td,
+.service_info_tab .el-table th.is-leaf {
+  border: none !important;
+}
+.service_info_tab .el-table::before {
+  display: none;
+}
+.service_info_tab .el-table__row:nth-child(odd) td {
+  background-color: #f8f9fd;
+}
+</style>

src/components/servive-info.vue

-<template>
-  <el-tabs
-    class="service_info_tab"
-    type="border-card"
-    v-model="serviceTabsActiveName"
-    :stretch="true"
-    style="margin-top: 20px;"
-  >
-    <el-tab-pane label="服务详情信息" name="first">
-      <ul class="service_info" v-if="fwxqxxDatas">
-        <li
-          class="fwxqxx_item"
-          v-for="(item, index) in fwxqxxDatas"
-          :key="'fwxqxx_' + index"
-        >
-          <h3 class="fwxqxx_title" v-text="'· ' + item.name"></h3>
-          <servive-step
-            v-if="item.type == 'step'"
-            style="margin: 0 20px;"
-          ></servive-step>
-          <p
-            v-else-if="item.type == 'text'"
-            class="fwxqxx_text"
-            v-text="item.value"
-          ></p>
-          <ul v-else-if="item.type == 'list'">
-            <li
-              v-for="(v, i) in item.value"
-              :key="'fwxqxx_li_' + index + '_' + i"
-            >
-              <p class="fwxqxx_text">
-                <span v-text="v.name + '：'"></span>
-                <span v-text="v.value"></span>
-              </p>
-            </li>
-          </ul>
-          <el-table
-            v-else-if="item.type == 'table'"
-            class="fwxqxx_table"
-            :data="item.value.datas"
-            border
-          >
-            <el-table-column
-              type="index"
-              :index="(index) => index + 1"
-              align="center"
-            >
-            </el-table-column>
-            <el-table-column
-              v-for="(v, i) in item.value.columns"
-              :key="'table_column_' + index + '_' + i"
-              :prop="v.prop"
-              :label="v.label"
-              :align="v.align || 'left'"
-            ></el-table-column>
-          </el-table>
-          <el-table
-            v-else-if="item.type == 'table2'"
-            class="fwxqxx_table fwxqxx_table_2"
-            :data="item.value.datas"
-            border
-          >
-            <el-table-column prop="name" label="" align="right" width="200">
-              <template slot-scope="scope">
-                <span v-text="scope.row.name + '：'"></span>
-              </template>
-            </el-table-column>
-            <el-table-column prop="value" label="">
-              <template slot-scope="scope">
-                <pre
-                  v-if="scope.row.type == 'code'"
-                  v-html="scope.row.value"
-                ></pre>
-                <span v-else v-text="scope.row.value"></span>
-              </template>
-            </el-table-column>
-          </el-table>
-        </li>
-      </ul>
-    </el-tab-pane>
-    <el-tab-pane label="规格定价" name="second">
-      <div class="service_info" v-if="ggdjData">
-        <div class="ggdj_header">
-          <span>购买方式：</span>
-          <el-button-group>
-            <el-button type="danger">
-              按月
-            </el-button>
-            <el-button type="default">
-              按年
-            </el-button>
-          </el-button-group>
-        </div>
-        <el-table class="ggdj_table" :data="ggdjData" border>
-          <el-table-column prop="gg" label="规格"></el-table-column>
-          <el-table-column prop="ggsm" label="规格说明"></el-table-column>
-        </el-table>
-      </div>
-    </el-tab-pane>
-    <el-tab-pane label="提供机构" name="third">
-      <div class="service_info" v-if="tgjgData">
-        <p class="tgjg_dw" v-text="tgjgData.name"></p>
-        <div class="tgjg_img">
-          <img :src="tgjgData.img" width="100%" />
-        </div>
-        <div class="tgjg_lxfs">
-          <p>联系人：<span v-text="tgjgData.lxr"></span></p>
-          <p>联系电话：<span v-text="tgjgData.lxdh"></span></p>
-        </div>
-      </div>
-    </el-tab-pane>
-    <el-tab-pane label="服务评价信息" name="fourth">
-      <div class="service_info" v-if="ffpjxxData">
-        <div class="fwpjxx_score">
-          <div class="fwpjxx_score_left">
-            <p v-text="ffpjxxData.baseInfo.score + '分'"></p>
-            <p>满分5分</p>
-            <p v-text="'共' + ffpjxxData.baseInfo.total + '个评分'"></p>
-          </div>
-          <ul class="fwpjxx_score_right">
-            <li
-              class="fwpjxx_score_item"
-              v-for="(item, index) in ffpjxxData.baseInfo.starInfo"
-              :key="'star_info_' + index"
-            >
-              <el-rate
-                :value="item.star"
-                disabled
-                text-color="#ff9900"
-                score-template="{value}"
-              >
-              </el-rate>
-              <el-progress
-                :percentage="item.percent"
-                :show-text="false"
-              ></el-progress>
-            </li>
-          </ul>
-        </div>
-        <ul class="fwpjxx_items">
-          <li
-            class="fwpjxx_item"
-            v-for="(item, index) in ffpjxxData.ffpjxxList"
-            :key="'fwpjxx_' + index"
-          >
-            <el-avatar :size="60" :src="item.img"> </el-avatar>
-            <div class="fwpjxx_content">
-              <p>
-                <span v-text="item.name"></span>
-                <el-rate
-                  :value="item.star"
-                  disabled
-                  text-color="#ff9900"
-                  score-template="{value}"
-                >
-                </el-rate>
-                <span v-text="item.time"></span>
-              </p>
-              <p v-text="item.description"></p>
-            </div>
-          </li>
-        </ul>
-        <div class="fwpjxx_pages">
-          <el-pagination
-            background
-            layout="prev, pager, next"
-            :page-size="10"
-            :total="ffpjxxData.baseInfo.total"
-          ></el-pagination>
-        </div>
-      </div>
-    </el-tab-pane>
-  </el-tabs>
-</template>
-
-<script>
-// @ is an alias to /src
-import Commodity from "@/components/commodity.vue";
-import BlockRadius from "@/components/block-radius";
-import serviveStep from "@/components/servive-step";
-export default {
-  components: {
-    Commodity,
-    BlockRadius,
-    serviveStep,
-  },
-  data: () => ({
-    serviceTabsActiveName: "first",
-    fwxqxxDatas: null, // 服务详情信息
-    ggdjData: null, // 规格定价
-    tgjgData: null, // 提供机构
-    ffpjxxData: null, // 服务评价信息
-  }),
-  methods: {
-    getDataFromApi(_url) {
-      return new Promise((resolve, reject) => {
-        this.$http
-          .get(_url)
-          .then((response) => {
-            resolve(response.body);
-          })
-          .catch(function(error) {
-            reject(error);
-          });
-      });
-    },
-    init() {
-      this.getDataFromApi(`/static/serviceInfo.json`).then(
-        ({ fwxqxxDatas, ggdjData, tgjgData, ffpjxxData }) => {
-          this.fwxqxxDatas = fwxqxxDatas;
-          this.ggdjData = ggdjData;
-          this.tgjgData = tgjgData;
-          this.ffpjxxData = ffpjxxData;
-        },
-        (error) => {
-          console.log(error);
-        }
-      );
-    },
-  },
-  created() {
-    this.init();
-  },
-};
-</script>
-
-<style scoped>
-.service_info {
-  min-height: 500px;
-  padding: 10px 20px;
-  box-sizing: border-box;
-  /* background-color: #eee; */
-}
-.service_info .fwxqxx_item {
-  margin-bottom: 20px;
-}
-.service_info .fwxqxx_item > .fwxqxx_title {
-  font-size: 13px;
-  font-weight: bold;
-  line-height: 20px;
-  margin-bottom: 5px;
-}
-.service_info .fwxqxx_item > .fwxqxx_text {
-  font-size: 16px;
-  line-height: 24px;
-  color: #333;
-}
-.service_info .fwxqxx_item > .fwxqxx_table {
-  width: 100%;
-}
-.service_info .ggdj_header {
-  margin-bottom: 10px;
-}
-.service_info .ggdj_table {
-  width: 100%;
-}
-.service_info .tgjg_dw {
-  font-size: 20px;
-  line-height: 30px;
-  margin-bottom: 10px;
-}
-.service_info .tgjg_img {
-  width: 400px;
-  margin-bottom: 10px;
-}
-.service_info .tgjg_lxfs {
-  font-size: 16px;
-  line-height: 24px;
-}
-.service_info .fwpjxx_score {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  margin: 10px 0;
-}
-.service_info .fwpjxx_score > .fwpjxx_score_left {
-  flex-shrink: 0;
-  margin-right: 20px;
-}
-.service_info .fwpjxx_score > .fwpjxx_score_left > p:nth-child(1) {
-  font-size: 32px;
-  font-weight: bold;
-}
-.service_info .fwpjxx_score > .fwpjxx_score_left > p:nth-child(2) {
-  font-size: 14px;
-  color: #333;
-}
-.service_info .fwpjxx_score > .fwpjxx_score_left > p:nth-child(3) {
-  font-size: 18px;
-  color: #ccc;
-}
-.service_info .fwpjxx_score > .fwpjxx_score_right {
-  flex-grow: 1;
-}
-.service_info .fwpjxx_score_item {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  max-width: 480px;
-}
-.service_info .fwpjxx_score_item > .el-progress {
-  flex-grow: 1;
-  margin-left: 10px;
-}
-.service_info .fwpjxx_item {
-  display: flex;
-  justify-content: flex-start;
-  align-items: flex-start;
-  margin-top: 20px;
-}
-.service_info .fwpjxx_item > .el-avatar {
-  flex-shrink: 0;
-  margin-right: 20px;
-}
-.service_info .fwpjxx_item > .fwpjxx_content > p:nth-child(1) {
-  display: inline-flex;
-  justify-content: flex-start;
-  align-items: center;
-  font-size: 18px;
-  color: #999;
-}
-.service_info .fwpjxx_item > .fwpjxx_content > p:nth-child(1) > .el-rate {
-  margin: 0 60px 0 30px;
-}
-.service_info .fwpjxx_item > .fwpjxx_content > p:nth-child(2) {
-  font-size: 18px;
-  color: #666;
-}
-.service_info .fwpjxx_pages {
-  text-align: center;
-  margin: 20px 0 10px;
-}
-</style>
-
-<style>
-.fwpjxx_score_item .el-progress-bar__outer {
-  background: #fff;
-}
-.fwxqxx_table_2 .el-table__header-wrapper {
-  display: none;
-}
-</style>

src/components/type-group.vue

+<template>
+  <div class="type_group">
+    <span
+      v-for="item in types"
+      class="type_item"
+      v-text="item.name"
+      :class="{ current: item.value === type }"
+      :key="item.value"
+      @click="$emit('change-type', item.value)"
+    ></span>
+  </div>
+</template>
+
+<script>
+export default {
+  model: {
+    prop: "type",
+    event: "change-type",
+  },
+  props: {
+    type: {
+      type: [Number, String],
+    },
+    types: {
+      type: Array,
+      default: () => [],
+    },
+  },
+};
+</script>
+
+<style scoped>
+.type_group {
+  display: inline-flex;
+  background-color: #f6f7fb;
+  padding: 6px;
+  border-radius: 6px;
+}
+.type_item {
+  min-width: 100px;
+  padding: 10px;
+  box-sizing: border-box;
+  border-radius: 5px;
+  overflow: hidden;
+  font-size: 14px;
+  color: #58617a;
+  line-height: 22px;
+  text-align: center;
+  cursor: pointer;
+}
+.type_item:not(:first-child) {
+  margin-left: 10px;
+}
+.type_item.current {
+  background-color: #515fe7;
+  color: #fff;
+}
+</style>

src/pages/example_commodity.vue

@@ -4,8 +4,6 @@
       <h3>按原型大致做了一下，调优等后续</h3>
 
       <Commodity :datas="datas" />
-
-      <servive-info></servive-info>
     </block-radius>
   </div>
 </template>
@@ -14,12 +12,10 @@
 // @ is an alias to /src
 import Commodity from "@/components/commodity.vue";
 import BlockRadius from "@/components/block-radius";
-import serviveInfo from "@/components/servive-info";
 export default {
   components: {
     Commodity,
     BlockRadius,
-    serviveInfo,
   },
   data: () => ({
     datas: {

src/pages/sjfwDetail.vue

@@ -8,20 +8,20 @@
       </el-breadcrumb>
     </div>
 
-    <servive-content :service-data="serviceData"></servive-content>
+    <service-info :service-data="serviceData"></service-info>
 
-    <servive-info></servive-info>
+    <service-tabs type="sjfw"></service-tabs>
   </div>
 </template>
 
 <script>
-import serviveInfo from "@/components/servive-info";
-import serviveContent from "@/components/servive-content";
+import serviceInfo from "@/components/service-info";
+import serviceTabs from "@/components/service-tabs";
 
 export default {
   components: {
-    serviveInfo,
-    serviveContent,
+    serviceInfo,
+    serviceTabs,
   },
   data: () => ({
     serviceData: null,

src/pages/skfwDetail.vue

@@ -8,20 +8,22 @@
       </el-breadcrumb>
     </div>
 
-    <servive-content :service-data="serviceData"></servive-content>
+    <!-- <servive-commodity-info
+      :service-data="serviceData"
+    ></servive-commodity-info>
 
-    <servive-info></servive-info>
+    <servive-tabs-info type="sjfw"></servive-tabs-info> -->
   </div>
 </template>
 
 <script>
-import serviveInfo from "@/components/servive-info";
-import serviveContent from "@/components/servive-content";
+// import serviveCommodityInfo from "@/components/servive-commodity-info";
+// import serviveTabsInfo from "@/components/servive-tabs-info";
 
 export default {
   components: {
-    serviveInfo,
-    serviveContent,
+    // serviveCommodityInfo,
+    // serviveTabsInfo,
   },
   data: () => ({
     serviceData: null,

src/pages/yysdDetail.vue

@@ -8,20 +8,22 @@
       </el-breadcrumb>
     </div>
 
-    <servive-content :service-data="serviceData"></servive-content>
+    <!-- <servive-commodity-info
+      :service-data="serviceData"
+    ></servive-commodity-info>
 
-    <servive-info></servive-info>
+    <servive-tabs-info type="sjfw"></servive-tabs-info> -->
   </div>
 </template>
 
 <script>
-import serviveInfo from "@/components/servive-info";
-import serviveContent from "@/components/servive-content";
+// import serviveCommodityInfo from "@/components/servive-commodity-info";
+// import serviveTabsInfo from "@/components/servive-tabs-info";
 
 export default {
   components: {
-    serviveInfo,
-    serviveContent,
+    // serviveCommodityInfo,
+    // serviveTabsInfo,
   },
   data: () => ({
     serviceData: null,

src/pages/zhyyfwDetail.vue

@@ -8,20 +8,22 @@
       </el-breadcrumb>
     </div>
 
-    <servive-content :service-data="serviceData"></servive-content>
+    <!-- <servive-commodity-info
+      :service-data="serviceData"
+    ></servive-commodity-info>
 
-    <servive-info></servive-info>
+    <servive-tabs-info type="sjfw"></servive-tabs-info> -->
   </div>
 </template>
 
 <script>
-import serviveInfo from "@/components/servive-info";
-import serviveContent from "@/components/servive-content";
+// import serviveCommodityInfo from "@/components/servive-commodity-info";
+// import serviveTabsInfo from "@/components/servive-tabs-info";
 
 export default {
   components: {
-    serviveInfo,
-    serviveContent,
+    // serviveCommodityInfo,
+    // serviveTabsInfo,
   },
   data: () => ({
     serviceData: null,