购物车

.env.development

@@ -1,3 +1 @@
-# VITE_APP_URL = http://192.168.31.82:8771
-# VITE_APP_URL = http://18.167.251.121:10095
-VITE_APP_URL = https://www.lc-api.aida.com.hk
+VITE_APP_URL = http://192.168.31.82:10094

.env.production

@@ -1,2 +1 @@
-VITE_APP_URL = https://www.lc-api.aida.com.hk
-# VITE_APP_URL = http://18.167.251.121:10095
+VITE_APP_URL = http://192.168.31.82:10094

src/App.vue

@@ -15,6 +15,7 @@
 	import ShoppingDrawer from '@/views/shopping-drawer.vue'
 	const globalStore = useGlobalStore()
 	const loading = computed(() => globalStore.state.loading)
+	globalStore.setLoading(false)
 	const viewRef = ref()
 	const viewStyle = ref({
 		'--app-view-width': '',

src/api/account.ts

@@ -0,0 +1,122 @@
+import request from '@/utils/request'
+
+/**
+ * 登录发送验证码
+ * @param data - 包含邮箱的参数
+ * @param data.email - 邮箱
+ * @param data.password - 密码
+*/
+export const AccountSendLoginCode = (data) => {
+	return request({
+		url: '/buyer/account/preLogin',
+		method: 'post',
+		data,
+		loading: true
+	})
+}
+/**
+ * 登录
+ * @param data - 包含邮箱的参数
+ * @param data.email - 邮箱
+ * @param data.password - 密码
+ * @param data.emailVerifyCode - 验证码
+*/
+export const AccountLogin = (data) => {
+	return request({
+		url: '/buyer/account/login',
+		method: 'post',
+		data,
+		loading: true
+	})
+}
+
+/**
+ * 注册
+ * @param data - 包含注册信息的参数
+ * @param data.email - 邮箱
+ * @param data.password - 密码
+ * @param data.username - 用户名
+ * @param data.emailVerifyCode - 验证码
+ */
+export const AccountRegister = (data) => {
+	return request({
+		url: '/buyer/account/register',
+		method: 'post',
+		data,
+		loading: true
+	})
+}
+/**
+ * 注册||忘记密码：发送邮箱验证码
+ * @param data - 包含邮箱的参数
+ * @param data.email - 邮箱
+ * @param data.operationType - 操作类型：FORGET_PWD, REGISTER
+*/
+export const AccountSendVerifyCode = (data) => {
+	return request({
+		url: '/buyer/account/sendCode',
+		method: 'post',
+		data,
+		loading: true
+	})
+}
+/**
+ * 忘记密码：重置密码
+ * @param data - 包含邮箱的参数
+ * @param data.email - 邮箱
+ * @param data.password - 密码
+ * @param data.emailVerifyCode - 验证码
+*/
+export const AccountResetPassword = (data) => {
+	return request({
+		url: '/buyer/account/resetPassword',
+		method: 'post',
+		data,
+		loading: true
+	})
+}
+/**
+ * 通用验证码校验
+ * @param data - 包含邮箱的参数
+ * @param data.email - 邮箱
+ * @param data.emailVerifyCode - 验证码
+ * @param data.operationType - 操作类型：FORGET_PWD, BIND_MAILBOX
+*/
+export const AccountVerifyCode = (data) => {
+	return request({
+		url: '/buyer/account/verifyCode',
+		method: 'post',
+		data,
+		loading: true
+	})
+}
+
+/**
+ * 变更邮箱：发送新邮箱验证码
+ * @param data - 包含邮箱的参数
+ * @param data.oldEmail - 旧邮箱
+ * @param data.newEmail - 新邮箱
+*/
+export const AccountSendEmailChangeCode = (data) => {
+	return request({
+		url: '/buyer/account/sendEmailChangeCode',
+		method: 'post',
+		data,
+		loading: true
+	})
+}
+/**
+ * 变更邮箱：绑定新邮箱
+ * @param data - 包含邮箱的参数
+ * @param data.oldEmail - 旧邮箱
+ * @param data.newEmail - 新邮箱
+ * @param data.emailVerifyCode - 验证码
+*/
+export const AccountBindEmail = (data) => {
+	return request({
+		url: '/buyer/account/bindEmail',
+		method: 'post',
+		data,
+		loading: true
+	})
+}

src/api/brand.ts

@@ -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
+	})
+}

