vue3-andsign 中实现实物电商列表的页面

这里自己做一个代码整理做了一个实物电商选品中心的页面看里面有些效果挺好这里记录一下

直接粘贴代码了我自己能看懂做了一个列表显示骨架屏等效果使用了grid 布局比媒体查询好使

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import { useRoute } from 'vue-router'
import { message, Skeleton } from 'ant-design-vue'
import * as echarts from 'echarts'
import Tip from './components/Tip.vue'
import { useBrandStore } from '@/store/modules/brand'
import { DownOutlined } from '@ant-design/icons-vue'
import Item from './components/item.vue'
import * as phyicalApi from '@/api/physical'

const route = useRoute()
let chart = ref<echarts.ECharts | null>(null)
const oneRef = ref(null)
const dataSource = ref([])
const loading = ref(false)
const skeletonLoading = ref(false)
const addGoodsRef = ref(null)

interface Pagination {
  page: number
  pageSize: number
  total: number
  current?: number
  onChange: Function
  showSizeChanger: boolean
  showQuickJumper: boolean
}

const handlePageChange = (page: any, pageSize: any) => {
  pagination.value.pageSize = pageSize
  searchParams.value.pageSize = pageSize
}

const pagination = ref<Pagination>({
  page: 1,
  pageSize: 12,
  total: 0,
  onChange: handlePageChange,
  showSizeChanger: true,
  showQuickJumper: true,
})

const searchParams = ref<SearchParams>({
  currentPage: pagination.value.page,
  pageSize: pagination.value.pageSize,
  pdrPutAwayTimeNum: 0,
  fortyBelowPrice: 0,
})

interface SearchParams {
  currentPage: number
  pageSize: number
  [propName: string]: any
}

const onChangePage = (page: any, pageSize: any) => {
  searchParams.value.currentPage = page
  skeletonLoading.value = true
  getList()
}

onMounted(() => {
  getList()
  getCateList()
})

const getList = async () => {
  try {
    loading.value = true
    skeletonLoading.value = true
    const { state, data, message: msg } = await phyicalApi.getGoodsList(searchParams.value)
    if (state == 200) {
      dataSource.value = data.list
      pagination.value.total = Number(data.totalCount)
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求连接失败~')
  } finally {
    loading.value = false
    setTimeout(() => {
      skeletonLoading.value = false
    }, 500)
  }
}

const drawOne = (chart: any) => {
  let option = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: [
          120,
          {
            value: 200,
            itemStyle: {
              color: '#a90000',
            },
          },
          150,
          80,
          70,
          110,
          130,
        ],
        type: 'bar',
      },
    ],
  }
  chart.setOption(option)
}

const onResize = () => {
  if (chart.value) {
    chart.value.dispose()
    chart.value = echarts.init(oneRef.value)
    drawOne(chart.value)
  }
}

window.addEventListener('resize', onResize)

let dxTokenRef = ref()
const add = () => {
  dxTokenRef.value.callbackFn()
}

const getToken = (e: any) => {
  console.log(e)
}

const getCateList = async () => {
  try {
    const { data, state, message: msg } = await phyicalApi.getProductCateList()
    if (state == 200) {
      filterList.value = data.map((item: any) => {
        return {
          label: item.cateName,
          id: item.cateId
        }
      })
      filterList.value.unshift({
        label: "所有类目",
        id: 0
      })
    } else {
      message.error(msg)
    }
  } catch (error) {
    console.error(error)
  }
}

const filterList = ref([])
const filterSelected = ref(0)
const filterSelectedId = ref(0)

const filterClick = (item: any, index: any) => {
  filterSelected.value = index
  filterSelectedId.value = item.id
  searchParams.value.cateId = item.id
  if (item.id == 0) {
    delete searchParams.value.cateId
  }
  pagination.value.page = 1
  searchParams.value.currentPage = 1
  getList()
}

let checked1 = ref(false)
let checked2 = ref(false)

watch(checked1, (newVal) => {
  searchParams.value.fortyBelowPrice = newVal ? 1 : 0
  pagination.value.page = 1
  searchParams.value.currentPage = 1
  getList()
})

watch(checked2, (newVal) => {
  searchParams.value.pdrPutAwayTimeNum = newVal ? 1 : 0
  pagination.value.page = 1
  searchParams.value.currentPage = 1
  getList()
})

const beforePrice = ref("")
const afterPrice = ref("")

import type { SelectProps } from 'ant-design-vue';
const value = ref("")
const options = ref<SelectProps['options']>([
  {
    value: '1',
    label: '描述不符包退',
  },
  {
    value: '2',
    label: '二十四小时发货',
  },
  {
    value: '3',
    label: '四十八小时发货',
  },
  {
    value: '4',
    label: '假货包赔',
  },
]);

const handleChange = (e) => {
  value.value = e
}

const handleSearch = () => {
  if (value.value) {
    searchParams.value.serviceAssurance = Number(value.value)
  }

  searchParams.value.beforePrice = beforePrice.value * 100
  searchParams.value.afterPrice = afterPrice.value * 100
  if (!searchParams.value.beforePrice) {
    delete searchParams.value.beforePrice
  }
  if (!searchParams.value.afterPrice) {
    delete searchParams.value.afterPrice
  }

  pagination.value.page = 1
  searchParams.value.currentPage = 1
  getList()
}

