mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git
synced 2026-11-13 12:28:54 +08:00
feat(buyer): 增强搜索功能并提升用户体验
- 新增 `getStoreById` 接口方法,用于获取包含评分在内的店铺信息 - `Search.vue` 新增搜索建议面板,展示搜索历史和热词,优化搜索体验 - 新增 `SearchSuggest.vue` 组件,用于展示搜索建议和搜索历史 - `App.vue` 根据路由元信息按条件设置页面标题 - 优化多个组件的布局与样式,让整体风格更统一 - 重构多个组件的跳转逻辑,改用路由跳转(`router.push`)替代新开窗口(`window.open`),提升用户体验
This commit is contained in:
@@ -1,5 +1,8 @@
|
||||
<template>
|
||||
<div class="goods-detail-extra">
|
||||
<div class="goods-detail-extra__main">
|
||||
<div class="detail-layout">
|
||||
<div class="detail-main">
|
||||
<div class="detail-anchor" ref="tabNav" :class="{ 'is-stuck': anchorStuck }">
|
||||
<button
|
||||
v-for="tab in detailTabs"
|
||||
@@ -117,15 +120,25 @@
|
||||
<div class="detail-empty" v-else>暂无商品参数</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
<StoreSide
|
||||
:store-id="skuDetail.storeId"
|
||||
:goods-id="skuDetail.goodsId"
|
||||
:sku-id="skuDetail.id"
|
||||
:store-name-fallback="skuDetail.storeName"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Refresh } from '@element-plus/icons-vue';
|
||||
import { goodsComment, goodsCommentNum } from '@/api/member.js';
|
||||
import StoreSide from './StoreSide.vue';
|
||||
|
||||
export default {
|
||||
components: { Refresh },
|
||||
components: { Refresh, StoreSide },
|
||||
name: 'ShowGoodsDetail',
|
||||
props: {
|
||||
detail: {
|
||||
@@ -277,8 +290,25 @@ export default {
|
||||
|
||||
<style scoped lang="scss">
|
||||
.goods-detail-extra {
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.goods-detail-extra__main {
|
||||
width: 1200px;
|
||||
margin: 16px auto 24px;
|
||||
margin: 0 auto;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
.detail-layout {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.detail-main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.detail-anchor {
|
||||
@@ -334,6 +364,7 @@ export default {
|
||||
.detail-panel {
|
||||
background: #fff;
|
||||
border-radius: 0 0 4px 4px;
|
||||
padding-bottom: 32px;
|
||||
}
|
||||
|
||||
.detail-section + .detail-section {
|
||||
@@ -381,7 +412,7 @@ export default {
|
||||
.item-param-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
margin: 16px 24px 24px;
|
||||
margin: 16px 24px 0;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
border-left: 1px solid #f0f0f0;
|
||||
border-radius: 4px;
|
||||
|
||||
Reference in New Issue
Block a user