You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
514 lines
13 KiB
514 lines
13 KiB
<template>
|
|
<view class="u-wrap">
|
|
<!-- <view class="u-search-box">
|
|
<view class="u-search-inner">
|
|
<u-icon name="search" color="#909399" :size="28"></u-icon>
|
|
<text class="u-search-text">搜索uView</text>
|
|
</view>
|
|
</view> -->
|
|
<view class="sort-search">
|
|
<!-- <u-search
|
|
v-model="keyword"
|
|
bg-color="#fff"
|
|
height="80"
|
|
placeholder="请输入要搜索的商品"
|
|
:action-style="{color: '#fff'}"
|
|
/> -->
|
|
<u-search disabled placeholder="请输入要搜索的商品" height="70" :show-action="false" @click="handleSearch" />
|
|
</view>
|
|
<view class="u-menu-wrap">
|
|
<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop">
|
|
<view v-for="(item,index) in leftList" :key="index"
|
|
class="u-tab-item"
|
|
:class="[current==index ? 'u-tab-item-active' : '']"
|
|
:data-current="index" @tap.stop="swichMenu(index,item.id)"
|
|
>
|
|
<!-- u-line-1 单行打点无法知道整行的内容 -->
|
|
<text class=".p-l-27">{{item.name}}</text>
|
|
</view>
|
|
</scroll-view>
|
|
|
|
<view class="position-relative flex-1 right_box_width">
|
|
<view class="right-tabs flex align-center flex-1" v-if="rightTopList.length > 0 && !openShow">
|
|
<scroll-view scroll-with-animation scroll-x class="right-tabs-scroll tab-scroll-view" :scroll-left="scrollLeft">
|
|
<view class="flex align-center">
|
|
<com-view
|
|
v-for="(item, index) in rightTopList"
|
|
:key="index"
|
|
class="right-tabs-item flex align-center justify-center"
|
|
:class="[{'right-tabs-item-active': currentTab === index}, `tabs-item-${index}`]"
|
|
@click="handleRightTab(item, index)"
|
|
|
|
>
|
|
<!-- v-show="index < 2" 只展示两个就好 其他的去点击展开 -->
|
|
{{item.name}}
|
|
</com-view>
|
|
</view>
|
|
</scroll-view>
|
|
<u-icon name="arrow-right"></u-icon>
|
|
<!-- <view class="open flex align-center justify-center" @click="open">
|
|
<text class="font-28 text-black m-r-10">展开</text>
|
|
<u-icon name="arrow-down" size="28"></u-icon>
|
|
</view> -->
|
|
</view>
|
|
<scroll-view
|
|
scroll-y
|
|
@scrolltolower="goodsToLower()"
|
|
class="right-box flex flex-column"
|
|
>
|
|
<!-- v-if="current==index"
|
|
v-for="(item,index) in tabbar" :key="index" -->
|
|
<view class="page-view" v-if="rightListGoods.length">
|
|
<view class="class-item">
|
|
<view class="item-container">
|
|
<view class="thumb-box" v-for="(item1, index1) in rightListGoods" :key="index1">
|
|
<!-- <goods-item></goods-item> -->
|
|
<goods-item :goods="item1" thereTo='sort'></goods-item>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="h-100 flex align-center justify-center" v-else-if="!loading">
|
|
<u-empty text="暂无商品 " mode="list"></u-empty>
|
|
</view>
|
|
</scroll-view>
|
|
|
|
|
|
<view class="position-absolute left-0 top-0 h-100 zIndex-1" v-show="openShow" style="width: 550rpx;">
|
|
<view class="open-popup" @click="openShow = false"></view>
|
|
<view class="open-box" :style="[openStyle]">
|
|
<view class="flex align-center flex-wrap">
|
|
<com-view
|
|
v-for="(item, index) in rightTopList"
|
|
:key="index"
|
|
class="right-tabs-item flex align-center justify-center m-t-20"
|
|
:class="[{'right-tabs-item-active': currentTab === index}, `tabs-item-${index}`]"
|
|
@click="handleRightTab(item, index)"
|
|
>
|
|
{{item.name}}
|
|
</com-view>
|
|
</view>
|
|
<view class="flex align-center justify-end m-t-4" @click="openShow = false">
|
|
<text class="font-28 text-black">收起</text>
|
|
<u-icon name="arrow-up" size="28"></u-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
scrollTop: 0, //tab标题的滚动条位置
|
|
current: 0, // 预设当前项的值
|
|
menuHeight: 0, // 左边菜单的高度
|
|
menuItemHeight: 0, // 左边菜单item的高度
|
|
keyword: '',
|
|
currentTab: 0,
|
|
scrollLeft: 0,
|
|
tabWidth: 0, // 左边菜单的高度
|
|
tabItemWidth: 0, // 左边菜单item的高度
|
|
tabItemLeft: 0,
|
|
openShow: false,
|
|
openStyle: {},
|
|
leftList: [],
|
|
rightTopList: [], // 右上展示的值
|
|
rightListGoods: [], // 右边展示商品
|
|
classId: '',
|
|
hasChild: null, //是否还有下级 -> 有没有右上角标签
|
|
pageNo: 1,
|
|
pageSize: 10,
|
|
total: null,
|
|
isLock: true,
|
|
loading: true
|
|
}
|
|
},
|
|
watch: {
|
|
openShow () {
|
|
this.$nextTick(() => {
|
|
this.openStyle = this.openShow ? {transform: 'translateY(0)'} : {transform: 'translateY(-100%)'}
|
|
})
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.loading = true
|
|
this.getGoodsClassList();
|
|
this.getRightListGoods();
|
|
},
|
|
onPullDownRefresh() {
|
|
this.leftList = []
|
|
this.rightTopList = [] // 右上展示的值
|
|
this.rightListGoods = []
|
|
this.pageNo = 1
|
|
this.pageSize = 10
|
|
this.total = null,
|
|
this.getGoodsClassList();
|
|
this.getRightListGoods();
|
|
this.loading = true
|
|
},
|
|
methods: {
|
|
open () {
|
|
this.openShow = true
|
|
},
|
|
async handleRightTab (item, index) {
|
|
if(index == this.currentTab) return ;
|
|
this.currentTab = index
|
|
// 点击调用商品 hasChild = 0
|
|
//
|
|
this.hasChild = 0;
|
|
this.classId = item.id
|
|
this.rightListGoods = []
|
|
this.loading = true
|
|
this.getRightListGoods();
|
|
// this.tabScrollView = `tabs-item-${index}`
|
|
// // 如果为0，意味着尚未初始化
|
|
if(this.tabWidth == 0 || this.tabItemWidth == 0) {
|
|
await this.getElRect('tab-scroll-view', 'tabWidth', 'width');
|
|
}
|
|
await this.getElRect(`tabs-item-${index}`, 'tabItemWidth', 'width')
|
|
await this.getscrollLeft(`tabs-item-${index}`, 'tabItemLeft')
|
|
this.scrollLeft = this.tabItemLeft - this.tabWidth / 2 - this.tabItemWidth / 2;
|
|
// this.scrollLeft = index * this.tabItemWidth - this.tabWidth / 2 - this.tabItemWidth / 2;
|
|
|
|
},
|
|
getImg() {
|
|
return Math.floor(Math.random() * 35);
|
|
},
|
|
// 点击左边的栏目切换
|
|
async swichMenu(index,id) {
|
|
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('u-tab-item', 'menuItemHeight');
|
|
}
|
|
// 将菜单菜单活动item垂直居中
|
|
this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
|
|
this.classId = id;
|
|
// 切换菜单重置 商品信息
|
|
this.pageNo = 1;
|
|
this.total = null;
|
|
this.rightTopList = [];
|
|
this.rightListGoods = [];
|
|
this.loading = true
|
|
this.getGoodsClassList();
|
|
this.getRightListGoods();
|
|
},
|
|
// 获取一个目标元素的高度
|
|
getElRect(elClass, dataVal, attribute = 'height') {
|
|
return new Promise((resolve, reject) => {
|
|
const query = uni.createSelectorQuery().in(this);
|
|
query.select('.' + elClass).fields({size: true}, res => {
|
|
console.log(elClass, res)
|
|
// 如果节点尚未生成，res值为null，循环调用执行
|
|
if(!res) {
|
|
setTimeout(() => {
|
|
this.getElRect(elClass);
|
|
}, 10);
|
|
return ;
|
|
}
|
|
// this[dataVal] = !other ? res[attribute] : res[other]
|
|
this[dataVal] = res[attribute]
|
|
resolve()
|
|
}).exec();
|
|
})
|
|
},
|
|
handleSearch () {
|
|
this.$tools.navigateTo({
|
|
url: '/pagesC/search/search'
|
|
})
|
|
},
|
|
getscrollLeft(elClass, dataVal) {
|
|
return new Promise((resolve, reject) => {
|
|
const query = uni.createSelectorQuery().in(this);
|
|
query.select('.' + elClass).fields({size: true, scrollOffset: true}, res => {
|
|
console.log(res)
|
|
if(!res) {
|
|
setTimeout(() => {
|
|
this.getscrollLeft(elClass);
|
|
}, 10);
|
|
return ;
|
|
}
|
|
this[dataVal] = res.scrollLeft
|
|
resolve()
|
|
}).exec();
|
|
})
|
|
},
|
|
getGoodsClassList() {
|
|
let params = {}
|
|
if(this.leftList.length == 0) {
|
|
}else{
|
|
params = {
|
|
classId: this.classId
|
|
}
|
|
}
|
|
if (this.current == 0) {
|
|
params = {
|
|
classId: '',
|
|
hasChild: ''
|
|
}
|
|
}
|
|
|
|
this.$api('getGoodsClassList',params).then(res => {
|
|
let { code, result, message } = res;
|
|
if(code == 200) {
|
|
console.log(result);
|
|
if(this.classId == ''){
|
|
this.classId = result[0].id;
|
|
this.hasChild = result[0].hasChild;
|
|
this.leftList = [{name: '全部',id: ''},...result]
|
|
// this.getGoodsClassList(); // 获取
|
|
}else{
|
|
this.rightTopList = result; // 得到的是右上的值
|
|
}
|
|
}else {
|
|
this.$Toast(message);
|
|
}
|
|
}).catch(err => {
|
|
this.$Toast(err.message)
|
|
})
|
|
},
|
|
goodsToLower() {
|
|
if(this.isLock) {
|
|
if(this.total !== null && this.pageNo * this.pageSize >= this.total){
|
|
this.isLock = false;
|
|
this.$Toast('没有更多数据了哦！');
|
|
setTimeout(()=>{
|
|
this.isLock = true;
|
|
},3000)
|
|
return
|
|
}
|
|
this.pageNo+=1;
|
|
this.getRightListGoods();
|
|
}
|
|
},
|
|
getRightListGoods() {
|
|
const params = {
|
|
pageNo: this.pageNo,
|
|
pageSize: this.pageSize,
|
|
}
|
|
if(this.current == 0) {
|
|
|
|
}else{
|
|
params.classId = this.classId
|
|
params.hasChild = this.hasChild
|
|
}
|
|
uni.showLoading();
|
|
this.$api('getGoodsList',params).then(res => {
|
|
let { code, result, message} = res;
|
|
uni.hideLoading();
|
|
console.log(result)
|
|
this.loading = false
|
|
if(code == 200){
|
|
if(this.total == null) {
|
|
this.total = result.total;
|
|
}
|
|
result.records.forEach(item => {
|
|
// const picArray= item.pic.split(',')
|
|
// item.pic= picArray[0]
|
|
if(item.pic!==null){
|
|
const picArray=item.pic.split(',')
|
|
item.pic= picArray[0]
|
|
}else{
|
|
item.pic= []
|
|
}
|
|
})
|
|
this.rightListGoods = this.rightListGoods.concat(result.records);
|
|
}else{
|
|
this.$Toast(message);
|
|
}
|
|
this.isLock = true;
|
|
}).catch( err => {
|
|
this.loading = false
|
|
this.isLock = true;
|
|
uni.hideLoading();
|
|
this.$Toast(err.message);
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
// 穿透图片 设置大小
|
|
// /deep/.goods-items-image{
|
|
// width: 522rpx !important;
|
|
// }
|
|
|
|
.u-wrap {
|
|
height: calc(100vh);
|
|
/* #ifdef H5 */
|
|
height: calc(100vh - var(--window-top));
|
|
/* #endif */
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.sort-search {
|
|
padding: 0 20rpx 20rpx;
|
|
background: $u-type-primary;
|
|
}
|
|
.u-search-box {
|
|
padding: 18rpx 30rpx;
|
|
}
|
|
|
|
.u-menu-wrap {
|
|
flex: 1;
|
|
display: flex;
|
|
overflow: hidden;
|
|
}
|
|
.right_box_width{
|
|
// width: 550rpx;
|
|
}
|
|
|
|
.u-search-inner {
|
|
background-color: rgb(234, 234, 234);
|
|
border-radius: 100rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 10rpx 16rpx;
|
|
}
|
|
|
|
.u-search-text {
|
|
font-size: 26rpx;
|
|
color: $u-tips-color;
|
|
margin-left: 10rpx;
|
|
}
|
|
|
|
.u-tab-view {
|
|
width: 200rpx;
|
|
height: 100%;
|
|
}
|
|
|
|
.u-tab-item {
|
|
width: 200rpx;
|
|
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;
|
|
}
|
|
|
|
.u-tab-item-active {
|
|
position: relative;
|
|
color: #000;
|
|
font-size: 30rpx;
|
|
font-weight: 600;
|
|
background: #fff;
|
|
}
|
|
|
|
.u-tab-item-active::before {
|
|
content: "";
|
|
position: absolute;
|
|
border-left: 4px solid $u-type-primary;
|
|
height: 32rpx;
|
|
left: 0;
|
|
top: 39rpx;
|
|
}
|
|
|
|
.u-tab-view {
|
|
height: 100%;
|
|
}
|
|
|
|
.open {
|
|
width: 140rpx;
|
|
height: 80rpx;
|
|
}
|
|
|
|
.right-tabs-scroll {
|
|
width: calc(100vw - 240rpx);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.right-tabs {
|
|
height: 80rpx;
|
|
&-item {
|
|
height: 50rpx;
|
|
padding: 0 20rpx;
|
|
background: #eeeeee;
|
|
border-radius: 18px;
|
|
margin-left: 30rpx;
|
|
font-size: 24rpx;
|
|
font-family: Microsoft YaHei, Microsoft YaHei-Regular;
|
|
color: #000000;
|
|
&-active {
|
|
background: #baebfc;
|
|
color: $u-type-primary;
|
|
}
|
|
}
|
|
}
|
|
|
|
.right-box {
|
|
height: calc(100vh - 180rpx);
|
|
background-color: rgb(250, 250, 250);
|
|
}
|
|
|
|
.page-view {
|
|
padding: 16rpx;
|
|
}
|
|
|
|
.class-item {
|
|
margin-bottom: 30rpx;
|
|
background-color: #fff;
|
|
padding: 16rpx;
|
|
border-radius: 8rpx;
|
|
}
|
|
|
|
.item-title {
|
|
font-size: 26rpx;
|
|
color: $u-main-color;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.item-menu-name {
|
|
font-weight: normal;
|
|
font-size: 24rpx;
|
|
color: $u-main-color;
|
|
}
|
|
|
|
.item-container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.thumb-box {
|
|
margin-top: 20rpx;
|
|
width: 100%;
|
|
}
|
|
|
|
.item-menu-image {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
}
|
|
|
|
.open {
|
|
width: 100%;
|
|
&-popup{
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, .6);
|
|
z-index: 0;
|
|
}
|
|
&-box {
|
|
position: relative;
|
|
background-color: #fff;
|
|
padding: 0 20rpx 10rpx 0;
|
|
z-index: 1;
|
|
transition: all .4s linear;
|
|
transform: translateY(-100%);
|
|
}
|
|
}
|
|
</style>
|