应用详情tab组件

src/assets/css/index.css

@@ -202,6 +202,9 @@ div{
   color: #8890a7;
   line-height: 24px!important;
 }
+.el-tabs__nav-scroll .el-tabs__item {
+  line-height: 40px!important;
+}
 .el-tabs__item:hover {
   color: #687087;
 

src/components/commodity.vue

@@ -119,7 +119,9 @@ export default {
   }),
   computed: {},
   watch: {},
-  methods: {},
+  methods: {
+    handleChange() {}
+  },
   mounted() {}
 };
 </script>

src/components/servive-info.vue

+<template>
+  <el-tabs
+    v-model="serviceTabsActiveName"
+    type="card"
+    @tab-click="handleClick"
+    style="margin-top: 20px;"
+  >
+    <el-tab-pane label="服务详情信息" name="first">
+      <ul class="service_info">
+        <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">
+        <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">
+        <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">
+        <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: [
+      {
+        name: "获取流程",
+        type: "step",
+      },
+      {
+        name: "服务说明",
+        type: "text",
+        value:
+          "提供贵州应急资源空间分布展示的专题地图服务提供贵州应急资源空间分布展示的专题地图服务提供贵州应急资源空间分布展示的专题地图服务提供贵州应急资源空间分布展示的专题地图服务",
+      },
+      {
+        name: "服务属性",
+        type: "list",
+        value: [
+          {
+            name: "大小",
+            value: "66kb",
+          },
+          {
+            name: "API",
+            value: "Java",
+          },
+          {
+            name: "用途",
+            value: "即用型",
+          },
+          {
+            name: "空间范围（WGS84）",
+            value: "未设置",
+          },
+          {
+            name: "标签",
+            value: "T003 智能地图 T001",
+          },
+          {
+            name: "制作单位",
+            value: "应急管理厅",
+          },
+          {
+            name: "离线模式",
+            value: "禁用",
+          },
+          {
+            name: "附加代码",
+            value: "无",
+          },
+        ],
+      },
+      {
+        name: "字段说明",
+        type: "table",
+        value: {
+          datas: [
+            {
+              zdmc: "排名",
+              zdbm: "grade",
+              zdlx: "string",
+              zdms: "企业水路货物周转量排名",
+              slz: "1",
+            },
+            {
+              zdmc: "同比增长",
+              zdbm: "increase",
+              zdlx: "string",
+              zdms: "同比增长量信息",
+              slz: '"100%"',
+            },
+          ],
+          columns: [
+            {
+              prop: "zdmc",
+              label: "字段名称",
+            },
+            {
+              prop: "zdbm",
+              label: "字段编码",
+              align: "center",
+            },
+            {
+              prop: "zdlx",
+              label: "字段类型",
+              align: "center",
+            },
+            {
+              prop: "zdms",
+              label: "字段描述",
+            },
+            {
+              prop: "slz",
+              label: "示例值",
+              align: "center",
+            },
+          ],
+        },
+      },
+      {
+        name: "接口详情信息",
+        type: "table2",
+        value: {
+          datas: [
+            {
+              name: "接口地址",
+              value: "/cigservice/baseservice/fillder/turnover",
+              type: "text",
+            },
+            {
+              name: "请求方式",
+              value: "GET",
+              type: "text",
+            },
+            {
+              name: "编码格式",
+              value: "UTF-8",
+              type: "text",
+            },
+            {
+              name: "接口编码",
+              value: "turnover",
+              type: "text",
+            },
+            {
+              name: "接口描述",
+              value: "水路货运周转量排名",
+              type: "text",
+            },
+            {
+              name: "请求参数",
+              value: "无请求参数",
+              type: "text",
+            },
+            {
+              name: "响应参数",
+              value: "无响应参数",
+              type: "text",
+            },
+            {
+              name: "响应示例",
+              value: `
+                {
+                  success: 1,
+                  data: [
+                    {
+                      data: [
+                        { 
+                          grade: "19", 
+                          increase: "100%"
+                        }
+                      ],
+                      column: [
+                        { 
+                          title: "排名", 
+                          key: "grade"
+                        },
+                        { 
+                          title: "同比增长",
+                           key: "increase"
+                        },
+                      ],
+                    },
+                  ],
+                }
+              `,
+              type: "code",
+            },
+            {
+              name: "请求示例NodeJs",
+              value: `
+                var http = require("http");
+                var options = {
+                  "method": "GET",
+                  "hostname": "www.giscloud.cx",
+                  "port": "80",
+                  "path": "/cigservice/baseservice/fillder/turnover",
+                  "headers": {
+                    "Content-Type":"application/x-www-form-urlencoded",
+                    "charset":"utf-8"
+                  }
+                };
+                var req = http.request(options, function (res) {
+                  var chunks = [];
+                  res.on("data", function (chunk) {
+                  chunks.push(chunk);
+                  });
+                  res.on("end", function () {
+                    var body = Buffer.concat(chunks);
+                    console.log(body.toString());
+                  });
+                });
+                req.end();
+              `,
+              type: "code",
+            },
+          ],
+        },
+      },
+      {
+        name: "微服务响应列表",
+        type: "table",
+        value: {
+          datas: [
+            {
+              name: "apaas-mapvideos",
+              description: "地图视频融合应用服务",
+            },
+            {
+              name: "apaas-mapvideos",
+              description: "地图视频融合应用服务",
+            },
+          ],
+          columns: [
+            {
+              prop: "name",
+              label: "*微服务名称",
+            },
+            {
+              prop: "description",
+              label: "微服务描述",
+              align: "center",
+            },
+          ],
+        },
+      },
+    ], // 服务详情信息
+    ggdjData: [
+      {
+        gg: "访问次数：20/日 访问量：100/日",
+        ggsm:
+          "用户服务申请通过审核确认后，每日可对水路货物周转量情况进行20次免费访问，获取100条数据记录。",
+      },
+      {
+        gg: "访访问次数：200/日 访问量：1000/日",
+        ggsm:
+          "用户服务申请通过审核确认并完成付费后，每日可对水路货物周转量情况进行200次访问，获取1000条数据记录。",
+      },
+      {
+        gg: "访问次数：无上限 访问量",
+        ggsm: "",
+      },
+    ], // 规格定价
+    tgjgData: {
+      name: "贵州省交通运输厅",
+      img:
+        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+      lxr: "张先生",
+      lxdh: "010-66666666",
+    }, // 提供机构
+    ffpjxxData: {
+      baseInfo: {
+        score: 3.5,
+        total: 23,
+        starInfo: [
+          {
+            star: 5,
+            percent: 40,
+          },
+          {
+            star: 4,
+            percent: 30,
+          },
+          {
+            star: 3,
+            percent: 20,
+          },
+          {
+            star: 2,
+            percent: 10,
+          },
+          {
+            star: 1,
+            percent: 0,
+          },
+        ],
+      },
+      ffpjxxList: [
+        {
+          name: "禺彊",
+          img:
+            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+          star: 5,
+          description: "这个应用非常实用，可以应用到多个业务领域！",
+          time: " 2019-12-12",
+        },
+        {
+          name: "海纳",
+          img:
+            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+          star: 5,
+          description:
+            "赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！",
+          time: " 2019-12-12",
+        },
+        {
+          name: "左宜",
+          img:
+            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+          star: 3,
+          description: "赞！",
+          time: " 2019-12-12",
+        },
+        {
+          name: "左宜",
+          img:
+            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+          star: 3,
+          description: "赞！",
+          time: " 2019-12-12",
+        },
+        {
+          name: "左宜",
+          img:
+            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+          star: 3,
+          description: "赞！",
+          time: " 2019-12-12",
+        },
+        {
+          name: "左宜",
+          img:
+            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+          star: 3,
+          description: "赞！",
+          time: " 2019-12-12",
+        },
+        {
+          name: "左宜",
+          img:
+            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+          star: 3,
+          description: "赞！",
+          time: " 2019-12-12",
+        },
+        {
+          name: "左宜",
+          img:
+            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+          star: 3,
+          description: "赞！",
+          time: " 2019-12-12",
+        },
+        {
+          name: "左宜",
+          img:
+            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+          star: 3,
+          description: "赞！",
+          time: " 2019-12-12",
+        },
+        {
+          name: "左宜",
+          img:
+            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+          star: 3,
+          description: "赞！",
+          time: " 2019-12-12",
+        },
+      ],
+    }, // 服务评价信息
+  }),
+  methods: {
+    handleClick(tab, event) {
+      console.log(tab, event);
+    },
+  },
+  mounted() {},
+};
+</script>
+
+<style scoped>
+.service_info {
+  width: 80%;
+  padding: 10px 20px;
+  margin: 0 auto;
+  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/servive-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>
+        </div>
+        <p class="step_title">服务申请</p>
+      </li>
+      <li class="step_item">
+        <div class="step_icon">
+            <span>2</span>
+        </div>
+        <p class="step_title">审核确认</p>
+      </li>
+      <li class="step_item">
+        <div class="step_icon">
+            <span>3</span>
+        </div>
+        <p class="step_title">费用支付</p>
+      </li>
+      <li class="step_item">
+        <div class="step_icon">
+            <span>4</span>
+        </div>
+        <p class="step_title">服务获取</p>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<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;
+}
+.service_step > .step_items {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  text-align: center;
+}
+.service_step .step_item > .step_icon {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background-color: #1abc9c;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 28px;
+  font-weight: bold;
+  color: #fff;
+}
+.service_step .step_item > .step_title {
+  font-size: 12px;
+  line-height: 24px;
+  color: #1abc9c;
+}
+</style>

