pda_uniapp/components/bottomBtn/bottomBtn.vue

<!-- PageBottom.vue -->
<template>
	<view class="pageBottom" :style="{ position: position, bottom: isSubmit ? '60rpx' : '0' }">
		<!-- 三按钮 -->
		<view class="thirdbuttons" v-if="isThird">
			<view class="buttonLeft button" @click="onSubmit()">{{ texts[0] }}</view>
			<view class="buttonMid button" @click="onCancel()">{{ texts[1] }}</view>
			<view class="buttonRight button" @click="onCheck()">{{ texts[2] }}</view>
		</view>

		<!-- 双按钮 -->
		<view class="buttons" v-else-if="isDouble">
			<view class="buttonLeft button" @click="onCancel()">{{ texts[0] }}</view>
			<view class="buttonRight button" @click="onSubmit()">{{ texts[1] }}</view>
		</view>

		<!-- 单按钮 -->
		<view v-else class="buttons" @click="onSubmit()">
			<view class="buttonOne button">{{ texts[0] }}</view>
		</view>
	</view>

</template>

<script>
	export default {
		name: 'PageBottom',

		// 接收的 props
		props: {
			backgroundWhite: {
				type: Boolean,
				default: false
			},
			isSubmit: {
				type: Boolean,
				default: false
			},
			isWhite: {
				type: Boolean,
				default: true
			},
			isThird: {
				type: Boolean,
				default: false
			},
			isDouble: {
				type: Boolean,
				default: false
			},
			disable: {
				type: Boolean,
				default: false
			},
			texts: {
				type: Array,
				default () {
					return ['取消', '确定'];
				}
			},
			text: {
				type: String,
				default: ''
			},
			position: {
				type: String,
				default: 'fixed'
			}
		},

		// 方法
		methods: {
			onSubmit() {
				if (this.disable) return
				this.$emit('onSubmit');
			},
			onCancel() {
				if (this.disable) return
				this.$emit('onCancel');
			},
			onCheck() {
				if (this.disable) return
				this.$emit('onCheck');
			}
		}
	};
</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;

			.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>