299 lines
6.7 KiB
Vue
299 lines
6.7 KiB
Vue
<!-- 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> |