373 lines
12 KiB
Vue
373 lines
12 KiB
Vue
<template>
|
|
<view style="background: #FFF;border-radius: 32rpx 32rpx 0 0;margin-top: 25rpx;">
|
|
<view class="selects-page" style="">
|
|
<view style="position: relative;" @click="brandClick()" :class="brandFlag?'selectedTxt':''">品牌
|
|
<view class="" style="position: absolute;top:-20rpx;right: -8rpx;" v-if="brandFlag && selectedFirstColumnIndex ">
|
|
<image src="@/static/bg/yuandian.png" style="width: 12rpx;height: 12rpx;" mode=""></image>
|
|
</view>
|
|
</view>
|
|
<view @click="beerClick()" style="margin-left: 100rpx; position: relative;" :class="beerFlag?'selectedTxt':''">啤酒风格
|
|
<view class="" style="position: absolute;top:-20rpx;right: -8rpx;" v-if="beerFlag && selectedThreeColumnIndexes.length>0 ">
|
|
<image src="@/static/bg/yuandian.png" style="width: 12rpx;height: 12rpx;" mode=""></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class='productNav' v-if="brandFlag">
|
|
<!-- 左侧导航 -->
|
|
<view class='left' >
|
|
<view style="position: relative;" :class="posi == item.id ? 'selected' : 'normal'" @tap="switchNav(item)" v-for="(item, index) in dataList" :key="index">
|
|
{{ item.name }}
|
|
<view class="" style="position: absolute;top:-20rpx;right: 8rpx;" v-if="(posi == item.id ) && selectedFirstColumnIndex ">
|
|
<image src="@/static/bg/yuandian.png" style="width: 12rpx;height: 12rpx;" mode=""></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 右侧内容 -->
|
|
<view class='right'>
|
|
<view class="content">
|
|
<view class="divider"></view>
|
|
<!-- 第一列 -->
|
|
<scroll-view
|
|
scroll-y="true"
|
|
class="scroll-1"
|
|
@scroll="scrollLeft"
|
|
|
|
:scroll-top="scrollTopLeft"
|
|
>
|
|
<!-- 添加“全部”按钮 -->
|
|
<view
|
|
class="wh-1"
|
|
style="margin:0 auto 26rpx auto;"
|
|
@tap="selectFirstColumnAll"
|
|
>
|
|
<view class="right-one" :class="isFirstColumnAllSelected ? 'selecteds' : ''">全部</view>
|
|
</view>
|
|
<view
|
|
:id="item.id"
|
|
v-for="(item, index) in selectedData"
|
|
:key="index"
|
|
@tap="selectFirstColumn(item)"
|
|
class="wh-1" style="margin:0 auto 26rpx auto;"
|
|
>
|
|
<view class="right-one" :class="selectedFirstColumnIndex === item.id ? 'selecteds' : ''">{{ item.name }}</view>
|
|
</view>
|
|
</scroll-view>
|
|
|
|
<!-- 分割线 -->
|
|
<view class="divider"></view>
|
|
|
|
<!-- 第二列 -->
|
|
<scroll-view
|
|
scroll-y="true"
|
|
class="scroll"
|
|
@scroll="scrollRight"
|
|
:scroll-into-view="posi"
|
|
:scroll-top="scrollTopRight"
|
|
>
|
|
<!-- 添加“全部”按钮 -->
|
|
<view
|
|
class=""
|
|
style="margin: 0 24rpx 24rpx 24rpx;"
|
|
@tap="selectSecondColumnAll"
|
|
>
|
|
<view class="right-one" style="padding: 20rpx 0;" :class="isSecondColumnAllSelected ? 'selecteds' : ''">全部</view>
|
|
</view>
|
|
<view
|
|
:id="item.id"
|
|
v-for="(item, index) in selectedSecondColumnData"
|
|
:key="item.ids"
|
|
@tap="toggleSecondColumnSelection(item)"
|
|
class=""
|
|
>
|
|
<view class="right-one"
|
|
:class="selectedSecondColumnIndexes.includes(item.ids) ? 'selecteds' : ''"
|
|
style="padding:20rpx 0;margin: 0 24rpx 24rpx 24rpx;">{{ item.name }}</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="" v-if="beerFlag" style="padding: 0 44rpx 0 54rpx;">
|
|
<!-- 第一列 -->
|
|
<scroll-view
|
|
scroll-y="true"
|
|
class="scroll"
|
|
@scroll="scrollLeft"
|
|
:scroll-into-view="posi"
|
|
>
|
|
<!-- 添加“全部”按钮 -->
|
|
<view
|
|
style="margin:0 auto 26rpx auto;"
|
|
@tap="selectBeerAll"
|
|
>
|
|
<view class="right-one" style="padding:20rpx 0;" :class="selectBeerSelected ? 'selecteds' : ''">全部</view>
|
|
</view>
|
|
<view
|
|
:id="item.id"
|
|
v-for="(item, index) in beerList"
|
|
:key="index"
|
|
@tap="toggleThreeColumnSelection(item)"
|
|
class=""
|
|
>
|
|
<view class="right-one" style="padding:20rpx 0;margin: 0 0 24rpx 0;" :class="selectedThreeColumnIndexes.includes(item.id) ? 'selecteds' : ''">{{ item.name }}</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
<view class="flex align-center" style="width:100%;margin:0 22rpx; font-size: 28rpx;padding-bottom: 20rpx;">
|
|
<view class="btns btn1" style="">重置</view>
|
|
<view class="btns btn2" style="color:#FFF;">确认</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
posi: '1', // 当前选中的左侧导航项
|
|
scrollTopLeft: 0, // 左侧滚动位置
|
|
scrollTopRight: 0, // 右侧滚动位置
|
|
data: [], // 模拟数据
|
|
dataList: [{name:'国家/地区',id:'1'},{name:'我的关注',id:'2'}], // 循环数据
|
|
dataEleHeight: [], // 获取data数组中各个元素的高度
|
|
topList: [], // 计算得到各个元素与顶部的距离
|
|
scrollHeight: 500, // 滚动区域的高度
|
|
flag: true, // 判断左侧是否做高亮显示判断
|
|
selectedFirstColumnIndex: '', // 当前选中的第一列索引
|
|
isFirstColumnAllSelected: true, // 第一列“全部”按钮的选中状态
|
|
selectedData: [
|
|
{name:'浙江',id:'1-1',parentId: '1'},
|
|
{name:'呼市',id:'1-2',parentId: '1'},
|
|
{name:'北京',id:'1-3',parentId: '1'},
|
|
{name:'天津',id:'1-4',parentId: '1'},
|
|
{name:'上海',id:'1-5',parentId: '1'},
|
|
], // 根据选中的左侧按钮更新右侧第一列显示的数据
|
|
selectedSecondColumnData: [
|
|
{name:'风格1',parentId:'1-1',ids: '02'},
|
|
{name:'风格2',parentId:'1-1',ids: '03'},
|
|
{name:'风格3',parentId:'1-1',ids: '04'},
|
|
{name:'风格4',parentId:'1-1',ids: '05'},
|
|
{name:'风格5',parentId:'1-1',ids: '06'},
|
|
], // 根据选中的第一列数据更新右侧第二列显示的数据
|
|
selectedSecondColumnIndexes: [], // 右侧第二列选中的索引数组
|
|
isSecondColumnAllSelected: true, // 第二列“全部”按钮的选中状态
|
|
beerFlag:false,
|
|
brandFlag: true,
|
|
beerList:[
|
|
{name:'西打酒1',id: '01'},
|
|
{name:'西打酒2',id: '02'},
|
|
{name:'西打酒3',id: '03'},
|
|
{name:'西打酒4',id: '04'},
|
|
{name:'西打酒5',id: '05'},
|
|
],
|
|
selectBeerSelected: true,
|
|
selectedThreeColumnIndexes: []//啤酒风格选中的索引数组，
|
|
};
|
|
},
|
|
methods: {
|
|
beerClick() {
|
|
this.beerFlag = true
|
|
this.brandFlag = false
|
|
},
|
|
brandClick(){
|
|
this.brandFlag = true
|
|
this.beerFlag = false
|
|
|
|
},
|
|
// 左侧导航切换
|
|
switchNav(item, index) {
|
|
if (this.posi !== item.id) {
|
|
this.posi = item.id;
|
|
this.selectedFirstColumnIndex = null; // 清空第一列选中状态
|
|
this.isFirstColumnAllSelected = false; // 清空第一列“全部”按钮选中状态
|
|
this.selectedData = []; // 更新右侧第一列显示的数据
|
|
this.selectedSecondColumnData = []; // 更新右侧第二列显示的数据
|
|
this.selectedSecondColumnIndexes = []; // 清空右侧第二列选中状态
|
|
this.isSecondColumnAllSelected = false; // 清空第二列“全部”按钮选中状态
|
|
} else {
|
|
// 重复点击一样要定位到最开头的位置
|
|
this.scrollTopLeft = this.topList[index];
|
|
this.scrollTopRight = this.topList[index];
|
|
}
|
|
},
|
|
|
|
// 选择第一列
|
|
selectFirstColumn(row) {
|
|
this.selectedFirstColumnIndex = row.id;
|
|
this.isFirstColumnAllSelected = false; // 取消“全部”按钮的选中状态
|
|
// 清空右侧第二列选中状态
|
|
this.selectedSecondColumnIndexes = [];
|
|
this.isSecondColumnAllSelected = false; // 取消第二列“全部”按钮的选中状态
|
|
},
|
|
|
|
// 选择第一列“全部”按钮
|
|
selectFirstColumnAll() {
|
|
this.isFirstColumnAllSelected = !this.isFirstColumnAllSelected;
|
|
if (this.isFirstColumnAllSelected) {
|
|
this.selectedFirstColumnIndex = null; // 清空第一列选中状态
|
|
this.selectedSecondColumnIndexes = [];
|
|
}
|
|
},
|
|
|
|
// 切换右侧第二列选中状态
|
|
toggleSecondColumnSelection(item) {
|
|
if (this.selectedSecondColumnIndexes.includes(item.ids)) {
|
|
this.selectedSecondColumnIndexes = this.selectedSecondColumnIndexes.filter(i => i !== item.ids);
|
|
} else {
|
|
this.selectedSecondColumnIndexes.push(item.ids);
|
|
}
|
|
this.isSecondColumnAllSelected = false; // 取消“全部”按钮的选中状态
|
|
},
|
|
|
|
// 选择第二列“全部”按钮
|
|
selectSecondColumnAll() {
|
|
this.isSecondColumnAllSelected = !this.isSecondColumnAllSelected;
|
|
if (this.isSecondColumnAllSelected) {
|
|
this.selectedSecondColumnIndexes = []; // 清空第二列选中状态
|
|
}
|
|
},
|
|
//选择啤酒风格全部按钮
|
|
selectBeerAll() {
|
|
this.selectBeerSelected = !this.selectBeerSelected
|
|
|
|
if (this.selectedThreeColumnIndexes) {
|
|
this.selectedThreeColumnIndexes = []; // 清空第二列选中状态
|
|
}
|
|
},
|
|
toggleThreeColumnSelection(item) {
|
|
if (this.selectedThreeColumnIndexes.includes(item.id)) {
|
|
this.selectedThreeColumnIndexes = this.selectedThreeColumnIndexes.filter(i => i !== item.id);
|
|
} else {
|
|
this.selectedThreeColumnIndexes.push(item.id);
|
|
}
|
|
this.selectBeerSelected = false; // 取消“全部”按钮的选中状态
|
|
},
|
|
// 左侧滚动事件（取消滚动功能）
|
|
scrollLeft(e) {
|
|
// 不做任何处理，取消滚动功能
|
|
},
|
|
|
|
// 右侧滚动事件
|
|
scrollRight(e) {
|
|
// let index = this.posi.substring(2);
|
|
// if (this.flag) {
|
|
// for (let i in this.topList) {
|
|
// if (
|
|
// i < this.topList.length - 1 &&
|
|
// this.topList[i] <= e.detail.scrollTop &&
|
|
// e.detail.scrollTop < this.topList[parseInt(i) + 1]
|
|
// ) {
|
|
// this.posi = this.dataList[i].id;
|
|
// break;
|
|
// }
|
|
// this.posi = this.dataList[i].id;
|
|
// }
|
|
// }
|
|
// this.flag = true;
|
|
// this.scrollTopRight = e.detail.scrollTop;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
.selects-page{
|
|
text-align: center;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding:0rpx 0 56rpx 0;
|
|
background: #FFF;
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
color: #030303;
|
|
}
|
|
.productNav {
|
|
display: flex;
|
|
flex-direction: row;
|
|
font-family: Roboto;
|
|
background-color: #fff;
|
|
padding-bottom: 20rpx;
|
|
}
|
|
.left {
|
|
width: 25%;
|
|
font-size: 30rpx;
|
|
/* background-color: #f4f4f4; */
|
|
}
|
|
.left view {
|
|
text-align: center;
|
|
height: 90rpx;
|
|
line-height: 90rpx;
|
|
}
|
|
.selected {
|
|
background-color: #fff;
|
|
/* border-left: 2px solid #e54847; */
|
|
font-weight: bold;
|
|
color: #4E63E0;
|
|
}
|
|
.normal {
|
|
background-color: #FFFFFF;
|
|
border-bottom: 1px solid #f2f2f2;
|
|
}
|
|
.right {
|
|
width: 75%;
|
|
margin: 0;
|
|
}
|
|
.right-one{
|
|
border: 1px solid #606060;
|
|
text-align: center;
|
|
color: #606060;
|
|
border-radius: 16rpx;
|
|
}
|
|
.wh-1{
|
|
width: 130rpx;
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
}
|
|
.scroll {
|
|
height: 424rpx;
|
|
text-align: center;
|
|
}
|
|
.scroll-1 {
|
|
height: 424rpx;
|
|
width: 174rpx;
|
|
text-align: center;
|
|
margin: 0 22rpx;
|
|
}
|
|
.title {
|
|
background: #FFFFFF;
|
|
color: white;
|
|
}
|
|
.content {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
.column {
|
|
flex: 1;
|
|
}
|
|
.divider {
|
|
width: 1px;
|
|
background-color: #ccc;
|
|
/* margin: 0 10rpx; */
|
|
}
|
|
.selecteds{
|
|
border: 1px solid #19367A;
|
|
color: #19367A;
|
|
}
|
|
.btns{
|
|
height: 80rpx;
|
|
text-align: center;
|
|
line-height: 80rpx;
|
|
}
|
|
.btn1 {
|
|
width: 28%;
|
|
}
|
|
.btn2 {
|
|
border-radius: 8px;
|
|
background: #4E63E0;
|
|
width: 66%;
|
|
}
|
|
.selectedTxt{
|
|
color: #19367A;
|
|
}
|
|
</style> |