src/api/listing.ts

@@ -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
+	})
+}

src/api/login.ts

@@ -1,77 +0,0 @@
-import request from '@/utils/request'
-
-interface LoginParamsType {
-  name?: string // 姓名
-  email: string // 邮箱
-  password?: string // 密码
-  operationType: 'REGISTER' | 'LOGIN' | 'FORGET_PWD'
-  verifyCode?: string // 验证码
-}
-
-// 发送验证码
-export const precheckEmail = (params: { email: string }): Promise<ApiResponse> => {
-  return request({
-    url: '/api/auth/precheckEmail',
-    method: 'get',
-    params
-  })
-}
-
-export const fetchRegisterOrLogin = (data: LoginParamsType): Promise<LoginResponse> => {
-  return request({
-    url: '/api/auth/registerOrLogin',
-    method: 'post',
-    data
-  })
-}
-
-export const resetPassword = (data: LoginParamsType): Promise<ApiResponse> => {
-  return request({
-    url: '/api/auth/forgotPwd',
-    method: 'post',
-    data
-  })
-}
-
-export const checkLoginStatus = (): Promise<ApiResponse<LoginResponse>> => {
-  return request({
-    url: '/api/auth/checkLoginStatus',
-    method: 'get',
-    meta: { responseAll: true }
-  })
-}
-
-export const LogOut = (): Promise<ApiResponse> => {
-  return request({
-    url: '/api/auth/logout',
-    method: 'get'
-  })
-}
-
-// Google登录/注册参数类型
-interface GoogleAuthParamsType {
-  accessToken?: string // Google ID Token (用于One Tap登录)
-}
-export const googleAuth = (data: GoogleAuthParamsType): Promise<LoginResponse> => {
-  return request({
-    url: '/api/auth/parseGoogleAccessToken',
-    method: 'get',
-    params: data
-  })
-}
-
-
-/** 更改用户信息
- * @param data 包含用户信息的对象
- * @param data.username 用户名
- * @param data.email 邮箱
- * @param data.password 密码
- * @returns 包含更新后的用户信息的对象
-*/
-export const updateUserInfo = (data: any) => {
-  return request({
-    url: '/api/auth/updateUserInfo',
-    method: 'post',
-    data
-  })
-}

src/api/shoppingCart.ts

@@ -0,0 +1,55 @@
+import request from '@/utils/request'
+
+/**
+ * 加入购物车
+ * @param data - 包含邮箱的参数
+ * @param data.listingId - 商品ID
+ * @param data.listingIds - 商品ID列表
+*/
+export const AddShoppingCart = (data, loading?: boolean) => {
+	return request({
+		url: '/buyer/buyer/cart/add',
+		method: 'post',
+		data,
+		loading
+	})
+}
+
+/**
+ * 清空购物车
+*/
+export const ClearShoppingCart = (loading?: boolean) => {
+	return request({
+		url: '/buyer/buyer/cart/clear',
+		method: 'delete',
+		loading
+	})
+}
+
+/**
+ * 获取购物车列表
+ * @param loading - 是否显示loading
+ * @returns 购物车列表数据
+*/
+export const GetShoppingCartList = (loading?: boolean) => {
+	return request({
+		url: '/buyer/buyer/cart/list',
+		method: 'get',
+		loading
+	})
+}
+
+/**
+ * 从购物车移除商品
+ * @param data - 包含邮箱的参数
+ * @param data.listingId - 商品ID
+ * @param data.listingIds - 商品ID列表
+*/
+export const RemoveShoppingCartItem = (data, loading?: boolean) => {
+	return request({
+		url: '/buyer/buyer/cart/remove',
+		method: 'delete',
+		data,
+		loading
+	})
+}

