# 2 20.店铺和交易提示组件开发和交互

* #### 接口

```js
export function getStatistics2(){
    return axios.get("/admin/statistics2")
}

```

* #### 封装组件

> src/components/IndexCard.vue

```js
<template>
    <el-card shadow="never">
        <template #header>
        <div class="flex justify-between">
            <span class="text-sm">{{ title }}</span>
            <el-tag type="danger" offect="plain">
                {{ tip }}
            </el-tag>
        </div>
        </template>
        
        <el-row :gutter="20">
            <el-col :span="6" :offset="0" class="border-0 bg-light-400" v-for="(item, index) in btns" :key="index">
                <el-card shadow="hover">
                    <div class="flex flex-col items-center justify-center">
                        <span class="text-xl mb-2">{{ item.value }}</span>
                        <span class="text-xs text-gray-500">{{ item.label }}</span>
                    </div>
                </el-card>
                
            </el-col>
        </el-row>
        
    </el-card>
    
</template>

<script setup>
defineProps({
    title:String,
    tip:String,
    btns:Array
})
</script>
```

* #### 引用

```js

        <!-- 分类组件 -->
        <IndexNavs></IndexNavs>

        <!-- 图表组件 -->
        <el-row :gutter="20" class="mt-5">
            <el-col :span="12" :offset="0">
                <IndexChart></IndexChart>
            </el-col>
            <el-col :span="12" :offset="0">
                <IndexCard title="店铺及商品提示" tip="店铺及商品提示" :btns="goods"></IndexCard>
                <IndexCard title="交易提示" tip="需要立即处理的交易订单" :btns="order"></IndexCard>
            </el-col>
           </el-row>

        
<script setup>
import { getStatistics1,getStatistics2 } from '~/api/index';
import { ref } from 'vue';
import CountTo from '~/components/CountTo.vue';
import IndexNavs from '~/components/IndexNavs.vue';
import IndexChart from '~/components/IndexChart.vue';
import IndexCard from '~/components/IndexCard.vue';

const panels = ref([])
getStatistics1().then(res => {
    console.log(res.panels)
    panels.value = res.panels
})

const goods = ref([])
const order = ref([])
getStatistics2().then(res=>{
    goods.value = res.goods
    order.value = res.order
})
</script>



```

* #### 效果图

<div><img src="C:%5CUsers%5CAdministrator.DESKTOP-UK43ECI%5CAppData%5CRoaming%5Cmarktext%5Cimages%5C2023-02-22-20-33-09-image.png" alt=""> <figure><img src="/files/Xw3l9FCTBH8TIvaIvxpN" alt=""><figcaption></figcaption></figure></div>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://close.gitbook.io/yun-wei-bi-ji/centos/vue/xiang-mu/2-20.-dian-pu-he-jiao-yi-ti-shi-zu-jian-kai-fa-he-jiao-hu.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.