aidlab/Aida_Purchaser_Front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix

Browse Source
This commit is contained in:
X1627315083@163.com
2026-05-21 14:36:29 +08:00
parent 338ee24da2
commit 7bfae7d024
9 changed files with 174 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
src/views/brandDetail/commodity-list.vue
View File

@@ -1,54 +1,70 @@
<script setup lang="ts">
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
import img from "@/assets/images/collectionStory/Rectangle.png";
//const props = defineProps({
//})
const emit = defineEmits([
'addShopping'
])
let data = reactive({
})
const list = ref([
{
url: img,
title: "Windswept Burden",
price: "$100.00",
},{
url: img,
title: "Windswept Burden",
price: "$100.00",
},{
url: img,
title: "Windswept Burden",
price: "$100.00",
},{
url: img,
title: "Windswept Burden",
price: "$100.00",
},{
url: img,
title: "Windswept Burden",
price: "$100.00",
},{
url: img,
title: "Windswept Burden",
price: "$100.00",
},{
url: img,
title: "Windswept Burden",
price: "$100.00",
import { getlistingListApi } from "@/api/listing";
const props = defineProps({
id: {
type: String,
default: ''
}
})
const emit = defineEmits([
'addShopping','openDetail'
])
const type = ref('All')
const getMerchantData = reactive({
pageSize: 10,
pageNum: 1,
isShowMark:false,
isNoData:false,
})
const listingList = ref([
])
const type = ref('all')
const addShopping = (item) => {
emit('addShopping', item)
}
const setType = (val) => {
type.value = val
getMerchantData.pageNum = 1
getMerchantData.isShowMark = false
getMerchantData.isNoData = false
}
const vObserve = {
mounted (el,binding) {
getMerchantData.isShowMark = false
getMerchantData.isNoData = false
new IntersectionObserver(
(entries, observer) => {
// 如果不是相交，则直接返回
// console.log(entries[0]);
if (!entries[0].intersectionRatio) return;
binding.value()
getMerchantData.pageNum += 1
},
// { root:worksPage }
).observe(el);
}
}
const getListingList = () => {
getMerchantData.isShowMark = true
getMerchantData.isNoData = false
getlistingListApi({
sellerId: props.id,
designFor: type.value,
pageNum: getMerchantData.pageNum,
pageSize: getMerchantData.pageSize,
}).then((res)=>{
if(res.content.length == 0)getMerchantData.isNoData = true
listingList.value.push(...res.content)
getMerchantData.isShowMark = false
})
}
onMounted(()=>{
})
onUnmounted(()=>{
})
defineExpose({})
const {} = toRefs(data);
</script>
<template>
<div class="commodityList">
@@ -57,14 +73,18 @@ const {} = toRefs(data);
Items
</div>
<div class="menu">
<div :class="{'active': type === 'All'}" @click="type = 'All'">All</div>
<div :class="{'active': type === 'Male'}" @click="type = 'Male'">Male</div>
<div :class="{'active': type === 'Female'}" @click="type = 'Female'">Female</div>
<div :class="{'active': type === 'all'}" @click="setType('all')">All</div>
<div :class="{'active': type === 'male'}" @click="setType('male')">Male</div>
<div :class="{'active': type === 'female'}" @click="setType('female')">Female</div>
</div>
</div>
<div class="list">
<div class="item" v-for="item in list" :key="item.url">
<CommodityItem :url="item.url" :name="item.title" :price="item.price" @addShopping="addShopping(item)"></CommodityItem>
<div class="item" v-for="item in listingList" :key="item.url">
<CommodityItem :url="item.cover" :name="item.title" :price="item.price" @addShopping="addShopping(item)" @openDetail="$emit('openDetail', item)"></CommodityItem>
</div>
<div v-show="!getMerchantData.isNoData" class="material_content_list_loding">
<span class="page_loading" v-show="!getMerchantData.isShowMark" v-observe="getListingList"></span>
<img v-if="getMerchantData.isShowMark" src="@/assets/images/brand/brandLoading.gif" alt="">
</div>
</div>
</div>
@@ -145,6 +165,25 @@ const {} = toRefs(data);
margin-right: -1px;
margin-bottom: -1px;
}
> .material_content_list_loding{
width: 100%;
height: 5rem;
aspect-ratio: 1/1;
grid-column: 1 / -1;
overflow: hidden;
display: flex;
flex-shrink: 0;
justify-content: center;
> .page_loading{
width: 5rem;
height: 5rem;
}
> img{
width: 5rem;
height: 5rem;
object-fit: contain;
}
}
}
}
</style>

14
src/views/brandDetail/index.vue
View File

@@ -4,7 +4,9 @@ import CommodityList from "./commodity-list.vue";
import MerchantInfo from "./merchant-info.vue";
import { useRouter, useRoute } from "vue-router";
import myEvent from '@/utils/myEvent'
import { ElMessage } from 'element-plus'
import { getDesignerDetail } from '@/api/brand'
import { AddShoppingCart } from '@/api/shoppingCart'
//const props = defineProps({
//})
@@ -25,10 +27,14 @@ const designerDetail = ref({
})
const addShopping = (item) => {
myEvent.emit('addShopping', item)
if(!item.price) return ElMessage.warning('Please log in first.')
AddShoppingCart({listingIds:[item.id]}).then((res)=>{
item.shopName = designerDetail.value.shopName
myEvent.emit('addShopping', item)
})
}
const openDetail = (item) => {
router.push({name: 'digitalDetail', params: {id: item.id}})
router.push({name: 'digitalItemDetail', params: {id: item.id}})
}
const getDetail = ()=>{
let data = {
@@ -55,7 +61,7 @@ defineExpose({})
<MerchantInfo :designerDetail="designerDetail"></MerchantInfo>
</div>
<div class="commodity-list">
<CommodityList @addShopping="addShopping" @openDetail="openDetail"></CommodityList>
<CommodityList :id="route.params.id" @addShopping="addShopping" @openDetail="openDetail"></CommodityList>
</div>
</div>
<Footer></Footer>
@@ -76,7 +82,7 @@ defineExpose({})
.content{
display: flex;
height: auto;
align-items: flex-start;
// align-items: flex-start;
.merchant-info{
width: 40rem;
padding-left: 12.7rem;