overseas-jsm-mall-front/src/pages/category/components/Right.vue

<template>
  <div class="right-box">
    <a-table
      v-if="isList"
      bordered
      :dataSource="data"
      :columns="mainData.columns"
      :showHeader="false"
      :pagination="false"
    >
      <template #emptyText>暂无商品信息</template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'goodsName'">
          <div class="goods-name" @click="viewDetail(record)">
            <a-flex align="center">
              <img :src="record.imgUrl" width="60" height="60" style="margin-right: 10px;" />
              <span>{{ record.goodsName }}</span>
            </a-flex>
            <a-flex v-if="foramtTagData(record).length > 0" gutter="small" style="margin-top: 10px; margin-left: 70px;">
              <a-tag
                v-for="(tag, tIndex) in foramtTagData(record)"
                :key="tIndex"
                color="red"
              >{{ tag }}</a-tag>
            </a-flex>
          </div>
        </template>
        <template v-if="column.key === 'soldNum'">
          <div v-if="isLogin">销量: {{ record.soldNum }}</div>
          <div v-else>
            <a-button type="link" @click="toLogin">登录</a-button>
            <span>查看销量</span>
          </div>
        </template>
        <template v-if="column.key === 'goodsPrice'">
          <div v-if="isLogin">价格: ¥ {{ record.goodsPrice }}</div>
          <div v-else>
            <a-button type="link" @click="toLogin">登录</a-button>
            <span>查看价格</span>
          </div>
        </template>
        <template v-if="column.key === 'opetation'">
          <a-flex align="center" justify="space-between">
            <a-button :disabled="!isLogin || disabled" type="primary" @click="handleAddToCart(record)">添加到购物车</a-button>
            <a-button :disabled="!isLogin || disabled" type="primary" @click="handleAddToLike(record)">添加到列表</a-button>
          </a-flex>
        </template>
      </template>
    </a-table>
    <div v-else class="grid-list__box">
      <GridItem
        v-for="item in data"
        :key="item.goodsId"
        :isLogin="isLogin"
        :item="item"
        :disabled="disabled"
        @goods-detail="viewDetail"
        @to-login="toLogin"
        @add-to-cart="handleAddToCart"
        @add-to-like="handleAddToLike"
      />
    </div>
    <div style="margin-top: 10px;">
      <a-pagination
        show-size-changer
        :current="pagination.pageNum"
        :pageSize="pagination.pageSize"
        :total="pagination.total"
        :page-size-options="['6', '12', '24', '26', '48']"
        @change="changePagination"
      />
    </div>
  </div>
</template>

<script setup lang="js">
import { reactive, computed } from 'vue';
import GridItem from './GridItem.vue';
import { useUserStore } from '@/store/user';

const props = defineProps({
  data: {
    type: Array,
    default: () => []
  },
  pagination: {
    type: Object,
    default: () => ({
      pageNum: 1,
      pageSize: 10,
      total: 0
    })
  },
  isList: {
    type: Boolean,
    default: true
  },
  disabled: {
    type: Boolean,
    default: false
  }
})

const emits = defineEmits([
  'change-pagination',
  'goods-detail',
  'add-to-cart',
  'add-to-like',
  'to-login'
]);

const userStore = useUserStore();

const isLogin = computed(() => userStore.isLogin);

const mainData = reactive({
  columns: [
    {
      title: '商品名称',
      dataIndex: 'goodsName',
      key: 'goodsName'
    },
    {
      title: '商品库存',
      dataIndex: 'soldNum',
      key: 'soldNum',
      width: 160
    },
    {
      title: '商品价格',
      dataIndex: 'goodsPrice',
      key: 'goodsPrice',
      width: 160
    },
    {
      title: '操作',
      dataIndex: 'opetation',
      key: 'opetation',
      width: 260
    }
  ]
})

const changePagination = (pageNum, pageSize) => {
  emits('change-pagination', {pageNum, pageSize});
}

const viewDetail = (record) => {
  emits('goods-detail', record);
}

const handleAddToCart = record => {
  emits('add-to-cart', record)
}

const handleAddToLike = record => {
  emits('add-to-like', record)
}

const toLogin = () => {
  emits('to-login')
}

const foramtTagData = record => {
  const tags1 = Array.isArray(record.tags1) ? record.tags1 : [];
  const tags2 = Array.isArray(record.tags2) ? record.tags2 : [];
  return [].concat(tags1, tags2);
}
</script>

<style lang="less" scoped>
.goods-name {
  color: @theme-color;
  cursor: pointer;
}

.grid-list__box {
  width: 100%;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
</style>