1.效果图，点击订单列表的"更多"，会显示出隐藏的按钮，再次点击"更多"就隐藏
2.wxml
这里是用订单id来判断的
<view class='order-list' wx:for="{
{userOrderList}}" wx:key="index">
<view class='item' wx:for="{
{item.list}}" wx:for-item="vo" wx:key="index" data-item="{
{vo}}">
<view class='btn' >
<view class='more'>
<view class='more-text' data-id="{
{vo._id}}" bindtap='bindShowMsg' > 更多</view>
<!-- 下拉需要显示的列表 -->
<view class="select_box " wx:if="{
{selectid==vo._id}}">
<view wx:for="{
{moreText}}" wx:key="unique">
<view class="select_one" bindtap="mySelect" data-id="{
{vo._id}}" data-status="{
{vo.status}}" data-isEvaluate="{
{vo.isEvaluate}}" data-name="{
{item.name}}">{
{item.name}}</view>
</view>
</view>
</view>
<view class="btns">
<view class="nextBtn" data-id="{
{vo._id}}" bindtap="wxpay">去支付</view>
<view class="nextBtn" data-id="{
{vo._id}}" data-types="{
{vo.type}}" bindtap="confirmMoney" data-target="DialogModal1">确认金额</view>
</view>
</view>
</view>
</view>3.js
data:{
userOrderList: [],
money: 0, //订单金额
moreText: [{
id: 0,
name: '修改订单'
}, {
id: 1,
name: '取消订单'
}, {
id: 2,
name: '服务评价'
}, {
id: 3,
name: '开发票'
}],
orderid: '',
selectid: 0
},
/**
* 点击下拉框
*/
bindShowMsg(e) {
let that=this
let id = e.currentTarget.dataset.id;
console.log('id', id)
if(this.data.selectid==0){ //判断是否已经点击更多
that.setData({ //显示更多
selectid: id
})
}else{
that.setData({ //隐藏更多
selectid: 0
})
}
},
/**
* 已选下拉框
*/
mySelect(e) {
let that = this
let name = e.currentTarget.dataset.name
let id = e.currentTarget.dataset.id;
let status = e.currentTarget.dataset.status
let isEvaluate = e.currentTarget.dataset.isEvaluate
console.log('id', id)
console.log('name', name)
console.log('status', status)
console.log('isEvaluate', isEvaluate)
if (name == '修改订单') {
that.modifyDetails(id)
that.setData({
selectid: 0
})
} else if (name == '取消订单' && status == 0) {
that.cancelOrder(id)
that.setData({
selectid: 0
})
} else if (name == '服务评价') {
if (status == 2 && isEvaluate == 0) {
that.evaluation(id)
that.setData({
selectid: 0
})
} else {
return wx.showModal({
title: '温馨提示',
content: '当前功能暂未开放',
showCancel: false,
success(res) {
if (res.confirm) {
console.log('用户点击确定')
that.setData({
selectid: 0
})
}
}
})
}
} else if (name == '开发票') {
if (status == 2) {
that.makeInvoice(id)
that.setData({
selectid: 0
})
} else {
return wx.showModal({
title: '温馨提示',
content: '当前功能暂未开放',
showCancel: false,
success(res) {
if (res.confirm) {
console.log('用户点击确定')
that.setData({
selectid: 0
})
}
}
})
}
}
},4.wxss
按钮部分的样式
.order-list .item .btn {
width: 100%;
padding: 20rpx;
display: flex;
align-items: center;
justify-content: space-between;
border-top: 2rpx dashed #ededed;
}
.order-list .item .btn .nextBtn {
display: flex;
padding: 10rpx 20rpx;
align-items: center;
justify-content: center;
background: #0081ff;
color: #fff;
border-radius: 32rpx;
margin: 0 10rpx;
}
.order-list .item .btn .btns{
display: flex;
flex-direction: row;
flex: 1;
justify-content: flex-end;
}
/* 下拉菜单 */
/* 顶部 */
.order-list .item .btn .more{
position: relative;
}
.order-list .item .btn .more-text{
color: #999999;
width: 100rpx;
text-align: center;
}
/* 下拉内容 */
.order-list .item .btn .select_box {
background-color: #fff;
padding: 0 20rpx;
width: 220rpx;
z-index: 9;
overflow: hidden;
text-align: left;
animation: myfirst 0.5s;
font-size: 30rpx;
position: absolute;
top: 57rpx;
left: 0;
border: 2rpx solid #ededed;
border-radius: 10rpx;
}
.order-list .item .btn .select_one {
width: 100%;
height: 60rpx;
position: relative;
line-height: 60rpx;
border-bottom: 2rpx solid #ededed;
color: #666;
text-align: center;
}
/* 下拉过度效果 */
@keyframes myfirst {
from {
height: 0rpx;
}
to {
height: 210rpx;
}
}