RunForge-Frontend/src/pages/store/goodsList/index.vue

<template>
    <div class="container">
        <Breadcrumb :items="['Forge商城', '商品列表']" />
        <a-card>
            <a-space size="large">
                <a-statistic title="剩余乐跑次数" :value="userCount?.lepao_count" show-group-separator />
            </a-space>
        </a-card>
        <a-card title="商品列表" style="margin-top: 20px;">
            <a-list hoverable :loading="loading">
                <a-list-item v-for="(item, index) in data" :key="index">
                    <div class="list">
                        <div class="icon">
                            <icon-gift :size="25" />
                        </div>
                        <div class="info">
                            <span class="title">
                                {{ item.name }}
                            </span>
                            <span class="label">
                                <a-tag size="small">库存：{{ item.num > 99 ? '充足' : item.num }}</a-tag>
                                ￥ {{ item.price }}
                            </span>
                        </div>
                        <div class="button">
                            <a-button type="primary" size="small"
                                @click="$router.push(`/store/goodsDetail/${item.id}`)">查看详情</a-button>
                        </div>
                    </div>
                </a-list-item>
            </a-list>
        </a-card>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { getGoodsList, getCount } from '@/api/goods'
import { Notification } from '@arco-design/web-vue'

const data = ref([])
const userCount = ref({})
const loading = ref(false)

const getGoods = async () => {
    try {
        loading.value = true
        const res = await getGoodsList()
        if (!res || res.code !== 0)
            return Notification.error({
                title: '获取商品列表失败！',
                content: res?.msg || '请稍后再试'
            })
        data.value = res.data
    } catch (error) {
        Notification.error({
            title: '获取商品列表失败！',
            content: error.message || '请稍后再试'
        })
    } finally {
        loading.value = false
    }
}

const GetCount = async () => {
    try {
        loading.value = true
        const res = await getCount()
        if (!res || res.code !== 0)
            return Notification.error({
                title: '获取用户数据失败！',
                content: res?.msg || '请稍后再试'
            })
        userCount.value = res.data
    } catch (error) {
        Notification.error({
            title: '获取用户数据失败！',
            content: error.message || '请稍后再试'
        })
    } finally {
        loading.value = false
    }
}

getGoods()
GetCount()
</script>

<style lang="less" scoped>
.container {
    padding: 0 20px 20px 20px;
}

.list {
    display: flex;
    min-height: 60px;
    align-items: center;

    .info {
        display: flex;
        flex-direction: column;
        margin-left: 15px;
        margin-right: 15px;


        .title {
            font-size: 1.3em;
        }
    }

    .button {
        margin-left: auto;
    }
}
</style>