|
|
@@ -1,40 +1,27 @@
|
|
|
<template>
|
|
|
<div v-loading="loading" class="dec">
|
|
|
- <div class="dec-header" style="">
|
|
|
+ <!-- header -->
|
|
|
+ <div class="dec-header flexJcsbAc" style="">
|
|
|
<div class="classification">
|
|
|
- <el-tabs v-if="changeTabs" id="el-tabs" ref="elTabs" v-model="activeName" @tab-click="handleClick">
|
|
|
- <el-tab-pane
|
|
|
+ <div class="decTabs flexJcfsAc">
|
|
|
+ <div
|
|
|
v-for="(item, index) in tabList"
|
|
|
- :key="index"
|
|
|
+ :key="item.title"
|
|
|
:label="item.title"
|
|
|
:name="item.name"
|
|
|
- class="tab"
|
|
|
+ class="tabItem"
|
|
|
:class="{ active: activeName == item.name }"
|
|
|
- @click="handleClick(item)"
|
|
|
+ @click="chooseNav(item, index)"
|
|
|
>
|
|
|
- {{ item.title }}
|
|
|
- </el-tab-pane>
|
|
|
- </el-tabs>
|
|
|
- <div class="decTabs flexJcfsAc">
|
|
|
- <div
|
|
|
- v-for="(item, index) in tabList"
|
|
|
- :key="index"
|
|
|
- :label="item.title"
|
|
|
- :name="item.name"
|
|
|
- class="tab"
|
|
|
- :class="{ active: activeName == item.name }"
|
|
|
- @click="handleClick(item)"
|
|
|
- >
|
|
|
- <span>{{ item.title }}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="openAllClassification flexfc" @click="drawer = true">
|
|
|
- <span class="">全部</span>
|
|
|
- <i class="el-icon-more-outline"></i>
|
|
|
+ <span>{{ item.title }}</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <!-- 全部分类 -->
|
|
|
</div>
|
|
|
+ <div class="openAllClassification flexfc" @click="drawer = true">
|
|
|
+ <span class="">全部</span>
|
|
|
+ <i class="el-icon-more-outline"></i>
|
|
|
+ </div>
|
|
|
+ <!-- 全部分类 -->
|
|
|
<el-drawer
|
|
|
title="全部分类"
|
|
|
:visible.sync="drawer"
|
|
|
@@ -53,15 +40,18 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-drawer>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- new ens -->
|
|
|
+ </div>
|
|
|
+ <!-- goodList -->
|
|
|
+ <keep-alive>
|
|
|
+ <!-- <component :key="activeIndex" :is="titleInfo"></component> -->
|
|
|
+ </keep-alive>
|
|
|
+ <goodList type="" :titleInfo="titleInfo" :goodList="tableData"></goodList>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
// new
|
|
|
-import ScrollTab from "@/components/decTabs";
|
|
|
+import goodList from "@/components/decTabs/decGoodList.vue";
|
|
|
// end
|
|
|
import { deleteApproachOrder } from "@/api/shop";
|
|
|
import {
|
|
|
@@ -81,7 +71,7 @@ import paystack from "vue-paystack";
|
|
|
|
|
|
export default {
|
|
|
name: "WelcomePack",
|
|
|
- components: { Pagination, paystack, ScrollTab },
|
|
|
+ components: { Pagination, paystack, goodList },
|
|
|
directives: { waves },
|
|
|
filters: {
|
|
|
bvFilter(row) {
|
|
|
@@ -105,6 +95,8 @@ export default {
|
|
|
return {
|
|
|
// new start
|
|
|
activeName: "1",
|
|
|
+ activeIndex: 0,
|
|
|
+ titleInfo:null,
|
|
|
tabList: [
|
|
|
{
|
|
|
title: "Tab1",
|
|
|
@@ -146,7 +138,7 @@ export default {
|
|
|
drawer: false,
|
|
|
direction: "ttb",
|
|
|
drawerWidth: "50%",
|
|
|
- changeTabs:true,
|
|
|
+ changeTabs: true,
|
|
|
// new end
|
|
|
loading: false,
|
|
|
tool: tool,
|
|
|
@@ -305,9 +297,7 @@ export default {
|
|
|
// 监听被选中的类目标签，使被选中的标签始终在屏幕中间显示
|
|
|
activeName: {
|
|
|
handler: function (newValue, old) {
|
|
|
-
|
|
|
- console.log("newValue--" + newValue + '---' + this.changeTabs)
|
|
|
-
|
|
|
+ console.log("newValue--" + newValue + "---" + this.changeTabs);
|
|
|
},
|
|
|
},
|
|
|
isDec: {
|
|
|
@@ -325,34 +315,28 @@ export default {
|
|
|
},
|
|
|
methods: {
|
|
|
//new start
|
|
|
- handleClick(item) {
|
|
|
+ handleClick(item, index) {
|
|
|
console.log(item);
|
|
|
this.activeName = item.name;
|
|
|
-
|
|
|
},
|
|
|
- drawerClassification(item, index) {
|
|
|
- let x = index * 75
|
|
|
- // this.handleClick(this.$refs.elTabs.$children[index]);
|
|
|
- // console.log('获取组件内的DOM',this.$refs.elTabs.$children[index]);
|
|
|
- this.changeTabs = false;
|
|
|
+ chooseNav(item, index) {
|
|
|
+ this.titleInfo = item;
|
|
|
this.activeName = item.name;
|
|
|
- console.log("this.activeName--" + this.activeName + '---' + this.changeTabs)
|
|
|
-
|
|
|
- setTimeout(() => {
|
|
|
- this.changeTabs = true;
|
|
|
- this.drawer = false;
|
|
|
- }, 500);
|
|
|
- // let sectionsWrapper = document.getElementsByClassName("el-tabs__nav is-top");
|
|
|
- // console.log(sectionsWrapper)
|
|
|
- // // sectionsWrapper[0].style.transform ="translateX(" + x + "px)";
|
|
|
- // // // sectionsWrapper[0].style[0] ="transform: translateX(" + x + "px)";
|
|
|
- // // sectionsWrapper[0].style.webkitTransform ="translateX(" + x + "px)";
|
|
|
-
|
|
|
- // // sectionsWrapper[0].style.cssText ="transform: translateX(" + x + "px)";
|
|
|
- // sectionsWrapper[0].style.color = 'red'
|
|
|
- // this.$forceUpdate();
|
|
|
- // console.log(sectionsWrapper[0].style)
|
|
|
- // console.log(sectionsWrapper[0].style.0)
|
|
|
+ this.activeIndex = index;
|
|
|
+ this.$nextTick(() => {
|
|
|
+ const item = this.$el.querySelectorAll(".tabItem")[index];
|
|
|
+ const container = document.querySelector(".decTabs");
|
|
|
+ const scrollLeft =
|
|
|
+ item.offsetLeft - (container.offsetWidth - item.offsetWidth) / 2;
|
|
|
+ container.scrollTo({
|
|
|
+ left: scrollLeft,
|
|
|
+ behavior: "smooth",
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ drawerClassification(item, index) {
|
|
|
+ this.chooseNav(item, index);
|
|
|
+ this.drawer = false;
|
|
|
},
|
|
|
onConfirm(val) {
|
|
|
console.log(val);
|
|
|
@@ -762,119 +746,62 @@ export default {
|
|
|
flex-wrap: wrap;
|
|
|
}
|
|
|
.active {
|
|
|
- color: #1890ff!important;
|
|
|
+ color: #1890ff !important;
|
|
|
// border-bottom: 2px solid #1890ff;
|
|
|
-
|
|
|
+}
|
|
|
+::-webkit-scrollbar {
|
|
|
+ /*隐藏滚轮*/
|
|
|
+ display: none;
|
|
|
}
|
|
|
.dec {
|
|
|
width: 100%;
|
|
|
- height: calc(100vh - 100px);
|
|
|
}
|
|
|
.dec-header {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- // position: relative;
|
|
|
-.decTabs{
|
|
|
width: 100%;
|
|
|
height: 60px;
|
|
|
- overflow-x: auto;
|
|
|
- .tab{
|
|
|
- height: 20px;
|
|
|
- padding: 0 20px 0 20px;
|
|
|
- box-sizing: border-box;
|
|
|
- // line-height: 40px;
|
|
|
- display: inline-block;
|
|
|
- list-style: none;
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 500;
|
|
|
- color: #303133;
|
|
|
- // position: relative;
|
|
|
- }
|
|
|
- .tab:hover {
|
|
|
- color: #1890ff;
|
|
|
- cursor: pointer;
|
|
|
-}
|
|
|
-}
|
|
|
+ box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|
|
.classification {
|
|
|
width: 90%;
|
|
|
overflow: hidden;
|
|
|
- /* 可以使窗口平稳滚动 */
|
|
|
- // scroll-behavior: smooth;
|
|
|
- .openAllClassification {
|
|
|
- // width: 30px;
|
|
|
- height: 60px;
|
|
|
- // box-shadow: 0px 0px 20px rgba(0,0,0,.1);
|
|
|
- cursor: pointer;
|
|
|
- // align-self: baseline;
|
|
|
- // position: absolute;
|
|
|
- position: fixed;
|
|
|
- top: 60px;
|
|
|
- right: 5%;
|
|
|
- z-index: 100;
|
|
|
- // transform: translate(-50%, -50%);
|
|
|
- span {
|
|
|
- writing-mode: vertical-lr;
|
|
|
+ // position: relative;
|
|
|
+ .decTabs {
|
|
|
+ width: 100%;
|
|
|
+ overflow-x: auto;
|
|
|
+ -webkit-overflow-scrolling: touch; /* ios5+ */
|
|
|
+ scroll-behavior: smooth; /* 可以使窗口平稳滚动 */
|
|
|
+
|
|
|
+ .tabItem {
|
|
|
+ padding: 0 20px 0 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ // line-height: 40px;
|
|
|
+ display: inline-block;
|
|
|
+ list-style: none;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #303133;
|
|
|
+ }
|
|
|
+ .tabItem:hover {
|
|
|
+ color: #1890ff;
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
-
|
|
|
- ::v-deep {
|
|
|
- // tab
|
|
|
- .el-tabs__header {
|
|
|
- margin: 0;
|
|
|
- height: 60px;
|
|
|
- // box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- width: 100%;
|
|
|
- // overflow: hidden;
|
|
|
- }
|
|
|
- .el-tabs__nav{
|
|
|
-
|
|
|
- }
|
|
|
- .el-tabs__nav-scroll {
|
|
|
- width: 100%;
|
|
|
- // overflow-x: scroll;
|
|
|
- // overflow-y: hidden;
|
|
|
- overflow: auto; /* winphone8和android4+ */
|
|
|
- -webkit-overflow-scrolling: touch; /* ios5+ */
|
|
|
+ .openAllClassification {
|
|
|
+ width: 10%;
|
|
|
+ height: 60px;
|
|
|
+ // box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.1);
|
|
|
+ box-shadow: -10px 0px 30px rgba(0, 0, 0, 0.1);
|
|
|
+ cursor: pointer;
|
|
|
+ span {
|
|
|
+ writing-mode: vertical-lr;
|
|
|
}
|
|
|
+ }
|
|
|
+ ::v-deep {
|
|
|
::-webkit-scrollbar {
|
|
|
/*隐藏滚轮*/
|
|
|
display: none;
|
|
|
}
|
|
|
- .el-tabs__nav-wrap{
|
|
|
- overflow-x:hidden;
|
|
|
- }
|
|
|
|
|
|
- .el-tabs__nav-wrap::after {
|
|
|
- content: "";
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- bottom: 0;
|
|
|
- width: 0;
|
|
|
- height: 0px;
|
|
|
- background-color: transparent;
|
|
|
- z-index: 0;
|
|
|
- }
|
|
|
- .el-tabs__nav-next {
|
|
|
- display: none;
|
|
|
- }
|
|
|
- .el-tabs__nav-prev {
|
|
|
- display: none;
|
|
|
- }
|
|
|
- // .el-tabs__nav-wrap.is-scrollable {
|
|
|
- // padding: 0 0px 0 0px;
|
|
|
- // -webkit-box-sizing: border-box;
|
|
|
- // box-sizing: border-box;
|
|
|
- // }
|
|
|
-
|
|
|
- // //drawer__wrapper
|
|
|
- .classification {
|
|
|
- position: relative;
|
|
|
- }
|
|
|
.el-drawer__wrapper {
|
|
|
position: absolute;
|
|
|
// position: fixed;
|
|
|
@@ -885,14 +812,14 @@ export default {
|
|
|
overflow: hidden;
|
|
|
margin: 0;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
.el-drawer__wrapper {
|
|
|
// min-height: 60%;
|
|
|
.el-drawer__body {
|
|
|
// height: 400px;
|
|
|
}
|
|
|
.el-drawer__container ::-webkit-scrollbar {
|
|
|
- // display: none;
|
|
|
+ display: none;
|
|
|
}
|
|
|
.allClassification {
|
|
|
// justify-content: center;
|
tyler