From 0379cef6b482ab41fb11899c727ee5b755269840 Mon Sep 17 00:00:00 2001
From: Administrator <tostary@yeah.net>
Date: Thu, 6 Nov 2025 10:38:56 +0800
Subject: [PATCH] =?UTF-8?q?add:=E6=B7=BB=E5=8A=A0=E6=96=B0=E7=9A=84?=
 =?UTF-8?q?=E5=9C=B0=E6=AD=A5=E6=8C=89=E9=92=AE=E7=BB=84=E4=BB=B6=E5=92=8C?=
 =?UTF-8?q?=E8=AF=B4=E6=98=8E=EF=BC=8C=E6=9B=BF=E4=BB=A3=E5=B9=B6=E7=AE=80?=
 =?UTF-8?q?=E5=8C=96=E5=8E=9F=E6=9C=89=E6=8C=89=E9=92=AE=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=EF=BC=8C=E9=99=8D=E4=BD=8E=E9=A1=B5=E9=9D=A2=E7=8A=B6=E6=80=81?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=E7=9A=84=E5=A4=8D=E6=9D=82=E5=BA=A6=EF=BC=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                               |  67 ++++++
 components/bottomBtn/bottomBtnGroup.vue | 299 ++++++++++++++++++++++++
 2 files changed, 366 insertions(+)
 create mode 100644 components/bottomBtn/bottomBtnGroup.vue

diff --git a/README.md b/README.md
index 3818156..b3277f0 100644
--- a/README.md
+++ b/README.md
@@ -55,4 +55,71 @@ config.header['platform'] = 'APP'
 		</has-authority>
 	</view>
 </uni-td>
