Merge branch 'main' of http://18.167.251.121:10003/aidlab/Aida_Purchaser_Front
This commit is contained in:
35
src/api/brand.ts
Normal file
35
src/api/brand.ts
Normal file
@@ -0,0 +1,35 @@
|
||||
import request from '@/utils/request'
|
||||
/**
|
||||
* 获取店铺列表
|
||||
* @param data 获取店铺列表的参数
|
||||
* @param data.keyword 模糊查询店铺
|
||||
* @returns 获取店铺列表
|
||||
*/
|
||||
export interface designerListData {
|
||||
keyword: string
|
||||
}
|
||||
export const getDesignerList = (data:designerListData,loading?:boolean) => {
|
||||
return request({
|
||||
url: '/buyer/designer/search',
|
||||
method: 'get',
|
||||
params: data,
|
||||
loading
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取店铺详情
|
||||
* @param data 获取店铺详情的参数
|
||||
* @param data.sellerId 店铺 id
|
||||
* @returns 获取店铺详情
|
||||
*/
|
||||
export interface designerDetailData {
|
||||
sellerId?: string
|
||||
}
|
||||
export const getDesignerDetail = (data:designerDetailData,loading?:boolean) => {
|
||||
return request({
|
||||
url: `/buyer/designer/shop/${data.sellerId}`,
|
||||
method: 'get',
|
||||
loading
|
||||
})
|
||||
}
|
||||
70
src/api/listing.ts
Normal file
70
src/api/listing.ts
Normal file
@@ -0,0 +1,70 @@
|
||||
import request from '@/utils/request'
|
||||
/**
|
||||
* 获取店铺商品列表
|
||||
* @param data 获取店铺商品列表的参数
|
||||
* @param data.sellerId 店铺id
|
||||
* @param data.designFor 查询类型 female/male/all
|
||||
* @param data.pageNum 页码
|
||||
* @param data.pageSize 页面大小
|
||||
* @returns 获取店铺商品列表
|
||||
*/
|
||||
export interface listingListData {
|
||||
sellerId?: string
|
||||
designFor?: string
|
||||
pageNum?: number
|
||||
pageSize?: number
|
||||
}
|
||||
export const getlistingList = (data:listingListData,loading?:boolean) => {
|
||||
return request({
|
||||
url: '/buyer/listing/shop/seller',
|
||||
method: 'get',
|
||||
params: data,
|
||||
loading
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取商品详情
|
||||
* @param data 获取商品详情的参数
|
||||
* @param data.id 商品 id
|
||||
* @returns 获取商品详情
|
||||
*/
|
||||
export interface listingDetailData {
|
||||
id?: string
|
||||
}
|
||||
export const getListingDetail = (data:listingDetailData,loading?:boolean) => {
|
||||
return request({
|
||||
url: `/buyer/listing/mall/detail`,
|
||||
method: 'get',
|
||||
params: data,
|
||||
loading
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取资产数字商品列表
|
||||
* @param data 获取资产数字商品列表的参数
|
||||
* @param data.designFor 查询类型 female/male/all
|
||||
* @param data.categories 商品分类
|
||||
* @param data.sortField 排序字段 price/salesVolume/updateTime/viewCount/createTime,默认 updateTime
|
||||
* @param data.sortOrder 排序顺序:asc/desc,默认 desc
|
||||
* @param data.pageNum 页码
|
||||
* @param data.pageSize 页面大小
|
||||
* @returns 获取资产数字商品列表
|
||||
*/
|
||||
export interface listingMallData {
|
||||
designFor: string,
|
||||
categories: string[],
|
||||
sortField: string,
|
||||
sortOrder: string,
|
||||
pageNum: number,
|
||||
pageSize: number
|
||||
}
|
||||
export const getListingMallList = (data:listingMallData,loading?:boolean) => {
|
||||
return request({
|
||||
url: `/buyer/listing/mall`,
|
||||
method: 'post',
|
||||
data,
|
||||
loading
|
||||
})
|
||||
}
|
||||
@@ -25,25 +25,25 @@ const {} = toRefs(data);
|
||||
<div class="item">
|
||||
<div class="left">
|
||||
<div class="portrait">
|
||||
<img :src="item.portrait" alt="">
|
||||
<img :src="item.avatar" alt="">
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="name">{{ item.name }}</div>
|
||||
<div class="name">{{ item.shopName }}</div>
|
||||
<div class="collection">
|
||||
{{ item.collectionsName }} |
|
||||
{{ item?.collections?.length || 0 }} Collections
|
||||
{{ item.ownerName }} |
|
||||
{{ item?.listingTotal || 0 }} Collections
|
||||
</div>
|
||||
<div class="view-profile" @click="viewProfile(item)">View Profile</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="img-list">
|
||||
<div class="img-item" v-for="itemImg in item?.collections?.slice(0,5)" :key="item.id">
|
||||
<div class="img-item" v-for="itemImg in item?.covers" :key="itemImg">
|
||||
<img :src="itemImg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="more">
|
||||
<div class="icon" v-show="item?.collections?.length > 5">
|
||||
<div class="icon" v-show="item?.covers?.length == 5">
|
||||
<svgIcon name="brand-more" size="24" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -4,6 +4,8 @@ import { useRouter } from "vue-router";
|
||||
import myEvent from '@/utils/myEvent'
|
||||
import scListNull from '@/views/shoppingCart/sc-list-null.vue'
|
||||
import brandItem from '@/views/brand/brand-item.vue'
|
||||
import { getDesignerList } from '@/api/brand'
|
||||
|
||||
|
||||
import img from '@/assets/images/collectionStory/Rectangle.png'
|
||||
//const props = defineProps({
|
||||
@@ -23,87 +25,89 @@ const getMerchantData = reactive({
|
||||
isShowMark:false,
|
||||
isNoData:false,
|
||||
})
|
||||
const list = ref([
|
||||
' 1',
|
||||
'Brand 2',
|
||||
'Brand 3',
|
||||
'1213123 4',
|
||||
'Brand 4',
|
||||
'2222 4',
|
||||
'B23rand 4',
|
||||
'Bran112222d 4',
|
||||
' 4',
|
||||
const searchHistory = ref([
|
||||
|
||||
])
|
||||
|
||||
let changeSearchBrandTime = null
|
||||
const changeSearchBrand = () => {
|
||||
clearTimeout(changeSearchBrandTime)
|
||||
changeSearchBrandTime = setTimeout(()=>{
|
||||
getMerchantData.pageNum = 1
|
||||
getDesignerList({
|
||||
keyword: searchBrand.value,
|
||||
}).then((res)=>{
|
||||
merchantList.value = []
|
||||
getMerchantData.isShowMark = false
|
||||
getMerchantData.isNoData = false
|
||||
},300)
|
||||
merchantList.value.push(...res)
|
||||
})
|
||||
// changeSearchBrandTime = setTimeout(()=>{
|
||||
// getMerchantData.pageNum = 1
|
||||
// getMerchantData.isShowMark = false
|
||||
// getMerchantData.isNoData = false
|
||||
// },300)
|
||||
}
|
||||
|
||||
const getBrandList = async () => {
|
||||
if(getMerchantData.isShowMark && !getMerchantData.isNoData)return
|
||||
getMerchantData.isShowMark = true
|
||||
let value = {
|
||||
pageSize: getMerchantData.pageSize,
|
||||
pageNum: getMerchantData.pageNum,
|
||||
status: 1,
|
||||
}
|
||||
setTimeout(()=>{
|
||||
if(merchantList.value.length >= 5){
|
||||
getMerchantData.isNoData = true
|
||||
merchantList.value = []
|
||||
return
|
||||
}
|
||||
getMerchantData.pageNum += 1
|
||||
merchantList.value.push({
|
||||
name:'Roaming Clouds',
|
||||
portrait: img,
|
||||
collectionsName:'by Lian Su ',
|
||||
collections:[
|
||||
img,img,img,
|
||||
],
|
||||
})
|
||||
getMerchantData.isShowMark = false
|
||||
},1000)
|
||||
// await getPublishList(value).then((res)=>{
|
||||
// if(res.content.length == 0)getMerchantData.isNoData = true
|
||||
// getMerchantData.pageNum += 1
|
||||
// list.value.push(...res.content)
|
||||
// })
|
||||
}
|
||||
const vObserve = {
|
||||
mounted (el,binding) {
|
||||
getMerchantData.isShowMark = false
|
||||
getMerchantData.isNoData = false
|
||||
new IntersectionObserver(
|
||||
(entries, observer) => {
|
||||
// 如果不是相交,则直接返回
|
||||
// console.log(entries[0]);
|
||||
if (!entries[0].intersectionRatio) return;
|
||||
getMerchantData.pageNum += 1
|
||||
binding.value()
|
||||
},
|
||||
// { root:worksPage }
|
||||
).observe(el);
|
||||
}
|
||||
}
|
||||
// const getBrandList = async () => {
|
||||
// if(getMerchantData.isShowMark && !getMerchantData.isNoData)return
|
||||
// getMerchantData.isShowMark = true
|
||||
// let value = {
|
||||
// pageSize: getMerchantData.pageSize,
|
||||
// pageNum: getMerchantData.pageNum,
|
||||
// status: 1,
|
||||
// }
|
||||
// setTimeout(()=>{
|
||||
// if(merchantList.value.length >= 5){
|
||||
// getMerchantData.isNoData = true
|
||||
// merchantList.value = []
|
||||
// return
|
||||
// }
|
||||
// getMerchantData.pageNum += 1
|
||||
// merchantList.value.push({
|
||||
// name:'Roaming Clouds',
|
||||
// portrait: img,
|
||||
// collectionsName:'by Lian Su ',
|
||||
// collections:[
|
||||
// img,img,img,
|
||||
// ],
|
||||
// })
|
||||
// getMerchantData.isShowMark = false
|
||||
// },1000)
|
||||
// // await getPublishList(value).then((res)=>{
|
||||
// // if(res.content.length == 0)getMerchantData.isNoData = true
|
||||
// // getMerchantData.pageNum += 1
|
||||
// // list.value.push(...res.content)
|
||||
// // })
|
||||
// }
|
||||
// const vObserve = {
|
||||
// mounted (el,binding) {
|
||||
// getMerchantData.isShowMark = false
|
||||
// getMerchantData.isNoData = false
|
||||
// new IntersectionObserver(
|
||||
// (entries, observer) => {
|
||||
// // 如果不是相交,则直接返回
|
||||
// // console.log(entries[0]);
|
||||
// if (!entries[0].intersectionRatio) return;
|
||||
// getMerchantData.pageNum += 1
|
||||
// binding.value()
|
||||
// },
|
||||
// // { root:worksPage }
|
||||
// ).observe(el);
|
||||
// }
|
||||
// }
|
||||
|
||||
const deleteHistory = (item) => {
|
||||
list.value = list.value.filter((i) => i != item)
|
||||
searchHistory.value = searchHistory.value.filter((i) => i != item)
|
||||
localStorage.setItem('brandSearchHistory', JSON.stringify(searchHistory.value));
|
||||
}
|
||||
const viewProfile = (item) => {
|
||||
if(!searchHistory.value.includes(searchBrand.value))searchHistory.value.push(searchBrand.value)
|
||||
localStorage.setItem('brandSearchHistory', JSON.stringify(searchHistory.value));
|
||||
router.push({
|
||||
path:'/brand/1',
|
||||
path:'/brand/'+item.sellerId,
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(()=>{
|
||||
const value = localStorage.getItem('brandSearchHistory');
|
||||
if(value)searchHistory.value = JSON.parse(value)
|
||||
})
|
||||
onUnmounted(()=>{
|
||||
})
|
||||
@@ -129,10 +133,10 @@ const {} = toRefs(data);
|
||||
<div class="merchantList" v-if="searchBrand.length > 0">
|
||||
<brand-item v-for="item in merchantList" :key="item.name" :item="item" @viewProfile="viewProfile"></brand-item>
|
||||
<div class="end" v-show="!getMerchantData.isNoData && !getMerchantData.isShowMark">- The End-</div>
|
||||
<div v-show="!getMerchantData.isNoData" class="material_content_list_loding">
|
||||
<!-- <div v-show="!getMerchantData.isNoData" class="material_content_list_loding">
|
||||
<span class="page_loading" v-show="!getMerchantData.isShowMark" v-observe="getBrandList"></span>
|
||||
<img v-if="getMerchantData.isShowMark" src="@/assets/images/brand/brandLoading.gif" alt="">
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<div class="merchantListNull" v-if="getMerchantData.isNoData && searchBrand.length > 0">
|
||||
<sc-list-null
|
||||
@@ -151,7 +155,7 @@ const {} = toRefs(data);
|
||||
<span>Searching History</span>
|
||||
</div>
|
||||
<div class="history">
|
||||
<div v-for="item in list" :key="item" @click.stop="searchBrand = item" class="item">
|
||||
<div v-for="item in searchHistory" :key="item" @click.stop="searchBrand = item" class="item">
|
||||
<span>{{item}}</span>
|
||||
<div class="icon" @click.stop="deleteHistory(item)">
|
||||
<SvgIcon name="brand-delete" size="18" />
|
||||
|
||||
@@ -2,36 +2,57 @@
|
||||
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
|
||||
import CommodityList from "./commodity-list.vue";
|
||||
import MerchantInfo from "./merchant-info.vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import { useRouter, useRoute } from "vue-router";
|
||||
import myEvent from '@/utils/myEvent'
|
||||
import { getDesignerDetail } from '@/api/brand'
|
||||
|
||||
//const props = defineProps({
|
||||
//})
|
||||
//const emit = defineEmits([
|
||||
//])
|
||||
const router = useRouter()
|
||||
let data = reactive({
|
||||
const route = useRoute()
|
||||
|
||||
const designerDetail = ref({
|
||||
avatar: '',
|
||||
brandBanner: '',
|
||||
description: '',
|
||||
email: '',
|
||||
mobile: '',
|
||||
ownerName: '',
|
||||
shopName: '',
|
||||
socialLinks: '[]',
|
||||
})
|
||||
|
||||
const addShopping = (item) => {
|
||||
myEvent.emit('addShopping', item)
|
||||
}
|
||||
const openDetail = (item) => {
|
||||
router.push({name: 'digitalDetail', params: {id: item.id}})
|
||||
}
|
||||
const getDetail = ()=>{
|
||||
let data = {
|
||||
sellerId: route.params.id,
|
||||
}
|
||||
getDesignerDetail(data,true).then((res)=>{
|
||||
designerDetail.value = res
|
||||
})
|
||||
}
|
||||
onMounted(()=>{
|
||||
getDetail()
|
||||
})
|
||||
onUnmounted(()=>{
|
||||
})
|
||||
defineExpose({})
|
||||
const {} = toRefs(data);
|
||||
</script>
|
||||
<template>
|
||||
<div class="brand">
|
||||
<div class="header-img">
|
||||
<img src="@/assets/images/brand/brandDetailBg.png" alt="">
|
||||
<img :src="designerDetail.brandBanner || '@/assets/images/brand/brandDetailBg.png'" alt="">
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="merchant-info">
|
||||
<MerchantInfo></MerchantInfo>
|
||||
<MerchantInfo :designerDetail="designerDetail"></MerchantInfo>
|
||||
</div>
|
||||
<div class="commodity-list">
|
||||
<CommodityList @addShopping="addShopping" @openDetail="openDetail"></CommodityList>
|
||||
|
||||
@@ -1,7 +1,22 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
|
||||
//const props = defineProps({
|
||||
//})
|
||||
const props = defineProps({
|
||||
designerDetail: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
avatar: '',
|
||||
brandBanner: '',
|
||||
description: '',
|
||||
email: '',
|
||||
mobile: '',
|
||||
ownerName: '',
|
||||
shopName: '',
|
||||
socialLinks: '[]',
|
||||
}
|
||||
},
|
||||
},
|
||||
})
|
||||
//const emit = defineEmits([
|
||||
//])
|
||||
let data = reactive({
|
||||
@@ -16,12 +31,12 @@ const {} = toRefs(data);
|
||||
<template>
|
||||
<div class="merchantInfo">
|
||||
<div class="profile">
|
||||
<img src="@/assets/images/collectionStory/Rectangle.png" alt="">
|
||||
<img :src="designerDetail.avatar || '@/assets/images/collectionStory/Rectangle.png'" alt="">
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="detail">
|
||||
<div class="name">Lian Su</div>
|
||||
<div class="title">Roaming Clouds</div>
|
||||
<div class="name">{{ designerDetail.ownerName }}</div>
|
||||
<div class="title">{{ designerDetail.shopName }}</div>
|
||||
</div>
|
||||
<div class="contact">
|
||||
<div class="title">Contact</div>
|
||||
@@ -29,30 +44,26 @@ const {} = toRefs(data);
|
||||
<div class="icon">
|
||||
<svg-icon name="brand-email" size="24" />
|
||||
</div>
|
||||
<div>lian.su@urieworweoo.com</div>
|
||||
<div>{{ designerDetail.email }}</div>
|
||||
</div>
|
||||
<div class="phone label">
|
||||
<div class="icon">
|
||||
<svg-icon name="brand-call" size="24" />
|
||||
</div>
|
||||
<div>+86 139 4829 7710</div>
|
||||
<div>{{ designerDetail.mobile }}</div>
|
||||
</div>
|
||||
<div class="address label">
|
||||
<div class="address label" v-for="value in JSON.parse(designerDetail.socialLinks)">
|
||||
<div class="icon">
|
||||
<svg-icon name="brand-link" size="24" />
|
||||
</div>
|
||||
<div>746312432</div>
|
||||
</div>
|
||||
<div class="website label">
|
||||
<div class="icon">
|
||||
<svg-icon name="brand-link" size="24" />
|
||||
</div>
|
||||
<div>https://urieworweoo.com</div>
|
||||
<div>{{value}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="about">
|
||||
<div class="title">About</div>
|
||||
<div class="content">Lian Su’s work weaves understated ethnic influences into contemporary minimalism. She explores materials and silhouettes that bridge heritage and modern sensibilities. Her designs reflect a quiet dialogue between cultural memory and forward-looking innovation.</div>
|
||||
<div class="content">
|
||||
{{ designerDetail.description }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user