代码如下：有很多不需要的css与js 用的时候可以删一下
<template>
<view class="con">
<view class="nav">
<button class="nav_btn" :class="btn_1_name === '医生'?'nav_btn_active':''" @click="chooseValue(1)">医生</button>
<button class="nav_btn" :class="btn_1_name === '机构'?'nav_btn_active':''" @click="chooseValue(0)">机构</button>
<button class="nav_btn" :class="btn_1_name === '项目'?'nav_btn_active':''" @click="chooseValue(2)">项目</button>
<view class="nav_btn_active2" @click="btnshowList">{
{btn_2_name}}
<view class="sanjiao">▼ </view>
</view>
</view>
<view v-if="showList" class="moniList">
<view class="moniItem" v-for="(item,index) in lawList1" :key="index" @click="chooseValue1(index)">{
{item}}
</view>
</view>
<view v-if="showList2" class="moniList">
<view class="moniItem" v-for="(item,index) in lawList2" :key="index" @click="chooseValue2(index)">{
{item}}
</view>
</view>
<view v-if="showList3" class="moniList">
<view class="moniItem" v-for="(item,index) in lawList3" :key="index" @click="chooseValue3(index)">{
{item}}
</view>
</view>
<view class="list">
<!-- 这是暂无部分 -->
<view class="list-none" v-if="!storelist.length">暂无{
{btn_1_name}}</view>
<!-- 这是需要显示的列表部分 -->
<view v-if="btn_1_name == '医生'" class="itemimg1">
医生
</view>
<view v-if="btn_1_name == '机构'" class="itemimg1">
机构
</view>
<view v-if="btn_1_name == '项目'" class="itemimg2">
项目
</view>
</view>
</view>
</template>
<script>
/*******************
* 自定义排序组件
*
*
******************/
export default {
data() {
return {
storelist: ["1", "2", "3"],
showList: false,
showList2: false,
showList3: false,
btn_1_name: '医生',
btn_2_name: '选择排序方式',
lawList: ['机构', '医生', '项目'],
lawList1: ['天数', '热度'],
lawList2: ['天数', '热度'],
lawList3: ['按销量排序', '高价优先', '低价优先'],
btnsel: 1,
}
},
mounted() {
console.log("页面挂载");
},
methods: {
jump(btn_1_name, item, index) {
console.log("263行", index);
if (btn_1_name == '机构') {
uni.navigateTo({
// url: `../../pages_my/lawFirm/lawFirm?lawFirmDet=${JSON.stringify(item)}`
url: `../../home_layout/mouthdetail/mouthdetail?lawTo=${JSON.stringify(item)}`
})
console.log("跳转机构详情");
} else if (btn_1_name == '医生') {
uni.navigateTo({
url: `../../pages_my/lawSubscribetwo/lawSubscribetwo?lawyer=${JSON.stringify(item)}&lawOfficeId=''`
})
console.log("跳转医生详情");
} else if (btn_1_name == '项目') {
console.log("跳转项目详情");
uni.navigateTo({
url: `../../my_layout/details/details`
})
}
},
//跳转页面
jumpPage(path) {
// let that = this
// uni.navigateTo({
// url: `../../pages_my/${path}/${path}?btn_1_name=${that.btn_1_name}`
// })
console.log("不执行跳转");
},
//直接把参数扔过去
goPay(index, index1) {
},
btnshowList() {
if (this.btnsel == 0) {
// this.getLawOfficeList()
this.setShowList()
this.btn_1_name = this.lawList[0]
} else if (this.btnsel == 1) {
this.setShowList2()
this.btn_1_name = this.lawList[1]
} else if (this.btnsel == 2) {
this.setShowList3()
// this.getLawList()
this.btn_1_name = this.lawList[2]
}
},
// 下拉框展示
setShowList() {
this.showList = !this.showList
this.showList2 = false
this.showList3 = false
// console.log("展示下拉框1");
},
// 下拉框展示
setShowList2() {
this.showList2 = !this.showList2
this.showList = false
this.showList3 = false
// console.log("展示下拉框2");
},
// 下拉框展示3
setShowList3() {
this.showList3 = !this.showList3
this.showList2 = false
this.showList = false
// console.log("展示下拉框3");
},
// 下拉框选择
chooseValue(index) {
if (index == 0) {
// this.getLawOfficeList()
this.setShowList()
this.btn_1_name = this.lawList[index]
console.log("286点击获取机构-列表");
this.btnsel = 0
} else if (index == 1) {
this.setShowList2()
this.btn_1_name = this.lawList[index]
console.log("291点击获取医生-列表");
this.btnsel = 1
} else if (index == 2) {
this.setShowList3()
// this.getLawList()
this.btn_1_name = this.lawList[index]
console.log("297点击获取项目列表");
this.btnsel = 2
}
},
// 下拉框选择1
chooseValue1(index) {
this.btn_2_name = this.lawList1[index]
this.showList = false
},
// 下拉框选择2
chooseValue2(index) {
this.btn_2_name = this.lawList2[index]
this.showList2 = false
},
// 下拉框选择3
chooseValue3(index) {
this.btn_2_name = this.lawList3[index]
this.showList3 = false
},
// 计算两点的距离
calculateDistance(lat, lng) {
let strfrom = this.lat + "," + this.lng;
let strto = lat + "," + lng;
return new Promise((resolve, reject) => {
qqmapsdk.calculateDistance({
mode: "straight",
from: strfrom || "",
to: strto,
success: function(res) {
resolve(res);
},
fail: function(error) {
console.error(error);
reject(error);
},
complete: function(res) {
console.log(res);
},
});
});
}
}
}
</script>
<style lang="scss" scoped>
.con {
width: 664rpx;
padding: 6rpx 43rpx 81rpx 43rpx;
background: #FFFFFF;
}
.nav {
width: 664rpx;
height: 79rpx;
display: flex;
align-items: center;
.nav_btn {
width: 110rpx;
height: 44rpx;
margin: 0;
padding: 0;
margin-right: 22rpx;
background: #F6F6F6;
border-radius: 70rpx;
font-weight: 500;
font-size: 24rpx;
display: flex;
justify-content: center;
align-items: center;
color: #000000;
border: none;
}
.nav_btn_active {
color: #FF7A00;
border: 1px solid #FF650F;
}
.nav_btn_active2 {
position: absolute;
display: flex;
margin-left: 500rpx;
// background-color: red;
color: #000;
width: 190rpx;
font-weight: 500;
font-size: 24rpx;
}
.sanjiao {
position: relative;
margin-top: 3rpx;
margin-left: 10rpx;
font-size: 20rpx;
color: #FF650F;
}
button::after {
border: none;
}
}
.moniList {
position: absolute;
width: 664rpx;
left: 0;
padding: 34rpx 43rpx;
z-index: 50;
background: #FFFFFF;
border-top: 1rpx solid #EEEEEE;
.moniItem {
width: 143rpx;
height: 44rpx;
font-size: 24rpx;
display: flex;
align-items: center;
color: #000000;
}
}
.list {
width: 675rpx;
.list-none {
width: 675rpx;
height: 503rpx;
display: flex;
justify-content: center;
align-items: center;
}
// padding: 37rpx;
.list_item {
width: 675rpx;
height: 223rpx;
// background-color: yellowgreen;
margin-top: 31rpx;
border-bottom: 1rpx solid #EEEEEE;
.list_item_top {
width: 675rpx;
height: 138rpx;
display: flex;
justify-content: space-between;
align-items: center;
.itemimg1 {
image {
width: 138rpx;
height: 138rpx;
border-radius: 50%;
}
width: 138rpx;
height: 138rpx;
}
.itemimg2 {
width: 138rpx;
height: 138rpx;
image {
width: 138rpx;
height: 138rpx;
}
}
.top_con {
width: 518rpx;
height: 138rpx;
display: flex;
flex-direction: column;
justify-content: space-around;
.top_title {
width: 379rpx;
height: 32rpx;
font-weight: 500;
font-size: 32rpx;
display: flex;
align-items: center;
color: #000000;
}
.address_list {
width: 509rpx;
// height: 99rpx;
font-weight: 350;
font-size: 24rpx;
display: flex;
justify-content: space-between;
align-items: flex-end;
color: #000000;
.distance {
width: 91rpx;
height: 27rpx;
margin-left: 39rpx;
font-size: 24rpx;
display: flex;
justify-content: flex-end;
align-items: center;
color: #818181;
}
}
.obj {
margin-top: 15rpx;
color: #797979;
font-family: 'Source Han Sans CN';
font-style: normal;
font-weight: 350;
font-size: 22rpx;
line-height: 33rpx;
.itename {
font-style: normal;
font-weight: 400;
font-size: 28rpx;
line-height: 42rpx;
}
.oneicon {
position: absolute;
margin-top: 15rpx;
margin-left: -5rpx;
}
.itemshop {
image {
width: 263rpx;
height: 28rpx;
}
}
}
}
}
}
.list_item_bottom {
width: 675rpx;
height: 51rpx;
// background-color: #FF650F;
display: flex;
justify-content: space-between;
align-items: center;
.bottom_con {
background: #FFF1E7;
border-radius: 6rpx;
font-size: 22rpx;
display: flex;
align-items: center;
color: #582A00;
.bottom_title {
position: absolute;
margin-left: 100rpx;
margin-top: -120rpx;
height: 36rpx;
width: 36rpx;
padding: 5rpx 5rpx;
text-align: center;
flex-direction: column;
align-items: center;
background: linear-gradient(180deg, #FFE8D7 0%, #ffd525 100%);
border-radius: 18rpx;
}
.bottom_text {
margin-top: -300rpx;
margin-left: -20rpx;
height: 130rpx;
width: 60rpx;
// background-color: green;
display: flex;
justify-content: center;
align-items: center;
image {
width: 56rpx;
height: 100rpx;
}
.toptext {
position: absolute;
margin-top: -50rpx;
font-size: 23rpx;
color: #fff;
}
.toptext2 {
position: absolute;
margin-top: 30rpx;
font-size: 26rpx;
color: #fff;
}
}
}
}
}
</style>
如图所示： 可展开双击关闭等
展开后：
