初始化代码

uniapp/uni-app/components/fix-bottom-button.vue

@@ -0,0 +1,69 @@
+<template>
+	<view class="content" :style="{background: bgColor}">
+		<block v-for="(item,index) in text" :key="index">
+			<view @click="confirm(item)" class="bottom-view"
+				:style="{width:(100/ text.length)+ '%',margin:text.length==1?'0 30rpx':index==0?'0 0 0 30rpx': index == text.length -1 ? '0 30rpx 0 0' : '',borderRadius:text.length==1?'88rpx':index==0?'88rpx 0 0 88rpx': index== text.length -1 ? '0 88rpx 88rpx 0' : '',background: item.type == 'confirm'? primaryColor : subColor}">
+				{{ item.text }}
+			</view>
+		</block>
+	</view>
+</template>
+
+<script>
+	import {
+		mapState,
+	} from "vuex"
+	export default {
+		props: {
+			text: {
+				type: Array,
+				default () {
+					return [{
+						text: '保存',
+						type: 'confirm'
+					}]
+				}
+			},
+			bgColor: {
+				type: String,
+				default () {
+					return '#fff'
+				}
+			}
+		},
+		computed: mapState({
+			primaryColor: state => state.config.configInfo.primaryColor,
+			subColor: state => state.config.configInfo.subColor,
+		}),
+		methods: {
+			confirm(item) {
+				this.$emit(item.type)
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.content {
+		position: fixed;
+		bottom: 0rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 100%;
+		height: 128rpx;
+		z-index: 997;
+		height: calc(128rpx + env(safe-area-inset-bottom) / 2);
+		padding-bottom: calc(env(safe-area-inset-bottom) / 2);
+
+		.bottom-view {
+			width: auto;
+			height: 88rpx;
+			line-height: 88rpx;
+			text-align: center;
+			font-size: 32rpx;
+			font-weight: bold;
+			color: #FFFFFF;
+		}
+	}
+</style>