src/pages/example_commodity.vue

@@ -2,7 +2,10 @@
   <div class="com_ex">
     <block-radius>
       <h3>按原型大致做了一下，调优等后续</h3>
+
       <Commodity :datas="datas" />
+  
+      <servive-info></servive-info>
     </block-radius>
   </div>
 </template>
@@ -11,10 +14,12 @@
 // @ 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
+    BlockRadius,
+    serviveInfo,
   },
   data: () => ({
     datas: {
@@ -24,22 +29,21 @@ export default {
       updated: "2020-03-12 18:31:12",
       dataField: "经济建设",
       serviceType: "综合应用服务",
-      resourceSummary:
-        "提供视频监控的空间分布展示和视频监控直播的服务提供视频监控的空间分布展示和视频监控直播的服务",
+      resourceSummary: "提供视频监控的空间分布展示和视频监控直播的服务提供视频监控的空间分布展示和视频监控直播的服务",
       openLevel: "共享",
       views: "99999",
       numberOfAcquisitions: "99999",
-      specifications:
-        "用户服务申请通过审核确认后，每日可对应急资源地图进行20次免费访问用户服务申请通过审核确认后，每日可对应急资源地图进行20次免费访问"
-    }
+      specifications: "用户服务申请通过审核确认后，每日可对应急资源地图进行20次免费访问用户服务申请通过审核确认后，每日可对应急资源地图进行20次免费访问",
+    },
   }),
   mounted() {},
-  methods: {}
+  methods: {},
 };
 </script>
+
 <style scoped>
 .com_ex {
   margin-top: 100px;
   padding: 20px;
 }
-</style>
\ No newline at end of file
+</style>