liubiao/APP
1
0
Fork 0
forked from dyf/APP
Code Pull Requests Activity

6155完成部分协议对接

Browse Source
This commit is contained in:
liub
2025-08-15 16:39:00 +08:00
parent 6ef2bb08b9
commit e95b2466e1
10 changed files with 871 additions and 708 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
components/BottomSlideMenuPlus/BottomSlideMenuPlus.vue
View File

@ -2,17 +2,14 @@
<view class="message-popup" :class="{ 'show': config.show }">
<view class="mask" @click="closeMenu" :class="{ 'show': config.show }"
:style="{backgroundColor:config.maskBgColor,display:(config.showMask?'':'none')}"
>
:style="{backgroundColor:config.maskBgColor,display:(config.showMask?'':'none')}">
</view>
<view class="bottom-slide-menu" :style="{ backgroundColor: config.bgColor }" :class="{ 'show': config.show }"
@touchmove.stop.prevent>
<view class="menu-header" :class="config.showHeader?'':'displayNone'">
<view class="title" :style="{ color: config.textColor}">{{ config.title }}</view>
<view class="close-icon" @click="closeMenu"
:style="{display:(config.showClose?'':'none')}"
>
<view class="close-icon" @click="closeMenu" :style="{display:(config.showClose?'':'none')}">
<image src="/static/Images/public/close.png" mode="aspectFit"></image>
</view>
</view>
@ -29,7 +26,13 @@
<view class="p100" :style="{backgroundColor:config.activeIndex==index?config.itemBgColor:'',
justifyContent:config.textAlign
}">
<image v-if="item.icon" :src="item.icon" mode="aspectFit"></image>
<view class="imgContent" :style="{
height:config.itemHeight,
width:config.itemHeight
}">
<image v-if="item.icon" :src="item.icon" mode="aspectFit"></image>
</view>
<text>{{ item.text }}</text>
</view>
@ -61,34 +64,34 @@
config: {
type: Object,
default: () => ({
show: false,//是否显示
showHeader: false,//是否显示标头
showMask:true,//是否显示mask
showDivider: false,//是否在两个项之间显示分隔线
showBtn: false,//是否显示底部按钮
showClose:false,//是否显示右上角关闭按钮
maskBgColor:'',//mask的颜色
menuItems: [],//菜单项 包含icon text
activeIndex: -1,//当前已选中的项编号
bgColor: '#2a2a2a',//主体背景
itemBgColor: '#3a3a3a',//各项被选中后的背景
textColor: '#ffffffde',//各项的文字颜色
textAlign: 'flex-start',//各项的文字居中方式
title: '',//header的文字
dividerColor: '#00000000',//分隔线颜色
dividerThickness: '0rpx',//分隔线宽度
dividerMargin: '10rpx',//分隔线距离两边的宽度
itemHeight: '80rpx',//各项的调试
btnBgColor: "#bbe600",//按钮颜色
btnText: "确定",//按钮文字
btnTextColor: "#000000",//按钮文字颜色
show: false, //是否显示
showHeader: false, //是否显示标头
showMask: true, //是否显示mask
showDivider: false, //是否在两个项之间显示分隔线
showBtn: false, //是否显示底部按钮
showClose: false, //是否显示右上角关闭按钮
maskBgColor: '', //mask的颜色
menuItems: [], //菜单项 包含icon text
activeIndex: -1, //当前已选中的项编号
bgColor: '#2a2a2a', //主体背景
itemBgColor: '#3a3a3a', //各项被选中后的背景
textColor: '#ffffffde', //各项的文字颜色
textAlign: 'flex-start', //各项的文字居中方式
title: '', //header的文字
dividerColor: '#00000000', //分隔线颜色
dividerThickness: '0rpx', //分隔线宽度
dividerMargin: '10rpx', //分隔线距离两边的宽度
itemHeight: '80rpx', //各项的调试
btnBgColor: "#bbe600", //按钮颜色
btnText: "确定", //按钮文字
btnTextColor: "#000000", //按钮文字颜色
})
},
},
methods: {
closeMenu() {
@ -100,19 +103,18 @@
this.$emit('itemClick', item, index);
},
btnClick() {
let item = null;
let index = null;
if (this.config.activeIndex > -1) {
item = this.config.menuItems[this.config.activeIndex];
}
index = this.config.activeIndex;
this.$emit('btnClick', item, index);
this.$emit('btnClick', item, index);
}
}
}
</script>
<style>
@ -126,7 +128,7 @@
}
.p100 {
width: 100%;
width: calc(100% - 20rpx);
height: 100%;
border-radius: 8rpx;
display: flex;
@ -136,7 +138,8 @@
justify-content: flex-start;
align-items: center;
box-sizing: border-box;
padding: 0rpx 20rpx;
padding: 0rpx 20rpx 0rpx 0rpx;
margin-left: 20rpx;
}
.displayNone {
@ -151,7 +154,7 @@
z-index: 9999;
transition: transform 0.3s ease-out;
transform: translateY(100%);
border-radius: 16rpx 16rpx 0 0;
border-radius: 32rpx 32rpx 0 0;
box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
}
@ -217,11 +220,24 @@
width: 100%;
box-sizing: border-box;
position: relative;
margin-bottom: 20rpx;
}
.menu-item image {
width: 40rpx;
height: 40rpx;
}
.imgContent {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: center;
align-items: center;
background: #4a4a4a;
border-radius: 10rpx;
margin-right: 20rpx;
}