296 lines
8.9 KiB
Vue
296 lines
8.9 KiB
Vue
|
<template>
|
|||
|
|
<view class="gg">
|
|||
|
|
<u-navbar :border-bottom="false" :is-back="false">
|
|||
|
|
<view class="u-flex u-m-l-20 u-m-r-20 gg-search-navbar">
|
|||
|
|
<view class="u-font-xl u-m-r-20">分类</view>
|
|||
|
|
<view class="gg-notice-search-bar">
|
|||
|
|
<u-icon class="gg-notice-search-bar-left-icon" name="search"></u-icon>
|
|||
|
|
<u-notice-bar
|
|||
|
|
:border-radius="30"
|
|||
|
|
:is-circular="false"
|
|||
|
|
:list="list"
|
|||
|
|
:more-icon="false"
|
|||
|
|
:volume-icon="false"
|
|||
|
|
class="gg-notice-search-bar-u-notice-bar"
|
|||
|
|
mode="vertical"
|
|||
|
|
type="none"
|
|||
|
|
></u-notice-bar>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</u-navbar>
|
|||
|
|
|
|||
|
|
<view class="gg-menu-wrap">
|
|||
|
|
<scroll-view :scroll-top="scrollTop" class="gg-tab-view menu-scroll-view" scroll-with-animation scroll-y>
|
|||
|
|
<view
|
|||
|
|
v-for="(item, index) in categories"
|
|||
|
|
:key="item.id"
|
|||
|
|
:class="[current === index ? 'gg-tab-item-active' : '']"
|
|||
|
|
:data-current="index"
|
|||
|
|
class="gg-tab-item"
|
|||
|
|
@tap.stop="swichCategory(item.id, index)"
|
|||
|
|
>
|
|||
|
|
<text class="u-line-1">{{ item.name }}</text>
|
|||
|
|
</view>
|
|||
|
|
</scroll-view>
|
|||
|
|
|
|||
|
|
<scroll-view class="gg-right-box" scroll-y @scrolltolower="loadMore">
|
|||
|
|
<view v-for="(item, index) in searchResult.content" :key="item.id" @click="gotoProductItem(item.id)">
|
|||
|
|
<view class="u-m-b-10 u-m-l-20 u-m-r-20 u-flex gg-product-item">
|
|||
|
|
<ListImgItem
|
|||
|
|
:showBottom="item.skuType === 0 && item.isNewPerson === 1"
|
|||
|
|
:showLeft="item.skuType === 1"
|
|||
|
|
:showRight="false"
|
|||
|
|
:src="item.imgUrl"
|
|||
|
|
height="200rpx"
|
|||
|
|
width="200rpx"
|
|||
|
|
>
|
|||
|
|
<template #left>秒杀商品</template>
|
|||
|
|
</ListImgItem>
|
|||
|
|
<view class="gg-product-item-msg u-border-bottom u-p-b-20 u-m-l-20">
|
|||
|
|
<view>
|
|||
|
|
<view class="u-font-lg">{{ item.title }}</view>
|
|||
|
|
<view class="u-type-info u-font-sm">已售{{ item.sale }}/剩余{{ item.stock }}</view>
|
|||
|
|
<block v-if="item.ruleList">
|
|||
|
|
<view v-for="(rule, ruleIndex) in item.ruleList" :key="ruleIndex" class="u-font-xs u-type-error-dark">
|
|||
|
|
{{ rule }}
|
|||
|
|
</view>
|
|||
|
|
</block>
|
|||
|
|
</view>
|
|||
|
|
<view class="u-flex u-row-between">
|
|||
|
|
<view class="u-type-error gg-product-item-msg-price-container">
|
|||
|
|
<text>￥</text>
|
|||
|
|
<text class="gg-product-item-msg-price-container-value">{{ item.price }}</text>
|
|||
|
|
</view>
|
|||
|
|
<AddToCart :shopDetail="item"></AddToCart>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<u-gap height="20"></u-gap>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 如果列表没有更多数据，则显示分隔线 -->
|
|||
|
|
<u-divider v-if="!(searchResult.first && searchResult.empty) && searchResult.last" :height="60"
|
|||
|
|
bg-color="transparent">我是有底线的
|
|||
|
|
</u-divider>
|
|||
|
|
<!-- 如果列表没有数据，则显示空内容 -->
|
|||
|
|
<u-empty :show="searchResult.first && searchResult.empty" mode="list"></u-empty>
|
|||
|
|
</scroll-view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import {mapState, mapActions} from 'vuex';
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
list: ['最见搜索关键字', '暂时未处理搜索页', '可以考虑最见关键字'],
|
|||
|
|
current: 0, // 预设当前项的值
|
|||
|
|
categoryId: 0, // 当前选中的分类Id
|
|||
|
|
scrollTop: 0, //tab标题的滚动条位置
|
|||
|
|
menuHeight: 0, // 左边菜单的高度
|
|||
|
|
menuItemHeight: 0, // 左边菜单item的高度
|
|||
|
|
filter: {
|
|||
|
|
page: 1, // 当前页码
|
|||
|
|
limit: 5, // 每页记录数
|
|||
|
|
keyword: '', // 关键字
|
|||
|
|
wareId: ''
|
|||
|
|
},
|
|||
|
|
searchResult: {
|
|||
|
|
content: [],
|
|||
|
|
last: false
|
|||
|
|
} // 搜索商品结果对象
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
...mapState('categoriesModule', ['categories'])
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
...mapActions('categoriesModule', ['getCategoriesAction']),
|
|||
|
|
...mapActions('cartModule', ['getCartListAction']),
|
|||
|
|
/*
|
|||
|
|
为什么不使用scroll-into-view而使用手动计算的方式，
|
|||
|
|
这是因为scroll-into-view不会进行居中菜单位置的定位处理，
|
|||
|
|
为了更好的用户操作体验，可以让当前选中菜单定位于整体滚动的居中位置
|
|||
|
|
*/
|
|||
|
|
// 点击左边的栏目切换
|
|||
|
|
async swichCategory(categoryId, index) {
|
|||
|
|
Object.assign(this.$data.searchResult, this.$options.data().searchResult); // 这里重置 searchResult 下的所有数据
|
|||
|
|
Object.assign(this.$data.filter, this.$options.data().filter); // 这里重置 filter 下的所有数据
|
|||
|
|
|
|||
|
|
this.categoryId = categoryId;
|
|||
|
|
if (index == this.current) return; // 防止选中分类的再次点击
|
|||
|
|
this.current = index;
|
|||
|
|
// 如果为0，意味着尚未初始化
|
|||
|
|
if (this.menuHeight == 0 || this.menuItemHeight == 0) {
|
|||
|
|
await this.getElRect('menu-scroll-view', 'menuHeight');
|
|||
|
|
await this.getElRect('gg-tab-item', 'menuItemHeight');
|
|||
|
|
}
|
|||
|
|
// 将菜单菜单活动item垂直居中
|
|||
|
|
this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
|
|||
|
|
|
|||
|
|
// 获取右侧商品搜索结果数据
|
|||
|
|
this.getCategoryProductList();
|
|||
|
|
},
|
|||
|
|
// 获取一个目标元素的高度
|
|||
|
|
getElRect(elClass, dataVal) {
|
|||
|
|
new Promise((resolve, reject) => {
|
|||
|
|
const query = uni.createSelectorQuery().in(this);
|
|||
|
|
query
|
|||
|
|
.select('.' + elClass)
|
|||
|
|
.fields({size: true}, res => {
|
|||
|
|
// 如果节点尚未生成，res值为null，循环调用执行
|
|||
|
|
if (!res) {
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.getElRect(elClass);
|
|||
|
|
}, 10);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
this[dataVal] = res.height;
|
|||
|
|
})
|
|||
|
|
.exec();
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
// 获取分类商品列表
|
|||
|
|
async getCategoryProductList() {
|
|||
|
|
const o = {
|
|||
|
|
categoryId: this.categoryId,
|
|||
|
|
page: this.filter.page,
|
|||
|
|
keyword: this.filter.keyword,
|
|||
|
|
limit: this.filter.limit,
|
|||
|
|
wareId: this.filter.wareId
|
|||
|
|
};
|
|||
|
|
let result = await this.$u.api.getSearchSku(o);
|
|||
|
|
this.searchResult = {...result, content: [...this.searchResult.content, ...result.content]};
|
|||
|
|
},
|
|||
|
|
// 加载更多数据
|
|||
|
|
loadMore() {
|
|||
|
|
if (!this.searchResult.last) {
|
|||
|
|
this.filter.page = this.filter.page + 1;
|
|||
|
|
this.getCategoryProductList();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 跳转到商品详情页
|
|||
|
|
gotoProductItem(skuId) {
|
|||
|
|
this.$u.route('/pages/homeItem/homeItem', {
|
|||
|
|
skuId
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
async mounted() {
|
|||
|
|
await this.getCategoriesAction(); // 从仓库中获取分类列表
|
|||
|
|
this.categoryId = this.categories[0].id; // 获取第一个分类的id
|
|||
|
|
await this.getCategoryProductList(); // 商品数据搜索请求
|
|||
|
|
// 需要获取购物车数据列表，将最新获取的数据渲染到页面
|
|||
|
|
this.getCartListAction();
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.gg {
|
|||
|
|
height: calc(100vh);
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
|
|||
|
|
&-search-navbar {
|
|||
|
|
margin-top: -20rpx;
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 滚动信息搜索框 */
|
|||
|
|
&-notice-search-bar {
|
|||
|
|
flex: 1;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
background-color: #ededed;
|
|||
|
|
border-radius: 30rpx;
|
|||
|
|
|
|||
|
|
/* 滚动信息搜索框左侧图标 */
|
|||
|
|
&-left-icon {
|
|||
|
|
position: relative;
|
|||
|
|
left: 20rpx;
|
|||
|
|
color: $u-light-color;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 滚动信息搜索框中的字体设置 */
|
|||
|
|
&-u-notice-bar {
|
|||
|
|
flex: 1;
|
|||
|
|
/* 深层穿透修改子组件字体颜色样式 */
|
|||
|
|
::v-deep .u-news-item {
|
|||
|
|
color: $u-light-color !important;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 菜单包装器 */
|
|||
|
|
&-menu-wrap {
|
|||
|
|
flex: 1;
|
|||
|
|
display: flex;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 左侧sv选项卡模式菜单 */
|
|||
|
|
&-tab-view {
|
|||
|
|
width: 200rpx;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 左侧菜单选项卡项 */
|
|||
|
|
&-tab-item {
|
|||
|
|
height: 110rpx;
|
|||
|
|
background: #f6f6f6;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
color: #444;
|
|||
|
|
font-weight: 400;
|
|||
|
|
line-height: 1;
|
|||
|
|
|
|||
|
|
/* 激活状态 */
|
|||
|
|
&-active {
|
|||
|
|
position: relative;
|
|||
|
|
color: $u-type-warning;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
font-weight: 600;
|
|||
|
|
background: #fff;
|
|||
|
|
/* 伪类处理 */
|
|||
|
|
&::before {
|
|||
|
|
content: '';
|
|||
|
|
position: absolute;
|
|||
|
|
border-left: 4px solid $u-type-warning;
|
|||
|
|
height: 32rpx;
|
|||
|
|
left: 0;
|
|||
|
|
top: 39rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 产品列表项 */
|
|||
|
|
&-product-item {
|
|||
|
|
height: 210rpx;
|
|||
|
|
|
|||
|
|
&-msg {
|
|||
|
|
height: 100%;
|
|||
|
|
flex: 1;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
|
|||
|
|
&-price-container {
|
|||
|
|
&-value {
|
|||
|
|
font-size: 40rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&-right-box {
|
|||
|
|
background-color: rgb(250, 250, 250);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|