OpenPlatForm/components/domain/apiExplain.vue

<template>
  <div class="apiExplain-box">
    <div class="version-font">接口版本号：V1.1.0</div>

    <div class="openapi-box">
      <span>请求地址：</span>
      <span style="color: #1890ff"
        >https://openapi.dataoke.com/api/dels/jd/goods/get-details
      </span>
      <span class="copy-box">复制</span>
    </div>

    <div class="openapi-box" style="margin-top: 10px">
      <span>请求方式：</span>
      <span>GET</span>
    </div>

    <div style="margin-top: 30px">
      <div style="margin-bottom: 10px; color: #333333; font-size: 14px">
        公共参数:
      </div>
      <el-table
        :data="tableData1"
        border
        style="width: 100%; font-size: 14px; color: #5f6279"
      >
        <el-table-column prop="name" label="名称" width="166">
        </el-table-column>
        <el-table-column prop="type" label="类型" width="166">
        </el-table-column>
        <el-table-column prop="state" label="必须" width="166">
          <template slot-scope="scope">
            <span :style="scope.row.state ? 'color:#FF4242' : ''">
              {{ scope.row.state ? "是" : "否" }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="explain" label="说明"></el-table-column>
      </el-table>
    </div>

    <div style="margin-top: 30px">
      <div style="color: #333333; font-size: 14px">请求参数:</div>
      <div style="color: #1890ff; font-size: 12px; margin-bottom: 10px">
        注：请求参数须区分大小写
      </div>
      <el-table
        :data="tableData1"
        border
        style="width: 100%; font-size: 14px; color: #5f6279"
      >
        <el-table-column prop="name" label="名称" width="166">
        </el-table-column>
        <el-table-column prop="type" label="类型" width="166">
        </el-table-column>
        <el-table-column prop="state" label="必须" width="166">
          <template slot-scope="scope">
            <span :style="scope.row.state ? 'color:#FF4242' : ''">
              {{ scope.row.state ? "是" : "否" }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="explain" label="说明"></el-table-column>
      </el-table>
    </div>

    <div style="margin-top: 30px">
      <div style="margin-bottom: 10px; color: #333333; font-size: 14px">
        返回数据:
      </div>
      <el-table
        :data="tableData1"
        border
        style="width: 100%; font-size: 14px; color: #5f6279"
      >
        <el-table-column prop="name" label="名称" width="166">
        </el-table-column>
        <el-table-column prop="type" label="类型" width="166">
        </el-table-column>
        <el-table-column prop="state" label="必须" width="166">
          <template slot-scope="scope">
            <span :style="scope.row.state ? 'color:#FF4242' : ''">
              {{ scope.row.state ? "是" : "否" }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="explain" label="说明"></el-table-column>
      </el-table>
    </div>

    <div style="margin-top: 30px">
      <div style="margin-bottom: 10px; color: #333333; font-size: 14px">
        调用示例:
      </div>
      <div class="dome-box">
        <div class="dome-head">
          <span>JAVA</span>
        </div>
        <div class="dome-content">
          <div>
            <span class="span1">String url =</span
            ><span class="span2"
              >"https://openapi.dataoke.com/api/dels/jd/goods/get-details"</span
            >
            <span class="span1">;</span>
          </div>
          <div>
            <span class="span1">String appKey =</span
            ><span class="span2"> "xxx"</span>
            <span class="span1">;</span>
          </div>
          <div>
            <span class="span1">String appSecret =</span
            ><span class="span2"> "xxx"</span>
            <span class="span1">;</span>
          </div>

          <div>
            <span
              class="span1"
              v-html="'TreeMap<String, String> paraMap = '"
            ></span
            ><span class="span3">new</span>
            <span class="span1">TreeMap();</span>
          </div>

          <div>
            <span class="span1">paraMap.put(</span
            ><span class="span2">"version"</span>
            <span class="span1">,</span>
            <span class="span2">"v1.0.0"</span>
            <span class="span1">);</span>
          </div>

          <div>
            <span class="span1">paraMap.put(</span
            ><span class="span2">"skuIds"</span>
            <span class="span1">,</span>
            <span class="span2">"66847984668"</span>
            <span class="span1">);</span>
          </div>

          <div>
            <spa class="span1"
              >String data = ApiClient.sendReq(url, appSecret, paraMap);</spa
            >
          </div>
        </div>
      </div>
    </div>

    <div style="margin-top: 30px">
      <div style="margin-bottom: 10px; color: #333333; font-size: 14px">
        返回示例:
      </div>
      
        <json-viewer
        style="line-height:23px"
          v-if="jsonData"
          :value="jsonData"
          :expand-depth="15"
          expanded
          preview-mode
        ></json-viewer>
 
    </div>

    <div style="margin-top: 30px">
      <div style="margin-bottom: 10px; color: #333333; font-size: 14px">
        错误码列表:
      </div>
      <div class="dome3-box">
        <el-table
          :data="tableData1"
          border
          style="width: 100%; font-size: 14px; color: #5f6279"
        >
          <el-table-column prop="name" label="名称" width="166">
          </el-table-column>
          <el-table-column prop="type" label="类型" width="166">
          </el-table-column>
          <el-table-column prop="state" label="必须" width="166">
            <template slot-scope="scope">
              <span :style="scope.row.state ? 'color:#FF4242' : ''">
                {{ scope.row.state ? "是" : "否" }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="explain" label="说明"></el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      tableData1: [
        {
          name: "cid1",
          type: "Number",
          state: true,
          explain:
            "商品skuId，多个使用逗号分隔，最多支持10个skuId同时查询（需使用半角状态下的逗号）",
        },
        {
          name: "cid1",
          type: "Number",
          state: true,
          explain:
            "商品skuId，多个使用逗号分隔，最多支持10个skuId同时查询（需使用半角状态下的逗号）",
        },
        {
          name: "cid1",
          type: "Number",
          state: true,
          explain:
            "商品skuId，多个使用逗号分隔，最多支持10个skuId同时查询（需使用半角状态下的逗号）",
        },
        {
          name: "cid1",
          type: "Number",
          state: true,
          explain:
            "商品skuId，多个使用逗号分隔，最多支持10个skuId同时查询（需使用半角状态下的逗号）",
        },
      ],
      jsonData: {
        requestId: "cee418c825e8478db614aa685de7b7d7",
        time: 1612402161867,
        code: 0,
        msg: "成功",
        data: [
          {
            test1: "dddd",
            cid1: 1316,
            cid1Name: "美妆护肤",
            cid2: 1381,
            cid2Name: "面部护肤",
            cid3: 1392,
            cid3Name: "面膜",
            skuId: 66847984668,
            skuName:
              "形象美竹炭去黑头面膜收缩毛孔提靓肤色面膜补水保湿面膜面膜 120g",
            originPrice: 99,
            actualPrice: 49,
            picMain:
              "https://img14.360buyimg.com/pop/jfs/t1/106347/1/15742/194927/5e7597ebEd2f8bc11/94742e99ff105c51.jpg",
            smallImages: [
              "https://img14.360buyimg.com/pop/jfs/t1/106347/1/15742/194927/5e7597ebEd2f8bc11/94742e99ff105c51.jpg",
              "https://img14.360buyimg.com/pop/jfs/t1/110368/38/9708/221874/5e7597ebE08973056/3b63323523abdea5.jpg",
              "https://img14.360buyimg.com/pop/jfs/t1/90164/40/15872/185094/5e7597eaE190414e9/ed723e0838e165e7.jpg",
              "https://img14.360buyimg.com/pop/jfs/t1/87125/25/16010/83185/5e7597eaE628e10a0/a9c16b418e3faae1.jpg",
              "https://img14.360buyimg.com/pop/jfs/t1/97943/14/15722/204557/5e7590f0E56d934c6/9a57303d20b8e20f.jpg",
            ],
          },
        ],
      },
    };
  },
};
</script>

<style lang="scss" scoped>
.apiExplain-box {
  .version-font {
    width: 890px;
    height: 39px;
    background: #f7f8fa;
    border-radius: 14px;
    padding: 10px 20px;
    font-size: 14px;
    color: #1890ff;
    box-sizing: border-box;
    margin-bottom: 30px;
  }
  .openapi-box {
    font-size: 14px;
    color: #333333;
    .copy-box {
    }
  }

  .dome-box {
    width: 890px;
    height: 266px;
    background: #ffffff;
    border-radius: 14px;
    border: 1px solid #dddddd;
    box-sizing: border-box;
    line-height: 25px;
    .dome-head {
      color: #333333;
      font-size: 16px;
      height: 48px;
      line-height: 48px;
      box-sizing: border-box;
      border-bottom: solid #e6e6e6 1px;
      padding: 0 20px;

      span {
        border-bottom: #2f89fc solid 4px;
        display: inline-block;
        box-sizing: border-box;
        height: 48px;
      }
    }
    .dome-content {
      font-size: 14px;
      padding: 20px;
      .span1 {
        color: #5f6279;
      }
      .span2 {
        color: #ff4242;
      }
      .span3 {
        color: #67ba6a;
      }
    }
  }
  .dome2-box {
    width: 890px;
    height: 846px;
    background: #f5f8f7;
    border-radius: 14px;
    border: 1px solid #67ba6a;
    line-height: 22px;
  }
}
</style>