pc_shop_site/pages/home/api.vue

<template>
    <el-container class="main">
        <el-header>PromocollectionAPI</el-header>
        <el-container style="height: 100vh; border: 1px solid #eee; padding-top: 60px">
            <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
                <el-menu default-active="intro" @select="handleSel" :default-openeds="['api']">
                    <el-menu-item index="intro">
                        <i class="el-icon-menu"></i>
                        <span slot="title">Introduce</span>
                    </el-menu-item>
                    <el-submenu index="api">
                        <template slot="title"><i class="el-icon-menu"></i>Api</template>
                        <a href="#anchor">
                            <el-menu-item index="1">Get Authorization acount</el-menu-item>
                            <el-menu-item index="2">Get Categories</el-menu-item>
                            <el-menu-item index="3">Get Product-Indiviual</el-menu-item>
                            <el-menu-item index="4">Get Products-List</el-menu-item>
                        </a>
                    </el-submenu>
                </el-menu>
            </el-aside>

            <el-container>
                <el-main>
                    <section v-show="indexShow == 'intro'">
                        <h3>Promo API Introduction</h3>
                        <p>PromoCollection Product Data API</p>
                        <h3>About</h3>
                        <p>The Promo Collection Product Data API provides an interface that allows you to connect your business systems to our product data. It can be used to integrate websites, accounting software, quoting tools, ordering platforms and other business systems. It ensures your business systems are always up to date with real time pricing, product data, stock levels and images. The below documentation details on how to connect, utilise and read the data.</p>
                        <h3>Register</h3>
                        <p>Please Login to register.</p>
                        <h3>Support</h3>
                        <p>For support, please email <a href="mailto:info@promocollection.com.au">info@promocollection.com.au</a>. You are welcome to provide this email to third party IT providers to contact us directly for support.</p>
                    </section>

                    <section v-show="indexShow != 'intro'">
                        <h3 id="anchor">Request address</h3>
                        <p>
                            {{ indexShow == 1 ? 'post' : 'get' }}
                            <span class="content">{{ apiData[indexShow]?.address }}</span>
                        </p>

                        <h3>Interface description</h3>
                        <p>{{ apiData[indexShow]?.description }}</p>

                        <h3>Request header parameters</h3>
                        <param-table :data="apiData[indexShow]?.parameters"></param-table>

                        <template v-if="apiData[indexShow]?.request_parameters">
                            <h3>Request parameters</h3>
                            <param-table :data="apiData[indexShow]?.request_parameters" :colShow="true"></param-table>
                        </template>

                        <h3>Response content</h3>
                        <pre
                            class="line-numbers"><code class="language-javascript" ref="codeBlock" v-html="apiData[indexShow]?.response"></code></pre>
                    </section>
                </el-main>
            </el-container>
        </el-container>
    </el-container>
</template>
    
<script>
import Prism from 'prismjs' // 代码高亮core
import 'prismjs/plugins/line-numbers/prism-line-numbers.min.js'
import 'prismjs/themes/prism-okaidia.css' // 高亮主题
import 'prismjs/plugins/line-numbers/prism-line-numbers.min.css'
import paramTable from '@/components/table/paramTable'
import api1 from '@/assets/json/api1.json';
import api2 from '@/assets/json/api2.json';
import api3 from '@/assets/json/api3.json';
import api4 from '@/assets/json/api4.json';
export default {
    components: { paramTable },
    layout: 'blank_layout',
    middleware: 'auth',
    data() {
        return {
            indexShow: 'intro',
            apiData: {
                1: {
                    address: 'https://promocollection.com.au/api/au.api/authorization',
                    description: 'Get interface authorization code.',
                    parameters: [
                        {
                            parameters: 'email',
                            type: 'string',
                            description: '*Email account',
                        },
                        {
                            parameters: 'password',
                            type: 'string',
                            description: '*Email password',
                        },
                    ],
                    response: api1,
                },

                2: {
                    address: 'https://promocollection.com.au/api/au.api/categories',
                    description:
                        'Returns a full list of product categories including subcategories.',
                    parameters: [
                        {
                            parameters: 'Authorization',
                            type: 'string',
                            description: 'Authorization',
                        },
                    ],
                    response: api2,
                },

                3: {
                    address: 'https://promocollection.com.au/api/au.api/product',
                    description: 'Returns product data for an individual product.',
                    parameters: [
                        {
                            parameters: 'Authorization',
                            type: 'string',
                            description: 'Authorization',
                        },
                    ],
                    request_parameters: [
                        {
                            parameters: 'code',
                            type: 'string',
                            required: 'yes',
                            description: 'The code of the product to retrieve',
                        },
                        {
                            parameters: 'Format',
                            type: 'string',
                            required: 'no',
                            description: 'Format of the response,default=json',
                        },
                    ],
                    response: api3,
                },

                4: {
                    address: 'https://promocollection.com.au/api/au.api/products',
                    description: 'Returns a list of all products.',
                    parameters: [
                        {
                            parameters: 'Authorization',
                            type: 'string',
                            description: 'Authorization',
                        },
                    ],
                    request_parameters: [
                        {
                            parameters: 'limit',
                            type: 'int',
                            required: 'no',
                            description: 'Quantity of products obtained',
                        },
                        {
                            parameters: 'order',
                            type: 'string',
                            required: 'no',
                            description: 'Product sequencing default=desc, desc or aes',
                        },
                        {
                            parameters: 'sort',
                            type: 'string',
                            required: 'no',
                            description:
                                'Product sequencing default=create_time, create_time or update_time',
                        },
                        {
                            parameters: 'page',
                            type: 'int',
                            required: 'no',
                            description: 'Product pages obtained',
                        },
                        {
                            parameters: 'cate_id',
                            type: 'int',
                            required: 'no',
                            description: 'Get products under the specified category',
                        },
                    ],
                    response: api4,
                },
            },
        }
    },
    computed: {
        code() {
            return this.apiData[this.indexShow]?.response
        },
    },
    methods: {
        handleSel(key, keyPath) {
            this.indexShow = key
            setTimeout(() => {
                Prism.highlightAll()
            }, 0)
        },
    },
}
</script>

<style lang="scss" scoped>
.main {
    position: relative;
    font-size: 16px;
}

header {
    text-align: center;
    height: 60px;
    line-height: 60px;
    font-size: 24px;
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 1;
    border-bottom: 1px solid #eee;
    background-color: #fff;
}

h3 {
    margin: 20px 0 8px;
    font-size: 18px;
}

p {
    text-indent: 2em;
    a{
        font-weight: 700;
    }
}

.content {
    color: #d14;
}
</style>