src/assets/icons/shop.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 6.4C20 5.3 19.1 4 18 4H7.5C7.4 4 7.2 4 7.1 4C5.9 4.2 5 5.2 5 6.4L4 9C4 10.4 5.1 11.5 6.5 11.5C7.9 11.5 8.1 11.1 8.5 10.5C8.9 11.1 9.7 11.5 10.5 11.5C11.3 11.5 12.1 11.1 12.5 10.5C12.9 11.1 13.7 11.5 14.5 11.5C15.3 11.5 16.1 11.1 16.5 10.5C16.9 11.1 17.7 11.5 18.5 11.5C19.9 11.5 21 10.4 21 9M5.9 6.4C5.9 5.6 6.5 5 7.2 4.9C7.2 4.9 7.3 4.9 7.4 4.9H17.9C18.5 4.9 19 5.8 19 6.4C19 7 20 9.1 20 9.1C20 10 19.3 10.7 18.4 10.7C17.5 10.7 16.8 10 16.8 9.1V7.6H15.9V9.1C15.9 10 15.2 10.7 14.3 10.7C13.4 10.7 12.7 10 12.7 9.1V7.6H11.8V9.1C11.8 10 11.1 10.7 10.2 10.7C9.3 10.7 8.6 10 8.6 9.1V7.6H7.7V9.1C7.7 10 7.50938 10.7 6.60938 10.7C5.48438 10.7 4.9 9.9 4.9 9L5.9 6.4Z" fill="#232323"/>
+<path d="M6 11.2V19.3C6 19.9 6.4 20.3 7 20.3H18C18.6 20.3 19 19.9 19 19.3V13.5" stroke="#232323" stroke-width="0.75" stroke-linecap="round"/>
+<path d="M17 15.5V13.5C17 13.2239 16.7761 13 16.5 13C16.2239 13 16 13.2239 16 13.5V15.5C16 15.7761 16.2239 16 16.5 16C16.7761 16 17 15.7761 17 15.5Z" fill="#232323"/>
+</svg>

src/assets/icons/statement.svg

@@ -0,0 +1,4 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.32919 0C3.73406 0 0 3.7382 0 8.33333C0 12.9285 3.7382 16.6667 8.32919 16.6667C12.9202 16.6667 16.6584 12.9285 16.6584 8.33333C16.6584 3.7382 12.9243 0 8.32919 0ZM8.32919 15.7352C4.24739 15.7352 0.927306 12.4151 0.927306 8.33333C0.927306 4.25153 4.24739 0.931445 8.32919 0.931445C12.411 0.931445 15.7311 4.25153 15.7311 8.33333C15.7311 12.4151 12.411 15.7352 8.32919 15.7352Z" fill="#979797"/>
+<path d="M8.84744 7.50551C8.84744 7.21972 8.61576 6.98804 8.32997 6.98804C8.04418 6.98804 7.8125 7.21972 7.8125 7.50551V12.4732C7.8125 12.759 8.04418 12.9907 8.32997 12.9907C8.61576 12.9907 8.84744 12.759 8.84744 12.4732V7.50551Z" fill="#979797"/>
+</svg>

src/stores/userInfo.ts