const handleReset = () => {
  delete searchParams.value.beforePrice
  delete searchParams.value.afterPrice
  delete searchParams.value.serviceAssurance
  searchParams.value.currentPage = 1
  checked1.value = false
  checked2.value = false
  beforePrice.value = ""
  afterPrice.value = ""
  value.value = ""
  pagination.value.page = 1
  filterClick(filterList.value[0], 0)
}
</script>

<template>
  <page-container :title="route.meta.title">
    <a-card >
      <div class="category-list">
        <div class="title">分销分类</div>
        <div class="left">
          <div class="box">
            <div class="item hiddenText" v-for="(item, index) in filterList"
              :class="{ active: filterSelected === index }" @click="filterClick(item, index)" :key="item.id">
              {{ item.label }}
            </div>
          </div>
        </div>
      </div>

      <div class="filter-list">
        <div class="title">商品信息</div>
        <div class="left">
          <div class="price-between">
            <div class="left-price">
              <a-input-number placeholder="开始价格" v-model:value="beforePrice" style="width: 120px"
                :disabled="loading"></a-input-number>
            </div>
            <div class="line">—</div>
            <div class="right-price">
              <a-input-number placeholder="结束价格" v-model:value="afterPrice" style="width: 120px"
                :disabled="loading"></a-input-number>
            </div>
          </div>

          <div>
            <a-select ref="select" v-model:value="value" placeholder="服务类型" allowClear style="width: 150px"
              :options="options" @change="handleChange" :disabled="loading"></a-select>
          </div>

          <div class="filter-actions">
            <a-button @click="handleSearch" type="primary" :loading="loading">查询</a-button>
            <a-button @click="handleReset" type="default" :disabled="loading">重置</a-button>
          </div>

          <div class="checkbox-group">
            <a-checkbox v-model:checked="checked1" :disabled="loading">40元以下商品</a-checkbox>
            <a-checkbox v-model:checked="checked2" :disabled="loading">新上架商品</a-checkbox>
          </div>
        </div>
      </div>

      <div class="good-list-container">
        <template v-if="skeletonLoading && !loading">
          <div class="skeleton-list">
            <Skeleton v-for="i in 12" :key="i" active />
          </div>
        </template>

        <template v-else-if="dataSource.length > 0">
          <div class="good-list">
            <div class="good-item" v-for="(item, index) in dataSource" :key="index">
              <Item :info="item"></Item>
            </div>
          </div>
        </template>

        <template v-else>
          <div class="empty-list">
            <img src="@/assets/empty.png" alt="暂无数据">
            <div class="empty-text">暂无商品数据</div>
          </div>
        </template>
      </div>

      <div class="pagination-container" v-if="dataSource.length > 0">
        <a-pagination v-model:current="pagination.page" show-quick-jumper :total="pagination.total"
          :show-total="(total) => `共 ${total} 件商品`" @change="onChangePage" :disabled="loading" />
      </div>
    </a-card>
  </page-container>
</template>

<style lang="less" scoped>
.hiddenText {
  display: inline-block;
  width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.good-list-container {
  min-height: 500px;
  position: relative;
}

.skeleton-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 24px;
  padding: 16px;
}

.good-list {
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 24px;
  padding: 16px;
}

.empty-list {
  height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #999;

  img {
    width: 200px;
    height: auto;
    margin-bottom: 20px;
  }

  .empty-text {
    font-size: 16px;
  }
}

.good-item {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #f0f0f0;
  background: #fff;
  transition: all 0.3s;

  &:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
  }
}

.filter-list {
  display: flex;
  align-items: flex-start;
  margin: 24px 0;
  padding: 16px;
  background: #fafafa;
  border-radius: 8px;

  .title {
    font-size: 14px;
    color: #666;
    margin-right: 25px;
    min-width: 80px;
    line-height: 32px;
  }

  .left {
    flex: 1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;

    .price-between {
      display: flex;
      align-items: center;

      .line {
        color: #999;
        margin: 0 10px;
      }
    }

    .filter-actions {
      display: flex;
      gap: 8px;
    }

    .checkbox-group {
      display: flex;
      gap: 16px;
      margin-left: 16px;
    }
  }
}

.category-list {
  display: flex;
  margin-bottom: 24px;
  padding: 16px;
  background: #fafafa;
  border-radius: 8px;

  .title {
    font-size: 14px;
    color: #666;
    margin-right: 25px;
    min-width: 80px;
    line-height: 32px;
  }

  .left {
    flex: 1;

    .box {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;

      .item {
        padding: 6px 12px;
        border-radius: 16px;
        cursor: pointer;
        border: 1px solid #e8e8e8;
        color: #666;
        transition: all 0.3s;
        font-size: 14px;

        &:hover {
          border-color: #1890ff;
          color: #1890ff;
        }

        &.active {
          background: #1890ff;
          color: #fff;
          border-color: #1890ff;
        }
      }
    }
  }
}

.pagination-container {
  margin-top: 24px;
  display: flex;
  justify-content: center;
}

a:hover {
  color: #1890ff;
}
</style>