服务详情页面静态修改

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

 <template>
-  <div class="service_step">
-    <ul class="step_items">
-      <li class="step_item">
-        <div class="step_icon">
-          <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>
-        </div>
-        <p class="step_title">审核确认</p>
-      </li>
-      <li class="step_line"></li>
-      <li class="step_item">
-        <div class="step_icon">
-          <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>
-        </div>
-        <p class="step_title">服务获取</p>
-      </li>
+  <div class="service_steps">
+    <ul class="steps_list">
+      <template v-for="(step, index) in data">
+        <li class="step_item" :key="'step_' + index">
+          <div class="step_icon">
+            <span v-text="index + 1"></span>
+          </div>
+          <p class="step_title" v-text="step"></p>
+        </li>
+        <li
+          class="step_line"
+          :key="'step_line_' + index"
+          v-if="index + 1 < data.length"
+        ></li>
+      </template>
     </ul>
   </div>
 </template>
 
+<script>
+export default {
+  props: {
+    data: {
+      type: Array,
+      default: ["服务申请", "信息填写", "审核确认", "服务获取"],
+    },
+  },
+  mounted() {
+    console.log(this.data);
+  },
+};
+</script>
+
 <style scoped>
-.service_step {
+.service_steps {
   min-height: 68px;
   padding: 30px 0;
 }
-.service_step > .step_items {
+.service_steps > .steps_list {
   display: flex;
   justify-content: center;
   align-items: flex-start;
   text-align: center;
 }
-.service_step .step_line {
+.service_steps .step_line {
   width: 168px;
-  border: 1px  solid #c0c8f8;
+  border: 1px solid #c0c8f8;
   margin: 33px 10px 0;
 }
-.service_step .step_item > .step_icon {
+.service_steps .step_item > .step_icon {
   width: 68px;
   height: 68px;
   background-color: #515fe7;
@@ -61,7 +61,7 @@
   font-weight: bold;
   color: #fff;
 }
-.service_step .step_item > .step_title {
+.service_steps .step_item > .step_title {
   font-size: 16px;
   line-height: 24px;
   color: #242c43;

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>
+    <comments-list :data="data.list"></comments-list>
     <comments-pagination
       :total="data.baseInfo.total"
       :page-sizes="pageSizes"

src/components/service-tab-detail.vue

@@ -7,20 +7,12 @@
     >
       <h3 class="detail-title" v-text="item.name + '：'"></h3>
 
-      <service-step v-if="item.type == 'step'"></service-step>
+      <service-steps v-if="item.type == 'step'" :data="item.value"></service-steps>
       <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"
@@ -38,16 +30,32 @@
           :align="v.align || 'left'"
         ></el-table-column>
       </el-table>
+      <el-table
+        v-else-if="item.type == 'list'"
+        class="detail-table detail-list"
+        :border="false"
+        :data="item.value"
+      >
+        <el-table-column
+          prop="name"
+          label="name"
+          width="120"
+        ></el-table-column>
+        <el-table-column
+          prop="value"
+          label="value"
+        ></el-table-column>
+      </el-table>
     </li>
   </ul>
 </template>
 
 <script>
-import serviceStep from "@/components/service-step";
+import serviceSteps from "@/components/service-steps";
 
 export default {
   components: {
-    serviceStep,
+    serviceSteps,
   },
   props: {
     data: {
@@ -76,7 +84,4 @@ export default {
   line-height: 25px;
   color: #242c43;
 }
-.detail-item .detail-table {
-  width: 100%;
-}
 </style>

src/components/service-tabs.vue

@@ -5,32 +5,28 @@
     v-model="serviceTabsActiveName"
     :stretch="true"
   >
-    <el-tab-pane label="服务详情信息" name="first">
+    <el-tab-pane label="服务详情信息" name="first" v-if="detail">
       <service-tab-detail
-        v-if="fwxqxx"
         class="service_info"
-        :data="fwxqxx"
+        :data="detail"
       ></service-tab-detail>
     </el-tab-pane>
-    <el-tab-pane label="规格定价" name="second">
+    <el-tab-pane label="规格定价" name="second" v-if="specification">
       <service-tab-specification
-        v-if="ggdj"
         class="service_info"
-        :data="ggdj"
+        :data="specification"
       ></service-tab-specification>
     </el-tab-pane>
-    <el-tab-pane label="提供机构" name="third">
+    <el-tab-pane label="提供机构" name="third" v-if="provider">
       <service-tab-provider
-        v-if="tgjg"
         class="service_info"
-        :data="tgjg"
+        :data="provider"
       ></service-tab-provider>
     </el-tab-pane>
-    <el-tab-pane label="服务评价信息" name="fourth">
+    <el-tab-pane label="服务评价信息" name="fourth" v-if="comments">
       <service-tab-comments
-        v-if="ffpjxx"
         class="service_info"
-        :data="ffpjxx"
+        :data="comments"
       ></service-tab-comments>
     </el-tab-pane>
   </el-tabs>
@@ -57,10 +53,10 @@ export default {
   },
   data: () => ({
     serviceTabsActiveName: "first",
-    fwxqxx: null, // 服务详情信息
-    ggdj: null, // 规格定价
-    tgjg: null, // 提供机构
-    ffpjxx: null, // 服务评价信息
+    detail: null, // 服务详情信息
+    specification: null, // 规格定价
+    provider: null, // 提供机构
+    comments: null, // 服务评价信息
   }),
   methods: {
     getDataFromApi(_url) {
@@ -80,10 +76,10 @@ export default {
         (data) => {
           let _data = data[this.type];
 
-          this.fwxqxx = _data.fwxqxx;
-          this.ggdj = _data.ggdj;
-          this.tgjg = _data.tgjg;
-          this.ffpjxx = _data.ffpjxx;
+          this.detail = _data.detail;
+          this.specification = _data.specification;
+          this.provider = _data.provider;
+          this.comments = _data.comments;
         },
         (error) => {
           console.log(error);
@@ -149,7 +145,26 @@ export default {
 .service_info_tab .el-table::before {
   display: none;
 }
+.service_info_tab .el-table {
+  width: 100%;
+}
 .service_info_tab .el-table__row:nth-child(odd) td {
   background-color: #f8f9fd;
 }
+.service_info_tab .detail-list .el-table__header-wrapper {
+  display: none;
+}
+.service_info_tab .detail-list .el-table__row td {
+  color: #58617a;
+}
+.service_info_tab .detail-list .el-table__row td:first-child {
+  font-weight: bold;
+  color: #1a2236;
+}
+.service_info_tab .detail-list .el-table__row:nth-child(even) td {
+  background-color: #f8f9fd;
+}
+.service_info_tab .detail-list .el-table__row:nth-child(odd) td {
+  background-color: #fff;
+}
 </style>

src/pages/skfwDetail.vue

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

src/pages/zhyyfwDetail.vue

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