@@ -5,21 +5,20 @@ import { removeLocal, setLocal } from '@/utils/local'
 import MyEvent from '@/utils/myEvent'
 export const useUserInfoStore = defineStore('userInfo', () => {
 	const state = ref({
-    userInfo: {},
-    token: '',
-    generateParams: {
-      stylist: '',
-      sex: '',
-      stylistImage: ''
-    }
+		userInfo: {
+			userId: "",
+			email: "",
+			username: "",
+			accessToken: "",
+			expiresIn: "",
+		},
+		token: ''
 	})
 
-  // getters
-  const getUserInfo = computed(() => state.value.userInfo)
-
 	// actions
 	const setUserInfo = (data: any) => {
 		state.value.userInfo = data
+		setToken(data.accessToken)
 	}
 
 	const setToken = (data: string) => {
@@ -27,44 +26,26 @@ export const useUserInfoStore = defineStore('userInfo', () => {
 		setLocal(data, 'token')
 	}
 
-  const getGenerateParams = () => {
-    return state.value.generateParams
-  }
-
-  const setGenerateParams = (data: any) => {
-    state.value.generateParams = data
-  }
-
-  const resetGenerateParams = () => {
-    state.value.generateParams = {
-      stylist: '',
-      sex: '',
-      stylistImage: ''
-    }
-  }
-
-  const logOut = () => {
+	const logout = () => {
 		// 处理退出登录的一些逻辑
 		return new Promise((resolve) => {
+			state.value.userInfo = {
+				userId: "",
+				email: "",
+				username: "",
+				accessToken: "",
+				expiresIn: "",
+			}
 			state.value.token = ''
-      state.value.userInfo = {}
 			removeLocal('token')
-      resetGenerateParams()
-      MyEvent.emit('clear-generate-state')
-      MyEvent.emit('clear-client-state')
-      MyEvent.emit('clearAllCache')
 			resolve('')
 		})
 	}
 
 	return {
 		state,
-    getUserInfo,
 		setToken,
 		setUserInfo,
-    setGenerateParams,
-    getGenerateParams,
-    resetGenerateParams,
-    logOut
+		logout
 	}
 })

src/utils/request.ts

@@ -75,9 +75,10 @@ service.interceptors.response.use(
 		const res = response.data
 		// 处理异常的情况
 		// console.log(res)
-		if (res.code != 200) {
-			ElMessage.error(res.message)
-			return Promise.reject(new Error(res.errMsg || res.message || 'error'))
+		if (res.errCode != 0) {
+			let msg = res.errMsg || res.message || 'error'
+			ElMessage.error(msg)
+			return Promise.reject(new Error(msg))
 		} else {
 			// 默认只返回data，不返回状态码和message
 			// 通过 meta 中的 responseAll 配置来取决后台是否返回所有数据(包括状态码，message和data)
@@ -109,8 +110,7 @@ service.interceptors.response.use(
 					message: 'Please log in and try again.',
 					duration: 5000
 				})
-				router.push('/login')
-				useUserInfoStore().logOut(false)
+				useUserInfoStore().logout()
 				return Promise.reject(false)
 			}
 			error.config && removePending(error.config)

src/views/brand/brand-item.vue

@@ -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>

src/views/brand/index.vue

@@ -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" />

src/views/brandDetail/index.vue

@@ -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>

src/views/brandDetail/merchant-info.vue

@@ -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>

src/views/collectionStory/detail/index.vue

@@ -77,6 +77,7 @@ const {} = toRefs(data);
 		display: flex;
 		height: calc(100vh - var(--header-height) - var(--footer-height));
 		align-items: flex-start;
+		overflow: hidden;
 		> div{
 			// height: 100%;
 		}
@@ -119,8 +120,8 @@ const {} = toRefs(data);
 			border-right: 0.5px solid #585858;
 			// overflow-y: auto;
 			overflow: hidden;
-			// height: 100%;
-			height: auto;
+			height: 100%;
+			// height: auto;
 			position: relative;
 			.line{
 				border: 0.5px solid #58585899;
@@ -141,6 +142,7 @@ const {} = toRefs(data);
 			align-items: center;
 			gap: 4rem;
 			overflow-y: auto;
+			height: 100%;
 			&::-webkit-scrollbar{
 				display: none;
 			}

src/views/digitalItem/index.vue

@@ -3,6 +3,8 @@ import { ref, onMounted, onUnmounted, reactive, toRefs, onActivated } from "vue"
 import CommodityList from "./commodity-list.vue";
 import MerchantInfo from "./merchant-info.vue";
 import { useRouter } from "vue-router";
+import scListNull from '@/views/shoppingCart/sc-list-null.vue'
+
 // 定义组件名称
 defineOptions({
   name: 'digitalItem'
@@ -77,7 +79,15 @@ const {} = toRefs(data);
 				<MerchantInfo></MerchantInfo>
 			</div>
 			<div class="commodity-list">
-				<CommodityList @addShopping="addShopping" @openDetail="openDetail"></CommodityList>
+				<CommodityList v-if="true" @addShopping="addShopping" @openDetail="openDetail"></CommodityList>
+				<div v-else class="null">
+					<sc-list-null 
+						nullImage="shopping-cart"
+						:showButton="false" 
+						title="Nothing in Digital Item"
+						tip="Try adjusting your filters or refreshing the page."
+					/>
+				</div>
 			</div>
 		</div>
 		<Footer></Footer>
@@ -178,7 +188,7 @@ const {} = toRefs(data);
 		> .content{
 			display: flex;
 			height: auto;
-			align-items: flex-start;
+			// align-items: flex-start;
 			border-top: 0.5px solid #585858;
 			.merchant-info{
 				width: 38.5rem;
@@ -197,6 +207,10 @@ const {} = toRefs(data);
 				border-left: 0.5px solid #585858;
 				border-right: 0.5px solid #585858;
 				margin-right: 9rem;
+				display: flex;
+				.null{
+					flex: 1;
+				}
 			}
 		}
 	}

src/views/login/login-dialog.vue

@@ -55,6 +55,12 @@
 </template>
 
 <script setup lang="ts">
+	import {
+		AccountSendLoginCode,
+		AccountLogin,
+		AccountRegister,
+		AccountSendVerifyCode
+	} from '@/api/account'
 	import { computed, ref, markRaw, watch, onBeforeUnmount } from 'vue'
 	import md5 from 'md5'
 	import login from './login.vue'
@@ -63,6 +69,8 @@
 	import registerSuccess from './register-success.vue'
 	import retrievePassword from './retrieve-password.vue'
 	import myEvent from '@/utils/myEvent'
+	import { useUserInfoStore } from '@/stores/userInfo'
+	const userStore = useUserInfoStore()
 	const data = ref({
 		name: '',
 		email: '',
@@ -121,22 +129,42 @@
 	})
 
 	const onLogin = (res: any) => {
+		AccountSendLoginCode({
+			email: res.email,
+			password: md5(res.password)
+		}).then((v) => {
 			data.value = res
 			data.value.type = TabNames.login
 			currentTab.value = TabNames.email_verify
+		})
 	}
 	const onRegister = (res: any) => {
+		const value = {
+			email: res.email,
+			operationType: 'REGISTER'
+		}
+		AccountSendVerifyCode(value).then((v) => {
 			data.value = res
 			data.value.type = TabNames.register
 			currentTab.value = TabNames.email_verify
+		})
 	}
 	const onSubmitEmailCode = (code: string) => {
+		const value = {
+			email: data.value.email,
+			password: md5(data.value.password),
+			emailVerifyCode: code
+		}
 		if (data.value.type === TabNames.login) {
-			console.log('登录', code)
+			AccountLogin(value).then((v) => {
+				userStore.setUserInfo(v)
 				show.value = false
+			})
 		} else {
-			console.log('注册', code)
+			value['username'] = data.value.name
+			AccountRegister(value).then((v) => {
 				currentTab.value = TabNames.register_success
+			})
 		}
 	}
 </script>

src/views/login/retrieve-password.vue

@@ -71,6 +71,7 @@
 </template>
 
 <script setup lang="ts">
+	import { AccountSendVerifyCode, AccountVerifyCode, AccountResetPassword } from '@/api/account'
 	import md5 from 'md5'
 	import { computed, reactive, ref } from 'vue'
 	import { validateEmail, validatePass } from './tools'
@@ -103,22 +104,12 @@
 	const onSubmit1 = () => {
 		form1Ref.value?.validate?.((valid) => {
 			if (valid) {
-				index.value = 1
-			} else {
-				console.warn('error submit!')
-			}
-		})
-	}
-	const onSubmit2 = () => {
-		form2Ref.value?.validate?.((valid) => {
-			if (valid) {
-				const data = {
+				AccountSendVerifyCode({
 					email: formData.email,
-					code: formData.code,
-					password: md5(formData.password)
-				}
-				console.log(data)
-				emit('back')
+					operationType: 'FORGOT_PWD'
+				}).then(() => {
+					index.value = 1
+				})
 			} else {
 				console.warn('error submit!')
 			}
@@ -126,8 +117,30 @@
 	}
 	const onVerifyCode = (code: string) => {
 		if (!code) return
+		AccountVerifyCode({
+			email: formData.email,
+			emailVerifyCode: code,
+			operationType: 'FORGOT_PWD'
+		}).then(() => {
 			formData.code = code
 			index.value = 2
+		})
+	}
+	const onSubmit2 = () => {
+		form2Ref.value?.validate?.((valid) => {
+			if (valid) {
+				const data = {
+					email: formData.email,
+					password: md5(formData.password),
+					emailVerifyCode: formData.code
+				}
+				AccountResetPassword(data).then(() => {
+					emit('back')
+				})
+			} else {
+				console.warn('error submit!')
+			}
+		})
 	}
 </script>
 

src/views/main-header.vue

@@ -26,13 +26,13 @@
 			>
 				<svg-icon :name="activePath === v.path ? v.active_icon : v.icon" size="22" />
 			</div>
-			<div class="login" @click="onLogin">Login</div>
 			<el-popover
 				ref="profilePopover"
 				placement="bottom-end"
 				trigger="click"
 				:show-arrow="false"
 				popper-style="width: 24rem; padding: 0; border-radius: 0; right: 2rem; top: 10rem;"
+				v-if="userInfo.userId"
 			>
 				<template #reference><div class="profile"></div></template>
 				<template #default>
@@ -41,7 +41,7 @@
 							<img src="@/assets/images/profile-content-bg.jpg" alt="" />
 							<div class="content">
 								<div class="profile"></div>
-								<div class="name">Hi, Alexandra_chen</div>
+								<div class="name">Hi, {{ userInfo.username }}</div>
 							</div>
 						</div>
 						<div class="nav-item" @click="onMyWardrobe">
@@ -64,6 +64,7 @@
 					</div>
 				</template>
 			</el-popover>
+			<div class="login" @click="onLogin" v-else>Login</div>
 			<div class="language" @click="onLanguageClick">
 				<span :class="{ active: locale === 'CHINESE_SIMPLIFIED' }">中</span> /
 				<span :class="{ active: locale === 'ENGLISH' }">ENG</span>
@@ -73,13 +74,17 @@
 </template>
 
 <script setup lang="ts">
+	import { ElMessageBox } from 'element-plus'
 	import { computed, ref } from 'vue'
 	import { useRouter, useRoute } from 'vue-router'
 	import myEvent from '@/utils/myEvent'
 	import { useI18n } from 'vue-i18n'
+	import { useUserInfoStore } from '@/stores/userInfo'
 	const { t, locale } = useI18n()
+	const userInfoStore = useUserInfoStore()
 	const router = useRouter()
 	const route = useRoute()
+	const userInfo = computed(() => userInfoStore.state.userInfo)
 	const activePath = computed(() => route.path)
 	const navList1 = ref([
 		{
@@ -137,7 +142,12 @@
 	}
 	const onLogout = () => {
 		hideProfilePopover()
-		console.log('logout')
+		ElMessageBox.confirm('Are you sure to log off?')
+			.then(() => {
+				userInfoStore.logout()
+				router.go(0)
+			})
+			.catch(() => {})
 	}
 	const onLanguageClick = () => {
 		locale.value = locale.value === 'ENGLISH' ? 'CHINESE_SIMPLIFIED' : 'ENGLISH'

src/views/shopping-drawer.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
 import myEvent from '@/utils/myEvent'
-import scList from '@/views/shoppingCart/sc-list.vue'
+// import scList from '@/views/shoppingCart/sc-list.vue'
+import { useRouter } from "vue-router";
+import img from '@/assets/images/brand-null.png'
 
 //const props = defineProps({
 //})
@@ -9,11 +11,17 @@ import scList from '@/views/shoppingCart/sc-list.vue'
 //])
 let data = reactive({
 })
+const router = useRouter()
 const isShoppingShow = ref(false)
 const shoppingClose = () => {
 	isShoppingShow.value = false
 }
 
+const goShopping = () => {
+	router.push({path: '/shoppingCart'})
+	isShoppingShow.value = false
+}
+
 onMounted(()=>{
 	myEvent.add('addShopping', (item) => {
 		isShoppingShow.value = true
@@ -27,14 +35,182 @@ defineExpose({})
 const {} = toRefs(data);
 </script>
 <template>
-	<el-drawer v-model="isShoppingShow" width="50rem" :close-on-click-modal="false" title="I am the title" :with-header="false">
-		<sc-list is-mini style="flex: 0.6;" @close="shoppingClose"/>
+	<el-drawer v-model="isShoppingShow" width="50rem" class="addShoppingDrawer"  :close-on-click-modal="false" title="I am the title" :with-header="false">
+		<div class="addShoppingInfo">
+			<div class="header">
+				<div class="title">Added to your Shopping Cart</div>
+				<span class="close" @click="shoppingClose"
+					><svg-icon name="close" size="13"
+				/></span>
+			</div>
+			<div class="content">
+				<div class="img-list">
+					<div class="img-box">
+						<img :src="img" alt="">
+					</div>
+					<div class="img-box">
+						<img :src="img" alt="">
+					</div>
+					<div class="img-box">
+						<img :src="img" alt="">
+					</div>
+				</div>
+				<div class="inf-box">
+					<div class="name">North Outfit Set</div>
+					<div class="shopping-name">
+						<div class="icon">
+							<SvgIcon name="shop" size="24" />
+						</div>
+						Roaming Clouds
+					</div>
+					<div class="price">$15 <span class="currency">HKD</span></div>
+				</div>
+				<div class="statement">
+					<div class="icon">
+						<SvgIcon name="statement" size="16.6" />
+					</div>
+					Digital Assets Only. No physical product included.
+				</div>
+			</div>
+			<div class="button" @click="goShopping">
+				SeE Shopping Cart
+			</div>
+		</div>
+		<!-- <sc-list is-mini style="flex: 0.6;" @close="shoppingClose"/> -->
 	</el-drawer>
 </template>
+<style lang="less">
+	.el-drawer.addShoppingDrawer{
+		--el-drawer-padding-primary: 2.4rem 3.4rem;
+	}
+</style>
 <style lang="less" scoped>
-	.homeNavBox{
+	
+	.addShoppingInfo{
 		width: 100%;
 		height: 100%;
 		position: relative;
+		display: flex;
+		flex-direction: column;
+		> .header{
+			border-bottom: 0.1rem solid #c4c4c4;
+			display: flex;
+			padding-bottom: 2.4rem;
+			align-items: center;
+			justify-content: space-between;
+			> .title{
+				font-family: KaiseiOpti-Bold;
+				font-size: 2rem;
+				line-height: 120%;
+				color: #121212;
+				font-weight: 400;
+			}
+			> .close{
+				cursor: pointer;
+			}
+		}
+		> .content{
+			flex: 1;
+			padding-top: 9.6rem;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			> .img-list{
+				height: 37.5rem;
+				width: 33.7rem;
+				position: relative;
+				> .img-box{
+					position: absolute;
+					overflow: hidden;
+					width: 26.9rem;
+					height: 34.1rem;
+					border: 1px solid #EFEFEF;
+					top: 1.7rem;
+					right: 0;
+					left: auto;
+					transform-origin: bottom;
+					box-shadow: 1rem .8rem 2.4rem 0px #4D4D4D0A;
+					> img{
+						width: 100%;
+						height: 100%;
+						object-fit: cover;
+					}
+					&:nth-child(1){
+						transform: rotate(-8deg);
+						background-color: #eaeaea;
+						right: 2rem;
+					}
+					&:nth-child(2){
+						transform: rotate(-4deg);
+						background-color: #eeeeee;
+						right: 1rem;
+					}
+					&:nth-child(3){
+						transform: rotate(0);
+						background-color: #fafafa;
+					}
+				}
+			}
+			> .inf-box{
+				margin-top: 5.18rem;
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				> .name{
+					font-family: KaiseiOpti-Bold;
+					font-weight: 700;
+					font-size: 2.4rem;
+					line-height: 140%;
+				}
+				> .shopping-name{
+					margin-top: 1.3rem;
+					font-weight: 500;
+					font-size: 1.6rem;
+					line-height: 140%;
+					display: flex;
+					align-items: center;
+					> .icon{
+						margin-right: 0.8rem;
+					}
+				}
+				> .price{
+					margin-top: 1.2rem;
+					font-family: KaiseiOpti-Bold;
+					font-weight: 700;
+					font-style: Bold;
+					font-size: 1.8rem;
+					line-height: 140%;
+					> .currency{
+						font-size: 1.2rem;
+						font-weight: 500;
+						line-height: 140%;
+					}
+				}
+			}
+			> .statement{
+				margin-top: 5rem;
+				font-family: KaiseiOpti-Regular;
+				color: #979797;
+				display: flex;
+				font-weight: 400;
+				font-size: 1.2rem;
+				line-height: 140%;
+				> .icon{
+					margin-right: 0.8rem;
+				}
+			}
+		}
+		> .button{
+			font-family: KaiseiOpti-Regular;
+			font-weight: 400;
+			font-size: 14px;
+			line-height: 4.6rem;
+			letter-spacing: 3%;
+			text-align: center;
+			width: 100%;
+			border: 1px solid #232323;
+			margin-bottom: calc(6rem - 2.4rem);
+			cursor: pointer;
+		}
 	}
 </style>

vite.config.ts

@@ -66,11 +66,10 @@ export default defineConfig(({ mode }) => {
 				overlay: true
 			},
 			proxy: {
-				'/api': {
-					//'/api'是自行设置的请求前缀
+				'/buyer': {
 					target: env.VITE_APP_URL,
 					changeOrigin: true, //用于控制请求头中的host值
-					rewrite: (path) => path.replace(/^\/api/, '/api') //路径重写，（正则）匹配以api开头的路径为空（将请求前缀删除）
+					rewrite: (path) => path.replace(/^\/buyer/, '/buyer') //路径重写，（正则）匹配以api开头的路径为空（将请求前缀删除）
 				}
 			}
 		}