|
@@ -1,74 +1,79 @@
|
|
|
<template>
|
|
<template>
|
|
|
<div class="right-box">
|
|
<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>
|
|
|
|
|
|
|
+ <div v-if="data.length > 0">
|
|
|
|
|
+ <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>
|
|
</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>
|
|
</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"
|
|
|
|
|
- />
|
|
|
|
|
|
|
+ </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>
|
|
</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 v-else>
|
|
|
|
|
+ <a-empty />
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</template>
|
|
@@ -111,7 +116,9 @@ const emits = defineEmits([
|
|
|
|
|
|
|
|
const userStore = useUserStore();
|
|
const userStore = useUserStore();
|
|
|
|
|
|
|
|
-const isLogin = computed(() => userStore.isLogin);
|
|
|
|
|
|
|
+const isLogin = computed(() => {
|
|
|
|
|
+ return userStore.userInfo != null
|
|
|
|
|
+});
|
|
|
|
|
|
|
|
const mainData = reactive({
|
|
const mainData = reactive({
|
|
|
columns: [
|
|
columns: [
|