+```
+
+# 以下为复杂页面的完整配置参数
+
+```json
+ {
+	"path": "pages/index/index", // 首页
+	"style": {
+		"navigationBarTitleText": "首页", // 页面标题
+		"enablePullDownRefresh": true, // 开启下拉刷新
+		"backgroundColor": "#F8F8F8", // 导航栏背景颜色
+		"onReachBottomDistance": 100, // 设置页面上拉触底事件触发时距离页面底部的距离,默认是50px
+		"app-plus": { // 以下是App平台特有配置
+			"titleNView": {
+				"titleSize": "16px" // App端原生导航栏标题字体大小
+				"titleColor": "#fff",
+				"buttons": [{ //  导航栏右侧按钮，下面是使用icon展示的示例
+					"text": "\ue60f",
+					"fontSize": "30px",
+					"fontSrc": "/static/iconfont.ttf"
+				}]
+			}
+		}
+	}
+}
+```
+
+## 以下为底部按钮列表的使用方式
+```js
+//按钮列表的引入
+import bottomBtnGroup from '@/components/bottomBtn/bottomBtnGroup.vue'
+//注册组件
+components: {
+	bottomBtnGroup
+},
+//UI 引用
+<bottomBtnGroup :toolbar="bottomBtnList"></bottomBtnGroup>
+// vue Data定义
+ data() {
+	return {
+		//form 底部按钮栏配置
+		bottomBtnList: [{
+				label: "新增",
+				type: "primary",
+				event: (done) => { // 接收 done 回调 // ✅ 箭头函数，this 指向组件
+					setTimeout(() => {
+						// 	// 在这里执行你想要延迟执行的函数或代码
+						console.log("延时5秒") // 调用你的函数
+						this.containCallMethods(done);//你需要执行的方法
+					}, 5000);
+					//this.containCallMethods(done);
+				},
+			},
+			{
+				label: "取消",
+				type: "primary",
+				event: function() {
+					//方式2：
+					return new Promise(resolve => {
+						console.log("取消方法完成")
+						setTimeout(resolve, 5000);
+					});
+				}
+			},
+		],
+	}
+}
 ```
\ No newline at end of file
diff --git a/components/bottomBtn/bottomBtnGroup.vue b/components/bottomBtn/bottomBtnGroup.vue
new file mode 100644
index 0000000..7e1f780
--- /dev/null
+++ b/components/bottomBtn/bottomBtnGroup.vue
@@ -0,0 +1,299 @@
+<!-- PageBottom.vue -->
+<template>
+	<view class="pageBottom" :style="{ position: position, bottom: isSubmit ? '60rpx' : '0' }">
+		<view class="uni-flex uni-row buttons">
+			<view class="flex-item " v-for="(item, index) in toolbar" :key="index" style="padding: 1ch;width: 100%;">
+				<!-- 更多按钮:todo 1.按钮权限控制；2.动态宽度； -->
+				<!-- type: 'primary' 蓝色（不同终端默认颜色不同）,'default' 白色,'warn'红色 如想在多端统一颜色，请改用default，然后自行写样式 -->
+				<!-- style: 支持自定义样式 -->
+				<button :type="item.type && ['primary','default','warn'].includes(item.type) ? item.type  : 'default'"
+					@click="handleClick(item,index)" :style="item.style || ''" :loading="buttonStates[index]"
+					:disabled="buttonStates[index]">
+					{{ item.label }}{{ item.disable }}
+				</button>
+			</view>
+
+		</view>
+
+	</view>
+</template>
+
+<script>
+	import {
+		propsToAttrMap
+	} from '@vue/shared';
+
+	export default {
+		name: 'bottomBtnGroup',
+		// 接收的 props
+		props: {
+			/// 头工具栏
+			toolbar: {
+				type: Array,
+				default () {
+					return [{
+							label: "新增",
+							type: "primary",
+							event: function(done) {
+								//方式1： 接收 done 回调 在业务结束时手动触发回调
+								setTimeout(() => {
+									console.log("延时5秒 新增方法完成")
+									done(); //
+								}, 5000);
+							}
+						},
+						{
+							label: "删除",
+							type: "default",
+							event: function(done) {
+								setTimeout(() => {
+									console.log("延时5秒 删除方法完成")
+									done();
+								}, 5000);
+							}
+						},
+						{
+							label: "取消",
+							type: "primary",
+							event: function() {
+								//方式2：
+								return new Promise(resolve => {
+									console.log("取消方法完成")
+									setTimeout(resolve, 5000);
+								});
+							}
+						},
+					]
+				}
+			},
+			//背景是否是白色
+			backgroundWhite: {
+				type: Boolean,
+				default: false
+			},
+			//是否是提交表单的样式
+			isSubmit: {
+				type: Boolean,
+				default: false
+			},
+			//按钮是否可点击的状态
+			disable: {
+				type: Boolean,
+				default: false
+			},
+			position: {
+				type: String,
+				default: 'fixed'
+			}
+		},
+		created() {
+			// 初始化每个按钮的loading状态
+			this.initButtonStates();
+		},
+		data() {
+			return {
+				loading: false,
+				// 存储按钮的loading状态（与toolbar对应）
+				buttonStates: []
+
+			};
+		},
+		watch: {
+			// 监听toolbar变化，重新初始化状态（适用于动态更新按钮列表的场景）
+			toolbar: {
+				handler() {
+					this.initButtonStates();
+				},
+				deep: true
+			}
+		},
+
+		// 方法
+		methods: {
+			// 初始化按钮状态（为每个按钮添加loading属性）
+			initButtonStates() {
+				this.toolbar.map((item, index) => {
+					//this.buttonStates.push(false)//vue3生效
+					// 响应式更新
+					this.$set(this.buttonStates, index, false); //vue2生效
+				});
+			},
+			async handleClick(item, index) {
+				try {
+					this.$set(this.buttonStates, index, true);
+					this.$modal.loading("请等待...")
+					//方式1：注意：此处约定 item.event() 返回一个Promise 否则loding状态不生效
+					//return new Promise(resolve => setTimeout(resolve, 5000));
+					//方式2：把 resolve/reject 作为“完成信号”传给业务函数，像调用方法传递done 方法，在业务处理结后调用
+					await new Promise((resolve, reject) => {
+						// 把 resolve/reject 作为“完成信号”传给业务函数
+						item.event(resolve, reject);
+					});
+				} catch (error) {
+					console.error('catch 按钮事件执行出错:', error);
+				} finally {
+					// 响应式更新
+					console.info('finally 按钮事件执行');
+					this.$set(this.buttonStates, index, false);
+					this.$modal.closeLoading()
+				}
+			}
+		}
+	};
+</script>
+
+<style scoped lang="scss">
+	.pageBottom {
+		left: 0;
+		bottom: 0;
+		z-index: 30;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		flex-direction: column;
+		width: 100%;
+		padding: 20rpx 0 20rpx;
+
+		.button {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			width: 686rpx;
+			height: 72rpx;
+			font-weight: 400;
+			font-size: 32rpx;
+			color: #ffffff;
+			border-radius: 16rpx;
+			//background: rgb(22, 93, 255);
+		}
+
+		.backgroundWhite {
+			background: #fff;
+			color: #165dff;
+			border: 2rpx solid rgb(22, 93, 255);
+		}
+
+		.buttons {
+			display: flex;
+			justify-content: center;
+			width: 100%;
+			position: fixed;
+			bottom: 0;
+			left: 0;
+			padding: 24rpx 0 60rpx;
+			background-color: #fff;
+			//background-color: #165DFF;
+
+			.buttonOne {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				height: 90rpx;
+				width: 664rpx;
+				box-sizing: border-box;
+				//background: rgb(22, 93, 255);
+				border-radius: 16rpx;
+				color: #FFFFFF;
+				font-weight: 400;
+				font-size: 32rpx;
+			}
+
+			.buttonLeft {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				height: 90rpx;
+				width: 332rpx;
+				box-sizing: border-box;
+				background: rgb(22, 93, 255);
+				border-radius: 16rpx;
+				color: #FFFFFF;
+				font-weight: 400;
+				font-size: 32rpx;
+			}
+
+			.buttonRight {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				height: 90rpx;
+				width: 332rpx;
+				border-radius: 16rpx;
+				background: rgb(22, 93, 255);
+				font-weight: 400;
+				font-size: 32rpx;
+				color: #FFFFFF;
+				margin-left: 22rpx;
+			}
+		}
+
+		.thirdbuttons {
+			display: flex;
+			justify-content: center;
+			width: 100%;
+			position: fixed;
+			bottom: 0;
+			left: 0;
+			padding: 10rpx 0 60rpx;
+			background-color: #fff;
+
+			.buttonLeft {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				height: 72rpx;
+				width: 232rpx;
+				box-sizing: border-box;
+				border: 2rpx solid rgb(22, 93, 255);
+				border-radius: 16rpx;
+				background: rgb(255, 255, 255);
+				color: #165DFF;
+				font-weight: 400;
+				font-size: 32rpx;
+			}
+
+			.buttonMid {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				height: 72rpx;
+				width: 232rpx;
+				box-sizing: border-box;
+				border: 2rpx solid rgb(22, 93, 255);
+				border-radius: 16rpx;
+				background: rgb(255, 255, 255);
+				color: #165DFF;
+				font-weight: 400;
+				font-size: 32rpx;
+				margin-left: 10rpx;
+			}
+
+			.buttonRight {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				height: 72rpx;
+				width: 232rpx;
+				border-radius: 16rpx;
+				background: rgb(22, 93, 255);
+				font-weight: 400;
+				font-size: 32rpx;
+				color: #FFFFFF;
+				margin-left: 10rpx;
+			}
+		}
+	}
+
+	.contentWhite {
+		content: '';
+		position: fixed;
+		left: 0;
+		bottom: 0;
+		width: 100%;
+		height: 240rpx;
+		background: linear-gradient(to bottom,
+				#f3ece400 0%,
+				#F2F3F5 100%);
+		pointer-events: none;
+	}
+</style>
\ No newline at end of file